🎨🐛 [Frontend] Runs and Tasks sorting (#7790)

Author: odeimaiz

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

@@ -163,11 +163,12 @@ qx.Class.define("osparc.data.Permissions", {
           "dashboard.services.read"
         ];
       }
+
       if (osparc.product.Utils.getProductName() !== "osparc") {
         // data tab only available in osparc and testers
-        fromUserToTester = [
+        fromUserToTester.push(
           "dashboard.data.read"
-        ];
+        );
       }
 
       fromUserToTester.forEach(onlyTester => {

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

@@ -352,11 +352,11 @@ qx.Class.define("osparc.data.Resources", {
         endpoints: {
           getPageLatest: {
             method: "GET",
-            url: statics.API + "/computations/-/iterations/latest?offset={offset}&limit={limit}&order_by=%7B%22field%22:%22submitted_at%22,%22direction%22:%22desc%22%7D&filter_only_running={runningOnly}&filters={filters}"
+            url: statics.API + "/computations/-/iterations/latest?offset={offset}&limit={limit}&order_by={orderBy}&filter_only_running={runningOnly}&filters={filters}"
           },
           getPageHistory: {
             method: "GET",
-            url: statics.API + "/computations/{studyId}/iterations?offset={offset}&limit={limit}&order_by=%7B%22field%22:%22submitted_at%22,%22direction%22:%22desc%22%7D&include_children={includeChildren}"
+            url: statics.API + "/computations/{studyId}/iterations?offset={offset}&limit={limit}&order_by={orderBy}&include_children={includeChildren}"
           },
         }
       },
@@ -365,7 +365,7 @@ qx.Class.define("osparc.data.Resources", {
         endpoints: {
           getPageLatest: {
             method: "GET",
-            url: statics.API + "/computations/{studyId}/iterations/latest/tasks?offset={offset}&limit={limit}&include_children={includeChildren}"
+            url: statics.API + "/computations/{studyId}/iterations/latest/tasks?offset={offset}&limit={limit}&order_by={orderBy}&include_children={includeChildren}"
           },
         }
       },

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

@@ -104,6 +104,7 @@ qx.Class.define("osparc.data.SubJob", {
         progress: subJobData["progress"],
         startedAt: subJobData["startedAt"] ? new Date(subJobData["startedAt"]) : null,
         endedAt: subJobData["endedAt"] ? new Date(subJobData["endedAt"]) : null,
+        osparcCredits: subJobData["osparcCredits"] === null ? null : -1*parseFloat(subJobData["osparcCredits"]),
       });
     },
   },

services/static-webserver/client/source/class/osparc/info/StudyLarge.js

@@ -57,7 +57,11 @@ qx.Class.define("osparc.info.StudyLarge", {
 
       const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
 
-      if (this.getStudy().getTemplateType() && osparc.data.Permissions.getInstance().isTester()) {
+      if (
+        this.__canIWrite() &&
+        this.getStudy().getTemplateType() &&
+        osparc.data.Permissions.getInstance().isTester()
+      ) {
         // let testers change the template type
         const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
           alignY: "middle",

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

@@ -100,6 +100,11 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
       runsHistoryTitleLayout.add(runsHistoryTitleHelper);
       runsHistoryLayout.add(runsHistoryTitleLayout);
 
+      const introText = new qx.ui.basic.Label(this.tr("Select a Run to check the details")).set({
+        paddingLeft: 10,
+      });
+      runsHistoryLayout.add(introText);
+
       const projectUuid = projectData["uuid"];
       const includeChildren = true;
       const runningOnly = false;

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

@@ -24,6 +24,7 @@ qx.Class.define("osparc.jobs.RunsBrowser", {
 
     this._setLayout(new qx.ui.layout.VBox(10));
 
+    this.getChildControl("intro-label");
     const jobsFilter = this.getChildControl("jobs-filter");
     const runningCB = this.getChildControl("running-only-cb");
     const runsTable = this.getChildControl("runs-table");
@@ -52,6 +53,10 @@ qx.Class.define("osparc.jobs.RunsBrowser", {
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
           this._add(control);
           break;
+        case "intro-label":
+          control = new qx.ui.basic.Label(this.tr("Select a Run to check the details"));
+          this.getChildControl("header-filter").add(control);
+          break;
         case "jobs-filter":
           control = new osparc.filter.TextFilter("text", "jobsList").set({
             allowStretchX: true,

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

@@ -87,34 +87,33 @@ qx.Class.define("osparc.jobs.RunsTable", {
         column: 1,
         label: qx.locale.Manager.tr("Project"),
         width: 150,
-        sortable: true
       },
       STATE: {
         id: "state",
         column: 2,
         label: qx.locale.Manager.tr("Status"),
-        width: 150
+        width: 150,
       },
       SUBMIT: {
         id: "submit",
         column: 3,
         label: qx.locale.Manager.tr("Queued"),
         width: 130,
-        sortable: true
+        sortableMap: "submitted_at",
       },
       START: {
         id: "start",
         column: 4,
         label: qx.locale.Manager.tr("Started"),
         width: 130,
-        sortable: true
+        sortableMap: "started_at",
       },
       END: {
         id: "end",
         column: 5,
         label: qx.locale.Manager.tr("Ended"),
         width: 130,
-        sortable: true
+        sortableMap: "ended_at",
       },
       ACTION_CANCEL: {
         id: "action_cancel",

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

@@ -36,7 +36,7 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
     this.setSortColumnIndexWithoutSortingData(jobsCols.SUBMIT.column);
     this.setSortAscendingWithoutSortingData(false);
     Object.values(jobsCols).forEach(col => {
-      this.setColumnSortable(col.column, Boolean(col.sortable));
+      this.setColumnSortable(col.column, Boolean(col.sortableMap));
     });
   },
 
@@ -66,7 +66,7 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
     orderBy: {
       check: "Object",
       init: {
-        field: "submitted_at",
+        field: "submitted_at", // submitted_at|started_at|ended_at
         direction: "desc"
       }
     },
@@ -86,6 +86,17 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
   members: {
     __includeChildren: false,
 
+    // overridden
+    sortByColumn(columnIndex, ascending) {
+      const jobsCols = osparc.jobs.RunsTable.COLS;
+      const colInfo = Object.values(jobsCols).find(col => col.column === columnIndex);
+      this.setOrderBy({
+        field: colInfo.sortableMap,
+        direction: ascending ? "asc" : "desc"
+      })
+      this.base(arguments, columnIndex, ascending)
+    },
+
     // overridden
     _loadRowCount() {
       const offset = 0;

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

@@ -90,7 +90,8 @@ qx.Class.define("osparc.jobs.SubRunsTable", {
         id: "start",
         column: 6,
         label: qx.locale.Manager.tr("Started"),
-        width: 130
+        width: 130,
+        sortableMap: "started_at",
       },
       END: {
         id: "end",

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

@@ -30,7 +30,7 @@ qx.Class.define("osparc.jobs.SubRunsTableModel", {
     this.setSortColumnIndexWithoutSortingData(subJobsCols.START.column);
     this.setSortAscendingWithoutSortingData(false);
     Object.values(subJobsCols).forEach(col => {
-      this.setColumnSortable(col.column, false);
+      this.setColumnSortable(col.column, Boolean(col.sortableMap));
     });
 
     this.setProjectUuid(projectUuid);
@@ -47,12 +47,35 @@ qx.Class.define("osparc.jobs.SubRunsTableModel", {
       init: false,
       event: "changeFetching"
     },
+
+    orderBy: {
+      check: "Object",
+      init: {
+        field: "started_at", // started_at
+        direction: "desc"
+      }
+    },
+  },
+
+  statics: {
+    SERVER_MAX_LIMIT: 49,
   },
 
   members: {
+    // overridden
+    sortByColumn(columnIndex, ascending) {
+      const subJobsCols = osparc.jobs.SubRunsTable.COLS;
+      const colInfo = Object.values(subJobsCols).find(col => col.column === columnIndex);
+      this.setOrderBy({
+        field: colInfo.sortableMap,
+        direction: ascending ? "asc" : "desc"
+      })
+      this.base(arguments, columnIndex, ascending)
+    },
+
     // overridden
     _loadRowCount() {
-      osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid())
+      osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid(), this.getOrderBy())
         .then(subJobs => {
           this._onRowCountLoaded(subJobs.length)
         })
@@ -68,7 +91,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())
+        return osparc.store.Jobs.getInstance().fetchSubJobs(this.getProjectUuid(), this.getOrderBy())
           .then(subJobs => {
             const data = [];
             const subJobsCols = osparc.jobs.SubRunsTable.COLS;