improve load collection UI performance (#451)

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

client/src/context/Data.tsx

@@ -19,7 +19,7 @@ import {
   CollectionFullObject,
   DatabaseObject,
 } from '@server/types';
-import { WS_EVENTS, WS_EVENTS_TYPE } from '@server/utils/Const';
+import { WS_EVENTS, WS_EVENTS_TYPE, LOADING_STATE } from '@server/utils/Const';
 import { checkIndexing, checkLoading } from '@server/utils/Shared';
 
 export const dataContext = createContext<DataContextType>({
@@ -43,12 +43,8 @@ export const dataContext = createContext<DataContextType>({
   createCollection: async () => {
     return {} as CollectionFullObject;
   },
-  loadCollection: async () => {
-    return {} as CollectionFullObject;
-  },
-  releaseCollection: async () => {
-    return {} as CollectionFullObject;
-  },
+  loadCollection: async () => {},
+  releaseCollection: async () => {},
   renameCollection: async () => {
     return {} as CollectionFullObject;
   },
@@ -223,21 +219,27 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
   // API: load collection
   const loadCollection = async (name: string, param?: any) => {
     // load collection
-    const newCollection = await CollectionService.loadCollection(name, param);
-    // update collection
-    updateCollections([newCollection]);
+    await CollectionService.loadCollection(name, param);
+
+    // find the collection in the collections
+    const collection = collections.find(
+      v => v.collection_name === name
+    ) as CollectionFullObject;
+    // update collection infomation
+    if (collection) {
+      collection.loadedPercentage = 0;
+      collection.loaded = false;
+      collection.status = LOADING_STATE.LOADING;
+    }
 
-    return newCollection;
+    // update collection, and trigger cron job
+    updateCollections([collection]);
   };
 
   // API: release collection
   const releaseCollection = async (name: string) => {
     // release collection
-    const newCollection = await CollectionService.releaseCollection(name);
-    // update collection
-    updateCollections([newCollection]);
-
-    return newCollection;
+    await CollectionService.releaseCollection(name);
   };
 
   // API: rename collection

client/src/context/Types.ts

@@ -115,8 +115,8 @@ export type DataContextType = {
   fetchCollections: () => Promise<void>;
   fetchCollection: (name: string) => Promise<CollectionFullObject>;
   createCollection: (data: any) => Promise<CollectionFullObject>;
-  loadCollection: (name: string, param?: any) => Promise<CollectionFullObject>;
-  releaseCollection: (name: string) => Promise<CollectionFullObject>;
+  loadCollection: (name: string, param?: any) => Promise<void>;
+  releaseCollection: (name: string) => Promise<void>;
   renameCollection: (
     name: string,
     newName: string

client/src/http/Collection.service.ts

@@ -39,14 +39,14 @@ export class CollectionService extends BaseModel {
   }
 
   static loadCollection(collectionName: string, param?: LoadReplicaReq) {
-    return super.update<CollectionFullObject>({
+    return super.update<string>({
       path: `/collections/${collectionName}/load`,
       data: param,
     });
   }
 
   static releaseCollection(collectionName: string) {
-    return super.update<CollectionFullObject>({
+    return super.update<string>({
       path: `/collections/${collectionName}/release`,
     });
   }

server/src/collections/collections.service.ts

@@ -173,11 +173,7 @@ export class CollectionsService {
     const res = await milvusClient.loadCollection(data);
     throwErrorFromSDK(res);
 
-    const newCollection = (await this.getAllCollections(clientId, [
-      data.collection_name,
-    ])) as CollectionFullObject[];
-
-    return newCollection[0];
+    return data.collection_name;
   }
 
   async releaseCollection(clientId: string, data: ReleaseLoadCollectionReq) {
@@ -185,11 +181,10 @@ export class CollectionsService {
     const res = await milvusClient.releaseCollection(data);
     throwErrorFromSDK(res);
 
-    const newCollection = (await this.getAllCollections(clientId, [
-      data.collection_name,
-    ])) as CollectionFullObject[];
+    // emit update to client
+    this.updateCollectionsDetails(clientId, [data.collection_name]);
 
-    return newCollection[0];
+    return data.collection_name;
   }
 
   async getCollectionStatistics(
@@ -379,8 +374,8 @@ export class CollectionsService {
       loadedPercentage === -1
         ? LOADING_STATE.UNLOADED
         : loadedPercentage === 100
-        ? LOADING_STATE.LOADED
-        : LOADING_STATE.LOADING;
+          ? LOADING_STATE.LOADED
+          : LOADING_STATE.LOADING;
 
     return {
       collection_name: collection.name,
@@ -456,17 +451,7 @@ export class CollectionsService {
         if (q.isObseleted) {
           return;
         }
-        try {
-          // get current socket
-          const socketClient = clients.get(clientId);
-          // get collections
-          const res = await this.getAllCollections(clientId, collectionsToGet);
-
-          // emit event to current client
-          socketClient.emit(WS_EVENTS.COLLECTION_UPDATE, res);
-        } catch (e) {
-          console.log('ignore queue error');
-        }
+        await this.updateCollectionsDetails(clientId, collectionsToGet);
       }, 5);
     }
 
@@ -485,6 +470,22 @@ export class CollectionsService {
     return data;
   }
 
+  // update collections details
+  // send new info to the client
+  async updateCollectionsDetails(clientId: string, collections: string[]) {
+    try {
+      // get current socket
+      const socketClient = clients.get(clientId);
+      // get collections
+      const res = await this.getAllCollections(clientId, collections);
+
+      // emit event to current client
+      socketClient.emit(WS_EVENTS.COLLECTION_UPDATE, res);
+    } catch (e) {
+      console.log('ignore queue error');
+    }
+  }
+
   async getLoadedCollections(clientId: string) {
     const data = [];
     const res = await this.showCollections(clientId, {