Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
03/17/16 16:52:10 (9 years ago)
Author:
jlodewyc
Message:

#2582 Implement graphs(Pie and line per task) + live job overview with SignalR

Location:
branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml

    r13712 r13714  
    8888
    8989                    </div>
    90                     <div class="row">
    91                         <h3 style="padding-left:20px">Tasks</h3>
    92                         <script type="text/javascript">
    93                             //TODO Globale variabele waar data per categorie in gestoken kan worden
    94                         </script>
     90
     91                    <script src="~/js/scripts/graphs/graphdatacollector.js"></script>
     92                    <script src="~/js/scripts/graphs/graphhubber.js"></script>
     93
     94                    <div class="row" >
     95                        <h3 style="padding-left:20px; ">Tasks</h3>
    9596                        @foreach (var task in Model.selectedJob.HiveTasks)
    9697                        {

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_AlgorithmSmall.cshtml

    r13712 r13714  
    2020<div class="collapse" id="collapseExample@(randomal)" style="margin-left:10px;margin-right:10px;margin-top:-10px">
    2121    <img src="~/img/accoladealg.png" style="width:100%;" />
    22     <div class="panel panel-primary" style="border-width:2px!important">
     22    <div class="panel panel-primary" style="border-width:2px!important;
     23box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     24text-shadow:none">
    2325        <div class="panel-heading panel-primary text-center">
    2426            <p>@Model.algo.Description</p>

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_BatchRunSmall.cshtml

    r13712 r13714  
    2222</p>
    2323<div class="collapse"
    24      id="collapseExample@(randombr)" style="margin-left:10px;margin-right:10px;margin-top:-10px ">
     24     id="collapseExample@(randombr)"
     25     style="margin-left:10px;margin-right:10px;margin-top:-10px "
     26     
     27     >
    2528    <img src="~/img/accoladebatch.png" style="width:100%" />
    26     <div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important">
     29    <div class="panel panel-warning"
     30         style="border-color:#f6cd94!important; border-width:2px!important;
     31box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     32text-shadow:2px 2px black">
    2733        <div class="panel-heading  text-center">
    2834            <p class="panel-title">

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_ExperimentSmall.cshtml

    r13712 r13714  
    2020<div class="collapse" id="collapseExample@(randomex)" style="margin-left:10px;margin-right:10px;margin-top:-10px">
    2121    <img src="~/img/accoladeexp.png" style="width:100%" />
    22     <div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important">
     22    <div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important;
     23box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     24text-shadow:2px 2px black">
    2325        <div class="panel-heading panel-danger text-center">
    2426            <p class="panel-title">Children: @Model.exp.Optimizers.Count</p>

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_AlgTask.cshtml

    r13712 r13714  
    11@model HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer
    22@using Newtonsoft.Json;
    3 <div class="panel panel-primary" style="border-width:2px!important">
    4     <div class="panel-heading"
     3<div class="panel panel-primary"
     4     style="border-width:2px!important;
     5box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     6text-shadow:2px 2px black">
     7    <div class="panel-heading"
    58         data-toggle="collapse"
    69         data-target="#panbody@(Model.hiveTask.Task.Id)"
    7          onclick="redrawalg('@(Model.hiveTask.Task.Id)')"
    8        aria-expanded="false"
    9        aria-controls="panbody@(Model.hiveTask.Task.Id)">
    10         <table class="table ">
     10         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
     11         aria-expanded="false"
     12         aria-controls="panbody@(Model.hiveTask.Task.Id)">
     13        <table class="table">
    1114            <thead>
    1215                <tr>
    … …  
    3639            <tbody>
    3740                <tr>
    38                     <td>Last update @Model.hiveTask.Task.LastTaskDataUpdate </td>
    39                     <td>State: @Model.hiveTask.Task.State</td>
     41                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
     42                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     43                    </td>
     44                    <td id="statepar@(Model.hiveTask.Task.Id)"
     45                        >
     46                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     47                    </td>
    4048
    4149                </tr>
    4250                <tr>
    43                     <td>@Model.hiveTask.Task.ExecutionTime executed</td>
     51                    <td id="executionpar@(Model.hiveTask.Task.Id)">
     52                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     53                    </td>
    4454                    <td>Created: @Model.hiveTask.Task.DateCreated</td>
    4555                </tr>
    4656                <tr>
    47                     <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
     57                    <td></td>
     58                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
     59                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     60                    </td>
    4861                </tr>
    4962            </tbody>
    5063        </table>
    5164    </div>
    52     <div class="panel-body ">
     65    <div class="panel-body " style="text-shadow:none">
    5366        <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
    54             <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
     67         
     68            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
     69                   type="checkbox"
     70                   data-toggle="toggle"
     71                   data-on="Line"
     72                   data-off="Pie"
     73                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')" />
     74            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
     75                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     76            </h4>
    5577            <div id="graph@(Model.hiveTask.Task.Id)"></div>
    5678        </div>
    5779    </div>
    5880    <script type="text/javascript">
    59         var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
    60         var xarr = [];
    61         var yarr = [];
    62         var waiting = 0;
    63         var transfer = 0;
    64         var calc = 0;
    65         for(var v = 0; v < temp.length; v++){
    66             xarr.push(temp[v].DateTime.substr(11,8));
    67             if(temp[v].State == 1){
    68                 yarr.push("Waiting");
    69                 if(v < (temp.length -1))
    70                     waiting += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
    71             }
    72             else if(temp[v].State == 2){
    73                 yarr.push("Transferring");
    74                 if(v < (temp.length -1))
    75                     transfer += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
    76             }
    77             else if(temp[v].State == 3){
    78                 yarr.push("Calculating");
    79                 if(v < (temp.length -1))
    80                     calc += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
    81             }
     81        initSaveData("@(Model.hiveTask.Task.Id)",
     82            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
    8283
    83             else if(temp[v].State == 5)
    84                 yarr.push("Finished");
    85             else if(temp[v].State == 7)
    86                 yarr.push("Failed");
    87         }
    88 
    89         var data = [{
    90             x: xarr,
    91             y: yarr,
    92             type:'scatter'
    93         }];
    94         var dats = [{
    95             values:[waiting/1000/60,transfer/1000/60,calc/1000/60],
    96             labels: ['Minutes waiting', 'Minutes transferring', 'Minutes calculating'],
    97             type:'pie'
    98         }];
    99         console.log(dats);
    10084        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
    10185
    102         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', dats);
    103 
    104         function redrawalg(val){
    105             setTimeout(function(){
    106                 Plotly.redraw('graph' + val);
    107             }, 100);
    108            
    109 
    110         }
    111 
     86        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
     87            getDataPie("@Model.hiveTask.Task.Id"));
    11288    </script>
    11389</div>

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml

    r13712 r13714  
    11@model HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer
    22@using Newtonsoft.Json;
    3 <div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important">
     3<div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important;
     4box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     5text-shadow:2px 2px black">
    46    <div class="panel-heading"
    57         data-toggle="collapse"
    68         data-target="#panbody@(Model.hiveTask.Task.Id)"
    7          onclick="redrawbat('@(Model.hiveTask.Task.Id)')"
    8        aria-expanded="false"
    9        aria-controls="panbody@(Model.hiveTask.Task.Id)">
     9         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
     10         aria-expanded="false"
     11         aria-controls="panbody@(Model.hiveTask.Task.Id)">
    1012        <table class="table ">
    1113            <thead>
    … …  
    3739            <tbody>
    3840                <tr>
    39                     <td>Last update @Model.hiveTask.Task.LastTaskDataUpdate </td>
    40                     <td>State: @Model.hiveTask.Task.State</td>
     41                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
     42                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     43                    </td>
     44                    <td id="statepar@(Model.hiveTask.Task.Id)">
     45                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     46                    </td>
    4147
    4248                </tr>
    4349                <tr>
    44                     <td>@Model.hiveTask.Task.ExecutionTime executed</td>
     50                    <td id="executionpar@(Model.hiveTask.Task.Id)">
     51                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     52                    </td>
    4553                    <td>Created: @Model.hiveTask.Task.DateCreated</td>
    46                 </tr>
     54                 </tr>
    4755                <tr>
    4856                    <td>
    … …  
    5462                               data-onstyle="success" />
    5563                    </td>
    56                     <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
     64                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
     65                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     66                    </td>
    5767                </tr>
    5868            </tbody>
    5969        </table>
    6070    </div>
    61     <div class="panel-body ">
     71    <div class="panel-body " style="text-shadow:none">
    6272        <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
    63             <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
    64             <div id="graph@(Model.hiveTask.Task.Id)"></div>
     73            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
     74                   type="checkbox"
     75                   data-toggle="toggle"
     76                   checked
     77                   data-on="Line"
     78                   data-off="Pie"
     79                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')">
     80            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
     81                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     82            </h4>
     83            <div style="text-shadow:none" id="graph@(Model.hiveTask.Task.Id)"></div>
    6584        </div>
    6685    </div>
    … …  
    7796    }
    7897    <script type="text/javascript">
    79         var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
    80         var xarr = [];
    81         var yarr = [];
    82         for(var v = 0; v < temp.length; v++){
    83             xarr.push(temp[v].DateTime.substr(11,8));
    84             if(temp[v].State == 1)
    85                 yarr.push("Waiting");
    86             else if(temp[v].State == 2)
    87                 yarr.push("Transferring");
    88             else if(temp[v].State == 3)
    89                 yarr.push("Calculating");
    90             else if(temp[v].State == 5)
    91                 yarr.push("Finished");
    92             else if(temp[v].State == 7)
    93                 yarr.push("Failed");
    94         }
     98        initSaveData("@(Model.hiveTask.Task.Id)",
     99            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
    95100
    96         var data = [{
    97             x: xarr,
    98             y: yarr,
    99             type:'scatter'
    100         }];
    101101        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
    102102
    103         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', data);
    104 
    105         function redrawbat(val){
    106             setTimeout(function(){
    107                 Plotly.newPlot('graph' + val,data);
    108             }, 100);
    109            
    110 
    111         }
     103        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
     104            getData("@Model.hiveTask.Task.Id"));
    112105
    113106    </script>

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_ExpTask.cshtml

    r13712 r13714  
    22@using Newtonsoft.Json;
    33
    4 <div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important">
     4<div class="panel panel-danger"
     5     style="border-color:#c12e2a!important; border-width:2px!important;
     6box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     7text-shadow:2px 2px black"
     8     >
    59    <div class="panel-heading"
    610         data-toggle="collapse"
    711         data-target="#panbody@(Model.hiveTask.Task.Id)"
    8          onclick="redrawexp('@(Model.hiveTask.Task.Id)')"
     12         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
    913       aria-expanded="false"
    1014       aria-controls="panbody@(Model.hiveTask.Task.Id)">
    … …  
    3842            <tbody>
    3943                <tr>
    40                     <td id="lastupdate@(Model.hiveTask.Task.Id)">
    41                         Last update @Model.hiveTask.Task.LastTaskDataUpdate
     44                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
     45                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
    4246                    </td>
    43                     <td id="state@(Model.hiveTask.Task.Id)">State: @Model.hiveTask.Task.State</td>
     47                    <td id="statepar@(Model.hiveTask.Task.Id)">
     48                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     49                    </td>
    4450
    4551                </tr>
    4652                <tr>
    47                     <td id="exectime@(Model.hiveTask.Task.Id)">
    48                         @Model.hiveTask.Task.ExecutionTime executed
     53                    <td id="executionpar@(Model.hiveTask.Task.Id)">
     54                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
    4955                    </td>
    50                     <td>Created: @Model.hiveTask.Task.DateCreated</td>
    51                 </tr>
     56                    <td>Created: @Model.hiveTask.Task.DateCreated</td> </tr>
    5257                <tr>
    5358                    <td>
    … …  
    5964                               data-onstyle="success" />
    6065                    </td>
    61                     <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
     66                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
     67                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     68                    </td>
    6269                </tr>
    6370            </tbody>
    6471        </table>
    6572    </div>
    66     <div class="panel-body ">
     73    <div class="panel-body " style="text-shadow:none">
    6774        <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
    68             <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
    69             <div id="graph@(Model.hiveTask.Task.Id)"></div>
     75            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
     76                   type="checkbox"
     77                   data-toggle="toggle"
     78                   checked
     79                   data-on="Line"
     80                   data-off="Pie"
     81                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')">
     82            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
     83                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
     84            </h4>
     85            <div style="text-shadow:none" id="graph@(Model.hiveTask.Task.Id)"></div>
    7086        </div>
    7187    </div>
    … …  
    8298    }
    8399    <script type="text/javascript">
    84         var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
    85         var xarr = [];
    86         var yarr = [];
    87         for(var v = 0; v < temp.length; v++){
    88             xarr.push(temp[v].DateTime.substr(11,8));
    89             if(temp[v].State == 1)
    90                 yarr.push("Waiting");
    91             else if(temp[v].State == 2)
    92                 yarr.push("Transferring");
    93             else if(temp[v].State == 3)
    94                 yarr.push("Calculating");
    95             else if(temp[v].State == 5)
    96                 yarr.push("Finished");
    97             else if(temp[v].State == 7)
    98                 yarr.push("Failed");
    99         }
     100        initSaveData("@(Model.hiveTask.Task.Id)",
     101            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
    100102
    101         var data = [{
    102             x: xarr,
    103             y: yarr,
    104             type:'scatter'
    105         }];
    106103        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
    107104
    108         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', data);
    109 
    110         function redrawexp(val){
    111             setTimeout(function(){
    112                 Plotly.newPlot('graph' + val,data);
    113             }, 100);
    114            
    115 
    116         }
    117 
     105        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
     106            getData("@Model.hiveTask.Task.Id"));
    118107    </script>
    119108</div>
Note: See TracChangeset for help on using the changeset viewer.