✨ Usage overview: request per wallet

services/static-webserver/client/source/class/osparc/component/resourceUsage/Overview.js

@@ -23,12 +23,26 @@ qx.Class.define("osparc.component.resourceUsage.Overview", {
 
     this._setLayout(new qx.ui.layout.VBox(15));
 
+    const walletSelector = this.getChildControl("wallet-selector");
+    walletSelector.exclude();
+    osparc.desktop.credits.Utils.areWalletsEnabled()
+      .then(walletsEnabled => {
+        if (walletsEnabled) {
+          walletSelector.show();
+        }
+      });
+
     const loadingImage = this.getChildControl("loading-image");
     loadingImage.show();
     const table = this.getChildControl("usage-table");
     table.exclude();
 
     this.__fetchData();
+    walletSelector.addListener("changeSelection", () => {
+      this.__prevRequestParams = null;
+      this.__nextRequestParams = null;
+      this.__fetchData();
+    });
   },
 
   statics: {
@@ -53,6 +67,21 @@ qx.Class.define("osparc.component.resourceUsage.Overview", {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "wallet-selector": {
+          control = osparc.desktop.credits.Utils.createWalletSelector("read", false, true).set({
+            allowGrowX: false
+          });
+          // select "All wallets" by default
+          control.getSelectables()[0].setLabel("All wallets");
+          const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+          const selectLabel = new qx.ui.basic.Label(this.tr("Select Wallet")).set({
+            alignY: "middle"
+          });
+          layout.add(selectLabel);
+          layout.add(control);
+          this._add(layout);
+          break;
+        }
         case "loading-image":
           control = new qx.ui.basic.Image().set({
             source: "@FontAwesome5Solid/circle-notch/64",
@@ -144,10 +173,7 @@ qx.Class.define("osparc.component.resourceUsage.Overview", {
         params.url.offset = osparc.utils.Utils.getParamFromURL(this.__prevRequestParams, "offset");
         params.url.limit = osparc.utils.Utils.getParamFromURL(this.__prevRequestParams, "limit");
       }
-      const options = {
-        resolveWResponse: true
-      };
-      return osparc.data.Resources.fetch("resourceUsage", "getPage", params, undefined, options);
+      return this.__getCommonRequest(params);
     },
 
     __getNextRequest: function() {
@@ -161,9 +187,20 @@ qx.Class.define("osparc.component.resourceUsage.Overview", {
         params.url.offset = osparc.utils.Utils.getParamFromURL(this.__nextRequestParams, "offset");
         params.url.limit = osparc.utils.Utils.getParamFromURL(this.__nextRequestParams, "limit");
       }
+      return this.__getCommonRequest(params);
+    },
+
+    __getCommonRequest: function(params) {
       const options = {
         resolveWResponse: true
       };
+
+      const walletSelector = this.getChildControl("wallet-selector");
+      let walletId = walletSelector.getSelection()[0].walletId;
+      if (walletId) {
+        params.url["walletId"] = walletId.toString();
+        return osparc.data.Resources.fetch("resourceUsagePerWallet", "getPage", params, undefined, options);
+      }
       return osparc.data.Resources.fetch("resourceUsage", "getPage", params, undefined, options);
     },
 

services/static-webserver/client/source/class/osparc/component/resourceUsage/OverviewTable.js

@@ -32,13 +32,8 @@ qx.Class.define("osparc.component.resourceUsage.OverviewTable", {
 
     const columnModel = this.getTableColumnModel();
     columnModel.getBehavior().setWidth(this.self().COLUMNS.duration.pos, 60);
-    columnModel.getBehavior().setWidth(this.self().COLUMNS.processors.pos, 80);
-    columnModel.getBehavior().setWidth(this.self().COLUMNS.coreHours.pos, 80);
     columnModel.getBehavior().setWidth(this.self().COLUMNS.status.pos, 70);
     columnModel.getBehavior().setWidth(this.self().COLUMNS.wallet.pos, 80);
-    columnModel.setDataCellRenderer(this.self().COLUMNS.duration.pos, new qx.ui.table.cellrenderer.Number());
-    columnModel.setDataCellRenderer(this.self().COLUMNS.processors.pos, new qx.ui.table.cellrenderer.Number());
-    columnModel.setDataCellRenderer(this.self().COLUMNS.coreHours.pos, new qx.ui.table.cellrenderer.Number());
   },
 
   statics: {
@@ -63,20 +58,12 @@ qx.Class.define("osparc.component.resourceUsage.OverviewTable", {
         pos: 4,
         title: "Duration"
       },
-      processors: {
-        pos: 5,
-        title: "Processors"
-      },
-      coreHours: {
-        pos: 6,
-        title: "Core Hours"
-      },
       status: {
-        pos: 7,
+        pos: 5,
         title: "Status"
       },
       wallet: {
-        pos: 8,
+        pos: 6,
         title: "Wallet"
       }
     }
@@ -91,19 +78,20 @@ qx.Class.define("osparc.component.resourceUsage.OverviewTable", {
         const cols = this.self().COLUMNS;
         datas.forEach(data => {
           const newData = [];
-          newData[cols["project"].pos] = data["project_name"] ? data["project_name"] : data["project_uuid"];
-          newData[cols["node"].pos] = data["node_label"] ? data["node_label"] : data["node_uuid"];
+          newData[cols["project"].pos] = data["project_name"] ? data["project_name"] : data["project_id"];
+          newData[cols["node"].pos] = data["node_name"] ? data["node_name"] : data["node_id"];
           if (data["service_key"]) {
             const parts = data["service_key"].split("/");
             const serviceName = parts.pop();
             newData[cols["service"].pos] = serviceName + ":" + data["service_version"];
           }
-          newData[cols["start"].pos] = osparc.utils.Utils.formatDateAndTime(new Date(data["start_time"]));
-          newData[cols["duration"].pos] = data["duration"];
-          newData[cols["processors"].pos] = data["processors"];
-          newData[cols["coreHours"].pos] = data["core_hours"];
-          newData[cols["status"].pos] = qx.lang.String.firstUp(data["status"]);
-          newData[cols["wallet"].pos] = data["wallet_label"] ? data["wallet_label"] : "Wallet ID?";
+          const startTime = new Date(data["started_at"]);
+          newData[cols["start"].pos] = osparc.utils.Utils.formatDateAndTime(startTime);
+          const stopTime = new Date(data["stopped_at"]);
+          const durationTimeSec = (stopTime - startTime)/1000;
+          newData[cols["duration"].pos] = durationTimeSec;
+          newData[cols["status"].pos] = qx.lang.String.firstUp(data["service_run_status"].toLowerCase());
+          newData[cols["wallet"].pos] = data["wallet_label"] ? data["wallet_label"] : "unknown";
           newDatas.push(newData);
         });
       }

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

@@ -214,11 +214,20 @@ qx.Class.define("osparc.data.Resources", {
         }
       },
       "resourceUsage": {
-        useCache: true,
+        useCache: false,
+        endpoints: {
+          getPage: {
+            method: "GET",
+            url: statics.API + "/resource-usage/services?offset={offset}&limit={limit}"
+          }
+        }
+      },
+      "resourceUsagePerWallet": {
+        useCache: false,
         endpoints: {
           getPage: {
             method: "GET",
-            url: statics.API + "/resource-usage/containers?offset={offset}&limit={limit}"
+            url: statics.API + "/resource-usage/services?wallet_id={walletId}&offset={offset}&limit={limit}"
           }
         }
       },