Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support deleting existing databases

Browse source
This commit is contained in:
Dane Everitt 2019-07-16 22:15:14 -07:00
parent 1f763dc155
commit d081f328ab
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 150 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/scripts/api/server/deleteServerDatabase.ts Normal file
View file

@ -0,0 +1,9 @@
import http from '@/api/http';
export default (uuid: string, database: string): Promise<void> => {
return new Promise((resolve, reject) => {
http.delete(`/api/client/servers/${uuid}/databases/${database}`)
.then(() => resolve())
.catch(reject);
});
};

7
resources/scripts/components/FlashMessageRender.tsx
View file

@ -6,10 +6,10 @@ import { ApplicationStore } from '@/state';
type Props = Readonly<{
byKey?: string;
spacerClass?: string;
withBottomSpace?: boolean;
className?: string;
}>;
export default ({ withBottomSpace, spacerClass, byKey }: Props) => {
export default ({ className, spacerClass, byKey }: Props) => {
const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
let filtered = flashes;
@ -21,9 +21,8 @@ export default ({ withBottomSpace, spacerClass, byKey }: Props) => {
return null;
}
// noinspection PointlessBooleanExpressionJS
return (
<div className={withBottomSpace === false ? undefined : 'mb-2'}>
<div className={className}>
{
filtered.map((flash, index) => (
<React.Fragment key={flash.id || flash.type + flash.message}>

3
resources/scripts/components/server/databases/CreateDatabaseButton.tsx
View file

@ -69,7 +69,7 @@ export default ({ onCreated }: { onCreated: (database: ServerDatabase) => void }
setVisible(false);
}}
>
<FlashMessageRender byKey={'create-database-modal'}/>
<FlashMessageRender byKey={'create-database-modal'} className={'mb-6'}/>
<h3 className={'mb-6'}>Create new database</h3>
<Form className={'m-0'}>
<Field
@ -90,6 +90,7 @@ export default ({ onCreated }: { onCreated: (database: ServerDatabase) => void }
</div>
<div className={'mt-6 text-right'}>
<button
type={'button'}
className={'btn btn-sm btn-secondary mr-2'}
onClick={() => setVisible(false)}
>

104
resources/scripts/components/server/databases/DatabaseRow.tsx
View file

@ -1,13 +1,107 @@
import React from 'react';
import React, { useState } from 'react';
import { ServerDatabase } from '@/api/server/getServerDatabases';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
import classNames from 'classnames';
import Modal from '@/components/elements/Modal';
import { Form, Formik, FormikActions } from 'formik';
import Field from '@/components/elements/Field';
import { object, string } from 'yup';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import deleteServerDatabase from '@/api/server/deleteServerDatabase';
import { httpErrorToHuman } from '@/api/http';
interface Props {
database: ServerDatabase;
className?: string;
onDelete: () => void;
}
export default ({ database, className, onDelete }: Props) => {
const [visible, setVisible] = useState(false);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const server = ServerContext.useStoreState(state => state.server.data!);
const schema = object().shape({
confirm: string()
.required('The database name must be provided.')
.oneOf([database.name.split('_', 2)[1], database.name], 'The database name must be provided.'),
});
const submit = (values: { confirm: string }, { setSubmitting }: FormikActions<{ confirm: string }>) => {
clearFlashes();
deleteServerDatabase(server.uuid, database.id)
.then(() => {
setVisible(false);
setTimeout(() => onDelete(), 150);
})
.catch(error => {
console.error(error);
setSubmitting(false);
addFlash({
key: 'delete-database-modal',
type: 'error',
title: 'Error',
message: httpErrorToHuman(error),
});
});
};
export default ({ database, className }: { database: ServerDatabase; className?: string }) => {
return (
<React.Fragment>
<Formik
onSubmit={submit}
initialValues={{ confirm: '' }}
validationSchema={schema}
>
{
({ isSubmitting, isValid, resetForm }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => { setVisible(false); resetForm(); }}
>
<FlashMessageRender byKey={'delete-database-modal'} className={'mb-6'}/>
<h3 className={'mb-6'}>Confirm database deletion</h3>
<p className={'text-sm'}>
Deleting a database is a permanent action, it cannot be undone. This will permanetly
delete the <strong>{database.name}</strong> database and remove all associated data.
</p>
<Form className={'m-0 mt-6'}>
<Field
type={'text'}
id={'confirm_name'}
name={'confirm'}
label={'Confirm Database Name'}
description={'Enter the database name to confirm deletion.'}
/>
<div className={'mt-6 text-right'}>
<button
type={'button'}
className={'btn btn-sm btn-secondary mr-2'}
onClick={() => setVisible(false)}
>
Cancel
</button>
<button
type={'submit'}
className={'btn btn-sm btn-red'}
disabled={!isValid}
>
Delete Database
</button>
</div>
</Form>
</Modal>
)
}
</Formik>
<div className={classNames('grey-row-box no-hover', className)}>
<div className={'icon'}>
<FontAwesomeIcon icon={faDatabase}/>
@ -20,7 +114,8 @@ export default ({ database, className }: { database: ServerDatabase; className?:
<p className={'text-center text-sm'}>{database.connectionString}</p>
</div>
<div className={'ml-6'}>
<p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Connections From:</p>
<p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Connections
From:</p>
<p className={'text-center text-sm'}>{database.allowConnectionsFrom}</p>
</div>
<div className={'ml-6'}>
@ -31,10 +126,11 @@ export default ({ database, className }: { database: ServerDatabase; className?:
<button className={'btn btn-sm btn-secondary mr-2'}>
<FontAwesomeIcon icon={faEye} fixedWidth={true}/>
</button>
<button className={'btn btn-sm btn-secondary btn-red'}>
<button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
<FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
</button>
</div>
</div>
</React.Fragment>
);
};

7
resources/scripts/components/server/databases/DatabasesContainer.tsx
View file

@ -40,11 +40,14 @@ export default () => {
<CSSTransition classNames={'fade'} timeout={250}>
<React.Fragment>
{databases.length > 0 ?
databases.map((database, index) => <DatabaseRow
databases.map((database, index) => (
<DatabaseRow
key={database.id}
database={database}
onDelete={() => setDatabases(s => [ ...s.filter(d => d.id !== database.id) ])}
className={index > 0 ? 'mt-1' : undefined}
/>)
/>
))
:
<p className={'text-center text-sm text-neutral-200'}>
It looks like you have no databases. Click the button below to create one now.

2
resources/styles/components/typography.css
View file

@ -13,5 +13,5 @@ h1, h2, h3, h4, h5, h6 {
}
p {
@apply .text-neutral-200;
@apply .text-neutral-200 .leading-snug;
}

2
tailwind.js
View file

@ -290,7 +290,9 @@ module.exports = {
leading: {
'none': 1,
'tight': 1.25,
'snug': 1.375,
'normal': 1.5,
'relaxed': 1.625,
'loose': 2,
},