🎨 [Frontend] Enh: Show pending service_message in loading page (#6570)

Author: odeimaiz

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

@@ -115,7 +115,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       const nodeStatus = node.getStatus();
       const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage();
       nodeStatus.bind("interactive", sequenceWidget, "visibility", {
-        converter: state => ["starting", "pulling", "pending", "connecting"].includes(state) ? "visible" : "excluded"
+        converter: state => ["pending", "pulling", "starting", "connecting"].includes(state) ? "visible" : "excluded"
       });
       loadingPage.addExtraWidget(sequenceWidget);
 
@@ -189,6 +189,8 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       const nodeId = data["service_uuid"];
       const node = this.getNode();
       const status = node.getStatus();
+      const loadingPage = this.getLoadingPage();
+      loadingPage.clearMessages();
       switch (serviceState) {
         case "idle": {
           status.setInteractive(serviceState);
@@ -200,8 +202,14 @@ qx.Class.define("osparc.data.model.IframeHandler", {
         }
         case "pending": {
           if (data["service_message"]) {
-            const serviceName = node.getLabel();
             const serviceMessage = data["service_message"];
+            loadingPage.setMessages([serviceMessage]);
+            // show pending messages only after 10"
+            loadingPage.getMessageLabels().forEach(label => label.exclude());
+            setTimeout(() => {
+              loadingPage.getMessageLabels().forEach(label => label.show());
+            }, 10000);
+            const serviceName = node.getLabel();
             const msg = `The service "${serviceName}" is waiting for available ` +
               `resources. Please inform support and provide the following message ` +
               `in case this does not resolve in a few minutes: "${nodeId}" ` +

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

@@ -1108,6 +1108,11 @@ qx.Class.define("osparc.data.model.Node", {
       if (nodeStatus.getProgressSequence()) {
         nodeStatus.getProgressSequence().addProgressMessage(progressType, progressReport);
       }
+      // there might be some pending ``service_message`` still shown, remove it
+      if (this.getIframeHandler()) {
+        const loadingPage = this.getIframeHandler().getLoadingPage();
+        loadingPage.clearMessages();
+      }
     },
 
     attachHandlersToStartButton: function(startButton) {

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

@@ -22,6 +22,7 @@
  * [CLUSTER_UP_SCALING]
  * [SIDECARS_PULLING]
  * [SERVICE_OUTPUTS_PULLING, SERVICE_STATE_PULLING, SERVICE_IMAGES_PULLING] (notice the parallelism here)
+ * [SERVICE_CONTAINERS_STARTING]
  * [SERVICE_INPUTS_PULLING] (when this happens, the frontend has already loaded the service and is displaying it to the user) I would still keep it as is, when we decide to make inputs pulling part of the boot sequence this will be helpful.
  *
  * This class provides different widgets that render the progress status

services/static-webserver/client/source/class/osparc/ui/message/Loading.js

@@ -93,7 +93,7 @@ qx.Class.define("osparc.ui.message.Loading", {
     __mainLayout: null,
     __thumbnail: null,
     __header: null,
-    __messages: null,
+    __messagesContainer: null,
     __extraWidgets: null,
     __maxButton: null,
 
@@ -162,7 +162,7 @@ qx.Class.define("osparc.ui.message.Loading", {
         row: this.self().GRID_POS.WAITING
       });
 
-      const messages = this.__messages = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({
+      const messages = this.__messagesContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({
         alignX: "center"
       }));
       mainLayout.addAt(messages, {
@@ -236,24 +236,28 @@ qx.Class.define("osparc.ui.message.Loading", {
             rich: true,
             wrap: true
           });
-          this.__messages.add(text);
+          this.__messagesContainer.add(text);
         });
-        this.__messages.show();
+        this.__messagesContainer.show();
       } else {
-        this.__messages.exclude();
+        this.__messagesContainer.exclude();
       }
     },
 
     clearMessages: function() {
-      this.__messages.removeAll();
+      this.__messagesContainer.removeAll();
+    },
+
+    getMessageLabels: function() {
+      return this.__messagesContainer.getChildren();
     },
 
     addWidgetToMessages: function(widget) {
       if (widget) {
-        this.__messages.add(widget);
-        this.__messages.show();
+        this.__messagesContainer.add(widget);
+        this.__messagesContainer.show();
       } else {
-        this.__messages.exclude();
+        this.__messagesContainer.exclude();
       }
     },