fix: Move the keypair to node spec when create cluster instance

In order to be consistent with the cluster template creating, move the keypair to node spec step when create cluster instance

Change-Id: Id9b70108f4ac2dac289bb50fa83eeab18f08199e

src/pages/container-infra/containers/ClusterTemplates/Detail/BaseDetail.jsx

@@ -206,19 +206,19 @@ export class BaseDetail extends Base {
         label: t('labels'),
         dataIndex: 'labels',
         render: (value) =>
-          !isEmpty(value)
-            ? Object.entries(value).map(([key, val]) => {
-                return (
-                  <div key={key}>
+          !isEmpty(value) ? (
             <ul>
-                      <li>
+              {Object.entries(value).map(([key, val]) => {
+                return (
+                  <li key={key}>
                     {key} : {val}
                   </li>
-                    </ul>
-                  </div>
                 );
-              })
-            : '-',
+              })}
+            </ul>
+          ) : (
+            '-'
+          ),
       },
     ];
 

src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNodeSpec/index.jsx

@@ -93,12 +93,26 @@ export class StepNodeSpec extends Base {
     return acceptedVolumeDriver;
   }
 
+  getFlavorComponent() {
+    return <FlavorSelectTable onChange={this.onFlavorChange} />;
+  }
+
   onFlavorChange = (value) => {
     this.updateContext({
       flavor: value,
     });
   };
 
+  getMasterFlavorComponent() {
+    return <FlavorSelectTable onChange={this.onMasterFlavorChange} />;
+  }
+
+  onMasterFlavorChange = (value) => {
+    this.updateContext({
+      masterFlavor: value,
+    });
+  };
+
   get defaultValue() {
     let values = {};
 
@@ -195,13 +209,13 @@ export class StepNodeSpec extends Base {
         name: 'flavor',
         label: t('Flavor of Nodes'),
         type: 'select-table',
-        component: <FlavorSelectTable onChange={this.onFlavorChange} />,
+        component: this.getFlavorComponent(),
       },
       {
         name: 'masterFlavor',
         label: t('Flavor of Master Nodes'),
         type: 'select-table',
-        component: <FlavorSelectTable onChange={this.onFlavorChange} />,
+        component: this.getMasterFlavorComponent(),
       },
       {
         name: 'volume_driver',

src/pages/container-infra/containers/Clusters/actions/StepCreate/StepInfo/index.jsx

@@ -15,15 +15,11 @@
 import Base from 'components/Form';
 import { inject, observer } from 'mobx-react';
 import globalClusterTemplateStore from 'stores/magnum/clusterTemplates';
-import globalKeypairStore from 'stores/nova/keypair';
 import { getBaseTemplateColumns } from 'resources/magnum/template';
-import { getKeyPairHeader } from 'resources/nova/keypair';
 
 export class StepInfo extends Base {
   init() {
-    this.keyPairStore = globalKeypairStore;
     this.getClustertemplates();
-    this.getKeypairs();
   }
 
   get title() {
@@ -37,7 +33,6 @@ export class StepInfo extends Base {
   async getClustertemplates() {
     await globalClusterTemplateStore.fetchList();
     this.updateDefaultValue();
-    this.updateState();
   }
 
   get clusterTemplates() {
@@ -49,18 +44,6 @@ export class StepInfo extends Base {
     return templates;
   }
 
-  async getKeypairs() {
-    await this.keyPairStore.fetchList();
-  }
-
-  get keypairs() {
-    return this.keyPairStore.list.data || [];
-  }
-
-  get nameForStateUpdate() {
-    return ['clusterTemplate'];
-  }
-
   get defaultValue() {
     const values = {};
 
@@ -76,9 +59,6 @@ export class StepInfo extends Base {
   }
 
   get formItems() {
-    const { clusterTemplate, initKeyPair } = this.state;
-    const { keypair_id } = clusterTemplate || {};
-
     return [
       {
         name: 'name',
@@ -102,35 +82,6 @@ export class StepInfo extends Base {
         ],
         columns: getBaseTemplateColumns(this),
       },
-      {
-        name: 'keypair',
-        label: t('Keypair'),
-        type: 'select-table',
-        required: !keypair_id,
-        data: this.keypairs,
-        initValue: initKeyPair,
-        isLoading: this.keyPairStore.list.isLoading,
-        header: getKeyPairHeader(this),
-        tip: t(
-          'The SSH key is a way to remotely log in to the cluster instance. If it’s not set, the value of this in template will be used.'
-        ),
-        filterParams: [
-          {
-            label: t('Name'),
-            name: 'name',
-          },
-        ],
-        columns: [
-          {
-            title: t('Name'),
-            dataIndex: 'name',
-          },
-          {
-            title: t('Fingerprint'),
-            dataIndex: 'fingerprint',
-          },
-        ],
-      },
     ];
   }
 }

src/pages/container-infra/containers/Clusters/actions/StepCreate/StepNodeSpec/index.jsx

@@ -16,9 +16,16 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 import FlavorSelectTable from 'src/pages/compute/containers/Instance/components/FlavorSelectTable';
+import globalKeypairStore from 'stores/nova/keypair';
 import { defaultTip } from 'resources/magnum/cluster';
+import { getKeyPairHeader } from 'resources/nova/keypair';
 
 export class StepNodeSpec extends Base {
+  init() {
+    this.keyPairStore = globalKeypairStore;
+    this.getKeypairs();
+  }
+
   get title() {
     return t('Node Spec');
   }
@@ -29,6 +36,14 @@ export class StepNodeSpec extends Base {
 
   allowed = () => Promise.resolve();
 
+  async getKeypairs() {
+    await this.keyPairStore.fetchList();
+  }
+
+  get keypairs() {
+    return this.keyPairStore.list.data || [];
+  }
+
   getFlavorComponent() {
     return <FlavorSelectTable onChange={this.onFlavorChange} />;
   }
@@ -39,6 +54,16 @@ export class StepNodeSpec extends Base {
     });
   };
 
+  getMasterFlavorComponent() {
+    return <FlavorSelectTable onChange={this.onMasterFlavorChange} />;
+  }
+
+  onMasterFlavorChange = (value) => {
+    this.updateContext({
+      masterFlavor: value,
+    });
+  };
+
   get defaultValue() {
     return {
       master_count: 1,
@@ -49,9 +74,39 @@ export class StepNodeSpec extends Base {
   get formItems() {
     const { context: { clusterTemplate = {} } = {} } = this.props;
     const { selectedRows = [] } = clusterTemplate;
-    const { master_flavor_id, flavor_id } = selectedRows[0] || {};
+    const { master_flavor_id, flavor_id, keypair_id } = selectedRows[0] || {};
+    const { initKeyPair } = this.state;
 
     return [
+      {
+        name: 'keypair',
+        label: t('Keypair'),
+        type: 'select-table',
+        required: !keypair_id,
+        data: this.keypairs,
+        initValue: initKeyPair,
+        isLoading: this.keyPairStore.list.isLoading,
+        header: getKeyPairHeader(this),
+        tip: t(
+          'The SSH key is a way to remotely log in to the cluster instance. If it’s not set, the value of this in template will be used.'
+        ),
+        filterParams: [
+          {
+            label: t('Name'),
+            name: 'name',
+          },
+        ],
+        columns: [
+          {
+            title: t('Name'),
+            dataIndex: 'name',
+          },
+          {
+            title: t('Fingerprint'),
+            dataIndex: 'fingerprint',
+          },
+        ],
+      },
       {
         name: 'master_count',
         label: t('Number of Master Nodes'),
@@ -63,7 +118,7 @@ export class StepNodeSpec extends Base {
         name: 'masterFlavor',
         label: t('Flavor of Master Nodes'),
         type: 'select-table',
-        component: this.getFlavorComponent(),
+        component: this.getMasterFlavorComponent(),
         required: !master_flavor_id,
         tip: defaultTip,
       },