Activity Overview with two tables

Author: odeimaiz

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

@@ -356,7 +356,7 @@ qx.Class.define("osparc.data.Resources", {
           },
           getPageHistory: {
             method: "GET",
-            url: statics.API + "/computations/{studyId}/iterations?offset={offset}&limit={limit}"
+            url: statics.API + "/computations/{studyId}/iterations?offset={offset}&limit={limit}&order_by=%7B%22field%22:%22submitted_at%22,%22direction%22:%22desc%22%7D"
           },
         }
       },

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

@@ -21,7 +21,7 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
   construct: function(projectData) {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.VBox(15));
+    this._setLayout(new qx.ui.layout.VBox(10));
 
     this.__buildLayout(projectData);
   },
@@ -30,18 +30,41 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
     popUpInWindow: function(projectData) {
       const activityOverview = new osparc.jobs.ActivityOverview(projectData);
       const title = qx.locale.Manager.tr("Activity Overview");
-      return osparc.ui.window.Window.popUpInWindow(activityOverview, title, osparc.jobs.ActivityCenterWindow.WIDTH, osparc.jobs.ActivityCenterWindow.HEIGHT);
+      const win = osparc.ui.window.Window.popUpInWindow(activityOverview, title, osparc.jobs.ActivityCenterWindow.WIDTH, osparc.jobs.ActivityCenterWindow.HEIGHT);
+      win.set({
+        maxHeight: 700,
+      });
+      return win;
     },
   },
 
   members: {
     __buildLayout: function(projectData) {
+      this._add(new qx.ui.basic.Label(this.tr("Runs History")).set({
+        font: "text-14"
+      }));
+
       const latestOnly = false;
       const projectUuid = projectData["uuid"];
       const runsTable = new osparc.jobs.RunsTable(latestOnly, projectUuid);
+      const columnModel = runsTable.getTableColumnModel();
+      // Hide project name column
+      columnModel.setColumnVisible(osparc.jobs.RunsTable.COLS.PROJECT_NAME.column, false);
+      // Hide cancel column
+      columnModel.setColumnVisible(osparc.jobs.RunsTable.COLS.ACTION_CANCEL.column, false);
+      runsTable.set({
+        maxHeight: 250,
+      })
       this._add(runsTable);
 
+      this._add(new qx.ui.basic.Label(this.tr("Latest Tasks")).set({
+        font: "text-14"
+      }));
+
       const subRunsTable = new osparc.jobs.SubRunsTable(projectData["uuid"]);
+      subRunsTable.set({
+        maxHeight: 250,
+      })
       this._add(subRunsTable);
     },
   }

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

@@ -22,7 +22,7 @@ qx.Class.define("osparc.jobs.RunsTable", {
   construct: function(latestOnly = true, projectUuid = null) {
     this.base(arguments);
 
-    const model = new osparc.jobs.RunsTableModel();
+    const model = new osparc.jobs.RunsTableModel(latestOnly, projectUuid);
     this.setTableModel(model);
 
     this.set({

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

@@ -19,9 +19,12 @@
 qx.Class.define("osparc.jobs.RunsTableModel", {
   extend: qx.ui.table.model.Remote,
 
-  construct: function() {
+  construct: function(latestOnly = true, projectUuid = null) {
     this.base(arguments);
 
+    this.__latestOnly = latestOnly;
+    this.__projectUuid = projectUuid;
+
     const jobsCols = osparc.jobs.RunsTable.COLS;
     const colLabels = Object.values(jobsCols).map(col => col.label);
     const colIDs = Object.values(jobsCols).map(col => col.id);
@@ -60,7 +63,13 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
       const offset = 0;
       const limit = 1;
       const resolveWResponse = true;
-      osparc.store.Jobs.getInstance().fetchJobsActive(offset, limit, JSON.stringify(this.getOrderBy()), resolveWResponse)
+      let promise;
+      if (this.__latestOnly && this.__projectUuid === null) {
+        promise = osparc.store.Jobs.getInstance().fetchJobsActive(offset, limit, JSON.stringify(this.getOrderBy()), resolveWResponse);
+      } else {
+        promise = osparc.store.Jobs.getInstance().fetchJobsHistory(this.__projectUuid, offset, limit, JSON.stringify(this.getOrderBy()), resolveWResponse);
+      }
+      promise
         .then(resp => {
           this._onRowCountLoaded(resp["_meta"].total)
         })
@@ -76,7 +85,13 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
       const lastRow = Math.min(qxLastRow, this._rowCount - 1);
       // Returns a request promise with given offset and limit
       const getFetchPromise = (offset, limit) => {
-        return osparc.store.Jobs.getInstance().fetchJobsActive(offset, limit, JSON.stringify(this.getOrderBy()))
+        let promise;
+        if (this.__latestOnly && this.__projectUuid === null) {
+          promise = osparc.store.Jobs.getInstance().fetchJobsActive(offset, limit, JSON.stringify(this.getOrderBy()));
+        } else {
+          promise = osparc.store.Jobs.getInstance().fetchJobsHistory(this.__projectUuid, offset, limit, JSON.stringify(this.getOrderBy()));
+        }
+        promise
           .then(jobs => {
             const data = [];
             const jobsCols = osparc.jobs.RunsTable.COLS;

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

@@ -73,6 +73,44 @@ qx.Class.define("osparc.store.Jobs", {
         .catch(err => console.error(err));
     },
 
+    fetchJobsHistory: function(
+      studyId,
+      offset = 0,
+      limit = this.self().SERVER_MAX_LIMIT,
+      orderBy = {
+        field: "submitted_at",
+        direction: "desc"
+      },
+      resolveWResponse = false
+    ) {
+      const params = {
+        url: {
+          studyId,
+          offset,
+          limit,
+          orderBy: JSON.stringify(orderBy),
+        }
+      };
+      const options = {
+        resolveWResponse: true
+      };
+      return osparc.data.Resources.fetch("jobs", "getPageHistory", params, options)
+        .then(jobsResp => {
+          if (resolveWResponse) {
+            return jobsResp;
+          }
+          const jobs = [];
+          if ("data" in jobsResp) {
+            jobsResp["data"].forEach(jobData => {
+              const job = new osparc.data.Job(jobData);
+              jobs.push(job);
+            });
+          }
+          return jobs;
+        })
+        .catch(err => console.error(err));
+    },
+
     fetchSubJobs: function(projectUuid) {
       const params = {
         url: {