fix: UI with multiple types of accelerators

src/components/backend-ai-resource-broker.ts

@@ -349,6 +349,10 @@ export default class BackendAiResourceBroker extends BackendAIPage {
    *
    */
   async _refreshResourcePolicy() {
+    if (!globalThis.backendaiclient) {
+      // To prevent a silent failure when the client is not ready in aggregating resources.
+      return Promise.resolve(false);
+    }
     if (Date.now() - this.lastResourcePolicyQueryTime < 2000) {
       return Promise.resolve(false);
     }
@@ -482,7 +486,7 @@ export default class BackendAiResourceBroker extends BackendAIPage {
    * @param {string} from - set the value for debugging purpose.
    */
   async _aggregateCurrentResource(from = '') {
-    if (this.aggregate_updating) {
+    if (!globalThis.backendaiclient || this.aggregate_updating) {
       return Promise.resolve(false);
     }
     if (Date.now() - this.lastQueryTime < 1000) {
@@ -513,6 +517,15 @@ export default class BackendAiResourceBroker extends BackendAIPage {
         const sgs = await globalThis.backendaiclient.scalingGroup.list(
           this.current_user_group,
         );
+        // TODO: Delete these codes after backend.ai support scaling groups filtering.
+        // ================================ START ====================================
+        if (sgs && sgs.scaling_groups && sgs.scaling_groups.length > 0) {
+          const sftpResourceGroups = await this._sftpScalingGroups();
+          sgs.scaling_groups = sgs.scaling_groups.filter(
+            (item) => !sftpResourceGroups?.includes(item.name),
+          );
+        }
+        // ================================ END ====================================
         // Make empty scaling group item if there is no scaling groups.
         this.scaling_groups =
           sgs.scaling_groups.length > 0 ? sgs.scaling_groups : [{ name: '' }];

src/components/backend-ai-resource-monitor.ts

@@ -496,12 +496,14 @@ export default class BackendAiResourceMonitor extends BackendAIPage {
     ) as Switch;
     if (document.body.clientWidth > 750 && this.direction == 'horizontal') {
       legend.style.display = 'flex';
+      legend.style.marginTop = '0';
       Array.from(this.resourceGauge.children).forEach((elem) => {
         (elem as HTMLElement).style.display = 'flex';
       });
     } else {
       if (toggleButton.selected) {
         legend.style.display = 'flex';
+        legend.style.marginTop = '0';
         if (document.body.clientWidth < 750) {
           this.resourceGauge.style.left = '20px';
           this.resourceGauge.style.right = '20px';
@@ -530,7 +532,16 @@ export default class BackendAiResourceMonitor extends BackendAIPage {
     }
     return this.resourceBroker
       ._refreshResourcePolicy()
-      .then(() => {
+      .then((resolvedValue) => {
+        if (resolvedValue === false) {
+          setTimeout(() => {
+            // Retry to get the concurrency_max after a while if resource broker
+            // is not ready. When the timeout is 2000, it delays the display of
+            // other resource's allocation status. I don't know why, but I just
+            // set it to 2500.
+            this._refreshResourcePolicy();
+          }, 2500);
+        }
         this.concurrency_used = this.resourceBroker.concurrency_used;
         // this.userResourceLimit = this.resourceBroker.userResourceLimit;
         this.concurrency_max =