From ddbbe92a857113f71c618c0f42f37e28da799c1b Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 17 Jul 2025 11:57:54 +0800
Subject: [PATCH] chore: show used vram for a second

---
 src/hooks/use-table-fetch.ts               | 11 +++++++++++
 src/pages/llmodels/config/index.ts         |  2 +-
 src/pages/resources/components/gpus.tsx    |  6 +++++-
 src/pages/resources/components/workers.tsx | 13 ++++++++++---
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts
index 6099fc74..9f6caf5b 100644
--- a/src/hooks/use-table-fetch.ts
+++ b/src/hooks/use-table-fetch.ts
@@ -40,6 +40,9 @@ export default function useTableFetch<ListItem>(
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const [extraStatus, setExtraStatus] = useState<Record<string, any>>({
+    firstLoad: true
+  });
 
   const [dataSource, setDataSource] = useState<{
     dataList: ListItem[];
@@ -59,6 +62,7 @@ export default function useTableFetch<ListItem>(
     perPage: 10,
     search: ''
   });
+
   const { setChunkRequest } = useSetChunkRequest();
   const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
     events: events,
@@ -77,6 +81,8 @@ export default function useTableFetch<ListItem>(
     }
   });
 
+  const debounceSetExtraStatus = _.debounce(setExtraStatus, 3000);
+
   const updateHandler = (list: any) => {
     _.each(list, (data: any) => {
       updateChunkedList(data);
@@ -148,6 +154,10 @@ export default function useTableFetch<ListItem>(
         total: dataSource.total,
         totalPage: dataSource.totalPage
       });
+    } finally {
+      debounceSetExtraStatus({
+        firstLoad: false
+      });
     }
   };
 
@@ -277,6 +287,7 @@ export default function useTableFetch<ListItem>(
     sortOrder,
     queryParams,
     modalRef,
+    extraStatus,
     setQueryParams,
     handleDelete,
     handleDeleteBatch,
diff --git a/src/pages/llmodels/config/index.ts b/src/pages/llmodels/config/index.ts
index 1a2d85aa..051d69dd 100644
--- a/src/pages/llmodels/config/index.ts
+++ b/src/pages/llmodels/config/index.ts
@@ -517,7 +517,7 @@ export const getBackendParamsTips = (backend: string) => {
     return {
       backend: 'vLLM',
       releases: 'https://github.com/vllm-project/vllm/releases',
-      link: 'https://docs.vllm.ai/en/stable/serving/openai_compatible_server.html#cli-reference',
+      link: 'https://docs.vllm.ai/en/latest/configuration/engine_args.html',
       version: 'v0.8.5'
     };
   }
diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx
index 60396552..7f4d45ae 100644
--- a/src/pages/resources/components/gpus.tsx
+++ b/src/pages/resources/components/gpus.tsx
@@ -44,6 +44,7 @@ const GPUList: React.FC = () => {
   const {
     dataSource,
     queryParams,
+    extraStatus,
     handlePageChange,
     handleTableChange,
     handleSearch,
@@ -184,9 +185,12 @@ const GPUList: React.FC = () => {
               })}
               dataIndex="VRAM"
               key="VRAM"
-              render={(text, record: GPUDeviceItem) => {
+              render={(text, record: GPUDeviceItem, index: number) => {
                 return (
                   <ProgressBar
+                    open={
+                      index === 0 && dataSource.loadend && extraStatus.firstLoad
+                    }
                     percent={
                       record.memory?.used
                         ? _.round(record.memory?.utilization_rate, 0)
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index 5b034d9f..ba337dad 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -96,6 +96,7 @@ const Workers: React.FC = () => {
     rowSelection,
     queryParams,
     modalRef,
+    extraStatus,
     handleDelete,
     handleDeleteBatch,
     fetchData,
@@ -383,12 +384,12 @@ const Workers: React.FC = () => {
               title={intl.formatMessage({ id: 'resources.table.vram' })}
               dataIndex="VRAM"
               key="VRAM"
-              render={(text, record: ListItem) => {
+              render={(text, record: ListItem, rIndex) => {
                 return (
                   <span className="flex-column flex-gap-2">
                     {_.map(
                       _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                      (item: GPUDeviceItem, index: string) => {
+                      (item: GPUDeviceItem, index: number) => {
                         return (
                           <span key={index}>
                             <span className="flex-center">
@@ -399,6 +400,12 @@ const Workers: React.FC = () => {
                                 [{item.index}]
                               </span>
                               <ProgressBar
+                                open={
+                                  rIndex === 0 &&
+                                  index === 0 &&
+                                  dataSource.loadend &&
+                                  extraStatus.firstLoad
+                                }
                                 key={index}
                                 percent={
                                   item.memory?.used
@@ -442,7 +449,7 @@ const Workers: React.FC = () => {
               title={intl.formatMessage({ id: 'resources.table.disk' })}
               dataIndex="storage"
               key="storage"
-              render={(text, record: ListItem) => {
+              render={(text, record: ListItem, index) => {
                 return (
                   <ProgressBar
                     percent={calcStorage(record.status?.filesystem)}