61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { CheckCircleFilled } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Flex, Result } from 'antd';
|
|
import React from 'react';
|
|
import { ProviderValueMap } from '../config';
|
|
|
|
const SuccessResult: React.FC<{
|
|
provider: string;
|
|
onSkip: () => void;
|
|
onAddWorker: () => void;
|
|
}> = ({ provider, onSkip, onAddWorker }) => {
|
|
const intl = useIntl();
|
|
|
|
const k8sTips = (
|
|
<div className="flex-column">
|
|
<span>{intl.formatMessage({ id: 'clusters.create.k8sTips1' })}</span>
|
|
<span>{intl.formatMessage({ id: 'clusters.create.k8sTips2' })}</span>
|
|
</div>
|
|
);
|
|
|
|
const dockerTips = (
|
|
<div className="flex-column">
|
|
<span>{intl.formatMessage({ id: 'clusters.create.dockerTips1' })}</span>
|
|
<span>{intl.formatMessage({ id: 'clusters.create.dockerTips2' })}</span>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Result
|
|
styles={{
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: 500
|
|
}
|
|
}}
|
|
icon={
|
|
<CheckCircleFilled
|
|
style={{ color: 'var(--ant-color-success)', fontSize: 36 }}
|
|
/>
|
|
}
|
|
status="success"
|
|
title={intl.formatMessage({ id: 'clusters.create.steps.complete.tips' })}
|
|
subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips}
|
|
extra={[
|
|
<Flex gap={16} justify="center" key="buttons">
|
|
<Button key="skip" onClick={onSkip}>
|
|
{intl.formatMessage({ id: 'clusters.create.skipfornow' })}
|
|
</Button>
|
|
<Button type="primary" key="add" onClick={onAddWorker}>
|
|
{provider === ProviderValueMap.Kubernetes
|
|
? intl.formatMessage({ id: 'clusters.button.register' })
|
|
: intl.formatMessage({ id: 'resources.button.create' })}
|
|
</Button>
|
|
</Flex>
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SuccessResult;
|