Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
07/01/15 14:59:47 (9 years ago)
Author:
ascheibe
Message:

#2394 merged r12428, r12429, r12430, r12435, r12442, r12443, r12445, r12514, r12517, r12519, r12520, r12521, r12523, r12532, r12542, r12546, r12552, r12553, r12556, r12557, r12559, r12561, r12146, r12457 into stable

Location:
stable
Files:
2 edited
1 copied

Legend:

Unmodified
Added
Removed

  • stable

  • stable/HeuristicLab.Services.WebApp.Status/3.3/WebApp/status/status.cshtml

    r12428 r12563  
    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>
     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">
    19207                <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>
    118                 <div class="panel-body">
    119                     <table class="table table-hover">
     208                    <table class="table table-hover" ts-wrapper>
    120209                        <thead>
    121210                            <tr>
    122                                 <th>Username</th>
    123                                 <th>Calculating Tasks</th>
    124                                 <th>Waiting Tasks</th>
     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>
    125215                            </tr>
    126216                        </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>
     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>
    131262                        </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>
    132281                    </table>
    133282                </div>
    … …  
    135284        </div>
    136285    </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>
     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">
    144301                <div class="panel-body">
    145                     <table class="table table-hover">
     302                    <table class="table table-hover" ts-wrapper>
    146303                        <thead>
    147304                            <tr>
    148                                 <th>Slave</th>
    149                                 <th>CPU Utilization</th>
     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>
    150309                            </tr>
    151310                        </thead>
    152                         <tr ng-repeat="slave in status.SlavesCpuStatus">
    153                             <td>{{slave.Slave.Name}}</td>
    154                             <td>{{slave.CpuUtilization}} %</td>
    155                         </tr>
     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>
    156325                    </table>
    157326                </div>
    … …  
    160329    </div>
    161330</div>
     331</div>
     332
     333<script>
     334    $(document).ready(function () {
     335        $('[data-toggle="tooltip"]').tooltip();
     336    });
     337</script>
Note: See TracChangeset for help on using the changeset viewer.