From e72e9beb5ded6a2d5ee1aba13dcf79ac0371ee34 Mon Sep 17 00:00:00 2001
From: zhuyue <zhu.yue@99cloud.net>
Date: Fri, 27 Aug 2021 18:15:53 +0800
Subject: [PATCH] feat: Add cidr in subnet-select-options & subnet details in
 column

1. add cidr in subnet-select-options
2. add subnet information in network's subnet number column

Change-Id: I2d782557b183fd35c436dc8e0ec39802dd8eb999
---
 .../FormItem/NetworkSelect/index.jsx          | 22 +++------
 .../FormItem/NetworkSelect/index.less         | 11 ++++-
 src/resources/{network.js => network.jsx}     | 48 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 18 deletions(-)
 rename src/resources/{network.js => network.jsx} (63%)

diff --git a/src/components/FormItem/NetworkSelect/index.jsx b/src/components/FormItem/NetworkSelect/index.jsx
index 095ec368..13185e29 100644
--- a/src/components/FormItem/NetworkSelect/index.jsx
+++ b/src/components/FormItem/NetworkSelect/index.jsx
@@ -232,7 +232,12 @@ export default class NetworkSelect extends React.Component {
     return subnets
       .filter((it) => it.network_id === network)
       .map((it) => ({
-        label: it.name,
+        label: (
+          <div>
+            <span>{it.name}</span>
+            <span className={styles.subnet_options_cidr}>{it.cidr}</span>
+          </div>
+        ),
         value: it.id,
       }));
   };
@@ -252,22 +257,10 @@ export default class NetworkSelect extends React.Component {
   }
 
   renderSubnet() {
-    const { network, subnets, subnet, ipType } = this.state;
+    const { network, subnet, ipType } = this.state;
     if (!network || !ipType) {
       return null;
     }
-    let tips = '';
-    if (subnet) {
-      const item = subnets.find((it) => it.id === subnet);
-      if (item) {
-        tips = (
-          <span>
-            <span className={styles.label}>{t('Cidr')}: </span>
-            <span className={styles.content}>{item.cidr}</span>
-          </span>
-        );
-      }
-    }
     return (
       <Col span={6}>
         <Select
@@ -276,7 +269,6 @@ export default class NetworkSelect extends React.Component {
           placeholder={t('please select subnet')}
           onChange={this.onSubnetChange}
         />
-        <div className={styles.tips}>{tips}</div>
       </Col>
     );
   }
diff --git a/src/components/FormItem/NetworkSelect/index.less b/src/components/FormItem/NetworkSelect/index.less
index e4b67e18..76aba072 100644
--- a/src/components/FormItem/NetworkSelect/index.less
+++ b/src/components/FormItem/NetworkSelect/index.less
@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 .network-select {
   display: block;
   height: 61.6px;
@@ -33,4 +33,11 @@
 }
 .content {
   color: @color-text-body;
-}
\ No newline at end of file
+}
+
+.subnet_options_cidr {
+  padding-left: 5px;
+  margin-left: 5px;
+  opacity: 0.6;
+  border-left: 1px solid;
+}
diff --git a/src/resources/network.js b/src/resources/network.jsx
similarity index 63%
rename from src/resources/network.js
rename to src/resources/network.jsx
index c1a112d6..f6cd9d91 100644
--- a/src/resources/network.js
+++ b/src/resources/network.jsx
@@ -12,6 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React, { useEffect, useState } from 'react';
+import { Col, Empty, Popover, Row, Spin } from 'antd';
+import { FileTextOutlined } from '@ant-design/icons';
+import { SubnetStore } from 'stores/neutron/subnet';
+
 export const networkStatus = {
   ACTIVE: t('Active'),
   BUILD: t('Build'),
@@ -57,7 +62,19 @@ export const networkColumns = (self) => [
   {
     title: t('Subnet Count'),
     dataIndex: 'subnets',
-    render: (value) => (value && value.length) || 0,
+    render: (value, record) => {
+      const content = <PopUpSubnet subnetIds={record.subnets} />;
+      return (
+        <>
+          {(value && value.length) || 0}{' '}
+          {value && value.length !== 0 && (
+            <Popover content={content} destroyTooltipOnHide>
+              <FileTextOutlined />
+            </Popover>
+          )}
+        </>
+      );
+    },
     sorter: false,
   },
   {
@@ -97,3 +114,32 @@ export const getAnchorData = (num, y) => {
 };
 
 export const isExternalNetwork = (network) => !!network['router:external'];
+
+function PopUpSubnet({ subnetIds }) {
+  const [subnets, setSubnets] = useState(subnetIds);
+  const [isLoading, setLoaidng] = useState(false);
+  useEffect(() => {
+    setLoaidng(true);
+    (async function () {
+      const promises = subnets.map((i) =>
+        new SubnetStore().fetchDetail({ id: i })
+      );
+      const ret = await Promise.all(promises);
+      setSubnets(ret);
+      setLoaidng(false);
+    })();
+  }, []);
+  if (isLoading) {
+    return <Spin />;
+  }
+  return subnets.length === 0 ? (
+    <Empty />
+  ) : (
+    subnets.map((item, index) => (
+      <Row gutter={[24]} key={`${item}_${index}`} style={{ minWidth: 300 }}>
+        <Col span={12}>{item.name}</Col>
+        <Col span={12}>{item.cidr}</Col>
+      </Row>
+    ))
+  );
+}