two steps in overview

Author: odeimaiz

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,42 @@ 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 project = e.getData();
+        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]);
+
+        this.__subRunsTable.addListener("backToRuns", e => {
+          stack.setSelection([runsHistoryLayout]);
+        });
+      });
+    },
+
+    __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({
@@ -51,45 +86,41 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
       runsHistoryTitleLayout.add(runsHistoryTitle);
       const runsHistoryTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, the history of the project runs is shown."))
       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 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 latest 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;
     },
   }
 });