style: worker versio info

src/locales/en-US/resources.ts

@@ -109,5 +109,8 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.'
+    'Please upgrade to match the GPUStack Server version.',
+  'resources.worker.version': 'Worker Version',
+  'resources.worker.currentVersion': 'Current Version: {version}',
+  'resources.worker.targetVersion': 'Target Version: {version}',
 };

src/locales/ja-JP/resources.ts

@@ -110,7 +110,10 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.'
+    'Please upgrade to match the GPUStack Server version.',
+  'resources.worker.version': 'Worker Version',
+  'resources.worker.currentVersion': 'Current Version: {version}',
+  'resources.worker.targetVersion': 'Target Version: {version}'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/ru-RU/resources.ts

@@ -108,7 +108,10 @@ export default {
     'No available clusters. Please create a cluster before adding a node.',
   'resources.metrics.details': 'Monitoring',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.'
+    'Please upgrade to match the GPUStack Server version.',
+  'resources.worker.version': 'Worker Version',
+  'resources.worker.currentVersion': 'Current Version: {version}',
+  'resources.worker.targetVersion': 'Target Version: {version}'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/tr-TR/resources.ts

@@ -108,7 +108,10 @@ export default {
     'Kullanılabilir küme yok. Lütfen düğüm eklemeden önce bir küme oluşturun.',
   'resources.metrics.details': 'İzleme',
   'resoureces.worker.upgrade.tips':
-    'Please upgrade to match the GPUStack Server version.'
+    'Please upgrade to match the GPUStack Server version.',
+  'resources.worker.version': 'Worker Version',
+  'resources.worker.currentVersion': 'Current Version: {version}',
+  'resources.worker.targetVersion': 'Target Version: {version}'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/zh-CN/resources.ts

@@ -104,5 +104,8 @@ export default {
     '进入维护模式后，节点将停止调度新的模型实例部署任务，正在运行的实例不会受到影响。',
   'resources.worker.noCluster.tips': '当前无可用集群，请先创建集群再添加节点。',
   'resources.metrics.details': '监控',
-  'resoureces.worker.upgrade.tips': '请升级到与 GPUStack Server 版本一致。'
+  'resoureces.worker.upgrade.tips': '请升级到与 GPUStack Server 版本一致。',
+  'resources.worker.version': '节点版本',
+  'resources.worker.currentVersion': '当前版本: {version}',
+  'resources.worker.targetVersion': '目标版本: {version}'
 };

src/pages/resources/hooks/use-worker-columns.tsx

@@ -19,7 +19,7 @@ import {
   ToolOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Tag, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { useAtom, useAtomValue } from 'jotai';
 import _ from 'lodash';
@@ -296,6 +296,80 @@ const useWorkerColumns = ({
     });
   };
 
+  const renderVersionInfo = (record: ListItem) => {
+    const shouldUpgrade = showUpgrade(record.worker_version, version.version);
+
+    const defaultVersionInfo = (
+      <span className="flex-center gap-4">
+        <span>{intl.formatMessage({ id: 'resources.worker.version' })}:</span>
+        <span> {version.version}</span>
+      </span>
+    );
+
+    const upgradeVersionInfo = (
+      <span className="flex-center gap-8">
+        <span>
+          {intl.formatMessage(
+            { id: 'resources.worker.currentVersion' },
+            { version: record.worker_version }
+          )}
+        </span>
+        <span>
+          {intl.formatMessage(
+            { id: 'resources.worker.targetVersion' },
+            { version: version.version }
+          )}
+        </span>
+      </span>
+    );
+
+    return (
+      <Tooltip
+        title={
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 4,
+              fontSize: 13
+            }}
+          >
+            {shouldUpgrade && (
+              <span
+                style={{
+                  color: 'var(--ant-color-warning)'
+                }}
+              >
+                {intl.formatMessage({
+                  id: 'resoureces.worker.upgrade.tips'
+                })}
+              </span>
+            )}
+            {shouldUpgrade ? upgradeVersionInfo : defaultVersionInfo}
+            <span className="flex-center gap-4">
+              <span>
+                {intl.formatMessage({
+                  id: 'benchmark.env.driverVersion'
+                })}
+                :
+              </span>
+              {_.get(record, 'status.gpu_devices[0].driver_version')}
+            </span>
+          </div>
+        }
+      >
+        {shouldUpgrade ? (
+          <IconFont
+            type="icon-upgrade"
+            style={{ color: 'var(--ant-color-warning)' }}
+          ></IconFont>
+        ) : (
+          <InfoCircleOutlined style={{ color: 'var(--ant-blue-5)' }} />
+        )}
+      </Tooltip>
+    );
+  };
+
   return useMemo<ColumnsType<ListItem>>(
     () => [
       {
@@ -308,36 +382,7 @@ const useWorkerColumns = ({
             <AutoTooltip ghost maxWidth={200}>
               <span className="name-text">{text}</span>
             </AutoTooltip>
-            <div className={workerCss['worker-version']}>
+            {renderVersionInfo(record)}
-              <AutoTooltip
-                ghost
-                showTitle={showUpgrade(record.worker_version, version.version)}
-                title={intl.formatMessage({
-                  id: 'resoureces.worker.upgrade.tips'
-                })}
-              >
-                <Tag className="version-tag" variant="outlined">
-                  {version.version}
-                  {showUpgrade(record.worker_version, version.version) && (
-                    <IconFont type="icon-upgrade"></IconFont>
-                  )}
-                </Tag>
-              </AutoTooltip>
-              <Tooltip
-                title={
-                  <span>
-                    {intl.formatMessage({
-                      id: 'benchmark.env.driverVersion'
-                    })}
-                    : {_.get(record, 'status.gpu_devices[0].driver_version')}
-                  </span>
-                }
-              >
-                <Tag className="version-tag" variant="outlined">
-                  {_.get(record, 'status.gpu_devices[0].driver_version', '')}
-                </Tag>
-              </Tooltip>
-            </div>
           </div>
         )
       },

src/pages/resources/styles/worker.less

@@ -1,6 +1,6 @@
 .name {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 4px;
 
   .worker-version {