Context Navigation

clientDetails.cshtml @ 18242

Visit:

Last change on this file since 18242 was 12780, checked in by dglaser, 9 years ago

#2388:

HeuristicLab.Services.WebApp.Status-3.3:
HeuristicLab.Services.WebApp.Statistics-3.3:

Added 'Last 6 Months' and 'Last Year' to the QuickSelection

HeuristicLab.Services.WebApp.Statistics-3.3:

Added Group Name to expired clients

File size: 18.4 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 class="active">
14	<a ng-href="#/statistics/clients">Clients</a>
15	</li>
16	<li>
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 col-md-6">
30	<div class="panel panel-default">
31	<div class="panel-heading">
32	<h3 class="panel-title">Client 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>{{client.Name}}</td>
41	</tr>
42	<tr>
43	<td class="text-left">Group:</td>
44	<td ng-show="client.GroupName"><a ng-href="#/statistics/groups/{{client.GroupId}}">{{client.GroupName}}</a></td>
45	<td ng-hide="client.GroupName">None</td>
46	</tr>
47	<tr>
48	<td class="text-left">State:</td>
49	<td>{{client.State}}</td>
50	</tr>
51	<tr>
52	<td class="text-left">Up Time:</td>
53	<td>{{client.UpTime \| toTimespan}}</td>
54	</tr>
55	<tr>
56	<td class="text-left">Last Update:</td>
57	<td>{{client.LastUpdate \| toDate}}</td>
58	</tr>
59	</table>
60	</div>
61	<div class="col-md-6">
62	<table class="table table-no-border table-condensed table-auto-width table-content">
63	<tr>
64	<td class="text-left">Total Unavailable Time:</td>
65	<td class="text-right">{{client.TotalUnavailableTime \| toTimespan}}</td>
66	</tr>
67	<tr>
68	<td class="text-left">Total Calculating Time:</td>
69	<td class="text-right">{{client.TotalCalculatingTime \| toTimespan}}</td>
70	</tr>
71	<tr>
72	<td class="text-left">Total Idle Time:</td>
73	<td class="text-right">{{client.TotalIdleTime \| toTimespan}}</td>
74	</tr>
75	<tr>
76	<td class="text-left">Total Transferring Time:</td>
77	<td class="text-right">{{client.TotalTransferringTime \| toTimespan}}</td>
78	</tr>
79	<tr>
80	<td class="text-left">Total Offline Time:</td>
81	<td class="text-right">{{client.TotalOfflineTime \| toTimespan}}</td>
82	</tr>
83	</table>
84	</div>
85	</div>
86	</div>
87	</div>
88	</div>
89
90	<div class="col-lg-3 col-md-6">
91	<div class="panel panel-default">
92	<div class="panel-heading">
93	<h3 class="panel-title">Tasks Overview</h3>
94	</div>
95	<div class="panel-body">
96	<table class="table table-no-border table-condensed table-auto-width table-content">
97	<tr>
98	<td class="text-left">Total:</td>
99	<td class="text-right">{{totalClientTasks}}</td>
100	</tr>
101	<tr ng-repeat="state in states">
102	<td class="text-left">{{state.State}}:</td>
103	<td class="text-right">{{state.Count}}</td>
104	</tr>
105	</table>
106	</div>
107	</div>
108	</div>
109	</div>
110
111	<div class="row">
112	<div class="col-lg-3 col-md-6">
113	<div class="panel panel-default">
114	<div class="panel-heading">
115	<h3 class="panel-title">Cores</h3>
116	</div>
117	<div class="panel-body">
118	<div class="text-center">
119	<knob knob-data="knobData.cores" knob-options="knobOptions"></knob>
120	</div>
121	<table class="table table-no-border table-condensed table-auto-width table-content">
122	<tr>
123	<td class="text-left">Total:</td>
124	<td class="text-right">{{client.TotalCores \| number}}</td>
125	</tr>
126	<tr>
127	<td class="text-left">Used:</td>
128	<td class="text-right">{{client.UsedCores \| number}}</td>
129	</tr>
130	</table>
131	</div>
132	</div>
133	</div>
134
135	<div class="col-lg-3 col-md-6">
136	<div class="panel panel-default">
137	<div class="panel-heading">
138	<h3 class="panel-title">CPU Utilization</h3>
139	</div>
140	<div class="panel-body">
141	<div class="text-center">
142	<knob knob-data="knobData.cpu" knob-options="knobOptions"></knob>
143	</div>
144	<table class="table table-no-border table-condensed table-auto-width table-content">
145	<tr>
146	<td class="text-left"> </td>
147	<td class="text-right"> </td>
148	</tr>
149	<tr>
150	<td class="text-left"> </td>
151	<td class="text-right"> </td>
152	</tr>
153	</table>
154	</div>
155	</div>
156	</div>
157
158	<div class="col-lg-3 col-md-6">
159	<div class="panel panel-default">
160	<div class="panel-heading">
161	<h3 class="panel-title">Memory</h3>
162	</div>
163	<div class="panel-body">
164	<div class="text-center">
165	<knob knob-data="knobData.memory" knob-options="knobOptions"></knob>
166	</div>
167	<table class="table table-no-border table-condensed table-auto-width table-content">
168	<tr>
169	<td class="text-left">Total:</td>
170	<td class="text-right">{{client.TotalMemory \| kbToGB}} GB</td>
171	</tr>
172	<tr>
173	<td class="text-left">Used:</td>
174	<td class="text-right">{{client.UsedMemory \| kbToGB}} GB</td>
175	</tr>
176	</table>
177	</div>
178	</div>
179	</div>
180	</div>
181	</div>
182
183	<div class="default-filter-header text-center">
184	<form class="form-inline">
185	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
186	<label for="fromDate">From: </label>
187	<div class="input-group">
188	<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" />
189	<span class="input-group-btn">
190	<button type="button" class="btn btn-default" ng-click="openFromDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
191	</span>
192	</div>
193	</div>
194	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
195	<label for="fromDate">To: </label>
196	<div class="input-group">
197	<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"/>
198	<span class="input-group-btn">
199	<button type="button" class="btn btn-default" ng-click="openToDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
200	</span>
201	</div>
202	</div>
203	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
204	<div class="btn-group" dropdown dropdown-append-to-body>
205	<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width: 145px; text-align: left;">
206	<span class="text-left" style="display: inline-block; width: 100px;">{{curQuickSelection.name}}</span>
207	<span class="glyphicon glyphicon-chevron-down" style="margin-top: 3px;"></span>
208	</button>
209	<ul class="dropdown-menu" role="menu">
210	<li ng-repeat="quickSelection in quickSelectionList">
211	<a class="cursor-pointer" ng-click="changeQuickSelection(quickSelection)">{{quickSelection.name}}</a>
212	</li>
213	</ul>
214	</div>
215	</div>
216	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
217	<button type="button" class="btn btn-default" ng-click="updateCharts()">
218	Apply
219	</button>
220	</div>
221	</form>
222	</div>
223
224	<div class="default-view-container">
225	<div class="row">
226	<div class="col-lg-12">
227	<div class="panel panel-default">
228	<div class="panel-heading">
229	<h3 class="panel-title">CPU Utilization Chart</h3>
230	</div>
231	<div class="panel-body">
232	<flot dataset="cpuSeries" options="chartOptions"></flot>
233	</div>
234	</div>
235	</div>
236	</div>
237
238	<div class="row">
239	<div class="col-lg-12">
240	<div class="panel panel-default">
241	<div class="panel-heading">
242	<h3 class="panel-title">Core Chart</h3>
243	</div>
244	<div class="panel-body">
245	<flot dataset="coreSeries" options="fillChartOptions"></flot>
246	</div>
247	</div>
248	</div>
249	</div>
250
251	<div class="row">
252	<div class="col-lg-12">
253	<div class="panel panel-default">
254	<div class="panel-heading">
255	<h3 class="panel-title">Memory Chart</h3>
256	</div>
257	<div class="panel-body">
258	<flot dataset="memorySeries" options="fillChartOptions"></flot>
259	</div>
260	</div>
261	</div>
262	</div>
263	</div>
264
265	<div id="tasks-filter" class="default-filter-header text-center">
266	<form class="form-inline">
267	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
268	<div class="btn-group" data-toggle="buttons">
269	<label class="btn btn-default" ng-class="{active: state.Selected}" ng-repeat="state in states"
270	ng-click="filterTaskState(state)">
271	<input type="checkbox" autocomplete="off" checked> {{state.State}}
272	</label>
273	</div>
274	</div>
275	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
276	<div class="btn-group" dropdown dropdown-append-to-body>
277	<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
278	{{curUserName}} <span class="caret"></span>
279	</button>
280	<ul class="dropdown-menu" role="menu">
281	<li>
282	<a ng-href="#/statistics/clients/{{client.Id}}"
283	ng-click="userChanged('00000000-0000-0000-0000-000000000000', 'All Users')">All Users</a>
284	</li>
285	<li class="divider"></li>
286	<li ng-repeat="user in client.Users">
287	<a ng-href="#/statistics/clients/{{client.Id}}"
288	ng-click="userChanged(user.Id, user.Name)">{{user.Name}}</a>
289	</li>
290	</ul>
291	</div>
292	</div>
293	</form>
294	</div>
295
296	<div class="default-view-container">
297	<div id="taskListContainer" class="row" ng-show="taskPage.Tasks.length">
298	<div class="col-lg-4 col-md-4" ng-repeat="task in taskPage.Tasks">
299	<div class="panel panel-default">
300	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
301	<div class="panel-heading cursor-pointer" ng-click="openDialog(($index + 1)+((curTaskPage-1)*(taskPageSize)), task)">
302	<h3 class="panel-title" style="display: inline">Task {{($index + 1)+((curTaskPage-1)*(taskPageSize))}}</h3>
303	<span ng-if="task.State == 'Finished'" class="label label-success" style="float: right;">{{task.State}}</span>
304	<span ng-if="task.State == 'Aborted' \|\| task.State == 'Failed'" class="label label-danger" style="float: right;">{{task.State}}</span>
305	<span ng-if="task.State == 'Waiting'" class="label label-warning" style="float: right;">{{task.State}}</span>
306	<span ng-if="task.State != 'Waiting' && task.State != 'Failed' && task.State != 'Aborted' && task.State != 'Finished'" class="label label-default" style="float: right;">{{task.State}}</span>
307	</div>
308	} else {
309	<div class="panel-heading">
310	<h3 class="panel-title" style="display: inline">Task {{($index + 1)+((curTaskPage-1)*(taskPageSize))}}</h3>
311	<span ng-if="task.State == 'Finished'" class="label label-success" style="float: right;">{{task.State}}</span>
312	<span ng-if="task.State == 'Aborted' \|\| task.State == 'Failed'" class="label label-danger" style="float: right;">{{task.State}}</span>
313	<span ng-if="task.State == 'Waiting'" class="label label-warning" style="float: right;">{{task.State}}</span>
314	<span ng-if="task.State != 'Waiting' && task.State != 'Failed' && task.State != 'Aborted' && task.State != 'Finished'" class="label label-default" style="float: right;">{{task.State}}</span>
315	</div>
316	}
317
318	<div class="panel-body">
319	<table class="table table-condensed table-no-border table-auto-width">
320	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
321	<tr>
322	<td colspan="2"><span data-fittext="0.99">{{task.Id}}</span></td>
323	</tr>
324	}
325	<tr>
326	<td>Start Time:</td>
327	<td ng-show="task.StartTime" class="text-right">{{task.StartTime \| toDate}}</td>
328	<td ng-hide="task.StartTime" class="text-right">Not started</td>
329	</tr>
330	<tr>
331	<td>End Time:</td>
332	<td ng-show="task.EndTime" class="text-right">{{task.EndTime \| toDate}}</td>
333	<td ng-hide="task.EndTime" class="text-right">Not finished</td>
334	</tr>
335	<tr>
336	<td>Calculating Time:</td>
337	<td class="text-right">{{task.CalculatingTime \| toTimespan}}</td>
338	</tr>
339	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
340	<tr>
341	<td>User:</td>
342	<td class="text-right">
343	<a ng-href="#/statistics/users/{{task.UserId}}" ng-show="task.UserName">{{task.UserName}}</a>
344	<span ng-hide="task.UserName">Unknown</span>
345	</td>
346	</tr>
347	<tr>
348	<td>Job:</td>
349	<td class="text-right">
350	<a ng-href="#/statistics/jobs/{{task.JobId}}" ng-show="task.JobName">{{task.JobName}}</a>
351	<span ng-hide="task.JobName">Unknown</span>
352	</td>
353	</tr>
354	}
355	</table>
356	</div>
357
358	</div>
359	</div>
360	</div>
361	<div ng-hide="taskPage.Tasks.length">
362	<p class="text-center">Please select at least one state!</p>
363	</div>
364	<div class="row text-center" ng-show="taskPage.TotalTasks > taskPage.Tasks.length">
365	<pagination max-size="10" total-items="taskPage.TotalTasks" ng-model="curTaskPage" ng-change="changeTaskPage()" items-per-page="taskPageSize"
366	boundary-links="true" rotate="false" num-pages="numPages"></pagination>
367	</div>
368	</div>
369

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

Download in other formats:

Original Format