Cluster resource details II (#2925)

ITISFoundation · Mar 29, 2022 · 5f6c8d3 · 5f6c8d3
1 parent ad7b6e0
commit 5f6c8d3
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 90 deletions.
diff --git a/services/web/client/source/class/osparc/component/cluster/ClusterDetails.js b/services/web/client/source/class/osparc/component/cluster/ClusterDetails.js
@@ -27,17 +27,14 @@ qx.Class.define("osparc.component.cluster.ClusterDetails", {
     this._add(clusterDetailsLayout);
 
     const grid = new qx.ui.layout.Grid(5, 8);
-    grid.setColumnFlex(1, 1);
+    for (let i=0; i<Object.keys(this.self().GRID_POS).length; i++) {
+      grid.setColumnFlex(i, 1);
+    }
     const workersGrid = this.__workersGrid = new qx.ui.container.Composite(grid);
     this._add(workersGrid);
 
     this.__clusterId = clusterId;
-    this.__fetchDetails();
-    // Fetch every 3 seconds
-    const interval = 3000;
-    const timer = this.__timer = new qx.event.Timer(interval);
-    timer.addListener("interval", () => this.__fetchDetails(), this);
-    timer.start();
+    this.__startFetchingDetails();
   },
 
   statics: {
@@ -50,22 +47,24 @@ qx.Class.define("osparc.component.cluster.ClusterDetails", {
 
   members: {
     __clusterId: null,
-    __timer: null,
     __clusterDetailsLayout: null,
     __workersGrid: null,
 
-    __fetchDetails: function() {
-      const params = {
-        url: {
-          "cid": this.__clusterId
+    __startFetchingDetails: function() {
+      const clusters = osparc.utils.Clusters.getInstance();
+      clusters.addListener("clusterDetailsReceived", e => {
+        const data = e.getData();
+        if (this.__clusterId === data.clusterId) {
+          if ("error" in data) {
+            this.__detailsCallFailed();
+          } else {
+            const clusterDetails = data.clusterDetails;
+            this.__populateClusterDetails(clusterDetails);
+            this.__populateWorkersDetails(clusterDetails);
+          }
         }
-      };
-      osparc.data.Resources.get("clusterDetails", params)
-        .then(clusterDetails => {
-          this.__populateClusterDetails(clusterDetails);
-          this.__populateWorkersDetails(clusterDetails);
-        })
-        .catch(() => this.__detailsCallFailed());
+      });
+      clusters.startFetchingDetails(this.__clusterId);
     },
 
     __detailsCallFailed: function() {
@@ -153,6 +152,7 @@ qx.Class.define("osparc.component.cluster.ClusterDetails", {
       };
 
       let row = 0;
+      const gridW = this.__computedLayout ? this.__computedLayout.width - 15 : 600;
       Object.keys(clusterDetails.scheduler.workers).forEach((workerUrl, idx) => {
         const worker = clusterDetails.scheduler.workers[workerUrl];
         row++;
@@ -182,9 +182,12 @@ qx.Class.define("osparc.component.cluster.ClusterDetails", {
           }
           const layout = osparc.wrapper.Plotly.getDefaultLayout();
           const plotId = "ClusterDetails_" + plotKey + "-" + row;
+          const w = parseInt(gridW/Object.keys(plots).length);
+          const h = parseInt(w*0.75);
+          console.log(gridW, w, h);
           const plot = new osparc.component.widget.PlotlyWidget(plotId, gaugeDatas, layout).set({
-            width: 200,
-            height: 160
+            width: w,
+            height: h
           });
           workersGrid.add(plot, {
             row,
@@ -196,6 +199,6 @@ qx.Class.define("osparc.component.cluster.ClusterDetails", {
   },
 
   destruct: function() {
-    this.__timer.stop();
+    osparc.utils.Clusters.getInstance().stopFetchingDetails(this.__clusterId);
   }
 });
diff --git a/services/web/client/source/class/osparc/component/cluster/ClusterMiniView.js b/services/web/client/source/class/osparc/component/cluster/ClusterMiniView.js
@@ -18,27 +18,20 @@
 qx.Class.define("osparc.component.cluster.ClusterMiniView", {
   extend: qx.ui.core.Widget,
 
-  construct: function(clusterId = 0) {
+  construct: function() {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.VBox().set({
       alignY: "middle"
     }));
 
-    this.__clusterId = clusterId;
-
     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.__fetchDetails();
-    // Fecth every 3 seconds
-    const interval = 3000;
-    const timer = this.__timer = new qx.event.Timer(interval);
-    timer.addListener("interval", () => this.__fetchDetails(), this);
-    timer.start();
+    this.__listenToClusterDetails();
 
     this.set({
       cursor: "pointer"
@@ -67,26 +60,32 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
 
   members: {
     __clusterId: null,
-    __timer: null,
     __clusterDetailsLayout: null,
     __miniGrid: null,
     __hint: null,
 
     setClusterId: function(clusterId) {
+      const clusters = osparc.utils.Clusters.getInstance();
+      if (this.__clusterId !== null) {
+        clusters.stopFetchingDetails(this.__clusterId);
+      }
       this.__clusterId = clusterId;
+      clusters.startFetchingDetails(clusterId);
     },
 
-    __fetchDetails: function() {
-      if (osparc.utils.Utils.checkIsOnScreen(this)) {
-        const params = {
-          url: {
-            "cid": this.__clusterId
+    __listenToClusterDetails: function() {
+      const clusters = osparc.utils.Clusters.getInstance();
+      clusters.addListener("clusterDetailsReceived", e => {
+        const data = e.getData();
+        if (this.__clusterId === data.clusterId) {
+          if ("error" in data) {
+            this.__detailsCallFailed();
+          } else {
+            const clusterDetails = data.clusterDetails;
+            this.__updateWorkersDetails(clusterDetails);
           }
-        };
-        osparc.data.Resources.get("clusterDetails", params)
-          .then(clusterDetails => this.__updateWorkersDetails(clusterDetails))
-          .catch(() => this.__detailsCallFailed());
-      }
+        }
+      });
     },
 
     __showFailedBulb: function() {
@@ -203,6 +202,6 @@ qx.Class.define("osparc.component.cluster.ClusterMiniView", {
   },
 
   destruct: function() {
-    this.__timer.stop();
+    osparc.utils.Clusters.getInstance().stopFetchingDetails(this.__clusterId);
   }
 });
diff --git a/services/web/client/source/class/osparc/component/cluster/ClustersDetails.js b/services/web/client/source/class/osparc/component/cluster/ClustersDetails.js
@@ -55,6 +55,7 @@ qx.Class.define("osparc.component.cluster.ClustersDetails", {
           selectBox.setSelection([selectable]);
         }
       });
+      this.__updateClusterDetails(selectClusterId);
     },
 
     __updateClusterDetails: function(clusterId) {

diff --git a/services/web/client/source/class/osparc/component/form/Auto.js b/services/web/client/source/class/osparc/component/form/Auto.js
@@ -446,7 +446,6 @@ qx.Class.define("osparc.component.form.Auto", {
     __getField: function(s, key) {
       if (s.type === "ref_contentSchema") {
         Object.assign(s, s.contentSchema);
-        s.label = s.title;
       }
 
       if (s.defaultValue) {

diff --git a/services/web/client/source/class/osparc/component/permissions/Permissions.js b/services/web/client/source/class/osparc/component/permissions/Permissions.js
@@ -116,9 +116,7 @@ qx.Class.define("osparc.component.permissions.Permissions", {
         allowGrowY: false,
         enabled: false
       });
-      addCollaboratorBtn.addListener("execute", () => {
-        this._addCollaborator();
-      }, this);
+      addCollaboratorBtn.addListener("execute", () => this._addCollaborator(), this);
       qx.event.message.Bus.getInstance().subscribe("OrgAndMembPermsFilter", () => {
         const anySelected = Boolean(this.__organizationsAndMembers.getSelectedGIDs().length);
         addCollaboratorBtn.setEnabled(anySelected);

diff --git a/services/web/client/source/class/osparc/dashboard/ResourceMoreOptions.js b/services/web/client/source/class/osparc/dashboard/ResourceMoreOptions.js
@@ -52,20 +52,26 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
     __qualityPage: null,
     __servicesUpdatePage: null,
 
+    __openPage: function(page) {
+      if (page) {
+        this.setSelection([page]);
+      }
+    },
+
     openAccessRights: function() {
-      this.setSelection([this.__permissionsPage]);
+      this.__openPage(this.__permissionsPage);
     },
 
     openClassifiers: function() {
-      this.setSelection([this.__classifiersPage]);
+      this.__openPage(this.__classifiersPage);
     },
 
     openQuality: function() {
-      this.setSelection([this.__qualityPage]);
+      this.__openPage(this.__qualityPage);
     },
 
     openUpdateServices: function() {
-      this.setSelection([this.__servicesUpdatePage]);
+      this.__openPage(this.__servicesUpdatePage);
     },
 
     __createServiceVersionSelector: function() {

diff --git a/services/web/client/source/class/osparc/desktop/StartStopButtons.js b/services/web/client/source/class/osparc/desktop/StartStopButtons.js
@@ -123,7 +123,6 @@ qx.Class.define("osparc.desktop.StartStopButtons", {
 
       const store = osparc.store.Store.getInstance();
       store.addListener("changeClusters", () => this.__populateClustersSelectBox(), this);
-      this.__populateClustersSelectBox();
 
       const clusterMiniView = new osparc.component.cluster.ClusterMiniView().set({
         alignY: "middle"

diff --git a/services/web/client/source/class/osparc/utils/Clusters.js b/services/web/client/source/class/osparc/utils/Clusters.js
@@ -27,6 +27,7 @@ qx.Class.define("osparc.utils.Clusters", {
 
   construct: function() {
     this.base(arguments);
+    this.__clusterIds = [];
     this.__fetchDetailsTimers = [];
   },
 
@@ -73,16 +74,7 @@ qx.Class.define("osparc.utils.Clusters", {
       const store = osparc.store.Store.getInstance();
       const clusters = store.getClusters();
       if (clusters) {
-        const itemDefault = new qx.ui.form.ListItem().set({
-          label: "default",
-          toolTipText: "default cluster"
-        });
-        itemDefault.id = 0;
-        clustersSelectBox.add(itemDefault);
         clusters.forEach(cluster => {
-          if (!("name" in cluster)) {
-            return;
-          }
           const item = new qx.ui.form.ListItem().set({
             label: cluster["name"],
             toolTipText: cluster["type"] + "\n" + cluster["description"],
@@ -93,45 +85,58 @@ qx.Class.define("osparc.utils.Clusters", {
         });
       }
       return clusters;
-    },
+    }
+  },
 
-    fetchDetails: function(cid) {
+  events: {
+    "clusterDetailsReceived": "qx.event.type.Data"
+  },
+
+  members: {
+    __clusterIds: null,
+    __fetchDetailsTimers: null,
+
+    __fetchDetails: function(cid) {
       const params = {
         url: {
           cid
         }
       };
-      osparc.data.Resources.fetch("clusterDetails", params);
-    }
-  },
-
-  members: {
-    __fetchDetailsTimers: null,
+      osparc.data.Resources.get("clusterDetails", params)
+        .then(clusterDetails => {
+          this.fireDataEvent("clusterDetailsReceived", {
+            clusterId: cid,
+            clusterDetails
+          });
+        })
+        .catch(err => {
+          console.error(err);
+          this.fireDataEvent("clusterDetailsReceived", {
+            clusterId: cid,
+            error: err
+          });
+        })
+        .finally(() => {
+          if (this.__clusterIds.includes(cid)) {
+            const interval = 3000;
+            qx.event.Timer.once(() => this.__fetchDetails(cid), this, interval);
+          }
+        });
+    },
 
-    startFetchDetailsTimer: function(clusterId, interval = 3000) {
-      const fetchDetailsTimer = this.__fetchDetailsTimers.find(timer => timer.clusterId === clusterId);
-      if (fetchDetailsTimer) {
-        fetchDetailsTimer.counter++;
-        return;
+    startFetchingDetails: function(clusterId) {
+      const found = this.__clusterIds.includes(clusterId);
+      this.__clusterIds.push(clusterId);
+      if (!found) {
+        console.log("start fetching", this.__clusterIds);
+        this.__fetchDetails(clusterId);
       }
-      this.self().fetchDetails(clusterId);
-      const timer = new qx.event.Timer(interval);
-      timer.clusterId = clusterId;
-      timer.counter = 1;
-      timer.addListener("interval", () => this.self().fetchDetails(clusterId), this);
-      timer.start();
-      this.__fetchDetailsTimers.push(timer);
     },
 
-    stopFetchDetailsTimer: function(clusterId) {
-      const idx = this.__fetchDetailsTimers.findIndex(timer => timer.clusterId === clusterId);
-      if (idx > 1) {
-        const fetchDetailsTimer = this.__fetchDetailsTimers[idx];
-        fetchDetailsTimer.counter--;
-        if (fetchDetailsTimer.counter === 0) {
-          fetchDetailsTimer.stop();
-          this.__fetchDetailsTimers.splice(idx, 1);
-        }
+    stopFetchingDetails: function(clusterId) {
+      const idx = this.__clusterIds.indexOf(clusterId);
+      if (idx > -1) {
+        this.__clusterIds.splice(idx, 1);
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ qx.Class.define("osparc.component.cluster.ClustersDetails", { @@
               selectBox.setSelection([selectable]);
             }
           });
+          this.__updateClusterDetails(selectClusterId);
         },
         __updateClusterDetails: function(clusterId) {
@@ Expand Down @@