🎨 [Frontend] Expose tags in Usage table (#6961)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -85,7 +85,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
 
     filterText: function(checks, text) {
       if (text) {
-        const includesSome = checks.some(check => check.toLowerCase().trim().includes(text.toLowerCase()));
+        const includesSome = checks.some(check => check && check.toLowerCase().trim().includes(text.toLowerCase()));
         return !includesSome;
       }
       return false;

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

@@ -418,11 +418,11 @@ qx.Class.define("osparc.data.Resources", {
           },
           getWithWallet: {
             method: "GET",
-            url: statics.API + "/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}&filters={filters}&order_by={orderBy}"
+            url: statics.API + "/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}"
           },
-          getWithWallet2: {
+          getWithWalletFiltered: {
             method: "GET",
-            url: statics.API + "/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}"
+            url: statics.API + "/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}&filters={filters}&order_by={orderBy}"
           },
           getUsagePerService: {
             method: "GET",

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

@@ -66,7 +66,7 @@ qx.Class.define("osparc.desktop.credits.CurrentUsage", {
             limit: 10
           }
         };
-        osparc.data.Resources.fetch("resourceUsage", "getWithWallet2", params)
+        osparc.data.Resources.fetch("resourceUsage", "getWithWallet", params)
           .then(data => {
             const currentTasks = data.filter(d => (d.project_id === currentStudy.getUuid()) && d.service_run_status === "RUNNING");
             let cost = 0;

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

@@ -114,7 +114,13 @@ qx.Class.define("osparc.desktop.credits.UsageTable", {
         column: 7,
         label: qx.locale.Manager.tr("User"),
         width: 140
-      }
+      },
+      TAGS: {
+        id: "tags",
+        column: 7,
+        label: qx.locale.Manager.tr("Tags"),
+        width: 140
+      },
     }
   }
 });

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

@@ -60,7 +60,8 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
       // 4: (not used) SORTING BY DURATION
       5: "service_run_status",
       6: "credit_cost",
-      7: "user_email"
+      7: "user_email",
+      8: "projects_tags",
     }
   },
 
@@ -76,7 +77,7 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
 
     // overridden
     _loadRowCount() {
-      const endpoint = this.getWalletId() == null ? "get" : "getWithWallet"
+      const endpoint = this.getWalletId() == null ? "get" : "getWithWalletFiltered"
       const params = {
         url: {
           walletId: this.getWalletId(),
@@ -109,7 +110,7 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
       const lastRow = Math.min(qxLastRow, this._rowCount - 1)
       // Returns a request promise with given offset and limit
       const getFetchPromise = (offset, limit=this.self().SERVER_MAX_LIMIT) => {
-        const endpoint = this.getWalletId() == null ? "get" : "getWithWallet"
+        const endpoint = this.getWalletId() == null ? "get" : "getWithWalletFiltered"
         return osparc.data.Resources.fetch("resourceUsage", endpoint, {
           url: {
             walletId: this.getWalletId(),
@@ -149,7 +150,8 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
                 [usageCols.DURATION.id]: duration,
                 [usageCols.STATUS.id]: qx.lang.String.firstUp(rawRow["service_run_status"].toLowerCase()),
                 [usageCols.COST.id]: rawRow["credit_cost"] ? parseFloat(rawRow["credit_cost"]).toFixed(2) : "",
-                [usageCols.USER.id]: rawRow["user_email"]
+                [usageCols.USER.id]: rawRow["user_email"],
+                [usageCols.TAGS.id]: rawRow["project_tags"],
               })
             })
             return data

services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js

@@ -296,7 +296,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
                     const found = this.__anatomicalModels.find(model => model["modelId"] === modelId);
                     if (found) {
                       found["purchases"].push(purchaseData);
-                      this.__populateModels();
+                      this.__populateModels(modelId);
                       anatomicModelDetails.setAnatomicalModelsData(found);
                     }
                   })
@@ -317,7 +317,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
         .catch(err => console.error(err));
     },
 
-    __populateModels: function() {
+    __populateModels: function(selectModelId) {
       const models = this.__anatomicalModels;
 
       this.__anatomicalModelsModel.removeAll();
@@ -358,6 +358,18 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
         sortModel(sortBy);
         models.forEach(model => this.__anatomicalModelsModel.append(qx.data.marshal.Json.createModel(model)));
       }, this);
+
+      // select model after timeout, there is something that changes the selection to empty after populating the list
+      setTimeout(() => {
+        const modelsUIList = this.getChildControl("models-list");
+        if (selectModelId) {
+          const entryFound = modelsUIList.getSelectables().find(entry => "getModelId" in entry && entry.getModelId() === selectModelId);
+          modelsUIList.setSelection([entryFound]);
+        } else if (modelsUIList.getSelectables().length) {
+          // select first
+          modelsUIList.setSelection([modelsUIList.getSelectables()[0]]);
+        }
+      }, 100);
     },
 
     __sendImportModelMessage: function(modelId) {