🎨 [Frontend] Filter Runs (#7728)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: odeimaiz

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

@@ -352,7 +352,7 @@ 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}"
+            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}"
           },
           getPageHistory: {
             method: "GET",

services/static-webserver/client/source/class/osparc/desktop/MainPage.js

@@ -69,7 +69,7 @@ qx.Class.define("osparc.desktop.MainPage", {
     preloadPromises.push(osparc.store.Tags.getInstance().fetchTags());
     preloadPromises.push(osparc.store.Products.getInstance().fetchUiConfig());
     preloadPromises.push(osparc.store.PollTasks.getInstance().fetchTasks());
-    preloadPromises.push(osparc.store.Jobs.getInstance().fetchJobsActive());
+    preloadPromises.push(osparc.store.Jobs.getInstance().fetchJobsLatest());
     Promise.all(preloadPromises)
       .then(() => {
         const mainStack = this.__createMainStack();

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

@@ -34,7 +34,7 @@ qx.Class.define("osparc.jobs.JobsButton", {
 
     const jobsStore = osparc.store.Jobs.getInstance();
     jobsStore.addListener("changeJobsActive", e => this.__updateJobsButton(e.getData()), this);
-    jobsStore.fetchJobsActive();
+    jobsStore.fetchJobsLatest();
   },
 
   members: {

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

@@ -57,6 +57,10 @@ qx.Class.define("osparc.jobs.RunsBrowser", {
             allowStretchX: true,
             margin: 0
           });
+          control.getChildControl("textfield").set({
+            placeholder: qx.locale.Manager.tr("Filter by name or ID"),
+          });
+          control.hide(); // @matusdrobuliak66: remove this when the backend is ready
           this.getChildControl("header-filter").add(control, {
             flex: 1
           });

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

@@ -75,6 +75,7 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
       nullable: true,
       check : "String",
       init: "",
+      apply: "reloadData",
     },
   },
 
@@ -95,7 +96,8 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
       if (this.getProjectUuid()) {
         promise = osparc.store.Jobs.getInstance().fetchJobsHistory(this.getProjectUuid(), this.__includeChildren, offset, limit, orderBy, resolveWResponse);
       } else {
-        promise = osparc.store.Jobs.getInstance().fetchJobsActive(this.getRunningOnly(), offset, limit, orderBy, resolveWResponse);
+        const filters = this.getFilterString() ? { text: this.getFilterString() } : null;
+        promise = osparc.store.Jobs.getInstance().fetchJobsLatest(this.getRunningOnly(), offset, limit, orderBy, filters, resolveWResponse);
       }
       promise
         .then(resp => {
@@ -118,7 +120,8 @@ qx.Class.define("osparc.jobs.RunsTableModel", {
         if (this.getProjectUuid()) {
           promise = osparc.store.Jobs.getInstance().fetchJobsHistory(this.getProjectUuid(), this.__includeChildren, offset, limit, orderBy);
         } else {
-          promise = osparc.store.Jobs.getInstance().fetchJobsActive(this.getRunningOnly(), offset, limit, orderBy);
+          const filters = this.getFilterString() ? { text: this.getFilterString() } : null;
+          promise = osparc.store.Jobs.getInstance().fetchJobsLatest(this.getRunningOnly(), offset, limit, orderBy, filters);
         }
         return promise
           .then(jobs => {

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

@@ -37,14 +37,15 @@ qx.Class.define("osparc.store.Jobs", {
   },
 
   members: {
-    fetchJobsActive: function(
+    fetchJobsLatest: function(
       runningOnly = true,
       offset = 0,
       limit = this.self().SERVER_MAX_LIMIT,
       orderBy = {
         field: "submitted_at",
         direction: "desc"
       },
+      filters = null,
       resolveWResponse = false
     ) {
       const params = {
@@ -53,6 +54,7 @@ qx.Class.define("osparc.store.Jobs", {
           offset,
           limit,
           orderBy: JSON.stringify(orderBy),
+          filters: JSON.stringify(filters ? filters : {}),
         }
       };
       const options = {