fix: exception caused by mismatched selected resource group informati…

…on. (#2043) * use auto selected resource group by resource brocker * ignore the absence of selected resource group information. * show a loading indicator when initializing and changing the resource group * lint
lablup · Nov 23, 2023 · 3cd9bd3 · 3cd9bd3
1 parent 42a0f9a
commit 3cd9bd3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/react/src/components/ResourceGroupSelect.tsx b/react/src/components/ResourceGroupSelect.tsx
@@ -15,6 +15,7 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
   projectId,
   autoSelectDefault,
   filter,
+  loading,
   ...selectProps
 }) => {
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
@@ -110,7 +111,7 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
           });
         }
       }}
-      loading={isPendingLoading}
+      loading={isPendingLoading || loading}
       {...selectProps}
     >
       {_.map(resourceGroups, (resourceGroup, idx) => {

diff --git a/react/src/index.tsx b/react/src/index.tsx
@@ -210,6 +210,15 @@ customElements.define(
 customElements.define(
   'backend-ai-react-resource-group-select',
   reactToWebComponent((props) => {
+    const [value, setValue] = React.useState(props.value || '');
+
+    React.useEffect(() => {
+      if (props.value !== value) {
+        setValue(props.value || '');
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.value]);
+
     return (
       <DefaultProviders {...props}>
         <Flex direction="column" align="stretch" style={{ minWidth: 200 }}>
@@ -219,9 +228,11 @@ customElements.define(
               style={{ margin: 0 }}
             >
               <ResourceGroupSelect
-                autoSelectDefault
                 size="large"
+                value={value}
+                loading={value !== props.value || value === ''}
                 onChange={(value) => {
+                  setValue(value);
                   props.dispatchEvent('change', value);
                 }}
               />

diff --git a/src/components/backend-ai-resource-broker.ts b/src/components/backend-ai-resource-broker.ts
@@ -575,7 +575,10 @@ export default class BackendAiResourceBroker extends BackendAIPage {
           using: { cpu: 0, mem: 0 },
           remaining: { cpu: 0, mem: 0 },
         };
-      } else if (this.scaling_groups.length === 0) {
+      } else if (
+        this.scaling_groups.length === 0 ||
+        resourcePresetInfo.scaling_groups[this.scaling_group] === undefined
+      ) {
         this.aggregate_updating = false;
         return Promise.resolve(false);
       }

diff --git a/src/components/backend-ai-resource-monitor.ts b/src/components/backend-ai-resource-monitor.ts
@@ -662,13 +662,15 @@ export default class BackendAiResourceMonitor extends BackendAIPage {
       <div id="scaling-group-select-box" class="layout horizontal center-justified ${
         this.direction
       }">
-      <backend-ai-react-resource-group-select @change=${({ detail: value }) => {
-        this.updateScalingGroup(true, {
-          target: {
-            value,
-          },
-        });
-      }}/>
+      <backend-ai-react-resource-group-select 
+        value=${this.scaling_group}
+        @change=${({ detail: value }) => {
+          this.updateScalingGroup(true, {
+            target: {
+              value,
+            },
+          });
+        }}/>
       </div>
       <div class="layout ${this.direction}-card flex wrap">
         <div id="resource-gauges" class="layout ${this.direction} ${