forked from Alex/Pterodactyl-Panel
Finish support for creating databases in the UI
This commit is contained in:
Dane Everitt
parent
61dc86421d
commit
1f763dc155
15
resources/scripts/api/server/createServerDatabase.ts
Normal file
15
resources/scripts/api/server/createServerDatabase.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
|
||||
import http from '@/api/http';
|
||||
|
||||
export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post(`/api/client/servers/${uuid}/databases`, {
|
||||
database: data.databaseName,
|
||||
remote: data.connectionsFrom,
|
||||
}, {
|
||||
params: { include: 'password' },
|
||||
})
|
||||
.then(response => resolve(rawDataToServerDatabase(response.data.attributes)))
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
@ -9,7 +10,8 @@ interface Props {
|
||||
dismissable?: boolean;
|
||||
closeOnEscape?: boolean;
|
||||
closeOnBackground?: boolean;
|
||||
children: React.ReactChild;
|
||||
showSpinnerOverlay?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
@ -51,6 +53,14 @@ export default (props: Props) => {
|
||||
<FontAwesomeIcon icon={faTimes}/>
|
||||
</div>
|
||||
}
|
||||
{props.showSpinnerOverlay &&
|
||||
<div
|
||||
className={'absolute w-full h-full rounded flex items-center justify-center'}
|
||||
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
||||
>
|
||||
<Spinner large={false}/>
|
||||
</div>
|
||||
}
|
||||
<div className={'modal-content p-6'}>
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,111 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ServerDatabase } from '@/api/server/getServerDatabases';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import { Form, Formik, FormikActions } from 'formik';
|
||||
import Field from '@/components/elements/Field';
|
||||
import { object, string } from 'yup';
|
||||
import createServerDatabase from '@/api/server/createServerDatabase';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
||||
interface Values {
|
||||
databaseName: string;
|
||||
connectionsFrom: string;
|
||||
}
|
||||
|
||||
const schema = object().shape({
|
||||
databaseName: string()
|
||||
.required('A database name must be provided.')
|
||||
.min(5, 'Database name must be at least 5 characters.')
|
||||
.max(64, 'Database name must not exceed 64 characters.')
|
||||
.matches(/^[A-Za-z0-9_\-.]{5,64}$/, 'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.'),
|
||||
connectionsFrom: string()
|
||||
.required('A connection value must be provided.')
|
||||
.matches(/^([1-9]{1,3}|%)(\.([0-9]{1,3}|%))?(\.([0-9]{1,3}|%))?(\.([0-9]{1,3}|%))?$/, 'A valid connection address must be provided.'),
|
||||
});
|
||||
|
||||
export default ({ onCreated }: { onCreated: (database: ServerDatabase) => void }) => {
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
|
||||
const submit = (values: Values, { setSubmitting }: FormikActions<Values>) => {
|
||||
clearFlashes();
|
||||
createServerDatabase(server.uuid, { ...values })
|
||||
.then(database => {
|
||||
onCreated(database);
|
||||
setVisible(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
addFlash({
|
||||
key: 'create-database-modal',
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: httpErrorToHuman(error),
|
||||
});
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Modal visible={visible} onDismissed={() => setVisible(false)}>
|
||||
<p>Testing</p>
|
||||
</Modal>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{ databaseName: '', connectionsFrom: '%' }}
|
||||
validationSchema={schema}
|
||||
>
|
||||
{
|
||||
({ isSubmitting, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
resetForm();
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'create-database-modal'}/>
|
||||
<h3 className={'mb-6'}>Create new database</h3>
|
||||
<Form className={'m-0'}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'database_name'}
|
||||
name={'databaseName'}
|
||||
label={'Database Name'}
|
||||
description={'A descriptive name for your database instance.'}
|
||||
/>
|
||||
<div className={'mt-6'}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'connections_from'}
|
||||
name={'connectionsFrom'}
|
||||
label={'Connections From'}
|
||||
description={'Where connections should be allowed from. Use % for wildcards.'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6 text-right'}>
|
||||
<button
|
||||
className={'btn btn-sm btn-secondary mr-2'}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button className={'btn btn-sm btn-primary'} type={'submit'}>
|
||||
Create Database
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
<button className={'btn btn-primary btn-lg'} onClick={() => setVisible(true)}>
|
||||
Create Database
|
||||
New Database
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@ -4,10 +4,11 @@ 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';
|
||||
|
||||
export default ({ database }: { database: ServerDatabase }) => {
|
||||
export default ({ database, className }: { database: ServerDatabase; className?: string }) => {
|
||||
return (
|
||||
<div className={'grey-row-box no-hover'}>
|
||||
<div className={classNames('grey-row-box no-hover', className)}>
|
||||
<div className={'icon'}>
|
||||
<FontAwesomeIcon icon={faDatabase}/>
|
||||
</div>
|
||||
|
||||
@ -40,14 +40,18 @@ export default () => {
|
||||
<CSSTransition classNames={'fade'} timeout={250}>
|
||||
<React.Fragment>
|
||||
{databases.length > 0 ?
|
||||
databases.map(database => <DatabaseRow key={database.id} database={database}/>)
|
||||
databases.map((database, index) => <DatabaseRow
|
||||
key={database.id}
|
||||
database={database}
|
||||
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.
|
||||
</p>
|
||||
}
|
||||
<div className={'mt-6 flex justify-end'}>
|
||||
<CreateDatabaseButton onCreated={database => setDatabases(s => [...s, database])}/>
|
||||
<CreateDatabaseButton onCreated={database => setDatabases(s => [ ...s, database ])}/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</CSSTransition>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.modal-mask {
|
||||
@apply .fixed .pin .z-50 .overflow-auto .flex;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.70);
|
||||
transition: opacity 250ms ease;
|
||||
|
||||
& > .modal-container {
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
& > .modal-content {
|
||||
@apply .bg-neutral-900 .rounded .shadow-md;
|
||||
@apply .bg-neutral-800 .rounded .shadow-md;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
|
||||
@ -135,7 +135,7 @@ module.exports = {
|
||||
},
|
||||
plugins: plugins,
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimize: isProduction,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
cache: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user