Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
06/12/15 14:59:54 (9 years ago)
Author:
dglaser
Message:

#2394: Improved PluginManager and updated hive status monitor.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/sources/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/status.cshtml

    r12428 r12435  
    1111
    1212<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">
    118205                <div class="panel-body">
    119206                    <table class="table table-hover">
    120207                        <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>
    126226                        </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>
    131242                        </tr>
    132243                    </table>
    … …  
    135246        </div>
    136247    </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">
    144263                <div class="panel-body">
    145264                    <table class="table table-hover">
    146265                        <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>
    151284                        </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)">
    153291                            <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>
    155300                        </tr>
    156301                    </table>
    … …  
    160305    </div>
    161306</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>
Note: See TracChangeset for help on using the changeset viewer.