From 774e26bfcb3603057a9f5eed677676e42b74c0bd Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:54:47 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Integrate=20Current=20usage=20in?= =?UTF-8?q?to=20Credits=20indicator=20(#4928)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../osparc/desktop/credits/CurrentUsage.js | 70 ++++++++----------- .../class/osparc/desktop/credits/Utils.js | 5 +- .../osparc/navigation/CreditsMenuButton.js | 59 ++++++++++++++-- .../class/osparc/navigation/NavigationBar.js | 13 +--- .../class/osparc/navigation/UserMenuButton.js | 36 ++++++---- .../notification/RibbonNotifications.js | 2 +- .../source/class/osparc/theme/mixin/Color.js | 3 +- .../source/class/osparc/ui/message/Loading.js | 2 +- .../client/source/class/osparc/utils/Utils.js | 19 +++++ 9 files changed, 135 insertions(+), 74 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CurrentUsage.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CurrentUsage.js index ad7360b40ea..243922015d1 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CurrentUsage.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CurrentUsage.js @@ -37,57 +37,47 @@ qx.Class.define("osparc.desktop.credits.CurrentUsage", { } }, - statics: { - POLLING_INTERVAL: 10000 - }, - members: { - __interval: null, - __currentStudyChanged: function(currentStudy) { if (osparc.desktop.credits.Utils.areWalletsEnabled()) { if (currentStudy) { - this.__startRequesting(); + const store = osparc.store.Store.getInstance(); + const contextWallet = store.getContextWallet(); + if (contextWallet) { + this.__fetchUsedCredits(); + contextWallet.addListener("changeCreditsAvailable", () => this.__fetchUsedCredits()); + } } else { - this.__stopRequesting(); + this.setUsedCredits(null); } } }, - __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"]; - } + const store = osparc.store.Store.getInstance(); + const currentStudy = store.getCurrentStudy(); + const contextWallet = store.getContextWallet(); + if (currentStudy && contextWallet) { + const walletId = contextWallet.getWalletId(); + const params = { + url: { + walletId, + offset: 0, + limit: 10 + } + }; + osparc.data.Resources.fetch("resourceUsagePerWallet", "getPage", params) + .then(data => { + 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); }); - this.setUsedCredits(cost); - }); + } } } }); diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js b/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js index 693eb6e6c1a..bb184469035 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js @@ -43,7 +43,8 @@ qx.Class.define("osparc.desktop.credits.Utils", { creditsToColor: function(credits, defaultColor = "text") { const preferencesSettings = osparc.Preferences.getInstance(); let color = defaultColor; - if (credits <= 0) { + const dangerZone = 25; // one hour consumption + if (credits <= dangerZone) { color = "danger-red"; } else if (credits <= preferencesSettings.getCreditsWarningThreshold()) { color = "warning-yellow"; @@ -60,7 +61,7 @@ qx.Class.define("osparc.desktop.credits.Utils", { }, creditsToFixed: function(credits) { - if (credits < 100) { + if (credits < 10) { return (credits).toFixed(1); } return parseInt(credits); diff --git a/services/static-webserver/client/source/class/osparc/navigation/CreditsMenuButton.js b/services/static-webserver/client/source/class/osparc/navigation/CreditsMenuButton.js index 93c7de9730a..2a8b5a40b55 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/CreditsMenuButton.js +++ b/services/static-webserver/client/source/class/osparc/navigation/CreditsMenuButton.js @@ -27,9 +27,19 @@ qx.Class.define("osparc.navigation.CreditsMenuButton", { this.set({ font: "text-16", - backgroundColor: "transparent" + padding: 1, + paddingLeft: 8, + paddingRight: 8, + marginTop: 4, + marginBottom: 4, + rich: true }); + this.getChildControl("label").set({ + textAlign: "right" + }); + this.getContentElement().setStyle("line-height", 1.2); + const preferencesSettings = osparc.Preferences.getInstance(); this.__computeVisibility(); preferencesSettings.addListener("changeWalletIndicatorVisibility", () => this.__computeVisibility()); @@ -60,7 +70,25 @@ qx.Class.define("osparc.navigation.CreditsMenuButton", { osparc.utils.Utils.prettifyMenu(menu); }, + properties: { + currentUsage: { + check: "osparc.desktop.credits.CurrentUsage", + init: null, + nullable: true, + apply: "__applyCurrentUsage" + } + }, + members: { + __applyCurrentUsage: function(currentUsage) { + if (currentUsage) { + currentUsage.addListener("changeUsedCredits", () => { + this.__updateCredits(); + this.__animate(); + }); + } + }, + __contextWalletChanged: function() { const store = osparc.store.Store.getInstance(); const wallet = store.getContextWallet(); @@ -70,14 +98,37 @@ qx.Class.define("osparc.navigation.CreditsMenuButton", { } }, + __animate: function() { + const label = this.getChildControl("label"); + osparc.utils.Utils.animateUsage(label.getContentElement().getDomElement()); + }, + __updateCredits: function() { const store = osparc.store.Store.getInstance(); const wallet = store.getContextWallet(); if (wallet) { - const credits = wallet.getCreditsAvailable(); + let text = "-"; + const currentUsage = this.getCurrentUsage(); + let used = null; + if (currentUsage) { + used = currentUsage.getUsedCredits(); + } + const creditsLeft = wallet.getCreditsAvailable(); + if (creditsLeft !== null) { + text = "CREDITS
"; + let creditsLeftText = osparc.desktop.credits.Utils.creditsToFixed(creditsLeft); + if (used !== null) { + creditsLeftText += " / " + osparc.desktop.credits.Utils.creditsToFixed(used); + } + text += `${creditsLeftText}`; + this.set({ + minWidth: used ? 90 : null, + width: used ? 90 : null + }); + } this.set({ - label: credits === null ? "-" : osparc.desktop.credits.Utils.creditsToFixed(credits) + this.tr(" credits"), - textColor: osparc.desktop.credits.Utils.creditsToColor(credits, "text") + label: text, + textColor: osparc.desktop.credits.Utils.creditsToColor(creditsLeft, "text") }); } }, diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index 3e12a54727d..3c62ba3bca3 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -132,7 +132,6 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("expiration-icon"); this.getChildControl("help"); if (osparc.desktop.credits.Utils.areWalletsEnabled()) { - this.getChildControl("current-usage-indicator"); this.getChildControl("credits-menu-button"); } this.getChildControl("log-in-button"); @@ -227,21 +226,15 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("center-items").add(control); break; } - case "current-usage-indicator": { + case "credits-menu-button": { 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 "credits-menu-button": control = new osparc.navigation.CreditsMenuButton().set({ + currentUsage, maxHeight: this.self().HEIGHT }); this.getChildControl("right-items").add(control); break; + } case "wallets-viewer": control = new osparc.desktop.credits.WalletsMiniViewer().set({ maxHeight: this.self().HEIGHT diff --git a/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js b/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js index 0553a29f42d..27060fc80b4 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js +++ b/services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js @@ -48,6 +48,9 @@ qx.Class.define("osparc.navigation.UserMenuButton", { this.__bindWalletToHalo(); store.addListener("changeContextWallet", () => this.__bindWalletToHalo()); + const preferencesSettings = osparc.Preferences.getInstance(); + preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHalloCredits()); + const userEmail = authData.getEmail() || "bizzy@itis.ethz.ch"; const icon = this.getChildControl("icon"); authData.bind("role", this, "icon", { @@ -78,23 +81,28 @@ qx.Class.define("osparc.navigation.UserMenuButton", { const store = osparc.store.Store.getInstance(); const contextWallet = store.getContextWallet(); if (contextWallet) { - this.__updateHalloCredits(contextWallet.getCreditsAvailable()); - contextWallet.addListener("changeCreditsAvailable", e => this.__updateHalloCredits(e.getData())); + this.__updateHalloCredits(); + contextWallet.addListener("changeCreditsAvailable", () => this.__updateHalloCredits()); } }, - __updateHalloCredits: function(credits) { - if (credits !== null) { - const progress = osparc.desktop.credits.Utils.normalizeCredits(credits); - const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main"); - const color1 = qx.theme.manager.Color.getInstance().resolve(creditsColor); - const textColor = qx.theme.manager.Color.getInstance().resolve("text"); - const arr = qx.util.ColorUtil.stringToRgb(textColor); - arr[3] = 0.5; - const color2 = qx.util.ColorUtil.rgbToRgbString(arr); - this.getContentElement().setStyles({ - "background": `radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(${color1} ${progress}%, ${color2} 0)` - }); + __updateHalloCredits: function() { + const store = osparc.store.Store.getInstance(); + const contextWallet = store.getContextWallet(); + if (contextWallet) { + const credits = contextWallet.getCreditsAvailable(); + if (credits !== null) { + const progress = osparc.desktop.credits.Utils.normalizeCredits(credits); + const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main"); + const color1 = qx.theme.manager.Color.getInstance().resolve(creditsColor); + const textColor = qx.theme.manager.Color.getInstance().resolve("text"); + const arr = qx.util.ColorUtil.stringToRgb(textColor); + arr[3] = 0.5; + const color2 = qx.util.ColorUtil.rgbToRgbString(arr); + this.getContentElement().setStyles({ + "background": `radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(${color1} ${progress}%, ${color2} 0)` + }); + } } }, diff --git a/services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js b/services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js index 2565793f42d..1cbe3b5f7ea 100644 --- a/services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js +++ b/services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js @@ -61,7 +61,7 @@ qx.Class.define("osparc.notification.RibbonNotifications", { */ __createNotificationUI: function(notification) { const notificationLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, "center")).set({ - backgroundColor: notification.getType() === "announcement" ? "strong-main" : "warning-yellow-s4l", + backgroundColor: notification.getType() === "announcement" ? "strong-main" : "warning-yellow", allowGrowX: true }); diff --git a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js b/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js index f9aead7fab1..7605fa71f95 100644 --- a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js +++ b/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js @@ -4,8 +4,7 @@ qx.Theme.define("osparc.theme.mixin.Color", { "activitytree-background-memory": "#358475", "ready-green": "#58A6FF", // It is not really green because of reasons - "warning-yellow": "#FFFF00", - "warning-yellow-s4l": "#f8db1f", + "warning-yellow": "#f8db1f", "busy-orange": "#FFA500", "failed-red": "#FF2D2D", "danger-red": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.danger", 40), diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index 52cb6104c7f..7e3cf10c688 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -131,7 +131,7 @@ qx.Class.define("osparc.ui.message.Loading", { padding: 15, gap: 20, icon: "@FontAwesome5Solid/exclamation-triangle/20", - backgroundColor: "warning-yellow-s4l", + backgroundColor: "warning-yellow", textColor: "black", alignX: "center" }); diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 711c8ebeea1..c1f09370581 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/services/static-webserver/client/source/class/osparc/utils/Utils.js @@ -106,6 +106,25 @@ qx.Class.define("osparc.utils.Utils", { return defaultFont; }, + animateUsage: function(domElement) { + const desc = { + duration: 500, + timing: "ease-out", + keyFrames: { + 0: { + "opacity": 1 + }, + 70: { + "opacity": 0.8 + }, + 100: { + "opacity": 1 + } + } + }; + qx.bom.element.Animation.animate(domElement, desc); + }, + prettifyMenu: function(menu) { menu.set({ font: "text-14",