JobsButton

Author: odeimaiz

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

@@ -0,0 +1,84 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.jobs.JobsButton", {
+  extend: qx.ui.core.Widget,
+
+  construct: function() {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.Canvas());
+
+    this.set({
+      width: 30,
+      alignX: "center",
+      cursor: "pointer",
+      visibility: "excluded",
+      toolTipText: this.tr("Jobs"),
+    });
+
+    const jobsStore = osparc.store.Jobs.getInstance();
+    jobsStore.getJobs().addListener("change", e => this.__updateJobsButton(), this);
+    this.addListener("tap", () => console.log("Pop up jobs table"), this);
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "icon": {
+          control = new qx.ui.basic.Image("@FontAwesome5Solid/cog/24");
+          osparc.utils.Utils.addClass(control.getContentElement(), "rotate");
+
+          const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
+            alignY: "middle"
+          }));
+          logoContainer.add(control);
+
+          this._add(logoContainer, {
+            height: "100%"
+          });
+          break;
+        }
+        case "number":
+          control = new qx.ui.basic.Label().set({
+            backgroundColor: "background-main-1",
+            font: "text-12"
+          });
+          control.getContentElement().setStyles({
+            "border-radius": "4px"
+          });
+          this._add(control, {
+            bottom: 8,
+            right: 4
+          });
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __updateJobsButton: function() {
+      this._createChildControlImpl("icon");
+      const number = this.getChildControl("number");
+
+      const jobsStore = osparc.store.Jobs.getInstance();
+      const nJobs = jobsStore.getJobs().length;
+      number.setValue(nJobs.toString());
+      nJobs ? this.show() : this.exclude();
+    },
+  }
+});

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

@@ -28,7 +28,7 @@ qx.Class.define("osparc.task.TasksButton", {
       alignX: "center",
       cursor: "pointer",
       visibility: "excluded",
-      tooltipText: this.tr("Tasks"),
+      toolTipText: this.tr("Tasks"),
     });
 
     const tasks = osparc.task.TasksContainer.getInstance();

services/static-webserver/client/source/resource/osparc/mock_jobs.json

@@ -29,7 +29,7 @@
     "status": "STARTED",
     "progress": 50,
     "submitted_at": "2024-11-27 14:03:17.357523",
-    "started_at": "2024-11-27 14:03:17.357523",
+    "started_at": "2025-03-19 14:03:17.357523",
     "instance": "p5.8xlarge"
   }],
   "jobs_info": {