- support create index on collections page

- code refactor

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

client/src/components/customSelector/Types.ts

@@ -1,9 +1,9 @@
 import { FormControlClassKey, SelectProps } from '@material-ui/core';
 import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 
-export interface Option {
-  label: string;
-  value: string | number;
+export interface Option<T = string, U = string | number> {
+  label: T;
+  value: U;
 }
 
 export interface GroupOption {

client/src/components/layout/Header.tsx

@@ -10,7 +10,7 @@ import {
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { useNavigate } from 'react-router-dom';
 import { navContext, dataContext, authContext } from '@/context';
-import { MilvusHttp } from '@/http';
+import { MilvusService } from '@/http';
 import { MILVUS_ADDRESS, LOGIN_USERNAME } from '@/consts';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import icons from '../icons/Icons';
@@ -90,15 +90,15 @@ const Header: FC<HeaderType> = props => {
     setAddress('');
     setUsername('');
     setIsAuth(false);
-    await MilvusHttp.closeConnection();
+    await MilvusService.closeConnection();
     window.localStorage.removeItem(MILVUS_ADDRESS);
     window.localStorage.removeItem(LOGIN_USERNAME);
     // make sure we clear state in all pages
     // navigate(0);
   };
 
   const useDatabase = async (database: string) => {
-    await MilvusHttp.useDatabase({ database });
+    await MilvusService.useDatabase({ database });
   };
 
   const dbOptions = databases.map(d => ({ value: d, label: d }));

client/src/components/status/Types.ts

@@ -1,15 +1,20 @@
 import { LOADING_STATE } from '@/consts';
+import { FieldHttp } from '@/http';
 
-// export enum StatusEnum {
-//   'unloaded',
-//   'loaded',
-//   'error',
-// }
 export type StatusType = {
   status: LOADING_STATE;
   percentage?: string;
 };
 
+export type StatusActionType = {
+  status: LOADING_STATE;
+  percentage?: string;
+  action?: Function;
+  field: FieldHttp;
+  collectionName: string;
+  onIndexCreate: Function;
+};
+
 // @todo need rename
 export enum ChildrenStatusType {
   CREATING = 'creating',

client/src/context/Auth.tsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from 'react';
 import { MILVUS_ADDRESS, LOGIN_USERNAME } from '@/consts';
-import { MilvusHttp } from '@/http';
+import { MilvusService } from '@/http';
 import { AuthContextType } from './Types';
 
 export const authContext = createContext<AuthContextType>({
@@ -33,7 +33,7 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       if (!milvusAddress) {
         return;
       }
-      const res = await MilvusHttp.check(milvusAddress);
+      const res = await MilvusService.check(milvusAddress);
       setAddress(res.connected ? milvusAddress : '');
       res.connected && setIsAuth(true);
       if (!res.connected) {

client/src/context/Data.tsx

@@ -1,5 +1,5 @@
 import { createContext, useEffect, useState, useContext } from 'react';
-import { DatabaseHttp, UserHttp, MilvusHttp } from '@/http';
+import { Database, User, MilvusService } from '@/http';
 import { parseJson, getNode, getSystemConfigs } from '@/utils';
 import { MILVUS_NODE_TYPE } from '@/consts';
 import { authContext } from '@/context';
@@ -24,10 +24,10 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
     try {
       // fetch all data
       const [databases, metrics, users, roles] = await Promise.all([
-        DatabaseHttp.getDatabases(),
-        MilvusHttp.getMetrics(),
-        UserHttp.getUsers(),
-        UserHttp.getRoles(),
+        Database.getDatabases(),
+        MilvusService.getMetrics(),
+        User.getUsers(),
+        User.getRoles(),
       ]);
 
       // parse data

client/src/context/Prometheus.tsx

@@ -13,7 +13,7 @@ import {
   WITH_PROMETHEUS,
 } from '@/consts';
 import { formatPrometheusAddress } from '@/utils';
-import { PrometheusHttp } from '@/http';
+import { PrometheusService } from '@/http';
 
 export const prometheusContext = createContext<PrometheusContextType>({
   withPrometheus: false,
@@ -59,7 +59,7 @@ export const PrometheusProvider = (props: { children: React.ReactNode }) => {
     if (withPrometheus) {
       const prometheusAddressformat =
         formatPrometheusAddress(prometheusAddress);
-      PrometheusHttp.setPrometheus({
+      PrometheusService.setPrometheus({
         prometheusAddress: prometheusAddressformat,
         prometheusInstance,
         prometheusNamespace,

client/src/context/Root.tsx

@@ -11,7 +11,7 @@ import {
 } from './Types';
 import CustomSnackBar from '@/components/customSnackBar/CustomSnackBar';
 import CustomDialog from '@/components/customDialog/CustomDialog';
-import { MilvusHttp } from '@/http';
+import { MilvusService } from '@/http';
 import { theme } from '../styles/theme';
 
 const DefaultDialogConfigs: DialogType = {
@@ -115,7 +115,7 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
   useEffect(() => {
     if (isAuth) {
       const fetchVersion = async () => {
-        const res = await MilvusHttp.getVersion();
+        const res = await MilvusService.getVersion();
         setVersionInfo(res);
       };
       fetchVersion();

client/src/context/Types.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
-import { CollectionView } from '@/pages/collections/Types';
+import { Collection } from '@/http';
 import { NavInfo } from '@/router/Types';
 
 export type RootContextType = {
@@ -90,6 +90,6 @@ export type NavContextType = {
 };
 
 export type WebSocketType = {
-  collections: CollectionView[];
-  setCollections: (data: CollectionView[]) => void;
+  collections: Collection[];
+  setCollections: (data: Collection[]) => void;
 };

client/src/context/WebSocket.tsx

@@ -1,8 +1,7 @@
 import { createContext, useContext, useEffect, useState, useRef } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { authContext } from '@/context';
-import { url, CollectionHttp, MilvusHttp } from '@/http';
-import { CollectionView } from '@/pages/collections/Types';
+import { url, Collection, MilvusService } from '@/http';
 import { checkIndexBuilding, checkLoading } from '@/utils';
 import { WebSocketType } from './Types';
 import { WS_EVENTS, WS_EVENTS_TYPE } from '@server/utils/Const';
@@ -15,13 +14,13 @@ export const webSocketContext = createContext<WebSocketType>({
 const { Provider } = webSocketContext;
 
 export const WebSocketProvider = (props: { children: React.ReactNode }) => {
-  const [collections, setCollections] = useState<CollectionView[]>([]);
+  const [collections, setCollections] = useState<Collection[]>([]);
   const { isAuth } = useContext(authContext);
   const socket = useRef<Socket | null>(null);
 
   useEffect(() => {
     if (isAuth) {
-      socket.current = io(url);
+      socket.current = io(url as string);
 
       socket.current.on('connect', function () {
         console.log('--- ws connected ---');
@@ -34,8 +33,8 @@ export const WebSocketProvider = (props: { children: React.ReactNode }) => {
        * After all collections are not loading or building index, tell server stop pulling data.
        */
       socket.current.on(WS_EVENTS.COLLECTION, (data: any) => {
-        const collections: CollectionHttp[] = data.map(
-          (v: any) => new CollectionHttp(v)
+        const collections: Collection[] = data.map(
+          (v: any) => new Collection(v)
         );
 
         const hasLoadingOrBuildingCollection = collections.some(
@@ -46,7 +45,7 @@ export const WebSocketProvider = (props: { children: React.ReactNode }) => {
         // If no collection is building index or loading collection
         // stop server cron job
         if (!hasLoadingOrBuildingCollection) {
-          MilvusHttp.triggerCron({
+          MilvusService.triggerCron({
             name: WS_EVENTS.COLLECTION,
             type: WS_EVENTS_TYPE.STOP,
           });

client/src/http/BaseModel.ts

@@ -41,7 +41,7 @@ export default class BaseModel {
     );
   }
 
-  static async search(data: findParamsType) {
+  static async search<T>(data: findParamsType) {
     const { method = 'get', params = {}, path = '', timeout } = data;
     const httpConfig = {
       method,
@@ -50,26 +50,26 @@ export default class BaseModel {
     } as any;
     if (timeout) httpConfig.timeout = timeout;
     const res = await http(httpConfig);
-    return new this(res.data.data || {});
+    return new this(res.data.data || {}) as T;
   }
 
   /**
    * Create instance in database
    */
-  static async create(options: updateParamsType) {
+  static async create<T>(options: updateParamsType) {
     const { path, data } = options;
     const res = await http.post(path, data);
-    return new this(res.data.data || {});
+    return new this(res.data.data || {}) as T;
   }
 
-  static async update(options: updateParamsType) {
+  static async update<T>(options: updateParamsType) {
     const { path, data } = options;
     const res = await http.put(path, data);
 
-    return new this(res.data.data || {});
+    return new this(res.data.data || {}) as T;
   }
 
-  static async delete(options: updateParamsType) {
+  static async delete<T>(options: updateParamsType) {
     const { path, data } = options;
 
     const res = await http.delete(path, { data: data });