Context Navigation

clientDetails.cshtml @ 12516

Visit:

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

#2388:

HeuristicLab.Services.Hive.DataAccess-3.3:

updated daos
changed statistics database schema
updated HiveStatisticsGenerator

HeuristicLab.Services.WebApp.Statistics-3.3:

added jobs, client and user page

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

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

Download in other formats:

Original Format