From dc41b61d69d881350af09cd42d9f21295f3f4027 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Mon, 6 Jul 2026 17:45:15 +0800
Subject: [PATCH] fix(deployments): display gpu allocated value in gpu selector

---
 .../dashboard/hooks/use-add-resource.tsx      |  4 +-
 src/pages/llmodels/components/gpu-card.tsx    | 55 +++++++++----------
 src/pages/llmodels/forms/schedule-type.tsx    |  1 +
 src/pages/llmodels/style/gpu-selector.less    |  5 ++
 4 files changed, 34 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/llmodels/style/gpu-selector.less

diff --git a/src/pages/dashboard/hooks/use-add-resource.tsx b/src/pages/dashboard/hooks/use-add-resource.tsx
index a78fbf93..a4a62cbc 100644
--- a/src/pages/dashboard/hooks/use-add-resource.tsx
+++ b/src/pages/dashboard/hooks/use-add-resource.tsx
@@ -77,7 +77,7 @@ export default function useAddResource(options?: { onCreated?: () => void }) {
   }, [resourceAtom, loadingStatus]);
 
   const contentInfo = useMemo(() => {
-    if (!resourceCount.cluster_count) {
+    if (!resourceCount?.cluster_count) {
       return {
         title: intl.formatMessage({ id: 'noresult.cluster.title' }),
         subTitle: intl.formatMessage({ id: 'noresult.resources.cluster' }),
@@ -98,7 +98,7 @@ export default function useAddResource(options?: { onCreated?: () => void }) {
   const handleCreate = () => {
     setHideModalTemporarily(true);
     onCreated?.();
-    if (!resourceCount.cluster_count) {
+    if (!resourceCount?.cluster_count) {
       setClusterSession({
         firstAddWorker: false,
         firstAddCluster: true
diff --git a/src/pages/llmodels/components/gpu-card.tsx b/src/pages/llmodels/components/gpu-card.tsx
index c5822a09..97d41912 100644
--- a/src/pages/llmodels/components/gpu-card.tsx
+++ b/src/pages/llmodels/components/gpu-card.tsx
@@ -1,6 +1,7 @@
 import { convertFileSize } from '@/utils';
 import { AutoTooltip } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
+import { Flex } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 import '../style/gpu-card.less';
@@ -19,12 +20,17 @@ const Header = styled.div`
   width: 100%;
 `;
 
-const ItemInfo = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  white-space: break-spaces;
-  font-size: 13px;
-`;
+const Metric: React.FC<{ label: React.ReactNode; value: React.ReactNode }> = ({
+  label,
+  value
+}) => (
+  <span style={{ lineHeight: 1.2 }}>
+    {label}:{' '}
+    <span className="font-500" style={{ color: 'var(--ant-color-text)' }}>
+      {value}
+    </span>
+  </span>
+);
 
 const Description = styled.div`
   display: flex;
@@ -64,29 +70,20 @@ const GPUCard: React.FC<{
       }
       description={
         info || (
-          <>
-            <ItemInfo>
-              {intl.formatMessage({ id: 'resources.table.vram' })}(
-              {intl.formatMessage({ id: 'resources.table.used' })}/
-              {intl.formatMessage({ id: 'resources.table.total' })}):{' '}
-              <span>
-                {convertFileSize(
-                  data?.memory?.used || data?.memory?.allocated || 0
-                )}{' '}
-                / {convertFileSize(data?.memory?.total || 0)}
-              </span>
-            </ItemInfo>
-            {/* <ItemInfo>
-              <span>
-                {intl.formatMessage({ id: 'resources.table.gpuutilization' })}
-                :{' '}
-              </span>
-              {data?.memory?.used
-                ? _.round(data?.memory?.utilization_rate || 0, 2)
-                : _.round(data.memory?.allocated / data.memory?.total, 2) * 100}
-              %
-            </ItemInfo> */}
-          </>
+          <Flex wrap gap={8} style={{ fontSize: 13 }}>
+            <Metric
+              label={intl.formatMessage({ id: 'resources.table.total' })}
+              value={convertFileSize(data?.memory?.total || 0)}
+            />
+            <Metric
+              label={intl.formatMessage({ id: 'resources.table.used' })}
+              value={convertFileSize(data?.memory?.used || 0)}
+            />
+            <Metric
+              label={intl.formatMessage({ id: 'resources.table.allocated' })}
+              value={convertFileSize(data?.memory?.allocated || 0)}
+            />
+          </Flex>
         )
       }
     ></CardContainer>
diff --git a/src/pages/llmodels/forms/schedule-type.tsx b/src/pages/llmodels/forms/schedule-type.tsx
index 1fdb301e..c1752c08 100644
--- a/src/pages/llmodels/forms/schedule-type.tsx
+++ b/src/pages/llmodels/forms/schedule-type.tsx
@@ -20,6 +20,7 @@ import {
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 import { backendOptionsMap } from '../constants/backend-parameters';
+import '../style/gpu-selector.less';
 
 const InputWrapper = styled.div`
   padding: 8px 4px;
diff --git a/src/pages/llmodels/style/gpu-selector.less b/src/pages/llmodels/style/gpu-selector.less
new file mode 100644
index 00000000..69726de8
--- /dev/null
+++ b/src/pages/llmodels/style/gpu-selector.less
@@ -0,0 +1,5 @@
+.cascader-popup-wrapper.gpu-selector {
+  .ant-cascader-menu-item-content {
+    padding-right: 0;
+  }
+}