-
Notifications
You must be signed in to change notification settings - Fork 2k
/
RestoreModal.tsx
120 lines (115 loc) · 3.29 KB
/
RestoreModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
Box,
Button,
Flex,
Input
} from '@chakra-ui/react';
import { useMutation } from '@tanstack/react-query';
import { getErrText } from '@/utils/tools';
import { useToast } from '@/hooks/useToast';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
import Tip from '@/components/Tip';
import { InfoOutlineIcon } from '@chakra-ui/icons';
import { useTranslation } from 'next-i18next';
import { useForm } from 'react-hook-form';
import { BackupItemType, DBDetailType } from '@/types/db';
import { json2CreateCluster, json2Account } from '@/utils/json2Yaml';
import { useRouter } from 'next/router';
import { applyYamlList } from '@/api/db';
const BackupModal = ({
db,
backupInfo,
onClose,
onSuccess
}: {
db: DBDetailType;
backupInfo: BackupItemType;
onClose: () => void;
onSuccess?: () => void;
}) => {
if (!db) return <></>;
const router = useRouter();
const { t } = useTranslation();
const { toast } = useToast();
const { register, handleSubmit, getValues } = useForm({
defaultValues: {
databaseName: `${db.dbName}-${nanoid()}`
}
});
const { mutate: onclickRestore, isLoading } = useMutation({
mutationFn: ({ databaseName }: { databaseName: string }) => {
const dbData = {
...db,
dbName: databaseName
};
const yamlList = [json2CreateCluster(dbData, backupInfo), json2Account(dbData)];
return applyYamlList(yamlList, 'create');
},
onSuccess() {
router.replace(`/dbs`);
toast({
status: 'success',
title: t('Restore Success')
});
onClose();
},
onError(err) {
toast({
status: 'error',
title: t(getErrText(err, 'The restore task has been created failed !')),
duration: 6000,
isClosable: true
});
}
});
return (
<>
<Modal isOpen onClose={onClose}>
<ModalOverlay />
<ModalContent maxW={'min(600px, 90vw)'}>
<ModalHeader>{t('Restore Database')}</ModalHeader>
<ModalCloseButton />
<ModalBody display={'flex'} pb={8}>
<Box px={'50px'}>
<Tip
icon={<InfoOutlineIcon fontSize={'16px'} />}
size="sm"
text={t('Restore Backup Tip')}
/>
<Box>
<Flex mt={8} alignItems={'center'}>
<Box flex={'0 0 120px'}>{t('Database Name')}</Box>
<Input
bg={'myWhite.300'}
{...register('databaseName', {
required: t('Database Name cannot empty') || 'Database Name cannot empty'
})}
/>
</Flex>
</Box>
<Box mt={10} textAlign={'end'}>
<Button
isLoading={isLoading}
variant={'primary'}
// @ts-ignore
onClick={() => handleSubmit(onclickRestore)()}
>
{t('Start')}
</Button>
</Box>
</Box>
</ModalBody>
</ModalContent>
</Modal>
</>
);
};
export default BackupModal;