refactor segment api and page (#408)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/http/Segment.service.ts

@@ -0,0 +1,32 @@
+import BaseModel from './BaseModel';
+import {
+  GetQuerySegmentInfoResponse,
+  GePersistentSegmentInfoResponse,
+} from '@server/types';
+
+export class SegementService extends BaseModel {
+  constructor(props: {}) {
+    super(props);
+    Object.assign(this, props);
+  }
+
+  static getQSegments(collectionName: string) {
+    return super.search<GetQuerySegmentInfoResponse>({
+      path: `/collections/${collectionName}/qsegments`,
+      params: {},
+    });
+  }
+
+  static getPSegments(collectionName: string) {
+    return super.search<GePersistentSegmentInfoResponse>({
+      path: `/collections/${collectionName}/psegments`,
+      params: {},
+    });
+  }
+
+  static compact(collectionName: string) {
+    return super.update({
+      path: `/collections/${collectionName}/compact`,
+    });
+  }
+}

client/src/http/Segment.ts

@@ -1,38 +0,0 @@
-import BaseModel from './BaseModel';
-import {
-  GetQuerySegmentInfoResponse,
-  QuerySegmentInfo,
-  GePersistentSegmentInfoResponse,
-  PersistentSegmentInfo,
-} from '@server/types';
-
-export class Segement extends BaseModel {
-  static COLLECTIONS_URL = '/collections';
-
-  infos!: QuerySegmentInfo[] | PersistentSegmentInfo[];
-
-  constructor(props: {}) {
-    super(props);
-    Object.assign(this, props);
-  }
-
-  static getQSegments(collectionName: string) {
-    return super.search({
-      path: `${this.COLLECTIONS_URL}/${collectionName}/qsegments`,
-      params: {},
-    }) as Promise<GetQuerySegmentInfoResponse>;
-  }
-
-  static getPSegments(collectionName: string) {
-    return super.search({
-      path: `${this.COLLECTIONS_URL}/${collectionName}/psegments`,
-      params: {},
-    }) as Promise<GePersistentSegmentInfoResponse>;
-  }
-
-  static compact(collectionName: string) {
-    return super.update({
-      path: `${this.COLLECTIONS_URL}/${collectionName}/compact`,
-    });
-  }
-}

client/src/http/index.ts

@@ -5,7 +5,6 @@ export * from './Collection';
 export * from './MilvusIndex';
 export * from './Field';
 export * from './User';
-export * from './Segment';
 
 // service
 export * from './Partition.service';
@@ -13,3 +12,4 @@ export * from './Data.service';
 export * from './Milvus.service';
 export * from './Database.service';
 export * from './Prometheus.service';
+export * from './Segment.service';

client/src/pages/dialogs/CompactDialog.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { CompactDialogProps } from './Types';
-import { Segement } from '@/http';
+import { SegementService } from '@/http';
 
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {
@@ -21,12 +21,11 @@ const CompactDialog: FC<CompactDialogProps> = props => {
 
   const { handleCloseDialog } = useContext(rootContext);
   const { t: dialogTrans } = useTranslation('dialog');
-  const { t: warningTrans } = useTranslation('warning');
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
 
   const handleConfirm = async () => {
-    await Segement.compact(collectionName);
+    await SegementService.compact(collectionName);
 
     handleCloseDialog();
     cb && cb();

client/src/pages/segments/Segments.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { Segement } from '@/http';
+import { SegementService } from '@/http';
 import { usePaginationHook } from '@/hooks';
 import { rootContext } from '@/context';
 import AttuGrid from '@/components/grid/Grid';
@@ -27,8 +27,10 @@ const Segments = () => {
   const fetchSegments = async () => {
     setLoading(true);
 
-    const psegments = (await Segement.getPSegments(collectionName)) || {};
-    const qsegments = (await Segement.getQSegments(collectionName)) || {};
+    const psegments =
+      (await SegementService.getPSegments(collectionName)) || {};
+    const qsegments =
+      (await SegementService.getQSegments(collectionName)) || {};
     const combinedArray = psegments.infos.map(p => {
       const q: any =
         qsegments.infos.find(q => q.segmentID === p.segmentID)! || {};
@@ -50,15 +52,6 @@ const Segments = () => {
   };
 
   const toolbarConfigs: ToolBarConfig[] = [
-    {
-      type: 'button',
-      btnVariant: 'text',
-      onClick: () => {
-        fetchSegments();
-      },
-      label: btnTrans('refresh'),
-      icon: 'refresh',
-    },
     {
       type: 'button',
       btnVariant: 'text',
@@ -99,6 +92,15 @@ const Segments = () => {
       label: btnTrans('flush'),
       icon: 'saveAs',
     },
+    {
+      type: 'button',
+      btnVariant: 'text',
+      onClick: () => {
+        fetchSegments();
+      },
+      label: btnTrans('refresh'),
+      icon: 'refresh',
+    },
   ];
 
   const colDefinitions: ColDefinitionsType[] = [