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

chore: use drawer for creation

Browse Source
This commit is contained in:
jialin
2026-01-07 15:55:26 +08:00
parent bbf09c2ea9
commit 28a73d2a6e
9 changed files with 113 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/index.tsx
+2 -2
View File
@@ -322,12 +322,12 @@ export default (props: any) => {
}}
modal={{
mask: {
blur: true
blur: false
}
}}
drawer={{
mask: {
blur: true
blur: false
}
}}
>
src/pages/_components/form-drawer.tsx
+59
View File
@@ -0,0 +1,59 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import ColumnWrapper from '@/pages/_components/column-wrapper';
const ModalFooterStyle = {
padding: '16px 24px 8px',
display: 'flex',
justifyContent: 'flex-end'
};
type AddModalProps = {
title: string;
open: boolean;
onCancel: () => void;
children?: React.ReactNode;
onSubmit: () => void;
width?: number;
};
const FormDrawer: React.FC<AddModalProps> = ({
title,
open,
onCancel,
onSubmit,
children,
width = 600
}) => {
return (
<GSDrawer
title={title}
open={open}
onClose={onCancel}
destroyOnHidden={true}
closeIcon={false}
maskClosable={false}
keyboard={false}
styles={{
wrapper: { width }
}}
footer={false}
>
<ColumnWrapper
styles={{
container: { paddingBlock: 0 }
}}
footer={
<ModalFooter
onOk={onSubmit}
onCancel={onCancel}
style={ModalFooterStyle}
></ModalFooter>
}
>
{children}
</ColumnWrapper>
</GSDrawer>
);
};
export default FormDrawer;
src/pages/cluster-management/cluster-create.tsx
+17 -8
View File
@@ -38,8 +38,17 @@ const Content = styled.div`
width: 100%;
`;
const StepWrapper = styled.div`
position: sticky;
top: 0;
background: var(--ant-color-bg-elevated);
z-index: 10;
padding: 16px 24px;
`;
const MainWrapper = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
@@ -308,7 +317,15 @@ const ClusterCreate: React.FC<{
return (
<MainWrapper>
{!isAddWorkerStep && (
<StepWrapper>
<ClusterSteps steps={steps} currentStep={currentStep}></ClusterSteps>
</StepWrapper>
)}
<ColumnWrapper
maxHeight={
isAddWorkerStep ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)'
}
styles={{
container: { paddingTop: 16, paddingBottom: 16 }
}}
@@ -324,14 +341,6 @@ const ClusterCreate: React.FC<{
/>
}
>
{!isAddWorkerStep && (
<div style={{ marginBottom: 32 }}>
<ClusterSteps
steps={steps}
currentStep={currentStep}
></ClusterSteps>
</div>
)}
<div style={{ flex: 1 }}>
{currentStep === startStep && (
<ProviderCatalog
src/pages/cluster-management/components/add-cluster.tsx
+5 -13
View File
@@ -1,6 +1,5 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal/index';
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import React, { useRef } from 'react';
import { ProviderType } from '../config';
import {
@@ -48,19 +47,12 @@ const AddCluster: React.FC<AddModalProps> = ({
};
return (
<ScrollerModal
<FormDrawer
title={title}
open={open}
onCancel={handleCancel}
destroyOnHidden={true}
closeIcon={true}
maskClosable={false}
keyboard={false}
centered={true}
width={680}
footer={
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
}
onSubmit={handleSubmit}
width={700}
>
<ClusterForm
ref={form}
@@ -70,7 +62,7 @@ const AddCluster: React.FC<AddModalProps> = ({
currentData={currentData}
onFinish={handleOk}
/>
</ScrollerModal>
</FormDrawer>
);
};
src/pages/cluster-management/components/add-credential.tsx
+5 -14
View File
@@ -1,9 +1,8 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
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 { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
@@ -66,19 +65,11 @@ const AddModal: React.FC<AddModalProps> = ({
}, [currentData]);
return (
<ScrollerModal
<FormDrawer
title={title}
open={open}
centered={true}
onOk={handleSumit}
destroyOnHidden={true}
closeIcon={false}
maskClosable={false}
keyboard={false}
width={600}
footer={
<ModalFooter onOk={handleSumit} onCancel={handleCancel}></ModalFooter>
}
onSubmit={handleSumit}
onCancel={handleCancel}
>
<Form form={form} onFinish={handleOk} preserve={false}>
<Form.Item<FormData>
@@ -140,7 +131,7 @@ const AddModal: React.FC<AddModalProps> = ({
></SealInput.TextArea>
</Form.Item>
</Form>
</ScrollerModal>
</FormDrawer>
);
};
src/pages/cluster-management/components/add-pool.tsx
+4 -14
View File
@@ -1,6 +1,5 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import React, { useEffect, useRef } from 'react';
import { ProviderType } from '../config';
import {
@@ -61,20 +60,11 @@ const AddPool: React.FC<AddModalProps> = ({
}, [clusterData, open]);
return (
<ScrollerModal
<FormDrawer
title={title}
open={open}
onCancel={handleCancel}
destroyOnHidden={true}
closeIcon={true}
centered={true}
maskClosable={false}
keyboard={false}
width={600}
maxContentHeight={'max(calc(100vh - 300px), 500px)'}
footer={
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
}
onSubmit={handleSubmit}
>
<PoolForm
ref={formRef}
@@ -83,7 +73,7 @@ const AddPool: React.FC<AddModalProps> = ({
currentData={currentData}
onFinish={handleOnFinish}
></PoolForm>
</ScrollerModal>
</FormDrawer>
);
};
src/pages/cluster-management/components/support-gpus.tsx
+15 -2
View File
@@ -6,6 +6,7 @@ import metaxLogo from '@/assets/logo/metax.png';
import mooreLogo from '@/assets/logo/moore-logo.png';
import nvidiaLogo from '@/assets/logo/nvidia.png';
import IconFont from '@/components/icon-font';
import useUserSettings from '@/hooks/use-user-settings';
import {
AddWorkerDockerNotes,
GPUDriverMap
@@ -46,6 +47,17 @@ const Box = styled.div`
background-color: var(--ant-blue-1);
}
}
&.dark-theme {
.template-card-wrapper {
background-color: rgba(255, 255, 255, 0.05);
&:hover {
background-color: var(--ant-color-bg-solid);
}
&.active {
background-color: var(--ant-color-bg-solid);
}
}
}
`;
const ProviderImage = ({ src, height }: { src: string; height?: number }) => {
@@ -72,6 +84,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
current
}) => {
const intl = useIntl();
const { userSettings } = useUserSettings();
const supportedHardPlatforms = [
{
@@ -97,7 +110,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
icon: (
<IconFont
type="icon-amd-logo"
style={{ fontSize: 64, color: 'var(--ant-color-text)' }}
style={{ fontSize: 64, color: '#000' }}
/>
)
},
@@ -174,7 +187,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
];
return (
<Box>
<Box className={userSettings?.theme === 'realDark' ? 'dark-theme' : ''}>
<ProviderCatalog
onSelect={onSelect}
height={60}
src/pages/cluster-management/credentials.tsx
+1 -1
View File
@@ -114,10 +114,10 @@ const Credentials: React.FC = () => {
firstAddWorker: false,
firstAddCluster: true
});
setIsFromCluster(false);
navigate(-1);
}
}
setIsFromCluster(false);
fetchData();
setOpenModalStatus({ ...openModalStatus, open: false });
message.success(intl.formatMessage({ id: 'common.message.success' }));
src/pages/users/components/add-modal.tsx
+5 -15
View File
@@ -1,6 +1,4 @@
import IconFont from '@/components/icon-font';
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import SealSwitch from '@/components/seal-form/seal-switch';
@@ -9,6 +7,7 @@ import { PageActionType } from '@/config/types';
import { useIntl, useModel } from '@umijs/max';
import { Form, Select } from 'antd';
import { useEffect } from 'react';
import FormDrawer from '../../_components/form-drawer';
import { UserRoles, UserRolesOptions } from '../config';
import { FormData, ListItem } from '../config/types';
@@ -47,7 +46,7 @@ const AddModal: React.FC<AddModalProps> = ({
}
};
const handleSumit = () => {
const handleSubmit = () => {
form.submit();
};
@@ -56,20 +55,11 @@ const AddModal: React.FC<AddModalProps> = ({
}, [open]);
return (
<ScrollerModal
<FormDrawer
title={title}
open={open}
centered={true}
onOk={handleSumit}
onCancel={onCancel}
destroyOnHidden={true}
closeIcon={false}
maskClosable={false}
keyboard={false}
width={600}
footer={
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
onSubmit={handleSubmit}
>
<Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
<Form.Item<FormData>
@@ -165,7 +155,7 @@ const AddModal: React.FC<AddModalProps> = ({
></SealInput.Password>
</Form.Item>
</Form>
</ScrollerModal>
</FormDrawer>
);
};