Changeset 13714 for branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml

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

File:

• branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml (modified) (4 diffs)

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

@@ -1 +1 @@
 @model HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer
 @using Newtonsoft.Json;
-<div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important">
+<div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black">
     <div class="panel-heading"
          data-toggle="collapse"
          data-target="#panbody@(Model.hiveTask.Task.Id)"
-         onclick="redrawbat('@(Model.hiveTask.Task.Id)')"
-       aria-expanded="false"
-       aria-controls="panbody@(Model.hiveTask.Task.Id)">
+         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
+         aria-expanded="false"
+         aria-controls="panbody@(Model.hiveTask.Task.Id)">
         <table class="table ">
             <thead>
@@ -37 +39 @@
             <tbody>
                 <tr>
-                    <td>Last update @Model.hiveTask.Task.LastTaskDataUpdate </td>
-                    <td>State: @Model.hiveTask.Task.State</td>
+                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
+                    <td id="statepar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
 
                 </tr>
                 <tr>
-                    <td>@Model.hiveTask.Task.ExecutionTime executed</td>
+                    <td id="executionpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                     <td>Created: @Model.hiveTask.Task.DateCreated</td>
-                </tr>
+                 </tr>
                 <tr>
                     <td>
@@ -54 +62 @@
                                data-onstyle="success" />
                     </td>
-                    <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
+                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="panel-body ">
+    <div class="panel-body " style="text-shadow:none">
         <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
-            <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
-            <div id="graph@(Model.hiveTask.Task.Id)"></div>
+            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
+                   type="checkbox"
+                   data-toggle="toggle"
+                   checked
+                   data-on="Line"
+                   data-off="Pie"
+                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')">
+            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
+                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+            </h4>
+            <div style="text-shadow:none" id="graph@(Model.hiveTask.Task.Id)"></div>
         </div>
     </div>
@@ -77 +96 @@
     }
     <script type="text/javascript">
-        var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
-        var xarr = [];
-        var yarr = [];
-        for(var v = 0; v < temp.length; v++){
-            xarr.push(temp[v].DateTime.substr(11,8));
-            if(temp[v].State == 1)
-                yarr.push("Waiting");
-            else if(temp[v].State == 2)
-                yarr.push("Transferring");
-            else if(temp[v].State == 3)
-                yarr.push("Calculating");
-            else if(temp[v].State == 5)
-                yarr.push("Finished");
-            else if(temp[v].State == 7)
-                yarr.push("Failed");
-        }
+        initSaveData("@(Model.hiveTask.Task.Id)",
+            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        var data = [{
-            x: xarr,
-            y: yarr,
-            type:'scatter'
-        }];
         document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
 
-        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', data);
-
-        function redrawbat(val){
-            setTimeout(function(){
-                Plotly.newPlot('graph' + val,data);
-            }, 100);
-            
-
-        }
+        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
+            getData("@Model.hiveTask.Task.Id"));
 
     </script>