🎨 [Frontend] Enh UX: Number of Active Jobs (#8061)

Author: odeimaiz

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

@@ -790,13 +790,15 @@ qx.Class.define("osparc.dashboard.CardBase", {
       }
     },
 
-    // pipelineState: ["NOT_STARTED", "STARTED", "SUCCESS", "ABORTED", "FAILED", "UNKNOWN"]
+    // pipelineState: ["NOT_STARTED", "PUBLISHED", "STOPPING", "STARTED", "SUCCESS", "ABORTED", "FAILED", "UNKNOWN"]
     __applyPipelineState: function(pipelineState) {
       let iconSource;
       let toolTipText;
       let borderColor;
       switch (pipelineState) {
+        case "PUBLISHED":
         case "STARTED":
+        case "STOPPING":
           iconSource = "@FontAwesome5Solid/spinner/10";
           toolTipText = this.tr("Running");
           borderColor = "info";

services/static-webserver/client/source/class/osparc/jobs/JobsButton.js

@@ -32,11 +32,19 @@ qx.Class.define("osparc.jobs.JobsButton", {
       toolTipText: this.tr("Activity Center"),
     });
 
-    this.addListener("tap", () => osparc.jobs.ActivityCenterWindow.openWindow(), this);
-
-    const jobsStore = osparc.store.Jobs.getInstance();
-    jobsStore.addListener("changeJobsActive", e => this.__updateJobsButton(e.getData()), this);
-    jobsStore.fetchJobsLatest();
+    this.addListener("tap", () => {
+      osparc.jobs.ActivityCenterWindow.openWindow();
+      this.__fetchNJobs();
+    }, this);
+
+    this.__fetchNJobs();
+
+    const socket = osparc.wrapper.WebSocket.getInstance();
+    if (socket.isConnected()) {
+      this.__attachSocketListener();
+    } else {
+      socket.addListener("connect", () => this.__attachSocketListener());
+    }
   },
 
   members: {
@@ -56,29 +64,83 @@ qx.Class.define("osparc.jobs.JobsButton", {
           });
           break;
         }
-        case "number":
-          control = new qx.ui.basic.Label().set({
-            backgroundColor: "background-main-1",
-            font: "text-12"
+        case "is-active-icon-outline":
+          control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/12").set({
+            textColor: osparc.navigation.NavigationBar.BG_COLOR,
+          });
+          this._add(control, {
+            bottom: 10,
+            right: 2
           });
-          control.getContentElement().setStyles({
-            "border-radius": "4px"
+          break;
+        case "is-active-icon":
+          control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/8").set({
+            textColor: "strong-main",
           });
           this._add(control, {
-            bottom: 8,
+            bottom: 12,
             right: 4
           });
           break;
       }
       return control || this.base(arguments, id);
     },
 
-    __updateJobsButton: function(nActiveJobs) {
+    __fetchNJobs: function() {
+      const jobsStore = osparc.store.Jobs.getInstance();
+      const runningOnly = true;
+      const offset = 0;
+      const limit = 1;
+      const orderBy = undefined; // use default order
+      const filters = undefined; // use default filters
+      const resolveWResponse = true;
+      jobsStore.fetchJobsLatest(runningOnly, offset, limit, orderBy, filters, resolveWResponse)
+        .then(resp => {
+          // here we have the real number of jobs running
+          this.__updateJobsButton(Boolean(resp["_meta"]["total"]));
+        });
+    },
+
+    __attachSocketListener: function() {
+      const socket = osparc.wrapper.WebSocket.getInstance();
+
+      socket.on("projectStateUpdated", content => {
+        // for now, we can only access the activity of my user, not the whole project...
+        if (osparc.study.Utils.amIRunningTheStudy(content)) {
+          // we know that I am running at least one study
+          this.__updateJobsButton(true);
+        }
+        // ...in the next iteration: listen to main store's "studyStateChanged", which will cover all users
+      }, this);
+    },
+
+    __updateJobsButton: function(isActive) {
       this.getChildControl("icon");
-      const number = this.getChildControl("number");
+      [
+        this.getChildControl("is-active-icon-outline"),
+        this.getChildControl("is-active-icon"),
+      ].forEach(control => {
+        control.set({
+          visibility: isActive ? "visible" : "excluded"
+        });
+      });
+
+      // Start or restart timer when isActive is true
+      if (isActive) {
+        this.__startRefreshTimer();
+      }
+    },
+
+    __startRefreshTimer: function() {
+      // Stop existing timer if running
+      if (this.__refreshTimer) {
+        this.__refreshTimer.stop();
+        this.__refreshTimer.dispose();
+      }
 
-      const nJobs = nActiveJobs > osparc.store.Jobs.SERVER_MAX_LIMIT ? (osparc.store.Jobs.SERVER_MAX_LIMIT + "+") : nActiveJobs;
-      number.setValue(nJobs.toString());
+      this.__refreshTimer = new qx.event.Timer(20000);
+      this.__refreshTimer.addListener("interval", () => this.__fetchNJobs(), this);
+      this.__refreshTimer.start();
     },
   }
 });

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -50,7 +50,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       paddingLeft: 10,
       paddingRight: 10,
       height: this.self().HEIGHT,
-      backgroundColor: "background-main-1",
+      backgroundColor: this.self().BG_COLOR,
     });
 
     osparc.utils.Utils.setIdToWidget(this, "navigationBar");
@@ -72,6 +72,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
   },
 
   statics: {
+    BG_COLOR: "background-main-1",
     HEIGHT: 50,
     SMALL_SCREEN_BREAKPOINT: 800,
 
@@ -353,7 +354,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       const readOnlyInfo = this.getChildControl("read-only-info")
       if (study) {
         this.getChildControl("study-title-options").setStudy(study);
-        study.bind("savePending", readOnlyInfo, "visibility", {
+        study.bind("savePending", savingStudyIcon, "visibility", {
           converter: value => value && ["workbench", "pipeline"].includes(study.getUi().getMode()) ? "visible" : "excluded"
         });
         study.bind("readOnly", readOnlyInfo, "visibility", {

services/static-webserver/client/source/class/osparc/store/Jobs.js

@@ -28,10 +28,6 @@ qx.Class.define("osparc.store.Jobs", {
     },
   },
 
-  events: {
-    "changeJobsActive": "qx.event.type.Data",
-  },
-
   statics: {
     SERVER_MAX_LIMIT: 49,
   },
@@ -62,9 +58,6 @@ qx.Class.define("osparc.store.Jobs", {
       };
       return osparc.data.Resources.fetch("runs", "getPageLatest", params, options)
         .then(jobsResp => {
-          if (runningOnly) {
-            this.fireDataEvent("changeJobsActive", jobsResp["_meta"]["total"]);
-          }
           const jobsActive = [];
           if ("data" in jobsResp) {
             jobsResp["data"].forEach(jobActiveData => {

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

@@ -397,6 +397,29 @@ qx.Class.define("osparc.study.Utils", {
       return null;
     },
 
+    // used in the "projectStateUpdated" socket event
+    amIRunningTheStudy: function(content) {
+      if (
+        content &&
+        "data" in content &&
+        "locked" in content["data"] &&
+        "owner" in content["data"]["locked"] &&
+        "user_id" in content["data"]["locked"]["owner"] &&
+        content["data"]["locked"]["owner"]["user_id"] === osparc.auth.Data.getInstance().getUserId()
+      ) {
+        return (
+          content["data"]["state"] &&
+          content["data"]["state"]["value"] &&
+          [
+            "PUBLISHED",
+            "STARTED",
+            "STOPPING",
+          ].includes(content["data"]["state"]["value"])
+        );
+      }
+      return false;
+    },
+
     __getBlockedState: function(studyData) {
       if (studyData["services"] === null) {
         return "UNKNOWN_SERVICES";

services/static-webserver/client/source/class/osparc/task/TasksButton.js

@@ -56,7 +56,7 @@ qx.Class.define("osparc.task.TasksButton", {
         }
         case "number":
           control = new qx.ui.basic.Label().set({
-            backgroundColor: "background-main-1",
+            backgroundColor: osparc.navigation.NavigationBar.BG_COLOR,
             paddingLeft: 4,
             font: "text-12"
           });