chore: worker added message

src/pages/cluster-management/components/add-worker/add-worker-step.tsx

@@ -1,4 +1,5 @@
 import AlertInfoBlock from '@/components/alert-info/block';
+import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import React from 'react';
@@ -56,14 +57,21 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
     onClusterChange
   } = props || {};
   const intl = useIntl();
-  const { update, summary, register } = useSummaryStatus();
 
   const [collapseKey, setCollapseKey] = React.useState<Set<string>>(
     new Set([stepList[0]])
   );
+  const startWatchRef = React.useRef(false);
+  const { update, summary, register } = useSummaryStatus();
+  const { contextHolder, createModelsChunkRequest } = useAddWorkerMessage({
+    startWatch: startWatchRef
+  });
 
   const onToggle = (open: boolean, key: string) => {
     setCollapseKey(open ? new Set([key]) : new Set());
+    if (key === StepNamesMap.RunCommand && open) {
+      startWatchRef.current = true;
+    }
   };
 
   const handleOnClusterChange = (value: number, row?: any) => {
@@ -75,6 +83,10 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
     setCollapseKey(new Set([stepList[0]]));
   }, [stepList]);
 
+  React.useEffect(() => {
+    createModelsChunkRequest();
+  }, []);
+
   return (
     <AddWorkerContext.Provider
       value={{
@@ -128,6 +140,7 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
           </>
         )}
       </Container>
+      {contextHolder}
     </AddWorkerContext.Provider>
   );
 };

src/pages/cluster-management/hooks/use-add-worker-message.ts

@@ -0,0 +1,64 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import { useIntl } from '@umijs/max';
+import { message } from 'antd';
+import _ from 'lodash';
+import { useRef } from 'react';
+import { WORKERS_API } from '../../resources/apis';
+
+export default function useAddWorkerMessage(params: {
+  startWatch?: React.RefObject<boolean>;
+}) {
+  const chunkRequestRef = useRef<any>(null);
+  const newItemsRef = useRef<any[]>([]);
+  const intl = useIntl();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const showAddWorkerMessage = _.debounce(() => {
+    if (newItemsRef.current.length > 0) {
+      const count = newItemsRef.current.length;
+      messageApi.success(
+        intl.formatMessage(
+          { id: 'clusters.addworker.message.success' },
+          { count }
+        )
+      );
+      newItemsRef.current = [];
+    }
+  }, 300);
+
+  const { setChunkRequest } = useSetChunkRequest();
+  const { updateChunkedList } = useUpdateChunkedList({
+    events: ['CREATE', 'INSERT'],
+    dataList: [],
+    onCreate: (newItems: any) => {
+      if (params.startWatch?.current) {
+        newItemsRef.current = newItemsRef.current.concat(newItems);
+        showAddWorkerMessage();
+      }
+    }
+  });
+
+  const updateHandler = (list: any) => {
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+
+  const createModelsChunkRequest = async () => {
+    chunkRequestRef.current?.current?.cancel?.();
+    try {
+      chunkRequestRef.current = setChunkRequest({
+        url: WORKERS_API,
+        handler: updateHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+
+  return {
+    contextHolder,
+    createModelsChunkRequest
+  };
+}

src/pages/resources/components/workers.tsx

@@ -48,6 +48,7 @@ const Workers: React.FC = () => {
   } = useTableFetch<ListItem>({
     fetchAPI: queryWorkersList,
     deleteAPI: deleteWorker,
+    events: ['UPDATE', 'DELETE', 'INSERT'],
     contentForDelete: 'resources.worker',
     watch: true,
     API: WORKERS_API