🎨 Enh: Merge secondary column's content (#5740)

Author: odeimaiz

packages/pytest-simcore/src/pytest_simcore/playwright_utils.py

@@ -88,15 +88,18 @@ def __call__(self, message: str) -> bool:
 
 @dataclass
 class SocketIOOsparcMessagePrinter:
+    include_logger_messages: bool = False
+
     def __call__(self, message: str) -> None:
         osparc_messages = [
-            "logger",
             "nodeUpdated",
             "nodeProgress",
             "projectStateUpdated",
             "serviceDiskUsage",
             "walletOsparcCreditsUpdated",
         ]
+        if self.include_logger_messages:
+            osparc_messages.append("logger")
 
         if message.startswith("42"):
             decoded_message: SocketIOEvent = decode_socketio_42_message(message)

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

@@ -68,7 +68,8 @@ qx.Class.define("osparc.data.model.Workbench", {
   },
 
   statics: {
-    CANT_ADD_NODE: qx.locale.Manager.tr("Nodes can't be added while the pipeline is running")
+    CANT_ADD_NODE: qx.locale.Manager.tr("Nodes can't be added while the pipeline is running"),
+    CANT_DELETE_NODE: qx.locale.Manager.tr("Nodes can't be deleted while the pipeline is running")
   },
 
   members: {
@@ -510,6 +511,10 @@ qx.Class.define("osparc.data.model.Workbench", {
       if (!osparc.data.Permissions.getInstance().canDo("study.node.delete", true)) {
         return false;
       }
+      if (this.getStudy().isPipelineRunning()) {
+        osparc.FlashMessenger.getInstance().logAs(this.self().CANT_DELETE_NODE, "ERROR");
+        return false;
+      }
 
       let node = this.getNode(nodeId);
       if (node) {

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

@@ -15,9 +15,7 @@
 
 ************************************************************************ */
 
-/**
- *
- */
+/* eslint-disable no-underscore-dangle */
 
 qx.Class.define("osparc.desktop.WorkbenchView", {
   extend: qx.ui.splitpane.Pane,
@@ -99,10 +97,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     __nodesTree: null,
     __storagePage: null,
     __studyOptionsPage: null,
-    __infoPage: null,
-    __settingsPage: null,
-    __outputsPage: null,
-    __nodeOptionsPage: null,
+    __fileInfoPage: null,
+    __serviceOptionsPage: null,
     __workbenchPanel: null,
     __workbenchPanelPage: null,
     __workbenchUI: null,
@@ -399,24 +395,13 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       studyOptionsPage.exclude();
       tabViewSecondary.add(studyOptionsPage);
 
-      const infoPage = this.__infoPage = this.__createTabPage("@FontAwesome5Solid/info", this.tr("Information"));
-      infoPage.exclude();
-      tabViewSecondary.add(infoPage);
+      const fileInfoPage = this.__fileInfoPage = this.__createTabPage("@FontAwesome5Solid/info", this.tr("Information"));
+      fileInfoPage.exclude();
+      tabViewSecondary.add(fileInfoPage);
 
-      const settingsPage = this.__settingsPage = this.__createTabPage("@FontAwesome5Solid/sign-in-alt", this.tr("Settings"));
-      settingsPage.exclude();
-      tabViewSecondary.add(settingsPage);
-
-      const outputsPage = this.__outputsPage = this.__createTabPage("@FontAwesome5Solid/sign-out-alt", this.tr("Outputs"));
-      osparc.utils.Utils.setIdToWidget(outputsPage.getChildControl("button"), "outputsTabButton");
-      outputsPage.exclude();
-      tabViewSecondary.add(outputsPage);
-
-      const nodeOptionsPage = this.__nodeOptionsPage = this.__createTabPage("@FontAwesome5Solid/cogs", this.tr("Service Options"));
-      nodeOptionsPage.getLayout().setSpacing(20);
-      osparc.utils.Utils.setIdToWidget(nodeOptionsPage.getChildControl("button"), "nodeOptionsTabButton");
-      nodeOptionsPage.exclude();
-      tabViewSecondary.add(nodeOptionsPage);
+      const serviceOptionsPage = this.__serviceOptionsPage = this.__createTabPage("@FontAwesome5Solid/exchange-alt", this.tr("Service options"));
+      serviceOptionsPage.exclude();
+      tabViewSecondary.add(serviceOptionsPage);
 
       this.__addTopBarSpacer(topBar);
 
@@ -884,10 +869,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     __populateSecondPanel: function(node) {
       [
         this.__studyOptionsPage,
-        this.__infoPage,
-        this.__settingsPage,
-        this.__outputsPage,
-        this.__nodeOptionsPage
+        this.__fileInfoPage,
+        this.__serviceOptionsPage
       ].forEach(page => {
         page.removeAll();
         page.getChildControl("button").exclude();
@@ -1079,21 +1062,21 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     __populateSecondPanelFilePicker: function(filePicker) {
       const fpView = new osparc.file.FilePicker(filePicker, "workbench");
       if (osparc.file.FilePicker.hasOutputAssigned(filePicker.getOutputs())) {
-        this.__infoPage.getChildControl("button").show();
-        this.getChildControl("side-panel-right-tabs").setSelection([this.__infoPage]);
+        this.__fileInfoPage.getChildControl("button").show();
+        this.getChildControl("side-panel-right-tabs").setSelection([this.__fileInfoPage]);
 
-        this.__infoPage.add(fpView, {
+        this.__fileInfoPage.add(fpView, {
           flex: 1
         });
       } else {
         // empty File Picker
         const tabViewLeftPanel = this.getChildControl("side-panel-left-tabs");
         tabViewLeftPanel.setSelection([this.__storagePage]);
 
-        this.__settingsPage.getChildControl("button").show();
-        this.getChildControl("side-panel-right-tabs").setSelection([this.__settingsPage]);
+        this.__serviceOptionsPage.getChildControl("button").show();
+        this.getChildControl("side-panel-right-tabs").setSelection([this.__serviceOptionsPage]);
 
-        this.__settingsPage.add(fpView, {
+        this.__serviceOptionsPage.add(fpView, {
           flex: 1
         });
       }
@@ -1105,123 +1088,83 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     },
 
     __populateSecondPanelParameter: function(parameter) {
-      this.__settingsPage.getChildControl("button").show();
-      this.getChildControl("side-panel-right-tabs").setSelection([this.__settingsPage]);
+      this.__serviceOptionsPage.getChildControl("button").show();
+      this.getChildControl("side-panel-right-tabs").setSelection([this.__serviceOptionsPage]);
 
       const view = new osparc.node.ParameterEditor(parameter);
       view.buildForm(false);
-      this.__settingsPage.add(view, {
+      this.__serviceOptionsPage.add(view, {
         flex: 1
       });
     },
 
     __populateSecondPanelNode: async function(node) {
-      this.__settingsPage.getChildControl("button").show();
-      this.__outputsPage.getChildControl("button").show();
-      if (![this.__settingsPage, this.__outputsPage].includes(this.getChildControl("side-panel-right-tabs").getSelection()[0])) {
-        this.getChildControl("side-panel-right-tabs").setSelection([this.__settingsPage]);
-      }
+      this.__serviceOptionsPage.getChildControl("button").show();
+      this.getChildControl("side-panel-right-tabs").setSelection([this.__serviceOptionsPage]);
+
+      const spacing = 8;
+      const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing*2));
 
+      // INPUTS FORM
       if (node.isPropertyInitialized("propsForm") && node.getPropsForm()) {
-        const scrollContainer = new qx.ui.container.Scroll();
-        scrollContainer.add(node.getPropsForm());
-        this.__settingsPage.add(scrollContainer, {
-          flex: 1
+        const inputsForm = node.getPropsForm().set({
+          allowGrowX: false
+        });
+        const inputs = new osparc.desktop.PanelView(this.tr("Inputs"), inputsForm);
+        inputs._innerContainer.set({
+          margin: spacing
         });
+        vBox.add(inputs);
       }
 
+      // OUTPUTS
+      const outputsBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing));
       if (node.hasOutputs()) {
         const nodeOutputs = new osparc.widget.NodeOutputs(node, node.getMetaData().outputs).set({
           offerProbes: true
         });
-        this.__outputsPage.add(nodeOutputs);
+        outputsBox.add(nodeOutputs);
       }
-
-      const outputFilesBtn = new qx.ui.form.Button(this.tr("Service data"), "@FontAwesome5Solid/folder-open/14").set({
-        allowGrowX: false
+      const outputs = new osparc.desktop.PanelView(this.tr("Outputs"), outputsBox);
+      outputs._innerContainer.set({
+        margin: spacing
       });
-      osparc.utils.Utils.setIdToWidget(outputFilesBtn, "nodeOutputFilesBtn");
-      outputFilesBtn.addListener("execute", () => osparc.node.BaseNodeView.openNodeDataManager(node));
-      this.__outputsPage.add(outputFilesBtn);
-
-      const showPage = await this.__populateNodeOptionsPage(node);
-      // if it's deprecated or retired show the LifeCycleView right away
-      if (showPage && node.hasOutputs() && node.isDynamic() && (node.isDeprecated() || node.isRetired())) {
-        this.getChildControl("side-panel-right-tabs").setSelection([this.__nodeOptionsPage]);
+      vBox.add(outputs);
+
+      // NODE OPTIONS
+      const nodeOptions = this.__getNodeOptionsPage(node);
+      if (nodeOptions) {
+        const options = new osparc.desktop.PanelView(this.tr("Options"), nodeOptions);
+        options._innerContainer.set({
+          margin: spacing
+        });
+        nodeOptions.bind("visibility", options, "visibility");
+        vBox.add(options);
       }
+
+      const scrollContainer = new qx.ui.container.Scroll();
+      scrollContainer.add(vBox);
+      this.__serviceOptionsPage.add(scrollContainer, {
+        flex: 1
+      });
     },
 
-    __populateNodeOptionsPage: async function(node) {
+    __getNodeOptionsPage: function(node) {
       if (osparc.auth.Data.getInstance().isGuest()) {
-        return false;
-      }
-
-      let showPage = false;
-      let showStartStopButton = false;
-
-      const sections = [];
-
-      // Life Cycle
-      if (
-        node.isDynamic() &&
-        (node.isUpdatable() || node.isDeprecated() || node.isRetired())
-      ) {
-        const lifeCycleView = new osparc.node.LifeCycleView(node);
-        node.addListener("versionChanged", () => this.__populateSecondPanel(node));
-        sections.push(lifeCycleView);
-        showPage = true;
-        showStartStopButton = true;
+        return null;
       }
 
-      // Boot Options
-      if (node.hasBootModes()) {
-        const bootOptionsView = new osparc.node.BootOptionsView(node);
-        node.addListener("bootModeChanged", () => this.__populateSecondPanel(node));
-        sections.push(bootOptionsView);
-        showPage = true;
-        showStartStopButton = true;
-      }
-
-      // Update Resource Limits
-      if (
-        await osparc.data.Permissions.getInstance().checkCanDo("override_services_specifications") &&
-        (node.isComputational() || node.isDynamic())
-      ) {
-        const updateResourceLimitsView = new osparc.node.UpdateResourceLimitsView(node);
-        node.addListener("limitsChanged", () => this.__populateSecondPanel(node));
-        sections.push(updateResourceLimitsView);
-        showPage = true;
-        showStartStopButton |= node.isDynamic();
-      }
-
-      this.__nodeOptionsPage.removeAll();
-      if (showPage) {
-        const introLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-        const title = new qx.ui.basic.Label(this.tr("Service Options")).set({
-          font: "text-14"
-        });
-        introLayout.add(title);
-
-        if (showStartStopButton) {
-          // Only available to dynamic services
-          const instructions = new qx.ui.basic.Label(this.tr("To proceed with the following actions, the service needs to be Stopped.")).set({
-            font: "text-13",
-            rich: true,
-            wrap: true
-          });
-          introLayout.add(instructions);
-
-          const startStopButton = new osparc.node.StartStopButton();
-          startStopButton.setNode(node);
-          introLayout.add(startStopButton);
-        }
-
-        this.__nodeOptionsPage.add(introLayout);
-        sections.forEach(section => this.__nodeOptionsPage.add(section));
-        this.__nodeOptionsPage.getChildControl("button").setVisibility(showPage ? "visible" : "excluded");
-      }
+      const nodeOptions = new osparc.widget.NodeOptions(node);
+      nodeOptions.buildLayout();
+      [
+        "versionChanged",
+        "bootModeChanged",
+        "limitsChanged"
+      ].forEach(eventName => {
+        nodeOptions.addListener(eventName, () => this.__populateSecondPanel(node));
+      });
 
-      return showPage;
+      return nodeOptions;
     },
 
     getLogger: function() {