feature: Support quick creating keypair in Magnum service

1. Support quick creating keypair when create cluster template

2. Support quick creating keypair when create cluster instance

Change-Id: If019d411b47752f738c0d43097fc00a3bf36892b

releasenotes/notes/Support-Quick-Create-Keypair-In-Magnum-0b10264145d52825.yaml

@@ -0,0 +1,8 @@
+---
+features:
+  - |
+    Support quick creating keypair in Magnum service:
+
+    1. Support quick creating keypair when create cluster template
+
+    2. Support quick creating keypair when create cluster instance

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

@@ -19,9 +19,11 @@ import globalImageStore from 'src/stores/glance/image';
 import globalKeypairStore from 'src/stores/nova/keypair';
 import FlavorSelectTable from 'src/pages/compute/containers/Instance/components/FlavorSelectTable';
 import { getImageColumns } from 'resources/glance/image';
+import { getKeyPairHeader } from 'resources/nova/keypair';
 
 export class StepNodeSpec extends Base {
   init() {
+    this.keyPairStore = globalKeypairStore;
     this.getImageList();
     this.getKeypairs();
   }
@@ -48,11 +50,11 @@ export class StepNodeSpec extends Base {
   }
 
   async getKeypairs() {
-    await globalKeypairStore.fetchList();
+    await this.keyPairStore.fetchList();
   }
 
   get keypairs() {
-    return globalKeypairStore.list.data || [];
+    return this.keyPairStore.list.data || [];
   }
 
   get acceptedImageOs() {
@@ -99,6 +101,11 @@ export class StepNodeSpec extends Base {
   get defaultValue() {
     let values = {};
 
+    const { initKeyPair } = this.state;
+    if (initKeyPair) {
+      values.keypairs = initKeyPair;
+    }
+
     if (this.isEdit) {
       const {
         extra: {
@@ -142,6 +149,8 @@ export class StepNodeSpec extends Base {
   }
 
   get formItems() {
+    const { initKeyPair } = this.state;
+
     return [
       {
         name: 'images',
@@ -163,7 +172,9 @@ export class StepNodeSpec extends Base {
         label: t('Keypair'),
         type: 'select-table',
         data: this.keypairs,
-        isLoading: globalKeypairStore.list.isLoading,
+        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. The cloud platform only helps to keep the public key. Please keep your private key properly.'
         ),

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

@@ -17,9 +17,11 @@ 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();
   }
@@ -48,11 +50,11 @@ export class StepInfo extends Base {
   }
 
   async getKeypairs() {
-    await globalKeypairStore.fetchList();
+    await this.keyPairStore.fetchList();
   }
 
   get keypairs() {
-    return globalKeypairStore.list.data || [];
+    return this.keyPairStore.list.data || [];
   }
 
   get nameForStateUpdate() {
@@ -60,20 +62,25 @@ export class StepInfo extends Base {
   }
 
   get defaultValue() {
+    const values = {};
+    const { initKeyPair } = this.state;
+    if (initKeyPair) {
+      values.keypairs = initKeyPair;
+    }
+
     const { template } = this.locationParams;
     if (template) {
-      return {
-        clusterTemplate: {
-          selectedRowKeys: [template],
-          selectedRows: this.clusterTemplates,
-        },
+      values.clusterTemplate = {
+        selectedRowKeys: [template],
+        selectedRows: this.clusterTemplates,
       };
     }
-    return {};
+
+    return values;
   }
 
   get formItems() {
-    const { clusterTemplate } = this.state;
+    const { clusterTemplate, initKeyPair } = this.state;
     const { keypair_id } = clusterTemplate || {};
 
     return [
@@ -105,7 +112,9 @@ export class StepInfo extends Base {
         type: 'select-table',
         required: !keypair_id,
         data: this.keypairs,
-        isLoading: globalKeypairStore.list.isLoading,
+        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.'
         ),

src/resources/nova/keypair.jsx

@@ -0,0 +1,58 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
+import CreateKeyPair from 'pages/compute/containers/Keypair/actions/Create';
+import styles from './keypair.less';
+
+export const getKeyPairHeader = (self) => {
+  const onFinishCreateKeyPair = async () => {
+    await self.getKeypairs(); // refresh keypairs
+    const { createdItem } = self.keyPairStore;
+    const newItem = self.keypairs.find(
+      (it) => it.name === (createdItem || {}).name
+    );
+    if (newItem) {
+      const initKeyPair = {
+        selectedRowKeys: [newItem.id],
+        selectedRows: [newItem],
+      };
+      self.setState(
+        {
+          initKeyPair,
+        },
+        () => {
+          self.updateDefaultValue();
+        }
+      );
+    }
+  };
+
+  return (
+    <div style={{ marginBottom: 10 }}>
+      <span>
+        {t(
+          'The key pair allows you to SSH into your newly created instance. You can select an existing key pair, import a key pair, or generate a new key pair.'
+        )}
+      </span>
+      <span className={styles['action-wrapper']}>
+        <ItemActionButtons
+          actions={{ moreActions: [{ action: CreateKeyPair }] }}
+          onFinishAction={onFinishCreateKeyPair}
+        />
+      </span>
+    </div>
+  );
+};

src/resources/nova/keypair.less

@@ -0,0 +1,12 @@
+@import '~styles/variables';
+
+.action-wrapper {
+  margin-left: 8px;
+
+  :global {
+    .ant-btn-link {
+      padding: 5.6px 15px !important;
+      border-color: @primary-color;
+    }
+  }
+}