root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: backend list styles

Browse Source
This commit is contained in:
jialin
2025-10-13 14:40:26 +08:00
parent 0dfe77df37
commit eb509166ee
18 changed files with 209 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/backends/components/backend-card.tsx
+26 -17
View File
@@ -1,3 +1,4 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropDownActions from '@/components/drop-down-actions';
import IconFont from '@/components/icon-font';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
@@ -12,7 +13,7 @@ import {
builtInBackendLogos,
customColors,
customIcons,
gpuColorMap
getGpuColor
} from '../config';
import { ListItem } from '../config/types';
@@ -125,7 +126,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
if (data.is_build_in) {
return backendActions.filter((item) => item.key !== 'delete');
}
return backendActions;
return backendActions.filter((item) => item.key !== 'view_versions');
}, [data.is_build_in]);
const onClick = (e: React.MouseEvent) => {
@@ -146,19 +147,21 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<IconFont className="icon" type="icon-gpu1" />
<span>Supported Frameworks: </span>
</span>
<BackendBox>
{backendList.map((item: string) => {
return (
<ThemeTag
key={item}
style={{ marginRight: 0 }}
color={gpuColorMap[item] || 'default'}
>
{item}
</ThemeTag>
);
})}
</BackendBox>
<AutoTooltip ghost maxWidth={'100%'}>
<BackendBox>
{_.take(backendList, 3).map((item: string) => {
return (
<ThemeTag
key={item}
style={{ marginRight: 0 }}
color={getGpuColor(item)}
>
{item}
</ThemeTag>
);
})}
</BackendBox>
</AutoTooltip>
</>
);
}
@@ -169,7 +172,13 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<span>Default Image: </span>
</span>
<span className="text">
{_.get(data, ['version_configs', data.default_version, 'image_name'])}
<AutoTooltip ghost maxWidth={'100%'}>
{_.get(data, [
'version_configs',
data.default_version,
'image_name'
])}
</AutoTooltip>
</span>
</>
);
@@ -178,7 +187,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
return (
<Card
onClick={handleClick}
clickable={false}
clickable={true}
hoverable={true}
disabled={false}
height={160}
src/pages/backends/components/view-builtin-versions-modal.tsx
+76
View File
@@ -0,0 +1,76 @@
import ScrollerModal from '@/components/scroller-modal';
import { Form } from 'antd';
import { useEffect } from 'react';
import BuiltinVersions from '../forms/built-in-versions';
interface ViewBuiltinVersionsModalProps {
open?: boolean;
currentData?: any;
onClose?: () => void;
}
const ViewBuiltinVersionsModal: React.FC<ViewBuiltinVersionsModalProps> = ({
open,
currentData,
onClose
}) => {
const [form] = Form.useForm();
useEffect(() => {
if (open && currentData) {
const builtInVersions = Object.keys(
currentData.build_in_version_configs || {}
).map((key) => ({
version_no: key,
image_name: currentData.build_in_version_configs[key].image_name,
run_command: currentData.build_in_version_configs[key].run_command,
is_default: key === currentData.default_version,
backend_list:
currentData.build_in_version_configs[key].backend_list || [],
is_built_in: true
}));
form.setFieldsValue({
build_in_version_configs: builtInVersions
});
}
}, [open, currentData, form]);
return (
<ScrollerModal
open={open}
style={{
top: '20%'
}}
title="View Built-in Versions"
width={550}
destroyOnHidden
closable={true}
maskClosable={false}
onOk={onClose}
onCancel={onClose}
styles={{
content: {
padding: '0 0 16px 0'
},
header: {
padding: 'var(--ant-modal-content-padding)',
paddingBottom: '0'
},
body: {
padding: '16px 24px 32px'
},
footer: {
padding: '16px 24px',
margin: '0'
}
}}
footer={null}
>
<Form form={form}>
<BuiltinVersions />
</Form>
</ScrollerModal>
);
};
export default ViewBuiltinVersionsModal;
src/pages/backends/config/index.ts
+13
View File
@@ -101,6 +101,19 @@ export const gpuColorMap: Record<string, string> = {
corex: 'purple'
};
export const getGpuColor = (gpuType: string) => {
if (!gpuType) return 'default';
if (gpuType.includes('cann')) return gpuColorMap['cann'];
if (gpuType.includes('cuda')) return gpuColorMap['cuda'];
if (gpuType.includes('rocm')) return gpuColorMap['rocm'];
if (gpuType.includes('dtk')) return gpuColorMap['dtk'];
if (gpuType.includes('musa')) return gpuColorMap['musa'];
if (gpuType.includes('corex')) return gpuColorMap['corex'];
return 'default';
};
export const customIcons = ['∑', '∏', '∫', '∂', '∞', 'θ', '∆', '∇'];
export const backendFields = [
src/pages/backends/forms/built-in-versions.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import { Divider, Form } from 'antd';
import styled from 'styled-components';
import { gpuColorMap } from '../config';
import { getGpuColor } from '../config';
const ItemWrapper = styled.div`
display: flex;
@@ -62,7 +62,7 @@ const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
<ThemeTag
key={item}
style={{ marginRight: 0 }}
color={gpuColorMap[item] || 'default'}
color={getGpuColor(item)}
>
{item}
</ThemeTag>
src/pages/backends/forms/versions-config.tsx
+30 -1
View File
@@ -2,6 +2,7 @@ import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Divider, Form, Radio } from 'antd';
import _ from 'lodash';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import { ListItem } from '../config/types';
@@ -20,6 +21,13 @@ const ActionWrapper = styled.div`
margin-top: 24px;
`;
const Label = styled.div`
line-height: 1;
color: var(--ant-color-text-tertiary);
margin-bottom: 20px;
font-size: var(--font-size-base);
`;
const ItemWrapper = styled.div``;
type AddModalProps = {
@@ -28,6 +36,7 @@ type AddModalProps = {
};
const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const version_configs = Form.useWatch('version_configs', form);
const versionList = [
{
version_no: '',
@@ -47,6 +56,26 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
form.setFieldValue('version_configs', updatedVersions);
};
const handleVersionOnBlur = (
e: React.FocusEvent<HTMLInputElement>,
index: number
) => {
const inputValue = e.target.value.trim() || '';
const versions = form.getFieldValue('version_configs') || [];
console.log('inputValue:', version_configs, currentData);
const isDuplicate =
_.get(currentData, ['build_in_version_configs', inputValue]) ||
versions.some(
(version: any, idx: number) =>
version?.version_no === inputValue && idx !== index
);
if (isDuplicate) {
const updatedVersions = [...versions];
updatedVersions[index].version_no = '';
form.setFieldValue('version_configs', updatedVersions);
}
};
useEffect(() => {
const versions = form.getFieldValue('version_configs') || [];
console.log('versions:', versions);
@@ -58,7 +87,6 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
return (
<Form.List name="version_configs">
{(fields, { add, remove }) => {
console.log('fields:', fields);
return (
<div
style={{
@@ -67,6 +95,7 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
padding: '14px'
}}
>
<Label>Custom Versions</Label>
{fields.map(({ key, name, ...restField }, index) => (
<ItemWrapper key={key}>
<Box>
src/pages/backends/list.tsx
+21
View File
@@ -17,6 +17,7 @@ import {
} from './apis';
import AddModal from './components/add-modal';
import BackendCardList from './components/backend-list';
import ViewBuiltinVersionsModal from './components/view-builtin-versions-modal';
import { json2Yaml, yaml2Json } from './config';
import { FormData, ListItem } from './config/types';
import useExportYAML from './hooks/use-export-yaml';
@@ -53,6 +54,11 @@ const BackendList = () => {
action: PageActionType;
currentData?: Partial<ListItem>;
}>({ open: false, action: 'create' });
const [openViewBuiltinVersionsModal, setOpenViewBuiltinVersionsModal] =
useState<{
open: boolean;
currentData?: Partial<ListItem>;
}>({ open: false });
// build_in_version_configs is read-only, but needs to be included when updating
const handleOnSubmit = async (values: FormData) => {
@@ -129,6 +135,11 @@ const BackendList = () => {
// Export YAML action
console.log('Export YAML for:', item.data);
exportYAML(item.data);
} else if (item.action === 'view_versions') {
setOpenViewBuiltinVersionsModal({
open: true,
currentData: item.data
});
}
};
@@ -180,6 +191,16 @@ const BackendList = () => {
: 'Edit Backend'
}
></AddModal>
<ViewBuiltinVersionsModal
open={openViewBuiltinVersionsModal.open}
currentData={openViewBuiltinVersionsModal.currentData as ListItem}
onClose={() =>
setOpenViewBuiltinVersionsModal({
open: false,
currentData: undefined
})
}
></ViewBuiltinVersionsModal>
<DeleteModal ref={modalRef}></DeleteModal>
</PageContainer>
);