diff --git a/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js b/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js index d844cfcd5e9..496b94079cb 100644 --- a/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js +++ b/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js @@ -74,7 +74,6 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", { allowShrinkY: false, allowGrowX: true, allowGrowY: false, - toolTipText: this.tr("Disk usage") }); this._add(control) break; @@ -156,10 +155,23 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", { return; } - const usage = diskUsage["usage"]["HOST"] - const color1 = this.__getIndicatorColor(usage.free); - const progress = `${usage["used_percent"]}%`; - const labelDiskSize = osparc.utils.Utils.bytesToSize(usage.free); + const diskHostUsage = diskUsage["usage"]["HOST"] + let color1 = this.__getIndicatorColor(diskHostUsage.free); + let progress = `${diskHostUsage["used_percent"]}%`; + let labelDiskSize = osparc.utils.Utils.bytesToSize(diskHostUsage.free); + let toolTipText = this.tr("Disk usage"); + if ("STATE_VOLUMES" in diskUsage["usage"]) { + const diskVolsUsage = diskUsage["usage"]["STATE_VOLUMES"]; + if (diskVolsUsage["used_percent"] > diskHostUsage["used_percent"]) { + // "STATE_VOLUMES" is more critical so it takes over + color1 = this.__getIndicatorColor(diskVolsUsage.free); + progress = `${diskVolsUsage["used_percent"]}%`; + labelDiskSize = osparc.utils.Utils.bytesToSize(diskVolsUsage.free); + } + toolTipText = this.tr("Disk usage") + "
"; + toolTipText += this.tr("Data storage: ") + osparc.utils.Utils.bytesToSize(diskVolsUsage.free) + "
"; + toolTipText += this.tr("I/O storage: ") + osparc.utils.Utils.bytesToSize(diskHostUsage.free) + "
"; + } const bgColor = qx.theme.manager.Color.getInstance().resolve("tab_navigation_bar_background_color"); const color2 = qx.theme.manager.Color.getInstance().resolve("progressive-progressbar-background"); indicator.getContentElement().setStyles({ @@ -167,6 +179,9 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", { "background": `linear-gradient(90deg, ${color1} ${progress}, ${color2} ${progress})`, "border-color": color1 }); + indicator.set({ + toolTipText + }); const indicatorLabel = this.getChildControl("disk-indicator-label"); indicatorLabel.setValue(`${labelDiskSize} Free`);