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

feat: add watch api in cluster

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 07ade24ea1
commit deeee70807
34 changed files with 706 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/collapse-container/index.tsx
+28 -11
View File
@@ -14,11 +14,15 @@ const CardStyled = styled(Card)`
}
}
.ant-card-head {
cursor: pointer;
background-color: var(--ant-color-fill-quaternary);
border-bottom: none;
border-radius: var(--ant-border-radius);
&:hover {
background-color: var(--ant-color-fill-secondary);
.del-btn {
display: block;
}
}
}
`;
@@ -28,12 +32,17 @@ const useStyles = createStyles(({ css, token }) => {
title: css`
font-weight: 400;
height: 56px;
font-size: ${token.fontSizeLG};
font-size: var(--font-size-base);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
`,
expandIcon: css`
display: flex;
align-items: center;
gap: 8px;
`,
subtitle: css`
font-size: 12px;
color: ${token.colorTextSecondary};
@@ -48,6 +57,9 @@ const useStyles = createStyles(({ css, token }) => {
display: flex;
align-items: center;
gap: 8px;
.del-btn {
display: none;
}
`
};
});
@@ -56,6 +68,7 @@ export interface CollapsibleContainerProps {
title?: React.ReactNode;
subtitle?: React.ReactNode;
right?: React.ReactNode;
deleteBtn?: React.ReactNode;
defaultOpen?: boolean;
open?: boolean;
collapsible?: boolean;
@@ -70,6 +83,7 @@ export default function CollapsibleContainer({
title,
subtitle,
right,
deleteBtn,
defaultOpen = true,
open,
onToggle,
@@ -105,19 +119,22 @@ export default function CollapsibleContainer({
return (
<div className={styles.title} onClick={toggle}>
<div className={styles.left}>
{title && <div>{title}</div>}
<div className={styles.expandIcon}>
<IconFont
rotate={isOpen ? 180 : 0}
type="icon-down"
style={{
cursor: disabled ? 'not-allowed' : 'pointer',
fontSize: 12
}}
/>
{title && <div>{title}</div>}
</div>
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
</div>
<div className={styles.right}>
{right}
<IconFont
rotate={isOpen ? 180 : 0}
type="icon-down"
style={{
cursor: disabled ? 'not-allowed' : 'pointer',
fontSize: 12
}}
/>
{right && <span>{right}</span>}
{deleteBtn && <span className="del-btn">{deleteBtn}</span>}
</div>
</div>
);
src/components/seal-table/components/cell-content.tsx
+178
View File
@@ -0,0 +1,178 @@
import { CheckOutlined, FormOutlined, UndoOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, InputNumber, Tooltip } from 'antd';
import _ from 'lodash';
import React, { useContext, useEffect } from 'react';
import styled from 'styled-components';
import RowContext from '../row-context';
import { CellContentProps } from '../types';
const CellContentWrapper = styled.div`
max-width: 100%;
display: flex;
align-items: center;
`;
interface EditButtonsProps {
isEditing: boolean;
editable?: any;
handleSubmit: () => void;
handleUndo: () => void;
handleEdit: () => void;
}
interface ContentProps {
isEditing: boolean;
current: any;
editable: any;
onChange: (val: any) => void;
row?: any;
render?: (text: any, record: any) => React.ReactNode;
}
const EditButtons: React.FC<EditButtonsProps> = (props) => {
const intl = useIntl();
const { isEditing, editable, handleSubmit, handleUndo, handleEdit } = props;
if (!editable) {
return null;
}
if (isEditing) {
return (
<span className="flex-column">
<Tooltip
key="confirm"
title={intl.formatMessage({ id: 'common.button.confirm' })}
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleSubmit}
>
<CheckOutlined />
</Button>
</Tooltip>
<Tooltip
title={intl.formatMessage({ id: 'common.button.cancel' })}
key="undo"
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleUndo}
>
<UndoOutlined />
</Button>
</Tooltip>
</span>
);
}
return (
<span className="flex-column">
<Tooltip
key="edit"
title={
_.isBoolean(editable) ? (
intl.formatMessage({ id: 'common.button.edit' })
) : (
<span>{editable.title || ''}</span>
)
}
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleEdit}
>
<FormOutlined />
</Button>
</Tooltip>
</span>
);
};
const Content: React.FC<ContentProps> = (props) => {
const { editable, current, isEditing, row, render, onChange } = props;
if (isEditing && editable) {
const isNumType =
typeof editable === 'object' && editable?.valueType === 'number';
return isNumType ? (
<InputNumber
style={{ width: '80px' }}
min={0}
value={current}
onChange={onChange}
/>
) : (
<Input value={current} onChange={(e) => onChange(e.target.value)} />
);
}
if (render) {
return render(current, row);
}
return current;
};
const CellContent: React.FC<CellContentProps> = (props) => {
const { row, onCell } = useContext(RowContext);
const { dataIndex, render, editable } = props;
const [isEditing, setIsEditing] = React.useState(false);
const [current, setCurrent] = React.useState(row[dataIndex]);
const cachedValue = React.useRef(null);
const handleEdit = () => {
setIsEditing(true);
};
const handleSubmit = async () => {
cachedValue.current = current;
await onCell?.(
{
...row,
[dataIndex]: current
},
dataIndex
);
setIsEditing(false);
};
const handleUndo = () => {
setCurrent(cachedValue.current);
setIsEditing(false);
};
const handleValueChange = (val: any) => {
setCurrent(val);
};
useEffect(() => {
cachedValue.current = row[dataIndex];
setCurrent(row[dataIndex]);
}, [row[dataIndex]]);
return (
<CellContentWrapper>
<Content
onChange={handleValueChange}
isEditing={isEditing}
editable={editable}
current={current}
row={row}
render={render}
></Content>
<EditButtons
editable={editable}
isEditing={isEditing}
handleEdit={handleEdit}
handleSubmit={handleSubmit}
handleUndo={handleUndo}
></EditButtons>
</CellContentWrapper>
);
};
export default CellContent;
src/components/seal-table/components/header.tsx
+2
View File
@@ -18,6 +18,7 @@ const Header: React.FC<HeaderProps> = (props) => {
title,
dataIndex,
align,
width,
span,
headerStyle,
sortOrder,
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
sorter={sorter}
dataIndex={dataIndex}
sortOrder={sortOrder}
width={width}
defaultSortOrder={defaultSortOrder}
title={title}
style={headerStyle}
src/components/seal-table/components/seal-column.tsx → src/components/seal-table/components/table-cell.tsx
+43 -13
View File
@@ -4,9 +4,34 @@ import { Button, Input, InputNumber, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React, { useContext, useEffect } from 'react';
import styled from 'styled-components';
import RowContext from '../row-context';
import '../styles/cell.less';
import { SealColumnProps } from '../types';
import CellContent from './cell-content';
const CellWrapper = styled.div`
padding: var(--ant-table-cell-padding-block)
var(--ant-table-cell-padding-inline);
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 68px;
word-break: break-word;
min-width: 20px;
overflow: hidden;
&.left {
justify-content: flex-start;
}
&.right {
justify-content: flex-end;
}
&.center {
justify-content: center;
}
`;
interface EditButtonsProps {
isEditing: boolean;
@@ -89,7 +114,7 @@ const EditButtons: React.FC<EditButtonsProps> = (props) => {
);
};
const CellContent: React.FC<CellContentProps> = (props) => {
const Content: React.FC<CellContentProps> = (props) => {
const { editable, current, isEditing, row, render, onChange } = props;
if (isEditing && editable) {
const isNumType =
@@ -112,7 +137,7 @@ const CellContent: React.FC<CellContentProps> = (props) => {
return current;
};
const SealColumn: React.FC<SealColumnProps> = (props) => {
const TableCell: React.FC<SealColumnProps> = (props) => {
const { row, onCell } = useContext(RowContext);
const { dataIndex, render, align, editable } = props;
const [isEditing, setIsEditing] = React.useState(false);
@@ -150,22 +175,22 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
}, [row[dataIndex]]);
return (
<div
<CellWrapper
className={classNames('cell', {
'cell-left': align === 'left',
'cell-center': align === 'center',
'cell-right': align === 'right'
left: align === 'left',
center: align === 'center',
right: align === 'right'
})}
>
<span className="cell-content flex-center">
<CellContent
{/* <span className="cell-content flex-center">
<Content
onChange={handleValueChange}
isEditing={isEditing}
editable={editable}
current={current}
row={row}
render={render}
></CellContent>
></Content>
<EditButtons
editable={editable}
isEditing={isEditing}
@@ -173,9 +198,14 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
handleSubmit={handleSubmit}
handleUndo={handleUndo}
></EditButtons>
</span>
</div>
</span> */}
<CellContent
dataIndex={dataIndex}
render={render}
editable={editable}
></CellContent>
</CellWrapper>
);
};
export default SealColumn;
export default TableCell;
src/components/seal-table/components/table-header.tsx
+2 -1
View File
@@ -15,6 +15,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
sortOrder,
onSort,
sorter,
width,
dataIndex
} = props;
@@ -27,7 +28,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
};
return (
<div
style={{ ...style }}
style={{ width, ...style }}
className={classNames('table-header', {
'table-header-left': align === 'left',
'table-header-center': align === 'center',
src/components/seal-table/components/table-row.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import RowContext from '../row-context';
import TableContext from '../table-context';
import { RowContextProps, SealTableProps } from '../types';
import RowPrefix from './row-prefix';
import TableColumn from './seal-column';
import TableCell from './table-cell';
const TableRow: React.FC<
RowContextProps &
@@ -209,7 +209,7 @@ const TableRow: React.FC<
key={`${restProps.dataIndex}-${rowIndex}`}
span={restProps.span}
>
<TableColumn {...restProps}></TableColumn>
<TableCell {...restProps}></TableCell>
</Col>
);
})}
src/components/seal-table/row-context.ts
+6 -1
View File
@@ -1,5 +1,10 @@
import React from 'react';
const RowContext = React.createContext<any>({});
interface RowContextType {
row: Record<string, any>;
onCell?: (record: any, dataIndex: string) => any;
}
const RowContext = React.createContext<RowContextType>({} as RowContextType);
export default RowContext;
src/components/seal-table/styles/cell.less
+3 -3
View File
@@ -14,15 +14,15 @@
line-height: 18px;
}
&-left {
&.left {
justify-content: flex-start;
}
&-right {
&.right {
justify-content: flex-end;
}
&-center {
&.center {
justify-content: center;
}
}
src/components/seal-table/types.ts
+12
View File
@@ -1,5 +1,16 @@
import React from 'react';
export interface CellContentProps {
dataIndex: string;
render?: (text: any, record: any) => React.ReactNode;
editable?:
| boolean
| {
valueType?: 'text' | 'number' | 'date' | 'datetime' | 'time';
title?: React.ReactNode;
};
}
export interface SealColumnProps {
title: React.ReactNode;
render?: (text: any, record: any) => React.ReactNode;
@@ -33,6 +44,7 @@ export interface TableHeaderProps {
firstCell?: boolean;
lastCell?: boolean;
align?: 'left' | 'center' | 'right';
width?: number | string;
}
export interface RowSelectionProps {
src/components/status-tag/index.tsx
+4 -1
View File
@@ -20,6 +20,7 @@ export const StatusMaps = {
};
type StatusTagProps = {
style?: React.CSSProperties;
statusValue: {
status: StatusType;
text: string;
@@ -42,6 +43,7 @@ type StatusTagProps = {
};
const StatusTag: React.FC<StatusTagProps> = ({
style,
statusValue,
download,
extra,
@@ -149,7 +151,8 @@ const StatusTag: React.FC<StatusTagProps> = ({
})}
style={{
color: statusColor?.text,
border: `1px solid ${statusColor?.border || statusColor?.text}`
border: `1px solid ${statusColor?.border || statusColor?.text}`,
...style
}}
>
{statusValue.message ? (
src/components/templates/card.tsx
+2 -2
View File
@@ -70,12 +70,12 @@ const Icon = styled.div`
display: flex;
align-items: center;
margin-right: 16px;
font-size: 46px;
font-size: 32px;
`;
const Header = styled.div`
font-weight: bold;
font-size: 16px;
font-size: var(--font-size-base);
display: flex;
align-items: center;
justify-content: space-between;
src/config/theme/dark.ts
+3
View File
@@ -7,6 +7,9 @@ export default {
inputFontSize: 14,
inputFontSizeLG: 14
},
Steps: {
descriptionMaxWidth: 200
},
Table: {
headerBorderRadius: 4,
cellPaddingInline: 16,
src/config/theme/light.ts
+3
View File
@@ -7,6 +7,9 @@ export default {
inputFontSize: 14,
inputFontSizeLG: 14
},
Steps: {
descriptionMaxWidth: 200
},
Table: {
headerBorderRadius: 4,
cellPaddingInline: 16,
src/global.less
+1
View File
@@ -827,6 +827,7 @@ body {
.ant-pro-page-container-affix .ant-affix .ant-pro-page-container-warp {
box-shadow: none;
border-bottom: 1px solid var(--ant-color-split);
}
.ant-page-header .ant-page-header-heading-extra {
src/hooks/use-watch-list.ts
+83
View File
@@ -0,0 +1,83 @@
import useSetChunkRequest from '@/hooks/use-chunk-request';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { request } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
export default function useWatchList<T = Record<string, any>>(API: string) {
const watchAPI = API;
const [watchDataList, setWatchDataList] = useState<T[]>([]);
const chunkRequestRef = useRef<any>(null);
const listRequestTokenRef = useRef<any>(null);
const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
const { updateChunkedList, cacheDataListRef: cacheWatchDataListRef } =
useUpdateChunkedList({
dataList: watchDataList,
limit: 100,
setDataList: setWatchDataList
});
const updateWatchDataListHandler = (list: any) => {
// filter the data
_.each(list, (data: any) => {
updateChunkedList(data);
});
};
const createWatchChunkRequest = useMemoizedFn(async () => {
chunkRequestRef.current?.current?.cancel?.();
try {
chunkRequestRef.current = setChunkRequest({
url: `${watchAPI}`,
params: {},
handler: updateWatchDataListHandler
});
} catch (error) {
// ignore
}
});
const queryAllDataList = async (
params: Global.SearchParams,
options?: any
) => {
return request<Global.PageResponse<T>>(watchAPI, {
params,
method: 'GET',
cancelToken: options?.token
});
};
const getAllDataList = useMemoizedFn(async () => {
try {
listRequestTokenRef.current?.cancel?.();
listRequestTokenRef.current = createAxiosToken();
const params = {
page: 1,
perPage: 100
};
const res: any = await queryAllDataList(params, {
token: listRequestTokenRef.current.token
});
cacheWatchDataListRef.current = res.items || [];
setWatchDataList(res.items || []);
} catch (error) {
// ignore
}
});
useEffect(() => {
createWatchChunkRequest();
return () => {
chunkRequestRef.current?.cancel?.();
listRequestTokenRef.current?.cancel?.();
};
}, []);
return {
watchDataList
};
}
src/pages/cluster-management/cluster-create.tsx
+62 -14
View File
@@ -5,11 +5,11 @@ import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import { createCluster, queryCredentialList } from './apis';
import { createCluster, queryClusterToken, queryCredentialList } from './apis';
import ClusterSteps from './components/cluster-steps';
import FooterButtons from './components/footer-buttons';
import ProviderCatalog from './components/provider-catalog';
import { providerList, ProviderType } from './config';
import { providerList, ProviderType, ProviderValueMap } from './config';
import { ClusterFormData } from './config/types';
import { moduleMap, moduleRegistry } from './step-forms/module-registry';
import useStepList from './step-forms/use-step-list';
@@ -21,6 +21,19 @@ const Container = styled.div`
align-items: center;
`;
const Nav = styled.div`
display: flex;
align-items: center;
height: 72px;
font-weight: 400;
font-size: 20px;
color: var(--ant-color-text-tertiary);
.level-2 {
color: var(--ant-color-text);
font-weight: 600;
}
`;
const Content = styled.div`
width: 600px;
`;
@@ -28,11 +41,9 @@ const Content = styled.div`
const HeaderContainer = styled.div`
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr;
align-items: center;
padding-inline: var(--layout-content-header-inlinepadding);
border-bottom: 1px solid var(--ant-color-split);
min-height: 72px;
.text {
margin-right: 16px;
padding-right: 16px;
@@ -67,7 +78,7 @@ const ClusterCreate = () => {
cluster_id: 0
});
const [extraData, setExtraData] = useState<ClusterFormData>({
provider: null
provider: ProviderValueMap.Custom
} as ClusterFormData);
const [formValues, setFormValues] = useState<Record<string, any>>({});
@@ -237,7 +248,12 @@ const ClusterCreate = () => {
...extraData,
...(typeof values === 'object' ? values : {})
};
await createCluster({ data });
const res = await createCluster({ data });
const info = await queryClusterToken({ id: res.id });
setRegistrationInfo({
...info,
cluster_id: res.id
});
return true;
};
@@ -252,10 +268,6 @@ const ClusterCreate = () => {
return (
<PageContainer
ghost
fixedHeader
affixProps={{
offsetTop: 0
}}
footer={[
<FooterButtons
key="buttons"
@@ -266,11 +278,47 @@ const ClusterCreate = () => {
showButtons={showButtons}
/>
]}
header={{
title: (
<div>
<Nav>
<span className="level-1">Cluster</span>
<span
style={{
marginInline: 20,
color: 'var(--ant-color-split)'
}}
>
/
</span>
<span className="level-2">create</span>
</Nav>
<ClusterSteps
steps={steps}
currentStep={currentStep}
onChange={handleStepChange}
></ClusterSteps>
</div>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
pageHeaderRender={() => (
<HeaderContainer>
<span className="text">
<span>Create Cluster</span>
</span>
<Nav>
<span className="level-1">Cluster</span>
<span
style={{
marginInline: 20,
color: 'var(--ant-color-split)'
}}
>
/
</span>
<span className="level-2">create</span>
</Nav>
<ClusterSteps
steps={steps}
currentStep={currentStep}
src/pages/cluster-management/clusters.tsx
+52 -63
View File
@@ -2,10 +2,12 @@ import { expandKeysAtom } from '@/atoms/clusters';
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import TableContext from '@/components/seal-table/table-context';
import { PageAction } from '@/config';
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 AddWorker from '@/pages/resources/components/add-worker';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
@@ -14,6 +16,7 @@ import { message } from 'antd';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import {
CLUSTERS_API,
createCluster,
createWorkerPool,
deleteCluster,
@@ -21,7 +24,8 @@ import {
queryClusterToken,
queryCredentialList,
queryWorkerPools,
updateCluster
updateCluster,
WORKER_POOLS_API
} from './apis';
import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
@@ -52,8 +56,11 @@ const Credentials: React.FC = () => {
} = useTableFetch<ListItem>({
fetchAPI: queryClusterList,
deleteAPI: deleteCluster,
watch: true,
API: CLUSTERS_API,
contentForDelete: 'menu.clusterManagement.clusters'
});
const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
const [expandAtom, setExpandAtom] = useAtom(expandKeysAtom);
const {
handleExpandChange,
@@ -103,13 +110,13 @@ const Credentials: React.FC = () => {
action: PageActionType;
currentData?: ListItem;
title: string;
provider: string;
provider: ProviderType;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
const [credentialList, setCredentialList] = useState<
@@ -145,7 +152,7 @@ const Credentials: React.FC = () => {
{ id: 'clusters.add.cluster' },
{ cluster: clusterLabel }
),
provider: value
provider: value as ProviderType
});
};
@@ -154,14 +161,13 @@ const Credentials: React.FC = () => {
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: row.provider,
provider: row.provider as ProviderType,
clusterId: row.id
});
};
const handleClickDropdown = (item: any) => {
navigate(`/cluster-management/clusters/create?action=${PageAction.CREATE}`);
// handleAddCluster(item.key);
};
const handleModalOk = async (data: FormData) => {
@@ -183,7 +189,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
@@ -192,7 +198,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
}
};
@@ -204,7 +210,7 @@ const Credentials: React.FC = () => {
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
provider: null
});
};
@@ -300,6 +306,10 @@ const Credentials: React.FC = () => {
}
);
const setDisableExpand = (row: ClusterListItem) => {
return row.provider !== ProviderValueMap.DigitalOcean;
};
useEffect(() => {
const fetchCredentialList = async () => {
const data = await queryCredentialList({ page: 1, perPage: 100 });
@@ -356,60 +366,39 @@ const Credentials: React.FC = () => {
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleClickDropdown}
></FilterBar>
<SealTable
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
loadChildren={getWorkerPoolList}
onChange={handleTableChange}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
renderChildren={renderChildren}
dataSource={dataSource.dataList}
loading={dataSource.loading}
loadend={dataSource.loadend}
rowSelection={rowSelection}
columns={columns}
childParentKey="cluster_id"
expandable={true}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
<TableContext.Provider
value={{
allChildren: allWorkerPoolList,
setDisableExpand: setDisableExpand
}}
></SealTable>
{/* <SealTable
columns={columns}
dataSource={dataSource}
rowSelection={rowSelection}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
loading={loading}
loadend={loadend}
rowKey="id"
childParentKey="model_id"
expandable={true}
onSort={handleOnSort}
onCell={handleOnCell}
pollingChildren={false}
watchChildren={true}
loadChildren={getModelInstances}
loadChildrenAPI={generateChildrenRequestAPI}
renderChildren={renderChildren}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></SealTable> */}
>
<SealTable
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
loadChildren={getWorkerPoolList}
onChange={handleTableChange}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
renderChildren={renderChildren}
dataSource={dataSource.dataList}
loading={dataSource.loading}
loadend={dataSource.loadend}
rowSelection={rowSelection}
columns={columns}
childParentKey="cluster_id"
expandable={true}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></SealTable>
</TableContext.Provider>
</PageContainer>
<AddCluster
provider={openAddModal.provider}
@@ -457,7 +446,7 @@ const Credentials: React.FC = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
clusterId: 0
});
}}
src/pages/cluster-management/components/add-cluster.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal/index';
import { PageActionType } from '@/config/types';
import React, { useRef } from 'react';
import { ProviderType } from '../config';
import {
ClusterFormData as FormData,
ClusterListItem as ListItem
@@ -13,7 +14,7 @@ type AddModalProps = {
action: PageActionType;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
provider: string;
provider: ProviderType;
credentialList: Global.BaseOption<number>[];
onOk: (values: FormData) => void;
onCancel: () => void;
src/pages/cluster-management/components/add-worker-step.tsx
+3 -3
View File
@@ -20,10 +20,10 @@ type AddModalProps = {
const AddWorkerStep: React.FC<AddModalProps> = ({ registrationInfo }) => {
return (
<div>
<Title>Supported Hardware Platforms</Title>
<SupportedHardware />
<Title style={{ marginTop: 32 }}>Execute Command</Title>
<Title>Execute Command</Title>
<RegisterClusterInner registrationInfo={registrationInfo} />
<Title style={{ marginTop: 32 }}>Supported GPUs</Title>
<SupportedHardware />
</div>
);
};
src/pages/cluster-management/components/cloud-provider-form.tsx
+1 -6
View File
@@ -92,12 +92,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: 'credential'
}
)
message: getRuleMessage('input', 'clusters.credential.title')
}
]}
>
src/pages/cluster-management/components/cluster-steps.tsx
+13 -3
View File
@@ -5,14 +5,24 @@ import styled from 'styled-components';
const { Step } = Steps;
const Wrapper = styled.div`
padding-block: 20px;
padding-block: 30px;
background-color: var(--ant-color-bg-container);
.ant-steps-item-description {
max-width: 300px !important;
color: var(--ant-color-text-description) !important;
}
.ant-steps-item-content > .ant-steps-item-title {
font-weight: 600;
// font-weight: 600;
}
.ant-steps-item {
.ant-steps-item-container {
// .ant-steps-item-icon {
// margin-inline-start: 0 !important;
// }
// .ant-steps-item-tail {
// margin-inline-start: 0 !important;
// }
}
}
`;
@@ -25,7 +35,7 @@ const ClusterSteps: React.FC<{
return (
<Wrapper>
<Steps current={currentStep} size="small" onChange={onChange}>
<Steps current={currentStep} size="small" onChange={onChange} progressDot>
{steps.map((step) => (
<Step
disabled={step.disabled}
src/pages/cluster-management/components/pool-form.tsx
+28 -8
View File
@@ -29,6 +29,9 @@ const Container = styled.div`
.ant-form-item:nth-child(6) {
grid-column: 1 / 3;
}
.ant-form-item:nth-child(7) {
grid-column: 1 / 3;
}
`;
type AddModalProps = {
@@ -57,7 +60,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const labels = Form.useWatch('labels', form);
const instance_type = Form.useWatch('instance_type', form);
const title = Form.useWatch('name', form);
useEffect(() => {
if (currentData) {
@@ -88,13 +91,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
return (
<CollapsibleContainer
title={instance_type}
{...restCollapseProps}
title={title}
collapsible={collapsible}
onToggle={onToggle}
{...restCollapseProps}
>
{showDelete && (
<div className="flex-end" style={{ marginBlock: '8px 16px' }}>
deleteBtn={
showDelete && (
<Button
onClick={onDelete}
icon={<DeleteOutlined />}
@@ -104,8 +106,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
color="danger"
size="small"
></Button>
</div>
)}
)
}
>
<Form
name={name}
form={form}
@@ -118,6 +121,22 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}}
>
<Container>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="instance_type"
rules={[
@@ -135,6 +154,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
id: 'clusters.workerpool.instanceType'
})}
required
disabled={action === PageAction.EDIT}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
src/pages/cluster-management/components/pool-rows.tsx
+40 -17
View File
@@ -1,5 +1,7 @@
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 { useIntl } from '@umijs/max';
@@ -11,7 +13,6 @@ import { ProviderType } from '../config';
import { NodePoolFormData, NodePoolListItem } from '../config/types';
import usePoolsColumns from '../hooks/use-pools-columns';
import AddPool from './add-pool';
interface PoolRowsProps {
dataList: NodePoolListItem[];
provider: ProviderType;
@@ -58,6 +59,18 @@ const PoolRows: React.FC<PoolRowsProps> = ({
}
};
const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
console.log('handleOncell===', row, dataIndex);
try {
await updateWorkerPool({
data: row,
id: row.id
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
// error
}
};
const handleEdit = (action: string, record: NodePoolListItem) => {
if (action === 'edit') {
setAddPoolStatus({
@@ -97,6 +110,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
});
const columns = usePoolsColumns(onSelect);
return (
<>
{dataList?.map((data: NodePoolListItem) => {
@@ -105,23 +119,32 @@ const PoolRows: React.FC<PoolRowsProps> = ({
key={data.id}
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
return (
<Col
key={col.dataIndex as string}
span={col.span}
style={col.style}
>
{col.render
<RowContext.Provider value={{ row: data, onCell: handleOnCell }}>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
return (
<Col
key={col.dataIndex as string}
span={col.span}
style={{
paddingInline: 0,
...(col.style || {})
}}
>
{/* {col.render
? col.render(data[col.dataIndex as string], data)
: data[col.dataIndex as string]}
</Col>
);
})}
</Row>
</RowChildren>
: data[col.dataIndex as string]} */}
<CellContent
{...col}
dataIndex={col.dataIndex}
></CellContent>
</Col>
);
})}
</Row>
</RowChildren>
</RowContext.Provider>
</div>
);
})}
src/pages/cluster-management/components/provider-catalog.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const Title = styled.span`
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 18px;
font-size: 16px;
margin-block: 16px 24px;
`;
src/pages/cluster-management/components/support-hardware.tsx
+2 -3
View File
@@ -13,10 +13,9 @@ const ProviderImage = ({ src, showBg }: { src: string; showBg?: boolean }) => {
<img
src={src}
style={{
width: 46,
width: 32,
objectFit: 'contain'
}}
width={46}
/>
);
};
@@ -37,7 +36,7 @@ const supportedHardPlatforms = [
icon: (
<IconFont
type="icon-amd"
style={{ fontSize: 46, color: 'var(--ant-color-text)' }}
style={{ fontSize: 32, color: 'var(--ant-color-text)' }}
/>
)
},
src/pages/cluster-management/components/worker-pools.tsx
+5 -5
View File
@@ -14,7 +14,7 @@ import {
updateWorkerPool,
WORKER_POOLS_API
} from '../apis';
import { ProviderValueMap } from '../config';
import { ProviderType, ProviderValueMap } from '../config';
import {
NodePoolListItem as ListItem,
NodePoolFormData
@@ -60,7 +60,7 @@ const WorkerPools = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
currentData: null as ListItem | null,
clusterId: 0 as number | string
});
@@ -75,7 +75,7 @@ const WorkerPools = () => {
{ id: 'common.button.edit.item' },
{ name: record.instance_type }
),
provider: searchParams.get('provider') || '',
provider: searchParams.get('provider') as ProviderType,
currentData: record,
clusterId: searchParams.get('id') || 0
});
@@ -87,7 +87,7 @@ const WorkerPools = () => {
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: searchParams.get('provider') || '',
provider: searchParams.get('provider') as ProviderType,
clusterId: searchParams.get('id') || 0,
currentData: null
});
@@ -177,7 +177,7 @@ const WorkerPools = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean,
provider: ProviderValueMap.DigitalOcean as ProviderType,
currentData: null,
clusterId: 0
});
src/pages/cluster-management/config/index.ts
+2 -2
View File
@@ -56,7 +56,7 @@ export const providerList = [
icon: React.cloneElement(icons.Docker, {
style: { color: 'var(--ant-color-primary)' }
}),
group: 'default'
group: 'Self-Managed'
},
{
label: 'Kubernetes',
@@ -66,7 +66,7 @@ export const providerList = [
icon: React.cloneElement(icons.KubernetesOutlined, {
style: { color: 'var(--ant-color-primary)' }
}),
group: 'default'
group: 'Self-Managed'
},
{
label: 'DigitalOcean',
src/pages/cluster-management/config/types.ts
+13 -11
View File
@@ -22,10 +22,21 @@ export interface CredentialListItem {
updated_at: string;
}
export interface NodePoolListItem {
export interface NodePoolFormData {
name: string;
instance_type: string;
os_image: string;
replicas: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
}
export interface NodePoolListItem extends NodePoolFormData {
id: number;
instance_type: string;
replicas: number;
workers: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
@@ -35,20 +46,11 @@ export interface NodePoolListItem {
cluster_id: number;
}
export interface NodePoolFormData {
instance_type: string;
os_image: string;
replicas: number;
batch_size: number;
labels: Record<string, string>;
cloud_options: Record<string, any>;
}
export interface ClusterListItem {
name: string;
display_name: string;
description: string;
provider: string;
provider: ProviderType;
credential_id: number;
zone: string;
region: string;
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+8 -2
View File
@@ -48,7 +48,11 @@ const useClusterColumns = (
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
span: 3,
render: (value: string) => <span>{ProviderLabelMap[value]}</span>
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
{ProviderLabelMap[value]}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
@@ -90,7 +94,9 @@ const useClusterColumns = (
dataIndex: 'created_at',
span: 4,
render: (value: string) => (
<span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
<AutoTooltip ghost minWidth={20}>
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
},
{
src/pages/cluster-management/hooks/use-pools-columns.tsx
+57 -21
View File
@@ -1,6 +1,5 @@
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import LabelsCell from '@/components/label-cell';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
@@ -34,9 +33,9 @@ const usePoolsColumns = (
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
dataIndex: 'instance_type',
key: 'instance_type',
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
key: 'name',
ellipsis: {
showTitle: false
},
@@ -51,16 +50,21 @@ const usePoolsColumns = (
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
dataIndex: 'replicas',
title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
dataIndex: 'instance_type',
key: 'instance_type',
ellipsis: {
showTitle: false
},
span: 3,
key: 'replicas'
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size',
span: 3
style: {
paddingLeft: 12
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
@@ -70,6 +74,9 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
style: {
paddingLeft: 16
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
@@ -77,21 +84,46 @@ const usePoolsColumns = (
)
},
{
title: intl.formatMessage({ id: 'resources.table.labels' }),
dataIndex: 'labels',
key: 'labels',
width: 200,
span: 4,
title: 'Workers',
dataIndex: 'replicas',
span: 3,
key: 'replicas',
style: {
// textAlign: 'center'
paddingLeft: 4
},
editable: {
valueType: 'number',
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
},
render: (text: string, record: ListItem) => (
<LabelsCell labels={record.labels}></LabelsCell>
<span>
{record.workers} / {record.replicas}
</span>
)
},
{
title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
dataIndex: 'batch_size',
key: 'batch_size',
span: 4
},
// {
// title: intl.formatMessage({ id: 'resources.table.labels' }),
// dataIndex: 'labels',
// key: 'labels',
// width: 200,
// span: 4,
// render: (text: string, record: ListItem) => (
// <LabelsCell labels={record.labels}></LabelsCell>
// )
// },
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'create_at',
key: 'created_at',
span: 4,
showSorterTooltip: false,
showSorterTootip: false,
defaultSortOrder: 'descend',
sortOrder: sortOrder,
sorter: false,
@@ -101,7 +133,11 @@ const usePoolsColumns = (
style: {
paddingLeft: 42
},
render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
src/pages/cluster-management/step-forms/use-step-list.tsx
+5 -5
View File
@@ -15,7 +15,7 @@ export default function useStepList() {
() => [
{
title: 'Select Cloud Provider',
content: 'Choose the cloud provider for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
@@ -31,7 +31,7 @@ export default function useStepList() {
},
{
title: 'Configure Cluster Settings',
content: 'Set up the basic configuration for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: true,
@@ -47,7 +47,7 @@ export default function useStepList() {
},
{
title: 'Add Worker Pools',
content: 'Define the worker pools for your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: true,
@@ -64,7 +64,7 @@ export default function useStepList() {
},
{
title: 'Add Worker',
content: 'Add a worker node to your cluster.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
@@ -80,7 +80,7 @@ export default function useStepList() {
},
{
title: 'Register Cluster',
content: 'Register your cluster with the chosen provider.',
content: '',
showButtons: (provider?: ProviderType) => {
return {
previous: false,
src/pages/cluster-management/step-forms/worker-pools-form.tsx
+26 -28
View File
@@ -53,7 +53,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
[
0,
{
instance_type: 'Pool-1'
name: 'Pool-1'
}
]
]) as Map<number, NodePoolFormData>
@@ -70,7 +70,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
const newId = updateCount();
setWorkerPoolList((prev) =>
new Map(prev).set(newId, {
instance_type: `Pool-${newId + 1}`
name: `Pool-${newId + 1}`
} as NodePoolFormData)
);
setActiveKey((prev) => new Set([newId]));
@@ -193,32 +193,30 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
></PageTools>
{Array.from(workerPoolList.keys()).map((key, index) => (
<div key={key}>
<PoolContainer>
<PoolFormWrapper>
<WorkerPoolForm
name={`workerPoolForm_${key}`}
action={action}
ref={(el: any) => {
if (el) {
formRefs.current[key] = el;
}
}}
collapseProps={{
collapsible: true,
open: activeKey.has(key),
defaultOpen: activeKey.has(key),
onToggle: (open: boolean) => handleOnToggle(open, key)
}}
showDelete={workerPoolList.size > 1}
onFinish={handleOnFinish}
provider={provider}
currentData={workerPoolList.get(key)}
onDelete={() => handleRemovePool(key)}
></WorkerPoolForm>
</PoolFormWrapper>
</PoolContainer>
</div>
<PoolContainer key={key}>
<PoolFormWrapper>
<WorkerPoolForm
name={`workerPoolForm_${key}`}
action={action}
ref={(el: any) => {
if (el) {
formRefs.current[key] = el;
}
}}
collapseProps={{
collapsible: true,
open: activeKey.has(key),
defaultOpen: activeKey.has(key),
onToggle: (open: boolean) => handleOnToggle(open, key)
}}
showDelete={workerPoolList.size > 1}
onFinish={handleOnFinish}
provider={provider}
currentData={workerPoolList.get(key)}
onDelete={() => handleRemovePool(key)}
></WorkerPoolForm>
</PoolFormWrapper>
</PoolContainer>
))}
</div>
);
src/pages/login/components/login-form.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ const LoginForm = () => {
<img
src={LogoIcon}
alt="logo"
style={{ height: '24px', marginLeft: 10 }}
style={{ height: '36px', marginLeft: 10 }}
/>
</div>
</div>
src/pages/resources/apis/index.ts
+13 -1
View File
@@ -7,6 +7,14 @@ export const WORKERS_API = '/workers';
export const GPU_DEVICES_API = '/gpu-devices';
export const MODEL_FILES_API = '/model-files';
const matchFilename = (disposition: string | null): string | undefined => {
if (!disposition) return '';
const match = disposition.match(/filename="?([^"]+)"?/);
const filename = match ? match[1] : '';
return filename;
};
// download stream data and save as a csv file
export async function downloadWorkerPrivateKey({
id,
@@ -17,9 +25,13 @@ export async function downloadWorkerPrivateKey({
}) {
try {
const res = await fetch(`/v1${WORKERS_API}/${id}/privatekey`);
// header
const contentDispostion = res.headers.get('content-Disposition');
const filename =
matchFilename(contentDispostion) || `${name}-privatekey.pem`;
if (res.ok) {
const blob = await res.blob();
downloadFile(blob, `${name}-privatekey.csv`);
downloadFile(blob, filename);
}
} catch (error) {
message.error('Download failed');