source: stable/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/status.cshtml @ 12962

Last change on this file since 12962 was 12962, checked in by ascheibe, 7 years ago

#2388 merged r12878, r12879, r12883, r12885, r12913, r12914, r12925, r12932, r12961 into stable

File size: 17.7 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.CalculatingMemory | 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">Status Overview</h3>
127            </div>
128            <div class="panel-body">
129                <div class="row">
130                    <div class="col-md-6">
131                        <table class="table table-no-border table-condensed table-auto-width table-content">
132                            <tr>
133                                <td class="text-left">Current Average Waiting Time:</td>
134                                <td class="text-right">{{status.TimeStatus.AvgWaitingTime | toTimespan}}</td>
135                            </tr>
136                            <tr>
137                                <td class="text-left">Total CPU Time:</td>
138                                <td class="text-right">{{status.TimeStatus.TotalCpuTime | toTimespan}}</td>
139                            </tr>
140                            <tr>
141                                <td class="text-left">Since:</td>
142                                <td class="text-right">{{status.TimeStatus.BeginDate | toDate}}</td>
143                            </tr>
144                        </table>
145                    </div>
146                    <div class="col-md-6">
147                        <table class="table table-no-border table-condensed table-auto-width table-content">
148                            <tr>
149                                <td class="text-left">Minimum Calculating Time:</td>
150                                <td class="text-right">{{status.TimeStatus.MinCalculatingTime | toTimespan}}</td>
151                            </tr>
152                            <tr>
153                                <td class="text-left">Maximum Calculating Time:</td>
154                                <td class="text-right">{{status.TimeStatus.MaxCalculatingTime | toTimespan}}</td>
155                            </tr>
156                            <tr>
157                                <td class="text-left">Average Calculating Time:</td>
158                                <td class="text-right">{{status.TimeStatus.AvgCalculatingTime | toTimespan}}</td>
159                            </tr>
160                            <tr>
161                                <td class="text-left">Standard Deviation Calculating Time:</td>
162                                <td class="text-right">{{status.TimeStatus.StandardDeviationCalculatingTime | toTimespan}}</td>
163                            </tr>
164                        </table>
165                    </div>
166                </div>
167            </div>
168        </div>
169    </div>
170</div>
171
172<div class="row">
173    <div class="col-lg-12">
174        <div class="panel panel-default">
175            <div class="panel-heading">
176                <h3 class="panel-title">CPU Utilization Chart</h3>
177            </div>
178            <div class="panel-body">
179                <flot dataset="cpu.series" options="chartOptions"></flot>
180            </div>
181        </div>
182    </div>
183</div>
184
185<div class="row">
186    <div class="col-lg-12">
187        <div class="panel panel-default">
188            <div class="panel-heading">
189                <h3 class="panel-title">Core Chart</h3>
190            </div>
191            <div class="panel-body">
192                <flot dataset="core.series" options="fillChartOptions"></flot>
193            </div>
194        </div>
195    </div>
196</div>
197
198<div class="row">
199    <div class="col-lg-12">
200        <div class="panel panel-default">
201            <div class="panel-heading">
202                <h3 class="panel-title">Memory Chart</h3>
203            </div>
204            <div class="panel-body">
205                <flot dataset="memory.series" options="fillChartOptions"></flot>
206            </div>
207        </div>
208    </div>
209</div>
210
211<div class="row">
212    <div class="col-lg-12">
213        <div class="panel panel-default">
214            <div class="panel-heading">
215                <h3 class="panel-title">Tasks by User</h3>
216            </div>
217            <div class="panel-body">
218                <table class="table table-hover" ts-wrapper>
219                    <thead>
220                        <tr>
221                            <th ts-criteria="User.Name">Username</th>
222                            <th ts-criteria="CalculatingTasks|parseInt">Calculating Tasks</th>
223                            <th ts-criteria="WaitingTasks|parseInt">Waiting Tasks</th>
224                        </tr>
225                    </thead>
226                    <tbody>
227                        <tr ng-repeat="task in status.TasksStatus" ts-repeat>
228                            <td>{{task.User.Name}}</td>
229                            <td>{{task.CalculatingTasks | number}}</td>
230                            <td>{{task.WaitingTasks | number}}</td>
231                        </tr>
232                        <tr ng-hide="status.TasksStatus.length">
233                            <td colspan="3" class="text-center">
234                                There are no waiting or calculating tasks available!
235                            </td>
236                        </tr>
237                    </tbody>
238                </table>
239            </div>
240        </div>
241    </div>
242</div>
243
244<div class="row">
245    <div class="col-lg-12">
246        <div class="panel panel-default">
247            <div class="panel-heading">
248                <h3 class="panel-title">
249                    <a data-toggle="collapse" data-target="#collapseActiveCalculatingSlaves"
250                       ng-href="#/status">
251                        Active Calculating Slaves
252                    </a>
253                </h3>
254            </div>
255            <div id="collapseActiveCalculatingSlaves"
256                 class="panel-collapse collapse in">
257                <div class="panel-body">
258                    <table class="table table-hover" ts-wrapper>
259                        <thead>
260                            <tr>
261                                <th ts-criteria="Slave.Name">Slave</th>
262                                <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
263                                <th ts-criteria="Cores|parseInt">Cores</th>
264                                <th ts-criteria="Memory|parseInt">Memory</th>
265                            </tr>
266                        </thead>
267                        <tbody>
268                            <tr ng-repeat="slave in activeCalculatingSlaves = (status.SlavesStatus
269                                | filter: {
270                                    IsAllowedToCalculate: true,
271                                    State: 'Calculating'
272                                  })" ts-repeat>
273                                <td>{{slave.Slave.Name}}</td>
274                                <td>{{slave.CpuUtilization | number: 2}} %</td>
275                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
276                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
277                            </tr>
278                            <tr ng-hide="activeCalculatingSlaves.length">
279                                <td colspan="4" class="text-center">
280                                    There are no active calculating slaves available!
281                                </td>
282                            </tr>
283                        </tbody>
284                    </table>
285                </div>
286            </div>
287        </div>
288    </div>
289</div>
290
291<div class="row">
292    <div class="col-lg-12">
293        <div class="panel panel-default">
294            <div class="panel-heading">
295                <h3 class="panel-title">
296                    <a data-toggle="collapse" data-target="#collapseActiveIdleSlaves"
297                       ng-href="#/status" class="collapsed">
298                        Active Idle Slaves
299                    </a>
300                </h3>
301            </div>
302            <div id="collapseActiveIdleSlaves"
303                 class="panel-collapse collapse">
304                <div class="panel-body">
305                    <table class="table table-hover" ts-wrapper>
306                        <thead>
307                        <tr>
308                            <th ts-criteria="Slave.Name">Slave</th>
309                            <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
310                            <th ts-criteria="Cores|parseInt">Cores</th>
311                            <th ts-criteria="Memory|parseInt">Memory</th>
312                        </tr>
313                        </thead>
314                        <tbody>
315                            <tr ng-repeat="slave in activeIdleSlaves = (status.SlavesStatus
316                                | filter: {
317                                    IsAllowedToCalculate: true,
318                                    State: 'Idle'
319                                  })" ts-repeat>
320                                <td>{{slave.Slave.Name}}</td>
321                                <td>{{slave.CpuUtilization | number: 2}} %</td>
322                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
323                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
324                            </tr>
325                            <tr ng-hide="activeIdleSlaves.length">
326                                <td colspan="4" class="text-center">
327                                    There are no active idle slaves available!
328                                <td>
329                            </tr>
330                        </tbody>
331                    </table>
332                </div>
333            </div>
334        </div>
335    </div>
336</div>
337
338<div class="row">
339    <div class="col-lg-12">
340        <div class="panel panel-default">
341            <div class="panel-heading">
342                <h3 class="panel-title">
343                    <a data-toggle="collapse" data-target="#collapseInactiveSlaves"
344                       ng-href="#/status" class="collapsed">
345                        Inactive Slaves
346                    </a>
347                </h3>
348            </div>
349            <div id="collapseInactiveSlaves"
350                 class="panel-collapse collapse">
351                <div class="panel-body">
352                    <table class="table table-hover" ts-wrapper>
353                        <thead>
354                            <tr>
355                                <th ts-criteria="Slave.Name">Slave</th>
356                                <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
357                                <th ts-criteria="Cores|parseInt">Cores</th>
358                                <th ts-criteria="Memory|parseInt">Memory</th>
359                            </tr>
360                        </thead>
361                        <tbody>
362                            <tr ng-repeat="slave in inactiveSlaves = (status.SlavesStatus
363                                | filter: {
364                                    IsAllowedToCalculate: false
365                                  })" ts-repeat>
366                                <td>{{slave.Slave.Name}}</td>
367                                <td>{{slave.CpuUtilization | number: 2}} %</td>
368                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
369                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
370                            </tr>
371                            <tr ng-hide="inactiveSlaves.length">
372                                <td colspan="4" class="text-center">No inactive slaves available!</td>
373                            </tr>
374                        </tbody>
375                    </table>
376                </div>
377            </div>
378        </div>
379    </div>
380</div>
381</div>
382
383<script>
384    $(document).ready(function () {
385        $('[data-toggle="tooltip"]').tooltip();
386    });
387</script>
Note: See TracBrowser for help on using the repository browser.