✨ Current Usage indicator (ITISFoundation#4868)

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

@@ -0,0 +1,93 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+     * Julian Querido (jsaq007)
+
+************************************************************************ */
+
+qx.Class.define("osparc.desktop.credits.CurrentUsage", {
+  extend: qx.core.Object,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.initUsedCredits();
+
+    const store = osparc.store.Store.getInstance();
+    store.addListener("changeCurrentStudy", e => this.__currentStudyChanged(e.getData()));
+  },
+
+  properties: {
+    usedCredits: {
+      check: "Number",
+      init: null,
+      nullable: true,
+      event: "changeUsedCredits"
+    }
+  },
+
+  statics: {
+    POLLING_INTERVAL: 10000
+  },
+
+  members: {
+    __interval: null,
+
+    __currentStudyChanged: function(currentStudy) {
+      if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
+        if (currentStudy) {
+          this.__startRequesting();
+        } else {
+          this.__stopRequesting();
+        }
+      }
+    },
+
+    __startRequesting: function() {
+      this.setUsedCredits(0);
+
+      this.__interval = setInterval(() => this.__fetchUsedCredits(), this.self().POLLING_INTERVAL);
+      this.__fetchUsedCredits();
+    },
+
+    __stopRequesting: function() {
+      this.setUsedCredits(null);
+
+      if (this.__interval) {
+        clearInterval(this.__interval);
+      }
+    },
+
+    __fetchUsedCredits: function() {
+      const params = {
+        url: {
+          offset: 0,
+          limit: 10
+        }
+      };
+      osparc.data.Resources.fetch("resourceUsage", "getPage", params)
+        .then(data => {
+          const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();
+          const currentTasks = data.filter(d => (d.project_id === currentStudy.getUuid()) && d.service_run_status === "RUNNING");
+          let cost = 0;
+          currentTasks.forEach(currentTask => {
+            if (currentTask["credit_cost"]) {
+              cost += currentTask["credit_cost"];
+            }
+          });
+          this.setUsedCredits(cost);
+        });
+    }
+  }
+});

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

@@ -0,0 +1,96 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+     * Julian Querido (jsaq007)
+
+************************************************************************ */
+
+qx.Class.define("osparc.desktop.credits.CurrentUsageIndicator", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(currentUsage) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.HBox(5));
+
+    this._createChildControlImpl("credits-label");
+
+    if (currentUsage) {
+      this.set({
+        currentUsage
+      });
+    }
+  },
+
+  properties: {
+    currentUsage: {
+      check: "osparc.desktop.credits.CurrentUsage",
+      init: null,
+      nullable: false,
+      apply: "__applyCurrentUsage"
+    }
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "credits-label":
+          control = new qx.ui.basic.Label().set({
+            font: "text-16"
+          });
+          this._add(control, {
+            flex: 1
+          });
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __animate: function() {
+      const desc = {
+        duration: 500,
+        timing: "ease-out",
+        keyFrames: {
+          0: {
+            "opacity": 1
+          },
+          70: {
+            "opacity": 0.8
+          },
+          100: {
+            "opacity": 1
+          }
+        }
+      };
+      const label = this.getChildControl("credits-label");
+      qx.bom.element.Animation.animate(label.getContentElement().getDomElement(), desc);
+    },
+
+    __applyCurrentUsage: function(currentUsage) {
+      currentUsage.bind("usedCredits", this, "visibility", {
+        converter: usedCredits => usedCredits === null ? "excluded" : "visible"
+      });
+      const label = this.getChildControl("credits-label");
+      currentUsage.bind("usedCredits", label, "value", {
+        converter: usedCredits => usedCredits + this.tr(" used")
+      });
+      currentUsage.addListener("changeUsedCredits", e => {
+        if (e.getData() !== null) {
+          setTimeout(() => this.__animate(), 100);
+        }
+      });
+    }
+  }
+});

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

@@ -179,7 +179,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
           });
           item.addListener("promoteToAdministrator", e => {
             const orgMember = e.getData();
-            this.__promoteToAdministator(orgMember);
+            this.__promoteToAdministrator(orgMember);
           });
           item.addListener("demoteToUser", e => {
             const clusterMember = e.getData();
@@ -428,7 +428,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
         });
     },
 
-    __promoteToAdministator: function(orgMember) {
+    __promoteToAdministrator: function(orgMember) {
       if (this.__currentOrg === null) {
         return;
       }

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -129,11 +129,9 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       this.getChildControl("read-only-info");
 
       // right-items
-      const walletsViewer = this.getChildControl("wallets-viewer");
-      walletsViewer.exclude();
-      const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();
-      if (walletsEnabled) {
-        walletsViewer.show();
+      if (osparc.desktop.credits.Utils.areWalletsEnabled()) {
+        this.getChildControl("current-usage-indicator");
+        this.getChildControl("wallets-viewer");
       }
       this.getChildControl("tasks-button");
       this.getChildControl("notifications-button");
@@ -225,6 +223,15 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           this.getChildControl("center-items").add(control);
           break;
         }
+        case "current-usage-indicator": {
+          const currentUsage = new osparc.desktop.credits.CurrentUsage();
+          control = new osparc.desktop.credits.CurrentUsageIndicator(currentUsage).set({
+            allowGrowY: false,
+            alignY: "middle"
+          });
+          this.getChildControl("right-items").add(control);
+          break;
+        }
         case "wallets-viewer":
           control = new osparc.desktop.credits.WalletsMiniViewer().set({
             maxHeight: this.self().HEIGHT