split view

Author: odeimaiz

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

@@ -40,9 +40,18 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
 
   members: {
     __buildLayout: function(projectData) {
-      this._add(new qx.ui.basic.Label(this.tr("Runs History")).set({
+      const runsHistoryTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
+        alignY: "middle",
+      })).set({
+        paddingLeft: 10,
+      });
+      const runsHistoryTitle = new qx.ui.basic.Label(this.tr("Runs History")).set({
         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."))
+      runsHistoryTitleLayout.add(runsHistoryTitleHelper);
+      this._add(runsHistoryTitleLayout);
 
       const latestOnly = false;
       const projectUuid = projectData["uuid"];
@@ -55,17 +64,31 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
       runsTable.set({
         maxHeight: 250,
       })
-      this._add(runsTable);
+      this._add(runsTable, {
+        flex: 1
+      });
+
 
-      this._add(new qx.ui.basic.Label(this.tr("Latest Tasks")).set({
+      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({
         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."))
+      latestTasksTitleLayout.add(latestTasksTitleHelper);
+      this._add(latestTasksTitleLayout);
 
       const subRunsTable = new osparc.jobs.SubRunsTable(projectData["uuid"]);
       subRunsTable.set({
         maxHeight: 250,
       })
-      this._add(subRunsTable);
+      this._add(subRunsTable, {
+        flex: 1,
+      });
     },
   }
 });