nodeProgress in frontend

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -49,7 +49,7 @@ qx.Class.define("osparc.data.model.Node", {
   construct: function(study, key, version, uuid) {
     this.base(arguments);
 
-    this.__metaData = {};
+    this.__metaData = osparc.utils.Services.getMetaData(key, version);
     this.__innerNodes = {};
     this.setOutputs({});
 
@@ -397,7 +397,7 @@ qx.Class.define("osparc.data.model.Node", {
     },
 
     populateWithMetadata: function() {
-      const metaData = this.__metaData = osparc.utils.Services.getMetaData(this.getKey(), this.getVersion());
+      const metaData = this.__metaData;
       if (metaData) {
         if (metaData.name) {
           this.setLabel(metaData.name);
@@ -967,11 +967,15 @@ qx.Class.define("osparc.data.model.Node", {
     __initLoadingPage: function() {
       const showZoomMaximizeButton = !osparc.utils.Utils.isProduct("s4llite");
       const loadingPage = new osparc.ui.message.Loading(this.__getLoadingPageHeader(), this.__getExtraMessages(), showZoomMaximizeButton);
+
       const thumbnail = this.getMetaData()["thumbnail"];
       if (thumbnail) {
         loadingPage.setLogo(thumbnail);
       }
       this.addListener("changeLabel", () => loadingPage.setHeader(this.__getLoadingPageHeader()), this);
+
+      loadingPage.addExtraWidget(this.getStatus().getProgressSequence().getWidgetForLoadingPage());
+
       this.getStatus().addListener("changeInteractive", () => {
         loadingPage.setHeader(this.__getLoadingPageHeader());
         const status = this.getStatus().getInteractive();
@@ -1290,24 +1294,11 @@ qx.Class.define("osparc.data.model.Node", {
         });
     },
 
-    __onInteractiveNodeStarted: function(e) {
-      let req = e.getTarget();
-      const {
-        error
-      } = req.getResponse();
-
-      if (error) {
-        const msg = "Error received: " + error;
-        const errorMsgData = {
-          nodeId: this.getNodeId(),
-          msg,
-          level: "ERROR"
-        };
-        this.fireDataEvent("showInLogger", errorMsgData);
-        return;
+    setNodeProgressSequence: function(progressType, progress) {
+      const nodeStatus = this.getStatus();
+      if (nodeStatus.getProgressSequence()) {
+        nodeStatus.getProgressSequence().addProgressMessage(progressType, progress);
       }
-
-      this.__nodeState();
     },
 
     __waitForServiceReady: function(srvUrl) {

services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js

@@ -0,0 +1,264 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * The progress sequence of a dynamic service is as follows:
+ * - CLUSTER_UP_SCALING      (1)
+ * - SIDECAR_PULLING         (2)
+ * - SERVICE_INPUTS_PULLING  (3a)
+ * - SERVICE_OUTPUTS_PULLING (3b)
+ * - SERVICE_STATE_PULLING   (3c)
+ * - SERVICE_IMAGES_PULLING  (4)
+ *
+ * This class provides different widgets that render the progress status
+ *
+ */
+
+
+qx.Class.define("osparc.data.model.NodeProgressSequence", {
+  extend: qx.core.Object,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.__initLayout();
+  },
+
+  properties: {
+    clusterUpScaling: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      apply: "__applyClusterUpScaling"
+    },
+
+    sidecarPulling: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      apply: "__applySidecarPulling"
+    },
+
+    inputsPulling: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      apply: "__applyInputsPulling"
+    },
+
+    outputsPulling: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      apply: "__applyOutputsPulling"
+    },
+
+    statePulling: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      apply: "__applyStatePulling"
+    },
+
+    imagesPulling: {
+      check: "Number",
+      init: null,
+      nullable: false,
+      apply: "__applyImagesPulling"
+    }
+  },
+
+  statics: {
+    createTitleAtom: function(label) {
+      const atom = new qx.ui.basic.Atom().set({
+        label,
+        font: "text-16",
+        icon: "@FontAwesome5Solid/circle-notch/16",
+        gap: 15
+      });
+      const icon = atom.getChildControl("icon");
+      osparc.utils.StatusUI.updateIconAnimation(icon);
+      return atom;
+    },
+
+    createProgressBar: function() {
+      const progressBar = new qx.ui.indicator.ProgressBar().set({
+        maximum: 1,
+        height: 14
+      });
+      progressBar.getChildControl("progress").set({
+        backgroundColor: "strong-main"
+      });
+      progressBar.exclude();
+      return progressBar;
+    },
+
+    progressReceived: function(atom, pBar, value) {
+      if ([null, undefined].includes(value)) {
+        return;
+      }
+
+      if (atom) {
+        if (value === 1) {
+          atom.setIcon("@FontAwesome5Solid/check/16");
+        } else {
+          atom.setIcon("@FontAwesome5Solid/circle-notch/16");
+        }
+        const icon = atom.getChildControl("icon");
+        osparc.utils.StatusUI.updateIconAnimation(icon);
+      }
+
+      if (pBar) {
+        pBar.set({
+          value,
+          visibility: (value > 0 && value < 1) ? "visible" : "excluded"
+        });
+      }
+    }
+  },
+
+  members: {
+    __sequenceLoadingPage: null,
+    __clusterUpScalingTitle: null,
+    __clusterUpScalingSubtitle: null,
+    __pullingSidecarTitle: null,
+    __pullingSidecarPBar: null,
+    __pullingInputsTitle: null,
+    __pullingInputsPBar: null,
+    __pullingOutputsTitle: null,
+    __pullingOutputsPBar: null,
+    __pullingStateTitle: null,
+    __pullingStatePBar: null,
+    __pullingImagesTitle: null,
+    __pullingImagesPBar: null,
+
+    getWidgetForLoadingPage: function() {
+      return this.__sequenceLoadingPage;
+    },
+
+    addProgressMessage: function(progressType, progress) {
+      console.log(progressType, progress);
+
+      switch (progressType) {
+        case "CLUSTER_UP_SCALING":
+          this.setClusterUpScaling(progress);
+          break;
+        case "SIDECAR_PULLING":
+          this.setSidecarPulling(progress);
+          break;
+        case "SERVICE_INPUTS_PULLING":
+          this.setInputsPulling(progress);
+          break;
+        case "SERVICE_OUTPUTS_PULLING":
+          this.setOutputsPulling(progress);
+          break;
+        case "SERVICE_STATE_PULLING":
+          this.setStatePulling(progress);
+          break;
+        case "SERVICE_IMAGES_PULLING":
+          this.setImagesPulling(progress);
+          break;
+      }
+    },
+
+    __initLayout: function() {
+      this.__sequenceLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)).set({
+        maxWidth: 300,
+        minHeight: 250
+      });
+
+      const scalingTitle = this.__clusterUpScalingTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Scaling up the cluster..."));
+      this.__sequenceLoadingPage.add(scalingTitle);
+
+      const scalingSubtitle = this.__clusterUpScalingSubtitle = new qx.ui.basic.Label(qx.locale.Manager.tr("This step can take up to 3 minutes"));
+      scalingSubtitle.exclude();
+      this.__sequenceLoadingPage.add(scalingSubtitle);
+
+      const pullingSidecarTitle = this.__pullingSidecarTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Pulling sidecar..."));
+      this.__sequenceLoadingPage.add(pullingSidecarTitle);
+
+      const pullingSidecarPBar = this.__pullingSidecarPBar = this.self().createProgressBar();
+      this.__sequenceLoadingPage.add(pullingSidecarPBar);
+
+      const pullingInputsTitle = this.__pullingInputsTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Pulling inputs..."));
+      this.__sequenceLoadingPage.add(pullingInputsTitle);
+
+      const pullingInputsPBar = this.__pullingInputsPBar = this.self().createProgressBar();
+      this.__sequenceLoadingPage.add(pullingInputsPBar);
+
+      const pullingOutputsTitle = this.__pullingOutputsTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Pulling outputs..."));
+      this.__sequenceLoadingPage.add(pullingOutputsTitle);
+
+      const pullingOutputsPBar = this.__pullingOutputsPBar = this.self().createProgressBar();
+      this.__sequenceLoadingPage.add(pullingOutputsPBar);
+
+      const pullingStateTitle = this.__pullingStateTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Pulling state..."));
+      this.__sequenceLoadingPage.add(pullingStateTitle);
+
+      const pullingStatePBar = this.__pullingStatePBar = this.self().createProgressBar();
+      this.__sequenceLoadingPage.add(pullingStatePBar);
+
+      const pullingImagesTitle = this.__pullingImagesTitle = this.self().createTitleAtom(qx.locale.Manager.tr("Pulling images..."));
+      this.__sequenceLoadingPage.add(pullingImagesTitle);
+
+      const pullingImagesPBar = this.__pullingImagesPBar = this.self().createProgressBar();
+      this.__sequenceLoadingPage.add(pullingImagesPBar);
+    },
+
+    __applyClusterUpScaling: function(value) {
+      this.self().progressReceived(this.__clusterUpScalingTitle, null, value);
+
+      if (value > 0 && value < 1) {
+        this.__clusterUpScalingSubtitle.show();
+      } else {
+        this.__clusterUpScalingSubtitle.exclude();
+      }
+    },
+
+    __applySidecarPulling: function(value) {
+      this.setClusterUpScaling(1);
+
+      this.self().progressReceived(this.__pullingSidecarTitle, this.__pullingSidecarPBar, value);
+    },
+
+    __applyInputsPulling: function(value) {
+      this.setSidecarPulling(1);
+
+      this.self().progressReceived(this.__pullingInputsTitle, this.__pullingInputsPBar, value);
+    },
+
+    __applyOutputsPulling: function(value) {
+      this.setSidecarPulling(1);
+
+      this.self().progressReceived(this.__pullingOutputsTitle, this.__pullingOutputsPBar, value);
+    },
+
+    __applyStatePulling: function(value) {
+      this.setSidecarPulling(1);
+
+      this.self().progressReceived(this.__pullingStateTitle, this.__pullingStatePBar, value);
+    },
+
+    __applyImagesPulling: function(value) {
+      this.setInputsPulling(1);
+      this.setOutputsPulling(1);
+      this.setStatePulling(1);
+
+      this.self().progressReceived(this.__pullingImagesTitle, this.__pullingImagesPBar, value);
+    }
+  }
+});

services/static-webserver/client/source/class/osparc/data/model/NodeStatus.js

@@ -27,6 +27,11 @@ qx.Class.define("osparc.data.model.NodeStatus", {
     this.base(arguments);
 
     this.setNode(node);
+
+    if (node.isDynamic()) {
+      const progressSequence = new osparc.data.model.NodeProgressSequence();
+      this.setProgressSequence(progressSequence);
+    }
   },
 
   properties: {
@@ -44,6 +49,12 @@ qx.Class.define("osparc.data.model.NodeStatus", {
       transform: "__transformProgress"
     },
 
+    progressSequence: {
+      check: "osparc.data.model.NodeProgressSequence",
+      nullable: true,
+      init: null
+    },
+
     running: {
       check: ["UNKNOWN", "NOT_STARTED", "PUBLISHED", "PENDING", "STARTED", "RETRY", "SUCCESS", "FAILED", "ABORTED"],
       nullable: true,

services/static-webserver/client/source/class/osparc/data/model/Study.js

@@ -410,6 +410,21 @@ qx.Class.define("osparc.data.model.Study", {
       }
     },
 
+    nodeNodeProgressSequence: function(nodeProgressData) {
+      const studyId = nodeProgressData["project_id"];
+      if (studyId !== this.getUuid()) {
+        return;
+      }
+      const nodeId = nodeProgressData["node_id"];
+      const workbench = this.getWorkbench();
+      const node = workbench.getNode(nodeId);
+      if (node) {
+        const progressType = nodeProgressData["progress_type"];
+        const progress = nodeProgressData["progress"];
+        node.setNodeProgressSequence(progressType, progress);
+      }
+    },
+
     computeStudyProgress: function() {
       const nodes = this.getWorkbench().getNodes();
       let nCompNodes = 0;

services/static-webserver/client/source/class/osparc/desktop/MainPage.js

@@ -92,7 +92,9 @@ qx.Class.define("osparc.desktop.MainPage", {
           if (osparc.utils.Utils.isProduct("s4llite")) {
             msg = this.tr("Do you really want to close the project?");
             msg += "<br>";
-            msg += this.tr("Make sure you saved the changes to the current <b>smash file</b> and <b>open notebooks</b>");
+            msg += this.tr("Make sure you saved the changes to the current <b>smash file</b> and <b>open notebooks</b>.");
+            msg += "<br>";
+            msg += this.tr("Running <b>simulations</b> will be killed.");
             confirmText = this.tr("Close");
           }
           const win = new osparc.ui.window.Confirmation(msg).set({