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

Timestamp:

03/30/16 17:30:01 (9 years ago)

Author:

jlodewyc

Message:

#2582 Job Manager done. Start user management

Location:

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

Files:

• Scripts/Graphs/GraphDataCollector.js (modified) (13 diffs)
• Scripts/Graphs/GraphDataCollector.min.js (added)
• Scripts/Graphs/GraphHubber.js (modified) (13 diffs)
• Scripts/Graphs/GraphHubber.min.js (added)
• Scripts/hubber.js (modified) (5 diffs)
• Scripts/hubber.min.js (added)
• d3-gantt-jobstatus.js (modified) (6 diffs)
• d3-gantt-jobstatus.min.js (added)
• d3-tip.min.js (added)

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

@@ -1 @@
-var dataCollection = [];
+//Keeps all the data for the job. Used to communicate through SignalR
+var dataCollection = [];
+//Possible task statusses
 var taskStatus = {
     "Offline": "bar-off",
@@ -11 +13 @@
 }
 
+
 function initSaveData(id, coll, name) {//initial data save
     var temp = dataConversion(coll, name);
@@ -17 +20 @@
     // console.log("#CREATION: " + id);
 }
+//Saves updated info in dataCollection
 function saveData(id, coll, name) {
     var temp = dataConversion(coll, name);
@@ -26 +30 @@
         }
     }
-    //console.log("#SAVEDATA: " + id);
     redrawGraph(id);
 }
+//Returns data for line graph 
+//DISABLED FOR GANTT CHART
+/*
 function getData(id) {
     for (var i = 0; i < dataCollection.length; i++) {
@@ -35 +41 @@
         }
     }
-}
+}*/
+//Returns data needed for Pie chart
 function getDataPie(id) {
     for (var i = 0; i < dataCollection.length; i++) {
@@ -43 +50 @@
     }
 }
+//Returns data needed for Gantt chart
 function getDataGantt(id) {
     for (var i = 0; i < dataCollection.length; i++) {
@@ -50 +58 @@
     }
 }
+//Converts received data from server to data needed for the graphs
 function dataConversion(coll, name) {
-    var line = null;//dataConversionLine(coll, name);
+    //var line = dataConversionLine(coll, name);
     var pie = dataConversionPie(coll);
     var gantt = dataConversionGantt(coll, name);
-    return [line, pie, gantt];
-}
+    return [null, pie, gantt];
+}
+//Creates all data needed for drawing a single Gantt chart for one task
 function dataConversionGantt(coll, nam) {
     var tasks = [];
@@ -93 +103 @@
     return [tasks, nam];
 }
-/*
+/* DISABLED FOR GANTT CHART
 function dataConversionLine(coll, nam) {
     var xarr = [];
@@ -142 +152 @@
     return [data, layout];
 }*/
-
+//Calculates data necessary for drawing  a pie chart for a single task. 
 function dataConversionPie(coll) {
     var waiting = 0;
@@ -172 +182 @@
 }
 
+//Draws and redraws a graph from a single task
 function redrawGraph(val) {
     document.getElementById("graph" + val).style.width = "100%";
@@ -177 +188 @@
     document.getElementById("graph" + val).innerHTML = "";
     document.getElementById("graph" + val).style.marginLeft = "0px";
-    if (document.getElementById("graphtoggle" + val).checked) {
+    if (document.getElementById("graphtoggle" + val).checked)
+    {//Redraws a Gantt chart
         setTimeout(function () {
 
@@ -194 +206 @@
 
 
-        /* setTimeout(function () {
+        /* DISABLED FOR GANTT CHART
+        setTimeout(function () {
             Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
         }, 100);*/
-        // console.log("#REDRAWN LINE: " + val);
-    } else {
+    }
+    else
+    {//Redraws a pie chart
         document.getElementById("legend" + val).style.display = "none";
         setTimeout(function () {
             Plotly.newPlot('graph' + val, getDataPie(val));
         }, 100);
-        //console.log("#REDRAWN PIE: " + val);
-    }
-
-
-}
+    }
+
+
+}
+//Draws and redraws the main Gantt chart. Taking info from the single task charts
+//And combining these into one big chart
 function redrawMain() {
     document.getElementById("graphMain").innerHTML = "";
@@ -215 +230 @@
     for (var i = 0; i < dataCollection.length; i++) {
         var t = dataCollection[i][3][0].slice();
-        var name =  t[0].taskName.substring(0, 5) + " | " + i + ":";
+        var name =  t[0].taskName.substring(0, 5) + " | " + (i+1);
 
         for (var v = 0; v < t.length; v++) {

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

@@ -4 +4 @@
   //  $.connection.hub.logging = true;
     var v = document.getElementById("userId").innerHTML;
-    console.log(v);
     $.connection.hub.qs = { 'userid': v };
     $.connection.hub.start().done(function () {
         hubber.server.initConnection();
-        // hubber.server.updateAll();
         redrawMain();
     });
+    //processes updates task info for each individual task
     hubber.client.processData = function (id, data, name) {
         var obj = JSON.parse(data);
-        
         editTaskData(id, obj);
-        //console.log(name);
+
         saveData(id, obj.StateLog, name);
         console.log("#UPDATED " + id);
     }
+    //processes updated job info
     hubber.client.processJobData = function (calc, fin) {
         editJobData(calc, fin);
     }
+    //Called when server is done with request
     hubber.client.requestDone = function () {
         if (document.getElementById("refreshtogg").checked) {
@@ -31 +31 @@
         }
     }
-    //hubber.c
 })
 
+//Toggles the refresh button. ON is refresh every 5 sec, OFF is no refresh
 function autoRefresh() {
     if (document.getElementById("refreshtogg").checked)
@@ -39 +39 @@
 
 }
+//Restarts an aborted, paused or failed task
 function restart(id) {
     document.getElementById("restarterbtn" + id).disabled = true;
@@ -44 +45 @@
     hubber.server.restartTask(id);
 }
+//Writes the new job info to the page
 function editJobData(c, f) {
     $("#jobcalculating").html("Calculating: " + c);
     $("#jobfinished").html("Finished: " + f);
 }
-
+//Writes updated task info to the page
 function editTaskData(id, task) {
     //lastupdate
@@ -60 +62 @@
     document.getElementById("restarter" + id).style.display = "none";
     //state
-    if (task.State == "0") {
+    if (task.State == "0") {//OFFLINE
         $("#statepar" + id).css({
             'color': 'gray',
@@ -67 +69 @@
         $("#statepar" + id).html("State: Offline");
     }
-    else if (task.State == "1") {
+    else if (task.State == "1") {//WAITING
         $("#statepar" + id).css({
             'color': 'white',
@@ -74 +76 @@
         $("#statepar" + id).html("State: Waiting");
     }
-    else if (task.State == "2") {
+    else if (task.State == "2") {//TRANSFERRING
         $("#statepar" + id).css({
             'color': 'white',
@@ -82 +84 @@
         $("#statepar" + id).html("State: Transferring");
     }
-    else if (task.State == "3") {
+    else if (task.State == "3") {//CALCULATING
         $("#statepar" + id).css({
             'color': 'white',
@@ -89 +91 @@
         $("#statepar" + id).html("State: Calculating");
     }
-    else if (task.State == "4") {
+    else if (task.State == "4") {//PAUSED 
         $("#statepar" + id).css({
             'color': 'white',
@@ -95 +97 @@
         });
         $("#statepar" + id).html("State: Paused");
+        //Able to restart
         document.getElementById("restarter" + id).style.display = "";
         document.getElementById("restarterbtn" + id).disabled = false;
         document.getElementById("restarterbtn" + id).value = "Restart task";
     }
-    else if (task.State == "5") {
+    else if (task.State == "5") {//FINISHED
         $("#statepar" + id).css({
             'color': '#009900',
@@ -109 +112 @@
         $("#lastupdpar" + id).html("Finished: " + datf.toUTCString());
     }
-    else if (task.State == "6") {
+    else if (task.State == "6") {//ABORTED
         $("#statepar" + id).css({
             'color': '#e60000',
@@ -116 +119 @@
         });
         $("#statepar" + id).html("State: Aborted");
-
+        //Able to restart
         document.getElementById("restarter" + id).style.display = "";
         document.getElementById("restarterbtn" + id).disabled = false;
         document.getElementById("restarterbtn" + id).value = "Restart task";
     }
-    else if (task.State == "7") {
+    else if (task.State == "7") {//FAILED
         $("#statepar" + id).css({
             'color': '#e60000',
@@ -128 +131 @@
         });
         $("#statepar" + id).html("State: Failed");
-
+        //Able to restart
         document.getElementById("restarter" + id).style.display = "";
         document.getElementById("restarterbtn" + id).disabled = false;

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

@@ -9 +9 @@
         $("#progress").css("width", 0 + '%');
         $('#progress').attr('aria-valuenow', 0);
+        //Initial connection to server
         hubber.server.handleMessage("Looking for connection...");
-
     });
+    //Processes progress update received from server
     hubber.client.processMessage = function (message, value) {
 
@@ -22 +23 @@
     };
 });
-
+//Adds the current loaded job to Hive.
 function addtoHive() {
 
@@ -37 +38 @@
     }
 }
+//Toggles a tasks child distribution
 function toggleChild(arr, idchilds) {
     console.log(arr + " toggled");
@@ -46 +48 @@
     $('body').click();
 }
+//Changes a tasks priority
 function changePriority(arr, prior, idprior) {
     console.log(arr + " to priority " + prior);
@@ -70 +73 @@
     document.getElementById("prior" + idprior).innerHTML += "<span class='caret'></span>";
 }
+//Resets the priorities from a view
 function resetPrior(id) {
     document.getElementById("prior" + id).className = "btn dropdown-toggle ";

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/d3-gantt-jobstatus.js

@@ -3 +3 @@
  * @version 2.1
 
-  * Rewritten for Hive Web Job Manager
+  * Rewritten for Hive Web Job Manager by Jonas
  */
 
@@ -33 +33 @@
         return d.startDate + d.taskName + d.endDate;
     };
-
+    //Locks graph to specific timezone
+    //3600000 = +1 hour
+    var timeCorrector = 3600000 * (+1); //Currently: + 1
+    
     var rectTransform = function (d) {
-        return "translate(" + x(d.startDate - 3600000) + "," + y(d.taskName) + ")";
+        return "translate(" + x(d.startDate - timeCorrector) + "," + y(d.taskName) + ")";
     };
 
@@ -66 +69 @@
 
     var initAxis = function () {
-        x = d3.time.scale().domain([timeDomainStart - 3600000, timeDomainEnd - 3600000]).range([0, width]).clamp(true);
+        x = d3.time.scale().domain([timeDomainStart - timeCorrector, timeDomainEnd - timeCorrector]).range([0, width]).clamp(true);
         y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([0, height - margin.top - margin.bottom], .1);
         if (new Date(timeDomainStart).toDateString() != new Date(timeDomainEnd).toDateString()) {
@@ -126 +129 @@
        .attr("height", function (d) { return y.rangeBand(); })
        .attr("width", function (d) {
-           return (x(d.endDate - 3600000) - x(d.startDate - 3600000));
+           return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
        })
        .on('mouseover', tip.show)
@@ -221 +224 @@
  .attr("height", function (d) { return y.rangeBand(); })
  .attr("width", function (d) {
-     return (x(d.endDate - 3600000) - x(d.startDate - 3600000));
+     return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
  });
 
@@ -228 +231 @@
  .attr("height", function (d) { return y.rangeBand(); })
  .attr("width", function (d) {
-     return (x(d.endDate - 3600000) - x(d.startDate - 3600000));
+     return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
  });