Skip to content

Commit

Permalink
🎨 Integrate Current usage into Credits indicator (ITISFoundation#4928)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 26, 2023
1 parent 4d27da3 commit 774e26b
Show file tree
Hide file tree
Showing 9 changed files with 135 additions and 74 deletions.
70 changes: 30 additions & 40 deletions services/static-webserver/client/source/class/osparc/desktop/credits/CurrentUsage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}
}
}
});
5 changes: 3 additions & 2 deletions services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Expand Down
59 changes: 55 additions & 4 deletions services/static-webserver/client/source/class/osparc/navigation/CreditsMenuButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down Expand Up @@ -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();
Expand All @@ -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 = "<span style='font-size:12px;display:inline-block'>CREDITS</span><br>";
let creditsLeftText = osparc.desktop.credits.Utils.creditsToFixed(creditsLeft);
if (used !== null) {
creditsLeftText += " / " + osparc.desktop.credits.Utils.creditsToFixed(used);
}
text += `<span>${creditsLeftText}</span>`;
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")
});
}
},
Expand Down
13 changes: 3 additions & 10 deletions services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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
Expand Down
36 changes: 22 additions & 14 deletions services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() || "[email protected]";
const icon = this.getChildControl("icon");
authData.bind("role", this, "icon", {
Expand Down Expand Up @@ -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)`
});
}
}
},

Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
});

Expand Down
3 changes: 1 addition & 2 deletions services/static-webserver/client/source/class/osparc/theme/mixin/Color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/ui/message/Loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
});
Expand Down
19 changes: 19 additions & 0 deletions services/static-webserver/client/source/class/osparc/utils/Utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 774e26b

Please sign in to comment.