Clusters: Requests and Fixes (ITISFoundation#2959)

Author: odeimaiz

services/web/client/source/class/osparc/auth/LoginPage.js

@@ -69,7 +69,7 @@ qx.Class.define("osparc.auth.LoginPage", {
       const image = new osparc.ui.basic.LogoWPlatform();
       image.setSize({
         width: 250,
-        height: 150
+        height: osparc.utils.Utils.isProduct("s4l") ? 100 : 150
       });
       image.setFont("text-18");
       return image;

services/web/client/source/class/osparc/auth/ui/LoginView.js

@@ -76,10 +76,11 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       this.add(pass);
       this.__form.add(pass, "", null, "password", null);
 
-      const loginBtn = this.__loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in"));
-      loginBtn.addListener("execute", () => {
-        this.__login();
-      }, this);
+      const loginBtn = this.__loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in")).set({
+        center: true,
+        appearance: "strong-button"
+      });
+      loginBtn.addListener("execute", () => this.__login(), this);
       osparc.utils.Utils.setIdToWidget(loginBtn, "loginSubmitBtn");
       this.add(loginBtn);
 
@@ -106,9 +107,7 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       }, this);
       osparc.utils.Utils.setIdToWidget(registerBtn, "loginCreateAccountBtn");
 
-      const forgotBtn = this.createLinkButton(this.tr("Forgot Password?"), () => {
-        this.fireEvent("toReset");
-      }, this);
+      const forgotBtn = this.createLinkButton(this.tr("Forgot Password?"), () => this.fireEvent("toReset"), this);
       osparc.utils.Utils.setIdToWidget(forgotBtn, "loginForgotPasswordBtn");
 
       [registerBtn, forgotBtn].forEach(btn => {

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

@@ -21,19 +21,13 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.VBox().set({
-      alignY: "middle"
-    }));
-
     const grid = new qx.ui.layout.Grid(2, 2);
-    const miniGrid = this.__miniGrid = new qx.ui.container.Composite(grid).set({
-      minWidth: 1
-    });
-    this._add(miniGrid);
+    this._setLayout(grid);
 
     this.__listenToClusterDetails();
 
     this.set({
+      allowGrowY: false,
       cursor: "pointer"
     });
     this.addListener("tap", () => osparc.utils.Clusters.popUpClustersDetails(this.__clusterId), this);
@@ -60,8 +54,6 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
 
   members: {
     __clusterId: null,
-    __clusterDetailsLayout: null,
-    __miniGrid: null,
     __hint: null,
 
     setClusterId: function(clusterId) {
@@ -91,8 +83,7 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
     },
 
     __showBulb: function(failed) {
-      const miniGrid = this.__miniGrid;
-      miniGrid.removeAll();
+      this._removeAll();
 
       const clusterStatusImage = new qx.ui.basic.Image().set({
         source: "@FontAwesome5Solid/lightbulb/16",
@@ -101,7 +92,7 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
         paddingLeft: 3,
         textColor: failed ? "failed-red" : "ready-green"
       });
-      miniGrid.add(clusterStatusImage, {
+      this._add(clusterStatusImage, {
         row: 0,
         column: 0
       });
@@ -113,8 +104,7 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
     },
 
     __updateWorkersDetails: function(clusterDetails) {
-      const miniGrid = this.__miniGrid;
-      miniGrid.removeAll();
+      this._removeAll();
 
       const workers = clusterDetails.scheduler.workers;
       if (Object.keys(workers).length === 0) {
@@ -126,20 +116,23 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
       const resources = {
         cpu: {
           metric: "cpu",
+          usedResource: "CPU",
           resource: "CPU",
           icon: "@FontAwesome5Solid/microchip/10",
           available: 0,
           used: 0
         },
         ram: {
           metric: "memory",
+          usedResource: "RAM",
           resource: "RAM",
           icon: "@MaterialIcons/memory/10",
           available: 0,
           used: 0
         },
         gpu: {
           metric: "gpu",
+          usedResource: "GPU",
           resource: "GPU",
           icon: "@FontAwesome5Solid/server/10",
           available: 0,
@@ -155,14 +148,13 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
     },
 
     __updateMiniView: function(resources) {
-      const miniGrid = this.__miniGrid;
       Object.keys(resources).forEach((resourceKey, idx) => {
         const resourceInfo = resources[resourceKey];
         if (resourceInfo.available === 0) {
           return;
         }
         const icon = new qx.ui.basic.Image(resourceInfo.icon);
-        miniGrid.add(icon, {
+        this._add(icon, {
           row: idx,
           column: 0
         });
@@ -174,7 +166,7 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
         progressBar.getChildControl("progress").set({
           backgroundColor: "visual-blue"
         });
-        miniGrid.add(progressBar, {
+        this._add(progressBar, {
           row: idx,
           column: 1
         });
@@ -189,9 +181,7 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
           return;
         }
         text += resourceInfo.resource + ": ";
-        if (resourceKey === "cpu") {
-          text += osparc.utils.Utils.toTwoDecimals(resourceInfo.used*resourceInfo.available/100) + " / " + resourceInfo.available;
-        } else if (resourceKey === "ram") {
+        if (resourceKey === "ram") {
           text += osparc.utils.Utils.bytesToGB(resourceInfo.used) + "GB / " + osparc.utils.Utils.bytesToGB(resourceInfo.available) + "GB";
         } else {
           text += resourceInfo.used + " / " + resourceInfo.available;