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

feat: add cluster detail

Browse Source
This commit is contained in:
jialin
2026-01-09 20:51:48 +08:00
parent 7b5ce83cbd
commit afcd3e5693
32 changed files with 255 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/card-wrapper/index.less
+1 -1
View File
@@ -1,6 +1,6 @@
.cardWrapper {
border-radius: var(--border-radius-small);
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-container);
box-shadow: none;
padding: 10px 16px;
border: 1px solid var(--ant-color-border);
src/components/collapse-container/index.tsx
+4
View File
@@ -88,6 +88,7 @@ export interface CollapsibleContainerProps {
className?: string;
children?: React.ReactNode;
styles?: {
root?: React.CSSProperties;
body?: React.CSSProperties;
header?: React.CSSProperties;
content?: React.CSSProperties;
@@ -191,6 +192,9 @@ export default function CollapsibleContainer({
className={classNames(className, { collapsible, disabled, isOpen })}
variant={variant}
styles={{
root: {
...cardStyles?.root
},
body: {
padding: 0,
...cardStyles?.body
src/components/page-tools/index.tsx
+5 -4
View File
@@ -55,6 +55,7 @@ interface ActionItem {
icon: React.ReactNode;
[key: string]: any;
}
interface FilterBarProps {
handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
handleSelectChange?: (value: any) => void;
@@ -76,7 +77,7 @@ interface FilterBarProps {
showDeleteButton?: boolean;
right?: React.ReactNode;
left?: React.ReactNode;
width?: {
widths?: {
input?: number;
select?: number;
};
@@ -102,7 +103,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
selectHolder,
right,
left,
width
widths
} = props;
const intl = useIntl();
@@ -181,7 +182,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
id: 'common.filter.name'
})
}
style={{ width: width?.input || 230 }}
style={{ width: widths?.input || 230 }}
allowClear
onChange={handleInputChange}
></Input>
@@ -190,7 +191,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
allowClear
showSearch={false}
placeholder={selectHolder}
style={{ width: width?.select || 230 }}
style={{ width: widths?.select || 230 }}
size="large"
onChange={handleSelectChange}
options={selectOptions}
src/config/theme/dark.ts
+2 -2
View File
@@ -97,7 +97,7 @@ export default {
borderRadiusSM: 2,
fontSize: 14,
motion: true,
colorFill: '#000',
colorBgBase: '#000'
colorFill: '#0A0A0A',
colorBgBase: '#0A0A0A'
}
};
src/config/theme/light.ts
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
darkMode: false,
fontFamily:
"Helvetica Neue, -apple-system, BlinkMacSystemFont, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
colorText: 'rgba(0,0,0,1)',
colorText: '#1F1F1F',
colorPrimary: COLOR_PRIMARY,
colorSuccess: '#54cc98',
colorBorder: '#d3d0d9',
src/global.less
+1 -1
View File
@@ -103,7 +103,7 @@ html[data-theme='realDark'] {
--color-spotlight-bg: #3e3e3e;
--color-esc-hint-bg: rgba(150, 150, 150, 75%);
background: #141414;
background: #292929;
.ant-result-image {
opacity: 0.9;
src/locales/en-US/clusters.ts
+2 -2
View File
@@ -102,7 +102,7 @@ export default {
'{count} new worker has been added to the cluster.',
'clusters.addworker.message.success_multiple':
'{count} new workers have been added to the cluster.',
'clusters.create.serverUrl': 'Server URL',
'clusters.create.serverUrl': 'GPUStack Server URL',
'clusters.create.workerConfig': 'Worker Configuration',
'clusters.addworker.containerName': 'Worker Container Name',
'clusters.addworker.containerName.tips':
@@ -113,7 +113,7 @@ export default {
'clusters.table.ip.internal': 'Internal',
'clusters.table.ip.external': 'External',
'clusters.form.serverUrl.tips':
'Specify the server URL accessible from your cloud provider.',
'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack directly.',
'clusters.form.setDefault': 'Set as Default',
'clusters.form.setDefault.tips': 'Default for deployment.',
'clusters.addworker.noClusters': 'No available Docker clusters found',
src/locales/ja-JP/clusters.ts
+4 -4
View File
@@ -102,7 +102,7 @@ export default {
'{count} new worker has been added to the cluster.',
'clusters.addworker.message.success_multiple':
'{count} new workers have been added to the cluster.',
'clusters.create.serverUrl': 'Server URL',
'clusters.create.serverUrl': 'GPUStack Server URL',
'clusters.create.workerConfig': 'Worker Configuration',
'clusters.addworker.containerName': 'Worker Container Name',
'clusters.addworker.containerName.tips':
@@ -113,7 +113,7 @@ export default {
'clusters.table.ip.internal': 'Internal',
'clusters.table.ip.external': 'External',
'clusters.form.serverUrl.tips':
'Specify the server URL accessible from your cloud provider.',
'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack directly.',
'clusters.form.setDefault': 'Set as Default',
'clusters.form.setDefault.tips': 'Default for deployment.',
'clusters.addworker.noClusters': 'No available Docker clusters found',
@@ -205,7 +205,7 @@ export default {
// 73. 'clusters.addworker.cacheVolume.holder': 'e.g. /data/cache (path must start with /)',
// 74. 'clusters.addworker.message.success_single': '{count} new worker has been added to the cluster.',
// 75. 'clusters.addworker.message.success_multiple': '{count} new workers have been added to the cluster.',
// 76. 'clusters.create.serverUrl': 'Server URL',
// 76. 'clusters.create.serverUrl': 'GPUStack Server URL',
// 77. 'clusters.create.workerConfig': 'Worker Configuration'
// 78. 'clusters.addworker.containerName': 'Worker Container Name',
// 79. 'clusters.addworker.containerName.tips':'Specify a name for the worker container.',
@@ -213,7 +213,7 @@ export default {
// 78. 'clusters.addworker.dataVolume.tips': 'Specify a data storage path for GPUStack.',
// 79. 'clusters.table.ip.internal': 'Internal',
// 80. 'clusters.table.ip.external': 'External',
// 81. 'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.',
// 81. 'clusters.form.serverUrl.tips': 'Specify an externally accessible GPUStack service URL if the worker cannot access GPUStack directly.',
// 82. 'clusters.addworker.externalIP.tips': 'Specify an external IP if the worker is in a VPC or private network.',
// 83. 'clusters.form.setDefault': 'Set as Default',
// 84. 'clusters.form.setDefault.tips': 'Default for deployment',
src/locales/ru-RU/clusters.ts
+2 -2
View File
@@ -102,7 +102,7 @@ export default {
'{count} новый воркер был добавлен в кластер.',
'clusters.addworker.message.success_multiple':
'{count} новых воркеров были добавлены в кластер.',
'clusters.create.serverUrl': 'URL сервера',
'clusters.create.serverUrl': 'URL сервера GPUStack',
'clusters.create.workerConfig': 'Конфигурация воркера',
'clusters.addworker.containerName': 'Имя контейнера воркера',
'clusters.addworker.containerName.tips':
@@ -113,7 +113,7 @@ export default {
'clusters.table.ip.internal': 'Внутренний',
'clusters.table.ip.external': 'Внешний',
'clusters.form.serverUrl.tips':
'Укажите URL сервера, доступный из вашего облачного провайдера.',
'Если рабочий узел не может напрямую получить доступ к GPUStack, укажите внешний URL службы GPUStack.',
'clusters.form.setDefault': 'Установить по умолчанию',
'clusters.form.setDefault.tips':
'Использовать по умолчанию для развертывания.',
src/locales/zh-CN/clusters.ts
+3 -2
View File
@@ -102,7 +102,7 @@ export default {
'已将 {count} 个新节点添加到集群中。',
'clusters.addworker.message.success_multiple':
'已将 {count} 个新节点添加到集群中。',
'clusters.create.serverUrl': '服务器地址',
'clusters.create.serverUrl': 'GPUStack 服务地址',
'clusters.create.workerConfig': '节点配置',
'clusters.addworker.containerName': '节点容器名称',
'clusters.addworker.containerName.tips': '为节点容器指定一个名称。',
@@ -110,7 +110,8 @@ export default {
'clusters.addworker.dataVolume.tips': '为 GPUStack 指定数据存储路径。',
'clusters.table.ip.internal': '内',
'clusters.table.ip.external': '外',
'clusters.form.serverUrl.tips': '指定可从您的云服务提供商访问的服务器地址。',
'clusters.form.serverUrl.tips':
'如果节点无法直接访问 GPUStack，则指定一个可访问的外部 GPUStack 服务地址。',
'clusters.form.setDefault': '设为默认',
'clusters.form.setDefault.tips': '部署时的默认集群。',
'clusters.addworker.noClusters': '无可用的 Docker 集群',
src/pages/_components/form-drawer.tsx
+38 -11
View File
@@ -1,6 +1,8 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import { Tag } from 'antd';
import React from 'react';
const ModalFooterStyle = {
padding: '16px 24px 8px',
@@ -9,12 +11,14 @@ const ModalFooterStyle = {
};
type AddModalProps = {
title: string;
title: React.ReactNode;
open: boolean;
onCancel: () => void;
onCancel?: () => void;
children?: React.ReactNode;
onSubmit: () => void;
width?: number;
onSubmit?: () => void;
width?: number | string;
footer?: React.ReactNode;
subTitle?: React.ReactNode;
};
const FormDrawer: React.FC<AddModalProps> = ({
title,
@@ -22,11 +26,32 @@ const FormDrawer: React.FC<AddModalProps> = ({
onCancel,
onSubmit,
children,
width = 600
width = 600,
subTitle,
footer
}) => {
return (
<GSDrawer
title={title}
title={
<>
{title}
{subTitle && (
<Tag
variant="outlined"
style={{
fontSize: 12,
fontWeight: 400,
marginLeft: 8,
borderRadius: 4,
borderColor: 'var(--ant-color-border-secondary)',
color: 'var(--ant-color-text-secondary)'
}}
>
{subTitle}
</Tag>
)}
</>
}
open={open}
onClose={onCancel}
destroyOnHidden={true}
@@ -43,11 +68,13 @@ const FormDrawer: React.FC<AddModalProps> = ({
container: { paddingBlock: 0 }
}}
footer={
<ModalFooter
onOk={onSubmit}
onCancel={onCancel}
style={ModalFooterStyle}
></ModalFooter>
footer ?? (
<ModalFooter
onOk={onSubmit}
onCancel={onCancel}
style={ModalFooterStyle}
></ModalFooter>
)
}
>
{children}
src/pages/api-keys/index.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ const APIKeys: React.FC = () => {
handleClickPrimary={handleAddKey}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
width={{ input: 300 }}
widths={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
src/pages/backends/index.tsx
+1 -1
View File
@@ -181,7 +181,7 @@ const BackendList = () => {
<FilterBar
marginBottom={22}
marginTop={30}
width={{
widths={{
input: 300
}}
inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
src/pages/cluster-management/cluster-create.tsx
-1
View File
@@ -171,7 +171,6 @@ const ClusterCreate: React.FC<{
if (result) {
await callback?.(result as ClusterFormData);
const step = steps[currentStep];
step.beforeNext?.();
setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
}
} catch (error) {
src/pages/cluster-management/cluster-workers-modal.tsx
+60
View File
@@ -0,0 +1,60 @@
import WorkerList from '@/pages/resources/components/workers';
import { useIntl } from '@umijs/max';
import React from 'react';
import styled from 'styled-components';
import FormDrawer from '../_components/form-drawer';
import { ClusterListItem } from './config/types';
const Content = styled.div`
.ant-pagination {
position: fixed;
bottom: 8px;
right: 24px;
z-index: 100;
}
.page-tools {
position: sticky;
top: 0;
}
`;
interface ClusterWorkersModalProps {
cluster: ClusterListItem;
open: boolean;
onClose: () => void;
}
const ClusterWorkersModal: React.FC<ClusterWorkersModalProps> = ({
open,
onClose,
cluster
}) => {
const intl = useIntl();
return (
<FormDrawer
title={`${intl.formatMessage({ id: 'clusters.title' })}: ${cluster.name}`}
open={open}
onCancel={onClose}
footer={
<div
style={{
height: 56
}}
></div>
}
width={'calc(100vw - 220px)'}
>
<Content>
<WorkerList
cluster={cluster}
showAddButton={false}
showSelect={false}
widths={{ input: 360 }}
sourceType="cluster"
/>
</Content>
</FormDrawer>
);
};
export default ClusterWorkersModal;
src/pages/cluster-management/clusters.tsx
+14 -2
View File
@@ -31,6 +31,7 @@ import {
WORKER_POOLS_API
} from './apis';
import ClusterModal from './cluster-modal';
import ClusterWorkersModal from './cluster-workers-modal';
import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
import {
@@ -48,6 +49,7 @@ import {
} from './config/types';
import useAddWorker from './hooks/use-add-worker';
import useClusterColumns from './hooks/use-cluster-columns';
import { useClusterWorkers } from './hooks/use-cluster-workers';
import useCreateCluster from './hooks/use-create-cluster';
const Clusters: React.FC = () => {
@@ -82,6 +84,11 @@ const Clusters: React.FC = () => {
useCreateCluster({
refresh: handleSearch
});
const {
clusterWorkersModalStatus,
openClusterWorkersModal,
closeClusterWorkersModal
} = useClusterWorkers();
const [openAddModal, setOpenAddModal] = useState<{
open: boolean;
@@ -311,7 +318,7 @@ const Clusters: React.FC = () => {
);
};
const columns = useClusterColumns(handleSelect);
const columns = useClusterColumns(handleSelect, openClusterWorkersModal);
return (
<>
@@ -320,7 +327,7 @@ const Clusters: React.FC = () => {
showSelect={false}
marginBottom={22}
marginTop={30}
width={{ input: 300 }}
widths={{ input: 300 }}
buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
rowSelection={rowSelection}
handleInputChange={handleNameChange}
@@ -416,6 +423,11 @@ const Clusters: React.FC = () => {
open={clusterModalStatus.open}
onClose={closeClusterModal}
></ClusterModal>
<ClusterWorkersModal
open={clusterWorkersModalStatus.open}
onClose={closeClusterWorkersModal}
cluster={clusterWorkersModalStatus.cluster}
></ClusterWorkersModal>
{AddWorkerModal}
</>
);
src/pages/cluster-management/components/add-worker/index.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const Footer = styled.div`
type AddWorkerProps = {
open: boolean;
provider: ProviderType;
title: string;
title: React.ReactNode;
clusterList?: Global.BaseOption<number, ClusterListItem>[];
clusterLoading?: boolean;
stepList: StepName[];
src/pages/cluster-management/components/pool-form.tsx
+5
View File
@@ -310,6 +310,11 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
title={title}
collapsible={collapsible}
onToggle={onToggle}
styles={{
root: {
background: 'unset'
}
}}
deleteBtn={
showDelete && (
<Button
src/pages/cluster-management/components/worker-pools.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ const WorkerPools = () => {
showSelect={false}
marginBottom={22}
marginTop={22}
width={{ input: 300 }}
widths={{ input: 300 }}
buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
rowSelection={rowSelection}
handleInputChange={handleNameChange}
src/pages/cluster-management/credentials.tsx
+1 -1
View File
@@ -196,7 +196,7 @@ const Credentials: React.FC = () => {
handleInputChange={handleNameChange}
handleClickPrimary={handleAddCredential}
rowSelection={rowSelection}
width={{ input: 300 }}
widths={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
src/pages/cluster-management/hooks/use-add-worker.tsx
+23 -4
View File
@@ -1,7 +1,7 @@
import AddWorker from '@/pages/cluster-management/components/add-worker';
import { useIntl } from '@umijs/max';
import { message } from 'antd';
import { useMemo, useState } from 'react';
import { message, Tag } from 'antd';
import React, { useMemo, useState } from 'react';
import { StepName } from '../components/add-worker/config';
import {
ClusterStatusValueMap,
@@ -20,7 +20,7 @@ const useAddWorker = (props: {
const [openAddWorker, setOpenAddWorker] = useState<{
open: boolean;
provider: ProviderType;
title: string;
title: React.ReactNode;
cluster_id: number | null;
}>({
open: false,
@@ -56,7 +56,26 @@ const useAddWorker = (props: {
setOpenAddWorker({
open: true,
title: title,
title: (
<span>
{title}
{row.name && (
<Tag
variant="outlined"
style={{
fontSize: 12,
fontWeight: 400,
marginLeft: 8,
borderRadius: 4,
borderColor: 'var(--ant-color-border-secondary)',
color: 'var(--ant-color-text-secondary)'
}}
>
{intl.formatMessage({ id: 'clusters.title' })}: {row.name}
</Tag>
)}
</span>
),
provider: row.provider as ProviderType,
cluster_id: clusterId
});
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+13 -4
View File
@@ -6,7 +6,7 @@ import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import { StarFilled } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import { Tooltip, Typography } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import {
@@ -27,7 +27,8 @@ const setActionsItems = (row: ClusterListItem) => {
};
const useClusterColumns = (
handleSelect: (val: string, record: ClusterListItem) => void
handleSelect: (val: string, record: ClusterListItem) => void,
onViewWorkers: (record: ClusterListItem) => void
): SealColumnProps[] => {
const intl = useIntl();
@@ -40,7 +41,15 @@ const useClusterColumns = (
span: 3,
render: (text: string, record: ClusterListItem) => (
<>
<AutoTooltip ghost>{text}</AutoTooltip>
<AutoTooltip ghost title={text}>
{record.workers > 0 ? (
<Typography.Link onClick={() => onViewWorkers(record)}>
{record.name}
</Typography.Link>
) : (
text
)}
</AutoTooltip>
{record.is_default && (
<Tooltip
title={intl.formatMessage({
@@ -127,7 +136,7 @@ const useClusterColumns = (
)
}
];
}, [handleSelect]);
}, [handleSelect, onViewWorkers]);
};
export default useClusterColumns;
src/pages/cluster-management/hooks/use-cluster-workers.ts
+32
View File
@@ -0,0 +1,32 @@
import { useState } from 'react';
import { ClusterListItem } from '../config/types';
export const useClusterWorkers = () => {
const [clusterWorkersModalStatus, setClusterWorkersModalStatus] = useState<{
open: boolean;
cluster: ClusterListItem;
}>({
open: false,
cluster: {} as ClusterListItem
});
const openClusterWorkersModal = (cluster: ClusterListItem) => {
setClusterWorkersModalStatus({
open: true,
cluster
});
};
const closeClusterWorkersModal = () => {
setClusterWorkersModalStatus({
open: false,
cluster: {} as ClusterListItem
});
};
return {
clusterWorkersModalStatus,
openClusterWorkersModal,
closeClusterWorkersModal
};
};
src/pages/cluster-management/hooks/use-pools-columns.tsx
+2 -5
View File
@@ -3,7 +3,6 @@ import DropdownButtons from '@/components/drop-down-buttons';
import { SealColumnProps } from '@/components/seal-table/types';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import type { SortOrder } from 'antd/es/table/interface';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useMemo } from 'react';
@@ -29,7 +28,7 @@ const actionItems = [
const usePoolsColumns = (
handleSelect: (val: string, record: ListItem) => void,
sortOrder?: SortOrder
sortOrder?: string[]
): SealColumnProps[] => {
const intl = useIntl();
@@ -83,7 +82,6 @@ const usePoolsColumns = (
}}
/>
}
SHOWTITLE
ghost
minWidth={20}
>
@@ -162,7 +160,6 @@ const usePoolsColumns = (
key: 'created_at',
span: 4,
showSorterTootip: false,
sortOrder: sortOrder,
sorter: false,
ellipsis: {
showTitle: false
@@ -192,7 +189,7 @@ const usePoolsColumns = (
)
}
];
}, [sortOrder, handleSelect]);
}, [handleSelect]);
};
export default usePoolsColumns;
src/pages/dashboard/components/over-view.tsx
+1 -5
View File
@@ -14,11 +14,7 @@ const renderCardItem = (data: {
}) => {
const { label, value, bgColor } = data;
return (
<Card
variant="borderless"
style={{ background: 'var(--color-white-1)' }}
className={styles['card-body']}
>
<Card variant="borderless" className={styles['card-body']}>
<div className={styles.content}>
<div className="label text-secondary">{label}</div>
<div className="value font-600 font-size-16">{value}</div>
src/pages/llmodels/catalog.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ const Catalog: React.FC = () => {
handleInputChange={handleNameChange}
selectOptions={categoryOptions}
buttonIcon={<SearchOutlined />}
width={{ input: 230, select: 200 }}
widths={{ input: 230, select: 200 }}
></FilterBar>
<ScrollerContext.Provider
value={{
src/pages/llmodels/components/hf-model-file.tsx
+1 -71
View File
@@ -1,7 +1,6 @@
import { getRequestId } from '@/atoms/models';
import BaseSelect from '@/components/seal-form/base/select';
import SimpleOverlay from '@/components/simple-overlay';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { useIntl } from '@umijs/max';
import { Empty, Spin } from 'antd';
import _ from 'lodash';
@@ -14,13 +13,8 @@ import React, {
} from 'react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
import {
evaluationsModelSpec,
queryHuggingfaceModelFiles,
queryModelScopeModelFiles
} from '../apis';
import { queryHuggingfaceModelFiles, queryModelScopeModelFiles } from '../apis';
import { modelSourceMap } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import '../style/hf-model-file.less';
import FileSkeleton from './file-skeleton';
import ModelFileItem from './model-file-item';
@@ -226,70 +220,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}
};
const getEvaluateResults = async (repoList: any[]) => {
try {
checkTokenRef.current?.cancel?.();
checkTokenRef.current = createAxiosToken();
const evaluations = await evaluationsModelSpec(
{
model_specs: repoList
},
{
token: checkTokenRef.current.token
}
);
return evaluations.results || [];
} catch (error) {
return [];
}
};
const handleEvaluate = async (list: any[]) => {
if (isDownload) {
return;
}
try {
const evaluateFileList = list.map((item: any) => {
// TODO: llamabox is remove from backend options, user should select a available backend
return {
backend: backendOptionsMap.llamaBox,
source: modelSource,
...(modelSource === modelSourceMap.huggingface_value
? {
huggingface_repo_id: props.selectedModel.name,
huggingface_filename: item.fakeName
}
: {
model_scope_model_id: props.selectedModel.name,
model_scope_file_path: item.fakeName
})
};
});
setIsEvaluating(true);
const evaluationList = await getEvaluateResults(evaluateFileList);
const resultList = _.map(list, (item: any, index: number) => {
return {
...item,
evaluateResult: evaluationList[index]
};
});
const currentItem = _.find(
resultList,
(item: any) => item.path === currentPathRef.current
);
if (currentItem) {
onSelectFileAfterEvaluate?.(currentItem);
}
setDataSource({ fileList: resultList, loading: false });
setIsEvaluating(false);
} catch (error) {
setIsEvaluating(false);
}
};
const handleFetchModelFiles = async () => {
if (!props.selectedModel.name) {
setDataSource({ fileList: [], loading: false });
src/pages/resources/components/gpus.tsx
+2 -1
View File
@@ -98,7 +98,7 @@ const GPUList: React.FC = () => {
handleSelectChange={handleClusterChange}
selectOptions={clusterList}
showSelect
width={{ input: 200 }}
widths={{ input: 200 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
@@ -110,6 +110,7 @@ const GPUList: React.FC = () => {
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
scroll={{ x: true }}
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
src/pages/resources/components/worker-detail-content.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ const WorkerDetailContent: React.FC<{ worker_id: number | undefined }> = ({
selectHolder={intl.formatMessage({ id: 'resources.filter.status' })}
showSelect={true}
selectOptions={statusList}
width={{ input: 300 }}
widths={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
src/pages/resources/components/workers.tsx
+23 -6
View File
@@ -26,7 +26,19 @@ import useWorkerMaintenance from '../hooks/use-worker-maintenance';
import UpdateLabels from './update-labels';
import WorkerDetailModal from './worker-detail-modal';
const Workers: React.FC = () => {
const Workers: React.FC<{
cluster: ClusterListItem;
showSelect?: boolean;
showAddButton?: boolean;
widths?: { input: number };
sourceType?: string;
}> = ({
cluster,
showSelect = true,
showAddButton = true,
widths = { input: 200 },
sourceType = 'resources'
}) => {
const {
dataSource,
rowSelection,
@@ -48,7 +60,10 @@ const Workers: React.FC = () => {
events: ['UPDATE', 'DELETE', 'INSERT'],
contentForDelete: 'resources.worker',
watch: true,
API: WORKERS_API
API: WORKERS_API,
defaultQueryParams: {
cluster_id: cluster?.id || undefined
}
});
const { TerminalPanel, terminals, handleAddTerminal } = useTerminalTabs();
const { MaintenanceModal, handleStopMaintenance, setOpenStatus } =
@@ -233,7 +248,8 @@ const Workers: React.FC = () => {
loadend: dataSource.loadend,
firstLoad: extraStatus.firstLoad,
sortOrder,
handleSelect
handleSelect,
sourceType
});
useEffect(() => {
@@ -245,7 +261,7 @@ const Workers: React.FC = () => {
<>
<PageBox>
<FilterBar
showSelect={true}
showSelect={showSelect}
selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
marginBottom={22}
marginTop={30}
@@ -253,11 +269,11 @@ const Workers: React.FC = () => {
handleDeleteByBatch={handleDeleteBatch}
handleSearch={handleSearch}
handleSelectChange={handleClusterChange}
handleClickPrimary={handleOnAddWorker}
handleClickPrimary={showAddButton ? handleOnAddWorker : undefined}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
selectOptions={clusterData.list}
width={{ input: 200 }}
widths={widths}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
@@ -269,6 +285,7 @@ const Workers: React.FC = () => {
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
scroll={{ x: true }}
onChange={handleTableChange}
rowSelection={rowSelection}
pagination={{
src/pages/resources/hooks/use-worker-columns.tsx
+8 -2
View File
@@ -232,6 +232,7 @@ const useWorkerColumns = ({
loadend,
firstLoad,
sortOrder,
sourceType,
handleSelect
}: {
clusterData: {
@@ -241,6 +242,7 @@ const useWorkerColumns = ({
loadend: boolean;
firstLoad: boolean;
sortOrder: string[];
sourceType: string;
handleSelect: (action: string, record: ListItem) => void;
}): ColumnsType<ListItem> => {
const intl = useIntl();
@@ -272,7 +274,10 @@ const useWorkerColumns = ({
return useMemo<ColumnsType<ListItem>>(
() => [
{
title: intl.formatMessage({ id: 'common.table.name' }),
title:
sourceType === 'resources'
? intl.formatMessage({ id: 'common.table.name' })
: intl.formatMessage({ id: 'resources.table.workername' }),
dataIndex: 'name',
width: 100,
sorter: tableSorter(1),
@@ -291,6 +296,7 @@ const useWorkerColumns = ({
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster_id',
hidden: sourceType === 'cluster',
render: (id: number) => (
<AutoTooltip ghost maxWidth={240}>
{_.get(clusterData.data, id, '')}
@@ -402,7 +408,7 @@ const useWorkerColumns = ({
)
}
],
[intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
[intl, sourceType, sortOrder, clusterData, loadend, firstLoad, handleSelect]
);
};
src/pages/users/index.tsx
+1 -1
View File
@@ -182,7 +182,7 @@ const Users: React.FC = () => {
handleClickPrimary={handleAddUser}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
width={{ input: 300 }}
widths={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table