- Timestamp:
- 06/12/15 14:59:54 (9 years ago)
- Location:
- trunk/sources/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/sources/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/status.cshtml
r12428 r12435 11 11 12 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 <center> 21 <knob knob-data="core.knobData" knob-options="knobOptions"></knob> 22 </center> 23 <p>Total Cores: {{status.CoreStatus.TotalCores}}</p> 24 <p>Used Cores: {{status.CoreStatus.TotalCores - status.CoreStatus.FreeCores}}</p> 25 </div> 26 </div> 27 </div> 28 29 <div class="col-lg-3 col-md-6"> 30 <div class="panel panel-default"> 31 <div class="panel-heading"> 32 <h3 class="panel-title">CPU Utilization</h3> 33 </div> 34 <div class="panel-body"> 35 <center> 36 <knob knob-data="cpu.knobData" knob-options="knobOptions"></knob> 37 </center> 38 <p>Total Utilization: {{status.CpuUtilizationStatus.TotalCpuUtilization}} %</p> 39 <p>Used Utilization: {{status.CpuUtilizationStatus.UsedCpuUtilization}} %</p> 40 </div> 41 </div> 42 </div> 43 44 <div class="col-lg-3 col-md-6"> 45 <div class="panel panel-default"> 46 <div class="panel-heading"> 47 <h3 class="panel-title">Memory</h3> 48 </div> 49 <div class="panel-body"> 50 <center> 51 <knob knob-data="memory.knobData" knob-options="knobOptions"></knob> 52 </center> 53 <p>TotalMemory: {{status.MemoryStatus.TotalMemory}} GB</p> 54 <p>UsedMemory: {{status.MemoryStatus.TotalMemory - status.MemoryStatus.FreeMemory}} GB</p> 55 </div> 56 </div> 57 </div> 58 59 <div class="col-lg-3 col-md-6"> 60 <div class="panel panel-default"> 61 <div class="panel-heading"> 62 <h3 class="panel-title">Tasks</h3> 63 </div> 64 <div class="panel-body"> 65 <p>Total: {{tasks.WaitingTasks + tasks.CalculatingTasks}}</p> 66 <p>Waiting: {{tasks.WaitingTasks}}</p> 67 <p>Calculating: {{tasks.CalculatingTasks}}</p> 68 </div> 69 </div> 70 </div> 71 </div> 72 73 <div class="row"> 74 <div class="col-lg-12"> 75 <div class="panel panel-default"> 76 <div class="panel-heading"> 77 <h3 class="panel-title">CPU Utilization Chart</h3> 78 </div> 79 <div class="panel-body"> 80 <flot dataset="cpu.series" options="chartOptions"></flot> 81 </div> 82 </div> 83 </div> 84 </div> 85 86 <div class="row"> 87 <div class="col-lg-12"> 88 <div class="panel panel-default"> 89 <div class="panel-heading"> 90 <h3 class="panel-title">Core Chart</h3> 91 </div> 92 <div class="panel-body"> 93 <flot dataset="core.series" options="fillChartOptions"></flot> 94 </div> 95 </div> 96 </div> 97 </div> 98 99 <div class="row"> 100 <div class="col-lg-12"> 101 <div class="panel panel-default"> 102 <div class="panel-heading"> 103 <h3 class="panel-title">Memory Chart</h3> 104 </div> 105 <div class="panel-body"> 106 <flot dataset="memory.series" options="fillChartOptions"></flot> 107 </div> 108 </div> 109 </div> 110 </div> 111 112 <div class="row"> 113 <div class="col-lg-12"> 114 <div class="panel panel-default"> 115 <div class="panel-heading"> 116 <h3 class="panel-title">Tasks by User</h3> 117 </div> 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 | number}} 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 | number}} 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 | number}} 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"> 118 205 <div class="panel-body"> 119 206 <table class="table table-hover"> 120 207 <thead> 121 <tr> 122 <th>Username</th> 123 <th>Calculating Tasks</th> 124 <th>Waiting Tasks</th> 125 </tr> 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> 126 226 </thead> 127 <tr ng-repeat="task in status.TasksStatus"> 128 <td>{{task.User.Name}}</td> 129 <td>{{task.CalculatingTasks}}</td> 130 <td>{{task.WaitingTasks}}</td> 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 | number}}</td> 236 <td>{{slave.Memory | number}} 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> 131 242 </tr> 132 243 </table> … … 135 246 </div> 136 247 </div> 137 138 <div class="row"> 139 <div class="col-lg-12"> 140 <div class="panel panel-default"> 141 <div class="panel-heading"> 142 <h3 class="panel-title">CPU Utilization by Slave</h3> 143 </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"> 144 263 <div class="panel-body"> 145 264 <table class="table table-hover"> 146 265 <thead> 147 <tr> 148 <th>Slave</th> 149 <th>CPU Utilization</th> 150 </tr> 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> 151 284 </thead> 152 <tr ng-repeat="slave in status.SlavesCpuStatus"> 285 <tr ng-repeat="slave in activeIdleSlaves = (status.SlavesStatus 286 | filter: { 287 IsAllowedToCalculate: true, 288 State: 'Idle' 289 } 290 | orderBy: activeIdleSlavesOrderColumn:activeIdleSlavesReverseSort)"> 153 291 <td>{{slave.Slave.Name}}</td> 154 <td>{{slave.CpuUtilization}} %</td> 292 <td>{{slave.CpuUtilization | number: 2}} %</td> 293 <td>{{slave.Cores | number}}</td> 294 <td>{{slave.Memory | number}} 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> 155 300 </tr> 156 301 </table> … … 160 305 </div> 161 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 | number}}</td> 351 <td>{{slave.Memory | number}} 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> -
trunk/sources/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/statusCtrl.js
r12428 r12435 53 53 mode: "time", 54 54 twelveHourClock: false 55 }, 56 yaxis: { 57 min: 0 55 58 } 56 59 }; … … 82 85 }; 83 86 87 $scope.activeIdleSlaveFilter = function (slave) { 88 return (slave.IsAllowedToCalculate == true) && (slave.State == 'Idle'); 89 }; 90 91 $scope.activeCalculatingSlavesReverseSort = false; 92 $scope.activeCalculatingSlavesOrderColumn = 'slave.Slave.Name'; 93 94 $scope.activeIdleSlavesReverseSort = false; 95 $scope.activeIdleSlavesOrderColumn = 'slave.Slave.Name'; 96 97 $scope.inactiveSlavesReverseSort = false; 98 $scope.inactiveSlavesOrderColumn = 'slave.Slave.Name'; 99 100 84 101 var updateStatus = function () { 85 102 // update status data 86 103 dataService.getStatus({}, function (status) { 104 var oneDayInMs = 24 * 60 * 60 * 1000; 105 var today = new Date().getTime() - oneDayInMs; 87 106 // raw status data 88 107 $scope.status = status; … … 96 115 } 97 116 // knobs 98 $scope.cpu.knobData = Math.round(status.CpuUtilizationStatus.UsedCpuUtilization); 99 var usedCores = status.CoreStatus.TotalCores - status.CoreStatus.FreeCores; 100 $scope.core.knobData = Math.round(usedCores / status.CoreStatus.TotalCores * 100); 101 var usedMemory = status.MemoryStatus.TotalMemory - status.MemoryStatus.FreeMemory; 102 $scope.memory.knobData = Math.round(usedMemory / status.MemoryStatus.TotalMemory * 100); 117 $scope.cpu.knobData = Math.round(status.CpuUtilizationStatus.ActiveCpuUtilization); 118 $scope.core.knobData = Math.round(status.CoreStatus.CalculatingCores / status.CoreStatus.ActiveCores * 100); 119 $scope.memory.knobData = Math.round(status.MemoryStatus.UsedMemory / status.MemoryStatus.ActiveMemory * 100); 103 120 // chart series 104 121 var cpuSeries = $scope.cpu.series[0].data.splice(0); 105 if (cpuSeries.length > 2) {106 cpuSeries.splice(0, 1);107 }108 122 var coreSeries = [$scope.core.series[0].data, $scope.core.series[1].data]; 109 if (coreSeries[0].length > 2) {110 coreSeries[0].splice(0, 1);111 }112 if (coreSeries[1].length > 2) {113 coreSeries[1].splice(0, 1);114 }115 123 var memorySeries = [$scope.memory.series[0].data, $scope.memory.series[1].data]; 116 if (memorySeries[0].length > 2) { 117 memorySeries[0].splice(0, 1); 118 } 119 if (memorySeries[1].length > 2) { 120 memorySeries[1].splice(0, 1); 124 if ($scope.status.Timestamp < today) { 125 if (cpuSeries.length > 2) { 126 cpuSeries.splice(0, 1); 127 } 128 if (coreSeries[0].length > 2) { 129 coreSeries[0].splice(0, 1); 130 } 131 if (coreSeries[1].length > 2) { 132 coreSeries[1].splice(0, 1); 133 } 134 if (memorySeries[0].length > 2) { 135 memorySeries[0].splice(0, 1); 136 } 137 if (memorySeries[1].length > 2) { 138 memorySeries[1].splice(0, 1); 139 } 121 140 } 122 141 cpuSeries.push([$scope.status.Timestamp, $scope.cpu.knobData]); 142 143 // charts are currently filled with old total/used data 144 // start temporary 145 var usedCores = status.CoreStatus.TotalCores - status.getCoreStatus.FreeCores; 146 var usedMemory = status.MemoryStatus.TotalMemory - status.MemoryStatus.FreeMemory; 147 // end temporary 123 148 coreSeries[0].push([$scope.status.Timestamp, status.CoreStatus.TotalCores]); 124 149 coreSeries[1].push([$scope.status.Timestamp, usedCores]); … … 149 174 for (var i = 0; i < noOfStatus; ++i) { 150 175 var curStatus = status[i]; 151 var cpuData = Math.round(curStatus.CpuUtilizationStatus.UsedCpuUtilization); 152 var usedCores = curStatus.CoreStatus.TotalCores - curStatus.CoreStatus.FreeCores; 153 var usedMemory = curStatus.MemoryStatus.TotalMemory - curStatus.MemoryStatus.FreeMemory; 176 var cpuData = Math.round(curStatus.CpuUtilizationStatus.ActiveCpuUtilization); 154 177 cpuSeries.push([curStatus.Timestamp, cpuData]); 155 coreSeries[0].push([curStatus.Timestamp, curStatus.CoreStatus. TotalCores]);156 coreSeries[1].push([curStatus.Timestamp, usedCores]);157 memorySeries[0].push([curStatus.Timestamp, curStatus.MemoryStatus. TotalMemory]);158 memorySeries[1].push([curStatus.Timestamp, usedMemory]);178 coreSeries[0].push([curStatus.Timestamp, curStatus.CoreStatus.ActiveCores]); 179 coreSeries[1].push([curStatus.Timestamp, curStatus.CoreStatus.CalculatingCores]); 180 memorySeries[0].push([curStatus.Timestamp, curStatus.MemoryStatus.ActiveMemory]); 181 memorySeries[1].push([curStatus.Timestamp, curStatus.MemoryStatus.UsedMemory]); 159 182 } 160 183 $scope.cpu.series = [{ data: cpuSeries, label: " CPU Utilization", color: "#f7921d" }];
Note: See TracChangeset
for help on using the changeset viewer.