diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 8ee4615a1..000000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/daliuge-engine/dlg/manager/web/dim.html b/daliuge-engine/dlg/manager/web/dim.html
index ac2ff2ddf..7873e2974 100644
--- a/daliuge-engine/dlg/manager/web/dim.html
+++ b/daliuge-engine/dlg/manager/web/dim.html
@@ -11,6 +11,7 @@
+
@@ -109,7 +110,7 @@ Nodes
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)
diff --git a/daliuge-engine/dlg/manager/web/dm.html b/daliuge-engine/dlg/manager/web/dm.html
index c5d531f0f..c61727efb 100644
--- a/daliuge-engine/dlg/manager/web/dm.html
+++ b/daliuge-engine/dlg/manager/web/dm.html
@@ -11,6 +11,7 @@
+
diff --git a/daliuge-engine/dlg/manager/web/session.html b/daliuge-engine/dlg/manager/web/session.html
index 0f2227531..ef1a863ad 100644
--- a/daliuge-engine/dlg/manager/web/session.html
+++ b/daliuge-engine/dlg/manager/web/session.html
@@ -13,6 +13,7 @@
+
@@ -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");
diff --git a/daliuge-engine/dlg/manager/web/static/css/dm.css b/daliuge-engine/dlg/manager/web/static/css/dm.css
index a16661bec..4ef74fb47 100644
--- a/daliuge-engine/dlg/manager/web/static/css/dm.css
+++ b/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;
- }
\ No newline at end of file
+ }
+
+ 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;
+}
diff --git a/daliuge-engine/dlg/manager/web/static/css/progressBar.css b/daliuge-engine/dlg/manager/web/static/css/progressBar.css
new file mode 100644
index 000000000..09b18cb78
--- /dev/null
+++ b/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;
+ }
\ No newline at end of file
diff --git a/daliuge-engine/dlg/manager/web/static/css/session.css b/daliuge-engine/dlg/manager/web/static/css/session.css
index 60c82debf..f8bef16b6 100644
--- a/daliuge-engine/dlg/manager/web/static/css/session.css
+++ b/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;
diff --git a/daliuge-engine/dlg/manager/web/static/js/dm.js b/daliuge-engine/dlg/manager/web/static/js/dm.js
index f510b1542..b9f917b6b 100644
--- a/daliuge-engine/dlg/manager/web/static/js/dm.js
+++ b/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("