Changeset 13719

Timestamp:

03/18/16 16:30:39 (8 years ago)

Author:

jlodewyc

Message:

#2582 Livefeed graph data, main unified graph + bugfixing refresh overload

Location:

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager

Files:

• JobUpdaterHub.cs (modified) (4 diffs)
• Services/FileOpeningService.cs (modified) (1 diff)
• Views/Job/Index.cshtml (modified) (1 diff)
• Views/Job/SelectedJobPartials/_AlgTask.cshtml (modified) (1 diff)
• Views/Job/SelectedJobPartials/_BatchTask.cshtml (modified) (2 diffs)
• Views/Job/SelectedJobPartials/_ExpTask.cshtml (modified) (2 diffs)
• wwwroot/js/Scripts/Graphs/GraphDataCollector.js (modified) (5 diffs)
• wwwroot/js/Scripts/Graphs/GraphHubber.js (modified) (4 diffs)

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/JobUpdaterHub.cs

@@ -1 +1 @@
 using HeuristicLab.Clients.Hive.WebJobManager.Services;
+using HeuristicLab.Common;
 using Microsoft.AspNet.SignalR;
 using Newtonsoft.Json;
 using System;
 using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using HeuristicLab.Clients.Hive.WebJobManager.Services;
 
 namespace HeuristicLab.Clients.Hive.WebJobManager
@@ -12 +10 @@
     public class JobUpdaterHub : Hub
     {
+        
         private RefreshableJob Job;
+     
 
         public void initConnection()
         {
+            FileOpeningService.Instance.previousids = new List<Guid>();
+            FileOpeningService.Instance.previousLogs = new List<int>();
             Job = FileOpeningService.Instance.Job;
-        }
-        public void sendUpdate()
-        {
-            Clients.All.sendUpdate();
+            updateAll();
+
         }
         public void updateAll()
@@ -26 +26 @@
             FileOpeningService.Instance.refreshJob();
             Job = FileOpeningService.Instance.Job;
-            
+
             foreach (var t in Job.HiveTasks)
             {
@@ -38 +38 @@
             try
             {
-                JsonSerializerSettings settings = new JsonSerializerSettings();
-                settings.ContractResolver = new JsonTaskResolver();
-                var json = JsonConvert.SerializeObject(task.Task, settings);
-                Clients.All.processData(task.Task.Id,json );
+                int index;
+                bool test = false;
+                if (FileOpeningService.Instance.previousids.Contains(task.Task.Id))
+                {
+                    index = FileOpeningService.Instance.previousids.IndexOf(task.Task.Id);
+                }
+                else
+                {
+                    FileOpeningService.Instance.previousids.Add(task.Task.Id);
+                    index = FileOpeningService.Instance.previousids.IndexOf(task.Task.Id);
+                    FileOpeningService.Instance.previousLogs.Add(task.Task.StateLog.Count);
+                    test = true;
+                }
+                var previous = FileOpeningService.Instance.previousLogs[index];
+                if (test || previous < task.Task.StateLog.Count)
+                {
+                    FileOpeningService.Instance.previousLogs[index] = task.Task.StateLog.Count;
+                    JsonSerializerSettings settings = new JsonSerializerSettings();
+                    settings.ContractResolver = new JsonTaskResolver();
+                    var json = JsonConvert.SerializeObject(task.Task, settings);
+                    Clients.All.processData(task.Task.Id, json);
+                }
                 foreach (var t in task.ChildHiveTasks)
                 {

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/FileOpeningService.cs

@@ -14 +14 @@
         public FileOpeningViewModel vm { get; set; }
         public IHostingEnvironment env { get; set; }
+        public List<Guid> previousids {
+            get; set; }
+        public List<int> previousLogs { get; set; }
         private static FileOpeningService instance;
         public static FileOpeningService Instance

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

@@ -91 +91 @@
                     <script src="~/js/scripts/graphs/graphdatacollector.js"></script>
                     <script src="~/js/scripts/graphs/graphhubber.js"></script>
+                    <div class="row">
+                        <div class="btn btn-lg btn-info" onclick="redrawMain()">Refresh main graph</div>
+                        <div id="graphMain" style="width:100%;height:400px">
 
+                        </div>
+                    </div>
                     <div class="row" >
                         <h3 style="padding-left:20px; ">Tasks</h3>

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

@@ -82 +82 @@
             @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
+        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 100%; height: 400px;";
 
         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',

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

@@ -74 +74 @@
                    type="checkbox"
                    data-toggle="toggle"
-                   checked
                    data-on="Line"
                    data-off="Pie"
@@ -99 +98 @@
             @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
+        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 100%; height: 400px;";
 
         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',

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

@@ -76 +76 @@
                    type="checkbox"
                    data-toggle="toggle"
-                   checked
+                   
                    data-on="Line"
                    data-off="Pie"
@@ -101 +101 @@
             @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
+        document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 100%!important; height: 400px;";
 
         Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js

@@ -15 +15 @@
         }
     }
-    console.log("#SAVEDATA: " + id);
+    //console.log("#SAVEDATA: " + id);
     redrawGraph(id);
 }
@@ -34 +34 @@
 }
 function dataConversion(coll) {
+    
+    
+    return [dataConversionLine(coll),dataConversionPie(coll)];
+}
+function dataConversionLine(coll) {
     var xarr = [];
     var yarr = [];
-    var waiting = 0;
-    var transfer = 0;
-    var calc = 0;
+    for (var v = 0; v < coll.length; v++) {
+        xarr.push(Date.parse(coll[v].DateTime));
+        if (coll[v].State == 1)
+            yarr.push("Waiting");
+        else if (coll[v].State == 2) 
+            yarr.push("Transferring");
+        else if (coll[v].State == 3) 
+            yarr.push("Calculating");
+        else if (coll[v].State == 5)
+            yarr.push("Finished");
+        else if (coll[v].State == 7)
+            yarr.push("Failed");
+    }
+    var data = [{//Time graph
+        x: xarr,
+        y: yarr,
+        type: 'scatter',
+        mode: 'lines',
+        name: 'Task ' ,
+        connectgaps:true,
+        line:{shape:'hv'}
+    }];
+    layout= {
+        "showlegend": true,
+        "width": "100%",
+        "xaxis": {
+            "autorange": true, 
+            "range": [
+                Date.parse(coll[0].DateTime), 
+                Date.parse(coll[coll.length -1].DateTime)
+            ], 
+            "title": "Time", 
+            "type": "date"
+        }
+
+    }
+    
+    return [data,layout];
+}
+function dataConversionHBar(coll) {
+    var xarr = [];
+    var yarr = [];
     for (var v = 0; v < coll.length; v++) {
         xarr.push(coll[v].DateTime.substr(11, 8));
-        if (coll[v].State == 1) {
+        if (coll[v].State == 1)
             yarr.push("Waiting");
-            if (v < (coll.length - 1))
-                waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
-        else if (coll[v].State == 2) {
+        else if (coll[v].State == 2) 
             yarr.push("Transferring");
-            if (v < (coll.length - 1))
-                transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
-        else if (coll[v].State == 3) {
+        else if (coll[v].State == 3) 
             yarr.push("Calculating");
-            if (v < (coll.length - 1))
-                calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
         else if (coll[v].State == 5)
             yarr.push("Finished");
@@ -66 +101 @@
         type: 'scatter'
     }];
+    
+    return data;
+}
+function dataConversionPie(coll) {
+    var waiting = 0;
+    var transfer = 0;
+    var calc = 0;
+    for (var v = 0; v < coll.length-1; v++) {
+        if(coll[v].State == 1)
+            waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+        else if (coll[v].State == 2) 
+            transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+        else if (coll[v].State == 3) 
+            calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+    }
     var datap = [{//Pie graph
         values: [
@@ -77 +127 @@
         type: 'pie'
     }];
-    return [data, datap];
+    return datap;
 }
 
 function redrawGraph(val) {
+    document.getElementById("graph" + val).style.width = "100%";
+    document.getElementById("graph" + val).style.height = "400px";
     if (document.getElementById("graphtoggle" + val).checked) {
         setTimeout(function () {
-            Plotly.newPlot('graph' + val, getData(val));
+            Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
         }, 100);
         console.log("#REDRAWN LINE: " + val);
@@ -90 +142 @@
             Plotly.newPlot('graph' + val, getDataPie(val));
         }, 100);
-        console.log("#REDRAWN PIE: " + val);
+        //console.log("#REDRAWN PIE: " + val);
     }
+    
 
 }
+function redrawMain() {
+    var temp = [];
+    var min = dataCollection[0][1][0][0].x[0];
+    var max = min;
+    for (var i = 0; i < dataCollection.length; i++) {
+        temp.push(dataCollection[i][1][0][0]);
+        if (dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1] > max)
+            max = dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1];
+        if (dataCollection[i][1][0][0].x[0] < min)
+            min = dataCollection[i][1][0][0].x[0];
+    }
+    layout = {
+        "showlegend": true,
+        "title": new Date(min).toUTCString() + " to " + new Date(max).toUTCString(),
+        "xaxis": {
+            "autorange": true,
+            "range": [
+                min,
+                max
+            ],
+            "title": "Time",
+            "type": "date"
+        }
+
+    }
+     Plotly.newPlot('graphMain', temp, layout);
+
+
+}

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphHubber.js

@@ -6 +6 @@
         hubber.server.initConnection();
         hubber.server.updateAll();
-        
+        redrawMain();
     });
     hubber.client.processData = function (id, data) {
@@ -13 +13 @@
         saveData(id, obj.StateLog);
     }
-    hubber.client.requestDone = function(){
+    hubber.client.requestDone = function () {
+        
         setTimeout(function () {
             hubber.server.updateAll();
+            console.log("#REFRESH ALL");
+            
         }, 5000);
     }
@@ -22 +25 @@
 
 function editTaskData(id, task) {
-    console.log(task);
     //lastupdate
     var dat = new Date(task.LastHeartbeat);
@@ -54 +56 @@
         });
         $("#statepar" + id).html("State: Finished");
-        console.log(task.DateFinished);
         var datf = new Date(task.StateLog[task.StateLog.length -1].DateTime);
         $("#lastupdpar" + id).html("Finished: " + datf.toUTCString());