Context Navigation

clientDetails.cshtml @ 12551

Visit:

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

#2388:

HeuristicLab.Services.Hive.DataAccess-3.3:

updated database schema
updated sql scripts
updated HiveStatisticsGenerator

HeuristicLab.Services.WebApp-3.3:

merged from trunk

HeuristicLab.Services.WebApp.Status-3.3:

updated data api controller

HeuristicLab.Services.WebApp.Statistics-3.3:

added exception page
improved jobs, clients, users and groups page

File size: 17.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 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 id="tasks-filter" class="default-filter-header text-center">
184	<form class="form-inline">
185	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
186	<div class="btn-group" data-toggle="buttons">
187	<label class="btn btn-default" ng-class="{active: state.Selected}" ng-repeat="state in states"
188	ng-click="filterTaskState(state)">
189	<input type="checkbox" autocomplete="off" checked> {{state.State}}
190	</label>
191	</div>
192	</div>
193	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
194	<div class="btn-group" dropdown dropdown-append-to-body>
195	<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
196	{{curUserName}} <span class="caret"></span>
197	</button>
198	<ul class="dropdown-menu" role="menu">
199	<li>
200	<a ng-href="#/statistics/clients/{{client.Id}}"
201	ng-click="userChanged('00000000-0000-0000-0000-000000000000', 'All Users')">All Users</a>
202	</li>
203	<li class="divider"></li>
204	<li ng-repeat="user in client.Users">
205	<a ng-href="#/statistics/clients/{{client.Id}}"
206	ng-click="userChanged(user.Id, user.Name)">{{user.Name}}</a>
207	</li>
208	</ul>
209	</div>
210	</div>
211	</form>
212	</div>
213
214	<div class="default-view-container">
215	<div id="taskListContainer" class="row" ng-show="taskPage.Tasks.length">
216	<div class="col-lg-4 col-md-4" ng-repeat="task in taskPage.Tasks">
217	<div class="panel panel-default">
218	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
219	<div class="panel-heading cursor-pointer" ng-click="openDialog(($index + 1)+((curTaskPage-1)*(taskPageSize)), task)">
220	<h3 class="panel-title" style="display: inline">Task {{($index + 1)+((curTaskPage-1)*(taskPageSize))}}</h3>
221	<span ng-if="task.State == 'Finished'" class="label label-success" style="float: right;">{{task.State}}</span>
222	<span ng-if="task.State == 'Aborted' \|\| task.State == 'Failed'" class="label label-danger" style="float: right;">{{task.State}}</span>
223	<span ng-if="task.State == 'Waiting'" class="label label-warning" style="float: right;">{{task.State}}</span>
224	<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>
225	</div>
226	} else {
227	<div class="panel-heading">
228	<h3 class="panel-title" style="display: inline">Task {{($index + 1)+((curTaskPage-1)*(taskPageSize))}}</h3>
229	<span ng-if="task.State == 'Finished'" class="label label-success" style="float: right;">{{task.State}}</span>
230	<span ng-if="task.State == 'Aborted' \|\| task.State == 'Failed'" class="label label-danger" style="float: right;">{{task.State}}</span>
231	<span ng-if="task.State == 'Waiting'" class="label label-warning" style="float: right;">{{task.State}}</span>
232	<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>
233	</div>
234	}
235
236	<div class="panel-body">
237	<table class="table table-condensed table-no-border table-auto-width">
238	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator))
239	{
240	<tr>
241	<td colspan="2"><span data-fittext="0.99">{{task.Id}}</span></td>
242	</tr>
243	}
244	<tr>
245	<td>Start Time:</td>
246	<td ng-show="task.StartTime" class="text-right">{{task.StartTime \| toDate}}</td>
247	<td ng-hide="task.StartTime" class="text-right">Not started</td>
248	</tr>
249	<tr>
250	<td>End Time:</td>
251	<td ng-show="task.EndTime" class="text-right">{{task.EndTime \| toDate}}</td>
252	<td ng-hide="task.EndTime" class="text-right">Not finished</td>
253	</tr>
254	<tr>
255	<td>Calculating Time:</td>
256	<td class="text-right">{{task.CalculatingTime \| toTimespan}}</td>
257	</tr>
258	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator))
259	{
260	<tr>
261	<td>User:</td>
262	<td class="text-right">
263	<a ng-href="#/statistics/users/{{task.UserId}}" ng-show="task.UserName">{{task.UserName}}</a>
264	<span ng-hide="task.UserName">Unknown</span>
265	</td>
266	</tr>
267	<tr>
268	<td>Job:</td>
269	<td class="text-right">
270	<a ng-href="#/statistics/jobs/{{task.JobId}}" ng-show="task.JobName">{{task.JobName}}</a>
271	<span ng-hide="task.JobName">Unknown</span>
272	</td>
273	</tr>
274	}
275	</table>
276	</div>
277
278	</div>
279	</div>
280	</div>
281	<div ng-hide="taskPage.Tasks.length">
282	<p class="text-center">Please select at least one state!</p>
283	</div>
284	<div class="row text-center" ng-show="taskPage.TotalTasks > taskPage.Tasks.length">
285	<pagination max-size="10" total-items="taskPage.TotalTasks" ng-model="curTaskPage" ng-change="changeTaskPage()" items-per-page="taskPageSize"
286	boundary-links="true" rotate="false" num-pages="numPages"></pagination>
287	</div>
288	</div>
289
290	<div class="default-filter-header text-center">
291	<form class="form-inline">
292	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
293	<label for="fromDate">From: </label>
294	<div class="input-group">
295	<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" />
296	<span class="input-group-btn">
297	<button type="button" class="btn btn-default" ng-click="openFromDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
298	</span>
299	</div>
300	</div>
301	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
302	<label for="fromDate">To: </label>
303	<div class="input-group">
304	<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" />
305	<span class="input-group-btn">
306	<button type="button" class="btn btn-default" ng-click="openToDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
307	</span>
308	</div>
309	</div>
310	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
311	<button type="button" class="btn btn-default" ng-click="updateCharts()">
312	Apply
313	</button>
314	</div>
315	</form>
316	</div>
317
318	<div class="default-view-container">
319	<div class="row">
320	<div class="col-lg-12">
321	<div class="panel panel-default">
322	<div class="panel-heading">
323	<h3 class="panel-title">CPU Utilization Chart</h3>
324	</div>
325	<div class="panel-body">
326	<flot dataset="cpuSeries" options="chartOptions"></flot>
327	</div>
328	</div>
329	</div>
330	</div>
331
332	<div class="row">
333	<div class="col-lg-12">
334	<div class="panel panel-default">
335	<div class="panel-heading">
336	<h3 class="panel-title">Core Chart</h3>
337	</div>
338	<div class="panel-body">
339	<flot dataset="coreSeries" options="fillChartOptions"></flot>
340	</div>
341	</div>
342	</div>
343	</div>
344
345	<div class="row">
346	<div class="col-lg-12">
347	<div class="panel panel-default">
348	<div class="panel-heading">
349	<h3 class="panel-title">Memory Chart</h3>
350	</div>
351	<div class="panel-body">
352	<flot dataset="memorySeries" options="fillChartOptions"></flot>
353	</div>
354	</div>
355	</div>
356	</div>
357	</div>

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

Download in other formats:

Original Format