Show pruchases

Author: odeimaiz

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

@@ -22,22 +22,15 @@ qx.Class.define("osparc.desktop.credits.Rentals", {
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.VBox(15));
-
-    const store = osparc.store.Store.getInstance();
-    this.__userWallets = store.getWallets();
+    this._setLayout(new qx.ui.layout.VBox(5));
 
     this.__buildLayout()
   },
 
   members: {
     __buildLayout: function() {
-      this._removeAll();
-
-      const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
-
-      const lbl = new qx.ui.basic.Label("Select a Credit Account:");
-      container.add(lbl);
+      const lbl = new qx.ui.basic.Label(this.tr("Select a Credit Account:"));
+      this._add(lbl);
 
       const selectBoxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
       const walletSelectBox = new qx.ui.form.SelectBox().set({
@@ -53,7 +46,7 @@ qx.Class.define("osparc.desktop.credits.Rentals", {
       });
       this.__fetchingImg.getContentElement().addClass("rotate");
       selectBoxContainer.add(this.__fetchingImg);
-      container.add(selectBoxContainer);
+      this._add(selectBoxContainer);
 
       const filterContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5))
       this.__dateFilters = new osparc.desktop.credits.DateFilters();
@@ -62,26 +55,13 @@ qx.Class.define("osparc.desktop.credits.Rentals", {
         this.__table.getTableModel().reloadData()
       });
       filterContainer.add(this.__dateFilters);
-      filterContainer.add(new qx.ui.core.Spacer(), {
-        flex: 1
-      });
-      this.__exportButton = new qx.ui.form.Button(this.tr("Export")).set({
-        allowStretchY: false,
-        alignY: "bottom"
-      });
-      this.__exportButton.addListener("execute", () => {
-        this.__handleExport()
-      });
-      filterContainer.add(this.__exportButton);
       const refreshButton = new qx.ui.form.Button(this.tr("Reload"), "@FontAwesome5Solid/sync-alt/14").set({
         allowStretchY: false,
         alignY: "bottom"
       });
       refreshButton.addListener("execute", () => this.__table && this.__table.getTableModel().reloadData());
       filterContainer.add(refreshButton)
-      container.add(filterContainer);
-
-      this._add(container);
+      this._add(filterContainer);
 
       walletSelectBox.addListener("changeSelection", e => {
         const selection = e.getData();
@@ -98,33 +78,27 @@ qx.Class.define("osparc.desktop.credits.Rentals", {
             this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
               converter: isFetching => isFetching ? "visible" : "excluded"
             })
-            container.add(this.__table, { flex: 1 })
+            this._add(this.__table, { flex: 1 })
           }
         }
       });
 
       if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
-        this.__userWallets.forEach(wallet => {
+        const store = osparc.store.Store.getInstance();
+        store.getWallets().forEach(wallet => {
           walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet));
         });
       } else {
         lbl.setVisibility("excluded")
         walletSelectBox.setVisibility("excluded")
-        this.__exportButton.setVisibility("excluded")
         this.__table = new osparc.desktop.credits.RentalsTable(null, this.__dateFilters.getValue()).set({
           marginTop: 10
         })
         this.__table.getTableModel().bind("isFetching", this.__fetchingImg, "visibility", {
           converter: isFetching => isFetching ? "visible" : "excluded"
         })
-        container.add(this.__table, { flex: 1 })
+        this._add(this.__table, { flex: 1 })
       }
     },
-    __handleExport() {
-      const reportUrl = new URL("/v0/services/-/rentals-report", window.location.origin)
-      reportUrl.searchParams.append("wallet_id", this.__selectedWallet.getWalletId())
-      reportUrl.searchParams.append("filters", JSON.stringify({ "started_at": this.__dateFilters.getValue() }))
-      window.open(reportUrl, "_blank")
-    }
   }
 });

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

@@ -20,106 +20,74 @@ qx.Class.define("osparc.desktop.credits.RentalsTable", {
   extend: qx.ui.table.Table,
 
   construct: function(walletId, filters) {
-    this.base(arguments)
-    const model = new osparc.desktop.credits.RentalsTableModel(walletId, filters)
-    this.setTableModel(model)
-    this.setStatusBarVisible(false)
+    this.base(arguments);
 
-    this.setHeaderCellHeight(26);
-    this.setRowHeight(26);
+    const model = new osparc.desktop.credits.RentalsTableModel(walletId, filters);
+    this.setTableModel(model);
 
-    const columnModel = this.getTableColumnModel();
+    this.set({
+      statusBarVisible: false,
+      headerCellHeight: 26,
+      rowHeight: 26,
+    });
 
+    const columnModel = this.getTableColumnModel();
+    columnModel.setColumnVisible(this.self().COLS.PURCHASE_ID.column, false);
+    columnModel.setColumnVisible(this.self().COLS.ITEM_ID.column, false);
     columnModel.setDataCellRenderer(this.self().COLS.COST.column, new qx.ui.table.cellrenderer.Number());
 
-    if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
-      columnModel.setColumnVisible(this.self().COLS.COST.column, false);
-      columnModel.setColumnVisible(this.self().COLS.USER.column, false);
-    }
-    columnModel.setColumnVisible(this.self().COLS.SERVICE.column, false);
-
-    // Array [0, 1, ..., N] where N is column_count - 1 (default column order)
-    this.__columnOrder = [...Array(columnModel.getOverallColumnCount()).keys()]
-
-    if (
-      osparc.Preferences.getInstance().getBillingCenterRentalsColumnOrder() &&
-      osparc.Preferences.getInstance().getBillingCenterRentalsColumnOrder().length === this.__columnOrder.length
-    ) {
-      columnModel.setColumnsOrder(osparc.Preferences.getInstance().getBillingCenterRentalsColumnOrder())
-      this.__columnOrder = osparc.Preferences.getInstance().getBillingCenterRentalsColumnOrder()
-    } else {
-      osparc.Preferences.getInstance().setBillingCenterRentalsColumnOrder(this.__columnOrder)
-    }
-
-    columnModel.addListener("orderChanged", e => {
-      // Save new order into preferences
-      if (e.getData()) {
-        const { fromOverXPos, toOverXPos } = e.getData()
-        // Edit current order
-        this.__columnOrder = this.__columnOrder.toSpliced(toOverXPos, 0, this.__columnOrder.splice(fromOverXPos, 1)[0])
-        // Save order
-        osparc.Preferences.getInstance().setBillingCenterRentalsColumnOrder(this.__columnOrder)
-      }
-    }, this)
-
     Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
   },
 
   statics: {
     COLS: {
-      PROJECT: {
-        id: "project",
+      PURCHASE_ID: {
+        id: "purchaseId",
         column: 0,
-        label: osparc.product.Utils.getStudyAlias({firstUpperCase: true}),
-        width: 140
+        label: qx.locale.Manager.tr("PurchaseId"),
+        width: 150
       },
-      NODE: {
-        id: "node",
+      ITEM_ID: {
+        id: "itemId",
         column: 1,
-        label: qx.locale.Manager.tr("Node"),
-        width: 140
+        label: qx.locale.Manager.tr("ItemId"),
+        width: 150
       },
-      SERVICE: {
-        id: "service",
+      ITEM_LABEL: {
+        id: "itemLabel",
         column: 2,
-        label: qx.locale.Manager.tr("Service"),
-        width: 140
+        label: qx.locale.Manager.tr("Name"),
+        width: 150
       },
       START: {
         id: "start",
         column: 3,
         label: qx.locale.Manager.tr("Start"),
-        width: 130
+        width: 150
       },
-      DURATION: {
-        id: "duration",
+      END: {
+        id: "end",
         column: 4,
-        label: qx.locale.Manager.tr("Duration"),
-        width: 70
+        label: qx.locale.Manager.tr("End"),
+        width: 150
       },
-      STATUS: {
-        id: "status",
+      SEATS: {
+        id: "seats",
         column: 5,
-        label: qx.locale.Manager.tr("Status"),
-        width: 70
+        label: qx.locale.Manager.tr("Seats"),
+        width: 50
       },
       COST: {
         id: "cost",
         column: 6,
         label: qx.locale.Manager.tr("Credits"),
-        width: 56
+        width: 60
       },
       USER: {
         id: "user",
         column: 7,
         label: qx.locale.Manager.tr("User"),
-        width: 140
-      },
-      TAGS: {
-        id: "tags",
-        column: 7,
-        label: qx.locale.Manager.tr("Tags"),
-        width: 140
+        width: 100
       },
     }
   }

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

@@ -32,8 +32,7 @@ qx.Class.define("osparc.desktop.credits.RentalsTableModel", {
       this.setFilters(filters)
     }
     this.setSortColumnIndexWithoutSortingData(rentalsCols.START.column);
-    this.setSortAscendingWithoutSortingData(false)
-    this.setColumnSortable(rentalsCols.DURATION.column, false);
+    this.setSortAscendingWithoutSortingData(false);
   },
 
   properties: {
@@ -61,17 +60,22 @@ qx.Class.define("osparc.desktop.credits.RentalsTableModel", {
 
   statics: {
     SERVER_MAX_LIMIT: 49,
+    COLUMN_ID_TO_DB_COLUMN_MAP: Object.values(osparc.desktop.credits.RentalsTable.COLS).reduce((acc, { id, column }) => {
+      acc[column] = id;
+      return acc;
+    }, {}),
+    /*
     COLUMN_ID_TO_DB_COLUMN_MAP: {
-      0: "root_parent_project_name",
-      1: "node_name",
-      2: "service_key",
-      3: "started_at",
-      // 4: (not used) SORTING BY DURATION
-      5: "service_run_status",
-      6: "credit_cost",
-      7: "user_email",
-      8: "projects_tags",
-    }
+      0: "purchaseId",
+      1: "itemId",
+      2: "itemLabel",
+      3: "start",
+      4: "duration",
+      5: "seats",
+      6: "cost",
+      7: "user",
+    },
+    */
   },
 
   members: {
@@ -86,7 +90,6 @@ qx.Class.define("osparc.desktop.credits.RentalsTableModel", {
 
     // overridden
     _loadRowCount() {
-      const endpoint = this.getWalletId() == null ? "get" : "getWithWalletFiltered"
       const params = {
         url: {
           walletId: this.getWalletId(),
@@ -103,24 +106,23 @@ qx.Class.define("osparc.desktop.credits.RentalsTableModel", {
       const options = {
         resolveWResponse: true
       };
-      osparc.data.Resources.fetch("resourceRentals", endpoint, params, options)
+      osparc.data.Resources.fetch("wallets", "purchases", params, options)
         .then(resp => {
           this._onRowCountLoaded(resp["_meta"].total)
         })
         .catch(() => {
           this._onRowCountLoaded(null)
-        })
+        });
     },
 
     // overridden
     _loadRowData(firstRow, qxLastRow) {
-      this.setIsFetching(true)
-      // Please Qloocloox don't ask for more rows than there are
+      this.setIsFetching(true);
+
       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" : "getWithWalletFiltered"
-        return osparc.data.Resources.fetch("resourceRentals", endpoint, {
+        return osparc.data.Resources.fetch("wallets", "purchases", {
           url: {
             walletId: this.getWalletId(),
             limit,
@@ -137,38 +139,24 @@ qx.Class.define("osparc.desktop.credits.RentalsTableModel", {
             const data = []
             const rentalsCols = osparc.desktop.credits.RentalsTable.COLS;
             rawData.forEach(rawRow => {
-              let service = ""
-              if (rawRow["service_key"]) {
-                const serviceName = rawRow["service_key"].split("/").pop()
-                service = `${serviceName}:${rawRow["service_version"]}`
-              }
-              let start = ""
-              let duration = ""
-              if (rawRow["started_at"]) {
-                start = osparc.utils.Utils.formatDateAndTime(new Date(rawRow["started_at"]))
-                if (rawRow["stopped_at"]) {
-                  duration = osparc.utils.Utils.formatMsToHHMMSS(new Date(rawRow["stopped_at"]) - new Date(rawRow["started_at"]))
-                }
-              }
               data.push({
-                // root_parent_project is the same as project if it has no parent
-                [rentalsCols.PROJECT.id]: rawRow["root_parent_project_name"] || rawRow["root_parent_project_id"] || rawRow["project_name"] || rawRow["project_id"],
-                [rentalsCols.NODE.id]: rawRow["node_name"] || rawRow["node_id"],
-                [rentalsCols.SERVICE.id]: service,
-                [rentalsCols.START.id]: start,
-                [rentalsCols.DURATION.id]: duration,
-                [rentalsCols.STATUS.id]: qx.lang.String.firstUp(rawRow["service_run_status"].toLowerCase()),
-                [rentalsCols.COST.id]: rawRow["credit_cost"] ? parseFloat(rawRow["credit_cost"]).toFixed(2) : "",
-                [rentalsCols.USER.id]: rawRow["user_email"],
-                [rentalsCols.TAGS.id]: rawRow["project_tags"],
+                [rentalsCols.PURCHASE_ID.id]: rawRow["licensedItemPurchaseId"],
+                [rentalsCols.ITEM_ID.id]: rawRow["licensedItemId"],
+                [rentalsCols.ITEM_LABEL.id]: "Hello",
+                [rentalsCols.START.id]: osparc.utils.Utils.formatDateAndTime(new Date(rawRow["startAt"])),
+                [rentalsCols.END.id]: osparc.utils.Utils.formatDateAndTime(new Date(rawRow["expireAt"])),
+                [rentalsCols.SEATS.id]: rawRow["numOfSeats"],
+                [rentalsCols.COST.id]: rawRow["pricingUnitCost"] ? parseFloat(rawRow["pricingUnitCost"]).toFixed(2) : "",
+                [rentalsCols.USER.id]: rawRow["purchasedByUser"],
               })
             })
-            return data
-          })
-      }
+            return data;
+          });
+      };
+
       // Divides the model row request into several server requests to comply with the number of rows server limit
-      const reqLimit = lastRow - firstRow + 1 // Number of requested rows
-      const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT)
+      const reqLimit = lastRow - firstRow + 1; // Number of requested rows
+      const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT);
       if (nRequests > 1) {
         let requests = []
         for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {