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

Merge pull request #2682 from AreYouRlyScared/minorfixes

Browse source 
Update database page layout to be more consistent with other pages, fixes text visibility issues
This commit is contained in:
Dane Everitt 2020-11-10 20:15:26 -08:00 committed by GitHub
commit 0c8b7101c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 47 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/api/server/createServerDatabase.ts → resources/scripts/api/server/databases/createServerDatabase.ts
View file

@ -1,4 +1,4 @@
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases'; import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
import http from '@/api/http'; import http from '@/api/http';
export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => { export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {

0
resources/scripts/api/server/deleteServerDatabase.ts → resources/scripts/api/server/databases/deleteServerDatabase.ts
View file

0
resources/scripts/api/server/getServerDatabases.ts → resources/scripts/api/server/databases/getServerDatabases.ts
View file

2
resources/scripts/api/server/rotateDatabasePassword.ts → resources/scripts/api/server/databases/rotateDatabasePassword.ts
View file

@ -1,4 +1,4 @@
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases'; import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
import http from '@/api/http'; import http from '@/api/http';
export default (uuid: string, database: string): Promise<ServerDatabase> => { export default (uuid: string, database: string): Promise<ServerDatabase> => {

2
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -19,7 +19,7 @@ const Toast = styled.div`
} }
`; `;
const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => { const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
const [ copied, setCopied ] = useState(false); const [ copied, setCopied ] = useState(false);
useEffect(() => { useEffect(() => {

22
resources/scripts/components/server/backups/BackupContainer.tsx
View file

@ -34,7 +34,7 @@ export default () => {
<ServerContentBlock title={'Backups'}> <ServerContentBlock title={'Backups'}>
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/> <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
{!backups.items.length ? {!backups.items.length ?
<p css={tw`text-center text-sm text-neutral-400`}> <p css={tw`text-center text-sm text-neutral-300`}>
There are no backups stored for this server. There are no backups stored for this server.
</p> </p>
: :
@ -47,21 +47,21 @@ export default () => {
</div> </div>
} }
{backupLimit === 0 && {backupLimit === 0 &&
<p css={tw`text-center text-sm text-neutral-400`}> <p css={tw`text-center text-sm text-neutral-300`}>
Backups cannot be created for this server. Backups cannot be created for this server.
</p> </p>
} }
<Can action={'backup.create'}> <Can action={'backup.create'}>
{(backupLimit > 0 && backups.items.length > 0) && <div css={tw`mt-6 sm:flex items-center justify-end`}>
<p css={tw`text-center text-xs text-neutral-400 mt-2`}> {(backupLimit > 0 && backups.items.length > 0) &&
{backups.items.length} of {backupLimit} backups have been created for this server. <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
</p> {backups.items.length} of {backupLimit} backups have been created for this server.
} </p>
{backupLimit > 0 && backupLimit !== backups.items.length && }
<div css={tw`mt-6 flex justify-end`}> {backupLimit > 0 && backupLimit !== backups.items.length &&
<CreateBackupButton/> <CreateBackupButton css={tw`w-full sm:w-auto`}/>
}
</div> </div>
}
</Can> </Can>
</ServerContentBlock> </ServerContentBlock>
); );

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

@ -3,7 +3,7 @@ import Modal from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik'; import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import { object, string } from 'yup'; import { object, string } from 'yup';
import createServerDatabase from '@/api/server/createServerDatabase'; import createServerDatabase from '@/api/server/databases/createServerDatabase';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';

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

@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
import { object, string } from 'yup'; import { object, string } from 'yup';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import deleteServerDatabase from '@/api/server/deleteServerDatabase'; import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton'; import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
import Can from '@/components/elements/Can'; import Can from '@/components/elements/Can';
import { ServerDatabase } from '@/api/server/getServerDatabases'; import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
import useFlash from '@/plugins/useFlash'; import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro'; import tw from 'twin.macro';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import Label from '@/components/elements/Label'; import Label from '@/components/elements/Label';
import Input from '@/components/elements/Input'; import Input from '@/components/elements/Input';
import GreyRowBox from '@/components/elements/GreyRowBox'; import GreyRowBox from '@/components/elements/GreyRowBox';
import CopyOnClick from '@/components/elements/CopyOnClick';
interface Props { interface Props {
database: ServerDatabase; database: ServerDatabase;
@ -113,7 +114,7 @@ export default ({ database, className }: Props) => {
<h3 css={tw`mb-6`}>Database connection details</h3> <h3 css={tw`mb-6`}>Database connection details</h3>
<div> <div>
<Label>Endpoint</Label> <Label>Endpoint</Label>
<Input type={'text'} readOnly value={database.connectionString} /> <CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
</div> </div>
<div css={tw`mt-6`}> <div css={tw`mt-6`}>
<Label>Connections from</Label> <Label>Connections from</Label>
@ -121,21 +122,23 @@ export default ({ database, className }: Props) => {
</div> </div>
<div css={tw`mt-6`}> <div css={tw`mt-6`}>
<Label>Username</Label> <Label>Username</Label>
<Input type={'text'} readOnly value={database.username} /> <CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
</div> </div>
<Can action={'database.view_password'}> <Can action={'database.view_password'}>
<div css={tw`mt-6`}> <div css={tw`mt-6`}>
<Label>Password</Label> <Label>Password</Label>
<Input type={'text'} readOnly value={database.password}/> <CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
</div> </div>
</Can> </Can>
<div css={tw`mt-6`}> <div css={tw`mt-6`}>
<Label>JBDC Connection String</Label> <Label>JBDC Connection String</Label>
<Input <CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
type={'text'} <Input
readOnly type={'text'}
value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`} readOnly
/> value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
/>
</CopyOnClick>
</div> </div>
<div css={tw`mt-6 text-right`}> <div css={tw`mt-6 text-right`}>
<Can action={'database.update'}> <Can action={'database.update'}>
@ -151,10 +154,10 @@ export default ({ database, className }: Props) => {
<FontAwesomeIcon icon={faDatabase} fixedWidth/> <FontAwesomeIcon icon={faDatabase} fixedWidth/>
</div> </div>
<div css={tw`flex-1 ml-4`}> <div css={tw`flex-1 ml-4`}>
<p css={tw`text-lg`}>{database.name}</p> <CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
</div> </div>
<div css={tw`ml-8 text-center hidden md:block`}> <div css={tw`ml-8 text-center hidden md:block`}>
<p css={tw`text-sm`}>{database.connectionString}</p> <CopyOnClick text={database.connectionString}><p css={tw`text-sm`}>{database.connectionString}</p></CopyOnClick>
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p> <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
</div> </div>
<div css={tw`ml-8 text-center hidden md:block`}> <div css={tw`ml-8 text-center hidden md:block`}>
@ -162,7 +165,7 @@ export default ({ database, className }: Props) => {
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p> <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
</div> </div>
<div css={tw`ml-8 text-center hidden md:block`}> <div css={tw`ml-8 text-center hidden md:block`}>
<p css={tw`text-sm`}>{database.username}</p> <CopyOnClick text={database.username}><p css={tw`text-sm`}>{database.username}</p></CopyOnClick>
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p> <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
</div> </div>
<div css={tw`ml-8`}> <div css={tw`ml-8`}>

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import getServerDatabases from '@/api/server/getServerDatabases'; import getServerDatabases from '@/api/server/databases/getServerDatabases';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
@ -62,17 +62,17 @@ export default () => {
</p> </p>
} }
<Can action={'database.create'}> <Can action={'database.create'}>
{(databaseLimit > 0 && databases.length > 0) && <div css={tw`mt-6 sm:flex items-center justify-end`}>
<p css={tw`text-center text-xs text-neutral-400 mt-2`}> {(databaseLimit > 0 && databases.length > 0) &&
{databases.length} of {databaseLimit} databases have been allocated to this <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
server. {databases.length} of {databaseLimit} databases have been allocated to this
</p> server.
} </p>
{databaseLimit > 0 && databaseLimit !== databases.length && }
<div css={tw`mt-6 flex justify-end`}> {databaseLimit > 0 && databaseLimit !== databases.length &&
<CreateDatabaseButton/> <CreateDatabaseButton css={tw`w-full sm:w-auto`}/>
}
</div> </div>
}
</Can> </Can>
</> </>
</Fade> </Fade>

4
resources/scripts/components/server/databases/RotatePasswordButton.tsx
View file

@ -1,9 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import rotateDatabasePassword from '@/api/server/rotateDatabasePassword'; import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
import { Actions, useStoreActions } from 'easy-peasy'; import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import { ServerDatabase } from '@/api/server/getServerDatabases'; import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import tw from 'twin.macro'; import tw from 'twin.macro';

2
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -43,7 +43,7 @@ export default ({ match, history }: RouteComponentProps) => {
<> <>
{ {
schedules.length === 0 ? schedules.length === 0 ?
<p css={tw`text-sm text-center text-neutral-400`}> <p css={tw`text-sm text-center text-neutral-300`}>
There are no schedules configured for this server. There are no schedules configured for this server.
</p> </p>
: :

2
resources/scripts/components/server/users/UsersContainer.tsx
View file

@ -51,7 +51,7 @@ export default () => {
<ServerContentBlock title={'Subusers'}> <ServerContentBlock title={'Subusers'}>
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/> <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
{!subusers.length ? {!subusers.length ?
<p css={tw`text-center text-sm text-neutral-400`}> <p css={tw`text-center text-sm text-neutral-300`}>
It looks like you don&apos;t have any subusers. It looks like you don&apos;t have any subusers.
</p> </p>
: :

2
resources/scripts/state/server/databases.ts
View file

@ -1,5 +1,5 @@
import { action, Action } from 'easy-peasy'; import { action, Action } from 'easy-peasy';
import { ServerDatabase } from '@/api/server/getServerDatabases'; import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
export interface ServerDatabaseStore { export interface ServerDatabaseStore {
data: ServerDatabase[]; data: ServerDatabase[];