fix(deployments): display gpu allocated value in gpu selector

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

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`
+const Metric: React.FC<{ label: React.ReactNode; value: React.ReactNode }> = ({
-  display: flex;
+  label,
-  flex-wrap: wrap;
+  value
-  white-space: break-spaces;
+}) => (
-  font-size: 13px;
+  <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 || (
-          <>
+          <Flex wrap gap={8} style={{ fontSize: 13 }}>
-            <ItemInfo>
+            <Metric
-              {intl.formatMessage({ id: 'resources.table.vram' })}(
+              label={intl.formatMessage({ id: 'resources.table.total' })}
-              {intl.formatMessage({ id: 'resources.table.used' })}/
+              value={convertFileSize(data?.memory?.total || 0)}
-              {intl.formatMessage({ id: 'resources.table.total' })}):{' '}
+            />
-              <span>
+            <Metric
-                {convertFileSize(
+              label={intl.formatMessage({ id: 'resources.table.used' })}
-                  data?.memory?.used || data?.memory?.allocated || 0
+              value={convertFileSize(data?.memory?.used || 0)}
-                )}{' '}
+            />
-                / {convertFileSize(data?.memory?.total || 0)}
+            <Metric
-              </span>
+              label={intl.formatMessage({ id: 'resources.table.allocated' })}
-            </ItemInfo>
+              value={convertFileSize(data?.memory?.allocated || 0)}
-            {/* <ItemInfo>
+            />
-              <span>
+          </Flex>
-                {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> */}
-          </>
         )
       }
     ></CardContainer>

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;

src/pages/llmodels/style/gpu-selector.less

@@ -0,0 +1,5 @@
+.cascader-popup-wrapper.gpu-selector {
+  .ant-cascader-menu-item-content {
+    padding-right: 0;
+  }
+}