Free cookie consent management tool by TermsFeed Policy Generator

source: branches/Async/HeuristicLab.Services.WebApp.Statistics/3.3/WebApp/groups/details/groupDetails.cshtml @ 14871

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

#2388:

HeuristicLab.Services.WebApp.Status-3.3:
HeuristicLab.Services.WebApp.Statistics-3.3:

  • Added 'Last 6 Months' and 'Last Year' to the QuickSelection

HeuristicLab.Services.WebApp.Statistics-3.3:

  • Added Group Name to expired clients
File size: 13.6 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>
14            <a ng-href="#/statistics/clients">Clients</a>
15        </li>
16        <li class="active">
17            <a ng-href="#/statistics/groups">Groups</a>
18        </li>
19        @if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
20            <li>
21                <a ng-href="#/statistics/exceptions">Exceptions</a>
22            </li>
23        }
24    </ul>
25</header>
26
27<div class="default-view-container">
28    <div class="row">
29        <div class="col-lg-9">
30            <div class="panel panel-default">
31                <div class="panel-heading">
32                    <h3 class="panel-title">Group Details</h3>
33                </div>
34                <div class="panel-body">
35                    <div class="row">
36                        <div class="col-md-6">
37                            <table class="table table-no-border table-condensed table-auto-width table-content">
38                                <tr>
39                                    <td class="text-left">Name:</td>
40                                    <td class="text-right">{{group.Name}}</td>
41                                </tr>
42                                <tr>
43                                    <td class="text-left">Clients:</td>
44                                    <td class="text-right">{{group.OnlineClients}} / {{group.TotalClients}}</td>
45                                </tr>
46                            </table>
47                        </div>
48                        <div class="col-md-6">
49                            <table class="table table-no-border table-condensed table-auto-width table-content">
50                                <tr>
51                                    <td class="text-left">Total Unavailable Time:</td>
52                                    <td class="text-right">{{group.TotalUnavailableTime | toTimespan}}</td>
53                                </tr>
54                                <tr>
55                                    <td class="text-left">Total Calculating Time:</td>
56                                    <td class="text-right">{{group.TotalCalculatingTime | toTimespan}}</td>
57                                </tr>
58                                <tr>
59                                    <td class="text-left">Total Idle Time:</td>
60                                    <td class="text-right">{{group.TotalIdleTime | toTimespan}}</td>
61                                </tr>
62                                <tr>
63                                    <td class="text-left">Total Transferring Time:</td>
64                                    <td class="text-right">{{group.TotalTransferringTime | toTimespan}}</td>
65                                </tr>
66                                <tr>
67                                    <td class="text-left">Total Offline Time:</td>
68                                    <td class="text-right">{{group.TotalOfflineTime | toTimespan}}</td>
69                                </tr>
70                            </table>
71                        </div>
72                    </div>
73                </div>
74            </div>
75        </div>
76        <div class="col-lg-3 col-md-6">
77            <div class="panel panel-default">
78                <div class="panel-heading">
79                    <h3 class="panel-title">Tasks Overview</h3>
80                </div>
81                <div class="panel-body">
82                    <table class="table table-no-border table-condensed table-auto-width table-content">
83                        <tr>
84                            <td class="text-left">Total:</td>
85                            <td class="text-right">{{totalGroupTasks}}</td>
86                        </tr>
87                        <tr ng-repeat="state in group.TasksStates">
88                            <td class="text-left">{{state.State}}:</td>
89                            <td class="text-right">{{state.Count}}</td>
90                        </tr>
91                    </table>
92                </div>
93            </div>
94        </div>
95    </div>
96
97    <div class="row">
98        <div class="col-lg-3 col-md-6">
99            <div class="panel panel-default">
100                <div class="panel-heading">
101                    <h3 class="panel-title">Cores</h3>
102                </div>
103                <div class="panel-body">
104                    <div class="text-center">
105                        <knob knob-data="knobData.cores" knob-options="knobOptions"></knob>
106                    </div>
107                    <table class="table table-no-border table-condensed table-auto-width table-content">
108                        <tr>
109                            <td class="text-left">Total:</td>
110                            <td class="text-right">{{group.TotalCores | number}}</td>
111                        </tr>
112                        <tr>
113                            <td class="text-left">Used:</td>
114                            <td class="text-right">{{group.UsedCores | number}}</td>
115                        </tr>
116                    </table>
117                </div>
118            </div>
119        </div>
120
121        <div class="col-lg-3 col-md-6">
122            <div class="panel panel-default">
123                <div class="panel-heading">
124                    <h3 class="panel-title">CPU Utilization</h3>
125                </div>
126                <div class="panel-body">
127                    <div class="text-center">
128                        <knob knob-data="knobData.cpu" knob-options="knobOptions"></knob>
129                    </div>
130                    <table class="table table-no-border table-condensed table-auto-width table-content">
131                        <tr>
132                            <td class="text-left">Total:</td>
133                            <td class="text-right">{{group.TotalCpuUtilization | number: 2}} %</td>
134                        </tr>
135                        <tr>
136                            <td class="text-left">Active:</td>
137                            <td class="text-right">{{group.ActiveCpuUtilization | number: 2}} %</td>
138                        </tr>
139                    </table>
140                </div>
141            </div>
142        </div>
143
144        <div class="col-lg-3 col-md-6">
145            <div class="panel panel-default">
146                <div class="panel-heading">
147                    <h3 class="panel-title">Memory</h3>
148                </div>
149                <div class="panel-body">
150                    <div class="text-center">
151                        <knob knob-data="knobData.memory" knob-options="knobOptions"></knob>
152                    </div>
153                    <table class="table table-no-border table-condensed table-auto-width table-content">
154                        <tr>
155                            <td class="text-left">Total:</td>
156                            <td class="text-right">{{group.TotalMemory | kbToGB}} GB</td>
157                        </tr>
158                        <tr>
159                            <td class="text-left">Used:</td>
160                            <td class="text-right">{{group.UsedMemory | kbToGB}} GB</td>
161                        </tr>
162                    </table>
163                </div>
164            </div>
165        </div>
166    </div>
167
168    <div class="row">
169        <div class="col-lg-12">
170            <div class="panel panel-default">
171                <div class="panel-heading">
172                    <h3 class="panel-title">Clients</h3>
173                </div>
174                <div class="panel-body">
175                    <table class="table table-hover table-condensed">
176                        <thead>
177                            <tr>
178                                <th>#</th>
179                                <th>Client Name</th>
180                                <th>Cores</th>
181                                <th>Cpu Utilization</th>
182                                <th>Memory</th>
183                                <th>State</th>
184                                <th></th>
185                            </tr>
186                        </thead>
187                        <tr ng-repeat="client in clientPage.Clients">
188                            <td>{{($index + 1)+((curClientsPage-1)*(clientsPageSize))}}</td>
189                            <td>{{client.Name}}</td>
190                            <td>{{client.UsedCores}} / {{client.TotalCores}}</td>
191                            <td>{{client.CpuUtilization | number: 2}} %</td>
192                            <td>{{client.UsedMemory | kbToGB}} / {{client.TotalMemory | kbToGB}}</td>
193                            <td>{{client.State}}</td>
194                            <td>
195                                <a ng-href="#/statistics/clients/{{client.Id}}">Details</a>
196                            </td>
197                        </tr>
198                        <tr ng-hide="clientPage.Clients.length">
199                            <td colspan="7" class="text-center">No clients found!</td>
200                        </tr>
201                    </table>
202                    <div class="row text-center" ng-show="clientPage.TotalClients > clientPage.Clients.length">
203                        <pagination max-size="10" total-items="clientPage.TotalClients" ng-model="curClientsPage" ng-change="changeClientsPage()" items-per-page="clientsPageSize"
204                                    boundary-links="true" rotate="false" num-pages="numPages"></pagination>
205                    </div>
206                </div>
207            </div>
208        </div>
209    </div>
210 </div>
211
212 <div class="default-filter-header text-center">
213     <form class="form-inline">
214         <div class="form-group" style="margin-left: 5px; margin-right: 5px;">
215             <label for="fromDate">From:&nbsp;</label>
216             <div class="input-group">
217                 <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" />
218                 <span class="input-group-btn">
219                     <button type="button" class="btn btn-default" ng-click="openFromDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
220                 </span>
221             </div>
222         </div>
223         <div class="form-group" style="margin-left: 5px; margin-right: 5px;">
224             <label for="fromDate">To:&nbsp;</label>
225             <div class="input-group">
226                 <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"/>
227                 <span class="input-group-btn">
228                     <button type="button" class="btn btn-default" ng-click="openToDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
229                 </span>
230             </div>
231         </div>
232         <div class="form-group" style="margin-left: 5px; margin-right: 5px;">
233             <div class="btn-group" dropdown dropdown-append-to-body>
234                 <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width: 145px; text-align: left;">
235                     <span class="text-left" style="display: inline-block; width: 100px;">{{curQuickSelection.name}}</span>
236                     <span class="glyphicon glyphicon-chevron-down" style="margin-top: 3px;"></span>
237                 </button>
238                 <ul class="dropdown-menu" role="menu">
239                     <li ng-repeat="quickSelection in quickSelectionList">
240                         <a class="cursor-pointer" ng-click="changeQuickSelection(quickSelection)">{{quickSelection.name}}</a>
241                     </li>
242                 </ul>
243             </div>
244         </div>
245         <div class="form-group" style="margin-left: 5px; margin-right: 5px;">
246             <button type="button" class="btn btn-default" ng-click="updateCharts()">
247                 Apply
248             </button>
249         </div>
250     </form>
251 </div>
252
253 <div class="default-view-container">
254     <div class="row">
255         <div class="col-lg-12">
256             <div class="panel panel-default">
257                 <div class="panel-heading">
258                     <h3 class="panel-title">CPU Utilization Chart</h3>
259                 </div>
260                 <div class="panel-body">
261                     <flot dataset="cpuSeries" options="chartOptions"></flot>
262                 </div>
263             </div>
264         </div>
265     </div>
266
267     <div class="row">
268         <div class="col-lg-12">
269             <div class="panel panel-default">
270                 <div class="panel-heading">
271                     <h3 class="panel-title">Core Chart</h3>
272                 </div>
273                 <div class="panel-body">
274                     <flot dataset="coreSeries" options="fillChartOptions"></flot>
275                 </div>
276             </div>
277         </div>
278     </div>
279
280     <div class="row">
281         <div class="col-lg-12">
282             <div class="panel panel-default">
283                 <div class="panel-heading">
284                     <h3 class="panel-title">Memory Chart</h3>
285                 </div>
286                 <div class="panel-body">
287                     <flot dataset="memorySeries" options="fillChartOptions"></flot>
288                 </div>
289             </div>
290         </div>
291     </div>
292 </div>
Note: See TracBrowser for help on using the repository browser.