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

Last change on this file since 12557 was 12557, checked in by dglaser, 7 years ago

#2394:

HeuristicLab.Services.WebApp-3.3:

  • added angular-tablesort library
  • added sorting functionality to plugins page

HeuristicLab.Services.WebApp.Status-3.3:

  • changed sorting
File size: 15.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" ts-wrapper>
169                    <thead>
170                        <tr>
171                            <th ts-criteria="User.Name">Username</th>
172                            <th ts-criteria="CalculatingTasks|parseInt">Calculating Tasks</th>
173                            <th ts-criteria="WaitingTasks|parseInt">Waiting Tasks</th>
174                        </tr>
175                    </thead>
176                    <tbody>
177                        <tr ng-repeat="task in status.TasksStatus" ts-repeat>
178                            <td>{{task.User.Name}}</td>
179                            <td>{{task.CalculatingTasks | number}}</td>
180                            <td>{{task.WaitingTasks | number}}</td>
181                        </tr>
182                        <tr ng-hide="status.TasksStatus.length">
183                            <td colspan="3" class="text-center">
184                                There are no waiting or calculating tasks available!
185                            </td>
186                        </tr>
187                    </tbody>
188                </table>
189            </div>
190        </div>
191    </div>
192</div>
193
194<div class="row">
195    <div class="col-lg-12">
196        <div class="panel panel-default">
197            <div class="panel-heading">
198                <h3 class="panel-title">
199                    <a data-toggle="collapse" data-target="#collapseActiveCalculatingSlaves"
200                       ng-href="#/status">
201                        Active Calculating Slaves
202                    </a>
203                </h3>
204            </div>
205            <div id="collapseActiveCalculatingSlaves"
206                 class="panel-collapse collapse in">
207                <div class="panel-body">
208                    <table class="table table-hover" ts-wrapper>
209                        <thead>
210                            <tr>
211                                <th ts-criteria="Slave.Name">Slave</th>
212                                <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
213                                <th ts-criteria="Cores|parseInt">Cores</th>
214                                <th ts-criteria="Memory|parseInt">Memory</th>
215                            </tr>
216                        </thead>
217                        <tbody>
218                            <tr ng-repeat="slave in activeCalculatingSlaves = (status.SlavesStatus
219                                | filter: {
220                                    IsAllowedToCalculate: true,
221                                    State: 'Calculating'
222                                  })" ts-repeat>
223                                <td>{{slave.Slave.Name}}</td>
224                                <td>{{slave.CpuUtilization | number: 2}} %</td>
225                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
226                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
227                            </tr>
228                            <tr ng-hide="activeCalculatingSlaves.length">
229                                <td colspan="4" class="text-center">
230                                    There are no active calculating slaves available!
231                                </td>
232                            </tr>
233                        </tbody>
234                    </table>
235                </div>
236            </div>
237        </div>
238    </div>
239</div>
240
241<div class="row">
242    <div class="col-lg-12">
243        <div class="panel panel-default">
244            <div class="panel-heading">
245                <h3 class="panel-title">
246                    <a data-toggle="collapse" data-target="#collapseActiveIdleSlaves"
247                       ng-href="#/status" class="collapsed">
248                        Active Idle Slaves
249                    </a>
250                </h3>
251            </div>
252            <div id="collapseActiveIdleSlaves"
253                 class="panel-collapse collapse">
254                <div class="panel-body">
255                    <table class="table table-hover" ts-wrapper>
256                        <thead>
257                        <tr>
258                            <th ts-criteria="Slave.Name">Slave</th>
259                            <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
260                            <th ts-criteria="Cores|parseInt">Cores</th>
261                            <th ts-criteria="Memory|parseInt">Memory</th>
262                        </tr>
263                        </thead>
264                        <tbody>
265                            <tr ng-repeat="slave in activeIdleSlaves = (status.SlavesStatus
266                                | filter: {
267                                    IsAllowedToCalculate: true,
268                                    State: 'Idle'
269                                  })" ts-repeat>
270                                <td>{{slave.Slave.Name}}</td>
271                                <td>{{slave.CpuUtilization | number: 2}} %</td>
272                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
273                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
274                            </tr>
275                            <tr ng-hide="activeIdleSlaves.length">
276                                <td colspan="4" class="text-center">
277                                    There are no active idle slaves available!
278                                <td>
279                            </tr>
280                        </tbody>
281                    </table>
282                </div>
283            </div>
284        </div>
285    </div>
286</div>
287
288<div class="row">
289    <div class="col-lg-12">
290        <div class="panel panel-default">
291            <div class="panel-heading">
292                <h3 class="panel-title">
293                    <a data-toggle="collapse" data-target="#collapseInactiveSlaves"
294                       ng-href="#/status" class="collapsed">
295                        Inactive Slaves
296                    </a>
297                </h3>
298            </div>
299            <div id="collapseInactiveSlaves"
300                 class="panel-collapse collapse">
301                <div class="panel-body">
302                    <table class="table table-hover" ts-wrapper>
303                        <thead>
304                            <tr>
305                                <th ts-criteria="Slave.Name">Slave</th>
306                                <th ts-criteria="CpuUtilization|parseFloat">CPU Utilization</th>
307                                <th ts-criteria="Cores|parseInt">Cores</th>
308                                <th ts-criteria="Memory|parseInt">Memory</th>
309                            </tr>
310                        </thead>
311                        <tbody>
312                            <tr ng-repeat="slave in inactiveSlaves = (status.SlavesStatus
313                                | filter: {
314                                    IsAllowedToCalculate: false
315                                  })" ts-repeat>
316                                <td>{{slave.Slave.Name}}</td>
317                                <td>{{slave.CpuUtilization | number: 2}} %</td>
318                                <td>{{slave.Cores - slave.FreeCores | number}} / {{slave.Cores | number}}</td>
319                                <td>{{slave.Memory - slave.FreeMemory | kbToGB}} / {{slave.Memory | kbToGB}} GB</td>
320                            </tr>
321                            <tr ng-hide="inactiveSlaves.length">
322                                <td colspan="4" class="text-center">No inactive slaves available!</td>
323                            </tr>
324                        </tbody>
325                    </table>
326                </div>
327            </div>
328        </div>
329    </div>
330</div>
331</div>
332
333<script>
334    $(document).ready(function () {
335        $('[data-toggle="tooltip"]').tooltip();
336    });
337</script>
Note: See TracBrowser for help on using the repository browser.