refactor: Refactor popover resource component

1. Add Popover component
2. Refactor popover subnets component

Change-Id: I41399a60cd343ac7c5fe44bf291d686d8565db76

src/components/Popover/Popover.jsx

@@ -0,0 +1,63 @@
+// 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, { useEffect, useState } from 'react';
+import { Popover, Spin, Table } from 'antd';
+import { FileTextOutlined } from '@ant-design/icons';
+import PropTypes from 'prop-types';
+
+function PopupResources({ getRequests, columns }) {
+  const [data, setData] = useState([]);
+  const [isLoading, setLoading] = useState(true);
+  useEffect(() => {
+    const fetchData = async () => {
+      const requests = getRequests();
+      const ret = await Promise.all(requests);
+      setData(ret);
+      setLoading(false);
+    };
+    fetchData();
+  }, []);
+  if (isLoading) {
+    return <Spin />;
+  }
+  return <Table columns={columns} dataSource={data} pagination={false} />;
+}
+
+const IPopoverProps = {
+  columns: PropTypes.array.isRequired,
+  getRequests: PropTypes.func.isRequired,
+  placement: PropTypes.string,
+};
+
+export default function IPopover(props) {
+  const { columns = [], getRequests, ...rest } = props;
+  const content = (
+    <PopupResources columns={columns} getRequests={getRequests} />
+  );
+  return (
+    <>
+      <Popover
+        content={content}
+        destroyTooltipOnHide
+        mouseEnterDelay={0.5}
+        {...rest}
+      >
+        <FileTextOutlined style={{ cursor: 'pointer' }} />
+      </Popover>
+    </>
+  );
+}
+
+IPopover.propTypes = IPopoverProps;

src/components/Popover/PopoverSubnets.jsx

@@ -0,0 +1,38 @@
+// 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 { SubnetStore } from 'stores/neutron/subnet';
+import IPopover from './Popover';
+
+export default function PopOverSubnets(props) {
+  const { subnetIds = [] } = props;
+  if (!subnetIds.length) {
+    return null;
+  }
+  const getRequests = () => {
+    return subnetIds.map((i) => new SubnetStore().fetchDetail({ id: i }));
+  };
+  const columns = [
+    {
+      dataIndex: 'name',
+      title: t('Name'),
+    },
+    {
+      dataIndex: 'cidr',
+      title: t('CIDR'),
+    },
+  ];
+  return <IPopover columns={columns} getRequests={getRequests} />;
+}

src/resources/network.jsx

@@ -12,10 +12,8 @@
 // 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';
+import React from 'react';
+import PopoverSubnets from 'components/Popover/PopoverSubnets';
 
 export const networkStatus = {
   ACTIVE: t('Active'),
@@ -63,14 +61,11 @@ export const networkColumns = (self) => [
     title: t('Subnet Count'),
     dataIndex: 'subnets',
     render: (value, record) => {
-      const content = <PopUpSubnet subnetIds={record.subnets} />;
       return (
         <>
           {(value && value.length) || 0}{' '}
           {value && value.length !== 0 && (
-            <Popover content={content} destroyTooltipOnHide>
-              <FileTextOutlined />
-            </Popover>
+            <PopoverSubnets subnetIds={record.subnets} />
           )}
         </>
       );
@@ -116,35 +111,6 @@ export const getAnchorData = (num, y) => {
 
 export const isExternalNetwork = (network) => !!network['router:external'];
 
-function PopUpSubnet({ subnetIds }) {
-  const [subnets, setSubnets] = useState(subnetIds);
-  const [isLoading, setLoading] = useState(false);
-  useEffect(() => {
-    setLoading(true);
-    (async function () {
-      const promises = subnets.map((i) =>
-        new SubnetStore().fetchDetail({ id: i })
-      );
-      const ret = await Promise.all(promises);
-      setSubnets(ret);
-      setLoading(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>
-    ))
-  );
-}
-
 export const subnetIpv6Tip = t(
   'Default is slaac, for details, see https://docs.openstack.org/neutron/latest/admin/config-ipv6.html'
 );