🎨 Frontend UI/UX: S4L logo, Sharee Permissions and Life Cycle view

services/static-webserver/client/source/class/osparc/component/metadata/ServicesInStudyUpdate.js

@@ -63,8 +63,8 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
           continue;
         }
         const node = studyData["workbench"][nodeId];
-        const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node["key"], node["version"]);
-        if (latestCompatibleMetadata["version"] !== node["version"]) {
+        if (osparc.utils.Services.isUpdatable(node)) {
+          const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node["key"], node["version"]);
           this.self().updateService(studyData, nodeId, latestCompatibleMetadata["version"]);
         }
       }
@@ -182,13 +182,12 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
         const node = workbench[nodeId];
         const nodeMetadata = osparc.utils.Services.getMetaData(node["key"], node["version"]);
         const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(this._services, node["key"], node["version"]);
-        const latestMetadata = osparc.utils.Services.getLatest(this._services, node["key"]);
         if (latestCompatibleMetadata === null) {
           osparc.component.message.FlashMessenger.logAs(this.tr("Some service information could not be retrieved"), "WARNING");
           break;
         }
-        const autoUpdatable = node["version"] !== latestCompatibleMetadata["version"];
-        if (autoUpdatable) {
+        const isUpdatable = osparc.utils.Services.isUpdatable(node);
+        if (isUpdatable) {
           updatableServices.push(nodeId);
         }
         const currentVersionLabel = new qx.ui.basic.Label(node["version"]).set({
@@ -209,6 +208,7 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
           column: this.self().GRID_POS.COMPATIBLE_VERSION
         });
 
+        const latestMetadata = osparc.utils.Services.getLatest(this._services, node["key"]);
         const latestVersionLabel = new qx.ui.basic.Label(latestMetadata["version"]).set({
           font: "text-14"
         });
@@ -220,15 +220,15 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
         if (osparc.data.Permissions.getInstance().canDo("study.service.update") && canIWriteStudy) {
           const updateButton = new osparc.ui.form.FetchButton(null, "@MaterialIcons/update/14");
           updateButton.set({
-            enabled: autoUpdatable
+            enabled: isUpdatable
           });
           if (latestCompatibleMetadata["version"] === node["version"]) {
             updateButton.setLabel(this.tr("Up-to-date"));
           }
           if (latestCompatibleMetadata["version"] !== latestMetadata["version"]) {
             updateButton.setLabel(this.tr("Update manually"));
           }
-          if (autoUpdatable) {
+          if (isUpdatable) {
             updateButton.set({
               backgroundColor: "strong-main",
               label: this.tr("Update")
@@ -240,7 +240,7 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
             column: this.self().GRID_POS.UPDATE_BUTTON
           });
 
-          anyUpdatable |= autoUpdatable;
+          anyUpdatable |= isUpdatable;
         }
       }
 

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

@@ -43,76 +43,130 @@ qx.Class.define("osparc.component.node.LifeCycleView", {
 
   members: {
     __applyNode: function(node) {
-      if (node.isDeprecated() || node.isRetired()) {
+      if (node.isUpdatable() || node.isDeprecated() || node.isRetired()) {
         this.__populateLayout();
       }
     },
 
     __populateLayout: function() {
       this._removeAll();
 
+      this.__addTitle();
+      this.__addChip();
+      this.__addDeprecationDate();
+
+      if (this.getNode().isUpdatable()) {
+        this.__addAutoUpdatableSection();
+      } else {
+        this.__addNonAutoUpdatableSection();
+      }
+    },
+
+    __addTitle: function() {
       this._add(new qx.ui.basic.Label(this.tr("Update Service")).set({
         font: "text-14"
       }));
+    },
 
+    __addChip: function() {
       const node = this.getNode();
 
-      const chip = node.isDeprecated() ? osparc.utils.StatusUI.createServiceDeprecatedChip() : osparc.utils.StatusUI.createServiceRetiredChip();
-      this._add(chip);
+      let chip = null;
+      if (node.isRetired()) {
+        chip = osparc.utils.StatusUI.createServiceRetiredChip();
+      } else if (node.isDeprecated()) {
+        chip = osparc.utils.StatusUI.createServiceDeprecatedChip();
+      }
+      if (chip) {
+        this._add(chip);
+      }
+    },
+
+    __addDeprecationDate: function() {
+      const node = this.getNode();
 
       if (node.isDeprecated()) {
         const deprecateDateLabel = new qx.ui.basic.Label(osparc.utils.Services.getDeprecationDateText(node.getMetaData())).set({
           rich: true
         });
         this._add(deprecateDateLabel);
       }
+    },
+
+    __addAutoUpdatableSection: function() {
+      this.__addAutoUpdatableInstructions();
+      this.__addAutoUpdateButtonsSection();
+    },
+
+    __addAutoUpdatableInstructions: function() {
+      const node = this.getNode();
 
-      const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node.getKey(), node.getVersion());
-      const autoUpdatable = node.getVersion() !== latestCompatibleMetadata["version"];
-      if (autoUpdatable) {
-        const instructionsMsg = node.isDeprecated() ? osparc.utils.Services.DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS : osparc.utils.Services.RETIRED_AUTOUPDATABLE_INSTRUCTIONS;
+      let instructionsMsg = null;
+      if (node.isRetired()) {
+        instructionsMsg = osparc.utils.Services.RETIRED_AUTOUPDATABLE_INSTRUCTIONS;
+      } else if (node.isUpdatable() || node.isDeprecated()) {
+        instructionsMsg = osparc.utils.Services.DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS;
+      }
+      if (instructionsMsg) {
         const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({
           rich: true
         });
         this._add(instructionsLabel);
+      }
+    },
 
-        const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
-
-        const stopButton = new qx.ui.form.Button().set({
-          label: this.tr("Stop"),
-          icon: "@FontAwesome5Solid/stop/14",
-          enabled: false
-        });
-        node.getStatus().bind("interactive", stopButton, "enabled", {
-          converter: state => state === "ready"
-        });
-        node.attachExecuteHandlerToStopButton(stopButton);
-        buttonsLayout.add(stopButton);
+    __addAutoUpdateButtonsSection: function() {
+      const node = this.getNode();
 
-        const updateButton = new osparc.ui.form.FetchButton().set({
-          label: this.tr("Update"),
-          icon: "@MaterialIcons/update/14",
-          backgroundColor: "strong-main"
-        });
-        stopButton.bind("enabled", updateButton, "enabled", {
-          converter: enabled => !enabled && autoUpdatable
-        });
-        updateButton.addListener("execute", () => {
-          updateButton.setFetching(true);
-          node.setVersion(latestCompatibleMetadata["version"]);
-          setTimeout(() => node.getStatus().setInteractive("idle"), osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
-          setTimeout(() => {
-            updateButton.setFetching(false);
-            node.requestStartNode();
-            this.fireEvent("versionChanged");
-          }, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL*2);
-        });
+      const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
+
+      const stopButton = new qx.ui.form.Button().set({
+        label: this.tr("Stop"),
+        icon: "@FontAwesome5Solid/stop/14",
+        enabled: false
+      });
+      node.getStatus().bind("interactive", stopButton, "enabled", {
+        converter: state => state === "ready"
+      });
+      node.attachExecuteHandlerToStopButton(stopButton);
+      buttonsLayout.add(stopButton);
+
+      const updateButton = new osparc.ui.form.FetchButton().set({
+        label: this.tr("Update"),
+        icon: "@MaterialIcons/update/14",
+        backgroundColor: "strong-main"
+      });
+      const isUpdatable = this.getNode().isUpdatable();
+      node.getStatus().bind("interactive", updateButton, "enabled", {
+        converter: state => ["idle", "failed", "deprecated", "retired"].includes(state) && isUpdatable
+      });
+      updateButton.addListener("execute", () => {
+        updateButton.setFetching(true);
+        const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node.getKey(), node.getVersion());
+        node.setVersion(latestCompatibleMetadata["version"]);
+        setTimeout(() => node.getStatus().setInteractive("idle"), osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
+        setTimeout(() => {
+          updateButton.setFetching(false);
+          node.requestStartNode();
+          this.fireEvent("versionChanged");
+        }, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL*2);
+      });
+
+      buttonsLayout.add(updateButton);
+
+      this._add(buttonsLayout);
+    },
 
-        buttonsLayout.add(updateButton);
+    __addNonAutoUpdatableSection: function() {
+      const node = this.getNode();
 
-        this._add(buttonsLayout);
-      } else {
-        const instructionsMsg = node.isDeprecated() ? osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS : osparc.utils.Services.RETIRED_DYNAMIC_INSTRUCTIONS;
+      let instructionsMsg = null;
+      if (node.isRetired()) {
+        instructionsMsg = osparc.utils.Services.RETIRED_DYNAMIC_INSTRUCTIONS;
+      } else if (node.isUpdatable() || node.isDeprecated()) {
+        instructionsMsg = osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS;
+      }
+      if (instructionsMsg) {
         const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({
           rich: true
         });

services/static-webserver/client/source/class/osparc/component/share/CollaboratorsStudy.js

@@ -181,11 +181,14 @@ qx.Class.define("osparc.component.share.CollaboratorsStudy", {
           const noAccessible = values.filter(value => value["accessible"] === false);
           if (noAccessible.length) {
             const shareePermissions = new osparc.component.share.ShareePermissions(noAccessible);
-            osparc.ui.window.Window.popUpInWindow(shareePermissions, this.tr("Sharee permissions"), 500, 500, "@FontAwesome5Solid/exclamation-triangle/14").set({
+            const win = osparc.ui.window.Window.popUpInWindow(shareePermissions, this.tr("Sharee permissions"), 500, 500, "@FontAwesome5Solid/exclamation-triangle/14").set({
               clickAwayClose: false,
               resizable: true,
               showClose: true
             });
+            win.getChildControl("icon").set({
+              textColor: "warning-yellow"
+            });
           }
         });
     },

services/static-webserver/client/source/class/osparc/component/share/ShareePermissions.js

@@ -27,6 +27,8 @@ qx.Class.define("osparc.component.share.ShareePermissions", {
       }));
 
       const grid = new qx.ui.layout.Grid(20, 10);
+      grid.setColumnAlign(0, "center", "middle");
+      grid.setColumnAlign(1, "center", "middle");
       const layout = new qx.ui.container.Composite(grid);
       this._add(layout);
       for (let i=0; i<shareesData.length; i++) {
@@ -41,9 +43,12 @@ qx.Class.define("osparc.component.share.ShareePermissions", {
 
               const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
               shareeData["inaccessible_services"].forEach(inaccessibleService => {
-                const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
+                const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
+                  alignY: "middle"
+                });
                 const metaData = osparc.utils.Services.getMetaData(inaccessibleService.key, inaccessibleService.version);
                 const infoButton = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/14");
+                infoButton.setAppearance("strong-button");
                 infoButton.addListener("execute", () => {
                   const moreOpts = new osparc.dashboard.ResourceMoreOptions(metaData);
                   const title = this.tr("Service Info");

services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js

@@ -110,16 +110,15 @@ qx.Class.define("osparc.dashboard.Dashboard", {
         buildLayout: this.__createStudyBrowser
       }];
       if (permissions.canDo("dashboard.templates.read")) {
-        const templatesTab = {
+        tabs.push({
           id: "templatesTabBtn",
           label: osparc.product.Utils.getTemplateAlias({
             plural: true,
             allUpperCase: true
           }),
           icon: "@FontAwesome5Solid/copy/"+tabIconSize,
           buildLayout: this.__createTemplateBrowser
-        };
-        tabs.push(templatesTab);
+        });
       }
       if (permissions.canDo("dashboard.services.read")) {
         tabs.push({
@@ -134,8 +133,8 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           id: "dataTabBtn",
           label: this.tr("DATA"),
           icon: "@FontAwesome5Solid/folder/"+tabIconSize,
-          buildLayout: this.__createDataBrowser}
-        );
+          buildLayout: this.__createDataBrowser
+        });
       }
       tabs.forEach(({id, label, icon, buildLayout}) => {
         const tabPage = new qx.ui.tabview.Page(label, icon).set({

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

@@ -264,6 +264,10 @@ qx.Class.define("osparc.data.model.Node", {
       return (metaData && metaData.type && metaData.type === "computational");
     },
 
+    isUpdatable: function(metaData) {
+      return osparc.utils.Services.isUpdatable(metaData);
+    },
+
     isDeprecated: function(metaData) {
       return osparc.utils.Services.isDeprecated(metaData);
     },
@@ -373,6 +377,10 @@ qx.Class.define("osparc.data.model.Node", {
       return osparc.data.model.Node.isComputational(this.getMetaData());
     },
 
+    isUpdatable: function() {
+      return osparc.data.model.Node.isUpdatable(this.getMetaData());
+    },
+
     isDeprecated: function() {
       return osparc.data.model.Node.isDeprecated(this.getMetaData());
     },

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

@@ -1114,7 +1114,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       outputFilesBtn.addListener("execute", () => osparc.component.node.BaseNodeView.openNodeDataManager(node));
       this.__outputsPage.add(outputFilesBtn);
 
-      if (node.isDynamic() && (node.isDeprecated() || node.isRetired())) {
+      if (node.isDynamic() && (node.isUpdatable() || node.isDeprecated() || node.isRetired())) {
         this.__nodeOptionsPage.getChildControl("button").show();
         const lifeCycleView = new osparc.component.node.LifeCycleView(node);
         node.addListener("versionChanged", () => this.__populateSecondPanel(node));

services/static-webserver/client/source/class/osparc/product/Utils.js

@@ -115,7 +115,7 @@ qx.Class.define("osparc.product.Utils", {
       const product = qx.core.Environment.get("product.name");
       switch (product) {
         case "s4l":
-          logosPath = lightLogo ? "osparc/s4l_zmt-white.svg" : "osparc/s4l_zmt-black.svg";
+          logosPath = lightLogo ? "osparc/s4l-white.png" : "osparc/s4l-black.png";
           break;
         case "s4llite":
           logosPath = lightLogo ? "osparc/s4llite-white.png" : "osparc/s4llite-black.png";

services/static-webserver/client/source/class/osparc/utils/Services.js

@@ -286,6 +286,11 @@ qx.Class.define("osparc.utils.Services", {
     DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr("Please Stop the Service and then Update it"),
     RETIRED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr("Please Update the Service"),
 
+    isUpdatable: function(metadata) {
+      const latestCompatibleMetadata = this.getLatestCompatible(null, metadata["key"], metadata["version"]);
+      return latestCompatibleMetadata && metadata["version"] !== latestCompatibleMetadata["version"];
+    },
+
     isDeprecated: function(metadata) {
       if (metadata && "deprecated" in metadata && ![null, undefined].includes(metadata["deprecated"])) {
         const deprecationTime = new Date(metadata["deprecated"]);

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

@@ -68,11 +68,8 @@ qx.Class.define("osparc.utils.Study", {
                 filtered.push(srv);
               }
             });
-            const updatable = filtered.some(srv => {
-              const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(allServices, srv["key"], srv["version"]);
-              return latestCompatibleMetadata && srv["version"] !== latestCompatibleMetadata["version"];
-            });
-            resolve(updatable);
+            const isUpdatable = filtered.some(srv => osparc.utils.Services.isUpdatable(srv));
+            resolve(isUpdatable);
           });
       });
     },