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

fix: adjust border raduis

Browse Source
This commit is contained in:
jialin
2026-04-08 18:54:06 +08:00
committed by jialin
parent 53cd8ba00c
commit c73609d155
64 changed files with 473 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/instance-cells/name-cell.tsx
+8 -2
View File
@@ -19,6 +19,9 @@ export interface NameCellProps {
modelData: any;
defaultOpenId?: string;
showWorkerInfo?: boolean;
styles?: {
label?: React.CSSProperties;
};
}
const calcTotalVram = (vram: Record<string, number>) => {
@@ -110,12 +113,15 @@ const NameCell: React.FC<NameCellProps> = ({
record,
modelData,
defaultOpenId,
showWorkerInfo = true
showWorkerInfo = true,
styles
}) => {
return (
<span className="flex-center instance-name">
<AutoTooltip title={record.name} ghost>
<span className="m-r-5">{record.name}</span>
<span className="m-r-5" style={styles?.label}>
{record.name}
</span>
</AutoTooltip>
{!!record.worker_id && showWorkerInfo && (
<WorkerInfo
src/pages/llmodels/components/instance/instance-item.tsx
+4 -1
View File
@@ -31,7 +31,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
return (
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
<Row
style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
align="middle"
>
<Col
span={6}
style={{
src/pages/llmodels/components/left-filters.tsx
+13 -5
View File
@@ -1,9 +1,8 @@
import BaseSelect from '@/components/seal-form/base/select';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, Space } from 'antd';
import React from 'react';
import { modelCategories } from '../config';
import Filters from '../filters';
import useFilterStatus from '../hooks/use-filter-status';
interface LeftFiltersProps {
@@ -12,6 +11,7 @@ interface LeftFiltersProps {
handleStatusChange: (value: string) => void;
handleSearch: () => void;
handleCategoryChange: (value: string) => void;
onFilterChange: (allValues: any) => void;
clusterList: Global.BaseOption<number>[];
}
@@ -22,6 +22,7 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
handleStatusChange,
handleSearch,
handleCategoryChange,
onFilterChange,
clusterList
} = props;
const { labelRender, optionRender, statusOptions } = useFilterStatus();
@@ -36,12 +37,19 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
></SearchOutlined>
}
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 200 }}
style={{ width: 400 }}
size="large"
allowClear
suffix={
<Filters
clusterList={clusterList}
onValuesChange={onFilterChange}
></Filters>
}
onChange={handleNameChange}
></Input>
<BaseSelect
{/* <BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
@@ -76,7 +84,7 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
labelRender={labelRender}
options={statusOptions}
onChange={handleStatusChange}
></BaseSelect>
></BaseSelect> */}
<Button
type="text"
style={{ color: 'var(--ant-color-text-tertiary)' }}
src/pages/llmodels/components/table-list.tsx
+1
View File
@@ -564,6 +564,7 @@ const Models: React.FC<ModelsProps> = ({
handleCategoryChange={handleCategoryChange}
handleStatusChange={onStatusChange}
handleSearch={handleSearch}
onFilterChange={onFilterChange}
clusterList={clusterList}
></LeftFilters>
}
src/pages/llmodels/filters/index.tsx
+61 -17
View File
@@ -1,5 +1,6 @@
import BaseSelect from '@/components/seal-form/base/select';
import FilterForm from '@/pages/_components/filter-form';
import PillButtonGroup from '@/pages/_components/pill-button-group';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import styled from 'styled-components';
@@ -9,7 +10,14 @@ import useFilterStatus from '../hooks/use-filter-status';
const Content = styled.div`
display: flex;
flex-direction: column;
gap: 12px;
// gap: 16px;
`;
const Label = styled.span`
display: inline-flex;
align-items: center;
font-size: 14px;
margin-block: 16px;
color: var(--ant-color-text-tertiary);
`;
interface FilterFormContentProps {
@@ -32,23 +40,23 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
return (
<FilterForm
width={430}
onValuesChange={handleOnValuesChange}
initialValues={initialValues}
>
<Content>
<Form.Item name="categories" noStyle>
<BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'models.filter.category'
})}
size="large"
maxTagCount={1}
options={modelCategories.filter((item) => item.value)}
></BaseSelect>
</Form.Item>
<Form.Item name="cluster_id" noStyle>
<Label style={{ marginTop: 0 }}>
{intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
</Label>
<Form.Item
noStyle
name="cluster_id"
label={intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
>
<BaseSelect
allowClear
showSearch={false}
@@ -60,8 +68,44 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
options={clusterList}
></BaseSelect>
</Form.Item>
<Form.Item name="state" noStyle>
<BaseSelect
<Label>
{intl.formatMessage({
id: 'models.filter.category'
})}
</Label>
<Form.Item
noStyle
name="categories"
label={intl.formatMessage({
id: 'models.filter.category'
})}
>
<PillButtonGroup
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'models.filter.category'
})}
size="large"
maxTagCount={1}
variant="filled"
options={modelCategories.filter((item) => item.value)}
></PillButtonGroup>
</Form.Item>
<Label>
{intl.formatMessage({
id: 'common.filter.status'
})}
</Label>
<Form.Item
noStyle
name="state"
label={intl.formatMessage({
id: 'common.filter.status'
})}
>
<PillButtonGroup
allowClear
showSearch={false}
placeholder={intl.formatMessage({
@@ -72,7 +116,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
optionRender={optionRender}
labelRender={labelRender}
options={statusOptions}
></BaseSelect>
></PillButtonGroup>
</Form.Item>
</Content>
</FilterForm>
src/pages/llmodels/hooks/use-filter-status.tsx
+4 -1
View File
@@ -26,13 +26,15 @@ const useFilterStatus = (options?: {
{
value: MyModelsStatusValueMap.Active,
color: 'var(--ant-color-success)',
icon: <Dot color="var(--ant-color-success)"></Dot>,
label: intl.formatMessage({
id: 'models.mymodels.status.active'
})
},
{
value: MyModelsStatusValueMap.Inactive,
color: 'var(--ant-color-fill)',
color: 'var(--ant-color-fill-secondary)',
icon: <Dot color="var(--ant-color-fill-secondary)"></Dot>,
label: intl.formatMessage({
id: 'models.mymodels.status.inactive'
})
@@ -40,6 +42,7 @@ const useFilterStatus = (options?: {
{
value: MyModelsStatusValueMap.Degrade,
color: 'var(--ant-color-warning)',
icon: <Dot color="var(--ant-color-warning)"></Dot>,
label: intl.formatMessage({
id: 'models.mymodels.status.degrade'
})
src/pages/llmodels/hooks/use-models-columns.tsx
+41 -5
View File
@@ -28,6 +28,20 @@ interface ActionItem {
};
}
const Dot = ({ color }: { color: string }) => {
return (
<span
style={{
backgroundColor: color,
borderRadius: '50%',
height: 8,
width: 8,
display: 'flex'
}}
></span>
);
};
const ActionList: ActionItem[] = [
{
label: 'common.button.edit',
@@ -119,6 +133,21 @@ const useModelsColumns = ({
});
});
const getColor = (record: ListItem) => {
if (!record.replicas && !record.ready_replicas) {
return 'var(--ant-color-fill-secondary)';
}
if (record.replicas > 0 && !record.ready_replicas) {
return 'var(--ant-color-warning)';
}
if (record.ready_replicas > 0 && record.replicas > 0) {
return 'var(--ant-color-success)';
}
return 'var(--ant-color-warning)';
};
return useMemo(() => {
return [
{
@@ -130,7 +159,7 @@ const useModelsColumns = ({
render: (text: string, record: ListItem) => (
<span className="flex-center" style={{ maxWidth: '100%' }}>
<AutoTooltip ghost>
<span>{text}</span>
<span className="text-primary font-400">{text}</span>
</AutoTooltip>
<ModelTag categoryKey={record.categories?.[0] || ''} />
</span>
@@ -171,9 +200,7 @@ const useModelsColumns = ({
{ api: `${window.location.origin}/${OPENAI_COMPATIBLE}` }
)}
>
<span style={{ fontWeight: 'var(--font-weight-medium)' }}>
{intl.formatMessage({ id: 'models.form.replicas' })}
</span>
<span>{intl.formatMessage({ id: 'models.form.replicas' })}</span>
<QuestionCircleOutlined className="m-l-5" />
</Tooltip>
),
@@ -187,7 +214,16 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
},
render: (text: number, record: ListItem) => (
<span style={{ minWidth: '23px' }}>
<span
style={{
minWidth: '23px',
display: 'inline-flex',
alignItems: 'center',
gap: 8,
color: 'var(--ant-color-text)'
}}
>
<Dot color={getColor(record)}></Dot>
{record.ready_replicas} / {record.replicas}
</span>
)
src/pages/llmodels/instance-view/index.tsx
+1
View File
@@ -165,6 +165,7 @@ const InstanceView = forwardRef((props, ref) => {
columns={columns}
scroll={{ x: 900 }}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
src/pages/llmodels/instance-view/use-instance-columns.tsx
+7 -2
View File
@@ -65,7 +65,7 @@ const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
);
};
const useProviderColumns = (options: {
const useInstancesColumns = (options: {
workerList: workerListItem[];
clusterList: Global.BaseOption<
number,
@@ -112,6 +112,11 @@ const useProviderColumns = (options: {
backend: record.backend,
backend_version: record.backend_version
}}
styles={{
label: {
color: 'var(--ant-color-text)'
}
}}
></NameCell>
<div className="flex-center">
<ThunderboltFilled
@@ -213,4 +218,4 @@ const useProviderColumns = (options: {
}, [handleSelect, onCellClick, workerList, clusterList]);
};
export default useProviderColumns;
export default useInstancesColumns;
src/pages/llmodels/style/catalog-item.less
+1 -1
View File
@@ -7,7 +7,7 @@
justify-content: space-between;
align-items: flex-start;
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
border-radius: var(--ant-border-radius-lg);
cursor: pointer;
width: 100%;