Add support for client-side server reinstallation
This commit is contained in:
Dane Everitt
parent
86de7372a8
commit
85e3945cd7
7 changed files with 169 additions and 47 deletions
9
resources/scripts/api/server/reinstallServer.ts
Normal file
9
resources/scripts/api/server/reinstallServer.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import http from '@/api/http';
|
||||
|
||||
export default (uuid: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post(`/api/client/servers/${uuid}/settings/reinstall`)
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
}
|
||||
|
|
@ -11,10 +11,6 @@ interface Props {
|
|||
const Can = ({ action, matchAny = false, renderOnError, children }: Props) => {
|
||||
const can = usePermissions(action);
|
||||
|
||||
if (matchAny) {
|
||||
console.log('Can.tsx', can);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
import React, { useState } from 'react';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import reinstallServer from '@/api/server/reinstallServer';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
|
||||
export default () => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const [ isSubmitting, setIsSubmitting ] = useState(false);
|
||||
const [ modalVisible, setModalVisible ] = useState(false);
|
||||
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
const reinstall = () => {
|
||||
clearFlashes('settings');
|
||||
setIsSubmitting(true);
|
||||
reinstallServer(uuid)
|
||||
.then(() => {
|
||||
addFlash({ key: 'settings', type: 'success', message: 'Your server has begun the reinstallation process.' });
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
|
||||
addFlash({ key: 'settings', type: 'error', message: httpErrorToHuman(error) });
|
||||
})
|
||||
.then(() => {
|
||||
setIsSubmitting(false);
|
||||
setModalVisible(false);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<TitledGreyBox title={'Reinstall Server'} className={'relative'}>
|
||||
<ConfirmationModal
|
||||
title={'Confirm server reinstallation'}
|
||||
buttonText={'Yes, reinstall server'}
|
||||
onConfirmed={() => reinstall()}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
visible={modalVisible}
|
||||
onDismissed={() => setModalVisible(false)}
|
||||
>
|
||||
Your server will be stopped and some files may be deleted or modified during this process, are you sure you wish to continue?
|
||||
</ConfirmationModal>
|
||||
<p className={'text-sm'}>
|
||||
Reinstalling your server will stop it, and then re-run the installation script that initially
|
||||
set it up.<strong className={'font-bold'}>Some files may be deleted or modified during this process,
|
||||
please back up your data before continuing.</strong>
|
||||
</p>
|
||||
<div className={'mt-6 text-right'}>
|
||||
<button
|
||||
type={'button'}
|
||||
className={'btn btn-sm btn-secondary btn-red'}
|
||||
onClick={() => setModalVisible(true)}
|
||||
>
|
||||
Reinstall Server
|
||||
</button>
|
||||
</div>
|
||||
</TitledGreyBox>
|
||||
);
|
||||
};
|
||||
|
|
@ -7,6 +7,7 @@ import { UserData } from '@/state/user';
|
|||
import RenameServerBox from '@/components/server/settings/RenameServerBox';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import Can from '@/components/elements/Can';
|
||||
import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
|
||||
|
||||
export default () => {
|
||||
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
|
||||
|
|
@ -17,49 +18,56 @@ export default () => {
|
|||
<FlashMessageRender byKey={'settings'} className={'mb-4'}/>
|
||||
<div className={'md:flex'}>
|
||||
<Can action={'file.sftp'}>
|
||||
<TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:max-w-1/2 md:mr-6'}>
|
||||
<div>
|
||||
<label className={'input-dark-label'}>Server Address</label>
|
||||
<input
|
||||
type={'text'}
|
||||
className={'input-dark'}
|
||||
value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<label className={'input-dark-label'}>Username</label>
|
||||
<input
|
||||
type={'text'}
|
||||
className={'input-dark'}
|
||||
value={`${user.username}.${server.id}`}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6 flex items-center'}>
|
||||
<div className={'flex-1'}>
|
||||
<div className={'border-l-4 border-cyan-500 p-3'}>
|
||||
<p className={'text-xs text-neutral-200'}>
|
||||
Your SFTP password is the same as the password you use to access this panel.
|
||||
</p>
|
||||
<div className={'w-full md:flex-1 md:max-w-1/2 md:mr-10'}>
|
||||
<TitledGreyBox title={'SFTP Details'}>
|
||||
<div>
|
||||
<label className={'input-dark-label'}>Server Address</label>
|
||||
<input
|
||||
type={'text'}
|
||||
className={'input-dark'}
|
||||
value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<label className={'input-dark-label'}>Username</label>
|
||||
<input
|
||||
type={'text'}
|
||||
className={'input-dark'}
|
||||
value={`${user.username}.${server.id}`}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6 flex items-center'}>
|
||||
<div className={'flex-1'}>
|
||||
<div className={'border-l-4 border-cyan-500 p-3'}>
|
||||
<p className={'text-xs text-neutral-200'}>
|
||||
Your SFTP password is the same as the password you use to access this panel.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'ml-4'}>
|
||||
<a
|
||||
href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
|
||||
className={'btn btn-sm btn-secondary'}
|
||||
>
|
||||
Launch SFTP
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'ml-4'}>
|
||||
<a
|
||||
href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
|
||||
className={'btn btn-sm btn-secondary'}
|
||||
>
|
||||
Launch SFTP
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</TitledGreyBox>
|
||||
</Can>
|
||||
<Can action={'settings.rename'}>
|
||||
<div className={'w-full mt-6 md:flex-1 md:max-w-1/2 md:mt-0'}>
|
||||
<RenameServerBox/>
|
||||
</TitledGreyBox>
|
||||
</div>
|
||||
</Can>
|
||||
<div className={'w-full mt-6 md:flex-1 md:max-w-1/2 md:mt-0'}>
|
||||
<Can action={'settings.rename'}>
|
||||
<div className={'mb-6 md:mb-10'}>
|
||||
<RenameServerBox/>
|
||||
</div>
|
||||
</Can>
|
||||
<Can action={'settings.reinstall'}>
|
||||
<ReinstallServerBox/>
|
||||
</Can>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue