fix: update open playground btn

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

@@ -102,7 +102,7 @@ const useGPUColumns = (props: {
         sorter: tableSorter(6),
         render: (text: number, record: GPUDeviceItem) => {
           return (
-            <>
+            <span className="flex-center flex-full">
               {record.core ? (
                 <ProgressBar
                   percent={_.round(record.core?.utilization_rate, 2)}
@@ -110,7 +110,7 @@ const useGPUColumns = (props: {
               ) : (
                 '-'
               )}
-            </>
+            </span>
           );
         }
       },
@@ -121,23 +121,25 @@ const useGPUColumns = (props: {
         sorter: tableSorter(7),
         render: (text: number, record: GPUDeviceItem, index: number) => {
           return (
-            <ProgressBar
-              defaultOpen={index === 0 && loadend && firstLoad}
-              percent={
-                record.memory?.used
-                  ? _.round(record.memory?.utilization_rate, 0)
-                  : _.round(
-                      record.memory?.allocated / record.memory?.total,
-                      0
-                    ) * 100
-              }
-              label={
-                <InfoColumn
-                  fieldList={fieldList}
-                  data={record.memory}
-                ></InfoColumn>
-              }
-            ></ProgressBar>
+            <span className="flex-center flex-full">
+              <ProgressBar
+                defaultOpen={index === 0 && loadend && firstLoad}
+                percent={
+                  record.memory?.used
+                    ? _.round(record.memory?.utilization_rate, 0)
+                    : _.round(
+                        record.memory?.allocated / record.memory?.total,
+                        0
+                      ) * 100
+                }
+                label={
+                  <InfoColumn
+                    fieldList={fieldList}
+                    data={record.memory}
+                  ></InfoColumn>
+                }
+              ></ProgressBar>
+            </span>
           );
         }
       }

src/pages/resources/hooks/use-grafana-link.tsx

@@ -1,13 +1,13 @@
 import { systemConfigAtom } from '@/atoms/system';
-import IconFont from '@/components/icon-font';
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
+import GrafanaIcon from '@/pages/_components/grafana-icon';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import { useAtomValue } from 'jotai';
 
 const useGranfanaLink = (options: {
   type: 'model' | 'worker' | 'instance' | 'cluster';
-  dataList: any[];
+  dataList?: any[];
 }) => {
   const intl = useIntl();
   const systemConfig = useAtomValue(systemConfigAtom);
@@ -53,7 +53,7 @@ const useGranfanaLink = (options: {
   };
 
   const handleClick = () => {
-    if (options.dataList?.length > 0) {
+    if (options.dataList && options.dataList.length > 0) {
       goToGrafana(options.dataList?.[0]);
     }
   };
@@ -63,7 +63,7 @@ const useGranfanaLink = (options: {
       return (
         <Button
           onClick={handleClick}
-          icon={<IconFont type="icon-metrics" style={{ fontSize: 16 }} />}
+          icon={<GrafanaIcon style={{ width: 16, height: 16 }}></GrafanaIcon>}
         >
           {intl.formatMessage({ id: 'resources.metrics.details' })}
         </Button>

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

@@ -1,12 +1,12 @@
 import { systemConfigAtom } from '@/atoms/system';
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
-import IconFont from '@/components/icon-font';
 import LabelsCell from '@/components/label-cell';
 import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
+import GrafanaIcon from '@/pages/_components/grafana-icon';
 import { convertFileSize } from '@/utils';
 import {
   DeleteOutlined,
@@ -48,7 +48,11 @@ const ActionList = [
   {
     label: 'resources.metrics.details',
     key: 'metrics',
-    icon: <IconFont type="icon-metrics" />
+    icon: (
+      <span className="flex-center">
+        <GrafanaIcon style={{ width: 14, height: 14 }}></GrafanaIcon>
+      </span>
+    )
   },
   // {
   //   label: 'common.button.detail',
@@ -123,7 +127,10 @@ const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
       _.sortBy(devices || [], ['index']),
       (item: GPUDeviceItem, index: number) => (
         <span className="flex-center" key={index}>
-          <span className="m-r-5" style={{ display: 'flex', width: 25 }}>
+          <span
+            className="m-r-5"
+            style={{ display: 'flex', width: 25, lineHeight: 1 }}
+          >
             [{item.index}]
           </span>
           {item.core ? (
@@ -155,7 +162,10 @@ const VRAMCell = ({
       _.sortBy(devices || [], ['index']),
       (item: GPUDeviceItem, index: number) => (
         <span key={index} className="flex-center">
-          <span className="m-r-5" style={{ display: 'flex', width: 25 }}>
+          <span
+            className="m-r-5"
+            style={{ display: 'flex', width: 25, lineHeight: 1 }}
+          >
             [{item.index}]
           </span>
           <ProgressBar
@@ -343,33 +353,42 @@ const useWorkerColumns = ({
         title: 'CPU',
         dataIndex: 'status.cpu.utilization_rate',
         sorter: tableSorter(4),
-        render: (text: string, record) =>
-          statusAvailable(record) ? (
-            <ProgressBar
-              percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
-            />
-          ) : (
-            <HolderStatus />
-          )
+        render: (text: string, record) => (
+          <span className="flex-center flex-full">
+            {statusAvailable(record) ? (
+              <ProgressBar
+                percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
+              />
+            ) : (
+              <HolderStatus />
+            )}
+          </span>
+        )
       },
       {
         title: intl.formatMessage({ id: 'resources.table.memory' }),
         dataIndex: 'status.memory.utilization_rate',
         sorter: tableSorter(5),
-        render: (_, record) =>
-          statusAvailable(record) ? (
-            <ProgressBar
-              percent={formateUtilization(
-                record?.status?.memory?.used,
-                record?.status?.memory?.total
-              )}
-              label={
-                <InfoColumn fieldList={fieldList} data={record.status.memory} />
-              }
-            />
-          ) : (
-            <HolderStatus />
-          )
+        render: (_, record) => (
+          <span className="flex-center flex-full">
+            {statusAvailable(record) ? (
+              <ProgressBar
+                percent={formateUtilization(
+                  record?.status?.memory?.used,
+                  record?.status?.memory?.total
+                )}
+                label={
+                  <InfoColumn
+                    fieldList={fieldList}
+                    data={record.status.memory}
+                  />
+                }
+              />
+            ) : (
+              <HolderStatus />
+            )}
+          </span>
+        )
       },
       {
         title: 'GPU',
@@ -400,12 +419,15 @@ const useWorkerColumns = ({
       {
         title: intl.formatMessage({ id: 'resources.table.disk' }),
         dataIndex: 'storage',
-        render: (_, record) =>
-          statusAvailable(record) ? (
-            <StorageCell files={record.status?.filesystem} />
-          ) : (
-            <HolderStatus />
-          )
+        render: (_, record) => (
+          <span className="flex-center flex-full">
+            {statusAvailable(record) ? (
+              <StorageCell files={record.status?.filesystem} />
+            ) : (
+              <HolderStatus />
+            )}
+          </span>
+        )
       },
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),