🎨 Feature: Stop, and Start, buttons in service options (#4564)

services/static-webserver/client/source/class/osparc/component/node/StartStopButton.js

@@ -0,0 +1,80 @@
+/* ************************************************************************
+
+   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)
+
+************************************************************************ */
+
+qx.Class.define("osparc.component.node.StartStopButton", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(node) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.HBox(5));
+
+    if (node) {
+      this.setNode(node);
+    }
+  },
+
+  properties: {
+    node: {
+      check: "osparc.data.model.Node",
+      init: null,
+      nullable: false,
+      event: "changeNode",
+      apply: "__applyNode"
+    }
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "start-button":
+          control = new qx.ui.form.Button().set({
+            label: this.tr("Start"),
+            icon: "@FontAwesome5Solid/play/14",
+            allowGrowX: false,
+            enabled: false
+          });
+          control.addListener("execute", () => this.fireEvent("startPressed"));
+          this._add(control);
+          break;
+        case "stop-button":
+          control = new qx.ui.form.Button().set({
+            label: this.tr("Stop"),
+            icon: "@FontAwesome5Solid/stop/14",
+            allowGrowX: false,
+            enabled: false
+          });
+          control.addListener("execute", () => this.fireEvent("stopPressed"));
+          this._add(control);
+          break;
+      }
+
+      return control || this.base(arguments, id);
+    },
+
+    __applyNode: function(node) {
+      if (node && node.isDynamic()) {
+        const startButton = this.getChildControl("start-button");
+        node.attachHandlersToStartButton(startButton);
+
+        const stopButton = this.getChildControl("stop-button");
+        node.attachHandlersToStopButton(stopButton);
+      }
+    }
+  }
+});

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

@@ -1470,22 +1470,33 @@ qx.Class.define("osparc.data.model.Node", {
         converter: state => (state === "ready") ? "excluded" : "visible"
       });
       this.getStatus().bind("interactive", startButton, "enabled", {
-        // OM
         converter: state => ["idle", "failed"].includes(state)
       });
       const executeListenerId = startButton.addListener("execute", this.requestStartNode, this);
       startButton.executeListenerId = executeListenerId;
     },
 
+    attachVisibilityHandlerToStopButton: function(stopButton) {
+      this.getStatus().bind("interactive", stopButton, "visibility", {
+        converter: state => (state === "ready") ? "visible" : "excluded"
+      });
+    },
+
+    attachEnabledHandlerToStopButton: function(stopButton) {
+      this.getStatus().bind("interactive", stopButton, "enabled", {
+        converter: state => state === "ready"
+      });
+    },
+
     attachExecuteHandlerToStopButton: function(stopButton) {
       const executeListenerId = stopButton.addListener("execute", this.requestStopNode, this);
       stopButton.executeListenerId = executeListenerId;
     },
 
-    attachVisibilityHandlerToStopButton: function(stopButton) {
-      this.getStatus().bind("interactive", stopButton, "visibility", {
-        converter: state => (state === "ready") ? "visible" : "excluded"
-      });
+    attachHandlersToStopButton: function(stopButton) {
+      this.attachVisibilityHandlerToStopButton(stopButton);
+      this.attachEnabledHandlerToStopButton(stopButton);
+      this.attachExecuteHandlerToStopButton(stopButton);
     },
 
     removeNode: function() {

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

@@ -1136,9 +1136,11 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       }
 
       let showPage = false;
-      let showStopButton = false;
+      let showStartStopButton = false;
 
       const sections = [];
+
+      // Life Cycle
       if (
         node.isDynamic() &&
         (node.isUpdatable() || node.isDeprecated() || node.isRetired())
@@ -1147,17 +1149,19 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         node.addListener("versionChanged", () => this.__populateSecondPanel(node));
         sections.push(lifeCycleView);
         showPage = true;
-        showStopButton = true;
+        showStartStopButton = true;
       }
 
+      // Boot Options
       if (node.hasBootModes()) {
         const bootOptionsView = new osparc.component.node.BootOptionsView(node);
         node.addListener("bootModeChanged", () => this.__populateSecondPanel(node));
         sections.push(bootOptionsView);
         showPage = true;
-        showStopButton = true;
+        showStartStopButton = true;
       }
 
+      // Update Resource Limits
       if (
         await osparc.data.Permissions.getInstance().checkCanDo("override_services_specifications") &&
         (node.isComputational() || node.isDynamic())
@@ -1166,7 +1170,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         node.addListener("limitsChanged", () => this.__populateSecondPanel(node));
         sections.push(updateResourceLimitsView);
         showPage = true;
-        showStopButton |= node.isDynamic();
+        showStartStopButton |= node.isDynamic();
       }
 
       this.__nodeOptionsPage.removeAll();
@@ -1177,25 +1181,18 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         });
         introLayout.add(title);
 
-        if (showStopButton) {
+        if (showStartStopButton) {
+          // Only available to dynamic services
           const instructions = new qx.ui.basic.Label(this.tr("To procceed with the following actions, the service needs to be Stopped.")).set({
             font: "text-13",
             rich: true,
             wrap: true
           });
           introLayout.add(instructions);
 
-          const stopButton = new qx.ui.form.Button().set({
-            label: this.tr("Stop"),
-            icon: "@FontAwesome5Solid/stop/14",
-            enabled: false,
-            allowGrowX: false
-          });
-          node.getStatus().bind("interactive", stopButton, "enabled", {
-            converter: state => state === "ready"
-          });
-          node.attachExecuteHandlerToStopButton(stopButton);
-          introLayout.add(stopButton);
+          const startStopButton = new osparc.component.node.StartStopButton();
+          startStopButton.setNode(node);
+          introLayout.add(startStopButton);
         }
 
         this.__nodeOptionsPage.add(introLayout);