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';
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';
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);
useEffect(() => {

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

@ -34,7 +34,7 @@ export default () => {
<ServerContentBlock title={'Backups'}>
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
{!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.
</p>
:
@ -47,21 +47,21 @@ export default () => {
</div>
}
{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.
</p>
}
<Can action={'backup.create'}>
<div css={tw`mt-6 sm:flex items-center justify-end`}>
{(backupLimit > 0 && backups.items.length > 0) &&
<p css={tw`text-center text-xs text-neutral-400 mt-2`}>
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
{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`}>
<CreateBackupButton/>
</div>
<CreateBackupButton css={tw`w-full sm:w-auto`}/>
}
</div>
</Can>
</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 Field from '@/components/elements/Field';
import { object, string } from 'yup';
import createServerDatabase from '@/api/server/createServerDatabase';
import createServerDatabase from '@/api/server/databases/createServerDatabase';
import { ServerContext } from '@/state/server';
import { httpErrorToHuman } from '@/api/http';
import FlashMessageRender from '@/components/FlashMessageRender';

19
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 FlashMessageRender from '@/components/FlashMessageRender';
import { ServerContext } from '@/state/server';
import deleteServerDatabase from '@/api/server/deleteServerDatabase';
import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
import { httpErrorToHuman } from '@/api/http';
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
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 tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Label from '@/components/elements/Label';
import Input from '@/components/elements/Input';
import GreyRowBox from '@/components/elements/GreyRowBox';
import CopyOnClick from '@/components/elements/CopyOnClick';
interface Props {
database: ServerDatabase;
@ -113,7 +114,7 @@ export default ({ database, className }: Props) => {
<h3 css={tw`mb-6`}>Database connection details</h3>
<div>
<Label>Endpoint</Label>
<Input type={'text'} readOnly value={database.connectionString} />
<CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
</div>
<div css={tw`mt-6`}>
<Label>Connections from</Label>
@ -121,21 +122,23 @@ export default ({ database, className }: Props) => {
</div>
<div css={tw`mt-6`}>
<Label>Username</Label>
<Input type={'text'} readOnly value={database.username} />
<CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
</div>
<Can action={'database.view_password'}>
<div css={tw`mt-6`}>
<Label>Password</Label>
<Input type={'text'} readOnly value={database.password}/>
<CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
</div>
</Can>
<div css={tw`mt-6`}>
<Label>JBDC Connection String</Label>
<CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
<Input
type={'text'}
readOnly
value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
/>
</CopyOnClick>
</div>
<div css={tw`mt-6 text-right`}>
<Can action={'database.update'}>
@ -151,10 +154,10 @@ export default ({ database, className }: Props) => {
<FontAwesomeIcon icon={faDatabase} fixedWidth/>
</div>
<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 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>
</div>
<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>
</div>
<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>
</div>
<div css={tw`ml-8`}>

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

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

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

@ -1,9 +1,9 @@
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 { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import { ServerDatabase } from '@/api/server/getServerDatabases';
import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
import { httpErrorToHuman } from '@/api/http';
import Button from '@/components/elements/Button';
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 ?
<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.
</p>
:

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

@ -51,7 +51,7 @@ export default () => {
<ServerContentBlock title={'Subusers'}>
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
{!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.
</p>
:

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

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