🎨 [Frontend] Fetch tasks from the given projectUuid (#7743)

Co-authored-by: Matus Drobuliak <60785969+matusdrobuliak66@users.noreply.github.com>

Author: odeimaiz

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

@@ -58,7 +58,8 @@ qx.Class.define("osparc.jobs.ActivityCenterWindow", {
       stack.add(subRunsBrowser);
 
       runsBrowser.addListener("runSelected", e => {
-        const project = e.getData();
+        const data = e.getData();
+        const project = data["rowData"];
         subRunsBrowser.setProject(project);
         this.getChildControl("title").setValue(this.tr("Tasks"));
         stack.setSelection([subRunsBrowser]);

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(10));
+    this._setLayout(new qx.ui.layout.VBox());
 
     this.__buildLayout(projectData);
   },
@@ -39,7 +39,54 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
   },
 
   members: {
+    __runsTable: null,
+    __subRunsTable: null,
+
     __buildLayout: function(projectData) {
+      const stack = new qx.ui.container.Stack();
+      this._add(stack, {
+        flex: 1
+      });
+
+      const runsHistoryLayout = this.__createRunsHistoryView(projectData);
+      stack.add(runsHistoryLayout);
+
+      const tasksLayout = this.__createTasksView();
+      stack.add(tasksLayout);
+
+      this.__runsTable.addListener("runSelected", e => {
+        const data = e.getData();
+        const project = data["rowData"];
+        const projectUuid = project["projectUuid"];
+        // Hacky-hacky
+        for (let i=0; i<this.__runsTable.getTableModel().getRowCount(); i++) {
+          const rowData = this.__runsTable.getTableModel().getRowData(i);
+          if (rowData["projectUuid"] === projectUuid && data["rowIdx"] > i) {
+            const msg = this.tr("Only the latest run's tasks are available");
+            osparc.FlashMessenger.logAs(msg, "WARNING");
+            return;
+          }
+        }
+
+        if (this.__subRunsTable) {
+          tasksLayout.remove(this.__subRunsTable);
+          this.__subRunsTable = null;
+        }
+        const subRunsTable = this.__subRunsTable = new osparc.jobs.SubRunsTable(project["projectUuid"]);
+        tasksLayout.add(subRunsTable, {
+          flex: 1
+        });
+        stack.setSelection([tasksLayout]);
+
+        tasksLayout.addListener("backToRuns", () => {
+          stack.setSelection([runsHistoryLayout]);
+        });
+      }, this);
+    },
+
+    __createRunsHistoryView: function(projectData) {
+      const runsHistoryLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+
       const runsHistoryTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
         alignY: "middle",
       })).set({
@@ -49,47 +96,52 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
         font: "text-14"
       });
       runsHistoryTitleLayout.add(runsHistoryTitle);
-      const runsHistoryTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, the history of the project runs is shown."))
+      const runsHistoryTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, the history of the project runs is shown. Select a run to see its tasks."))
       runsHistoryTitleLayout.add(runsHistoryTitleHelper);
-      this._add(runsHistoryTitleLayout);
+      runsHistoryLayout.add(runsHistoryTitleLayout);
 
       const projectUuid = projectData["uuid"];
       const includeChildren = true;
       const runningOnly = false;
-      const runsTable = new osparc.jobs.RunsTable(projectUuid, includeChildren, runningOnly);
+      const runsTable = this.__runsTable = new osparc.jobs.RunsTable(projectUuid, includeChildren, runningOnly);
       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, {
+      runsHistoryLayout.add(runsTable, {
         flex: 1
       });
 
+      return runsHistoryLayout;
+    },
+
+    __createTasksView: function() {
+      const tasksLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
 
       const latestTasksTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
         alignY: "middle",
       })).set({
         paddingLeft: 10,
       });
-      const latestTasksTitle = new qx.ui.basic.Label(this.tr("Latest Tasks")).set({
+
+      const prevBtn = new qx.ui.form.Button().set({
+        toolTipText: this.tr("Return to Runs"),
+        icon: "@FontAwesome5Solid/arrow-left/20",
+        backgroundColor: "transparent"
+      });
+      prevBtn.addListener("execute", () => tasksLayout.fireEvent("backToRuns"));
+      latestTasksTitleLayout.add(prevBtn);
+
+      const latestTasksTitle = new qx.ui.basic.Label(this.tr("Tasks")).set({
         font: "text-14"
       });
       latestTasksTitleLayout.add(latestTasksTitle);
-      const latestTasksTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, only the latest tasks or simulations are shown. If available, the logs can be downloaded."))
+      const latestTasksTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, the tasks or simulations of the selected run are shown. If available, the logs can be downloaded."))
       latestTasksTitleLayout.add(latestTasksTitleHelper);
-      this._add(latestTasksTitleLayout);
-
-      const subRunsTable = new osparc.jobs.SubRunsTable(projectUuid, includeChildren);
-      subRunsTable.set({
-        maxHeight: 250,
-      })
-      this._add(subRunsTable, {
-        flex: 1,
-      });
+      tasksLayout.add(latestTasksTitleLayout);
+
+      return tasksLayout;
     },
   }
 });

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

@@ -139,16 +139,19 @@ qx.Class.define("osparc.jobs.RunsTable", {
 
     __attachHandlers: function() {
       this.addListener("cellTap", e => {
-        const row = e.getRow();
+        const rowIdx = e.getRow();
         const target = e.getOriginalTarget();
         if (target.closest(".qx-material-button") && (target.tagName === "IMG" || target.tagName === "DIV")) {
           const action = target.closest(".qx-material-button").getAttribute("data-action");
           if (action) {
-            this.__handleButtonClick(action, row);
+            this.__handleButtonClick(action, rowIdx);
           }
         } else {
-          const rowData = this.getTableModel().getRowData(row);
-          this.fireDataEvent("runSelected", rowData);
+          const rowData = this.getTableModel().getRowData(rowIdx);
+          this.fireDataEvent("runSelected", {
+            rowData,
+            rowIdx,
+          });
           this.resetSelection();
         }
       });

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

@@ -143,11 +143,14 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
 
       // Divides the model row request into several server requests to comply with the number of rows server limit
       const reqLimit = lastRow - firstRow + 1; // Number of requested rows
-      const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT);
+      let nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT);
       if (nRequests > 1) {
         const requests = [];
         for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {
-          requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))
+        // fetch the first page only
+          if (i < 1) {
+            requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))
+          }
         }
         Promise.all(requests)
           .then(responses => this._onRowDataLoaded(responses.flat()))

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

@@ -49,7 +49,7 @@ qx.Class.define("osparc.jobs.SubRunsBrowser", {
       }));
 
       const prevBtn = new qx.ui.form.Button().set({
-        toolTipText: this.tr("Return to Runs and Clusters"),
+        toolTipText: this.tr("Return to Runs"),
         icon: "@FontAwesome5Solid/arrow-left/20",
         backgroundColor: "transparent"
       });
@@ -74,8 +74,7 @@ qx.Class.define("osparc.jobs.SubRunsBrowser", {
 
       this.__titleLabel.setValue(project["projectName"])
 
-      const includeChildren = false;
-      const subRunsTable = this.__subRunsTable = new osparc.jobs.SubRunsTable(project["projectUuid"], includeChildren);
+      const subRunsTable = this.__subRunsTable = new osparc.jobs.SubRunsTable(project["projectUuid"]);
       this._add(subRunsTable, {
         flex: 1
       });

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

@@ -19,10 +19,10 @@
 qx.Class.define("osparc.jobs.SubRunsTable", {
   extend: qx.ui.table.Table,
 
-  construct: function(projectUuid, includeChildren = false) {
+  construct: function(projectUuid) {
     this.base(arguments);
 
-    const model = new osparc.jobs.SubRunsTableModel(projectUuid, includeChildren);
+    const model = new osparc.jobs.SubRunsTableModel(projectUuid);
     this.setTableModel(model);
 
     this.set({

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

@@ -19,7 +19,7 @@
 qx.Class.define("osparc.jobs.SubRunsTableModel", {
   extend: qx.ui.table.model.Remote,
 
-  construct: function(projectUuid, includeChildren = false) {
+  construct: function(projectUuid) {
     this.base(arguments);
 
     const subJobsCols = osparc.jobs.SubRunsTable.COLS;
@@ -34,7 +34,6 @@ qx.Class.define("osparc.jobs.SubRunsTableModel", {
     });
 
     this.setProjectUuid(projectUuid);
-    this.__includeChildren = includeChildren;
   },
 
   properties: {
@@ -51,11 +50,9 @@ qx.Class.define("osparc.jobs.SubRunsTableModel", {
   },
 
   members: {
-    __includeChildren: null,
-
     // overridden
     _loadRowCount() {
-      osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid(), this.__includeChildren)
+      osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid())
         .then(subJobs => {
           this._onRowCountLoaded(subJobs.length)
         })
@@ -71,7 +68,7 @@ qx.Class.define("osparc.jobs.SubRunsTableModel", {
       const lastRow = Math.min(qxLastRow, this._rowCount - 1);
       // Returns a request promise with given offset and limit
       const getFetchPromise = () => {
-        return osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid(), this.__includeChildren)
+        return osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid())
           .then(subJobs => {
             const data = [];
             const subJobsCols = osparc.jobs.SubRunsTable.COLS;

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

@@ -119,11 +119,11 @@ qx.Class.define("osparc.store.Jobs", {
         .catch(err => console.error(err));
     },
 
-    fetchSubJobs: function(projectUuid, includeChildren = false) {
+    fetchSubJobs: function(projectUuid) {
       const params = {
         url: {
           studyId: projectUuid,
-          includeChildren,
+          includeChildren: false,
         }
       };
       return osparc.data.Resources.getInstance().getAllPages("subRuns", params, "getPageLatest")