fix: remove instance from cache after deleting

src/pages/llmodels/components/instance-item.tsx

@@ -693,8 +693,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             </Col>
             <Col span={4}>
               <span
-                style={{ paddingLeft: '62px', gap: 4 }}
-                className="flex-center justify-center"
+                style={{ paddingLeft: '50px', gap: 4 }}
+                className="flex-center"
               >
                 <InstanceStatusTag
                   instanceData={instanceData}

src/pages/llmodels/components/table-list.tsx

@@ -80,6 +80,7 @@ interface ModelsProps {
   onStart?: () => void;
   onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
   onStatusChange: (value?: any) => void;
+  onDeleteInstanceFromCache?: (instanceId: number) => void;
   sortOrder: string[];
   queryParams: {
     page: number;
@@ -122,6 +123,7 @@ const Models: React.FC<ModelsProps> = ({
   onStart,
   onTableSort,
   onStatusChange,
+  onDeleteInstanceFromCache,
   sortOrder,
   deleteIds,
   dataSource,
@@ -231,7 +233,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
     try {
-      await updateModel(getFormattedData(record));
+      await updateModel(getFormattedData(record, { replicas: extra.newValue }));
       message.success(intl.formatMessage({ id: 'common.message.success' }));
       if (extra.newValue > extra.oldValue) {
         updateExpandedRowKeys([record.id, ...expandedRowKeys]);
@@ -367,41 +369,37 @@ const Models: React.FC<ModelsProps> = ({
     navigate(`/playground/chat?model=${row.name}`);
   };
 
-  const handleViewLogs = useCallback(
-    async (row: any) => {
-      try {
-        setCurrentInstance({
-          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-          status: row.state,
-          id: row.id,
-          modelId: row.model_id,
-          tail: InstanceRealtimeLogStatus.includes(row.state)
-            ? undefined
-            : PageSize - 1
-        });
-        setOpenLogModal(true);
-        onViewLogs();
-        saveScrollHeight();
-      } catch (error) {
-        console.log('error:', error);
-      }
-    },
-    [onViewLogs]
-  );
-  const handleDeleteInstace = useCallback(
-    (row: any) => {
-      modalRef.current?.show({
-        content: 'models.instances',
-        okText: 'common.button.delrecreate',
-        operation: 'common.delete.single.confirm',
-        name: row.name,
-        async onOk() {
-          await deleteModelInstance(row.id);
-        }
+  const handleViewLogs = async (row: any) => {
+    try {
+      setCurrentInstance({
+        url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
+        status: row.state,
+        id: row.id,
+        modelId: row.model_id,
+        tail: InstanceRealtimeLogStatus.includes(row.state)
+          ? undefined
+          : PageSize - 1
       });
-    },
-    [deleteModelInstance]
-  );
+      setOpenLogModal(true);
+      onViewLogs();
+      saveScrollHeight();
+    } catch (error) {
+      console.log('error:', error);
+    }
+  };
+
+  const handleDeleteInstace = (row: any) => {
+    modalRef.current?.show({
+      content: 'models.instances',
+      okText: 'common.button.delrecreate',
+      operation: 'common.delete.single.confirm',
+      name: row.name,
+      async onOk() {
+        await deleteModelInstance(row.id);
+        onDeleteInstanceFromCache?.(row.id);
+      }
+    });
+  };
 
   const getModelInstances = useCallback(async (row: any, options?: any) => {
     try {

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -107,7 +107,8 @@ const useModelsColumns = ({
         ),
         dataIndex: 'ready_replicas',
         key: 'ready_replicas',
-        align: 'center',
+        dataField: 'replicas',
+        align: 'left',
         sorter: tableSorter(4),
         span: 4,
         editable: {

src/pages/llmodels/index.tsx

@@ -331,6 +331,13 @@ const Models: React.FC = () => {
     });
   };
 
+  const handleDeleteInstanceFromCache = (id: number) => {
+    cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
+      (item) => item.id !== id
+    );
+    setModelInstances(cacheInsDataListRef.current);
+  };
+
   useEffect(() => {
     let timer: any = null;
     // fetch data first time
@@ -436,6 +443,7 @@ const Models: React.FC = () => {
         onStop={handleSearchBySilent}
         onStart={handleSearchBySilent}
         onTableSort={handleOnSortChange}
+        onDeleteInstanceFromCache={handleDeleteInstanceFromCache}
         sortOrder={sortOrder}
         queryParams={queryParams}
         loading={dataSource.loading}