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

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>
     );
   }

src/components/FormItem/NetworkSelect/index.less

@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 .network-select {
   display: block;
   height: 61.6px;
@@ -34,3 +34,10 @@
 .content {
   color: @color-text-body;
 }
+
+.subnet_options_cidr {
+  padding-left: 5px;
+  margin-left: 5px;
+  opacity: 0.6;
+  border-left: 1px solid;
+}

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>
+    ))
+  );
+}