✨ [Frontend] Jobs: Connect to backend (#7550)

Co-authored-by: matusdrobuliak66 <[email protected]>
Co-authored-by: Matus Drobuliak <[email protected]>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -22,41 +22,40 @@ qx.Class.define("osparc.data.Job", {
     this.base(arguments);
 
     this.set({
-      jobId: jobData["job_id"],
-      solver: jobData["solver"],
-      status: jobData["status"],
-      progress: jobData["progress"],
-      submittedAt: jobData["submitted_at"] ? new Date(jobData["submitted_at"]) : null,
-      startedAt: jobData["started_at"] ? new Date(jobData["started_at"]) : null,
-      instance: jobData["instance"],
+      projectUuid: jobData["projectUuid"],
+      state: jobData["state"],
+      submittedAt: jobData["submittedAt"] ? new Date(jobData["submittedAt"]) : null,
+      startedAt: jobData["startedAt"] ? new Date(jobData["startedAt"]) : null,
+      endedAt: jobData["endedAt"] ? new Date(jobData["endedAt"]) : null,
+      info: jobData["info"] || null,
     });
+
+    if (jobData["info"] && jobData["info"]["project_name"]) {
+      this.setProjectName(jobData["info"]["project_name"]);
+    }
+
+    this.__subJobs = [];
   },
 
   properties: {
-    jobId: {
+    projectUuid: {
       check: "String",
       nullable: false,
       init: null,
     },
 
-    solver: {
+    projectName: {
       check: "String",
       nullable: false,
       init: null,
     },
 
-    status: {
+    state: {
       check: "String",
       nullable: false,
       init: null,
     },
 
-    progress: {
-      check: "Number",
-      init: null,
-      nullable: true,
-    },
-
     submittedAt: {
       check: "Date",
       init: null,
@@ -69,10 +68,10 @@ qx.Class.define("osparc.data.Job", {
       nullable: true,
     },
 
-    instance: {
-      check: "String",
-      nullable: false,
+    endedAt: {
+      check: "Date",
       init: null,
+      nullable: true,
     },
 
     info: {
@@ -81,4 +80,37 @@ qx.Class.define("osparc.data.Job", {
       init: null,
     },
   },
+
+  members: {
+    __subJobs: null,
+
+    addSubJob: function(subJobData) {
+      const subJobFound = this.__subJobs.find(subJb => subJb.getNodeId() === subJobData["nodeId"]);
+      if (subJobFound) {
+        subJobFound.updateSubJob(subJobData);
+        return subJobFound;
+      }
+
+      const subJob = new osparc.data.SubJob(subJobData);
+      this.__subJobs.push(subJob);
+      return subJob;
+    },
+
+    updateJob: function(jobData) {
+      this.set({
+        state: jobData["state"],
+        submittedAt: jobData["submittedAt"] ? new Date(jobData["submittedAt"]) : null,
+        startedAt: jobData["startedAt"] ? new Date(jobData["startedAt"]) : null,
+        endedAt: jobData["endedAt"] ? new Date(jobData["endedAt"]) : null,
+      });
+    },
+
+    getSubJobs: function() {
+      return this.__subJobs;
+    },
+
+    getSubJob: function(nodeId) {
+      return this.__subJobs.find(subJb => subJb.getNodeId() === nodeId);
+    },
+  }
 });

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

@@ -319,6 +319,25 @@ qx.Class.define("osparc.data.Resources", {
           }
         }
       },
+      "jobs": {
+        useCache: false, // handled in osparc.store.Jobs
+        endpoints: {
+          getPage: {
+            method: "GET",
+            // url: statics.API + "/computations/-/iterations/latest?offset={offset}&limit={limit}&order_by={orderBy}"
+            url: statics.API + "/computations/-/iterations/latest?offset={offset}&limit={limit}&order_by=%7B%22field%22:%22submitted_at%22,%22direction%22:%22desc%22%7D"
+          },
+        }
+      },
+      "subJobs": {
+        useCache: false, // handled in osparc.store.Jobs
+        endpoints: {
+          getPage: {
+            method: "GET",
+            url: statics.API + "/computations/{studyId}/iterations/latest/tasks?offset={offset}&limit={limit}"
+          },
+        }
+      },
       "folders": {
         useCache: true,
         idField: "uuid",

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

@@ -0,0 +1,96 @@
+/* ************************************************************************
+
+   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.data.SubJob", {
+  extend: qx.core.Object,
+
+  construct: function(subJobData) {
+    this.base(arguments);
+
+    this.set({
+      projectUuid: subJobData["projectUuid"],
+      nodeId: subJobData["nodeId"],
+      nodeName: subJobData["nodeId"],
+      state: subJobData["state"],
+      progress: subJobData["progress"],
+      startedAt: subJobData["startedAt"] ? new Date(subJobData["startedAt"]) : null,
+      endedAt: subJobData["endedAt"] ? new Date(subJobData["endedAt"]) : null,
+      image: subJobData["image"] || {},
+    });
+  },
+
+  properties: {
+    projectUuid: {
+      check: "String",
+      nullable: false,
+      init: null,
+    },
+
+    nodeId: {
+      check: "String",
+      nullable: false,
+      init: null,
+    },
+
+    nodeName: {
+      check: "String",
+      nullable: false,
+      init: null,
+    },
+
+    state: {
+      check: "String",
+      nullable: true,
+      init: null,
+    },
+
+    progress: {
+      check: "Number",
+      nullable: true,
+      init: null,
+    },
+
+    startedAt: {
+      check: "Date",
+      init: null,
+      nullable: true,
+    },
+
+    endedAt: {
+      check: "Date",
+      init: null,
+      nullable: true,
+    },
+
+    image: {
+      check: "Object",
+      nullable: false,
+      init: null,
+    },
+  },
+
+  members: {
+    updateSubJob: function(subJobData) {
+      this.set({
+        state: subJobData["state"],
+        progress: subJobData["progress"],
+        startedAt: subJobData["startedAt"] ? new Date(subJobData["startedAt"]) : null,
+        endedAt: subJobData["endedAt"] ? new Date(subJobData["endedAt"]) : null,
+      });
+    },
+  },
+});

services/static-webserver/client/source/class/osparc/jobs/JobInfo.js renamed to services/static-webserver/client/source/class/osparc/jobs/Info.js

@@ -16,19 +16,16 @@
 ************************************************************************ */
 
 
-qx.Class.define("osparc.jobs.JobInfo", {
+qx.Class.define("osparc.jobs.Info", {
   extend: qx.ui.core.Widget,
 
-  construct(jobId) {
+  construct(info) {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.VBox());
 
     const jobInfoViewer = this.getChildControl("job-info-viewer");
-    osparc.store.Jobs.getInstance().fetchJobInfo(jobId)
-      .then(info => {
-        jobInfoViewer.setJson(info);
-      });
+    jobInfoViewer.setJson(info);
   },
 
   statics: {

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

@@ -28,21 +28,21 @@ qx.Class.define("osparc.jobs.JobsButton", {
       alignX: "center",
       cursor: "pointer",
       visibility: "excluded",
-      toolTipText: this.tr("Jobs and Clusters"),
+      toolTipText: this.tr("Runs and Clusters"),
     });
 
+    this.addListener("tap", () => osparc.jobs.RunsWindow.openWindow(), this);
+
     const jobsStore = osparc.store.Jobs.getInstance();
     jobsStore.addListener("changeJobs", e => this.__updateJobsButton(), this);
-    this.addListener("tap", () => osparc.jobs.JobsAndClusters.popUpInWindow(), this);
   },
 
   members: {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
         case "icon": {
-          control = new qx.ui.basic.Image("@FontAwesome5Solid/cog/22");
-          osparc.utils.Utils.addClass(control.getContentElement(), "rotateSlow");
+          control = new qx.ui.basic.Image("@FontAwesome5Solid/tasks/22");
 
           const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
             alignY: "middle"
@@ -76,7 +76,7 @@ qx.Class.define("osparc.jobs.JobsButton", {
       const number = this.getChildControl("number");
 
       const jobsStore = osparc.store.Jobs.getInstance();
-      const nJobs = jobsStore.getJobs().length;
+      const nJobs = jobsStore.getJobs().length > 20 ? "20+" : jobsStore.getJobs().length;
       number.setValue(nJobs.toString());
       nJobs ? this.show() : this.exclude();
     },