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

chore: replace components with core-ui, upgrade eslint

Browse Source
This commit is contained in:
jialin
2026-04-24 14:28:30 +08:00
committed by jialin
parent d48aa99dcc
commit 8711c27b78
470 changed files with 1017 additions and 24093 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_components/category-select.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import SealSelect from '@/components/seal-form/seal-select';
import { Select as SealSelect } from '@gpustack/core-ui';
import React from 'react';
import { categoryConfig } from './model-tag';
src/pages/_components/collapse-panel/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import IconFont from '@/components/icon-font';
import { IconFont } from '@gpustack/core-ui';
import { Collapse, CollapseProps } from 'antd';
import React from 'react';
import styled from 'styled-components';
src/pages/_components/column-settings.tsx
+1 -1
View File
@@ -1,9 +1,9 @@
import OverlayScroller from '@/components/overlay-scroller';
import {
readColumnSettings,
writeColumnSettings
} from '@/utils/localstore/index';
import { SettingOutlined } from '@ant-design/icons';
import { OverlayScroller } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd';
import React, { useEffect } from 'react';
src/pages/_components/command-viewer/index.tsx
-84
View File
@@ -1,84 +0,0 @@
import CopyButton from '@/components/copy-button';
import EditorWrap from '@/components/editor-wrap';
import HighlightCode from '@/components/highlight-code';
import SegmentLine from '@/components/segment-line';
import React from 'react';
import styled from 'styled-components';
interface ViewerProps {
code: string;
copyText?: string;
options?: Global.BaseOption<string>[];
defaultValue?: string;
headerHeight?: number;
showTitle?: boolean;
height?: number;
lang?: string;
onChange?: (value: string | number) => void;
}
const Header = styled.div`
width: 100%;
padding-inline: 12px 10px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--color-editor-header-bg);
`;
const CommandViewer: React.FC<ViewerProps> = (props) => {
const {
code,
copyText = '',
defaultValue,
options = [],
headerHeight = 40,
height = 380,
showTitle = false,
lang,
onChange
} = props || {};
const [value, setValue] = React.useState<string>(defaultValue || '');
const handlOnChange = (value: string | number) => {
setValue(value as string);
onChange?.(value);
};
return (
<EditorWrap
header={
<Header>
<SegmentLine
height={headerHeight}
defaultValue={defaultValue}
value={value}
size="small"
options={options}
showTitle={showTitle}
onChange={handlOnChange}
></SegmentLine>
<CopyButton
text={copyText || code}
size="small"
style={{
color: 'rgba(255,255,255,.7)'
}}
/>
</Header>
}
>
<HighlightCode
height={height}
theme="dark"
code={code}
lang={lang || value}
copyable={false}
></HighlightCode>
</EditorWrap>
);
};
export default CommandViewer;
src/pages/_components/doc-link.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import IconFont from '@/components/icon-font';
import { IconFont } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import React from 'react';
src/pages/_components/filter-form/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import OverlayScroller from '@/components/overlay-scroller';
import { CloseOutlined } from '@ant-design/icons';
import { OverlayScroller } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import classNames from 'classnames';
src/pages/_components/form-drawer.tsx
+1 -3
View File
@@ -1,6 +1,4 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
import { Tag } from 'antd';
import React from 'react';
src/pages/_components/model-tag.tsx
+1 -1
View File
@@ -1,9 +1,9 @@
import IconFont from '@/components/icon-font';
import {
AudioOutlined,
PictureOutlined,
WechatWorkOutlined
} from '@ant-design/icons';
import { IconFont } from '@gpustack/core-ui';
import { Tag } from 'antd';
import { modelCategoriesMap } from '../llmodels/config';
src/pages/_components/page-breadcrumb/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import IconFont from '@/components/icon-font';
import { IconFont } from '@gpustack/core-ui';
import { Breadcrumb, type BreadcrumbProps } from 'antd';
import React from 'react';
import styled from 'styled-components';
src/pages/_components/pill-button-group/index.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import AutoTooltip from '@/components/auto-tooltip';
import { AutoTooltip } from '@gpustack/core-ui';
import React from 'react';
import pillButtonCss from './styles.less';
type Option = {
label: string;
value: string | number | null;
src/pages/_components/scroll-spy-tabs/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import SegmentLine from '@/components/segment-line';
import { SegmentLine } from '@gpustack/core-ui';
import { useMemoizedFn } from 'ahooks';
import _ from 'lodash';
import React, { forwardRef, useImperativeHandle } from 'react';
src/pages/_components/select-panel/index.tsx
-224
View File
@@ -1,224 +0,0 @@
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Checkbox, Empty, Input } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import List from './list';
import SelectedList from './selected-list';
const PanelWrapper = styled.div<{ $maxHeight?: number; $leftWidth?: number }>`
border: 1px solid var(--ant-color-border);
border-radius: var(--ant-border-radius);
overflow-y: auto;
max-height: ${({ $maxHeight }) =>
$maxHeight ? `${$maxHeight + 2}px` : 'auto'};
`;
const Left = styled.div`
padding: 0;
`;
const Right = styled.div``;
const Header = styled.div`
padding: 8px 12px 8px;
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ant-color-split);
background-color: var(--ant-color-fill-alter);
`;
interface SelectPanelProps {
searchPlaceholder?: string;
height?: number;
leftWidth?: number;
options: Array<{ key: string; title: string }>;
selectedKeys: string[];
notFoundContent?: React.ReactNode;
onSelectChange: (selectedKeys: string[]) => void;
styles?: {
container?: React.CSSProperties;
left?: React.CSSProperties;
right?: React.CSSProperties;
header?: React.CSSProperties;
};
}
const SelectPanel: React.FC<SelectPanelProps> = ({
height = 300,
leftWidth = 260,
options,
selectedKeys,
searchPlaceholder,
notFoundContent,
styles,
onSelectChange
}) => {
const intl = useIntl();
const [indeterminate, setIndeterminate] = React.useState(false);
const [checkAll, setCheckAll] = React.useState(false);
const [searchText, setSearchText] = useState('');
const showOptions = useMemo(() => {
return options.filter((item) =>
item.title.toLowerCase().includes(searchText.toLowerCase())
);
}, [options, searchText]);
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(e.target.value);
};
const handleOnUnselect = (
key: string,
newSelectedKeys: { key: string; title: string }[]
) => {
onSelectChange(newSelectedKeys.map((item) => item.key));
};
const handleCheckAllChange = (e: any) => {
const checked = e.target.checked;
setCheckAll(checked);
setIndeterminate(false);
if (checked) {
const allKeys = options
.filter((item) =>
item.title.toLowerCase().includes(searchText.toLowerCase())
)
.map((item) => item.key);
onSelectChange(Array.from(new Set([...selectedKeys, ...allKeys])));
} else {
const filteredKeys = options
.filter((item) =>
item.title.toLowerCase().includes(searchText.toLowerCase())
)
.map((item) => item.key);
const newSelectedKeys = selectedKeys.filter(
(key) => !filteredKeys.includes(key)
);
onSelectChange(newSelectedKeys);
}
};
const updateCheckStatus = (newSelectedKeys: string[]) => {
if (options.length === 0) {
setIndeterminate(false);
setCheckAll(false);
return;
}
const filteredOptions = options.filter((item) =>
item.title.toLowerCase().includes(searchText.toLowerCase())
);
const filteredKeys = filteredOptions.map((item) => item.key);
const selectedFilteredKeys = newSelectedKeys.filter((key) =>
filteredKeys.includes(key)
);
setIndeterminate(
selectedFilteredKeys.length > 0 &&
selectedFilteredKeys.length < filteredKeys.length
);
setCheckAll(selectedFilteredKeys.length === filteredKeys.length);
};
const handleSelectChange = (newSelectedKeys: string[]) => {
onSelectChange(newSelectedKeys);
updateCheckStatus(newSelectedKeys);
};
const handleClearSelection = () => {
onSelectChange([]);
setCheckAll(false);
setIndeterminate(false);
};
useEffect(() => {
updateCheckStatus(selectedKeys);
}, [selectedKeys, options]);
const renderRight = () => {
return (
<Right>
<Header>
<span>({selectedKeys.length}) selected</span>
<Button type="text" size="small" onClick={handleClearSelection}>
Clear
</Button>
</Header>
<SelectedList
maxHeight={height - 50}
selectedList={options.filter((item) =>
selectedKeys.includes(item.key)
)}
onUnselect={handleOnUnselect}
/>
</Right>
);
};
return (
<PanelWrapper
$maxHeight={height}
$leftWidth={leftWidth}
style={styles?.container}
>
<Left>
<Header style={styles?.header}>
<span
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
color: 'var(--ant-color-text-tertiary)'
}}
>
<Checkbox
checked={checkAll}
indeterminate={indeterminate}
onChange={handleCheckAllChange}
></Checkbox>
<span>
{intl.formatMessage(
{ id: 'common.select.count' },
{ count: selectedKeys.length }
)}
</span>
</span>
<Input
prefix={
<SearchOutlined
style={{ color: 'var(--ant-color-text-quaternary)' }}
/>
}
size="small"
allowClear
status={'null' as any}
placeholder={searchPlaceholder}
style={{
width: 300,
height: 32,
borderRadius: 4,
backgroundColor: 'var(--ant-color-bg-container) !important'
}}
onChange={handleSearch}
/>
</Header>
{showOptions.length > 0 ? (
<List
maxHeight={height - 50}
dataList={showOptions}
selectedKeys={selectedKeys}
onSelectChange={handleSelectChange}
/>
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={notFoundContent}
></Empty>
)}
</Left>
</PanelWrapper>
);
};
export default SelectPanel;
src/pages/_components/select-panel/list.tsx
-70
View File
@@ -1,70 +0,0 @@
import { OverlayScroller } from '@/components/overlay-scroller';
import { Checkbox } from 'antd';
import React from 'react';
import styled from 'styled-components';
import AutoTooltip from '../../../components/auto-tooltip';
interface ListProps {
maxHeight?: number;
dataList: Array<{ key: string; title: string }>;
selectedKeys: string[];
renderTitle?: (item: { key: string; title: string }) => React.ReactNode;
onSelectChange: (selectedKeys: string[]) => void;
}
const UL = styled.ul`
list-style: none;
margin: 0;
padding: 0;
`;
const LI = styled.li<{ selected: boolean }>`
display: flex;
align-items: center;
padding: 5px 12px;
cursor: pointer;
border-radius: 2px;
gap: 8px;
&:hover {
background-color: var(--ant-control-item-bg-hover);
}
`;
const List: React.FC<ListProps> = ({
maxHeight,
dataList,
selectedKeys,
onSelectChange,
renderTitle
}) => {
const handleClickItem = (item: { key: string; title: string }) => {
const itemKey = item.key;
const newSelectedKeys = selectedKeys.includes(itemKey)
? selectedKeys.filter((key) => key !== itemKey)
: [...selectedKeys, itemKey];
onSelectChange(newSelectedKeys);
};
return (
<OverlayScroller style={{ paddingInline: 0 }} maxHeight={maxHeight}>
<UL>
{dataList.map((item) => (
<LI
key={item.key}
selected={selectedKeys.includes(item.key)}
onClick={() => handleClickItem(item)}
>
<Checkbox checked={selectedKeys.includes(item.key)}></Checkbox>
{renderTitle ? (
renderTitle(item)
) : (
<AutoTooltip ghost>{item.title}</AutoTooltip>
)}
</LI>
))}
</UL>
</OverlayScroller>
);
};
export default List;
src/pages/_components/select-panel/selected-list.tsx
-60
View File
@@ -1,60 +0,0 @@
import AutoTooltip from '@/components/auto-tooltip';
import { OverlayScroller } from '@/components/overlay-scroller';
import { Tag } from 'antd';
import React from 'react';
import styled from 'styled-components';
const TagInner = styled(Tag)`
border-radius: 12px;
margin: 0;
`;
const Content = styled.div`
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
`;
interface SelectedProps {
maxHeight?: number;
selectedList: { key: string; title: string }[];
onUnselect: (
key: string,
newSelectedKeys: { key: string; title: string }[]
) => void;
}
const SelectedList: React.FC<SelectedProps> = ({
maxHeight,
selectedList,
onUnselect
}) => {
const handleOnUnselect = (key: string) => {
const newSelectedKeys = selectedList.filter((item) => item.key !== key);
onUnselect(key, newSelectedKeys);
};
return (
<OverlayScroller maxHeight={maxHeight}>
<Content>
{selectedList.map((item) => (
<AutoTooltip
title={item.title}
key={item.key}
maxWidth={200}
onClose={(e) => {
e.preventDefault();
handleOnUnselect(item.key);
}}
closable
>
{item.title}
</AutoTooltip>
))}
</Content>
</OverlayScroller>
);
};
export default SelectedList;
src/pages/_components/terminal-tabs/tabs.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import XTerminal from '@/components/x-terminal';
import { CloseOutlined } from '@ant-design/icons';
import { XTerminal } from '@gpustack/core-ui';
import { Button, Tabs } from 'antd';
import { throttle } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
src/pages/_components/yaml-editor/editor.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import EditorWrap from '@/components/editor-wrap';
import { LoadingOutlined } from '@ant-design/icons';
import { EditorWrap } from '@gpustack/core-ui';
import Editor, { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import { yamlDefaults } from 'monaco-yaml';
src/pages/api-keys/components/add-apikey-modal/allow-models.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import SelectPanel from '@/pages/_components/select-panel';
import { queryMyModels } from '@/pages/llmodels/apis';
import { SelectPanel } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Checkbox, Divider, Form, Radio } from 'antd';
import { useEffect, useState } from 'react';
src/pages/api-keys/components/add-apikey-modal/form.tsx
+9 -7
View File
@@ -1,8 +1,10 @@
import Password from '@/components/seal-form/password';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import {
Input as CInput,
Password,
Select as SealSelect
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
@@ -34,12 +36,12 @@ const APIKeyForm: React.FC<{
}
]}
>
<SealInput.Input
<CInput.Input
trim
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item<FormData>
@@ -66,10 +68,10 @@ const APIKeyForm: React.FC<{
></SealSelect>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
<CInput.TextArea
scaleSize={true}
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
></CInput.TextArea>
</Form.Item>
{action === PageAction.CREATE && (
<>
src/pages/api-keys/components/add-apikey-modal/index.tsx
+10 -8
View File
@@ -1,11 +1,13 @@
import AlertBlockInfo from '@/components/alert-info/block';
import CopyButton from '@/components/copy-button';
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import SealInput from '@/components/seal-form/seal-input';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import {
AlertBlockInfo,
Input as CInput,
ColumnWrapper,
CopyButton,
GSDrawer,
ModalFooter
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form, Tag } from 'antd';
import dayjs from 'dayjs';
@@ -296,7 +298,7 @@ const AddModal: React.FC<AddModalProps> = ({
{intl.formatMessage({ id: 'apikeys.table.save.tips' })}
</Tag>
</div>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({ id: 'apikeys.form.apikey' })}
value={apikeyValue}
addAfter={
@@ -307,7 +309,7 @@ const AddModal: React.FC<AddModalProps> = ({
type="text"
></CopyButton>
}
></SealInput.Input>
></CInput.Input>
</Form.Item>
)}
</Form>
src/pages/api-keys/hooks/use-keys-columns.tsx
+2 -4
View File
@@ -1,15 +1,13 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import icons from '@/components/icon-font/icons';
import { tableSorter } from '@/config/settings';
import { AutoTooltip, DropdownButtons } from '@gpustack/core-ui';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { ListItem } from '../config/types';
interface ColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: string[];
src/pages/api-keys/index.tsx
+2 -4
View File
@@ -1,12 +1,10 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PaginationKey } from '@/config/settings';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import useQueryUserList from '@/pages/users/services/use-query-user-list';
import { useModel } from '@@/plugin-model';
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { ConfigProvider, Table } from 'antd';
@@ -191,7 +189,7 @@ const APIKeys: React.FC = () => {
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'default',
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
src/pages/backends/community/add-community-modal.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { enabledBackendsAtom } from '@/atoms/backend';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import Separator from '@/pages/llmodels/components/separator';
import { ColumnWrapper, GSDrawer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useAtom } from 'jotai';
import React, { useEffect } from 'react';
src/pages/backends/community/backend-detail.tsx
+1 -3
View File
@@ -1,13 +1,11 @@
import AutoTooltip from '@/components/auto-tooltip';
import FullMarkdown from '@/components/markdown-viewer/full-markdown';
import { BulbOutlined } from '@ant-design/icons';
import { AutoTooltip, FullMarkdown } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
import _ from 'lodash';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import { generateIcon } from '../components/backend-card';
const Title = styled.div`
position: sticky;
top: 0;
src/pages/backends/community/commnity-backends.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import { enabledBackendsAtom } from '@/atoms/backend';
import IconFont from '@/components/icon-font';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import useTableFetch from '@/hooks/use-table-fetch';
import { SearchOutlined } from '@ant-design/icons';
import { IconFont, ThemeTag } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Input, Tooltip } from 'antd';
import { useAtom } from 'jotai';
src/pages/backends/components/add-modal.tsx
+7 -5
View File
@@ -1,10 +1,12 @@
import AlertBlockInfo from '@/components/alert-info/block';
import IconFont from '@/components/icon-font';
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import SegmentLine from '@/components/segment-line';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import {
AlertBlockInfo,
GSDrawer,
IconFont,
ModalFooter,
SegmentLine
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Tabs } from 'antd';
import _ from 'lodash';
src/pages/backends/components/backend-card.tsx
+13 -12
View File
@@ -1,9 +1,11 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropDownActions from '@/components/drop-down-actions';
import IconFont from '@/components/icon-font';
import TagWrapper from '@/components/tags-wrapper';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import Card from '@/components/templates/card';
import {
AutoTooltip,
DropdownActions,
IconFont,
TagsWrapper,
TemplateCard,
ThemeTag
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
import _ from 'lodash';
@@ -22,8 +24,7 @@ import {
TagColorMap
} from '../config';
import { ListItem } from '../config/types';
const StyledCard = styled(Card)`
const StyledCard = styled(TemplateCard)`
&:hover {
.operations {
background-color: var(--ant-color-fill-tertiary);
@@ -231,11 +232,11 @@ const BackendCard: React.FC<BackendCardProps> = ({
{intl.formatMessage({ id: 'backend.availableFrameworks' })}:{' '}
</span>
</span>
<TagWrapper
<TagsWrapper
gap={8}
dataList={frameworks}
renderTag={renderTag}
></TagWrapper>
></TagsWrapper>
</InfoItem>
);
};
@@ -279,7 +280,7 @@ const BackendCard: React.FC<BackendCardProps> = ({
actionsRenderer(data)
) : (
<span onClick={handleonClickAction} className="operations">
<DropDownActions
<DropdownActions
menu={{
items: actions,
onClick: handleOnSelect
@@ -290,7 +291,7 @@ const BackendCard: React.FC<BackendCardProps> = ({
size="small"
type="text"
></Button>
</DropDownActions>
</DropdownActions>
</span>
);
};
src/pages/backends/components/backend-list.tsx
+8 -6
View File
@@ -1,7 +1,9 @@
import ResizeContainer from '@/components/resize-container';
import CardSkeleton from '@/components/templates/card-skelton';
import InfiniteScroller from '@/pages/_components/infinite-scroller';
import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
import {
InfiniteScroller,
ResizeContainer,
TemplateCardSkeleton
} from '@gpustack/core-ui';
import { useScrollerContext } from '@gpustack/core-ui/lib/components/infinite-scroller/use-scroller-context';
import { Spin } from 'antd';
import React from 'react';
import backendListCss from '../styles/backend-list.less';
@@ -38,7 +40,7 @@ const ListSkeleton: React.FC<{
>
{isFirst && (
<div className={backendListCss.SkeletonWrapper}>
<CardSkeleton
<TemplateCardSkeleton
skeletonProps={{
title: false
}}
@@ -47,7 +49,7 @@ const ListSkeleton: React.FC<{
flexDirection: 'column',
gap: 24
}}
></CardSkeleton>
></TemplateCardSkeleton>
</div>
)}
</Spin>
src/pages/backends/components/import-yaml.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import YamlEditor from '@/pages/_components/yaml-editor';
import { YamlEditor } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import React, {
forwardRef,
src/pages/backends/components/version-info-modal.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import ScrollerModal from '@/components/scroller-modal';
import { PlusOutlined } from '@ant-design/icons';
import { ScrollerModal } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
src/pages/backends/config/index.ts
+1 -1
View File
@@ -2,12 +2,12 @@ import MindIELogo from '@/assets/logo/ascend.png';
import SGLangLogo from '@/assets/logo/sglang.png';
import vLLMLogo from '@/assets/logo/vllm.png';
import VoxBoxLogo from '@/assets/logo/voxbox.png';
import icons from '@/components/icon-font/icons';
import { backendOptionsMap } from '@/pages/llmodels/constants/backend-parameters';
import {
GPUDriverMap,
ManufacturerMap
} from '@/pages/resources/config/gpu-driver';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
import jsYaml from 'js-yaml';
import { trim } from 'lodash';
src/pages/backends/forms/basic.tsx
+13 -11
View File
@@ -1,9 +1,11 @@
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import {
Input as CInput,
LabelSelector,
ListInput,
Textarea as SealTextArea
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useEffect } from 'react';
@@ -39,7 +41,7 @@ const BasicForm = () => {
}
]}
>
<SealInput.Input
<CInput.Input
trim
addAfter={
backendSource === BackendSourceValueMap.CUSTOM ? '-custom' : null
@@ -47,10 +49,10 @@ const BasicForm = () => {
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item<FormData> hidden name="backend_source">
<SealInput.Input></SealInput.Input>
<CInput.Input></CInput.Input>
</Form.Item>
{backendSource !== BackendSourceValueMap.BUILTIN && (
<>
@@ -58,11 +60,11 @@ const BasicForm = () => {
name="health_check_path"
rules={[{ required: false }]}
>
<SealInput.Input
<CInput.Input
trim
placeholder={`/v1/models`}
label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item name="default_run_command">
<SealTextArea
@@ -113,10 +115,10 @@ const BasicForm = () => {
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
<CInput.TextArea
scaleSize={true}
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
></CInput.TextArea>
</Form.Item>
</>
);
src/pages/backends/forms/version-info.tsx
+6 -5
View File
@@ -1,7 +1,9 @@
import AutoTooltip from '@/components/auto-tooltip';
import CopyButton from '@/components/copy-button';
import BaseSelect from '@/components/seal-form/base/select';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import {
AutoTooltip,
BaseSelect,
CopyButton,
ThemeTag
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Empty, Typography } from 'antd';
import { useState } from 'react';
@@ -14,7 +16,6 @@ import {
TagColorMap
} from '../config';
import { VersionListItem } from '../config/types';
const ItemWrapper = styled.div`
display: flex;
flex-direction: column;
src/pages/backends/forms/versions-config.tsx
+17 -16
View File
@@ -1,12 +1,14 @@
import CollapsibleContainer from '@/components/collapse-container';
import LabelSelector from '@/components/label-selector';
import BaseSelect from '@/components/seal-form/base/select';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import {
BaseSelect,
Input as CInput,
CollapseContainer,
LabelSelector,
Select as SealSelect,
Textarea as SealTextArea
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Form, Tag } from 'antd';
import React, { useEffect, useMemo } from 'react';
@@ -14,7 +16,6 @@ import styled from 'styled-components';
import { BackendSourceValueMap, frameworks } from '../config';
import { useFormContext } from '../config/form-context';
import { ListItem } from '../config/types';
// version must be endwith '-custom'
const Box = styled.div`
@@ -263,7 +264,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
border: '1px solid var(--ant-color-split)'
}}
>
<CollapsibleContainer
<CollapseContainer
collapsible={true}
showExpandIcon={true}
key={name}
@@ -289,7 +290,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
)}
</Label>
}
onToggle={(open) => onToggle(open, name)}
onToggle={(open: boolean) => onToggle(open, name)}
deleteBtn={false}
right={
<div className="flex-center gap-8">
@@ -328,13 +329,13 @@ const VersionsForm: React.FC<AddModalProps> = ({
}
]}
>
<SealInput.Input
<CInput.Input
trim
addAfter={showCustomSuffix ? '-custom' : null}
onChange={handleVersionChange}
label={intl.formatMessage({ id: 'backend.version' })}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item
name={[name, 'image_name']}
@@ -345,7 +346,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
}
]}
>
<SealInput.Input
<CInput.Input
trim
required
placeholder={intl.formatMessage(
@@ -353,7 +354,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
{ content: 'vllm/vllm-openai:v0.12.0' }
)}
label={intl.formatMessage({ id: 'backend.imageName' })}
></SealInput.Input>
></CInput.Input>
</Form.Item>
</Box>
<Form.Item
@@ -374,7 +375,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
/>
</Form.Item>
<Form.Item name={[name, 'entrypoint']}>
<SealInput.TextArea
<CInput.TextArea
allowClear
description={intl.formatMessage({
id: 'backend.entrypoint.tips'
@@ -382,7 +383,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
label={intl.formatMessage({
id: 'backend.replaceEntrypoint'
})}
></SealInput.TextArea>
></CInput.TextArea>
</Form.Item>
<Form.Item name={[name, 'run_command']}>
<SealTextArea
@@ -413,7 +414,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
}
></LabelSelector>
</Form.Item>
</CollapsibleContainer>
</CollapseContainer>
</div>
));
}}
src/pages/backends/hooks/use-create-backend.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import IconFont from '@/components/icon-font';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useBodyScroll from '@/hooks/use-body-scroll';
import { IconFont } from '@gpustack/core-ui';
import { ListItem } from '../config/types';
import useCommunityBackend from './use-community-backend';
import useCustomBackend from './use-custom-backend';
src/pages/backends/index.tsx
+1 -3
View File
@@ -1,8 +1,6 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import _ from 'lodash';
src/pages/benchmark/components/add-benchmark-modal.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import { FormDrawer } from '@gpustack/core-ui';
import React, { useRef } from 'react';
import { FormData, BenchmarkListItem as ListItem } from '../config/types';
src/pages/benchmark/components/detail-content.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import IconFont from '@/components/icon-font';
import { IconFont } from '@gpustack/core-ui';
import { useIntl, useSearchParams } from '@umijs/max';
import { Tabs, TabsProps } from 'antd';
import React, { useState } from 'react';
src/pages/benchmark/components/detail-modal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import FormDrawer from '@/pages/_components/form-drawer';
import { FormDrawer } from '@gpustack/core-ui';
import { BenchmarkListItem } from '../config/types';
import DetailContent from './detail-content';
src/pages/benchmark/components/environment/index.tsx
+7 -5
View File
@@ -1,7 +1,9 @@
import RowChildren from '@/components/seal-table/components/row-children';
import SealTable from '@/components/seal-table/index';
import TableContext from '@/components/seal-table/table-context';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import {
RowChildren,
Table as SealTable,
TableProvider
} from '@gpustack/core-ui';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Col, Row } from 'antd';
import _ from 'lodash';
@@ -175,7 +177,7 @@ const Environment: React.FC = () => {
return (
<Container>
<TableContext.Provider
<TableProvider
value={{
allChildren: allChildren
}}
@@ -195,7 +197,7 @@ const Environment: React.FC = () => {
columns={workerColumns}
expandable={true}
></SealTable>
</TableContext.Provider>
</TableProvider>
</Container>
);
};
src/pages/benchmark/components/environment/use-gpu-columns.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import AutoTooltip from '@/components/auto-tooltip';
import { convertFileSize } from '@/utils';
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
export default function useGPUColumns(): {
title: string;
dataIndex: string;
src/pages/benchmark/components/environment/use-worker-columns.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import AutoTooltip from '@/components/auto-tooltip';
import { convertFileSize } from '@/utils';
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
export default function useWorkerColumns(): {
title: string;
dataIndex: string;
src/pages/benchmark/components/left-actions.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FiltersButton } from '@/components/page-tools';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
import { FiltersButton } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Input, Space } from 'antd';
import _ from 'lodash';
src/pages/benchmark/components/logs/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import LogsViewer from '@/components/logs-viewer/virtual-log-list';
import { LogsViewer } from '@gpustack/core-ui';
import React, { useRef } from 'react';
import { BENCHMARKS_API } from '../../apis';
import { useDetailContext } from '../../config/detail-context';
src/pages/benchmark/components/right-actions.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { DropdownButtons, IconFont } from '@gpustack/core-ui';
import { Button, Space } from 'antd';
import React from 'react';
src/pages/benchmark/components/row-actions.tsx
+2 -3
View File
@@ -1,8 +1,7 @@
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import icons from '@/components/icon-font/icons';
import useDownloadLogs from '@/hooks/use-download-logs';
import { DownloadOutlined } from '@ant-design/icons';
import { DropdownButtons, IconFont } from '@gpustack/core-ui';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
import { BENCHMARKS_API } from '../apis';
import { BenchmarkStatusValueMap } from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
src/pages/benchmark/components/summary/instance.tsx
+1 -2
View File
@@ -1,9 +1,8 @@
import AutoTooltip from '@/components/auto-tooltip';
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Descriptions, Flex, Tag } from 'antd';
import React, { useMemo } from 'react';
import { useDetailContext } from '../../config/detail-context';
const Instance: React.FC = () => {
const intl = useIntl();
const { detailData } = useDetailContext();
src/pages/benchmark/components/summary/section.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import HeadlessCollapse from '@/components/collapse-container/headless-collapse';
import IconFont from '@/components/icon-font';
import { HeadlessCollapse, IconFont } from '@gpustack/core-ui';
import { useState } from 'react';
import styled from 'styled-components';
src/pages/benchmark/components/view-logs-modal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import LogsViewer from '@/components/logs-viewer/virtual-log-list';
import { LogsViewer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Modal } from 'antd';
import React, { useCallback, useEffect } from 'react';
src/pages/benchmark/details.tsx
+1 -3
View File
@@ -1,5 +1,4 @@
import DeleteModal from '@/components/delete-modal';
import BaseSelect from '@/components/seal-form/base/select';
import { BaseSelect, DeleteModal } from '@gpustack/core-ui';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import React, { useEffect, useRef } from 'react';
@@ -18,7 +17,6 @@ import useQueryBenchmarkList from './services/use-query-benchmarks';
import useQueryDetail from './services/use-query-detail';
import useQueryProfiles from './services/use-query-profiles';
import useStopBenchmark from './services/use-stop-benchmark';
const Details: React.FC = () => {
const modalRef = useRef<any>(null);
const navigate = useNavigate();
src/pages/benchmark/filters/index.tsx
+1 -3
View File
@@ -1,13 +1,11 @@
import BaseSelect from '@/components/seal-form/base/select';
import FilterForm from '@/pages/_components/filter-form';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { SearchOutlined } from '@ant-design/icons';
import { BaseSelect, FilterForm } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form, Input } from 'antd';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import styled from 'styled-components';
import { profileOptions } from '../config';
const Content = styled.div`
display: flex;
flex-direction: column;
src/pages/benchmark/forms/basic.tsx
+8 -9
View File
@@ -1,9 +1,8 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { modelNameReg, PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { ClusterStatusValueMap } from '@/pages/cluster-management/config';
import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
import { Input as CInput, Select as SealSelect } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
@@ -60,10 +59,10 @@ const BasicForm: React.FC = () => {
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item<FormData>
name="cluster_id"
@@ -82,22 +81,22 @@ const BasicForm: React.FC = () => {
></SealSelect>
</Form.Item>
<Form.Item<FormData> name="model_name" hidden={true}>
<SealInput.Input></SealInput.Input>
<CInput.Input></CInput.Input>
</Form.Item>
<Form.Item<FormData> name="model_id" hidden={true}>
<SealInput.Input></SealInput.Input>
<CInput.Input></CInput.Input>
</Form.Item>
<Form.Item<FormData> name="model_instance_name" hidden={true}>
<SealInput.Input></SealInput.Input>
<CInput.Input></CInput.Input>
</Form.Item>
<ModelInstanceForm></ModelInstanceForm>
<Form.Item<FormData> name="description">
<SealInput.TextArea
<CInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
></CInput.TextArea>
</Form.Item>
</>
);
src/pages/benchmark/forms/dataset.tsx
+1 -3
View File
@@ -1,7 +1,6 @@
import AutoTooltip from '@/components/auto-tooltip';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { AutoTooltip, Select as SealSelect } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form, Select } from 'antd';
import _ from 'lodash';
@@ -10,7 +9,6 @@ import { ProfileValueMap } from '../config';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import RandomSettingsForm from './random-settings';
const DatasetForm: React.FC = () => {
const intl = useIntl();
const form = Form.useFormInstance();
src/pages/benchmark/forms/index.tsx
+2 -4
View File
@@ -1,9 +1,7 @@
import IconFont from '@/components/icon-font';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
import { CollapsePanel, IconFont, ScrollSpyTabs } from '@gpustack/core-ui';
import { useWrapperContext } from '@gpustack/core-ui/lib/components/column-wrapper/use-wrapper-context';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import {
src/pages/benchmark/forms/labels.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import LabelSelector from '@/components/label-selector';
import { LabelSelector } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
src/pages/benchmark/forms/model-instance.tsx
+1 -1
View File
@@ -1,4 +1,3 @@
import SealCascader from '@/components/seal-form/seal-cascader';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import {
@@ -9,6 +8,7 @@ import {
import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
import { useQueryModelInstancesList } from '@/pages/llmodels/services/use-query-model-instances';
import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
import { Cascader as SealCascader } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form, Tooltip } from 'antd';
import React, { useEffect } from 'react';
src/pages/benchmark/forms/random-settings.tsx
+14 -12
View File
@@ -1,7 +1,9 @@
import SealInputNumber from '@/components/seal-form/input-number';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import {
InputNumber as CInputNumber,
Select as SealSelect
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useMemo } from 'react';
@@ -62,14 +64,14 @@ const RandomSettingsForm: React.FC<{
}
]}
>
<SealInputNumber
<CInputNumber
min={0}
disabled={disabled}
label={intl.formatMessage({
id: 'benchmark.table.inputTokenLength'
})}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
<Form.Item<FormData>
name="dataset_output_tokens"
@@ -83,24 +85,24 @@ const RandomSettingsForm: React.FC<{
}
]}
>
<SealInputNumber
<CInputNumber
min={0}
disabled={disabled}
label={intl.formatMessage({
id: 'benchmark.table.outputTokenLength'
})}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
<Form.Item<FormData>
name="dataset_seed"
getValueProps={(value) => ({ value: value || null })}
>
<SealInputNumber
<CInputNumber
min={0}
disabled={disabled}
label={intl.formatMessage({ id: 'playground.image.params.seed' })}
></SealInputNumber>
></CInputNumber>
</Form.Item>
</>
)}
@@ -114,11 +116,11 @@ const RandomSettingsForm: React.FC<{
}
]}
>
<SealInputNumber
<CInputNumber
disabled={disabled}
label={intl.formatMessage({ id: 'benchmark.table.requestRate' })}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
<Form.Item<FormData>
name="total_requests"
@@ -129,12 +131,12 @@ const RandomSettingsForm: React.FC<{
}
]}
>
<SealInputNumber
<CInputNumber
min={0}
disabled={disabled}
label={intl.formatMessage({ id: 'benchmark.form.totalRequests' })}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
</>
);
src/pages/benchmark/hooks/use-benchmark-columns.tsx
+1 -2
View File
@@ -1,13 +1,12 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import { tableSorter } from '@/config/settings';
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useMemo } from 'react';
import RowActions from '../components/row-actions';
import { BenchmarkListItem as ListItem } from '../config/types';
const useBenchmarkColumns = (params: {
sortOrder: string[];
columns: ColumnsType<ListItem>;
src/pages/benchmark/hooks/use-column-settings.tsx
+6 -5
View File
@@ -1,8 +1,10 @@
import AutoTooltip from '@/components/auto-tooltip';
import InfoColumn from '@/components/simple-table/info-column';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import ColumnSettings from '@/pages/_components/column-settings';
import {
AutoTooltip,
ColumnSettings,
InfoColumn,
StatusTag
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Typography } from 'antd';
import dayjs from 'dayjs';
@@ -14,7 +16,6 @@ import {
BenchmarkStatusValueMap
} from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
// sort by this order
const allFields = [
'cluster_id',
src/pages/benchmark/index.tsx
+1 -3
View File
@@ -1,11 +1,9 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useTableFetch from '@/hooks/use-table-fetch';
import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
import { useIntl, useNavigate } from '@umijs/max';
import { useMemoizedFn, useToggle } from 'ahooks';
import { ConfigProvider, Table, message } from 'antd';
src/pages/cluster-management/cluster-create.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { systemConfigAtom } from '@/atoms/system';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import { ColumnWrapper } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useAtom } from 'jotai';
import _ from 'lodash';
src/pages/cluster-management/cluster-detail.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import { clusterDetailAtom } from '@/atoms/clusters';
import IconFont from '@/components/icon-font';
import Deployments from '@/pages/llmodels/deployments';
import GPUList from '@/pages/resources/components/gpus';
import WorkerList from '@/pages/resources/components/workers';
import { IconFont } from '@gpustack/core-ui';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useAtomValue } from 'jotai';
src/pages/cluster-management/cluster-modal.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageAction } from '@/config';
import { GSDrawer } from '@gpustack/core-ui';
import React from 'react';
import ClusterCreate from './cluster-create';
src/pages/cluster-management/clusters.tsx
+10 -8
View File
@@ -1,16 +1,18 @@
import { clusterSessionAtom, expandKeysAtom } from '@/atoms/clusters';
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import TableContext from '@/components/seal-table/table-context';
import { TableOrder } from '@/components/seal-table/types';
import { PageAction } from '@/config';
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
import type { PageActionType } from '@/config/types';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableFetch from '@/hooks/use-table-fetch';
import useWatchList from '@/hooks/use-watch-list';
import {
DeleteModal,
FilterBar,
IconFont,
Table as SealTable,
TableProvider
} from '@gpustack/core-ui';
import { TableOrder } from '@gpustack/core-ui/lib/components/table/types';
import { useIntl, useNavigate } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { message } from 'antd';
@@ -354,7 +356,7 @@ const Clusters: React.FC = () => {
></RightActions>
}
></FilterBar>
<TableContext.Provider
<TableProvider
value={{
allChildren: allWorkerPoolList,
setDisableExpand: setDisableExpand
@@ -405,7 +407,7 @@ const Clusters: React.FC = () => {
onChange: handlePageChange
}}
></SealTable>
</TableContext.Provider>
</TableProvider>
</PageBox>
<AddCluster
provider={openAddModal.provider}
src/pages/cluster-management/components/add-cluster.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import { FormDrawer } from '@gpustack/core-ui';
import React, { useRef } from 'react';
import { ProviderType } from '../config';
import {
src/pages/cluster-management/components/add-credential.tsx
+7 -8
View File
@@ -1,8 +1,7 @@
import SealInput from '@/components/seal-form/seal-input';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import FormDrawer from '@/pages/_components/form-drawer';
import { Input as CInput, FormDrawer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
@@ -74,10 +73,10 @@ const AddModal: React.FC<AddModalProps> = ({
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
{provider === ProviderValueMap.DigitalOcean && (
<>
@@ -90,7 +89,7 @@ const AddModal: React.FC<AddModalProps> = ({
}
]}
>
<SealInput.Password
<CInput.Password
label={intl.formatMessage({
id: 'clusters.credential.token'
})}
@@ -109,14 +108,14 @@ const AddModal: React.FC<AddModalProps> = ({
}}
></span>
}
></SealInput.Password>
></CInput.Password>
</Form.Item>
</>
)}
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
<CInput.TextArea
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
></CInput.TextArea>
</Form.Item>
</Form>
</FormDrawer>
src/pages/cluster-management/components/add-pool.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import { FormDrawer } from '@gpustack/core-ui';
import React, { useEffect, useRef } from 'react';
import { ProviderType } from '../config';
import {
src/pages/cluster-management/components/add-worker-command.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import HighlightCode from '@/components/highlight-code';
import { addWorkerGuide } from '@/pages/resources/config';
import { HighlightCode } from '@gpustack/core-ui';
import React from 'react';
type ViewModalProps = {
src/pages/cluster-management/components/add-worker/index.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
import { ColumnWrapper, GSDrawer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Alert } from 'antd';
import React, { useEffect } from 'react';
src/pages/cluster-management/components/add-worker/select-cluster.tsx
+1 -2
View File
@@ -1,4 +1,4 @@
import BaseSelect from '@/components/seal-form/base/select';
import { BaseSelect } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Spin, Typography } from 'antd';
import { useEffect, useState } from 'react';
@@ -6,7 +6,6 @@ import { useAddWorkerContext } from './add-worker-context';
import { AddWorkerStepProps, StepNamesMap } from './config';
import { Title } from './constainers';
import StepCollapse from './step-collapse';
const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
const {
clusterList,
src/pages/cluster-management/components/add-worker/specify-arguments.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import AlertInfoBlock from '@/components/alert-info/block';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { AlertBlockInfo as AlertInfoBlock } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Input, Switch, Typography } from 'antd';
import React, { useEffect } from 'react';
src/pages/cluster-management/components/add-worker/step-collapse.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import CollapsibleContainer from '@/components/collapse-container';
import { CollapseContainer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import React from 'react';
@@ -72,7 +72,7 @@ const StepCollapse: React.FC<StepItemProps> = ({
collapseKey?.has(name) ? 'step-collapse-open' : 'step-collapse'
}
>
<CollapsibleContainer
<CollapseContainer
collapsible={true}
open={collapseKey?.has(name)}
iconPlacement="right"
@@ -114,7 +114,7 @@ const StepCollapse: React.FC<StepItemProps> = ({
</Button>
)}
</ButtonWrapper>
</CollapsibleContainer>
</CollapseContainer>
</Box>
);
};
src/pages/cluster-management/components/add-worker/vendor-notes.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import AlertInfoBlock from '@/components/alert-info/block';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { AlertBlockInfo } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useAddWorkerContext } from './add-worker-context';
import { NotesWrapper } from './constainers';
@@ -15,7 +15,7 @@ const VendorNotes = () => {
} as { label: string; notes: string[] });
return (
<AlertInfoBlock
<AlertBlockInfo
maxHeight={200}
title={intl.formatMessage(
{ id: 'clusters.addworker.vendorNotes.title' },
@@ -41,7 +41,7 @@ const VendorNotes = () => {
</NotesWrapper>
) : null
}
></AlertInfoBlock>
></AlertBlockInfo>
);
};
src/pages/cluster-management/components/check-env-command.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import HighlightCode from '@/components/highlight-code';
import { addWorkerGuide } from '@/pages/resources/config';
import { HighlightCode } from '@gpustack/core-ui';
import React from 'react';
import { ProviderType } from '../config';
src/pages/cluster-management/components/cloud-options.tsx
+6 -5
View File
@@ -1,6 +1,7 @@
import DropDownActions from '@/components/drop-down-actions';
import ListMap from '@/components/dynamic-form/components/list-map';
import { FieldSchema } from '@/components/dynamic-form/config/types';
import { DropdownActions } from '@gpustack/core-ui';
import ListMap from '@gpustack/core-ui/lib/components/dynamic-form/components/list-map';
import { FieldSchema } from '@gpustack/core-ui/lib/components/dynamic-form/config/types';
import { PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
@@ -87,14 +88,14 @@ const CloudOptions: React.FC<{
return (
<>
<Title>
<DropDownActions menu={menu}>
<DropdownActions menu={menu}>
<Button variant="filled" color="default">
<PlusOutlined />
<span>
{intl.formatMessage({ id: 'clusters.workerpool.cloudOptions' })}
</span>
</Button>
</DropDownActions>
</DropdownActions>
</Title>
{fieldList.length > 0 &&
fieldList.map((field) => (
src/pages/cluster-management/components/cloud-provider-form.tsx
+3 -4
View File
@@ -1,9 +1,8 @@
import { fromClusterCreationAtom } from '@/atoms/clusters';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { Input as CInput, Select as SealSelect } from '@gpustack/core-ui';
import { Link, useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useAtom } from 'jotai';
@@ -193,14 +192,14 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
}
]}
>
<SealInput.Input
<CInput.Input
description={intl.formatMessage({
id: 'clusters.form.serverUrl.tips'
})}
label={intl.formatMessage({ id: 'clusters.create.serverUrl' })}
required={true}
trim={true}
></SealInput.Input>
></CInput.Input>
</Form.Item>
</>
);
src/pages/cluster-management/components/cluster-detail-modal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { GSDrawer } from '@gpustack/core-ui';
import React from 'react';
import { ClusterListItem } from '../config/types';
import ClusterDetailContent from './cluster-metrics';
src/pages/cluster-management/components/cluster-form.tsx
+7 -5
View File
@@ -1,9 +1,11 @@
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { json2Yaml, yaml2Json } from '@/pages/backends/config';
import {
Input as CInput,
CollapsePanel,
Textarea as SealTextArea
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
@@ -164,11 +166,11 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
required
trim={false}
></SealInput.Input>
></CInput.Input>
</Form.Item>
{provider === ProviderValueMap.DigitalOcean && (
<CloudProvider
src/pages/cluster-management/components/cluster-metrics.tsx
+9 -10
View File
@@ -1,5 +1,4 @@
import GaugeChart from '@/components/echarts/gauge';
import Card from '@/components/templates/card';
import { GaugeChart, TemplateCard } from '@gpustack/core-ui';
import { useSearchParams } from '@umijs/max';
import { Col, Row } from 'antd';
import _ from 'lodash';
@@ -196,46 +195,46 @@ const ClusterMetrics = () => {
<SubTitle>System Load</SubTitle>
<Row style={{ marginBottom: 16 }} gutter={16}>
<Col span={12}>
<Card height={CardHeight} clickable={false} ghost>
<TemplateCard height={CardHeight} clickable={false} ghost>
<TrendChart
data={detailContent?.history}
metrics={['vram']}
metricsMap={metricsMap}
title="VRAM"
></TrendChart>
</Card>
</TemplateCard>
</Col>
<Col span={12}>
<Card height={CardHeight} clickable={false} ghost>
<TemplateCard height={CardHeight} clickable={false} ghost>
<TrendChart
data={detailContent?.history}
metrics={['ram']}
metricsMap={metricsMap}
title="RAM"
></TrendChart>
</Card>
</TemplateCard>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Card height={CardHeight} clickable={false} ghost>
<TemplateCard height={CardHeight} clickable={false} ghost>
<TrendChart
data={detailContent?.history}
metrics={['cpu']}
metricsMap={metricsMap}
title="CPU"
></TrendChart>
</Card>
</TemplateCard>
</Col>
<Col span={12}>
<Card height={CardHeight} clickable={false} ghost>
<TemplateCard height={CardHeight} clickable={false} ghost>
<TrendChart
data={detailContent?.history}
metrics={['gpu']}
metricsMap={metricsMap}
title="GPU"
></TrendChart>
</Card>
</TemplateCard>
</Col>
</Row>
</div>
src/pages/cluster-management/components/detail/cluster-basic.tsx
+1 -3
View File
@@ -1,7 +1,5 @@
import CardWrapper from '@/components/card-wrapper';
import IconFont from '@/components/icon-font';
import StatusTag from '@/components/status-tag';
import { StarFilled } from '@ant-design/icons';
import { CardWrapper, IconFont, StatusTag } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import type { DescriptionsProps } from 'antd';
import { Descriptions, Tooltip } from 'antd';
src/pages/cluster-management/components/detail/cluster-system-load.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import CardWrapper from '@/components/card-wrapper';
import { CardWrapper } from '@gpustack/core-ui';
import { Col, Progress, Row, Tag } from 'antd';
import { round } from 'lodash';
import React, { useEffect } from 'react';
src/pages/cluster-management/components/k8s-provider-form.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import SealSelect from '@/components/seal-form/seal-select';
import { Select as SealSelect } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
src/pages/cluster-management/components/k8s-volume-mount.tsx
+18 -17
View File
@@ -1,12 +1,14 @@
import CollapsibleContainer from '@/components/collapse-container';
import SealCheckbox from '@/components/seal-form/seal-checkbox';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import SealSwitch from '@/components/seal-form/seal-switch';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import {
Input as CInput,
CollapseContainer,
Checkbox as SealCheckbox,
Select as SealSelect,
Switch as SealSwitch
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Flex, Form } from 'antd';
import React, { useEffect, useState } from 'react';
@@ -157,11 +159,11 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
borderRadius: 'var(--ant-border-radius-lg)'
}}
>
<CollapsibleContainer
<CollapseContainer
collapsible={true}
showExpandIcon={true}
open={collapseKey.has(name)}
onToggle={(open) => onToggle(open, name)}
onToggle={(open: boolean) => onToggle(open, name)}
styles={{
body: collapseKey.has(name) ? { padding: 16 } : {},
content: { paddingTop: 0 },
@@ -203,13 +205,12 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
}
]}
>
<SealInput.Input
disabled={name === 0}
<CInput.Input
label={intl.formatMessage({
id: 'clusters.volume.name'
})}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Flex style={{ gap: 16, width: '100%' }}>
{/* Mount Path */}
@@ -232,7 +233,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
}
]}
>
<SealInput.Input
<CInput.Input
required
disabled={name === 0}
placeholder={intl.formatMessage({
@@ -241,7 +242,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
label={intl.formatMessage({
id: 'clusters.volume.mountPath'
})}
></SealInput.Input>
></CInput.Input>
</Form.Item>
</div>
@@ -307,7 +308,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
}
]}
>
<SealInput.Input
<CInput.Input
required
placeholder={intl.formatMessage({
id: 'clusters.volume.mountPath.format'
@@ -315,7 +316,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
label={intl.formatMessage({
id: 'clusters.volume.sourceType.hostPath'
})}
></SealInput.Input>
></CInput.Input>
</Form.Item>
</div>
@@ -364,7 +365,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({
id: 'clusters.volume.pvc.claimName'
})}
@@ -390,7 +391,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({
id: 'clusters.volume.configMap.name'
})}
@@ -412,7 +413,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
</Form.Item>
</Flex>
)}
</CollapsibleContainer>
</CollapseContainer>
</div>
);
});
src/pages/cluster-management/components/pool-form.tsx
+21 -20
View File
@@ -2,20 +2,21 @@ import {
regionInstanceTypeListAtom,
regionOSImageListAtom
} from '@/atoms/clusters';
import CollapsibleContainer, {
CollapsibleContainerProps
} from '@/components/collapse-container';
import IconFont from '@/components/icon-font';
import LabelSelector from '@/components/label-selector';
import AutoComplete from '@/components/seal-form/auto-complete';
import SealInputNumber from '@/components/seal-form/input-number';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { CardContainer } from '@/pages/llmodels/components/gpu-card';
import { DeleteOutlined } from '@ant-design/icons';
import {
AutoComplete,
Input as CInput,
InputNumber as CInputNumber,
CollapseContainer,
IconFont,
LabelSelector,
Select as SealSelect
} from '@gpustack/core-ui';
import { type CollapseContainerProps } from '@gpustack/core-ui/lib/components/collapse-container';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Button, Form } from 'antd';
@@ -143,7 +144,7 @@ type AddModalProps = {
onFinish: (values: FormData) => void;
onDelete?: () => void;
showDelete?: boolean;
collapseProps?: CollapsibleContainerProps;
collapseProps?: CollapseContainerProps;
};
const InstanceSpecData: React.FC<{ instanceSpec: Record<string, any> }> = ({
@@ -155,7 +156,7 @@ const InstanceSpecData: React.FC<{ instanceSpec: Record<string, any> }> = ({
.filter(([key, value]) => value)
.map(([key, value]) => (
<Form.Item key={key} name={['instance_spec', key]} hidden>
<SealInput.Input />
<CInput.Input />
</Form.Item>
))}
</>
@@ -305,7 +306,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}));
return (
<CollapsibleContainer
<CollapseContainer
{...restCollapseProps}
title={title}
collapsible={collapsible}
@@ -350,12 +351,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}
]}
>
<SealInput.Input
<CInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
></CInput.Input>
</Form.Item>
<Form.Item<FormData>
name="instance_type"
@@ -394,12 +395,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}
]}
>
<SealInputNumber
<CInputNumber
label={intl.formatMessage({
id: 'clusters.workerpool.replicas'
})}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
<Form.Item<FormData>
name="batch_size"
@@ -413,7 +414,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}
]}
>
<SealInputNumber
<CInputNumber
description={intl.formatMessage({
id: 'clusters.workerpool.batchSize.desc'
})}
@@ -421,7 +422,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
id: 'clusters.workerpool.batchSize'
})}
required
></SealInputNumber>
></CInputNumber>
</Form.Item>
<Form.Item<FormData>
@@ -486,12 +487,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
</Form.Item>
<VolumesConfig disabled={action === PageAction.EDIT}></VolumesConfig>
<Form.Item<FormData> name="os_image" hidden>
<SealInput.Input></SealInput.Input>
<CInput.Input></CInput.Input>
</Form.Item>
<InstanceSpecData instanceSpec={instanceSpec} />
</Container>
</Form>
</CollapsibleContainer>
</CollapseContainer>
);
});
src/pages/cluster-management/components/pool-rows.tsx
+8 -6
View File
@@ -1,9 +1,11 @@
import DeleteModal from '@/components/delete-modal';
import CellContent from '@/components/seal-table/components/cell-content';
import RowChildren from '@/components/seal-table/components/row-children';
import RowContext from '@/components/seal-table/row-context';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import {
CellContent,
DeleteModal,
RowChildren,
TableRowProvider
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Col, message, Row } from 'antd';
@@ -120,7 +122,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
key={data.id}
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
>
<RowContext.Provider value={{ row: data, onCell: handleOnCell }}>
<TableRowProvider value={{ row: data, onCell: handleOnCell }}>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
@@ -139,7 +141,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
})}
</Row>
</RowChildren>
</RowContext.Provider>
</TableRowProvider>
</div>
);
})}
src/pages/cluster-management/components/provider-catalog.tsx
+3 -4
View File
@@ -1,5 +1,4 @@
import IconFont from '@/components/icon-font';
import Card from '@/components/templates/card';
import { IconFont, TemplateCard } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import React, { useMemo } from 'react';
@@ -147,7 +146,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
key={action.key}
>
<CardBox>
<Card
<TemplateCard
height={height}
onClick={() => onSelect?.(action.key as string, action)}
active={current === action.key}
@@ -155,7 +154,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
clickable={clickable}
header={renderTitle(action)}
icon={action.icon}
></Card>
></TemplateCard>
</CardBox>
</Tooltip>
))}
src/pages/cluster-management/components/register-cluster-inner.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import HighlightCode from '@/components/highlight-code';
import { HighlightCode } from '@gpustack/core-ui';
import React, { useMemo } from 'react';
import { generateK8sRegisterCommand } from '../config';
src/pages/cluster-management/components/support-gpus.tsx
+1 -1
View File
@@ -7,12 +7,12 @@ import mooreLogo from '@/assets/logo/moore-logo.png';
import nvidiaLogo from '@/assets/logo/nvidia.png';
import theadLogoEN from '@/assets/logo/t-head-en.png';
import theadLogoZH from '@/assets/logo/t-head-zh.png';
import IconFont from '@/components/icon-font';
import useUserSettings from '@/hooks/use-user-settings';
import {
AddWorkerDockerNotes,
GPUDriverMap
} from '@/pages/resources/config/gpu-driver';
import { IconFont } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import styled from 'styled-components';
import ProviderCatalog from './provider-catalog';
src/pages/cluster-management/components/trend-chart.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import LineChart from '@/components/echarts/line-chart';
import { LineChart } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import dayjs from 'dayjs';
import _ from 'lodash';
src/pages/cluster-management/components/volumes-config.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import ListMap from '@/components/dynamic-form/components/list-map';
import { statusType } from '@/components/dynamic-form/config/types';
import useValidateFields from '@/components/dynamic-form/hooks/use-validate-fields';
import ListMap from '@gpustack/core-ui/lib/components/dynamic-form/components/list-map';
import { statusType } from '@gpustack/core-ui/lib/components/dynamic-form/config/types';
import useValidateFields from '@gpustack/core-ui/lib/components/dynamic-form/hooks/use-validate-fields';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { forwardRef, useState } from 'react';
src/pages/cluster-management/components/worker-pools.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteModal, FilterBar } from '@gpustack/core-ui';
import { useIntl, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { message, Table } from 'antd';
src/pages/cluster-management/config/cloud-options-config.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { FieldSchema } from '@/components/dynamic-form/config/types';
import { FieldSchema } from '@gpustack/core-ui/lib/components/dynamic-form/config/types';
export const fields = {
volumes: {
src/pages/cluster-management/config/index.ts
+1 -1
View File
@@ -1,8 +1,8 @@
import icons from '@/components/icon-font/icons';
import { StatusMaps } from '@/config';
import { GPUSTACK_API_BASE_URL } from '@/config/settings';
import { StatusType } from '@/config/types';
import { GPUsConfigs } from '@/pages/resources/config/gpu-driver';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
export const ClusterStatusValueMap = {
Provisioning: 'provisioning',
src/pages/cluster-management/config/providers.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import icons from '@/components/icon-font/icons';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
import React from 'react';
import { ProviderValueMap } from '.';
src/pages/cluster-management/credentials.tsx
+1 -3
View File
@@ -1,11 +1,9 @@
import { clusterSessionAtom, fromClusterCreationAtom } from '@/atoms/clusters';
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
import { useIntl, useNavigate } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { ConfigProvider, Table, message } from 'antd';
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+8 -7
View File
@@ -1,13 +1,15 @@
// columns.ts
import { systemConfigAtom } from '@/atoms/system';
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import icons from '@/components/icon-font/icons';
import { SealColumnProps } from '@/components/seal-table/types';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import GrafanaIcon from '@/pages/_components/grafana-icon';
import { StarFilled } from '@ant-design/icons';
import {
AutoTooltip,
DropdownButtons,
GrafanaIcon,
StatusTag
} from '@gpustack/core-ui';
import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
import { ColumnProps as SealColumnProps } from '@gpustack/core-ui/lib/components/table/types';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import dayjs from 'dayjs';
@@ -20,7 +22,6 @@ import {
ProviderValueMap
} from '../config';
import { ClusterListItem } from '../config/types';
const clusterActionList = [
{
key: 'edit',
src/pages/cluster-management/hooks/use-credential-columns.tsx
+1 -3
View File
@@ -1,14 +1,12 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import { tableSorter } from '@/config/settings';
import { AutoTooltip, DropdownButtons } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { ProviderLabelMap, credentialActionList } from '../config';
import { CredentialListItem as ListItem } from '../config/types';
const useCredentialColumns = (
sortOrder: string[],
handleSelect: (val: string, record: ListItem) => void
src/pages/cluster-management/hooks/use-pools-columns.tsx
+3 -5
View File
@@ -1,14 +1,12 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import { SealColumnProps } from '@/components/seal-table/types';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { AutoTooltip, DropdownButtons } from '@gpustack/core-ui';
import { ColumnProps } from '@gpustack/core-ui/lib/components/table/types';
import { useIntl } from '@umijs/max';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useMemo } from 'react';
import { RenderOption } from '../components/pool-form';
import { NodePoolListItem as ListItem } from '../config/types';
const actionItems = [
{
key: 'edit',
@@ -29,7 +27,7 @@ const actionItems = [
const usePoolsColumns = (
handleSelect: (val: string, record: ListItem) => void,
sortOrder?: string[]
): SealColumnProps[] => {
): ColumnProps[] => {
const intl = useIntl();
return useMemo(() => {
src/pages/cluster-management/step-forms/advance-config.tsx
+2 -4
View File
@@ -1,8 +1,6 @@
import IconFont from '@/components/icon-font';
import SealInput from '@/components/seal-form/seal-input';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import YamlEditor from '@/pages/_components/yaml-editor';
import { Input as CInput, IconFont, YamlEditor } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
@@ -71,7 +69,7 @@ const ClusterAdvanceConfig: React.FC<{
}
]}
>
<SealInput.TextArea required={false} trim={false}></SealInput.TextArea>
<CInput.TextArea required={false} trim={false}></CInput.TextArea>
</Form.Item>
{provider === ProviderValueMap.Kubernetes && (
<K8SVolumeMount action={action}></K8SVolumeMount>
src/pages/cluster-management/step-forms/worker-pools-form.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import PageTools from '@/components/page-tools';
import { PageActionType } from '@/config/types';
import { PlusOutlined } from '@ant-design/icons';
import { PageTools } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, FormInstance } from 'antd';
import {
src/pages/dashboard/components/active-table.tsx
+1 -3
View File
@@ -1,12 +1,10 @@
import AutoTooltip from '@/components/auto-tooltip';
import PageTools from '@/components/page-tools';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { convertFileSize } from '@/utils';
import { AutoTooltip, PageTools } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Col, Row, Table } from 'antd';
import { useContext } from 'react';
import { DashboardContext } from '../config/dashboard-context';
const NACategories = [
modelCategoriesMap.llm,
modelCategoriesMap.embedding,

Some files were not shown because too many files have changed in this diff Show More