Free cookie consent management tool by TermsFeed Policy Generator

source: trunk/sources/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/status.cshtml @ 12546

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.