chore: worker added message

src/hooks/use-update-chunk-list.ts

@@ -15,7 +15,10 @@ export function useUpdateChunkedList(options: {
   events?: EventsType[];
   dataList?: any[];
   limit?: number;
-  setDataList: (args: any, opts?: any) => void;
+  onCreate?: (args: any) => void;
+  onUpdate?: (args: any) => void;
+  onDelete?: (args: any) => void;
+  setDataList?: (args: any, opts?: any) => void;
   callback?: (args: any) => void;
   filterFun?: (args: any) => boolean;
   mapFun?: (args: any) => any;
@@ -56,6 +59,7 @@ export function useUpdateChunkedList(options: {
       collections = data?.collection?.map(options?.mapFun);
     }
     const ids: any[] = data?.ids || [];
+
     // CREATE
     if (data?.type === WatchEventType.CREATE && events.includes('CREATE')) {
       const newDataList = collections.reduce((acc: any[], item: any) => {
@@ -71,11 +75,15 @@ export function useUpdateChunkedList(options: {
 
         return acc;
       }, []);
+
       cacheDataListRef.current = [
         ...newDataList,
         ...cacheDataListRef.current
       ].slice(0, limit);
+
+      options.onCreate?.(newDataList);
     }
+
     // DELETE
     if (data?.type === WatchEventType.DELETE && events.includes('DELETE')) {
       cacheDataListRef.current = cacheDataListRef.current?.filter(
@@ -88,6 +96,7 @@ export function useUpdateChunkedList(options: {
         deletedIds: [...deletedIdsRef.current]
       });
     }
+
     // UPDATE
     if (data?.type === WatchEventType.UPDATE && events.includes('UPDATE')) {
       collections?.forEach((item: any) => {
@@ -102,6 +111,7 @@ export function useUpdateChunkedList(options: {
             updateItem,
             ...cacheDataListRef.current.slice(0, limit - 1)
           ];
+          options.onCreate?.([updateItem]);
         }
       });
     }

src/locales/en-US/clusters.ts

@@ -88,5 +88,7 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
   'clusters.addworker.vendorNotes.title': 'Notes for {vendor} Device',
   'clusters.button.genToken':
     'Need to create a new token? Click <a href="{link}" target="_blank">here</a>.',
-  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`
+  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`,
+  'clusters.addworker.message.success':
+    '{count} workers have been added to the cluster.'
 };

src/locales/ja-JP/clusters.ts

@@ -88,7 +88,9 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
   'clusters.addworker.vendorNotes.title': 'Notes for {vendor} Device',
   'clusters.button.genToken':
     'Need to create a new token? Click <a href="{link}" target="_blank">here</a>.',
-  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`
+  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`,
+  'clusters.addworker.message.success':
+    '{count} workers have been added to the cluster.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -165,4 +167,5 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
 // 71.  'clusters.addworker.cacheVolume': 'Model Cache Volume Mount',
 // 72.  'clusters.addworker.cacheVolume.tips': 'If you want to customize the model cache directory, you can specify the path to mount it.',
 // 73. 'clusters.addworker.cacheVolume.holder': 'e.g. /data/cache (path must start with /)',
+// 74. 'clusters.addworker.message.success': '{count} workers have been added to the cluster.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -88,7 +88,9 @@ export default {
   'clusters.addworker.vendorNotes.title': 'Примечания для устройств {vendor}',
   'clusters.button.genToken':
     'Need to create a new token? Click <a href="{link}" target="_blank">here</a>.',
-  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`
+  'clusters.addworker.amdNotes-01': `If the <span class="bold-text">/opt/rocm</span> directory does not exist, please create a symbolic link pointing to the ROCm installed path: <span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>.`,
+  'clusters.addworker.message.success':
+    '{count} workers have been added to the cluster.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -96,4 +98,5 @@ export default {
 // 2. 'clusters.button.genToken': 'Need to create a new token? Click <a href="{link}" target="_blank">here</a>.',
 // 3. 'clusters.addworker.cacheVolume': 'Model Cache Volume Mount',
 // 4. 'clusters.addworker.cacheVolume.tips': 'If you want to customize the model cache directory, you can specify the path to mount it.',
+// 5. 'clusters.addworker.message.success': '{count} workers have been added to the cluster.'
 // ================================================================

src/locales/zh-CN/clusters.ts

@@ -87,5 +87,6 @@ export default {
   'clusters.button.genToken':
     '需要创建令牌？点击<a href="{link}" target="_blank">这里</a>。',
   'clusters.addworker.amdNotes-01':
-    '如果 <span class="bold-text">/opt/rocm</span> 目录不存在，请创建一个指向已安装 ROCm 路径的符号链接：<span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>。'
+    '如果 <span class="bold-text">/opt/rocm</span> 目录不存在，请创建一个指向已安装 ROCm 路径的符号链接：<span class="bold-text">ln -s /path/to/rocm /opt/rocm</span>。',
+  'clusters.addworker.message.success': '已将 {count} 个工作节点添加到集群中。'
 };

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