add partition table

client/src/http/BaseModel.ts

@@ -27,7 +27,7 @@ export default class BaseModel {
     };
 
     const res = await http(httpConfig);
-    let list = res.data.data.data || [];
+    let list = res.data.data || [];
     if (!Array.isArray(list)) {
       return list;
     }

client/src/http/Partition.ts

@@ -0,0 +1,39 @@
+import { StatusEnum } from '../components/status/Types';
+import { PartitionView } from '../pages/partitions/Types';
+import { formatNumber } from '../utils/Common';
+import BaseModel from './BaseModel';
+
+export class PartitionHttp extends BaseModel implements PartitionView {
+  id!: string;
+  name!: string;
+  rowCount!: string;
+  status!: StatusEnum;
+
+  constructor(props: {}) {
+    super(props);
+    Object.assign(this, props);
+  }
+
+  static getPartitions(collectionName: string): Promise<PartitionHttp[]> {
+    const path = '/partitions';
+
+    return super.findAll({ path, params: { collection_name: collectionName } });
+  }
+
+  get _id() {
+    return this.id;
+  }
+
+  get _name() {
+    return this.name;
+  }
+
+  get _rowCount() {
+    return formatNumber(Number(this.rowCount));
+  }
+
+  get _status() {
+    // @TODO replace mock data
+    return StatusEnum.unloaded;
+  }
+}

client/src/pages/collections/Collection.tsx

@@ -8,9 +8,8 @@ import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
 import { PartitionView } from '../partitions/Types';
 import { parseLocationSearch } from '../../utils/Format';
-import { StatusEnum } from '../../components/status/Types';
 import Status from '../../components/status/Status';
-import { formatNumber } from '../../utils/Common';
+import { PartitionHttp } from '../../http/Partition';
 
 const Collection = () => {
   const { collectionName = '' } =
@@ -20,7 +19,7 @@ const Collection = () => {
 
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTION_DETAIL, { collectionName });
   const [partitions, setPartitions] = useState<PartitionView[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const history = useHistory();
   const location = useLocation();
@@ -42,21 +41,26 @@ const Collection = () => {
   const handleTabChange = (activeIndex: number) => {
     const path = location.pathname;
     history.push(`${path}?activeIndex=${activeIndex}`);
+
+    // fetch data
+    if (activeIndex === TAB_EMUM.partition) {
+      fetchPartitions(collectionName);
+    }
   };
 
-  useEffect(() => {
-    const mockPartitions: PartitionView[] = [
-      {
-        id: '1',
-        name: 'partition',
-        status: StatusEnum.unloaded,
-        statusElement: <Status status={StatusEnum.unloaded} />,
-        rowCount: formatNumber(11223),
-      },
-    ];
+  const fetchPartitions = async (collectionName: string) => {
+    const res = await PartitionHttp.getPartitions(collectionName);
 
-    setPartitions(mockPartitions);
-  }, []);
+    const partitons: PartitionView[] = res.map(p =>
+      Object.assign(p, { _statusElement: <Status status={p._status} /> })
+    );
+    setLoading(false);
+    setPartitions(partitons);
+  };
+
+  useEffect(() => {
+    fetchPartitions(collectionName);
+  }, [collectionName]);
 
   const tabs: ITab[] = [
     {

client/src/pages/collections/Collections.tsx

@@ -68,15 +68,15 @@ const Collections = () => {
   useEffect(() => {
     const mockCollections: CollectionView[] = [
       {
-        name: 'collection',
+        name: 'collection_1',
         nameElement: (
           <Link
             component="button"
-            onClick={() => history.push(`/collection/collection`)}
+            onClick={() => history.push(`/collection/collection_1`)}
             underline="always"
             color="textPrimary"
           >
-            collection
+            collection_1
           </Link>
         ),
         id: 'c1',

client/src/pages/partitions/Types.ts

@@ -2,9 +2,9 @@ import { ReactElement } from 'react';
 import { StatusEnum } from '../../components/status/Types';
 
 export interface PartitionView {
-  id: string;
-  name: string;
-  status: StatusEnum;
-  statusElement: ReactElement;
-  rowCount: string;
+  _id: string;
+  _name: string;
+  _status: StatusEnum;
+  _statusElement?: ReactElement;
+  _rowCount: string;
 }

client/src/pages/partitions/partitions.tsx

@@ -54,25 +54,25 @@ const Partitions: FC<{ data: PartitionView[]; loading: boolean }> = ({
 
   const colDefinitions: ColDefinitionsType[] = [
     {
-      id: 'id',
+      id: '_id',
       align: 'left',
       disablePadding: true,
       label: t('id'),
     },
     {
-      id: 'name',
+      id: '_name',
       align: 'left',
       disablePadding: false,
       label: t('name'),
     },
     {
-      id: 'statusElement',
+      id: '_statusElement',
       align: 'left',
       disablePadding: false,
       label: t('status'),
     },
     {
-      id: 'rowCount',
+      id: '_rowCount',
       align: 'left',
       disablePadding: false,
       label: (