From 2fd46f588c855613762894b3446f491bd0a3bd1c Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Wed, 1 Jun 2022 11:31:47 +0800
Subject: [PATCH] fix: Fix create/delete certificate && menu

1. Fix delete server/ca certificate
2. Update cert display in detail page
3. Add default type when create cert
4. Display the cert list page based on the barbican endpoint
5. Temporarily remove network topology e2e because of cypress crashes

Change-Id: Ie0f01bd7c818b4c553351cc1cd8549e79a301c29
---
 src/containers/BaseDetail/index.jsx           | 10 +++++++-
 src/layouts/menu.jsx                          |  1 +
 .../Detail/Container/BaseDetail.jsx           | 20 ++++++++++++----
 .../Certificate/Detail/Secret/BaseDetail.jsx  | 10 +++++++-
 .../containers/Certificate/actions/Create.jsx | 15 ++++++++++--
 src/stores/barbican/containers.js             | 15 +++++++++---
 src/stores/barbican/secrets.js                | 23 +++++++++----------
 test/e2e/config/config-network.yaml           |  2 +-
 8 files changed, 72 insertions(+), 24 deletions(-)

diff --git a/src/containers/BaseDetail/index.jsx b/src/containers/BaseDetail/index.jsx
index 65b1ec26..23541f63 100644
--- a/src/containers/BaseDetail/index.jsx
+++ b/src/containers/BaseDetail/index.jsx
@@ -83,6 +83,10 @@ export default class BaseDetail extends React.Component {
     return false;
   }
 
+  get leftCardsStyle() {
+    return {};
+  }
+
   getRouteName(routeName) {
     return this.isAdminPage ? `${routeName}Admin` : routeName;
   }
@@ -181,7 +185,11 @@ export default class BaseDetail extends React.Component {
   render() {
     return (
       <div className={classnames(styles.main)}>
-        <div className={styles['left-side']} id="detail-left-side">
+        <div
+          className={styles['left-side']}
+          id="detail-left-side"
+          style={this.leftCardsStyle}
+        >
           {this.renderLeftCards()}
         </div>
         <div className={styles['right-side']} id="detail-right-side">
diff --git a/src/layouts/menu.jsx b/src/layouts/menu.jsx
index 44ee09e4..71821021 100644
--- a/src/layouts/menu.jsx
+++ b/src/layouts/menu.jsx
@@ -351,6 +351,7 @@ const renderMenu = (t) => {
           path: '/network/certificate',
           name: t('Certificate Management'),
           key: 'certificate',
+          endpoints: 'barbican',
           level: 1,
           children: [
             {
diff --git a/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx b/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
index 369eea18..bc1e407c 100644
--- a/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
+++ b/src/pages/network/containers/Certificate/Detail/Container/BaseDetail.jsx
@@ -12,13 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
 export class BaseDetail extends Base {
+  get leftCardsStyle() {
+    return {
+      flex: 1,
+    };
+  }
+
   get leftCards() {
-    const cards = [this.contentCard, this.keyPairCard];
-    return cards;
+    return [this.contentCard];
+  }
+
+  get rightCards() {
+    return [this.keyPairCard];
   }
 
   get contentCard() {
@@ -27,13 +37,14 @@ export class BaseDetail extends Base {
       secret_refs.find((it) => it.name === 'certificate') || {};
     const options = [
       {
-        content: secret_info.payload,
+        content: <pre>{secret_info.payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Certificate Content'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
@@ -44,13 +55,14 @@ export class BaseDetail extends Base {
       secret_refs.find((it) => it.name === 'private_key') || {};
     const options = [
       {
-        content: secret_info.payload,
+        content: <pre>{secret_info.payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Private Key'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
diff --git a/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx b/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
index f81c19ff..762240c9 100644
--- a/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
+++ b/src/pages/network/containers/Certificate/Detail/Secret/BaseDetail.jsx
@@ -12,10 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
 export class BaseDetail extends Base {
+  get leftCardsStyle() {
+    return {
+      flex: 1,
+    };
+  }
+
   get leftCards() {
     const cards = [this.contentCard];
     return cards;
@@ -25,13 +32,14 @@ export class BaseDetail extends Base {
     const { payload } = this.props.detail;
     const options = [
       {
-        content: payload,
+        content: <pre>{payload}</pre>,
         copyable: true,
       },
     ];
     return {
       title: t('Certificate Content'),
       labelCol: 0,
+      contentCol: 24,
       options,
     };
   }
diff --git a/src/pages/network/containers/Certificate/actions/Create.jsx b/src/pages/network/containers/Certificate/actions/Create.jsx
index 4a6ee7cf..d4a8b0ef 100644
--- a/src/pages/network/containers/Certificate/actions/Create.jsx
+++ b/src/pages/network/containers/Certificate/actions/Create.jsx
@@ -23,6 +23,7 @@ import {
 } from 'resources/octavia/secrets';
 import globalContainersStore from 'stores/barbican/containers';
 import moment from 'moment';
+import { parse } from 'qs';
 
 export class CreateAction extends ModalAction {
   static id = 'create-certificate';
@@ -49,13 +50,21 @@ export class CreateAction extends ModalAction {
 
   get defaultValue() {
     const data = {
-      mode: 'SERVER',
+      mode: this.typeTab,
     };
     return data;
   }
 
+  get typeTab() {
+    const { location: { search = '' } = {} } = this.containerProps;
+    const params = parse(search.slice(1));
+    return params.tab || 'SERVER';
+  }
+
   get certificateModeOptions() {
-    return getOptions(certificateMode);
+    return getOptions(certificateMode).filter((it) => {
+      return it.value === this.typeTab;
+    });
   }
 
   validateDomain = (rule, value) => {
@@ -129,6 +138,7 @@ export class CreateAction extends ModalAction {
         tip: certificateContentTip,
         validator: this.validateCertificateContent,
         required: true,
+        rows: 6,
       },
       {
         name: 'private_key',
@@ -140,6 +150,7 @@ export class CreateAction extends ModalAction {
         validator: this.validateCertificateKeyPair,
         required: true,
         display: mode === 'SERVER',
+        rows: 6,
       },
       {
         name: 'domain',
diff --git a/src/stores/barbican/containers.js b/src/stores/barbican/containers.js
index bf2f638a..4e791f8b 100644
--- a/src/stores/barbican/containers.js
+++ b/src/stores/barbican/containers.js
@@ -40,6 +40,17 @@ export class ContainersStore extends Base {
     offset,
   });
 
+  get mapper() {
+    return (data) => {
+      const { container_ref } = data;
+      const [, uuid] = container_ref.split('/containers/');
+      return {
+        ...data,
+        id: uuid,
+      };
+    };
+  }
+
   async requestListAllByLimit(params, limit) {
     let hasNext = true;
     let data = [];
@@ -60,8 +71,7 @@ export class ContainersStore extends Base {
     if (items.length === 0) return items;
     const secrets = await this.secretStore.fetchList({ mode: 'SERVER' });
     const newItems = items.map((it) => {
-      const { container_ref = '', secret_refs = [] } = it;
-      const [, uuid] = container_ref.split('/containers/');
+      const { secret_refs = [] } = it;
       if (secret_refs.length === 0) {
         it.hidden = true;
       } else {
@@ -84,7 +94,6 @@ export class ContainersStore extends Base {
       }
       return {
         ...it,
-        id: uuid,
       };
     });
     return newItems.filter((it) => it.hidden !== true);
diff --git a/src/stores/barbican/secrets.js b/src/stores/barbican/secrets.js
index ce5ade2f..5da24515 100644
--- a/src/stores/barbican/secrets.js
+++ b/src/stores/barbican/secrets.js
@@ -40,6 +40,17 @@ export class SecretsStore extends Base {
     offset,
   });
 
+  get mapper() {
+    return (data) => {
+      const { secret_ref } = data;
+      const [, uuid] = secret_ref.split('/secrets/');
+      return {
+        ...data,
+        id: uuid,
+      };
+    };
+  }
+
   async requestListAllByLimit(params, limit) {
     let hasNext = true;
     let data = [];
@@ -56,18 +67,6 @@ export class SecretsStore extends Base {
     return data;
   }
 
-  listDidFetch(items) {
-    if (items.length === 0) return items;
-    return items.map((it) => {
-      const { secret_ref = '' } = it;
-      const [, uuid] = secret_ref.split('/secrets/');
-      return {
-        ...it,
-        id: uuid,
-      };
-    });
-  }
-
   @action
   async fetchDetail({ id, silent }) {
     if (!silent) {
diff --git a/test/e2e/config/config-network.yaml b/test/e2e/config/config-network.yaml
index 5dc4b889..c535e531 100644
--- a/test/e2e/config/config-network.yaml
+++ b/test/e2e/config/config-network.yaml
@@ -27,4 +27,4 @@ testFiles:
   - pages/network/security-group.spec.js
   - pages/network/vpn.spec.js
   - pages/network/lb.spec.js
-  - pages/network/topology.spec.js
+  # - pages/network/topology.spec.js