Changeset 13733 for branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js

Timestamp:

03/24/16 17:19:13 (8 years ago)

Author:

jlodewyc

Message:

#2582 Last fixes Job Manager

Location:

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js

Files:

• Scripts/Graphs/GraphDataCollector.js (modified) (7 diffs)
• Scripts/Graphs/GraphHubber.js (modified) (3 diffs)
• Scripts/hubber.js (modified) (2 diffs)
• d3-gantt-jobstatus.js (added)
• d3-tip.js (added)
• d3.js (added)
• d3.min.js (added)
• d3.v3.min.js (added)
• moment-timezone-with-data.js (added)
• moment-timezone-with-data.min.js (added)
• moment-timezone.js (added)
• moment-with-locales.js (added)
• moment-with-locales.min.js (added)
• moment.js (added)

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

@@ -1 +1 @@
 var dataCollection = [];
-
-function initSaveData(id, coll) {//initial data save
-    var temp = dataConversion(coll);
+var taskStatus = {
+    "Offline": "bar-off",
+    "Waiting": "bar-wait",
+    "Transferring": "bar-trans",
+    "Calculating": "bar-calc",
+    "Paused": "bar-paus",
+    "Finished": "bar-fin",
+    "Aborted": "bar-abo",
+    "Failed": "bar-fail"
+}
+
+function initSaveData(id, coll, name) {//initial data save
+    var temp = dataConversion(coll, name);
     temp.unshift(id); //add ID in front of array
     dataCollection.push(temp);// [id,timearr, piearr]
-    console.log("#CREATION: " + id);
-}
-function saveData(id, coll) {
-    var temp = dataConversion(coll);
-    for (var i = 0; i < dataCollection.length; i++) {
-        if (dataCollection[i][0] == id) {
-            dataCollection[i][1] = temp[0];
-            dataCollection[i][2] = temp[1];
+    // console.log("#CREATION: " + id);
+}
+function saveData(id, coll, name) {
+    var temp = dataConversion(coll, name);
+    for (var i = 0; i < dataCollection.length; i++) {
+        if (dataCollection[i][0] == id) {
+            dataCollection[i][1] = temp[0]; // [data,layout]
+            dataCollection[i][2] = temp[1]; // data
+            dataCollection[i][3] = temp[2]; // [tasks, name]
         }
     }
@@ -31 +42 @@
         }
     }
-
-}
-function dataConversion(coll) {
-    
-    
-    return [dataConversionLine(coll),dataConversionPie(coll)];
-}
-function dataConversionLine(coll) {
+}
+function getDataGantt(id) {
+    for (var i = 0; i < dataCollection.length; i++) {
+        if (dataCollection[i][0] == id) {
+            return dataCollection[i][3];
+        }
+    }
+}
+function dataConversion(coll, name) {
+    var line = dataConversionLine(coll, name);
+    var pie = dataConversionPie(coll);
+    var gantt = dataConversionGantt(coll, name);
+    return [line, pie, gantt];
+}
+function dataConversionGantt(coll, nam) {
+    var tasks = [];
+    for (var v = 0; v < coll.length; v++) {
+
+        var temp = {};
+        temp.startDate = Date.parse(coll[v].DateTime);
+        if (v < coll.length - 1)
+            temp.endDate = Date.parse(coll[v + 1].DateTime);
+        else {
+
+            var dat = Date.parse(coll[v].DateTime);
+            //console.log(dat);
+            temp.endDate = dat + 600000;
+            temp.last = true;
+        }
+        temp.taskName = nam;
+
+        if (coll[v].State == 0)
+            temp.status = "Offline";
+        else if (coll[v].State == 1)
+            temp.status = "Waiting";
+        else if (coll[v].State == 2)
+            temp.status = "Transferring";
+        else if (coll[v].State == 3)
+            temp.status = "Calculating";
+        else if (coll[v].State == 4)
+            temp.status = "Paused";
+        else if (coll[v].State == 5)
+            temp.status = "Finished";
+        else if (coll[v].State == 6)
+            temp.status = "Aborted";
+        else if (coll[v].State == 7)
+            temp.status = "Failed";
+        tasks.push(temp);
+    }
+    return [tasks, nam];
+}
+function dataConversionLine(coll, nam) {
     var xarr = [];
     var yarr = [];
+
     for (var v = 0; v < coll.length; v++) {
+
         xarr.push(Date.parse(coll[v].DateTime));
+        // console.log(xarr[v]);
+        // xarr[v] = xarr[v] - 3600000;
         if (coll[v].State == 1)
             yarr.push("Waiting");
-        else if (coll[v].State == 2) 
+        else if (coll[v].State == 2)
             yarr.push("Transferring");
-        else if (coll[v].State == 3) 
+        else if (coll[v].State == 3)
             yarr.push("Calculating");
         else if (coll[v].State == 5)
@@ -54 +113 @@
             yarr.push("Failed");
     }
+
+
     var data = [{//Time graph
         x: xarr,
@@ -59 +120 @@
         type: 'scatter',
         mode: 'lines',
-        name: 'Task ' ,
-        connectgaps:true,
-        line:{shape:'hv'}
+        name: nam,
+        connectgaps: true,
+        line: { shape: 'hvh' }
     }];
-    layout= {
+    layout = {
         "showlegend": true,
         "width": "100%",
         "xaxis": {
-            "autorange": true, 
+            "autorange": true,
             "range": [
-                Date.parse(coll[0].DateTime), 
-                Date.parse(coll[coll.length -1].DateTime)
-            ], 
-            "title": "Time", 
+                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)
-            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'
-    }];
-    
-    return data;
-}
+
+    return [data, layout];
+}
+
 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)
+    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) 
+        else if (coll[v].State == 2)
             transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        else if (coll[v].State == 3) 
+        else if (coll[v].State == 3)
             calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
     }
@@ -133 +171 @@
     document.getElementById("graph" + val).style.width = "100%";
     document.getElementById("graph" + val).style.height = "400px";
+    document.getElementById("graph" + val).innerHTML = "";
+    document.getElementById("graph" + val).style.marginLeft = "0px";
     if (document.getElementById("graphtoggle" + val).checked) {
         setTimeout(function () {
+
+            var temp = getDataGantt(val);
+            var w = $("#graph" + val).parent().width() - 30;
+            document.getElementById("graph" + val).style.height = "200px";
+            var gantt = d3.gantt().selector('#graph' + val).height('200').width(w).margin({
+                top: 20,
+                right: 40,
+                bottom: 20,
+                left: 20
+            }).drawytitles(false).taskTypes([temp[1]]).taskStatus(taskStatus);
+            //    document.getElementById("graph" + val).style.marginLeft = "-40px";
+            gantt(temp[0]);
+        }, 100);
+
+
+        /* setTimeout(function () {
             Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
-        }, 100);
-        console.log("#REDRAWN LINE: " + val);
+        }, 100);*/
+        // console.log("#REDRAWN LINE: " + val);
     } else {
         setTimeout(function () {
@@ -144 +200 @@
         //console.log("#REDRAWN PIE: " + val);
     }
-    
+
 
 }
 function redrawMain() {
+    document.getElementById("graphMain").innerHTML = "";
+
+    var tempdata = [];
+    var tempnames = [];
+    for (var i = 0; i < dataCollection.length; i++) {
+        var t = dataCollection[i][3][0].slice();
+        var name =  t[0].taskName.substring(0, 5) + " | " + i + ":";
+
+        for (var v = 0; v < t.length; v++) {
+            t[v].taskName = name;
+        }
+        tempdata = tempdata.concat(t);
+        tempnames = tempnames.concat(name)
+    }
+    var h = (tempnames.length * 20) + 100;
+    document.getElementById("graphMain").style.height = h + "px";
+
+    var w = $("#graphMain").parent().width() - 100;
+
+    var gantt = d3.gantt().selector("#graphMain").height(h - 50).width(w).taskTypes(tempnames).taskStatus(taskStatus);
+    document.getElementById("graphMain").style.marginLeft = "20px";
+    gantt(tempdata);
+    /* LINE VERSION
     var temp = [];
     var min = dataCollection[0][1][0][0].x[0];
@@ -173 +252 @@
     }
      Plotly.newPlot('graphMain', temp, layout);
-
-
-}
+     */
+
+}

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

@@ -5 +5 @@
     $.connection.hub.start().done(function () {
         hubber.server.initConnection();
-        hubber.server.updateAll();
+        // hubber.server.updateAll();
         redrawMain();
     });
-    hubber.client.processData = function (id, data) {
+    hubber.client.processData = function (id, data, name) {
         var obj = JSON.parse(data);
+        
         editTaskData(id, obj);
-        saveData(id, obj.StateLog);
+        //console.log(name);
+        saveData(id, obj.StateLog, name);
+        console.log("#UPDATED " + id);
+    }
+    hubber.client.processJobData = function (calc, fin) {
+        editJobData(calc, fin);
     }
     hubber.client.requestDone = function () {
-        
-        setTimeout(function () {
-            hubber.server.updateAll();
-            console.log("#REFRESH ALL");
-            
-        }, 5000);
+        if (document.getElementById("refreshtogg").checked) {
+            setTimeout(function () {
+                hubber.server.updateAll();
+                console.log("#REFRESH ALL");
+
+            }, 5000);
+        }
     }
     //hubber.c
 })
 
+function autoRefresh() {
+    if (document.getElementById("refreshtogg").checked)
+        hubber.server.updateAll();
+
+}
+function restart(id) {
+    document.getElementById("restarterbtn" + id).disabled = true;
+    document.getElementById("restarterbtn" + id).value = "Sending restart request...";
+    hubber.server.restartTask(id);
+}
+function editJobData(c, f) {
+    $("#jobcalculating").html("Calculating: " + c);
+    $("#jobfinished").html("Finished: " + f);
+}
+
 function editTaskData(id, task) {
     //lastupdate
-    var dat = new Date(task.LastHeartbeat);
-    $("#lastupdpar" + id).html("Last update: " + dat.toUTCString());
+    if (task.LastHeartbeat != null) {
+        var dat = new Date(task.LastHeartbeat);
+        $("#lastupdpar" + id).html("Last update: " + dat.toUTCString());
+    }
+    else
+        $("#lastupdpar" + id).html("No updates yet");
+    //task restarter
+    document.getElementById("restarter" + id).style.display = "none";
     //state
-    if (task.State == "1") {
+    if (task.State == "0") {
+        $("#statepar" + id).css({
+            'color': 'gray',
+            'font-weight': 'normal'
+        });
+        $("#statepar" + id).html("State: Offline");
+    }
+    else if (task.State == "1") {
         $("#statepar" + id).css({
             'color': 'white',
@@ -39 +74 @@
         $("#statepar" + id).css({
             'color': 'white',
-            'font-weight': 'normal'
+            'font-weight': 'normal',
+            'text-shadow': '2px 2px black'
         });
         $("#statepar" + id).html("State: Transferring");
@@ -50 +86 @@
         $("#statepar" + id).html("State: Calculating");
     }
+    else if (task.State == "4") {
+        $("#statepar" + id).css({
+            'color': 'white',
+            'font-weight': 'normal'
+        });
+        $("#statepar" + id).html("State: Paused");
+        document.getElementById("restarter" + id).style.display = "";
+        document.getElementById("restarterbtn" + id).disabled = false;
+        document.getElementById("restarterbtn" + id).value = "Restart task";
+    }
     else if (task.State == "5") {
         $("#statepar" + id).css({
             'color': '#009900',
-            'font-weight': '900'
+            'font-weight': '900',
+            'text-shadow': '1px 1px black'
         });
         $("#statepar" + id).html("State: Finished");
-        var datf = new Date(task.StateLog[task.StateLog.length -1].DateTime);
+        var datf = new Date(task.StateLog[task.StateLog.length - 1].DateTime);
         $("#lastupdpar" + id).html("Finished: " + datf.toUTCString());
+    }
+    else if (task.State == "6") {
+        $("#statepar" + id).css({
+            'color': '#e60000',
+            'font-weight': '900',
+            'text-shadow': '1px 1px black'
+        });
+        $("#statepar" + id).html("State: Aborted");
+
+        document.getElementById("restarter" + id).style.display = "";
+        document.getElementById("restarterbtn" + id).disabled = false;
+        document.getElementById("restarterbtn" + id).value = "Restart task";
     }
     else if (task.State == "7") {
         $("#statepar" + id).css({
-            'color': '#df2020',
-            'font-weight': '900'
+            'color': '#e60000',
+            'font-weight': '900',
+            'text-shadow': '1px 1px black'
         });
         $("#statepar" + id).html("State: Failed");
+
+        document.getElementById("restarter" + id).style.display = "";
+        document.getElementById("restarterbtn" + id).disabled = false;
+        document.getElementById("restarterbtn" + id).value = "Restart task";
     }
-    
+
     //execution time
     $("#executionpar" + id).html(task.ExecutionTime + " executed");
+    //exception
+    if (task.StateLog[task.StateLog.length - 1].Exception != null)
+        if (task.StateLog[task.StateLog.length - 1].Exception != "") {
+            $("#exceptionpar" + id).html("Exception: " + task.StateLog[task.StateLog.length - 1].Exception)
+            $("#exceptionpar" + id).css({
+                'color': '#e60000',
+                'font-weight': '700',
+                'text-shadow': '1px 1px black'
+            });
+        }
+        else if (task.State == "6") {
+            $("#exceptionpar" + id).html("Task is aborted.")
+            $("#exceptionpar" + id).css({
+                'color': '#e65c00',
+                'font-weight': '700',
+                'text-shadow': '1px 1px black'
+            });
+        }
+        else {
+            $("#exceptionpar" + id).html("No exceptions");
+            $("#exceptionpar" + id).css({
+                'color': 'white',
+                'text-shadow': '2px 2px black'
+            });
+        }
+    else {
+        $("#exceptionpar" + id).html("No exceptions");
+        $("#exceptionpar" + id).css({
+            'color': 'white',
+            'text-shadow': '2px 2px black'
+        });
+    }
     //state changes
-    $("#statechangespar" + id).html("Statelogs: "+task.StateLog.length);
+    $("#statechangespar" + id).html("Statelogs: " + task.StateLog.length);
     //graph title
     var dat1 = new Date(task.StateLog[0].DateTime);

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/hubber.js

@@ -22 +22 @@
 function addtoHive() {
 
-    var jobname = prompt("Please enter a job name", "Job");
+    var jobname = document.getElementById("jname").value;
     if (jobname && jobname != "" && jobname != null) {
         hubber.server.changeName(jobname);
@@ -29 +29 @@
         document.getElementById("result").style.display = "";
         document.getElementById("realhiveadd").click();
+    } else {
+        alert("Job name not set!");
     }
 }