feat: support server group quota check when create instance

1. Support server group quota info when create instance
2. Disable click next button when the selected server group's remaining quota is insufficient

Change-Id: Iee8127292ad50564eff04e21f11b1c82355d3a7d

src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx

@@ -29,6 +29,7 @@ import { physicalNodeTypes } from 'resources/nova/instance';
 import { getOptions } from 'utils';
 import CreateKeyPair from 'pages/compute/containers/Keypair/actions/Create';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
+import { has } from 'lodash';
 import styles from '../index.less';
 
 export class SystemStep extends Base {
@@ -85,15 +86,10 @@ export class SystemStep extends Base {
   }
 
   get serverGroups() {
-    return (this.serverGroupStore.list.data || [])
-      .filter((it) => {
-        const { servergroup } = this.locationParams;
-        return servergroup ? it.id === servergroup : true;
-      })
-      .map((it) => ({
-        ...it,
-        key: it.id,
-      }));
+    return (this.serverGroupStore.list.data || []).filter((it) => {
+      const { servergroup } = this.locationParams;
+      return servergroup ? it.id === servergroup : true;
+    });
   }
 
   get serverGroupRequired() {
@@ -198,6 +194,10 @@ export class SystemStep extends Base {
   async getServerGroups() {
     await this.serverGroupStore.fetchList();
     this.updateDefaultValue();
+    const { servergroup } = this.locationParams;
+    if (servergroup) {
+      this.onServerGroupChange({ selectedRows: this.serverGroups });
+    }
   }
 
   get nameForStateUpdate() {
@@ -208,6 +208,7 @@ export class SystemStep extends Base {
       'confirmPassword',
       'more',
       'physicalNodeType',
+      'serverGroup',
     ];
   }
 
@@ -235,6 +236,19 @@ export class SystemStep extends Base {
     }
   };
 
+  onValuesChange = (changedFields) => {
+    if (has(changedFields, 'serverGroup')) {
+      this.onServerGroupChange(changedFields.serverGroup);
+    }
+  };
+
+  onServerGroupChange = (value) => {
+    const { selectedRows = [] } = value || {};
+    this.updateContext({
+      serverGroupRow: selectedRows[0] || null,
+    });
+  };
+
   getKeyPairHeader() {
     const { isLoading } = this.keyPairStore.list || {};
     if (isLoading) {
@@ -377,6 +391,7 @@ export class SystemStep extends Base {
         data: this.serverGroups,
         isLoading: this.serverGroupStore.list.isLoading,
         required: this.serverGroupRequired,
+        // onChange: this.onServerGroupChange,
         extra: t(
           'Using server groups, you can create cloud hosts on the same/different physical nodes as much as possible to meet the affinity/non-affinity requirements of business applications.'
         ),

src/pages/compute/containers/Instance/actions/StepCreate/index.jsx

@@ -212,13 +212,18 @@ export class StepCreate extends StepAction {
       title: t('Volume Size'),
       type: 'line',
     };
-    return [
+    const serverGroupQuota = this.getServerGroupQuota();
+    const quotaInfo = [
       instanceQuotaInfo,
       cpuQuotaInfo,
       ramQuotaInfo,
       volumeQuotaInfo,
       volumeSizeQuotaInfo,
     ];
+    if (serverGroupQuota) {
+      quotaInfo.push(serverGroupQuota);
+    }
+    return quotaInfo;
   }
 
   get errorText() {
@@ -404,6 +409,40 @@ export class StepCreate extends StepAction {
     return '';
   }
 
+  getServerGroupQuota() {
+    const { data } = this.state;
+    const { serverGroupRow, count = 1 } = data;
+    if (!serverGroupRow) {
+      return null;
+    }
+    const { server_group_members: { limit = 0 } = {} } =
+      this.projectStore.novaQuota;
+    const { members = [] } = serverGroupRow || {};
+    const used = members.length;
+    const left = limit === -1 ? -1 : limit - used;
+    return {
+      add: count,
+      used,
+      limit,
+      left,
+      title: t('Server Group Member'),
+      name: 'serverGroupMember',
+      type: 'line',
+    };
+  }
+
+  checkSeverGroupQuota() {
+    const quota = this.getServerGroupQuota();
+    if (!quota) {
+      return '';
+    }
+    const { add, left } = quota || {};
+    if (left !== -1 && left < add) {
+      return this.getQuotaMessage(add, quota, t('Server Group Member'));
+    }
+    return '';
+  }
+
   get badgeStyle() {
     return { marginTop: 8, marginBottom: 8, marginLeft: 10, maxWidth: 600 };
   }
@@ -411,13 +450,14 @@ export class StepCreate extends StepAction {
   renderBadge() {
     const flavorMsg = this.checkFlavorQuota();
     const volumeMsg = this.checkVolumeQuota();
-    if (!flavorMsg && !volumeMsg) {
+    const serverGroupMsg = this.checkSeverGroupQuota();
+    if (!flavorMsg && !volumeMsg && !serverGroupMsg) {
       this.status = 'success';
       this.errorMsg = '';
       return null;
     }
     this.status = 'error';
-    const msg = flavorMsg || volumeMsg;
+    const msg = flavorMsg || volumeMsg || serverGroupMsg;
     if (this.errorMsg !== msg) {
       $message.error(msg);
     }