From 4b57e5dc52bcd34e8bd73c14a5d7fe29617cddb2 Mon Sep 17 00:00:00 2001 From: Julian Querido Date: Tue, 23 Apr 2024 08:04:57 +0200 Subject: [PATCH 1/4] Show downloaded images size when available else percent --- .../source/class/osparc/data/model/Node.js | 4 +- .../osparc/data/model/NodeProgressSequence.js | 144 +++++++++++++----- .../source/class/osparc/data/model/Study.js | 4 +- .../client/source/class/osparc/utils/Utils.js | 4 +- 4 files changed, 113 insertions(+), 43 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/data/model/Node.js b/services/static-webserver/client/source/class/osparc/data/model/Node.js index 6585289b45a..8dfa47bc437 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/Node.js +++ b/services/static-webserver/client/source/class/osparc/data/model/Node.js @@ -1330,10 +1330,10 @@ qx.Class.define("osparc.data.model.Node", { }); }, - setNodeProgressSequence: function(progressType, progress) { + setNodeProgressSequence: function(progressType, progressReport) { const nodeStatus = this.getStatus(); if (nodeStatus.getProgressSequence()) { - nodeStatus.getProgressSequence().addProgressMessage(progressType, progress); + nodeStatus.getProgressSequence().addProgressMessage(progressType, progressReport); } }, diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js index 6a57afe7dad..2d080cca42d 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js +++ b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js @@ -47,43 +47,61 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, clusterUpScaling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applyClusterUpScaling" }, sidecarPulling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applySidecarPulling" }, outputsPulling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applyOutputsPulling" }, statePulling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applyStatePulling" }, imagesPulling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applyImagesPulling" }, inputsPulling: { - check: "Number", - init: 0, + check: "Object", + init: { + progressLabel: "", + value: 0 + }, nullable: false, apply: "__applyInputsPulling" } @@ -92,7 +110,8 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { statics: { NODE_INDEX: { LABEL: 0, - HALO: 1, + CALC: 1, + HALO: 2, }, createTaskLayout: function(label) { @@ -130,6 +149,15 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { osparc.service.StatusUI.getStatusHalo(iconContainer, progressColor, 0); layout.addAt(iconContainer, this.NODE_INDEX.HALO); + const progressState = new qx.ui.basic.Label(); + progressState.set({ + value: "", + textColor: "text", + allowGrowX: true, + allowShrinkX: true + }); + layout.addAt(progressState, this.NODE_INDEX.CALC); + return layout; }, @@ -144,7 +172,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { return progressBar; }, - updateProgressLabel: function(atom, value) { + updateProgressLabel: function(atom, {value, progressLabel}) { if ([null, undefined].includes(value)) { return; } @@ -155,6 +183,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { icon.setVisibility(value === 1 ? "visible" : "excluded"); const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar") osparc.service.StatusUI.getStatusHalo(halo, progressColor, value * 100); + + const isProgressLabelVisible = progressLabel !== "0%" && progressLabel !== "100%"; + const label = atom.getChildren()[this.NODE_INDEX.CALC]; + label.setValue(progressLabel); + label.setVisibility(isProgressLabelVisible ? "visible" : "excluded") } }, @@ -188,16 +221,38 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, resetSequence: function() { + const defaultVals = { + progressLabel: "0%", + value: 0 + } this.setOverallProgress(0); - this.setClusterUpScaling(0); - this.setSidecarPulling(0); - this.setOutputsPulling(0); - this.setStatePulling(0); - this.setImagesPulling(0); - this.setInputsPulling(0); + this.setClusterUpScaling(defaultVals); + this.setSidecarPulling(defaultVals); + this.setOutputsPulling(defaultVals); + this.setStatePulling(defaultVals); + this.setImagesPulling(defaultVals); + this.setInputsPulling(defaultVals); }, - addProgressMessage: function(progressType, progress) { + getProgress: function(report) { + const isDownloading = report["actual_value"] > 0 && report["actual_value"] < report["total"]; + if (report.unit) { + return { + progressLabel: isDownloading ? + `${osparc.utils.Utils.bytesToSize(report["actual_value"], 1, false)} / ${osparc.utils.Utils.bytesToSize(report["total"], 1)}` : + `${osparc.utils.Utils.bytesToSize(report["total"], 1)}`, + value: report["actual_value"] / report["total"] + } + } + const percentage = parseFloat((report["actual_value"] / report["total"] * 100).toFixed(2)) + return { + progressLabel: isDownloading ? `${percentage}%` : "", + value: report["actual_value"] / report["total"] + } + }, + + addProgressMessage: function(progressType, progressReport) { + const progress = this.getProgress(progressReport); switch (progressType) { case "CLUSTER_UP_SCALING": this.setClusterUpScaling(progress); @@ -283,12 +338,12 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __computeOverallProgress: function() { - const overallProgress = this.getClusterUpScaling() + - this.getSidecarPulling() + - this.getOutputsPulling() + - this.getStatePulling() + - this.getImagesPulling() + - this.getInputsPulling(); + const overallProgress = this.getClusterUpScaling().value + + this.getSidecarPulling().value + + this.getOutputsPulling().value + + this.getStatePulling().value + + this.getImagesPulling().value + + this.getInputsPulling().value; this.setOverallProgress(overallProgress) }, @@ -311,8 +366,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __applySidecarPulling: function(value) { - if (value > 0) { - this.setClusterUpScaling(1); + if (value.value > 0) { + this.setClusterUpScaling({ + progressLabel: "100%", + value: 1 + }); } this.self().updateProgressLabel(this.__pullingSidecarLayout, value); @@ -320,8 +378,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __applyOutputsPulling: function(value) { - if (value > 0) { - this.setSidecarPulling(1); + if (value.value > 0) { + this.setSidecarPulling({ + progressLabel: "100%", + value: 1 + }); } this.self().updateProgressLabel(this.__pullingOutputsLayout, value); @@ -329,8 +390,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __applyStatePulling: function(value) { - if (value > 0) { - this.setSidecarPulling(1); + if (value.value > 0) { + this.setSidecarPulling({ + progressLabel: "100%", + value: 1 + }); } this.self().updateProgressLabel(this.__pullingStateLayout, value); @@ -338,8 +402,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __applyImagesPulling: function(value) { - if (value > 0) { - this.setSidecarPulling(1); + if (value.value > 0) { + this.setSidecarPulling({ + progressLabel: "100%", + value: 1 + }); } this.self().updateProgressLabel(this.__pullingImagesLayout, value); @@ -347,8 +414,11 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __applyInputsPulling: function(value) { - if (value > 0) { - this.setSidecarPulling(1); + if (value.value > 0) { + this.setSidecarPulling({ + progressLabel: "100%", + value: 1 + }); } this.self().updateProgressLabel(this.__pullingInputsLayout, value); diff --git a/services/static-webserver/client/source/class/osparc/data/model/Study.js b/services/static-webserver/client/source/class/osparc/data/model/Study.js index d92fd874129..73230030165 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/Study.js +++ b/services/static-webserver/client/source/class/osparc/data/model/Study.js @@ -432,8 +432,8 @@ qx.Class.define("osparc.data.model.Study", { const node = workbench.getNode(nodeId); if (node) { const progressType = nodeProgressData["progress_type"]; - const progress = nodeProgressData["progress_report"]["actual_value"] / nodeProgressData["progress_report"]["total"]; - node.setNodeProgressSequence(progressType, progress); + const progressReport = nodeProgressData["progress_report"]; + node.setNodeProgressSequence(progressType, progressReport); } }, diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index ae87a278142..1606589110f 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/services/static-webserver/client/source/class/osparc/utils/Utils.js @@ -552,7 +552,7 @@ qx.Class.define("osparc.utils.Utils", { return L > 0.35 ? "#FFF" : "#000"; }, - bytesToSize: function(bytes, decimals = 2) { + bytesToSize: function(bytes, decimals = 2, isPrefixVisible = true) { if (!+bytes) { return "0 Bytes"; } @@ -561,7 +561,7 @@ qx.Class.define("osparc.utils.Utils", { const dm = decimals < 0 ? 0 : decimals; const i = Math.floor(Math.log(bytes) / Math.log(k)) - return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${isPrefixVisible ? sizes[i] : ""}` }, bytesToGB: function(bytes) { From 502564f8ecd5a55b665feee95da21a5f34c5497f Mon Sep 17 00:00:00 2001 From: Julian Querido Date: Tue, 23 Apr 2024 11:46:24 +0200 Subject: [PATCH 2/4] consistancy - show Waiting... start and 100% or size downloaded --- .../osparc/data/model/NodeProgressSequence.js | 72 ++++++++++--------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js index 2d080cca42d..897c37d3032 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js +++ b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js @@ -49,7 +49,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { clusterUpScaling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -59,7 +59,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { sidecarPulling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -69,7 +69,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { outputsPulling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -79,7 +79,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { statePulling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -89,7 +89,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { imagesPulling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -99,7 +99,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { inputsPulling: { check: "Object", init: { - progressLabel: "", + progressLabel: qx.locale.Manager.tr("Waiting..."), value: 0 }, nullable: false, @@ -151,7 +151,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { const progressState = new qx.ui.basic.Label(); progressState.set({ - value: "", + value: qx.locale.Manager.tr("Waiting..."), textColor: "text", allowGrowX: true, allowShrinkX: true @@ -184,10 +184,8 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { const progressColor = qx.theme.manager.Color.getInstance().resolve("progressbar") osparc.service.StatusUI.getStatusHalo(halo, progressColor, value * 100); - const isProgressLabelVisible = progressLabel !== "0%" && progressLabel !== "100%"; const label = atom.getChildren()[this.NODE_INDEX.CALC]; label.setValue(progressLabel); - label.setVisibility(isProgressLabelVisible ? "visible" : "excluded") } }, @@ -216,15 +214,26 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __pullingInputsLayout: null, __disclaimerText: null, + getDefaultStartValues: function() { + return { + progressLabel: qx.locale.Manager.tr("Waiting..."), + value: 0 + } + }, + + getDefaultEndValues: function() { + return { + progressLabel: "100%", + value: 1 + } + }, + getWidgetForLoadingPage: function() { return this.__mainLoadingPage; }, resetSequence: function() { - const defaultVals = { - progressLabel: "0%", - value: 0 - } + const defaultVals = this.getDefaultStartValues(); this.setOverallProgress(0); this.setClusterUpScaling(defaultVals); this.setSidecarPulling(defaultVals); @@ -246,7 +255,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { } const percentage = parseFloat((report["actual_value"] / report["total"] * 100).toFixed(2)) return { - progressLabel: isDownloading ? `${percentage}%` : "", + progressLabel: `${percentage}%`, value: report["actual_value"] / report["total"] } }, @@ -367,10 +376,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applySidecarPulling: function(value) { if (value.value > 0) { - this.setClusterUpScaling({ - progressLabel: "100%", - value: 1 - }); + const defaultEndVals = this.getDefaultEndValues(); + this.setClusterUpScaling(defaultEndVals); + this.self().updateProgressLabel(this.__clusterUpScalingLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingSidecarLayout, value); @@ -379,10 +387,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyOutputsPulling: function(value) { if (value.value > 0) { - this.setSidecarPulling({ - progressLabel: "100%", - value: 1 - }); + const defaultEndVals = this.getDefaultEndValues(); + this.setSidecarPulling(defaultEndVals); + this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingOutputsLayout, value); @@ -391,10 +398,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyStatePulling: function(value) { if (value.value > 0) { - this.setSidecarPulling({ - progressLabel: "100%", - value: 1 - }); + const defaultEndVals = this.getDefaultEndValues(); + this.setSidecarPulling(defaultEndVals); + this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingStateLayout, value); @@ -403,10 +409,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyImagesPulling: function(value) { if (value.value > 0) { - this.setSidecarPulling({ - progressLabel: "100%", - value: 1 - }); + const defaultEndVals = this.getDefaultEndValues(); + this.setSidecarPulling(defaultEndVals); + this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingImagesLayout, value); @@ -415,10 +420,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyInputsPulling: function(value) { if (value.value > 0) { - this.setSidecarPulling({ - progressLabel: "100%", - value: 1 - }); + const defaultEndVals = this.getDefaultEndValues(); + this.setSidecarPulling(defaultEndVals); + this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingInputsLayout, value); From 98dc5cc3487dc5f5055d2c6fdf5265b057a6deb7 Mon Sep 17 00:00:00 2001 From: Julian Querido Date: Tue, 23 Apr 2024 12:50:39 +0200 Subject: [PATCH 3/4] Review updates --- .../class/osparc/data/model/NodeProgressSequence.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js index 897c37d3032..08dc7ac9768 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js +++ b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js @@ -244,12 +244,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, getProgress: function(report) { - const isDownloading = report["actual_value"] > 0 && report["actual_value"] < report["total"]; if (report.unit) { return { - progressLabel: isDownloading ? - `${osparc.utils.Utils.bytesToSize(report["actual_value"], 1, false)} / ${osparc.utils.Utils.bytesToSize(report["total"], 1)}` : - `${osparc.utils.Utils.bytesToSize(report["total"], 1)}`, + progressLabel: `${osparc.utils.Utils.bytesToSize(report["actual_value"], 1, false)} / ${osparc.utils.Utils.bytesToSize(report["total"], 1)}`, value: report["actual_value"] / report["total"] } } @@ -377,7 +374,6 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applySidecarPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.setClusterUpScaling(defaultEndVals); this.self().updateProgressLabel(this.__clusterUpScalingLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingSidecarLayout, value); @@ -388,7 +384,6 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyOutputsPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.setSidecarPulling(defaultEndVals); this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingOutputsLayout, value); @@ -399,7 +394,6 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyStatePulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.setSidecarPulling(defaultEndVals); this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingStateLayout, value); @@ -410,7 +404,6 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyImagesPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.setSidecarPulling(defaultEndVals); this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingImagesLayout, value); @@ -421,7 +414,6 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyInputsPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.setSidecarPulling(defaultEndVals); this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); } this.self().updateProgressLabel(this.__pullingInputsLayout, value); From 80300ba80f8f04d676328eb4ec1000ed312a3231 Mon Sep 17 00:00:00 2001 From: Julian Querido Date: Tue, 23 Apr 2024 12:56:31 +0200 Subject: [PATCH 4/4] Correction --- .../class/osparc/data/model/NodeProgressSequence.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js index 08dc7ac9768..3d92e2aae50 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js +++ b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js @@ -374,7 +374,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applySidecarPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.self().updateProgressLabel(this.__clusterUpScalingLayout, defaultEndVals); + this.setClusterUpScaling(defaultEndVals); } this.self().updateProgressLabel(this.__pullingSidecarLayout, value); @@ -384,7 +384,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyOutputsPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); + this.setSidecarPulling(defaultEndVals); } this.self().updateProgressLabel(this.__pullingOutputsLayout, value); @@ -394,7 +394,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyStatePulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); + this.setSidecarPulling(defaultEndVals); } this.self().updateProgressLabel(this.__pullingStateLayout, value); @@ -404,7 +404,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyImagesPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); + this.setSidecarPulling(defaultEndVals); } this.self().updateProgressLabel(this.__pullingImagesLayout, value); @@ -414,7 +414,7 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { __applyInputsPulling: function(value) { if (value.value > 0) { const defaultEndVals = this.getDefaultEndValues(); - this.self().updateProgressLabel(this.__pullingSidecarLayout, defaultEndVals); + this.setSidecarPulling(defaultEndVals); } this.self().updateProgressLabel(this.__pullingInputsLayout, value);