Merge pull request #227 from nameczz/dev

Add ws for overview page

client/src/context/WebSocket.tsx

@@ -18,7 +18,6 @@ const { Provider } = webSokcetContext;
 export const WebSocketProvider = (props: { children: React.ReactNode }) => {
   const [collections, setCollections] = useState<CollectionView[]>([]);
 
-  // test code for socket
   useEffect(() => {
     const socket = io(url);
 
@@ -52,6 +51,7 @@ export const WebSocketProvider = (props: { children: React.ReactNode }) => {
       }
     });
   }, []);
+
   return (
     <Provider
       value={{

client/src/pages/overview/Overview.tsx

@@ -3,13 +3,17 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import EmptyCard from '../../components/cards/EmptyCard';
 import icons from '../../components/icons/Icons';
+import { WS_EVENTS, WS_EVENTS_TYPE } from '../../consts/Http';
 import { LOADING_STATE } from '../../consts/Milvus';
 import { rootContext } from '../../context/Root';
+import { webSokcetContext } from '../../context/WebSocket';
 import { useLoadAndReleaseDialogHook } from '../../hooks/Dialog';
 import { useNavigationHook } from '../../hooks/Navigation';
 import { CollectionHttp } from '../../http/Collection';
+import { MilvusHttp } from '../../http/Milvus';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
 import { formatNumber } from '../../utils/Common';
+import { checkLoading, checkIndexBuilding } from '../../utils/Validation';
 import { CollectionData } from '../collections/Types';
 import CollectionCard from './collectionCard/CollectionCard';
 import StatisticsCard from './statisticsCard/StatisticsCard';
@@ -44,25 +48,38 @@ const Overview = () => {
   });
   const [loading, setLoading] = useState(false);
 
-  const [loadCollections, setLoadCollections] = useState<CollectionHttp[]>([]);
+  const { collections, setCollections } = useContext(webSokcetContext);
+
   const { openSnackBar } = useContext(rootContext);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
     const res = await CollectionHttp.getStatistics();
     const collections = await CollectionHttp.getCollections();
-    const loadCollections = collections.filter(
-      c => c._status !== LOADING_STATE.UNLOADED
+    const hasLoadingOrBuildingCollection = collections.some(
+      v => checkLoading(v) || checkIndexBuilding(v)
     );
+    // if some collection is building index or loading, start pulling data
+    if (hasLoadingOrBuildingCollection) {
+      MilvusHttp.triggerCron({
+        name: WS_EVENTS.COLLECTION,
+        type: WS_EVENTS_TYPE.START,
+      });
+    }
     setStatistics(res);
-    setLoadCollections(loadCollections);
+    setCollections(collections);
     setLoading(false);
-  }, []);
+  }, [setCollections]);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
+  const loadCollections = useMemo(
+    () => collections.filter(c => c._status !== LOADING_STATE.UNLOADED),
+    [collections]
+  );
+
   const fetchRelease = async (data: CollectionData) => {
     const name = data._name;
     const res = await CollectionHttp.releaseCollection(name);

server/src/crons/crons.service.ts

@@ -21,8 +21,17 @@ export class CronsService {
 
   @Cron(CronExpression.EVERY_SECOND, { name: WS_EVENTS.COLLECTION })
   async getCollections() {
-    const res = await this.collectionService.getAllCollections();
-    this.eventService.server.emit(WS_EVENTS.COLLECTION, res);
-    return res;
+    try {
+      const res = await this.collectionService.getAllCollections();
+      this.eventService.server.emit(WS_EVENTS.COLLECTION, res);
+      return res;
+    } catch (error) {
+      // When user not connect milvus, stop cron
+      this.toggleCronJobByName({
+        name: WS_EVENTS.COLLECTION,
+        type: WS_EVENTS_TYPE.STOP,
+      });
+      throw new Error(error);
+    }
   }
 }

server/src/milvus/milvus.service.ts

@@ -19,21 +19,31 @@ export class MilvusService {
   }
 
   get collectionManager() {
+    this.checkMilvus();
     return this.milvusClient.collectionManager;
   }
 
   get partitionManager() {
+    this.checkMilvus();
     return this.milvusClient.partitionManager;
   }
 
   get indexManager() {
+    this.checkMilvus();
     return this.milvusClient.indexManager;
   }
 
   get dataManager() {
+    this.checkMilvus();
     return this.milvusClient.dataManager;
   }
 
+  private checkMilvus() {
+    if (!this.milvusClient) {
+      throw new Error('Please connect milvus first');
+    }
+  }
+
   async connectMilvus(address: string) {
     // grpc only need address without http
     const milvusAddress = address.replace(/(http|https):\/\//, '');