feat: update Popover component

1. Update Popover component: support custom icon, title; support another data fetch func for only one request; suport pagination setting in table
2. Update PopoverSubnets components to support title
3. Update network-select-table component subnet display: update subnet's
count to title, when hover it, the popover will show

Change-Id: I5ca81146a7392b797f9f27d95c5d9cbf715d5e3d

src/components/Popover/Popover.jsx

@@ -27,15 +27,21 @@ const getColumn = (column) => {
   };
 };
 
-function PopupResources({ getRequests, columns }) {
+function PopupResources({ getRequests, getData, columns, pagination }) {
   const [data, setData] = useState([]);
   const [isLoading, setLoading] = useState(true);
   useEffect(() => {
     const fetchData = async () => {
-      const requests = getRequests();
+      if (getData) {
-      const ret = await Promise.all(requests);
+        const ret = await getData();
-      setData(ret);
+        setData(ret);
-      setLoading(false);
+        setLoading(false);
+      } else if (getRequests) {
+        const requests = getRequests();
+        const ret = await Promise.all(requests);
+        setData(ret);
+        setLoading(false);
+      }
     };
     fetchData();
   }, []);
@@ -44,20 +50,37 @@ function PopupResources({ getRequests, columns }) {
   }
   const currentColumns = columns.map((c) => getColumn(c));
   return (
-    <Table columns={currentColumns} dataSource={data} pagination={false} />
+    <Table columns={currentColumns} dataSource={data} pagination={pagination} />
   );
 }
 
 const IPopoverProps = {
   columns: PropTypes.array.isRequired,
-  getRequests: PropTypes.func.isRequired,
+  getRequests: PropTypes.func,
+  getData: PropTypes.func,
+  title: PropTypes.any,
   placement: PropTypes.string,
+  pagination: PropTypes.any,
+  icon: PropTypes.any,
 };
 
 export default function IPopover(props) {
-  const { columns = [], getRequests, ...rest } = props;
+  const {
+    columns = [],
+    getRequests,
+    getData,
+    title,
+    pagination = false,
+    icon = <FileTextOutlined style={{ cursor: 'pointer' }} />,
+    ...rest
+  } = props;
   const content = (
-    <PopupResources columns={columns} getRequests={getRequests} />
+    <PopupResources
+      columns={columns}
+      getRequests={getRequests}
+      getData={getData}
+      pagination={pagination}
+    />
   );
   return (
     <>
@@ -67,7 +90,7 @@ export default function IPopover(props) {
         mouseEnterDelay={0.5}
         {...rest}
       >
-        <FileTextOutlined style={{ cursor: 'pointer' }} />
+        {title}&nbsp;{icon}
       </Popover>
     </>
   );

src/components/Popover/PopoverSubnets.jsx

@@ -17,7 +17,7 @@ import { SubnetStore } from 'stores/neutron/subnet';
 import IPopover from './Popover';
 
 export default function PopoverSubnets(props) {
-  const { subnetIds = [] } = props;
+  const { subnetIds = [], title = '' } = props;
   if (!subnetIds.length) {
     return null;
   }
@@ -34,5 +34,5 @@ export default function PopoverSubnets(props) {
       title: t('CIDR'),
     },
   ];
-  return <IPopover columns={columns} getRequests={getRequests} />;
+  return <IPopover columns={columns} getRequests={getRequests} title={title} />;
 }

src/resources/neutron/network.jsx

@@ -61,14 +61,11 @@ export const networkColumns = (self) => [
     title: t('Subnet Count'),
     dataIndex: 'subnets',
     render: (value, record) => {
-      return (
+      const count = (value || []).length;
-        <>
+      if (count === 0) {
-          {(value && value.length) || 0}{' '}
+        return count;
-          {value && value.length !== 0 && (
+      }
-            <PopoverSubnets subnetIds={record.subnets} />
+      return <PopoverSubnets subnetIds={record.subnets} title={count} />;
-          )}
-        </>
-      );
     },
     stringify: (subnets) => `${subnets.length}(${subnets.join(',')})`,
     sorter: false,