Merge 85ca01f into 9d8ce20

daliuge-engine/dlg/manager/web/dim.html

@@ -11,6 +11,7 @@
 	<script src="/static/js/bootbox.min.js"></script>
 	<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 	<link  href="/static/css/dm.css" rel="stylesheet" type="text/css"/>
+	<link  href="/static/css/progressBar.css" rel="stylesheet" type="text/css"/>
 	<style>
 		@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css";
 	</style>
@@ -109,7 +110,7 @@ <h4>Nodes</h4>
 		var rows = d3.select(selector).selectAll('tr').data(data);
 		var newRow = rows.enter().append('tr');
 		var nodeName = String;
-		newRow.style('opacity', 0.0).transition().delay(0).duration(500).style('opacity',1.0);
+		newRow.style('opacity', 0.0).transition().delay(0).duration(500).style('opacity',1.0)
 		newRow.append('td').classed('id', true)
 			.append('a').attr("href", nodeHref).text(String);
 		newRow.append('td').classed('details', true)

daliuge-engine/dlg/manager/web/dm.html

@@ -11,6 +11,7 @@
 	<script src="/static/js/bootbox.min.js"></script>
 	<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 	<link  href="/static/css/dm.css" rel="stylesheet" type="text/css"/>
+	<link  href="/static/css/progressBar.css" rel="stylesheet" type="text/css"/>
 	<style>
 		@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css";
 	</style>

daliuge-engine/dlg/manager/web/session.html

@@ -13,6 +13,7 @@
 	<script src="/static/js/dm.js"></script>
 	<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 	<link  href="/static/css/session.css" rel="stylesheet" type="text/css"/>
+	<link  href="/static/css/progressBar.css" rel="stylesheet" type="text/css"/>
 	<style>
 		@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css";
 	</style>
@@ -162,7 +163,7 @@
 	d3.select('#pg-progress-bar').remove();
 
 	const heightValue = 300;
-const widthValue = 600;
+	const widthValue = 600;
 	// Set up zoom support
 	var svg = d3.select("svg");
 

daliuge-engine/dlg/manager/web/static/css/dm.css

@@ -80,4 +80,29 @@ color:rgba(0,35,73,1);
 .inactiveLink {
     pointer-events: none;
     cursor: default;
- }
+ }
+
+ tr td:nth-child(n+2),tr th:nth-child(n+2) { 
+  text-align: right;
+}
+
+tr td.actions button{
+  padding: 2px 4px;
+  font-size:16px;  
+}
+
+tr td.actions{
+  padding:9px 12px;
+}
+
+.status svg {
+    width: 100%;
+    height: 20px;
+    position: relative;
+  }
+
+.status {
+  width: 150px;
+  height:30px;
+  overflow: hidden;
+}

daliuge-engine/dlg/manager/web/static/css/progressBar.css

@@ -0,0 +1,48 @@
+
+  .node rect, .node polygon {
+    stroke-width: 2.0px;
+    stroke: #bbb;
+    height:100%;
+  }
+
+  /* DROP states */
+  .node.initialized :first-child, rect.initialized {
+    fill: #ffe;
+  }
+
+  .node.writing :first-child, rect.writing {
+    fill: #ecde7b;
+  }
+
+  .node.completed :first-child, rect.completed {
+    fill: #7bdc7b;
+  }
+
+  .node.expired :first-child, rect.expired {
+    fill: #700000;
+  }
+
+  .node.cancelled :first-child, rect.cancelled {
+    fill: #cccccc;
+  }
+
+  .node.deleted :first-child, rect.deleted {
+    color: #700000;
+  }
+
+  /* AppDROP states */
+  .node.not_run :first-child, rect.not_run {
+    fill: #ffe;
+  }
+
+  .node.running :first-child, rect.running {
+    fill: #ecde7b;
+  }
+
+  .node.finished :first-child, rect.finished {
+    fill: #7bdc7b;
+  }
+
+  .node.error :first-child, rect.error {
+    fill: #e44f33;
+  }

daliuge-engine/dlg/manager/web/static/css/session.css

@@ -52,61 +52,6 @@ svg {
   overflow: hidden;
 }
 
-.node rect, .node polygon {
-  stroke-width: 2.0px;
-  stroke: #bbb;
-}
-
-/* DROP states */
-.node.initialized :first-child, rect.initialized {
-  fill: #ffe;
-}
-
-.node.writing :first-child, rect.writing {
-  fill: #ecde7b;
-}
-
-.node.completed :first-child, rect.completed {
-  fill: #7bdc7b;
-}
-
-.node.expired :first-child, rect.expired {
-  fill: #700000;
-}
-
-.node.cancelled :first-child, rect.cancelled {
-  fill: #cccccc;
-}
-
-.node.deleted :first-child, rect.deleted {
-  color: #700000;
-}
-
-.node.skipped :first-child, rect.skipped {
-  fill: #53c4f6;
-}
-
-/* AppDROP states */
-.node.not_run :first-child, rect.not_run {
-  fill: #ffe;
-}
-
-.node.running :first-child, rect.running {
-  fill: #ecde7b;
-}
-
-.node.finished :first-child, rect.finished {
-  fill: #7bdc7b;
-}
-
-.node.error :first-child, rect.error {
-  fill: #e44f33;
-}
-
-.node.container polygon {
-  stroke-dasharray: 5;
-}
-
 .node g div {
   width: 180px;
   height: 60px;

daliuge-engine/dlg/manager/web/static/js/dm.js

@@ -143,7 +143,6 @@ function loadSessions(serverUrl, tbodyEl, refreshBtn, selectedNode, delay) {
 		if( selectedNode ) { url += '&node=' + selectedNode; }
 		var dimUrlQuery = new URL(window.location.href);
 		var dimUrl = dimUrlQuery.searchParams.get("dim_url");
-		console.log(dimUrl)
 		url+="&dim_url="+dimUrl;
 		return url;
 	};
@@ -166,7 +165,7 @@ function loadSessions(serverUrl, tbodyEl, refreshBtn, selectedNode, delay) {
 
 		var sessions = response;
 		sessions.sort(function comp(a,b) {
-			return (a.sessionId < b.sessionId) ? -1 : (a.sessionId > b.sessionId);
+			return (a.sessionId > b.sessionId) ? -1 : (a.sessionId < b.sessionId);
 		});
 		// console.log(sessions[0]);
 		var rows = tbodyEl.selectAll('tr').data(sessions);
@@ -188,8 +187,50 @@ function loadSessions(serverUrl, tbodyEl, refreshBtn, selectedNode, delay) {
 		sizeCells.text(String)
 		sizeCells.exit().remove()
 
+		//progressbars in dim
+
+		const width = $('#sessionsTable').find('.status').innerWidth();
+		var graph_update_handler = function(oids, dropSpecs) {};
+
+		var status_update_handler = function(statuses){
+			var states = ['completed', 'finished',
+						'running', 'writing',
+						'error', 'expired', 'deleted',
+						'cancelled',
+						'not_run', 'initialized'];
+			var states_idx = d3.scale.ordinal().domain(states).rangePoints([0, states.length - 1]);
+
+			var scale = function(x) {
+				return Math.round(x * width / statuses.length);
+			};
+
+			/* Get total and per-status counts, then normalize to 0-100% */
+			var total = statuses.length;
+			var status_counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+			statuses.reduce(function(status_counts, s) {
+				var idx = states_idx(get_status_name(s));
+				status_counts[idx] = status_counts[idx] + 1;
+				return status_counts;
+			}, status_counts);
 
-		console.log(DimSessionLink)
+			for (var cumsum = [0], i = 0; i < status_counts.length - 1; i++)
+				cumsum[i + 1] = cumsum[i] + status_counts[i];
+
+			status_counts = status_counts.map(function(x, i) {
+				return [scale(cumsum[i]), scale(x)];
+			});
+			var rects = d3.select('#sessionsTable .status svg').selectAll('rect').data(status_counts);
+			rects.enter().append('rect')
+				.style('height', 20).style('width', 0).style('x', 0).style('y', 0)
+				.transition().delay(0).duration(500)
+				.style('x', function(d) { return d[0] + 20; })
+				.style('width', function(d) { return d[1]; })
+				.attr('class', function(d) { return states[status_counts.indexOf(d)]; });
+			rects.style('x', function(d) { return d[0] + 20; })
+				.style('width', function(d) { return d[1]; })
+				.attr('class', function(d) { return states[status_counts.indexOf(d)]; });
+			rects.exit().remove();
+		};
 
 		statusCells = rows.selectAll('td.details').data(function values(s) { return [s.sessionId]; });
 		statusCells.enter().append('td').classed('details', true)
@@ -213,21 +254,35 @@ function loadSessions(serverUrl, tbodyEl, refreshBtn, selectedNode, delay) {
 				cancel_session(serverUrl, session.sessionId, cancelSessionBtn); 
 			});
 		})
-
+		
 		//update status colours and hide cancel button if finished or cancelled
 		$(".status").each(function(){
 			var currentStatus = $(this).html()
+
 			if(currentStatus==="Cancelled"){
 				$(this).css("color","grey");
 				$(this).parent().find(".actions").find("button").hide();
+				$(this).parent().removeClass("progressRunning")
 			}else if(currentStatus==="Deploying"){
 				$(this).css("color","blue");
+				$(this).parent().removeClass("progressRunning")
 			}
 			else if (currentStatus==="Running") {
-				$(this).css("color","orange");
-			}else{
+				$(this).text("");
+				$(this).parent().find(".actions").find("button").show();
+				$(this).append("<svg>")
+				if(!$(this).parent().hasClass('progressRunning')){
+					startStatusQuery(serverUrl, $(this).parent().find(".id").text(), selectedNode, graph_update_handler,
+						status_update_handler, 1000);
+					$(this).parent().addClass("progressRunning")
+				}
+			}else if (currentStatus==="Finished"){
 				$(this).css("color","#00af28");
 				$(this).parent().find(".actions").find("button").hide();
+				$(this).parent().removeClass("progressRunning")
+			}else{
+				$(this).css("color","purple");
+				$(this).parent().removeClass("progressRunning")
 			}
 		})