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

fix: reset default columns do not work

Browse Source
This commit is contained in:
jialin
2026-02-09 18:02:30 +08:00
parent 198a52e230
commit 90e212a1b2
7 changed files with 248 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_components/filter-form.tsx
+121
View File
@@ -0,0 +1,121 @@
import OverlayScroller from '@/components/overlay-scroller';
import { FilterOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Form, Popover } from 'antd';
import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
padding: 8px;
padding-right: 0px;
.title {
font-weight: 500;
margin-bottom: 12px;
}
.btn-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
padding-right: 8px;
}
.buttons {
display: flex;
gap: 8px;
justify-content: flex-end;
}
`;
const FilterForm: React.FC<
React.PropsWithChildren & {
width?: number;
contentHeight?: number;
initialValues?: any;
hasFilters?: boolean;
onClose?: () => void;
onValuesChange?: (ChangeValues: any, allValues: any) => void;
}
> = ({
children,
width = 300,
contentHeight = 400,
initialValues = {},
hasFilters = false,
onClose,
onValuesChange
}) => {
const intl = useIntl();
const [open, setOpen] = useState(false);
const [form] = Form.useForm();
const handleToggle = () => {
setOpen(!open);
};
const handleOpenChange = (isOpen: boolean) => {
setOpen(isOpen);
};
const handleOnReset = () => {
form.resetFields(Object.keys(initialValues));
onValuesChange?.({}, initialValues);
setOpen(false);
};
const handleOnClose = () => {
setOpen(false);
onClose?.();
};
return (
<Popover
open={open}
trigger={'click'}
arrow={false}
placement="bottomRight"
content={
<Container>
<OverlayScroller
maxHeight={contentHeight}
styles={{
wrapper: {
paddingInlineStart: 0
}
}}
>
<Form
onValuesChange={onValuesChange}
initialValues={initialValues}
form={form}
>
{children}
</Form>
</OverlayScroller>
<div className="btn-wrapper">
<Button size="middle" onClick={handleOnReset}>
{intl.formatMessage({ id: 'common.button.reset' })}
</Button>
<div className="buttons">
<Button size="middle" type="primary" onClick={handleOnClose}>
{intl.formatMessage({ id: 'common.button.close' })}
</Button>
</div>
</div>
</Container>
}
onOpenChange={handleOpenChange}
styles={{
container: {
padding: 8
},
root: {
width: width
}
}}
>
<Button onClick={handleToggle} icon={<FilterOutlined />}></Button>
</Popover>
);
};
export default FilterForm;
src/pages/benchmark/hooks/use-benchmark-columns.tsx
+1
View File
@@ -43,6 +43,7 @@ const useBenchmarkColumns = (params: {
</Typography.Text>
),
dataIndex: 'operations',
width: 100,
render: (value: string, record: ListItem) => (
<RowActions record={record} handleSelect={handleSelect}></RowActions>
)
src/pages/benchmark/hooks/use-column-settings.tsx
+1 -1
View File
@@ -429,7 +429,7 @@ const useColumnSettings = (options: {
<ColumnSettings
tableName="benchmark"
contentHeight={contentHeight}
defaultSelectedColumns={selectedColumns}
defaultSelectedColumns={defaultColumns}
selectedColumns={selectedColumns}
onChange={handleOnChange}
onReset={handleOnReset}
src/pages/llmodels/components/table-list.tsx
+23 -14
View File
@@ -83,6 +83,7 @@ interface ModelsProps {
onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
onStatusChange: (value?: any) => void;
onDeleteInstanceFromCache?: (instanceId: number) => void;
onFilterChange?: (filters: any) => void;
sortOrder: string[];
queryParams: {
page: number;
@@ -126,6 +127,7 @@ const Models: React.FC<ModelsProps> = ({
onTableSort,
onStatusChange,
onDeleteInstanceFromCache,
onFilterChange,
sortOrder,
deleteIds,
dataSource,
@@ -623,20 +625,18 @@ const Models: React.FC<ModelsProps> = ({
onChange={handleCategoryChange}
options={modelCategories.filter((item) => item.value)}
></BaseSelect>
{page !== 'clusters' && (
<BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
style={{ width: 160 }}
size="large"
maxTagCount={1}
onChange={handleClusterChange}
options={clusterList}
></BaseSelect>
)}
<BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
style={{ width: 160 }}
size="large"
maxTagCount={1}
onChange={handleClusterChange}
options={clusterList}
></BaseSelect>
<BaseSelect
allowClear
showSearch={false}
@@ -649,6 +649,15 @@ const Models: React.FC<ModelsProps> = ({
options={statusOptions}
onChange={handleStatusChange}
></BaseSelect>
{/* <Filters
initialValues={{
cluster_id: undefined,
state: undefined,
categories: undefined
}}
clusterList={clusterList}
onValuesChange={onFilterChange}
></Filters> */}
<Button
type="text"
style={{ color: 'var(--ant-color-text-tertiary)' }}
src/pages/llmodels/filters/index.tsx
+85
View File
@@ -0,0 +1,85 @@
import BaseSelect from '@/components/seal-form/base/select';
import FilterForm from '@/pages/_components/filter-form';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import styled from 'styled-components';
import { modelCategories } from '../config';
import useFilterStatus from '../hooks/use-filter-status';
const Content = styled.div`
display: flex;
flex-direction: column;
gap: 12px;
`;
interface FilterFormContentProps {
clusterList: Global.BaseOption<number>[];
initialValues?: any;
onValuesChange?: (values: any) => void;
}
const FilterFormContent: React.FC<FilterFormContentProps> = ({
clusterList,
initialValues,
onValuesChange
}) => {
const intl = useIntl();
const form = Form.useFormInstance();
const { labelRender, optionRender, statusOptions } = useFilterStatus();
const handleOnValuesChange = (changedValues: any, allValues: any) => {
const query = _.pickBy(allValues, (value: any) => !!value);
onValuesChange?.(query);
};
return (
<FilterForm
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>
<BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
size="large"
maxTagCount={1}
options={clusterList}
></BaseSelect>
</Form.Item>
<Form.Item name="state" noStyle>
<BaseSelect
allowClear
showSearch={false}
placeholder={intl.formatMessage({
id: 'common.filter.status'
})}
size="large"
maxTagCount={1}
optionRender={optionRender}
labelRender={labelRender}
options={statusOptions}
></BaseSelect>
</Form.Item>
</Content>
</FilterForm>
);
};
export default FilterFormContent;
src/pages/llmodels/hooks/use-filter-status.tsx
+5 -5
View File
@@ -15,10 +15,10 @@ const Dot = ({ color }: { color: string }) => {
);
};
const useFilterStatus = (options: {
onStatusChange: (value?: any) => void;
const useFilterStatus = (options?: {
onStatusChange?: (value?: any) => void;
}) => {
const { onStatusChange } = options;
const { onStatusChange } = options || {};
const intl = useIntl();
const statusOptions = [
@@ -49,7 +49,7 @@ const useFilterStatus = (options: {
const current = statusOptions.find((option) => option.value === item.value);
return (
<span className="flex-center gap-8">
<Dot color={current!.color}></Dot>
{current && <Dot color={current.color}></Dot>}
{item.label}
</span>
);
@@ -65,7 +65,7 @@ const useFilterStatus = (options: {
};
const handleStatusChange = (value: string | undefined) => {
onStatusChange(value);
onStatusChange?.(value);
};
return {
src/pages/llmodels/index.tsx
+12
View File
@@ -339,6 +339,17 @@ const Models: React.FC<{ clusterId?: number }> = ({ clusterId }) => {
});
};
const handleOnFilterChange = (filters: any) => {
handleQueryChange({
page: 1,
...filters
});
createModelsChunkRequest({
search: queryParams.search,
...filters
});
};
const handleDeleteInstanceFromCache = (id: number) => {
cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
(item) => item.id !== id
@@ -451,6 +462,7 @@ const Models: React.FC<{ clusterId?: number }> = ({ clusterId }) => {
onStop={handleSearchBySilent}
onStart={handleSearchBySilent}
onTableSort={handleOnSortChange}
onFilterChange={handleOnFilterChange}
onDeleteInstanceFromCache={handleDeleteInstanceFromCache}
sortOrder={sortOrder}
queryParams={queryParams}