🎨 [Frontend] Wait for set_heartbeat_emit_interval for starting the application (ITISFoundation#8188)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/Application.js

@@ -501,24 +501,46 @@ qx.Class.define("osparc.Application", {
               osparc.store.Store.getInstance().setCurrentStudyId(studyId);
             }
 
-            let mainPage = null;
-            if (osparc.product.Utils.getProductName().includes("s4ldesktop")) {
-              mainPage = new osparc.desktop.MainPageDesktop();
+            const loadViewerPage = () => {
+              const mainPage = new osparc.desktop.MainPage();
+              this.__mainPage = mainPage;
+              this.__loadView(mainPage);
+            };
+            const wsInstance = osparc.wrapper.WebSocket.getInstance();
+            if (wsInstance.isAppConnected()) {
+              loadViewerPage();
             } else {
-              mainPage = new osparc.desktop.MainPage();
+              const listenerId = wsInstance.addListener("changeAppConnected", function(e) {
+                if (e.getData()) {
+                  wsInstance.removeListenerById(listenerId);
+                  loadViewerPage();
+                }
+              }, this);
             }
-            this.__mainPage = mainPage;
-            this.__loadView(mainPage);
           }
         })
         .catch(err => console.error(err));
     },
 
-    __loadNodeViewerPage: async function(studyId, viewerNodeId) {
+    __loadNodeViewerPage: function(studyId, viewerNodeId) {
       this.__connectWebSocket();
-      const mainPage = new osparc.viewer.MainPage(studyId, viewerNodeId);
-      this.__mainPage = mainPage;
-      this.__loadView(mainPage);
+
+      const loadNodeViewerPage = () => {
+        const mainPage = new osparc.viewer.MainPage(studyId, viewerNodeId);
+        this.__mainPage = mainPage;
+        this.__loadView(mainPage);
+      };
+      const wsInstance = osparc.wrapper.WebSocket.getInstance();
+      if (wsInstance.isAppConnected()) {
+        loadNodeViewerPage();
+      } else {
+        const listenerId = wsInstance.addListener("changeAppConnected", e => {
+          if (e.getData()) {
+            wsInstance.removeListenerById(listenerId);
+            loadNodeViewerPage();
+          }
+        }, this);
+      }
     },
 
     __loadView: function(view, opts, clearUrl=true) {

services/static-webserver/client/source/class/osparc/MaintenanceTracker.js

@@ -42,7 +42,24 @@ qx.Class.define("osparc.MaintenanceTracker", {
   statics: {
     CHECK_INTERVAL: 15*60*1000, // Check every 15'
     CLOSABLE_WARN_IN_ADVANCE: 4*24*60*60*1000, // Show Closable Ribbon Message 4 days in advance
-    PERMANENT_WARN_IN_ADVANCE: 60*60*1000 // Show Permanent Ribbon Message 60' in advance
+    PERMANENT_WARN_IN_ADVANCE: 60*60*1000, // Show Permanent Ribbon Message 60' in advance
+
+    dataToText: function(start, end, reason) {
+      let text = osparc.utils.Utils.formatDateAndTime(start);
+      if (end) {
+        if (start.getDate() === end.getDate()) {
+          // do not print the same day twice
+          text += " - " + osparc.utils.Utils.formatTime(end);
+        } else {
+          text += " - " + osparc.utils.Utils.formatDateAndTime(end);
+        }
+      }
+      text += " (local time)";
+      if (reason) {
+        text += ": " + reason;
+      }
+      return text;
+    },
   },
 
   members: {
@@ -78,20 +95,7 @@ qx.Class.define("osparc.MaintenanceTracker", {
         return null;
       }
 
-      let text = osparc.utils.Utils.formatDateAndTime(this.getStart());
-      if (this.getEnd()) {
-        if (this.getStart().getDate() === this.getEnd().getDate()) {
-          // do not print the same day twice
-          text += " - " + osparc.utils.Utils.formatTime(this.getEnd());
-        } else {
-          text += " - " + osparc.utils.Utils.formatDateAndTime(this.getEnd());
-        }
-      }
-      text += " (local time)";
-      if (this.getReason()) {
-        text += ": " + this.getReason();
-      }
-      return text;
+      return this.self().dataToText(this.getStart(), this.getEnd(), this.getReason());
     },
 
     __setMaintenance: function(maintenanceData) {
@@ -129,9 +133,9 @@ qx.Class.define("osparc.MaintenanceTracker", {
       }
     },
 
-    __messageToRibbon: function(closable) {
+    messageToRibbon: function(closable, message = null) {
       this.__removeRibbonMessage();
-      const text = this.__getText();
+      const text = message || this.__getText();
       const notification = new osparc.notification.RibbonNotification(text, "maintenance", closable);
       osparc.notification.RibbonNotifications.getInstance().addNotification(notification);
       this.__lastRibbonMessage = notification;
@@ -143,14 +147,14 @@ qx.Class.define("osparc.MaintenanceTracker", {
       const diffPermanent = this.getStart().getTime() - now.getTime() - this.self().PERMANENT_WARN_IN_ADVANCE;
 
       if (diffClosable < 0) {
-        this.__messageToRibbon(true);
+        this.messageToRibbon(true);
       } else {
-        setTimeout(() => this.__messageToRibbon(true), diffClosable);
+        setTimeout(() => this.messageToRibbon(true), diffClosable);
       }
       if (diffPermanent < 0) {
-        this.__messageToRibbon(false);
+        this.messageToRibbon(false);
       } else {
-        setTimeout(() => this.__messageToRibbon(false), diffPermanent);
+        setTimeout(() => this.messageToRibbon(false), diffPermanent);
       }
     },
 

services/static-webserver/client/source/class/osparc/WatchDog.js

@@ -48,11 +48,7 @@ qx.Class.define("osparc.WatchDog", {
 
     // register for socket.io event to change the default heartbeat interval
     const socket = osparc.wrapper.WebSocket.getInstance();
-    socket.removeSlot("set_heartbeat_emit_interval");
-    socket.on("set_heartbeat_emit_interval", ({ interval }) => {
-      const newInterval = parseInt(interval) * 1000;
-      this.setHeartbeatInterval(newInterval);
-    }, this);
+    socket.bind("heartbeatInterval", this, "heartbeatInterval");
   },
 
   properties: {
@@ -66,10 +62,14 @@ qx.Class.define("osparc.WatchDog", {
 
     heartbeatInterval: {
       check: "Number",
-      init: 2 * 1000, // in milliseconds
-      nullable: false,
-      apply: "_applyHeartbeatInterval"
-    }
+      init: null,
+      nullable: true,
+      apply: "__applyHeartbeatInterval"
+    },
+  },
+
+  statics: {
+    DEFAULT_HEARTBEAT_INTERVAL: 2000, // default to 2 seconds
   },
 
   members: {
@@ -81,15 +81,24 @@ qx.Class.define("osparc.WatchDog", {
         logo.setOnline(value);
       }
 
-      if (value) {
-        this.__clientHeartbeatWWPinger.postMessage(["start", this.getHeartbeatInterval()]);
-      } else {
-        this.__clientHeartbeatWWPinger.postMessage(["stop"]);
+      value ? this.__startPinging() : this.__stopPinging();
+    },
+
+    __applyHeartbeatInterval: function(value) {
+      if (value === null) {
+        return;
       }
+
+      this.__startPinging();
+    },
+
+    __startPinging: function() {
+      const heartbeatInterval = this.getHeartbeatInterval() || osparc.WatchDog.DEFAULT_HEARTBEAT_INTERVAL;
+      this.__clientHeartbeatWWPinger.postMessage(["start", heartbeatInterval]);
     },
 
-    _applyHeartbeatInterval: function(value) {
-      this.__clientHeartbeatWWPinger.postMessage(["start", value]);
+    __stopPinging: function() {
+      this.__clientHeartbeatWWPinger.postMessage(["stop"]);
     },
 
     __pingServer: function() {

services/static-webserver/client/source/class/osparc/admin/Maintenance.js

@@ -50,14 +50,17 @@ qx.Class.define("osparc.admin.Maintenance", {
       vBox.removeAll();
 
       if (data) {
+        const displayMaintenanceBtn = new qx.ui.form.Button(this.tr("Test Maintenance message")).set({
+          appearance: "strong-button",
+          allowGrowX: false,
+        });
+        const message = osparc.MaintenanceTracker.dataToText(new Date(data["start"]), new Date(data["end"]), data["reason"]);
+        displayMaintenanceBtn.addListener("execute", () => osparc.MaintenanceTracker.getInstance().messageToRibbon(true), message);
+        vBox.add(displayMaintenanceBtn);
+
         const respLabel = new qx.ui.basic.Label(this.tr("Start and End dates go in UTC time zone"));
         vBox.add(respLabel);
 
-        const displayMaintenanceBtn = new qx.ui.form.Button(this.tr("Display Maintenance message"));
-        // eslint-disable-next-line no-underscore-dangle
-        displayMaintenanceBtn.addListener("execute", () => osparc.MaintenanceTracker.getInstance().__messageToRibbon(true));
-        vBox.add(displayMaintenanceBtn);
-
         const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(data, "maintenance-data");
         const container = new qx.ui.container.Scroll();
         container.add(invitationRespViewer);

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

@@ -118,7 +118,21 @@ qx.Class.define("osparc.wrapper.WebSocket", {
       nullable: false,
       init: 1000,
       check: "Number"
-    }
+    },
+
+    heartbeatInterval: {
+      check: "Number",
+      init: null,
+      nullable: true,
+      event: "heartbeatInterval"
+    },
+
+    appConnected: {
+      check: "Boolean",
+      init: false,
+      nullable: false,
+      event: "changeAppConnected"
+    },
   },
 
   /** Constructor
@@ -202,6 +216,16 @@ qx.Class.define("osparc.wrapper.WebSocket", {
             this.fireDataEvent(event);
           }, this);
         }, this);
+
+        this.on("set_heartbeat_emit_interval", ({ interval }) => {
+          if (interval) {
+            const newInterval = parseInt(interval) * 1000;
+            this.setHeartbeatInterval(newInterval);
+
+            // we consider the app is connected when the backend set the heartbeat interval
+            this.setAppConnected(true);
+          }
+        }, this);
       }, this);
 
       dynLoader.start();