fix: update open playground btn

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' }),