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

Update more of the UI to use new design elements

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 15:28:27 -04:00
parent 2824db7352
commit 61018b5e67
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 100 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/scripts/components/elements/Code.tsx
View file

@ -3,12 +3,13 @@ import classNames from 'classnames';
interface CodeProps {
dark?: boolean | undefined;
className?: string;
children: React.ReactChild | React.ReactFragment | React.ReactPortal;
}
export default ({ dark, children }: CodeProps) => (
export default ({ dark, className, children }: CodeProps) => (
<code
className={classNames('font-mono text-sm px-2 py-1 rounded', {
className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
'bg-neutral-700': !dark,
'bg-neutral-900 text-gray-100': dark,
})}

2
resources/scripts/components/elements/button/style.module.css
View file

@ -5,7 +5,7 @@
/* Sizing Controls */
&.small {
@apply px-4 py-1 font-normal text-sm focus:ring-2;
@apply px-4 py-0 h-8 font-normal text-sm focus:ring-2;
}
&.large {

49
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -6,21 +6,21 @@ import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import InputSpinner from '@/components/elements/InputSpinner';
import { Textarea } from '@/components/elements/Input';
import Can from '@/components/elements/Can';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Allocation } from '@/api/server/getServer';
import styled from 'styled-components/macro';
import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import useFlash from '@/plugins/useFlash';
import { useFlashKey } from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import CopyOnClick from '@/components/elements/CopyOnClick';
import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations';
import { formatIp } from '@/helpers';
import Code from '@/components/elements/Code';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
interface Props {
@ -29,7 +29,7 @@ interface Props {
const AllocationRow = ({ allocation }: Props) => {
const [ loading, setLoading ] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = getServerAllocations();
@ -39,69 +39,64 @@ const AllocationRow = ({ allocation }: Props) => {
const setAllocationNotes = debounce((notes: string) => {
setLoading(true);
clearFlashes('server:network');
clearFlashes();
setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes))
.catch(error => clearAndAddHttpError({ key: 'server:network', error }))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
}, 750);
const setPrimaryAllocation = () => {
clearFlashes('server:network');
clearFlashes();
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id)
.catch(error => {
clearAndAddHttpError({ key: 'server:network', error });
clearAndAddHttpError(error);
mutate();
});
};
return (
<GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}>
<div css={tw`flex items-center w-full md:w-auto`}>
<div css={tw`pl-4 pr-6 text-neutral-400`}>
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div className={'flex items-center w-full md:w-auto'}>
<div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired}/>
</div>
<div css={tw`mr-4 flex-1 md:w-40`}>
<div className={'mr-4 flex-1 md:w-40'}>
{allocation.alias ?
<CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>}
<CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div css={tw`w-16 md:w-24 overflow-hidden`}>
<Code>{allocation.port}</Code>
<div className={'w-16 md:w-24 overflow-hidden'}>
<Code dark>{allocation.port}</Code>
<Label>Port</Label>
</div>
</div>
<div css={tw`mt-4 w-full md:mt-0 md:flex-1 md:w-auto`}>
<div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
<InputSpinner visible={loading}>
<Textarea
css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>
<div css={tw`w-full md:flex-none md:w-40 md:text-center mt-4 md:mt-0 ml-4 flex items-center justify-end`}>
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
{allocation.isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
<Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>Primary</Button>
:
<>
<Can action={'allocation.delete'}>
<DeleteAllocationButton allocation={allocation.id}/>
</Can>
<Can action={'allocation.update'}>
<Button
isSecondary
size={'xsmall'}
color={'primary'}
onClick={setPrimaryAllocation}
>
<Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
Make Primary
</Button>
</Button.Text>
</Can>
</>
}

36
resources/scripts/components/server/network/DeleteAllocationButton.tsx
View file

@ -2,11 +2,12 @@ import React, { useState } from 'react';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import Icon from '@/components/elements/Icon';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { ServerContext } from '@/state/server';
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations';
import useFlash from '@/plugins/useFlash';
import { useFlashKey } from '@/plugins/useFlash';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button/index';
interface Props {
allocation: number;
@ -19,36 +20,41 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { mutate } = getServerAllocations();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const deleteAllocation = () => {
clearFlashes('server:network');
clearFlashes();
mutate(data => data?.filter(a => a.id !== allocation), false);
setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
deleteServerAllocation(uuid, allocation)
.catch(error => clearAndAddHttpError({ key: 'server:network', error }));
.catch(error => {
clearAndAddHttpError(error);
mutate();
});
};
return (
<>
<ConfirmationModal
visible={confirm}
title={'Remove this allocation?'}
buttonText={'Delete'}
<Dialog.Confirm
open={confirm}
onClose={() => setConfirm(false)}
title={'Remove Allocation'}
confirm={'Delete'}
onConfirmed={deleteAllocation}
onModalDismissed={() => setConfirm(false)}
>
This allocation will be immediately removed from your server. Are you sure you want to continue?
</ConfirmationModal>
<button
css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`}
This allocation will be immediately removed from your server.
</Dialog.Confirm>
<Button.Danger
variant={Button.Variants.Secondary}
size={Button.Sizes.Small}
shape={Button.Shapes.IconSquare}
type={'button'}
onClick={() => setConfirm(true)}
>
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
</button>
</Button.Danger>
</>
);
};

12
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import useFlash from '@/plugins/useFlash';
import { useFlashKey } from '@/plugins/useFlash';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { ServerContext } from '@/state/server';
import AllocationRow from '@/components/server/network/AllocationRow';
@ -20,7 +20,7 @@ const NetworkContainer = () => {
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const { data, error, mutate } = getServerAllocations();
useEffect(() => {
@ -28,9 +28,7 @@ const NetworkContainer = () => {
}, []);
useEffect(() => {
if (error) {
clearAndAddHttpError({ key: 'server:network', error });
}
clearAndAddHttpError(error);
}, [ error ]);
useDeepCompareEffect(() => {
@ -40,7 +38,7 @@ const NetworkContainer = () => {
}, [ data ]);
const onCreateAllocation = () => {
clearFlashes('server:network');
clearFlashes();
setLoading(true);
createServerAllocation(uuid)
@ -48,7 +46,7 @@ const NetworkContainer = () => {
setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
return mutate(data?.concat(allocation), false);
})
.catch(error => clearAndAddHttpError({ key: 'server:network', error }))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
};

31
resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
View file

@ -4,9 +4,9 @@ import { ServerContext } from '@/state/server';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { Button } from '@/components/elements/button/index';
import { Dialog } from '@/components/elements/dialog';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
interface Props {
scheduleId: number;
@ -38,20 +38,23 @@ export default ({ scheduleId, onDeleted }: Props) => {
return (
<>
<ConfirmationModal
visible={visible}
title={'Delete schedule?'}
buttonText={'Yes, delete schedule'}
<Dialog.Confirm
open={visible}
onClose={() => setVisible(false)}
title={'Delete Schedule'}
confirm={'Delete'}
onConfirmed={onDelete}
showSpinnerOverlay={isLoading}
onModalDismissed={() => setVisible(false)}
>
Are you sure you want to delete this schedule? All tasks will be removed and any running processes
will be terminated.
</ConfirmationModal>
<Button css={tw`flex-1 sm:flex-none mr-4 border-transparent`} color={'red'} isSecondary onClick={() => setVisible(true)}>
<SpinnerOverlay visible={isLoading} />
All tasks will be removed and any running processes will be terminated.
</Dialog.Confirm>
<Button.Danger
variant={Button.Variants.Secondary}
className={'flex-1 sm:flex-none mr-4 border-transparent'}
onClick={() => setVisible(true)}
>
Delete
</Button>
</Button.Danger>
</>
);
};

4
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

@ -9,7 +9,7 @@ import { httpErrorToHuman } from '@/api/http';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import ModalContext from '@/context/ModalContext';
import asModal from '@/hoc/asModal';
import Switch from '@/components/elements/Switch';
@ -135,7 +135,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
/>
</div>
<div css={tw`mt-6 text-right`}>
<Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
<Button className={'w-full sm:w-auto'} type={'submit'} disabled={isSubmitting}>
{schedule ? 'Save changes' : 'Create schedule'}
</Button>
</div>

5
resources/scripts/components/server/schedules/NewTaskButton.tsx
View file

@ -1,8 +1,7 @@
import React, { useState } from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
import Button from '@/components/elements/Button';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
interface Props {
schedule: Schedule;
@ -14,7 +13,7 @@ export default ({ schedule }: Props) => {
return (
<>
<TaskDetailsModal schedule={schedule} visible={visible} onModalDismissed={() => setVisible(false)}/>
<Button onClick={() => setVisible(true)} css={tw`flex-1`}>
<Button onClick={() => setVisible(true)} className={'flex-1'}>
New Task
</Button>
</>

8
resources/scripts/components/server/schedules/RunScheduleButton.tsx
View file

@ -1,7 +1,6 @@
import React, { useCallback, useState } from 'react';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
import { ServerContext } from '@/state/server';
import useFlash from '@/plugins/useFlash';
@ -33,9 +32,8 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
<>
<SpinnerOverlay visible={loading} size={'large'}/>
<Button
isSecondary
color={'grey'}
css={tw`flex-1 sm:flex-none border-transparent`}
variant={Button.Variants.Secondary}
className={'flex-1 sm:flex-none'}
disabled={schedule.isProcessing}
onClick={onTriggerExecute}
>

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

@ -11,7 +11,7 @@ import Can from '@/components/elements/Can';
import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
export default () => {

34
resources/scripts/components/server/schedules/ScheduleCronRow.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import tw from 'twin.macro';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import classNames from 'classnames';
interface Props {
cron: Schedule['cron'];
@ -8,26 +8,26 @@ interface Props {
}
const ScheduleCronRow = ({ cron, className }: Props) => (
<div css={tw`flex`} className={className}>
<div css={tw`w-1/5 sm:w-auto text-center`}>
<p css={tw`font-medium`}>{cron.minute}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Minute</p>
<div className={classNames('flex', className)}>
<div className={'w-1/5 sm:w-auto text-center'}>
<p className={'font-medium'}>{cron.minute}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
</div>
<div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
<p css={tw`font-medium`}>{cron.hour}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Hour</p>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<p className={'font-medium'}>{cron.hour}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
</div>
<div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
<p css={tw`font-medium`}>{cron.dayOfMonth}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Month)</p>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<p className={'font-medium'}>{cron.dayOfMonth}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
</div>
<div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
<p css={tw`font-medium`}>{cron.month}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Month</p>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<p className={'font-medium'}>{cron.month}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
</div>
<div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
<p css={tw`font-medium`}>{cron.dayOfWeek}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Week)</p>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<p className={'font-medium'}>{cron.dayOfWeek}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
</div>
</div>
);

12
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -11,7 +11,7 @@ import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import PageContentBlock from '@/components/elements/PageContentBlock';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
import isEqual from 'react-fast-compare';
import { format } from 'date-fns';
@ -117,15 +117,9 @@ export default () => {
</div>
<div css={tw`flex sm:block mt-3 sm:mt-0`}>
<Can action={'schedule.update'}>
<Button
isSecondary
color={'grey'}
size={'small'}
css={tw`flex-1 mr-4 border-transparent`}
onClick={toggleEditModal}
>
<Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
Edit
</Button>
</Button.Text>
<NewTaskButton schedule={schedule}/>
</Can>
</div>

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

@ -12,7 +12,7 @@ import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
import tw from 'twin.macro';
import Label from '@/components/elements/Label';
import { Textarea } from '@/components/elements/Input';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button/index';
import Select from '@/components/elements/Select';
import ModalContext from '@/context/ModalContext';
import asModal from '@/hoc/asModal';

7
resources/scripts/components/server/users/AddSubuserButton.tsx
View file

@ -1,9 +1,6 @@
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
import Button from '@/components/elements/Button';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
export default () => {
const [ visible, setVisible ] = useState(false);
@ -12,7 +9,7 @@ export default () => {
<>
<EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
<Button onClick={() => setVisible(true)}>
<FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
New User
</Button>
</>
);