Orange progress bar when allocated resources go over 80% (ITISFoundation#3014)

Author: odeimaiz

services/web/client/source/class/osparc/component/cluster/ClusterMiniView.js

@@ -153,7 +153,10 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
         if (resourceInfo.available === 0) {
           return;
         }
-        const icon = new qx.ui.basic.Image(resourceInfo.icon);
+        const relativeUsage = resourceInfo.used / resourceInfo.available;
+        const icon = new qx.ui.basic.Image(resourceInfo.icon).set({
+          textColor: relativeUsage > 0.8 ? "busy-orange" : "text"
+        });
         this._add(icon, {
           row: idx,
           column: 0
@@ -163,8 +166,9 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
           width: 60
         });
         osparc.utils.Utils.hideBorder(progressBar);
+        // orange > 80%
         progressBar.getChildControl("progress").set({
-          backgroundColor: "visual-blue"
+          backgroundColor: relativeUsage > 0.8 ? "busy-orange" : "ready-green"
         });
         this._add(progressBar, {
           row: idx,

services/web/client/source/class/osparc/component/cluster/ClusterWorkers.js

@@ -103,7 +103,7 @@ qx.Class.define("osparc.component.cluster.ClusterWorkers", {
             available = osparc.utils.Utils.bytesToGB(available);
           }
           if (qx.lang.Type.isNumber(available)) {
-            // red > 80%
+            // orange > 80%
             gaugeData.gauge.steps = [{
               range: [0.8*available, available],
               color: qx.theme.manager.Color.getInstance().resolve("busy-orange"),

services/web/client/source/class/osparc/component/cluster/ClustersDetails.js

@@ -92,13 +92,8 @@ qx.Class.define("osparc.component.cluster.ClustersDetails", {
       clusters.addListener("clusterDetailsReceived", e => {
         const data = e.getData();
         if (this.__clusterId === data.clusterId) {
-          if ("error" in data) {
-            this.__clusterStatus.setTextColor("failed-red");
-            this.__clusterWorkers.populateWorkersDetails(null);
-          } else {
-            this.__clusterStatus.setTextColor("ready-green");
-            this.__clusterWorkers.populateWorkersDetails(data.clusterDetails);
-          }
+          this.__clusterStatus.setTextColor("error" in data ? "failed-red" : "ready-green");
+          this.__clusterWorkers.populateWorkersDetails("error" in data ? null : data.clusterDetails);
         }
       });
       clusters.startFetchingDetails(this.__clusterId);