Context Navigation

status.cshtml @ 12546

Visit:

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

#2394:

HeuristicLab.Services.WebApp.Status:

added used / total cores
moved kb to gb filter to WebApp

HeuristicLab.Services.WebApp:

added about page
added filter

File size: 17.1 KB

Line
1	<header class="view-header">
2	<ul class="nav nav-list nav-list-topbar pull-left">
3	<li class="active">
4	<a ng-href="#/status">Status</a>
5	</li>
6	<li>
7	<a ng-href="#/status/history">History</a>
8	</li>
9	</ul>
10	</header>
11
12	<div class="default-view-container">
13	<div class="row">
14	<div class="col-lg-3 col-md-6">
15	<div class="panel panel-default">
16	<div class="panel-heading">
17	<h3 class="panel-title">Cores</h3>
18	</div>
19	<div class="panel-body">
20	<div class="text-center">
21	<knob knob-data="core.knobData" knob-options="knobOptions"></knob>
22	</div>
23	<table class="table table-no-border table-condensed table-auto-width table-content">
24	<tr data-toggle="tooltip" data-placement="bottom" title="All online slaves">
25	<td class="text-left">
26	Total:
27	</td>
28	<td class="text-right">{{status.CoreStatus.TotalCores \| number}}</td>
29	</tr>
30	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating and idle slaves that are allowed to calculate">
31	<td class="text-left">Active:</td>
32	<td class="text-right">{{status.CoreStatus.ActiveCores \| number}}</td>
33	</tr>
34	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating slaves that are allowed to calculate">
35	<td class="text-left">Calculating:</td>
36	<td class="text-right">{{status.CoreStatus.CalculatingCores \| number}}</td>
37	</tr>
38	</table>
39	</div>
40	</div>
41	</div>
42
43	<div class="col-lg-3 col-md-6">
44	<div class="panel panel-default">
45	<div class="panel-heading">
46	<h3 class="panel-title">CPU Utilization</h3>
47	</div>
48	<div class="panel-body">
49	<div class="text-center">
50	<knob knob-data="cpu.knobData" knob-options="knobOptions"></knob>
51	</div>
52	<table class="table table-no-border table-condensed table-auto-width table-content">
53	<tr data-toggle="tooltip" data-placement="bottom" title="All online slaves">
54	<td class="text-left">Total:</td>
55	<td class="text-right">{{status.CpuUtilizationStatus.TotalCpuUtilization \| number: 2}} %</td>
56	</tr>
57	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating and idle slaves that are allowed to calculate">
58	<td class="text-left">Active:</td>
59	<td class="text-right">{{status.CpuUtilizationStatus.ActiveCpuUtilization \| number: 2}} %</td>
60	</tr>
61	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating slaves that are allowed to calculate">
62	<td class="text-left">Calculating:</td>
63	<td class="text-right">{{status.CpuUtilizationStatus.CalculatingCpuUtilization \| number: 2}} %</td>
64	</tr>
65	</table>
66	</div>
67	</div>
68	</div>
69
70	<div class="col-lg-3 col-md-6">
71	<div class="panel panel-default">
72	<div class="panel-heading">
73	<h3 class="panel-title">Memory</h3>
74	</div>
75	<div class="panel-body">
76	<div class="text-center">
77	<knob knob-data="memory.knobData" knob-options="knobOptions"></knob>
78	</div>
79	<table class="table table-no-border table-condensed table-auto-width table-content">
80	<tr data-toggle="tooltip" data-placement="bottom" title="All online slaves">
81	<td class="text-left">Total:</td>
82	<td class="text-right">{{status.MemoryStatus.TotalMemory \| kbToGB}} GB</td>
83	</tr>
84	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating and idle slaves that are allowed to calculate">
85	<td class="text-left">Active:</td>
86	<td class="text-right">{{status.MemoryStatus.ActiveMemory \| kbToGB}} GB</td>
87	</tr>
88	<tr data-toggle="tooltip" data-placement="bottom" title="All calculating slaves that are allowed to calculate">
89	<td class="text-left">Calculating:</td>
90	<td class="text-right">{{status.MemoryStatus.UsedMemory \| kbToGB}} GB</td>
91	</tr>
92	</table>
93	</div>
94	</div>
95	</div>
96
97	<div class="col-lg-3 col-md-6">
98	<div class="panel panel-default">
99	<div class="panel-heading">
100	<h3 class="panel-title">Tasks</h3>
101	</div>
102	<div class="panel-body">
103	<table class="table table-no-border table-condensed table-auto-width table-content">
104	<tr>
105	<td class="text-left">Total:</td>
106	<td class="text-right">{{tasks.WaitingTasks + tasks.CalculatingTasks \| number}}</td>
107	</tr>
108	<tr>
109	<td class="text-left">Waiting:</td>
110	<td class="text-right">{{tasks.WaitingTasks \| number}}</td>
111	</tr>
112	<tr>
113	<td class="text-left">Calculating:</td>
114	<td class="text-right">{{tasks.CalculatingTasks \| number}}</td>
115	</tr>
116	</table>
117	</div>
118	</div>
119	</div>
120	</div>
121
122	<div class="row">
123	<div class="col-lg-12">
124	<div class="panel panel-default">
125	<div class="panel-heading">
126	<h3 class="panel-title">CPU Utilization Chart</h3>
127	</div>
128	<div class="panel-body">
129	<flot dataset="cpu.series" options="chartOptions"></flot>
130	</div>
131	</div>
132	</div>
133	</div>
134
135	<div class="row">
136	<div class="col-lg-12">
137	<div class="panel panel-default">
138	<div class="panel-heading">
139	<h3 class="panel-title">Core Chart</h3>
140	</div>
141	<div class="panel-body">
142	<flot dataset="core.series" options="fillChartOptions"></flot>
143	</div>
144	</div>
145	</div>
146	</div>
147
148	<div class="row">
149	<div class="col-lg-12">
150	<div class="panel panel-default">
151	<div class="panel-heading">
152	<h3 class="panel-title">Memory Chart</h3>
153	</div>
154	<div class="panel-body">
155	<flot dataset="memory.series" options="fillChartOptions"></flot>
156	</div>
157	</div>
158	</div>
159	</div>
160
161	<div class="row">
162	<div class="col-lg-12">
163	<div class="panel panel-default">
164	<div class="panel-heading">
165	<h3 class="panel-title">Tasks by User</h3>
166	</div>
167	<div class="panel-body">
168	<table class="table table-hover">
169	<thead>
170	<tr>
171	<th>Username</th>
172	<th>Calculating Tasks</th>
173	<th>Waiting Tasks</th>
174	</tr>
175	</thead>
176	<tr ng-repeat="task in status.TasksStatus">
177	<td>{{task.User.Name}}</td>
178	<td>{{task.CalculatingTasks \| number}}</td>
179	<td>{{task.WaitingTasks \| number}}</td>
180	</tr>
181	<tr ng-hide="status.TasksStatus.length">
182	<td colspan="3" class="text-center">
183	There are no waiting or calculating tasks available!
184	</td>
185	</tr>
186	</table>
187	</div>
188	</div>
189	</div>
190	</div>
191
192	<div class="row">
193	<div class="col-lg-12">
194	<div class="panel panel-default">
195	<div class="panel-heading">
196	<h3 class="panel-title">
197	<a data-toggle="collapse" data-target="#collapseActiveCalculatingSlaves"
198	ng-href="#/status">
199	Active Calculating Slaves
200	</a>
201	</h3>
202	</div>
203	<div id="collapseActiveCalculatingSlaves"
204	class="panel-collapse collapse in">
205	<div class="panel-body">
206	<table class="table table-hover">
207	<thead>
208	<tr>
209	<th ng-click="activeCalculatingSlavesOrderColumn='Slave.Name';
210	activeCalculatingSlavesReverseSort=!activeCalculatingSlavesReverseSort">
211	Slave
212	</th>
213	<th ng-click="activeCalculatingSlavesOrderColumn='CpuUtilization';
214	activeCalculatingSlavesReverseSort=!activeCalculatingSlavesReverseSort">
215	CPU Utilization
216	</th>
217	<th ng-click="activeCalculatingSlavesOrderColumn='Cores';
218	activeCalculatingSlavesReverseSort=!activeCalculatingSlavesReverseSort">
219	Cores
220	</th>
221	<th ng-click="activeCalculatingSlavesOrderColumn='Memory';
222	activeCalculatingSlavesReverseSort=!activeCalculatingSlavesReverseSort">
223	Memory
224	</th>
225	</tr>
226	</thead>
227	<tr ng-repeat="slave in activeCalculatingSlaves = (status.SlavesStatus
228	\| filter: {
229	IsAllowedToCalculate: true,
230	State: 'Calculating'
231	}
232	\| orderBy: activeCalculatingSlavesOrderColumn:activeCalculatingSlavesReverseSort)">
233	<td>{{slave.Slave.Name}}</td>
234	<td>{{slave.CpuUtilization \| number: 2}} %</td>
235	<td>{{slave.Cores - slave.FreeCores \| number}} / {{slave.Cores \| number}}</td>
236	<td>{{slave.Memory - slave.FreeMemory \| kbToGB}} / {{slave.Memory \| kbToGB}} GB</td>
237	</tr>
238	<tr ng-hide="activeCalculatingSlaves.length">
239	<td colspan="4" class="text-center">
240	There are no active calculating slaves available!
241	</td>
242	</tr>
243	</table>
244	</div>
245	</div>
246	</div>
247	</div>
248	</div>
249
250	<div class="row">
251	<div class="col-lg-12">
252	<div class="panel panel-default">
253	<div class="panel-heading">
254	<h3 class="panel-title">
255	<a data-toggle="collapse" data-target="#collapseActiveIdleSlaves"
256	ng-href="#/status" class="collapsed">
257	Active Idle Slaves
258	</a>
259	</h3>
260	</div>
261	<div id="collapseActiveIdleSlaves"
262	class="panel-collapse collapse">
263	<div class="panel-body">
264	<table class="table table-hover">
265	<thead>
266	<tr>
267	<th ng-click="activeIdleSlavesOrderColumn='Slave.Name';
268	activeIdleSlavesReverseSort=!activeIdleSlavesReverseSort">
269	Slave
270	</th>
271	<th ng-click="activeIdleSlavesOrderColumn='CpuUtilization';
272	activeIdleSlavesReverseSort=!activeIdleSlavesReverseSort">
273	CPU Utilization
274	</th>
275	<th ng-click="activeIdleSlavesOrderColumn='Cores';
276	activeIdleSlavesReverseSort=!activeIdleSlavesReverseSort">
277	Cores
278	</th>
279	<th ng-click="activeIdleSlavesOrderColumn='Memory';
280	activeIdleSlavesReverseSort=!activeIdleSlavesReverseSort">
281	Memory
282	</th>
283	</tr>
284	</thead>
285	<tr ng-repeat="slave in activeIdleSlaves = (status.SlavesStatus
286	\| filter: {
287	IsAllowedToCalculate: true,
288	State: 'Idle'
289	}
290	\| orderBy: activeIdleSlavesOrderColumn:activeIdleSlavesReverseSort)">
291	<td>{{slave.Slave.Name}}</td>
292	<td>{{slave.CpuUtilization \| number: 2}} %</td>
293	<td>{{slave.Cores - slave.FreeCores \| number}} / {{slave.Cores \| number}}</td>
294	<td>{{slave.Memory - slave.FreeMemory \| kbToGB}} / {{slave.Memory \| kbToGB}} GB</td>
295	</tr>
296	<tr ng-hide="activeIdleSlaves.length">
297	<td colspan="4" class="text-center">
298	There are no active idle slaves available!
299	<td>
300	</tr>
301	</table>
302	</div>
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">
313	<a data-toggle="collapse" data-target="#collapseInactiveSlaves"
314	ng-href="#/status" class="collapsed">
315	Inactive Slaves
316	</a>
317	</h3>
318	</div>
319	<div id="collapseInactiveSlaves"
320	class="panel-collapse collapse">
321	<div class="panel-body">
322	<table class="table table-hover">
323	<thead>
324	<tr>
325	<th ng-click="inactiveSlavesOrderColumn='Slave.Name';
326	inactiveSlavesReverseSort=!inactiveSlavesReverseSort">
327	Slave
328	</th>
329	<th ng-click="inactiveSlavesOrderColumn='CpuUtilization';
330	inactiveSlavesReverseSort=!inactiveSlavesReverseSort">
331	CPU Utilization
332	</th>
333	<th ng-click="inactiveSlavesOrderColumn='Cores';
334	inactiveSlavesReverseSort=!inactiveSlavesReverseSort">
335	Cores
336	</th>
337	<th ng-click="inactiveSlavesOrderColumn='Memory';
338	inactiveSlavesReverseSort=!inactiveSlavesReverseSort">
339	Memory
340	</th>
341	</tr>
342	</thead>
343	<tr ng-repeat="slave in inactiveSlaves = (status.SlavesStatus
344	\| filter: {
345	IsAllowedToCalculate: false
346	}
347	\| orderBy: inactiveSlavesOrderColumn:inactiveSlavesReverseSort)">
348	<td>{{slave.Slave.Name}}</td>
349	<td>{{slave.CpuUtilization \| number: 2}} %</td>
350	<td>{{slave.Cores - slave.FreeCores \| number}} / {{slave.Cores \| number}}</td>
351	<td>{{slave.Memory - slave.FreeMemory \| kbToGB}} / {{slave.Memory \| kbToGB}} GB</td>
352	</tr>
353	<tr ng-hide="inactiveSlaves.length">
354	<td colspan="4" class="text-center">No inactive slaves available!</td>
355	</tr>
356	</table>
357	</div>
358	</div>
359	</div>
360	</div>
361	</div>
362	</div>
363
364	<script>
365	$(document).ready(function () {
366	$('[data-toggle="tooltip"]').tooltip();
367	});
368	</script>

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

Download in other formats:

Original Format