Context Navigation

groupDetails.cshtml @ 16321

Visit:

Last change on this file since 16321 was 14828, checked in by jkarder, 8 years ago

#2743: worked on web app

added sorting functionality to some tables

File size: 13.8 KB

Line
1	@using HeuristicLab.Services.Access.DataTransfer
2	@using HeuristicLab.Services.Hive
3	<header class="view-header">
4	<ul class="nav nav-list nav-list-topbar pull-left">
5	<li>
6	<a ng-href="#/statistics/jobs">Jobs</a>
7	</li>
8	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
9	<li>
10	<a ng-href="#/statistics/users">Users</a>
11	</li>
12	}
13	<li>
14	<a ng-href="#/statistics/clients">Clients</a>
15	</li>
16	<li class="active">
17	<a ng-href="#/statistics/groups">Groups</a>
18	</li>
19	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
20	<li>
21	<a ng-href="#/statistics/exceptions">Exceptions</a>
22	</li>
23	}
24	</ul>
25	</header>
26
27	<div class="default-view-container">
28	<div class="row">
29	<div class="col-lg-9">
30	<div class="panel panel-default">
31	<div class="panel-heading">
32	<h3 class="panel-title">Group Details</h3>
33	</div>
34	<div class="panel-body">
35	<div class="row">
36	<div class="col-md-6">
37	<table class="table table-no-border table-condensed table-auto-width table-content">
38	<tr>
39	<td class="text-left">Name:</td>
40	<td class="text-right">{{group.Name}}</td>
41	</tr>
42	<tr>
43	<td class="text-left">Clients:</td>
44	<td class="text-right">{{group.OnlineClients}} / {{group.TotalClients}}</td>
45	</tr>
46	</table>
47	</div>
48	<div class="col-md-6">
49	<table class="table table-no-border table-condensed table-auto-width table-content">
50	<tr>
51	<td class="text-left">Total Unavailable Time:</td>
52	<td class="text-right">{{group.TotalUnavailableTime \| toTimespan}}</td>
53	</tr>
54	<tr>
55	<td class="text-left">Total Calculating Time:</td>
56	<td class="text-right">{{group.TotalCalculatingTime \| toTimespan}}</td>
57	</tr>
58	<tr>
59	<td class="text-left">Total Idle Time:</td>
60	<td class="text-right">{{group.TotalIdleTime \| toTimespan}}</td>
61	</tr>
62	<tr>
63	<td class="text-left">Total Transferring Time:</td>
64	<td class="text-right">{{group.TotalTransferringTime \| toTimespan}}</td>
65	</tr>
66	<tr>
67	<td class="text-left">Total Offline Time:</td>
68	<td class="text-right">{{group.TotalOfflineTime \| toTimespan}}</td>
69	</tr>
70	</table>
71	</div>
72	</div>
73	</div>
74	</div>
75	</div>
76	<div class="col-lg-3 col-md-6">
77	<div class="panel panel-default">
78	<div class="panel-heading">
79	<h3 class="panel-title">Tasks Overview</h3>
80	</div>
81	<div class="panel-body">
82	<table class="table table-no-border table-condensed table-auto-width table-content">
83	<tr>
84	<td class="text-left">Total:</td>
85	<td class="text-right">{{totalGroupTasks}}</td>
86	</tr>
87	<tr ng-repeat="state in group.TasksStates">
88	<td class="text-left">{{state.State}}:</td>
89	<td class="text-right">{{state.Count}}</td>
90	</tr>
91	</table>
92	</div>
93	</div>
94	</div>
95	</div>
96
97	<div class="row">
98	<div class="col-lg-3 col-md-6">
99	<div class="panel panel-default">
100	<div class="panel-heading">
101	<h3 class="panel-title">Cores</h3>
102	</div>
103	<div class="panel-body">
104	<div class="text-center">
105	<knob knob-data="knobData.cores" knob-options="knobOptions"></knob>
106	</div>
107	<table class="table table-no-border table-condensed table-auto-width table-content">
108	<tr>
109	<td class="text-left">Total:</td>
110	<td class="text-right">{{group.TotalCores \| number}}</td>
111	</tr>
112	<tr>
113	<td class="text-left">Used:</td>
114	<td class="text-right">{{group.UsedCores \| number}}</td>
115	</tr>
116	</table>
117	</div>
118	</div>
119	</div>
120
121	<div class="col-lg-3 col-md-6">
122	<div class="panel panel-default">
123	<div class="panel-heading">
124	<h3 class="panel-title">CPU Utilization</h3>
125	</div>
126	<div class="panel-body">
127	<div class="text-center">
128	<knob knob-data="knobData.cpu" knob-options="knobOptions"></knob>
129	</div>
130	<table class="table table-no-border table-condensed table-auto-width table-content">
131	<tr>
132	<td class="text-left">Total:</td>
133	<td class="text-right">{{group.TotalCpuUtilization \| number: 2}} %</td>
134	</tr>
135	<tr>
136	<td class="text-left">Active:</td>
137	<td class="text-right">{{group.ActiveCpuUtilization \| number: 2}} %</td>
138	</tr>
139	</table>
140	</div>
141	</div>
142	</div>
143
144	<div class="col-lg-3 col-md-6">
145	<div class="panel panel-default">
146	<div class="panel-heading">
147	<h3 class="panel-title">Memory</h3>
148	</div>
149	<div class="panel-body">
150	<div class="text-center">
151	<knob knob-data="knobData.memory" knob-options="knobOptions"></knob>
152	</div>
153	<table class="table table-no-border table-condensed table-auto-width table-content">
154	<tr>
155	<td class="text-left">Total:</td>
156	<td class="text-right">{{group.TotalMemory \| kbToGB}} GB</td>
157	</tr>
158	<tr>
159	<td class="text-left">Used:</td>
160	<td class="text-right">{{group.UsedMemory \| kbToGB}} GB</td>
161	</tr>
162	</table>
163	</div>
164	</div>
165	</div>
166	</div>
167
168	<div class="row">
169	<div class="col-lg-12">
170	<div class="panel panel-default">
171	<div class="panel-heading">
172	<h3 class="panel-title">Clients</h3>
173	</div>
174	<div class="panel-body">
175	<table class="table table-hover table-condensed" ts-wrapper>
176	<thead>
177	<tr>
178	<th>#</th>
179	<th ts-criteria="Name">Client Name</th>
180	<th ts-criteria="UsedCores">Cores</th>
181	<th ts-criteria="CpuUtilization">Cpu Utilization</th>
182	<th ts-criteria="UsedMemory">Memory</th>
183	<th ts-criteria="State">State</th>
184	<th></th>
185	</tr>
186	</thead>
187	<tr ng-repeat="client in clientPage.Clients" ts-repeat>
188	<td>{{($index + 1)+((curClientsPage-1)*(clientsPageSize))}}</td>
189	<td>{{client.Name}}</td>
190	<td>{{client.UsedCores}} / {{client.TotalCores}}</td>
191	<td>{{client.CpuUtilization \| number: 2}} %</td>
192	<td>{{client.UsedMemory \| kbToGB}} / {{client.TotalMemory \| kbToGB}}</td>
193	<td>{{client.State}}</td>
194	<td>
195	<a ng-href="#/statistics/clients/{{client.Id}}">Details</a>
196	</td>
197	</tr>
198	<tr ng-hide="clientPage.Clients.length">
199	<td colspan="7" class="text-center">No clients found!</td>
200	</tr>
201	</table>
202	<div class="row text-center" ng-show="clientPage.TotalClients > clientPage.Clients.length">
203	<pagination max-size="10" total-items="clientPage.TotalClients" ng-model="curClientsPage" ng-change="changeClientsPage()" items-per-page="clientsPageSize"
204	boundary-links="true" rotate="false" num-pages="numPages"></pagination>
205	</div>
206	</div>
207	</div>
208	</div>
209	</div>
210	</div>
211
212	<div class="default-filter-header text-center">
213	<form class="form-inline">
214	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
215	<label for="fromDate">From: </label>
216	<div class="input-group">
217	<input id="fromDate" type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="fromDate" is-open="fromIsOpen" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
218	<span class="input-group-btn">
219	<button type="button" class="btn btn-default" ng-click="openFromDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
220	</span>
221	</div>
222	</div>
223	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
224	<label for="fromDate">To: </label>
225	<div class="input-group">
226	<input id="fromDate" type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="toIsOpen" datepicker-options="dateOptions" ng-required="true" close-text="Close"/>
227	<span class="input-group-btn">
228	<button type="button" class="btn btn-default" ng-click="openToDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
229	</span>
230	</div>
231	</div>
232	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
233	<div class="btn-group" dropdown dropdown-append-to-body>
234	<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width: 145px; text-align: left;">
235	<span class="text-left" style="display: inline-block; width: 100px;">{{curQuickSelection.name}}</span>
236	<span class="glyphicon glyphicon-chevron-down" style="margin-top: 3px;"></span>
237	</button>
238	<ul class="dropdown-menu" role="menu">
239	<li ng-repeat="quickSelection in quickSelectionList">
240	<a class="cursor-pointer" ng-click="changeQuickSelection(quickSelection)">{{quickSelection.name}}</a>
241	</li>
242	</ul>
243	</div>
244	</div>
245	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
246	<button type="button" class="btn btn-default" ng-click="updateCharts()">
247	Apply
248	</button>
249	</div>
250	</form>
251	</div>
252
253	<div class="default-view-container">
254	<div class="row">
255	<div class="col-lg-12">
256	<div class="panel panel-default">
257	<div class="panel-heading">
258	<h3 class="panel-title">CPU Utilization Chart</h3>
259	</div>
260	<div class="panel-body">
261	<flot dataset="cpuSeries" options="chartOptions"></flot>
262	</div>
263	</div>
264	</div>
265	</div>
266
267	<div class="row">
268	<div class="col-lg-12">
269	<div class="panel panel-default">
270	<div class="panel-heading">
271	<h3 class="panel-title">Core Chart</h3>
272	</div>
273	<div class="panel-body">
274	<flot dataset="coreSeries" options="fillChartOptions"></flot>
275	</div>
276	</div>
277	</div>
278	</div>
279
280	<div class="row">
281	<div class="col-lg-12">
282	<div class="panel panel-default">
283	<div class="panel-heading">
284	<h3 class="panel-title">Memory Chart</h3>
285	</div>
286	<div class="panel-body">
287	<flot dataset="memorySeries" options="fillChartOptions"></flot>
288	</div>
289	</div>
290	</div>
291	</div>
292	</div>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format