Homogenize studies and services

.github/workflows/ci-testing-deploy.yml

@@ -748,6 +748,9 @@ jobs:
         run: ./ci/github/system-testing/swarm-deploy.bash clean_up
 
   system-test-e2e:
+    # FIXME: skip the job until make it faster and more reliable
+    # https://github.com/ITISFoundation/osparc-simcore/issues/1594
+    if: "false"
     name: System-testing e2e
     needs: [build-test-images]
     runs-on: ${{ matrix.os }}

services/web/client/.eslintrc.json

@@ -8,6 +8,7 @@
     "q": false,
     "qxWeb": false,
     "osparc": false,
+    "explorer": false,
     "Ajv": false,
     "objectPath": false
   },

services/web/client/Manifest.json

@@ -27,7 +27,6 @@
       "svg/svg.path.js",
       "jsondiffpatch/jsondiffpatch.min.js",
       "jsontreeviewer/jsonTree.js",
-      "plotly/plotly.min.js",
       "marked/marked.js",
       "DOMPurify/purify.min.js"
     ],

services/web/client/compile.json

@@ -32,6 +32,18 @@
       ],
       "bootPath": "source/boot"
     },
+    {
+      "class": "explorer.Application",
+      "theme": "osparc.theme.Theme",
+      "name": "explorer",
+      "title": "oSPARC Explorer",
+      "include": [
+        "iconfont.material.Load",
+        "iconfont.fontawesome5.Load",
+        "osparc.theme.OSparcLight"
+      ],
+      "bootPath": "source/boot"
+    },
     {
       "class": "qxl.apiviewer.Application",
       "theme": "qxl.apiviewer.Theme",

services/web/client/source/class/explorer/Application.js

@@ -0,0 +1,60 @@
+/* ************************************************************************
+
+   explorer - an entry point to oSparc
+
+   https://osparc.io/explorer
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * This is the main application class of "explorer"
+ *
+ * @asset(explorer/*)
+ * @asset(common/common.css)
+ */
+
+qx.Class.define("explorer.Application", {
+  extend: qx.application.Standalone,
+  include: [
+    qx.locale.MTranslation
+  ],
+
+  members: {
+    /**
+     * This method contains the initial application code and gets called
+     * during startup of the application
+     */
+    main: function() {
+      this.base();
+
+      // Enable logging in debug variant
+      if (qx.core.Environment.get("qx.debug")) {
+        // support native logging capabilities, e.g. Firebug for Firefox
+        qx.log.appender.Native;
+      }
+
+      this.__loadMainPage();
+    },
+
+    __loadMainPage: function() {
+      const padding = 0;
+      const view = new explorer.MainPage();
+      const doc = this.getRoot();
+      doc.add(view, {
+        top: padding,
+        bottom: padding,
+        left: padding,
+        right: padding
+      });
+    }
+  }
+});

services/web/client/source/class/explorer/MainPage.js

@@ -0,0 +1,55 @@
+/* ************************************************************************
+
+   explorer - an entry point to oSparc
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("explorer.MainPage", {
+  extend: qx.ui.core.Widget,
+
+  construct: function() {
+    this.base();
+
+    this._setLayout(new qx.ui.layout.VBox());
+
+    const navBar = this.__navBar = this.__createNavigationBar();
+    this._add(navBar);
+
+    const exploreBrowser = this.__exploreBrowser = this.__createMainView();
+    this._add(exploreBrowser, {
+      flex: 1
+    });
+  },
+
+  members: {
+    __navBar: null,
+    __exploreBrowser: null,
+
+    __createNavigationBar: function() {
+      const navBar = new explorer.NavigationBar();
+      navBar.buildLayout();
+      return navBar;
+    },
+
+    __createMainView: function() {
+      const nStudyItemsPerRow = 5;
+      const studyButtons = osparc.dashboard.StudyBrowserButtonBase;
+      const exploreBrowser = new osparc.dashboard.ExploreBrowser().set({
+        alignX: "center",
+        maxWidth: nStudyItemsPerRow * (studyButtons.ITEM_WIDTH + studyButtons.SPACING) + 10 // padding + scrollbar
+      });
+      return exploreBrowser;
+    }
+  }
+});

services/web/client/source/class/explorer/NavigationBar.js

@@ -0,0 +1,35 @@
+/* ************************************************************************
+
+   explorer - an entry point to oSparc
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("explorer.NavigationBar", {
+  extend: osparc.desktop.NavigationBar,
+
+  members: {
+    buildLayout: function() {
+      this.getChildControl("logo");
+      this.getChildControl("platform");
+
+      this._add(new qx.ui.core.Spacer(), {
+        flex: 1
+      });
+
+      this.getChildControl("user-manual");
+      this.getChildControl("feedback");
+      this.getChildControl("theme-switch");
+    }
+  }
+});

services/web/client/source/class/osparc/component/message/FlashMessenger.js

@@ -89,7 +89,7 @@ qx.Class.define("osparc.component.message.FlashMessenger", {
      * @param {*} logMessage.logger IDK
      */
     log: function(logMessage) {
-      let message = logMessage.message;
+      let message = ("message" in logMessage.message) ? logMessage.message["message"] : logMessage.message;
       const level = logMessage.level.toUpperCase(); // "DEBUG", "INFO", "WARNING", "ERROR"
       let logger = logMessage.logger;
       if (logger) {

services/web/client/source/class/osparc/component/metadata/ServiceInfo.js

@@ -42,14 +42,22 @@ qx.Class.define("osparc.component.metadata.ServiceInfo", {
   members: {
     __metadata: null,
 
+    setService: function(metadata) {
+      this._removeAll();
+      if (metadata) {
+        this.__metadata = metadata;
+        this.__createServiceInfoView();
+      }
+    },
+
     __createServiceInfoView: function() {
       const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(8).set({
         alignY: "middle"
       }));
 
       const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(8));
-      hBox.add(this.__createThumbnail());
-      hBox.add(this.__createExtraInfo(), {
+      hBox.add(this.__createExtraInfo());
+      hBox.add(this.__createThumbnail(), {
         flex: 1
       });
       container.add(hBox);
@@ -68,12 +76,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfo", {
     },
 
     __createThumbnail: function() {
-      return new qx.ui.basic.Image(this.__metadata.thumbnail || "@FontAwesome5Solid/flask/50").set({
-        scale: true,
-        width: 300,
-        height: 180,
-        paddingTop: this.__metadata.thumbnail ? 0 : 60
-      });
+      return new osparc.component.widget.Thumbnail(this.__metadata.thumbnail || "@FontAwesome5Solid/flask/50", 300, 180);
     },
 
     __createExtraInfo: function() {

services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js

@@ -32,7 +32,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
     const windowWidth = 700;
     const windowHeight = 800;
     this.set({
-      layout: new qx.ui.layout.Grow(),
+      layout: new qx.ui.layout.VBox(10),
       autoDestroy: true,
       contentPadding: 10,
       showMinimize: false,
@@ -42,16 +42,22 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
       height: windowHeight
     });
 
-    const serviceDetails = new osparc.component.metadata.ServiceInfo(metadata);
+    const serviceInfo = this._serviceInfo = new osparc.component.metadata.ServiceInfo(metadata);
     const scroll = new qx.ui.container.Scroll();
-    scroll.add(serviceDetails);
-    this.add(scroll);
+    scroll.add(serviceInfo);
+    this.add(scroll, {
+      flex: 1
+    });
   },
 
   properties: {
     appearance: {
       refine: true,
       init: "info-service-window"
     }
+  },
+
+  members: {
+    _serviceInfo: null
   }
 });

services/web/client/source/class/osparc/component/metadata/ServiceStarterWindow.js

@@ -0,0 +1,117 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+
+qx.Class.define("osparc.component.metadata.ServiceStarterWindow", {
+  extend: osparc.component.metadata.ServiceInfoWindow,
+
+  /**
+    * @param metadata {Object} Service metadata
+    */
+  construct: function(metadata) {
+    this.base(arguments, metadata);
+
+    this.__service = metadata;
+
+    const toolboxContainer = this.__createToolbox();
+    this.addAt(toolboxContainer, 0);
+  },
+
+  events: {
+    "startService": "qx.event.type.Data"
+  },
+
+  members: {
+    __serviceKey: null,
+    __versionsUIBox: null,
+
+    __createToolbox: function() {
+      const toolboxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+
+      const versionsList = this.__createVersionsList();
+      toolboxContainer.add(versionsList);
+
+      toolboxContainer.add(new qx.ui.core.Spacer(), {
+        flex: 1
+      });
+
+      const openButton = new qx.ui.form.Button(this.tr("Open")).set({
+        appearance: "md-button"
+      });
+      openButton.addListener("execute", () => {
+        const data = {
+          "serviceKey": this.__service.key,
+          "serviceVersion": this.__getSelectedVersion()
+        };
+        this.fireDataEvent("startService", data);
+      });
+      toolboxContainer.add(openButton);
+
+      return toolboxContainer;
+    },
+
+    __createVersionsList: function() {
+      const versionsList = this.__versionsUIBox = new qx.ui.form.SelectBox().set({
+        font: "text-14"
+      });
+      // populate versions
+      const store = osparc.store.Store.getInstance();
+      store.getServicesDAGs()
+        .then(services => {
+          const versions = osparc.utils.Services.getVersions(services, this.__service.key);
+          if (versions) {
+            let lastItem = null;
+            versions.forEach(version => {
+              lastItem = new qx.ui.form.ListItem(version).set({
+                font: "text-14"
+              });
+              versionsList.add(lastItem);
+            });
+            if (lastItem) {
+              versionsList.setSelection([lastItem]);
+              this.__versionSelected(lastItem.getLabel());
+            }
+          }
+        });
+      versionsList.addListener("changeSelection", e => {
+        const serviceVersion = this.__getSelectedVersion();
+        if (serviceVersion) {
+          this.__versionSelected(serviceVersion);
+        }
+      }, this);
+
+      return versionsList;
+    },
+
+    __getSelectedVersion: function() {
+      const selection = this.__versionsUIBox.getSelection();
+      if (selection && selection.length) {
+        return selection[0].getLabel();
+      }
+      return null;
+    },
+
+    __versionSelected: function(serviceVersion) {
+      const store = osparc.store.Store.getInstance();
+      store.getServicesDAGs()
+        .then(services => {
+          const selectedService = osparc.utils.Services.getFromObject(services, this.__service.key, serviceVersion);
+          this._serviceInfo.setService(selectedService);
+        });
+    }
+  }
+});