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

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

13
resources/scripts/components/server/ConflictStateRenderer.tsx
View file

@ -1,15 +1,14 @@
import React from 'react';
import { ServerContext } from '@/state/server';
import ScreenBlock from '@/components/elements/ScreenBlock';
import ServerInstallSvg from '@/assets/images/server_installing.svg';
import ServerErrorSvg from '@/assets/images/server_error.svg';
import ServerRestoreSvg from '@/assets/images/server_restore.svg';
import ScreenBlock from '@/components/elements/ScreenBlock';
import { ServerContext } from '@/state/server';
export default () => {
const status = ServerContext.useStoreState((state) => state.server.data?.status || null);
const isTransferring = ServerContext.useStoreState((state) => state.server.data?.isTransferring || false);
const status = ServerContext.useStoreState(state => state.server.data?.status || null);
const isTransferring = ServerContext.useStoreState(state => state.server.data?.isTransferring || false);
const isNodeUnderMaintenance = ServerContext.useStoreState(
(state) => state.server.data?.isNodeUnderMaintenance || false
state => state.server.data?.isNodeUnderMaintenance || false,
);
return status === 'installing' || status === 'install_failed' ? (
@ -36,7 +35,7 @@ export default () => {
image={ServerRestoreSvg}
message={
isTransferring
? 'Your server is being transfered to a new node, please check back later.'
? 'Your server is being transferred to a new node, please check back later.'
: 'Your server is currently being restored from a backup, please check back in a few minutes.'
}
/>

12
resources/scripts/components/server/InstallListener.tsx
View file

@ -5,26 +5,26 @@ import { mutate } from 'swr';
import { getDirectorySwrKey } from '@/plugins/useFileManagerSwr';
const InstallListener = () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const getServer = ServerContext.useStoreActions((actions) => actions.server.getServer);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
useWebsocketEvent(SocketEvent.BACKUP_RESTORE_COMPLETED, () => {
mutate(getDirectorySwrKey(uuid, '/'), undefined);
setServerFromState((s) => ({ ...s, status: null }));
setServerFromState(s => ({ ...s, status: null }));
});
// Listen for the installation completion event and then fire off a request to fetch the updated
// server information. This allows the server to automatically become available to the user if they
// just sit on the page.
useWebsocketEvent(SocketEvent.INSTALL_COMPLETED, () => {
getServer(uuid).catch((error) => console.error(error));
getServer(uuid).catch(error => console.error(error));
});
// When we see the install started event immediately update the state to indicate such so that the
// screens automatically update.
useWebsocketEvent(SocketEvent.INSTALL_STARTED, () => {
setServerFromState((s) => ({ ...s, status: 'installing' }));
setServerFromState(s => ({ ...s, status: 'installing' }));
});
return null;

10
resources/scripts/components/server/ServerActivityLogContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useActivityLogs } from '@/api/server/activity';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { useFlashKey } from '@/plugins/useFlash';
@ -24,7 +24,7 @@ export default () => {
});
useEffect(() => {
setFilters((value) => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
setFilters(value => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [hash]);
useEffect(() => {
@ -39,7 +39,7 @@ export default () => {
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters((value) => ({ ...value, filters: {} }))}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
</Link>
@ -51,7 +51,7 @@ export default () => {
<p className={'text-sm text-center text-gray-400'}>No activity logs available for this server.</p>
) : (
<div className={'bg-gray-700'}>
{data?.items.map((activity) => (
{data?.items.map(activity => (
<ActivityLogEntry key={activity.id} activity={activity}>
<span />
</ActivityLogEntry>
@ -61,7 +61,7 @@ export default () => {
{data && (
<PaginationFooter
pagination={data.pagination}
onPageSelect={(page) => setFilters((value) => ({ ...value, page }))}
onPageSelect={page => setFilters(value => ({ ...value, page }))}
/>
)}
</ServerContentBlock>

12
resources/scripts/components/server/TransferListener.tsx
View file

@ -3,19 +3,19 @@ import { ServerContext } from '@/state/server';
import { SocketEvent } from '@/components/server/events';
const TransferListener = () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const getServer = ServerContext.useStoreActions((actions) => actions.server.getServer);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
// Listen for the transfer status event, so we can update the state of the server.
useWebsocketEvent(SocketEvent.TRANSFER_STATUS, (status: string) => {
if (status === 'pending' || status === 'processing') {
setServerFromState((s) => ({ ...s, isTransferring: true }));
setServerFromState(s => ({ ...s, isTransferring: true }));
return;
}
if (status === 'failed') {
setServerFromState((s) => ({ ...s, isTransferring: false }));
setServerFromState(s => ({ ...s, isTransferring: false }));
return;
}
@ -24,7 +24,7 @@ const TransferListener = () => {
}
// Refresh the server's information as it's node and allocations were just updated.
getServer(uuid).catch((error) => console.error(error));
getServer(uuid).catch(error => console.error(error));
});
return null;

2
resources/scripts/components/server/UptimeDuration.tsx
View file

@ -1,5 +1,3 @@
import React from 'react';
export default ({ uptime }: { uptime: number }) => {
const days = Math.floor(uptime / (24 * 60 * 60));
const hours = Math.floor((Math.floor(uptime) / 60 / 60) % 24);

49
resources/scripts/components/server/WebsocketHandler.tsx
View file

@ -1,29 +1,32 @@
import React, { useEffect, useState } from 'react';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
import { useEffect, useState } from 'react';
import tw from 'twin.macro';
import getWebsocketToken from '@/api/server/getWebsocketToken';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
const reconnectErrors = ['jwt: exp claim is invalid', 'jwt: created too far in past (denylist)'];
export default () => {
function WebsocketHandler() {
let updatingToken = false;
const [error, setError] = useState<'connecting' | string>('');
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
const setServerStatus = ServerContext.useStoreActions((actions) => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions((actions) => actions.socket);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
const updateToken = (uuid: string, socket: Websocket) => {
if (updatingToken) return;
if (updatingToken) {
return;
}
updatingToken = true;
getWebsocketToken(uuid)
.then((data) => socket.setToken(data.token, true))
.catch((error) => console.error(error))
.then(data => socket.setToken(data.token, true))
.catch(error => console.error(error))
.then(() => {
updatingToken = false;
});
@ -38,9 +41,9 @@ export default () => {
setError('connecting');
setConnectionState(false);
});
socket.on('status', (status) => setServerStatus(status));
socket.on('status', status => setServerStatus(status));
socket.on('daemon error', (message) => {
socket.on('daemon error', message => {
console.warn('Got error message from daemon socket:', message);
});
@ -50,11 +53,11 @@ export default () => {
setConnectionState(false);
console.warn('JWT validation error from wings:', error);
if (reconnectErrors.find((v) => error.toLowerCase().indexOf(v) >= 0)) {
if (reconnectErrors.find(v => error.toLowerCase().indexOf(v) >= 0)) {
updateToken(uuid, socket);
} else {
setError(
'There was an error validating the credentials provided for the websocket. Please refresh the page.'
'There was an error validating the credentials provided for the websocket. Please refresh the page.',
);
}
});
@ -74,14 +77,14 @@ export default () => {
});
getWebsocketToken(uuid)
.then((data) => {
.then(data => {
// Connect and then set the authentication token.
socket.setToken(data.token).connect(data.socket);
// Once that is done, set the instance.
setInstance(socket);
})
.catch((error) => console.error(error));
.catch(error => console.error(error));
};
useEffect(() => {
@ -105,7 +108,7 @@ export default () => {
}, [uuid]);
return error ? (
<CSSTransition timeout={150} in appear classNames={'fade'}>
<FadeTransition duration="duration-150" appear show>
<div css={tw`bg-red-500 py-2`}>
<ContentContainer css={tw`flex items-center justify-center`}>
{error === 'connecting' ? (
@ -120,6 +123,8 @@ export default () => {
)}
</ContentContainer>
</div>
</CSSTransition>
</FadeTransition>
) : null;
};
}
export default WebsocketHandler;

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

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import useFlash from '@/plugins/useFlash';
import Can from '@/components/elements/Can';
@ -16,7 +16,7 @@ const BackupContainer = () => {
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data: backups, error, isValidating } = getServerBackups();
const backupLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.backups);
const backupLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.backups);
useEffect(() => {
if (!error) {

74
resources/scripts/components/server/backups/BackupContextMenu.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import {
faBoxOpen,
faCloudDownloadAlt,
@ -28,8 +28,8 @@ interface Props {
}
export default ({ backup }: Props) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const [modal, setModal] = useState('');
const [loading, setLoading] = useState(false);
const [truncate, setTruncate] = useState(false);
@ -40,11 +40,11 @@ export default ({ backup }: Props) => {
setLoading(true);
clearFlashes('backups');
getBackupDownloadUrl(uuid, backup.uuid)
.then((url) => {
.then(url => {
// @ts-expect-error this is valid
window.location = url;
})
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'backups', error });
})
@ -55,17 +55,18 @@ export default ({ backup }: Props) => {
setLoading(true);
clearFlashes('backups');
deleteBackup(uuid, backup.uuid)
.then(() =>
mutate(
(data) => ({
...data,
items: data.items.filter((b) => b.uuid !== backup.uuid),
backupCount: data.backupCount - 1,
}),
false
)
.then(
async () =>
await mutate(
data => ({
...data!,
items: data!.items.filter(b => b.uuid !== backup.uuid),
backupCount: data!.backupCount - 1,
}),
false,
),
)
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'backups', error });
setLoading(false);
@ -78,12 +79,12 @@ export default ({ backup }: Props) => {
clearFlashes('backups');
restoreServerBackup(uuid, backup.uuid, truncate)
.then(() =>
setServerFromState((s) => ({
setServerFromState(s => ({
...s,
status: 'restoring_backup',
}))
})),
)
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'backups', error });
})
@ -97,23 +98,24 @@ export default ({ backup }: Props) => {
}
http.post(`/api/client/servers/${uuid}/backups/${backup.uuid}/lock`)
.then(() =>
mutate(
(data) => ({
...data,
items: data.items.map((b) =>
b.uuid !== backup.uuid
? b
: {
...b,
isLocked: !b.isLocked,
}
),
}),
false
)
.then(
async () =>
await mutate(
data => ({
...data!,
items: data!.items.map(b =>
b.uuid !== backup.uuid
? b
: {
...b,
isLocked: !b.isLocked,
},
),
}),
false,
),
)
.catch((error) => alert(httpErrorToHuman(error)))
.catch(error => alert(httpErrorToHuman(error)))
.then(() => setModal(''));
};
@ -146,7 +148,7 @@ export default ({ backup }: Props) => {
id={'restore_truncate'}
value={'true'}
checked={truncate}
onChange={() => setTruncate((s) => !s)}
onChange={() => setTruncate(s => !s)}
/>
Delete all files before restoring backup.
</label>
@ -164,7 +166,7 @@ export default ({ backup }: Props) => {
<SpinnerOverlay visible={loading} fixed />
{backup.isSuccessful ? (
<DropdownMenu
renderToggle={(onClick) => (
renderToggle={onClick => (
<button
onClick={onClick}
css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}

15
resources/scripts/components/server/backups/BackupRow.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArchive, faEllipsisH, faLock } from '@fortawesome/free-solid-svg-icons';
import { format, formatDistanceToNow } from 'date-fns';
@ -21,14 +20,14 @@ interface Props {
export default ({ backup, className }: Props) => {
const { mutate } = getServerBackups();
useWebsocketEvent(`${SocketEvent.BACKUP_COMPLETED}:${backup.uuid}` as SocketEvent, (data) => {
useWebsocketEvent(`${SocketEvent.BACKUP_COMPLETED}:${backup.uuid}` as SocketEvent, async data => {
try {
const parsed = JSON.parse(data);
mutate(
(data) => ({
...data,
items: data.items.map((b) =>
await mutate(
data => ({
...data!,
items: data!.items.map(b =>
b.uuid !== backup.uuid
? b
: {
@ -37,10 +36,10 @@ export default ({ backup, className }: Props) => {
checksum: (parsed.checksum_type || '') + ':' + (parsed.checksum || ''),
bytes: parsed.file_size || 0,
completedAt: new Date(),
}
},
),
}),
false
false,
);
} catch (e) {
console.warn(e);

14
resources/scripts/components/server/backups/CreateBackupButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
import { boolean, object, string } from 'yup';
@ -68,7 +68,7 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
};
export default () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const [visible, setVisible] = useState(false);
const { mutate } = getServerBackups();
@ -80,14 +80,14 @@ export default () => {
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('backups:create');
createServerBackup(uuid, values)
.then((backup) => {
mutate(
(data) => ({ ...data, items: data.items.concat(backup), backupCount: data.backupCount + 1 }),
false
.then(async backup => {
await mutate(
data => ({ ...data!, items: data!.items.concat(backup), backupCount: data!.backupCount + 1 }),
false,
);
setVisible(false);
})
.catch((error) => {
.catch(error => {
clearAndAddHttpError({ key: 'backups:create', error });
setSubmitting(false);
});

2
resources/scripts/components/server/console/ChartBlock.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import classNames from 'classnames';
import styles from '@/components/server/console/style.module.css';

71
resources/scripts/components/server/console/Console.tsx
View file

@ -1,25 +1,28 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ITerminalOptions, Terminal } from 'xterm';
import { ChevronDoubleRightIcon } from '@heroicons/react/solid';
import classNames from 'classnames';
import { debounce } from 'debounce';
import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import type { ITerminalInitOnlyOptions, ITerminalOptions, ITheme } from 'xterm';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';
import { SearchBarAddon } from 'xterm-addon-search-bar';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ServerContext } from '@/state/server';
import { usePermissions } from '@/plugins/usePermissions';
import { theme as th } from 'twin.macro';
import useEventListener from '@/plugins/useEventListener';
import { debounce } from 'debounce';
import { usePersistedState } from '@/plugins/usePersistedState';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { SocketEvent, SocketRequest } from '@/components/server/events';
import classNames from 'classnames';
import { ChevronDoubleRightIcon } from '@heroicons/react/solid';
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
import useEventListener from '@/plugins/useEventListener';
import { usePermissions } from '@/plugins/usePermissions';
import { usePersistedState } from '@/plugins/usePersistedState';
import { ServerContext } from '@/state/server';
import 'xterm/css/xterm.css';
import styles from './style.module.css';
const theme = {
const theme: ITheme = {
background: th`colors.black`.toString(),
cursor: 'transparent',
black: th`colors.black`.toString(),
@ -38,7 +41,7 @@ const theme = {
brightMagenta: '#C792EA',
brightCyan: '#89DDFF',
brightWhite: '#ffffff',
selection: '#FAF089',
selectionBackground: '#FAF089',
};
const terminalProps: ITerminalOptions = {
@ -47,23 +50,27 @@ const terminalProps: ITerminalOptions = {
allowTransparency: true,
fontSize: 12,
fontFamily: th('fontFamily.mono'),
rows: 30,
theme: theme,
allowProposedApi: true,
};
const terminalInitOnlyProps: ITerminalInitOnlyOptions = {
rows: 30,
};
export default () => {
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m';
const ref = useRef<HTMLDivElement>(null);
const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
const terminal = useMemo(() => new Terminal({ ...terminalProps, ...terminalInitOnlyProps }), []);
const fitAddon = new FitAddon();
const searchAddon = new SearchAddon();
const searchBar = new SearchBarAddon({ searchAddon });
const webLinksAddon = new WebLinksAddon();
const scrollDownHelperAddon = new ScrollDownHelperAddon();
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [canSendCommands] = usePermissions(['control.console']);
const serverId = ServerContext.useStoreState((state) => state.server.data!.id);
const isTransferring = ServerContext.useStoreState((state) => state.server.data!.isTransferring);
const serverId = ServerContext.useStoreState(state => state.server.data!.id);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
const [history, setHistory] = usePersistedState<string[]>(`${serverId}:command_history`, []);
const [historyIndex, setHistoryIndex] = useState(-1);
@ -81,20 +88,20 @@ export default () => {
const handleDaemonErrorOutput = (line: string) =>
terminal.writeln(
TERMINAL_PRELUDE + '\u001b[1m\u001b[41m' + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m'
TERMINAL_PRELUDE + '\u001b[1m\u001b[41m' + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
);
const handlePowerChangeEvent = (state: string) =>
terminal.writeln(TERMINAL_PRELUDE + 'Server marked as ' + state + '...\u001b[0m');
const handleCommandKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
const handleCommandKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
if (e.key === 'ArrowUp') {
const newIndex = Math.min(historyIndex + 1, history!.length - 1);
setHistoryIndex(newIndex);
e.currentTarget.value = history![newIndex] || '';
// By default up arrow will also bring the cursor to the start of the line,
// By default, up arrow will also bring the cursor to the start of the line,
// so we'll preventDefault to keep it at the end.
e.preventDefault();
}
@ -108,7 +115,7 @@ export default () => {
const command = e.currentTarget.value;
if (e.key === 'Enter' && command.length > 0) {
setHistory((prevHistory) => [command, ...prevHistory!].slice(0, 32));
setHistory(prevHistory => [command, ...prevHistory!].slice(0, 32));
setHistoryIndex(-1);
instance && instance.send('send command', command);
@ -150,7 +157,7 @@ export default () => {
if (terminal.element) {
fitAddon.fit();
}
}, 100)
}, 100),
);
useEffect(() => {
@ -160,7 +167,7 @@ export default () => {
[SocketEvent.INSTALL_OUTPUT]: handleConsoleOutput,
[SocketEvent.TRANSFER_LOGS]: handleConsoleOutput,
[SocketEvent.TRANSFER_STATUS]: handleTransferStatus,
[SocketEvent.DAEMON_MESSAGE]: (line) => handleConsoleOutput(line, true),
[SocketEvent.DAEMON_MESSAGE]: line => handleConsoleOutput(line, true),
[SocketEvent.DAEMON_ERROR]: handleDaemonErrorOutput,
};
@ -171,7 +178,12 @@ export default () => {
}
Object.keys(listeners).forEach((key: string) => {
instance.addListener(key, listeners[key]);
const listener = listeners[key];
if (listener === undefined) {
return;
}
instance.addListener(key, listener);
});
instance.send(SocketRequest.SEND_LOGS);
}
@ -179,7 +191,12 @@ export default () => {
return () => {
if (instance) {
Object.keys(listeners).forEach((key: string) => {
instance.removeListener(key, listeners[key]);
const listener = listeners[key];
if (listener === undefined) {
return;
}
instance.removeListener(key, listener);
});
}
};
@ -210,7 +227,7 @@ export default () => {
<div
className={classNames(
'text-gray-100 peer-focus:text-gray-50 peer-focus:animate-pulse',
styles.command_icon
styles.command_icon,
)}
>
<ChevronDoubleRightIcon className={'w-4 h-4'} />

9
resources/scripts/components/server/console/PowerButtons.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import * as React from 'react';
import { Button } from '@/components/elements/button/index';
import Can from '@/components/elements/Can';
import { ServerContext } from '@/state/server';
@ -11,13 +12,13 @@ interface PowerButtonProps {
export default ({ className }: PowerButtonProps) => {
const [open, setOpen] = useState(false);
const status = ServerContext.useStoreState((state) => state.status.value);
const instance = ServerContext.useStoreState((state) => state.socket.instance);
const status = ServerContext.useStoreState(state => state.status.value);
const instance = ServerContext.useStoreState(state => state.socket.instance);
const killable = status === 'stopping';
const onButtonClick = (
action: PowerAction | 'kill-confirmed',
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
): void => {
e.preventDefault();
if (action === 'kill') {

29
resources/scripts/components/server/console/ServerConsoleContainer.tsx
View file

@ -1,25 +1,26 @@
import React, { memo } from 'react';
import { ServerContext } from '@/state/server';
import { memo } from 'react';
import isEqual from 'react-fast-compare';
import { Alert } from '@/components/elements/alert';
import Can from '@/components/elements/Can';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import isEqual from 'react-fast-compare';
import Spinner from '@/components/elements/Spinner';
import Features from '@feature/Features';
import Console from '@/components/server/console/Console';
import StatGraphs from '@/components/server/console/StatGraphs';
import PowerButtons from '@/components/server/console/PowerButtons';
import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
import { Alert } from '@/components/elements/alert';
import StatGraphs from '@/components/server/console/StatGraphs';
import Features from '@feature/Features';
import { ServerContext } from '@/state/server';
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
const ServerConsoleContainer = () => {
const name = ServerContext.useStoreState((state) => state.server.data!.name);
const description = ServerContext.useStoreState((state) => state.server.data!.description);
const isInstalling = ServerContext.useStoreState((state) => state.server.isInstalling);
const isTransferring = ServerContext.useStoreState((state) => state.server.data!.isTransferring);
const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual);
const isNodeUnderMaintenance = ServerContext.useStoreState((state) => state.server.data!.isNodeUnderMaintenance);
function ServerConsoleContainer() {
const name = ServerContext.useStoreState(state => state.server.data!.name);
const description = ServerContext.useStoreState(state => state.server.data!.description);
const isInstalling = ServerContext.useStoreState(state => state.server.isInstalling);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
const eggFeatures = ServerContext.useStoreState(state => state.server.data!.eggFeatures, isEqual);
const isNodeUnderMaintenance = ServerContext.useStoreState(state => state.server.data!.isNodeUnderMaintenance);
return (
<ServerContentBlock title={'Console'}>
@ -59,6 +60,6 @@ const ServerConsoleContainer = () => {
<Features enabled={eggFeatures} />
</ServerContentBlock>
);
};
}
export default memo(ServerConsoleContainer, isEqual);

50
resources/scripts/components/server/console/ServerDetailsBlock.tsx
View file

@ -1,4 +1,3 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
faClock,
faCloudDownloadAlt,
@ -8,18 +7,21 @@ import {
faMicrochip,
faWifi,
} from '@fortawesome/free-solid-svg-icons';
import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
import { ServerContext } from '@/state/server';
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { SocketEvent, SocketRequest } from '@/components/server/events';
import UptimeDuration from '@/components/server/UptimeDuration';
import StatBlock from '@/components/server/console/StatBlock';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
import classNames from 'classnames';
import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
import { capitalize } from '@/lib/strings';
import { ServerContext } from '@/state/server';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;
const getBackgroundColor = (value: number, max: number | null): string | undefined => {
function getBackgroundColor(value: number, max: number | null): string | undefined {
const delta = !max ? 0 : value / max;
if (delta > 0.8) {
@ -30,22 +32,24 @@ const getBackgroundColor = (value: number, max: number | null): string | undefin
}
return undefined;
};
}
const Limit = ({ limit, children }: { limit: string | null; children: React.ReactNode }) => (
<>
{children}
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
</>
);
function Limit({ limit, children }: { limit: string | null; children: ReactNode }) {
return (
<>
{children}
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
</>
);
}
const ServerDetailsBlock = ({ className }: { className?: string }) => {
function ServerDetailsBlock({ className }: { className?: string }) {
const [stats, setStats] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
const status = ServerContext.useStoreState((state) => state.status.value);
const connected = ServerContext.useStoreState((state) => state.socket.connected);
const instance = ServerContext.useStoreState((state) => state.socket.instance);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const status = ServerContext.useStoreState(state => state.status.value);
const connected = ServerContext.useStoreState(state => state.socket.connected);
const instance = ServerContext.useStoreState(state => state.socket.instance);
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const textLimits = useMemo(
() => ({
@ -53,11 +57,11 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
memory: limits?.memory ? bytesToString(mbToBytes(limits.memory)) : null,
disk: limits?.disk ? bytesToString(mbToBytes(limits.disk)) : null,
}),
[limits]
[limits],
);
const allocation = ServerContext.useStoreState((state) => {
const match = state.server.data!.allocations.find((allocation) => allocation.isDefault);
const allocation = ServerContext.useStoreState(state => {
const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
return !match ? 'n/a' : `${match.alias || ip(match.ip)}:${match.port}`;
});
@ -70,7 +74,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
instance.send(SocketRequest.SEND_STATS);
}, [instance, connected]);
useWebsocketEvent(SocketEvent.STATS, (data) => {
useWebsocketEvent(SocketEvent.STATS, data => {
let stats: any = {};
try {
stats = JSON.parse(data);
@ -135,6 +139,6 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
</StatBlock>
</div>
);
};
}
export default ServerDetailsBlock;

20
resources/scripts/components/server/console/StatBlock.tsx
View file

@ -1,21 +1,23 @@
import React from 'react';
import Icon from '@/components/elements/Icon';
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';
import styles from './style.module.css';
import useFitText from 'use-fit-text';
import type { ReactNode } from 'react';
import { useFitText } from '@flyyer/use-fit-text';
import CopyOnClick from '@/components/elements/CopyOnClick';
import Icon from '@/components/elements/Icon';
import styles from './style.module.css';
interface StatBlockProps {
title: string;
copyOnClick?: string;
color?: string | undefined;
icon: IconDefinition;
children: React.ReactNode;
children: ReactNode;
className?: string;
}
export default ({ title, copyOnClick, icon, color, className, children }: StatBlockProps) => {
function StatBlock({ title, copyOnClick, icon, color, className, children }: StatBlockProps) {
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
return (
@ -44,4 +46,6 @@ export default ({ title, copyOnClick, icon, color, className, children }: StatBl
</div>
</CopyOnClick>
);
};
}
export default StatBlock;

6
resources/scripts/components/server/console/StatGraphs.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import { useEffect, useRef } from 'react';
import { ServerContext } from '@/state/server';
import { SocketEvent } from '@/components/server/events';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
@ -12,8 +12,8 @@ import ChartBlock from '@/components/server/console/ChartBlock';
import Tooltip from '@/components/elements/tooltip/Tooltip';
export default () => {
const status = ServerContext.useStoreState((state) => state.status.value);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const status = ServerContext.useStoreState(state => state.status.value);
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const previous = useRef<Record<'tx' | 'rx', number>>({ tx: -1, rx: -1 });
const cpu = useChartTickLabel('CPU', limits.cpu, '%', 2);

28
resources/scripts/components/server/console/chart.ts
View file

@ -71,13 +71,14 @@ const options: ChartOptions<'line'> = {
};
function getOptions(opts?: DeepPartial<ChartOptions<'line'>> | undefined): ChartOptions<'line'> {
return deepmerge(options, opts || {});
// @ts-expect-error go away
return deepmerge(options, opts ?? {});
}
type ChartDatasetCallback = (value: ChartDataset<'line'>, index: number) => ChartDataset<'line'>;
function getEmptyData(label: string, sets = 1, callback?: ChartDatasetCallback | undefined): ChartData<'line'> {
const next = callback || ((value) => value);
const next = callback || (value => value);
return {
labels: Array(20)
@ -94,8 +95,8 @@ function getEmptyData(label: string, sets = 1, callback?: ChartDatasetCallback |
borderColor: theme('colors.cyan.400'),
backgroundColor: hexToRgba(theme('colors.cyan.700'), 0.5),
},
index
)
index,
),
),
};
}
@ -110,30 +111,31 @@ interface UseChartOptions {
function useChart(label: string, opts?: UseChartOptions) {
const options = getOptions(
typeof opts?.options === 'number' ? { scales: { y: { min: 0, suggestedMax: opts.options } } } : opts?.options
typeof opts?.options === 'number' ? { scales: { y: { min: 0, suggestedMax: opts.options } } } : opts?.options,
);
const [data, setData] = useState(getEmptyData(label, opts?.sets || 1, opts?.callback));
const push = (items: number | null | (number | null)[]) =>
setData((state) =>
setData(state =>
merge(state, {
datasets: (Array.isArray(items) ? items : [items]).map((item, index) => ({
...state.datasets[index],
data: state.datasets[index].data
.slice(1)
.concat(typeof item === 'number' ? Number(item.toFixed(2)) : item),
data:
state.datasets[index]?.data
?.slice(1)
?.concat(typeof item === 'number' ? Number(item.toFixed(2)) : item) ?? [],
})),
})
}),
);
const clear = () =>
setData((state) =>
setData(state =>
merge(state, {
datasets: state.datasets.map((value) => ({
datasets: state.datasets.map(value => ({
...value,
data: Array(20).fill(-5),
})),
})
}),
);
return { props: { data, options }, push, clear };

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Modal from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
@ -23,17 +23,17 @@ const schema = object().shape({
.max(48, 'Database name must not exceed 48 characters.')
.matches(
/^[\w\-.]{3,48}$/,
'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.'
'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.',
),
connectionsFrom: string().matches(/^[\w\-/.%:]+$/, 'A valid host address must be provided.'),
});
export default () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { addError, clearFlashes } = useFlash();
const [visible, setVisible] = useState(false);
const appendDatabase = ServerContext.useStoreActions((actions) => actions.databases.appendDatabase);
const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase);
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('database:create');
@ -41,11 +41,11 @@ export default () => {
databaseName: values.databaseName,
connectionsFrom: values.connectionsFrom || '%',
})
.then((database) => {
.then(database => {
appendDatabase(database);
setVisible(false);
})
.catch((error) => {
.catch(error => {
addError({ key: 'database:create', message: httpErrorToHuman(error) });
setSubmitting(false);
});

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDatabase, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import Modal from '@/components/elements/Modal';
@ -26,13 +26,13 @@ interface Props {
}
export default ({ database, className }: Props) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { addError, clearFlashes } = useFlash();
const [visible, setVisible] = useState(false);
const [connectionVisible, setConnectionVisible] = useState(false);
const appendDatabase = ServerContext.useStoreActions((actions) => actions.databases.appendDatabase);
const removeDatabase = ServerContext.useStoreActions((actions) => actions.databases.removeDatabase);
const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase);
const removeDatabase = ServerContext.useStoreActions(actions => actions.databases.removeDatabase);
const jdbcConnectionString = `jdbc:mysql://${database.username}${
database.password ? `:${encodeURIComponent(database.password)}` : ''
@ -44,14 +44,14 @@ export default ({ database, className }: Props) => {
.oneOf([database.name.split('_', 2)[1], database.name], 'The database name must be provided.'),
});
const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
const submit = (_: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
clearFlashes();
deleteServerDatabase(uuid, database.id)
.then(() => {
setVisible(false);
setTimeout(() => removeDatabase(database.id), 150);
})
.catch((error) => {
.catch(error => {
console.error(error);
setSubmitting(false);
addError({ key: 'database:delete', message: httpErrorToHuman(error) });

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import getServerDatabases from '@/api/server/databases/getServerDatabases';
import { ServerContext } from '@/state/server';
import { httpErrorToHuman } from '@/api/http';
@ -9,27 +9,27 @@ import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseBu
import Can from '@/components/elements/Can';
import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro';
import Fade from '@/components/elements/Fade';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { useDeepMemoize } from '@/plugins/useDeepMemoize';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
export default () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const databaseLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.databases);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const databaseLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.databases);
const { addError, clearFlashes } = useFlash();
const [loading, setLoading] = useState(true);
const databases = useDeepMemoize(ServerContext.useStoreState((state) => state.databases.data));
const setDatabases = ServerContext.useStoreActions((state) => state.databases.setDatabases);
const databases = useDeepMemoize(ServerContext.useStoreState(state => state.databases.data));
const setDatabases = ServerContext.useStoreActions(state => state.databases.setDatabases);
useEffect(() => {
setLoading(!databases.length);
clearFlashes('databases');
getServerDatabases(uuid)
.then((databases) => setDatabases(databases))
.catch((error) => {
.then(databases => setDatabases(databases))
.catch(error => {
console.error(error);
addError({ key: 'databases', message: httpErrorToHuman(error) });
})
@ -42,7 +42,7 @@ export default () => {
{!databases.length && loading ? (
<Spinner size={'large'} centered />
) : (
<Fade timeout={150}>
<FadeTransition duration="duration-150" show>
<>
{databases.length > 0 ? (
databases.map((database, index) => (
@ -73,7 +73,7 @@ export default () => {
</div>
</Can>
</>
</Fade>
</FadeTransition>
)}
</ServerContentBlock>
);

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
@ -11,7 +11,7 @@ import tw from 'twin.macro';
export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (database: ServerDatabase) => void }) => {
const [loading, setLoading] = useState(false);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const server = ServerContext.useStoreState((state) => state.server.data!);
const server = ServerContext.useStoreState(state => state.server.data!);
if (!databaseId) {
return null;
@ -22,8 +22,8 @@ export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (datab
clearFlashes();
rotateDatabasePassword(server.uuid, databaseId)
.then((database) => onUpdate(database))
.catch((error) => {
.then(database => onUpdate(database))
.catch(error => {
console.error(error);
addFlash({
type: 'error',

14
resources/scripts/components/server/features/Features.tsx
View file

@ -1,21 +1,23 @@
import React, { useMemo } from 'react';
import type { ComponentType } from 'react';
import { Suspense, useMemo } from 'react';
import features from './index';
import { getObjectKeys } from '@/lib/objects';
type ListItems = [string, React.ComponentType][];
type ListItems = [string, ComponentType][];
export default ({ enabled }: { enabled: string[] }) => {
const mapped: ListItems = useMemo(() => {
return getObjectKeys(features)
.filter((key) => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
.reduce((arr, key) => [...arr, [key, features[key]]], [] as ListItems);
.filter(key => enabled.map(v => v.toLowerCase()).includes(key.toLowerCase()))
.reduce((arr, key) => [...arr, [key, features[key]]] as ListItems, [] as ListItems);
}, [enabled]);
return (
<React.Suspense fallback={null}>
<Suspense fallback={null}>
{mapped.map(([key, Component]) => (
<Component key={key} />
))}
</React.Suspense>
</Suspense>
);
};

12
resources/scripts/components/server/features/GSLTokenModalFeature.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import Modal from '@/components/elements/Modal';
import tw from 'twin.macro';
@ -18,10 +18,10 @@ const GSLTokenModalFeature = () => {
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const status = ServerContext.useStoreState((state) => state.status.value);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const status = ServerContext.useStoreState(state => state.status.value);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
useEffect(() => {
if (!connected || !instance || status === 'running') return;
@ -29,7 +29,7 @@ const GSLTokenModalFeature = () => {
const errors = ['(gsl token expired)', '(account not found)'];
const listener = (line: string) => {
if (errors.some((p) => line.toLowerCase().includes(p))) {
if (errors.some(p => line.toLowerCase().includes(p))) {
setVisible(true);
}
};
@ -54,7 +54,7 @@ const GSLTokenModalFeature = () => {
setLoading(false);
setVisible(false);
})
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'feature:gslToken', error });
})

22
resources/scripts/components/server/features/JavaVersionModalFeature.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import Modal from '@/components/elements/Modal';
import tw from 'twin.macro';
@ -26,25 +26,25 @@ const JavaVersionModalFeature = () => {
const [loading, setLoading] = useState(false);
const [selectedVersion, setSelectedVersion] = useState('');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const status = ServerContext.useStoreState((state) => state.status.value);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const status = ServerContext.useStoreState(state => state.status.value);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { instance } = ServerContext.useStoreState((state) => state.socket);
const { instance } = ServerContext.useStoreState(state => state.socket);
const { data, isValidating, mutate } = getServerStartup(uuid, null, { revalidateOnMount: false });
const { data, isValidating, mutate } = getServerStartup(uuid, undefined, { revalidateOnMount: false });
useEffect(() => {
if (!visible) return;
mutate().then((value) => {
mutate().then(value => {
setSelectedVersion(Object.values(value?.dockerImages || [])[0] || '');
});
}, [visible]);
useWebsocketEvent(SocketEvent.CONSOLE_OUTPUT, (data) => {
useWebsocketEvent(SocketEvent.CONSOLE_OUTPUT, data => {
if (status === 'running') return;
if (MATCH_ERRORS.some((p) => data.toLowerCase().includes(p.toLowerCase()))) {
if (MATCH_ERRORS.some(p => data.toLowerCase().includes(p.toLowerCase()))) {
setVisible(true);
}
});
@ -60,7 +60,7 @@ const JavaVersionModalFeature = () => {
}
setVisible(false);
})
.catch((error) => clearAndAddHttpError({ key: 'feature:javaVersion', error }))
.catch(error => clearAndAddHttpError({ key: 'feature:javaVersion', error }))
.then(() => setLoading(false));
};
@ -86,11 +86,11 @@ const JavaVersionModalFeature = () => {
<Can action={'startup.docker-image'}>
<div css={tw`mt-4`}>
<InputSpinner visible={!data || isValidating}>
<Select disabled={!data} onChange={(e) => setSelectedVersion(e.target.value)}>
<Select disabled={!data} onChange={e => setSelectedVersion(e.target.value)}>
{!data ? (
<option disabled />
) : (
Object.keys(data.dockerImages).map((key) => (
Object.keys(data.dockerImages).map(key => (
<option key={key} value={data.dockerImages[key]}>
{key}
</option>

10
resources/scripts/components/server/features/PIDLimitModalFeature.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import Modal from '@/components/elements/Modal';
import tw from 'twin.macro';
@ -14,10 +14,10 @@ const PIDLimitModalFeature = () => {
const [visible, setVisible] = useState(false);
const [loading] = useState(false);
const status = ServerContext.useStoreState((state) => state.status.value);
const status = ServerContext.useStoreState(state => state.status.value);
const { clearFlashes } = useFlash();
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const isAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const isAdmin = useStoreState(state => state.user.data!.rootAdmin);
useEffect(() => {
if (!connected || !instance || status === 'running') return;
@ -32,7 +32,7 @@ const PIDLimitModalFeature = () => {
];
const listener = (line: string) => {
if (errors.some((p) => line.toLowerCase().includes(p))) {
if (errors.some(p => line.toLowerCase().includes(p))) {
setVisible(true);
}
};

10
resources/scripts/components/server/features/SteamDiskSpaceFeature.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import Modal from '@/components/elements/Modal';
import tw from 'twin.macro';
@ -12,10 +12,10 @@ const SteamDiskSpaceFeature = () => {
const [visible, setVisible] = useState(false);
const [loading] = useState(false);
const status = ServerContext.useStoreState((state) => state.status.value);
const status = ServerContext.useStoreState(state => state.status.value);
const { clearFlashes } = useFlash();
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const isAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const isAdmin = useStoreState(state => state.user.data!.rootAdmin);
useEffect(() => {
if (!connected || !instance || status === 'running') return;
@ -23,7 +23,7 @@ const SteamDiskSpaceFeature = () => {
const errors = ['steamcmd needs 250mb of free disk space to update', '0x202 after update job'];
const listener = (line: string) => {
if (errors.some((p) => line.toLowerCase().includes(p))) {
if (errors.some(p => line.toLowerCase().includes(p))) {
setVisible(true);
}
};

12
resources/scripts/components/server/features/eula/EulaModalFeature.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import Modal from '@/components/elements/Modal';
import tw from 'twin.macro';
@ -12,10 +12,10 @@ const EulaModalFeature = () => {
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const status = ServerContext.useStoreState((state) => state.status.value);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const status = ServerContext.useStoreState(state => state.status.value);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
useEffect(() => {
if (!connected || !instance || status === 'running') return;
@ -46,7 +46,7 @@ const EulaModalFeature = () => {
setLoading(false);
setVisible(false);
})
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'feature:eula', error });
})
@ -72,7 +72,7 @@ const EulaModalFeature = () => {
target={'_blank'}
css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
rel={'noreferrer noopener'}
href='https://account.mojang.com/documents/minecraft_eula'
href="https://account.mojang.com/documents/minecraft_eula"
>
Minecraft&reg; EULA
</a>

25
resources/scripts/components/server/files/ChmodFileModal.tsx
View file

@ -1,6 +1,5 @@
import { fileBitsToString } from '@/helpers';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
@ -22,29 +21,29 @@ interface File {
type OwnProps = RequiredModalProps & { files: File[] };
const ChmodFileModal = ({ files, ...props }: OwnProps) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const submit = ({ mode }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
const submit = async ({ mode }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
clearFlashes('files');
mutate(
(data) =>
data.map((f) =>
f.name === files[0].file ? { ...f, mode: fileBitsToString(mode, !f.isFile), modeBits: mode } : f
await mutate(
data =>
data!.map(f =>
f.name === files[0]?.file ? { ...f, mode: fileBitsToString(mode, !f.isFile), modeBits: mode } : f,
),
false
false,
);
const data = files.map((f) => ({ file: f.file, mode: mode }));
const data = files.map(f => ({ file: f.file, mode: mode }));
chmodFiles(uuid, directory, data)
.then((): Promise<any> => (files.length > 0 ? mutate() : Promise.resolve()))
.then(() => setSelectedFiles([]))
.catch((error) => {
.catch(error => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });
@ -53,7 +52,7 @@ const ChmodFileModal = ({ files, ...props }: OwnProps) => {
};
return (
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : files[0].mode || '' }}>
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : files[0]?.mode ?? '' }}>
{({ isSubmitting }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form css={tw`m-0`}>

31
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -1,4 +1,5 @@
import React, { memo, useRef, useState } from 'react';
import { memo, useRef, useState } from 'react';
import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBoxOpen,
@ -14,7 +15,7 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server';
import { join } from 'path';
import { join } from 'pathe';
import deleteFiles from '@/api/server/files/deleteFiles';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import copyFile from '@/api/server/files/copyFile';
@ -25,7 +26,7 @@ import tw from 'twin.macro';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import DropdownMenu from '@/components/elements/DropdownMenu';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import useEventListener from '@/plugins/useEventListener';
import compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles';
@ -37,7 +38,7 @@ type ModalType = 'rename' | 'move' | 'chmod';
const StyledRow = styled.div<{ $danger?: boolean }>`
${tw`p-2 flex items-center rounded`};
${(props) =>
${props =>
props.$danger ? tw`hover:bg-red-100 hover:text-red-700` : tw`hover:bg-neutral-100 hover:text-neutral-700`};
`;
@ -60,10 +61,10 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
const [modal, setModal] = useState<ModalType | null>(null);
const [showConfirmation, setShowConfirmation] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearAndAddHttpError, clearFlashes } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
useEventListener(`pterodactyl:files:ctx:${file.key}`, (e: CustomEvent) => {
if (onClickRef.current) {
@ -71,14 +72,14 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
}
});
const doDeletion = () => {
const doDeletion = async () => {
clearFlashes('files');
// For UI speed, immediately remove the file from the listing before calling the deletion function.
// If the delete actually fails, we'll fetch the current directory contents again automatically.
mutate((files) => files.filter((f) => f.key !== file.key), false);
await mutate(files => files!.filter(f => f.key !== file.key), false);
deleteFiles(uuid, directory, [file.name]).catch((error) => {
deleteFiles(uuid, directory, [file.name]).catch(error => {
mutate();
clearAndAddHttpError({ key: 'files', error });
});
@ -90,7 +91,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
copyFile(uuid, join(directory, file.name))
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -99,11 +100,11 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
clearFlashes('files');
getFileDownloadUrl(uuid, join(directory, file.name))
.then((url) => {
.then(url => {
// @ts-expect-error this is valid
window.location = url;
})
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -113,7 +114,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
compressFiles(uuid, directory, [file.name])
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -123,7 +124,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
decompressFiles(uuid, directory, file.name)
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -141,7 +142,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
</Dialog.Confirm>
<DropdownMenu
ref={onClickRef}
renderToggle={(onClick) => (
renderToggle={onClick => (
<div css={tw`px-4 py-2 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH} />
{modal ? (

68
resources/scripts/components/server/files/FileEditContainer.tsx
View file

@ -1,25 +1,27 @@
import React, { useEffect, useState } from 'react';
import getFileContents from '@/api/server/files/getFileContents';
import type { LanguageDescription } from '@codemirror/language';
import { dirname } from 'pathe';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import tw from 'twin.macro';
import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import getFileContents from '@/api/server/files/getFileContents';
import saveFileContents from '@/api/server/files/saveFileContents';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import { useHistory, useLocation, useParams } from 'react-router';
import FileNameModal from '@/components/server/files/FileNameModal';
import Can from '@/components/elements/Can';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import Can from '@/components/elements/Can';
import Select from '@/components/elements/Select';
import PageContentBlock from '@/components/elements/PageContentBlock';
import { ServerError } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Select from '@/components/elements/Select';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import FileNameModal from '@/components/server/files/FileNameModal';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { Editor } from '@/components/elements/editor';
import modes from '@/modes';
import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { encodePathSegments, hashToPath } from '@/helpers';
import { dirname } from 'path';
import CodemirrorEditor from '@/components/elements/CodemirrorEditor';
export default () => {
const [error, setError] = useState('');
@ -28,13 +30,14 @@ export default () => {
const [content, setContent] = useState('');
const [modalVisible, setModalVisible] = useState(false);
const [mode, setMode] = useState('text/plain');
const [language, setLanguage] = useState<LanguageDescription>();
const history = useHistory();
const { hash } = useLocation();
const navigate = useNavigate();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const setDirectory = ServerContext.useStoreActions((actions) => actions.files.setDirectory);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const { addError, clearFlashes } = useFlash();
let fetchFileContent: null | (() => Promise<string>) = null;
@ -48,7 +51,7 @@ export default () => {
setDirectory(dirname(path));
getFileContents(uuid, path)
.then(setContent)
.catch((error) => {
.catch(error => {
console.error(error);
setError(httpErrorToHuman(error));
})
@ -63,16 +66,16 @@ export default () => {
setLoading(true);
clearFlashes('files:view');
fetchFileContent()
.then((content) => saveFileContents(uuid, name || hashToPath(hash), content))
.then(content => saveFileContents(uuid, name || hashToPath(hash), content))
.then(() => {
if (name) {
history.push(`/server/${id}/files/edit#/${encodePathSegments(name)}`);
navigate(`/server/${id}/files/edit#/${encodePathSegments(name)}`);
return;
}
return Promise.resolve();
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ message: httpErrorToHuman(error), key: 'files:view' });
})
@ -80,17 +83,20 @@ export default () => {
};
if (error) {
return <ServerError message={error} onBack={() => history.goBack()} />;
// TODO: onBack
return <ServerError message={error} />;
}
return (
<PageContentBlock>
<FlashMessageRender byKey={'files:view'} css={tw`mb-4`} />
<ErrorBoundary>
<div css={tw`mb-4`}>
<FileManagerBreadcrumbs withinFileEditor isNewFile={action !== 'edit'} />
</div>
</ErrorBoundary>
{hash.replace(/^#/, '').endsWith('.pteroignore') && (
<div css={tw`mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400`}>
<p css={tw`text-neutral-300 text-sm`}>
@ -102,22 +108,24 @@ export default () => {
</p>
</div>
)}
<FileNameModal
visible={modalVisible}
onDismissed={() => setModalVisible(false)}
onFileNamed={(name) => {
onFileNamed={name => {
setModalVisible(false);
save(name);
}}
/>
<div css={tw`relative`}>
<SpinnerOverlay visible={loading} />
<CodemirrorEditor
mode={mode}
<Editor
filename={hash.replace(/^#/, '')}
onModeChanged={setMode}
initialContent={content}
fetchContent={(value) => {
language={language}
onLanguageChanged={setLanguage}
fetchContent={value => {
fetchFileContent = value;
}}
onContentSaved={() => {
@ -129,16 +137,18 @@ export default () => {
}}
/>
</div>
<div css={tw`flex justify-end mt-4`}>
<div css={tw`flex-1 sm:flex-none rounded bg-neutral-900 mr-4`}>
<Select value={mode} onChange={(e) => setMode(e.currentTarget.value)}>
{modes.map((mode) => (
<Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
{modes.map(mode => (
<option key={`${mode.name}_${mode.mime}`} value={mode.mime}>
{mode.name}
</option>
))}
</Select>
</div>
{action === 'edit' ? (
<Can action={'file.update'}>
<Button css={tw`flex-1 sm:flex-none`} onClick={() => save()}>

18
resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { Fragment, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { NavLink, useLocation } from 'react-router-dom';
import { encodePathSegments, hashToPath } from '@/helpers';
@ -12,8 +12,8 @@ interface Props {
export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
const [file, setFile] = useState<string | null>(null);
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { hash } = useLocation();
useEffect(() => {
@ -28,7 +28,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
const breadcrumbs = (): { name: string; path?: string }[] =>
directory
.split('/')
.filter((directory) => !!directory)
.filter(directory => !!directory)
.map((directory, index, dirs) => {
if (!withinFileEditor && index === dirs.length - 1) {
return { name: directory };
@ -46,7 +46,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
/
{breadcrumbs().map((crumb, index) =>
crumb.path ? (
<React.Fragment key={index}>
<Fragment key={index}>
<NavLink
to={`/server/${id}/files#${encodePathSegments(crumb.path)}`}
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
@ -54,17 +54,17 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
{crumb.name}
</NavLink>
/
</React.Fragment>
</Fragment>
) : (
<span key={index} css={tw`px-1 text-neutral-300`}>
{crumb.name}
</span>
)
),
)}
{file && (
<React.Fragment>
<Fragment>
<span css={tw`px-1 text-neutral-300`}>{file}</span>
</React.Fragment>
</Fragment>
)}
</div>
);

34
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -1,6 +1,8 @@
import React, { useEffect } from 'react';
import type { ChangeEvent } from 'react';
import { useEffect } from 'react';
import tw from 'twin.macro';
import { httpErrorToHuman } from '@/api/http';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import FileObjectRow from '@/components/server/files/FileObjectRow';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
@ -9,7 +11,6 @@ import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
import { NavLink, useLocation } from 'react-router-dom';
import Can from '@/components/elements/Can';
import { ServerError } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import { ServerContext } from '@/state/server';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
@ -22,24 +23,25 @@ import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
import { hashToPath } from '@/helpers';
import style from './style.module.css';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const sortFiles = (files: FileObject[]): FileObject[] => {
const sortedFiles: FileObject[] = files
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (a.isFile === b.isFile ? 0 : a.isFile ? 1 : -1));
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1].name);
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1]?.name);
};
export default () => {
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const { hash } = useLocation();
const { data: files, error, mutate } = useFileManagerSwr();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const clearFlashes = useStoreActions((actions) => actions.flashes.clearFlashes);
const setDirectory = ServerContext.useStoreActions((actions) => actions.files.setDirectory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState((state) => state.files.selectedFiles.length);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
useEffect(() => {
clearFlashes('files');
@ -48,11 +50,11 @@ export default () => {
}, [hash]);
useEffect(() => {
mutate();
void mutate();
}, [directory]);
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map((file) => file.name) || [] : []);
const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map(file => file.name) || [] : []);
};
if (error) {
@ -92,7 +94,7 @@ export default () => {
{!files.length ? (
<p css={tw`text-sm text-neutral-400 text-center`}>This directory seems to be empty.</p>
) : (
<CSSTransition classNames={'fade'} timeout={150} appear in>
<FadeTransition duration="duration-150" appear show>
<div>
{files.length > 250 && (
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
@ -102,12 +104,12 @@ export default () => {
</p>
</div>
)}
{sortFiles(files.slice(0, 250)).map((file) => (
{sortFiles(files.slice(0, 250)).map(file => (
<FileObjectRow key={file.key} file={file} />
))}
<MassActionsBar />
</div>
</CSSTransition>
</FadeTransition>
)}
</>
)}

23
resources/scripts/components/server/files/FileManagerStatus.tsx
View file

@ -1,12 +1,13 @@
import React, { useContext, useEffect } from 'react';
import { ServerContext } from '@/state/server';
import { CloudUploadIcon, XIcon } from '@heroicons/react/solid';
import asDialog from '@/hoc/asDialog';
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
import { useSignal } from '@preact/signals-react';
import { useContext, useEffect } from 'react';
import { Button } from '@/components/elements/button/index';
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import Code from '@/components/elements/Code';
import { useSignal } from '@preact/signals-react';
import asDialog from '@/hoc/asDialog';
import { ServerContext } from '@/state/server';
const svgProps = {
cx: 16,
@ -32,10 +33,10 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
const FileUploadList = () => {
const { close } = useContext(DialogWrapperContext);
const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload);
const clearFileUploads = ServerContext.useStoreActions((actions) => actions.files.clearFileUploads);
const uploads = ServerContext.useStoreState((state) =>
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b))
const removeFileUpload = ServerContext.useStoreActions(actions => actions.files.removeFileUpload);
const clearFileUploads = ServerContext.useStoreActions(actions => actions.files.clearFileUploads);
const uploads = ServerContext.useStoreState(state =>
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b)),
);
return (
@ -74,8 +75,8 @@ const FileUploadListDialog = asDialog({
export default () => {
const open = useSignal(false);
const count = ServerContext.useStoreState((state) => Object.keys(state.files.uploads).length);
const progress = ServerContext.useStoreState((state) => ({
const count = ServerContext.useStoreState(state => Object.keys(state.files.uploads).length);
const progress = ServerContext.useStoreState(state => ({
uploaded: Object.values(state.files.uploads).reduce((count, file) => count + file.loaded, 0),
total: Object.values(state.files.uploads).reduce((count, file) => count + file.total, 0),
}));

5
resources/scripts/components/server/files/FileNameModal.tsx
View file

@ -1,10 +1,9 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import Field from '@/components/elements/Field';
import { ServerContext } from '@/state/server';
import { join } from 'path';
import { join } from 'pathe';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
@ -17,7 +16,7 @@ interface Values {
}
export default ({ onFileNamed, onDismissed, ...props }: Props) => {
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
onFileNamed(join(directory, values.fileName));

95
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -1,69 +1,74 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileAlt, faFileArchive, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
import { encodePathSegments } from '@/helpers';
import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
import React, { memo } from 'react';
import type { ReactNode } from 'react';
import { memo } from 'react';
import isEqual from 'react-fast-compare';
import { NavLink } from 'react-router-dom';
import tw from 'twin.macro';
import { join } from 'pathe';
import { encodePathSegments } from '@/helpers';
import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import isEqual from 'react-fast-compare';
import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
import { usePermissions } from '@/plugins/usePermissions';
import { join } from 'path';
import { bytesToString } from '@/lib/formatters';
import { usePermissions } from '@/plugins/usePermissions';
import { ServerContext } from '@/state/server';
import styles from './style.module.css';
const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
function Clickable({ file, children }: { file: FileObject; children: ReactNode }) {
const [canReadContents] = usePermissions(['file.read-content']);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const match = useRouteMatch();
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
return !canReadContents || (file.isFile && !file.isEditable()) ? (
<div className={styles.details}>{children}</div>
) : (
<NavLink
className={styles.details}
to={`${match.url}${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
to={`/server/${id}/files${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
>
{children}
</NavLink>
);
}, isEqual);
}
const FileObjectRow = ({ file }: { file: FileObject }) => (
<div
className={styles.file_row}
key={file.name}
onContextMenu={(e) => {
e.preventDefault();
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
}}
>
<SelectFileCheckbox name={file.name} />
<Clickable file={file}>
<div css={tw`flex-none text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
{file.isFile ? (
<FontAwesomeIcon
icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}
/>
) : (
<FontAwesomeIcon icon={faFolder} />
)}
</div>
<div css={tw`flex-1 truncate`}>{file.name}</div>
{file.isFile && <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>{bytesToString(file.size)}</div>}
<div css={tw`w-1/5 text-right mr-4 hidden md:block`} title={file.modifiedAt.toString()}>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48
? format(file.modifiedAt, 'MMM do, yyyy h:mma')
: formatDistanceToNow(file.modifiedAt, { addSuffix: true })}
</div>
</Clickable>
<FileDropdownMenu file={file} />
</div>
);
const MemoizedClickable = memo(Clickable, isEqual);
function FileObjectRow({ file }: { file: FileObject }) {
return (
<div
className={styles.file_row}
key={file.name}
onContextMenu={e => {
e.preventDefault();
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
}}
>
<SelectFileCheckbox name={file.name} />
<MemoizedClickable file={file}>
<div css={tw`flex-none text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
{file.isFile ? (
<FontAwesomeIcon
icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}
/>
) : (
<FontAwesomeIcon icon={faFolder} />
)}
</div>
<div css={tw`flex-1 truncate`}>{file.name}</div>
{file.isFile && <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>{bytesToString(file.size)}</div>}
<div css={tw`w-1/5 text-right mr-4 hidden md:block`} title={file.modifiedAt.toString()}>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48
? format(file.modifiedAt, 'MMM do, yyyy h:mma')
: formatDistanceToNow(file.modifiedAt, { addSuffix: true })}
</div>
</MemoizedClickable>
<FileDropdownMenu file={file} />
</div>
);
}
export default memo(FileObjectRow, (prevProps, nextProps) => {
/* eslint-disable @typescript-eslint/no-unused-vars */

52
resources/scripts/components/server/files/MassActionsBar.tsx
View file

@ -1,19 +1,19 @@
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import Fade from '@/components/elements/Fade';
import { useEffect, useState } from 'react';
import compressFiles from '@/api/server/files/compressFiles';
import deleteFiles from '@/api/server/files/deleteFiles';
import { Button } from '@/components/elements/button';
import { Dialog } from '@/components/elements/dialog';
import Portal from '@/components/elements/Portal';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import useFlash from '@/plugins/useFlash';
import compressFiles from '@/api/server/files/compressFiles';
import { ServerContext } from '@/state/server';
import deleteFiles from '@/api/server/files/deleteFiles';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import Portal from '@/components/elements/Portal';
import { Dialog } from '@/components/elements/dialog';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const MassActionsBar = () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
@ -21,10 +21,10 @@ const MassActionsBar = () => {
const [loadingMessage, setLoadingMessage] = useState('');
const [showConfirm, setShowConfirm] = useState(false);
const [showMove, setShowMove] = useState(false);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const selectedFiles = ServerContext.useStoreState((state) => state.files.selectedFiles);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const selectedFiles = ServerContext.useStoreState(state => state.files.selectedFiles);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
useEffect(() => {
if (!loading) setLoadingMessage('');
@ -38,7 +38,7 @@ const MassActionsBar = () => {
compressFiles(uuid, directory, selectedFiles)
.then(() => mutate())
.then(() => setSelectedFiles([]))
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setLoading(false));
};
@ -49,12 +49,12 @@ const MassActionsBar = () => {
setLoadingMessage('Deleting files...');
deleteFiles(uuid, directory, selectedFiles)
.then(() => {
mutate((files) => files.filter((f) => selectedFiles.indexOf(f.name) < 0), false);
.then(async () => {
await mutate(files => files!.filter(f => selectedFiles.indexOf(f.name) < 0), false);
setSelectedFiles([]);
})
.catch((error) => {
mutate();
.catch(async error => {
await mutate();
clearAndAddHttpError({ key: 'files', error });
})
.then(() => setLoading(false));
@ -62,7 +62,7 @@ const MassActionsBar = () => {
return (
<>
<div css={tw`pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center`}>
<div className="pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center">
<SpinnerOverlay visible={loading} size={'large'} fixed>
{loadingMessage}
</SpinnerOverlay>
@ -73,12 +73,12 @@ const MassActionsBar = () => {
onClose={() => setShowConfirm(false)}
onConfirmed={onClickConfirmDeletion}
>
<p className={'mb-2'}>
<p className="mb-2">
Are you sure you want to delete&nbsp;
<span className={'font-semibold text-gray-50'}>{selectedFiles.length} files</span>? This is a
<span className="font-semibold text-gray-50">{selectedFiles.length} files</span>? This is a
permanent action and the files cannot be recovered.
</p>
{selectedFiles.slice(0, 15).map((file) => (
{selectedFiles.slice(0, 15).map(file => (
<li key={file}>{file}</li>
))}
{selectedFiles.length > 15 && <li>and {selectedFiles.length - 15} others</li>}
@ -93,16 +93,16 @@ const MassActionsBar = () => {
/>
)}
<Portal>
<div className={'fixed bottom-0 mb-6 flex justify-center w-full z-50'}>
<Fade timeout={75} in={selectedFiles.length > 0} unmountOnExit>
<div css={tw`flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50`}>
<div className="fixed bottom-0 mb-6 flex justify-center w-full z-50">
<FadeTransition duration="duration-75" show={selectedFiles.length > 0} appear unmount>
<div className="flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50">
<Button onClick={() => setShowMove(true)}>Move</Button>
<Button onClick={onClickCompress}>Archive</Button>
<Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>
Delete
</Button.Danger>
</div>
</Fade>
</FadeTransition>
</div>
</Portal>
</div>

12
resources/scripts/components/server/files/NewDirectoryButton.tsx
View file

@ -1,8 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import { join } from 'path';
import { join } from 'pathe';
import { object, string } from 'yup';
import createDirectory from '@/api/server/files/createDirectory';
import tw from 'twin.macro';
@ -42,8 +42,8 @@ const generateDirectoryData = (name: string): FileObject => ({
const NewDirectoryDialog = asDialog({
title: 'Create Directory',
})(() => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { mutate } = useFileManagerSwr();
const { close } = useContext(DialogWrapperContext);
@ -57,9 +57,9 @@ const NewDirectoryDialog = asDialog({
const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
createDirectory(uuid, directory, directoryName)
.then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false))
.then(() => mutate(data => [...data!, generateDirectoryData(directoryName)], false))
.then(() => close())
.catch((error) => {
.catch(error => {
setSubmitting(false);
clearAndAddHttpError(error);
});

19
resources/scripts/components/server/files/RenameFileModal.tsx
View file

@ -1,8 +1,7 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import { join } from 'path';
import { join } from 'pathe';
import renameFiles from '@/api/server/files/renameFiles';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
@ -17,11 +16,11 @@ interface FormikValues {
type OwnProps = RequiredModalProps & { files: string[]; useMoveTerminology?: boolean };
const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const submit = ({ name }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
clearFlashes('files');
@ -30,24 +29,24 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
if (files.length === 1) {
if (!useMoveTerminology && len === 1) {
// Rename the file within this directory.
mutate((data) => data.map((f) => (f.name === files[0] ? { ...f, name } : f)), false);
mutate(data => data!.map(f => (f.name === files[0] ? { ...f, name } : f)), false);
} else if (useMoveTerminology || len > 1) {
// Remove the file from this directory since they moved it elsewhere.
mutate((data) => data.filter((f) => f.name !== files[0]), false);
mutate(data => data!.filter(f => f.name !== files[0]), false);
}
}
let data;
if (useMoveTerminology && files.length > 1) {
data = files.map((f) => ({ from: f, to: join(name, f) }));
data = files.map(f => ({ from: f, to: join(name, f) }));
} else {
data = files.map((f) => ({ from: f, to: name }));
data = files.map(f => ({ from: f, to: name }));
}
renameFiles(uuid, directory, data)
.then((): Promise<any> => (files.length > 0 ? mutate() : Promise.resolve()))
.then(() => setSelectedFiles([]))
.catch((error) => {
.catch(error => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });

10
resources/scripts/components/server/files/SelectFileCheckbox.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import * as React from 'react';
import tw from 'twin.macro';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import Input from '@/components/elements/Input';
export const FileActionCheckbox = styled(Input)`
@ -15,9 +15,9 @@ export const FileActionCheckbox = styled(Input)`
`;
export default ({ name }: { name: string }) => {
const isChecked = ServerContext.useStoreState((state) => state.files.selectedFiles.indexOf(name) >= 0);
const appendSelectedFile = ServerContext.useStoreActions((actions) => actions.files.appendSelectedFile);
const removeSelectedFile = ServerContext.useStoreActions((actions) => actions.files.removeSelectedFile);
const isChecked = ServerContext.useStoreState(state => state.files.selectedFiles.indexOf(name) >= 0);
const appendSelectedFile = ServerContext.useStoreActions(actions => actions.files.appendSelectedFile);
const removeSelectedFile = ServerContext.useStoreActions(actions => actions.files.removeSelectedFile);
return (
<label css={tw`flex-none px-4 py-2 absolute self-center z-30 cursor-pointer`}>

57
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -1,25 +1,26 @@
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { useEffect, useRef } from 'react';
import tw from 'twin.macro';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { Button } from '@/components/elements/button/index';
import React, { useEffect, useRef } from 'react';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import Portal from '@/components/elements/Portal';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
import type { WithClassname } from '@/components/types';
import useEventListener from '@/plugins/useEventListener';
import { useFlashKey } from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types';
import Portal from '@/components/elements/Portal';
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
function isFileOrDirectory(event: DragEvent): boolean {
if (!event.dataTransfer?.types) {
return false;
}
return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files');
return event.dataTransfer.types.some(value => value.toLowerCase() === 'files');
}
export default ({ className }: WithClassname) => {
@ -31,22 +32,22 @@ export default ({ className }: WithClassname) => {
const { mutate } = useFileManagerSwr();
const { addError, clearAndAddHttpError } = useFlashKey('files');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { clearFileUploads, removeFileUpload, pushFileUpload, setUploadProgress } = ServerContext.useStoreActions(
(actions) => actions.files
actions => actions.files,
);
useEventListener(
'dragenter',
(e) => {
e => {
e.preventDefault();
e.stopPropagation();
if (isFileOrDirectory(e)) {
visible.value = true;
}
},
{ capture: true }
{ capture: true },
);
useEventListener('dragexit', () => (visible.value = false), { capture: true });
@ -67,16 +68,16 @@ export default ({ className }: WithClassname) => {
const onFileSubmission = (files: FileList) => {
clearAndAddHttpError();
const list = Array.from(files);
if (list.some((file) => !file.size || (!file.type && file.size === 4096))) {
if (list.some(file => !file.size || (!file.type && file.size === 4096))) {
return addError('Folder uploads are not supported at this time.', 'Error');
}
const uploads = list.map((file) => {
const uploads = list.map(file => {
const controller = new AbortController();
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
return () =>
getFileUploadUrl(uuid).then((url) =>
getFileUploadUrl(uuid).then(url =>
axios.post(
url,
{ files: file },
@ -84,15 +85,15 @@ export default ({ className }: WithClassname) => {
signal: controller.signal,
headers: { 'Content-Type': 'multipart/form-data' },
params: { directory },
onUploadProgress: (data) => onUploadProgress(data, file.name),
}
)
onUploadProgress: data => onUploadProgress(data, file.name),
},
),
);
});
Promise.all(uploads.map((fn) => fn()))
Promise.all(uploads.map(fn => fn()))
.then(() => mutate())
.catch((error) => {
.catch(error => {
clearFileUploads();
clearAndAddHttpError(error);
});
@ -101,16 +102,18 @@ export default ({ className }: WithClassname) => {
return (
<>
<Portal>
<Fade appear in={visible.value} timeout={75} key={'upload_modal_mask'} unmountOnExit>
<FadeTransition show={visible.value} duration="duration-75" key="upload_modal_mask" appear unmount>
<ModalMask
onClick={() => (visible.value = false)}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
onDragOver={e => e.preventDefault()}
onDrop={e => {
e.preventDefault();
e.stopPropagation();
visible.value = false;
if (!e.dataTransfer?.files.length) return;
if (!e.dataTransfer?.files.length) {
return;
}
onFileSubmission(e.dataTransfer.files);
}}
@ -128,13 +131,13 @@ export default ({ className }: WithClassname) => {
</div>
</div>
</ModalMask>
</Fade>
</FadeTransition>
</Portal>
<input
type={'file'}
ref={fileUploadInput}
css={tw`hidden`}
onChange={(e) => {
onChange={e => {
if (!e.currentTarget.files) return;
onFileSubmission(e.currentTarget.files);

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

@ -1,4 +1,4 @@
import React, { memo, useCallback, useState } from 'react';
import { memo, useCallback, useState } from 'react';
import isEqual from 'react-fast-compare';
import tw from 'twin.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -9,7 +9,7 @@ import Can from '@/components/elements/Can';
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 styled from 'styled-components';
import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import { useFlashKey } from '@/plugins/useFlash';
@ -32,11 +32,11 @@ interface Props {
const AllocationRow = ({ allocation }: Props) => {
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = getServerAllocations();
const onNotesChanged = useCallback((id: number, notes: string) => {
mutate((data) => data?.map((a) => (a.id === id ? { ...a, notes } : a)), false);
mutate(data => data?.map(a => (a.id === id ? { ...a, notes } : a)), false);
}, []);
const setAllocationNotes = debounce((notes: string) => {
@ -45,15 +45,15 @@ const AllocationRow = ({ allocation }: Props) => {
setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes))
.catch((error) => clearAndAddHttpError(error))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
}, 750);
const setPrimaryAllocation = () => {
clearFlashes();
mutate((data) => data?.map((a) => ({ ...a, isDefault: a.id === allocation.id })), false);
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id).catch((error) => {
setPrimaryServerAllocation(uuid, allocation.id).catch(error => {
clearAndAddHttpError(error);
mutate();
});
@ -90,7 +90,7 @@ const AllocationRow = ({ allocation }: Props) => {
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={(e) => setAllocationNotes(e.currentTarget.value)}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import Icon from '@/components/elements/Icon';
@ -16,8 +16,8 @@ interface Props {
const DeleteAllocationButton = ({ allocation }: Props) => {
const [confirm, setConfirm] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { mutate } = getServerAllocations();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
@ -25,10 +25,10 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const deleteAllocation = () => {
clearFlashes();
mutate((data) => data?.filter((a) => a.id !== allocation), false);
setServerFromState((s) => ({ ...s, allocations: s.allocations.filter((a) => a.id !== allocation) }));
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) => {
deleteServerAllocation(uuid, allocation).catch(error => {
clearAndAddHttpError(error);
mutate();
});

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import { useFlashKey } from '@/plugins/useFlash';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
@ -15,10 +15,10 @@ import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
const NetworkContainer = () => {
const [loading, setLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const allocationLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.allocations);
const allocations = ServerContext.useStoreState((state) => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations);
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const { data, error, mutate } = getServerAllocations();
@ -34,7 +34,7 @@ const NetworkContainer = () => {
useDeepCompareEffect(() => {
if (!data) return;
setServerFromState((state) => ({ ...state, allocations: data }));
setServerFromState(state => ({ ...state, allocations: data }));
}, [data]);
const onCreateAllocation = () => {
@ -42,11 +42,11 @@ const NetworkContainer = () => {
setLoading(true);
createServerAllocation(uuid)
.then((allocation) => {
setServerFromState((s) => ({ ...s, allocations: s.allocations.concat(allocation) }));
.then(allocation => {
setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
return mutate(data?.concat(allocation), false);
})
.catch((error) => clearAndAddHttpError(error))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
};
@ -56,7 +56,7 @@ const NetworkContainer = () => {
<Spinner size={'large'} centered />
) : (
<>
{data.map((allocation) => (
{data.map(allocation => (
<AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
))}
{allocationLimit > 0 && (

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import deleteSchedule from '@/api/server/schedules/deleteSchedule';
import { ServerContext } from '@/state/server';
import { Actions, useStoreActions } from 'easy-peasy';
@ -16,7 +16,7 @@ interface Props {
export default ({ scheduleId, onDeleted }: Props) => {
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const onDelete = () => {
@ -27,7 +27,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
setIsLoading(false);
onDeleted();
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'schedules', message: httpErrorToHuman(error) });

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

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import Field from '@/components/elements/Field';
import { Form, Formik, FormikHelpers } from 'formik';
@ -34,8 +34,8 @@ const EditScheduleModal = ({ schedule }: Props) => {
const { addError, clearFlashes } = useFlash();
const { dismiss } = useContext(ModalContext);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const [showCheatsheet, setShowCheetsheet] = useState(false);
useEffect(() => {
@ -59,12 +59,12 @@ const EditScheduleModal = ({ schedule }: Props) => {
onlyWhenOnline: values.onlyWhenOnline,
isActive: values.enabled,
})
.then((schedule) => {
.then(schedule => {
setSubmitting(false);
appendSchedule(schedule);
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setSubmitting(false);
@ -114,7 +114,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
description={'Show the cron cheatsheet for some examples.'}
label={'Show Cheatsheet'}
defaultChecked={showCheatsheet}
onChange={() => setShowCheetsheet((s) => !s)}
onChange={() => setShowCheetsheet(s => !s)}
/>
{showCheatsheet && (
<div css={tw`block md:flex w-full`}>

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
import { Button } from '@/components/elements/button/index';

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

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import { useCallback, useState } from 'react';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Button } from '@/components/elements/button/index';
import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
@ -10,8 +10,8 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const onTriggerExecute = useCallback(() => {
clearFlashes('schedule');
@ -21,7 +21,7 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
setLoading(false);
appendSchedule({ ...schedule, isProcessing: true });
})
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})

1
resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import tw from 'twin.macro';
export default () => {

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

@ -1,8 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
import { ServerContext } from '@/state/server';
import Spinner from '@/components/elements/Spinner';
import { useHistory, useRouteMatch } from 'react-router-dom';
import FlashMessageRender from '@/components/FlashMessageRender';
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
import { httpErrorToHuman } from '@/api/http';
@ -13,24 +12,23 @@ import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Button } from '@/components/elements/button/index';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { Link } from 'react-router-dom';
export default () => {
const match = useRouteMatch();
const history = useHistory();
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
function ScheduleContainer() {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [loading, setLoading] = useState(true);
const [visible, setVisible] = useState(false);
const schedules = ServerContext.useStoreState((state) => state.schedules.data);
const setSchedules = ServerContext.useStoreActions((actions) => actions.schedules.setSchedules);
const schedules = ServerContext.useStoreState(state => state.schedules.data);
const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules);
useEffect(() => {
clearFlashes('schedules');
getServerSchedules(uuid)
.then((schedules) => setSchedules(schedules))
.catch((error) => {
.then(schedules => setSchedules(schedules))
.catch(error => {
addError({ message: httpErrorToHuman(error), key: 'schedules' });
console.error(error);
})
@ -49,16 +47,13 @@ export default () => {
There are no schedules configured for this server.
</p>
) : (
schedules.map((schedule) => (
schedules.map(schedule => (
// @ts-expect-error go away
<GreyRowBox
as={'a'}
key={schedule.id}
href={`${match.url}/${schedule.id}`}
as={Link}
to={schedule.id}
css={tw`cursor-pointer mb-2 flex-wrap`}
onClick={(e: any) => {
e.preventDefault();
history.push(`${match.url}/${schedule.id}`);
}}
>
<ScheduleRow schedule={schedule} />
</GreyRowBox>
@ -76,4 +71,6 @@ export default () => {
)}
</ServerContentBlock>
);
};
}
export default ScheduleContainer;

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

@ -1,4 +1,3 @@
import React from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import classNames from 'classnames';

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

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -18,10 +18,6 @@ import { format } from 'date-fns';
import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow';
import RunScheduleButton from '@/components/server/schedules/RunScheduleButton';
interface Params {
id: string;
}
const CronBox = ({ title, value }: { title: string; value: string }) => (
<div css={tw`bg-neutral-700 rounded p-3`}>
<p css={tw`text-neutral-300 text-sm`}>{title}</p>
@ -41,21 +37,21 @@ const ActivePill = ({ active }: { active: boolean }) => (
);
export default () => {
const history = useHistory();
const { id: scheduleId } = useParams<Params>();
const { id: scheduleId } = useParams<'id'>();
const navigate = useNavigate();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const [isLoading, setIsLoading] = useState(true);
const [showEditModal, setShowEditModal] = useState(false);
const schedule = ServerContext.useStoreState(
(st) => st.schedules.data.find((s) => s.id === Number(scheduleId)),
isEqual
st => st.schedules.data.find(s => s.id === Number(scheduleId)),
isEqual,
);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
useEffect(() => {
if (schedule?.id === Number(scheduleId)) {
@ -65,8 +61,8 @@ export default () => {
clearFlashes('schedules');
getServerSchedule(uuid, Number(scheduleId))
.then((schedule) => appendSchedule(schedule))
.catch((error) => {
.then(schedule => appendSchedule(schedule))
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})
@ -74,7 +70,7 @@ export default () => {
}, [scheduleId]);
const toggleEditModal = useCallback(() => {
setShowEditModal((s) => !s);
setShowEditModal(s => !s);
}, []);
return (
@ -140,9 +136,9 @@ export default () => {
{schedule.tasks.length > 0
? schedule.tasks
.sort((a, b) =>
a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1
a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1,
)
.map((task) => (
.map(task => (
<ScheduleTaskRow
key={`${schedule.id}_${task.id}`}
task={task}
@ -157,7 +153,7 @@ export default () => {
<Can action={'schedule.delete'}>
<DeleteScheduleButton
scheduleId={schedule.id}
onDeleted={() => history.push(`/server/${id}/schedules`)}
onDeleted={() => navigate(`/server/${id}/schedules`)}
/>
</Can>
{schedule.tasks.length > 0 && (

1
resources/scripts/components/server/schedules/ScheduleRow.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
@ -40,12 +40,12 @@ const getActionDetails = (action: string): [string, any] => {
};
export default ({ schedule, task }: Props) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const onConfirmDeletion = () => {
setIsLoading(true);
@ -54,10 +54,10 @@ export default ({ schedule, task }: Props) => {
.then(() =>
appendSchedule({
...schedule,
tasks: schedule.tasks.filter((t) => t.id !== task.id),
})
tasks: schedule.tasks.filter(t => t.id !== task.id),
}),
)
.catch((error) => {
.catch(error => {
console.error(error);
setIsLoading(false);
addError({ message: httpErrorToHuman(error), key: 'schedules' });

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

@ -1,4 +1,4 @@
import React, { useContext, useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
import { Field as FormikField, Form, Formik, FormikHelpers, useField } from 'formik';
import { ServerContext } from '@/state/server';
@ -35,7 +35,7 @@ interface Values {
const schema = object().shape({
action: string().required().oneOf(['command', 'power', 'backup']),
payload: string().when('action', {
is: (v) => v !== 'backup',
is: (v: string) => v !== 'backup',
then: string().required('A task payload must be provided.'),
otherwise: string(),
}),
@ -68,9 +68,9 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
const { dismiss } = useContext(ModalContext);
const { clearFlashes, addError } = useFlash();
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const backupLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.backups);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const backupLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.backups);
useEffect(() => {
return () => {
@ -88,16 +88,16 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
});
} else {
createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values)
.then((task) => {
let tasks = schedule.tasks.map((t) => (t.id === task.id ? task : t));
if (!schedule.tasks.find((t) => t.id === task.id)) {
.then(task => {
let tasks = schedule.tasks.map(t => (t.id === task.id ? task : t));
if (!schedule.tasks.find(t => t.id === task.id)) {
tasks = [...tasks, task];
}
appendSchedule({ ...schedule, tasks });
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setSubmitting(false);
addError({ message: httpErrorToHuman(error), key: 'schedule:task' });

6
resources/scripts/components/server/settings/ReinstallServerBox.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import reinstallServer from '@/api/server/reinstallServer';
@ -10,7 +10,7 @@ import { Button } from '@/components/elements/button/index';
import { Dialog } from '@/components/elements/dialog';
export default () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [modalVisible, setModalVisible] = useState(false);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@ -24,7 +24,7 @@ export default () => {
message: 'Your server has begun the reinstallation process.',
});
})
.catch((error) => {
.catch(error => {
console.error(error);
addFlash({ key: 'settings', type: 'error', message: httpErrorToHuman(error) });

9
resources/scripts/components/server/settings/RenameServerBox.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { ServerContext } from '@/state/server';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
@ -43,15 +42,15 @@ const RenameServerBox = () => {
};
export default () => {
const server = ServerContext.useStoreState((state) => state.server.data!);
const setServer = ServerContext.useStoreActions((actions) => actions.server.setServer);
const server = ServerContext.useStoreState(state => state.server.data!);
const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('settings');
renameServer(server.uuid, name, description)
.then(() => setServer({ ...server, name, description }))
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'settings', message: httpErrorToHuman(error) });
})
@ -63,7 +62,7 @@ export default () => {
onSubmit={submit}
initialValues={{
name: server.name,
description: server.description,
description: server.description ?? '',
}}
validationSchema={object().shape({
name: string().required().min(1),

11
resources/scripts/components/server/settings/SettingsContainer.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server';
import { useStoreState } from 'easy-peasy';
@ -16,11 +15,11 @@ import { ip } from '@/lib/formatters';
import { Button } from '@/components/elements/button/index';
export default () => {
const username = useStoreState((state) => state.user.data!.username);
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const node = ServerContext.useStoreState((state) => state.server.data!.node);
const sftp = ServerContext.useStoreState((state) => state.server.data!.sftpDetails, isEqual);
const username = useStoreState(state => state.user.data!.username);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const node = ServerContext.useStoreState(state => state.server.data!.node);
const sftp = ServerContext.useStoreState(state => state.server.data!.sftpDetails, isEqual);
return (
<ServerContentBlock title={'Settings'}>

23
resources/scripts/components/server/startup/StartupContainer.tsx
View file

@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import * as React from 'react';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import tw from 'twin.macro';
import VariableBox from '@/components/server/startup/VariableBox';
@ -20,14 +21,14 @@ const StartupContainer = () => {
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const variables = ServerContext.useStoreState(
({ server }) => ({
variables: server.data!.variables,
invocation: server.data!.invocation,
dockerImage: server.data!.dockerImage,
}),
isEqual
isEqual,
);
const { data, error, isValidating, mutate } = getServerStartup(uuid, {
@ -35,11 +36,11 @@ const StartupContainer = () => {
dockerImages: { [variables.dockerImage]: variables.dockerImage },
});
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const isCustomImage =
data &&
!Object.values(data.dockerImages)
.map((v) => v.toLowerCase())
.map(v => v.toLowerCase())
.includes(variables.dockerImage.toLowerCase());
useEffect(() => {
@ -52,7 +53,7 @@ const StartupContainer = () => {
useDeepCompareEffect(() => {
if (!data) return;
setServerFromState((s) => ({
setServerFromState(s => ({
...s,
invocation: data.invocation,
variables: data.variables,
@ -66,14 +67,14 @@ const StartupContainer = () => {
const image = v.currentTarget.value;
setSelectedDockerImage(uuid, image)
.then(() => setServerFromState((s) => ({ ...s, dockerImage: image })))
.catch((error) => {
.then(() => setServerFromState(s => ({ ...s, dockerImage: image })))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'startup:image', error });
})
.then(() => setLoading(false));
},
[uuid]
[uuid],
);
return !data ? (
@ -99,7 +100,7 @@ const StartupContainer = () => {
onChange={updateSelectedDockerImage}
defaultValue={variables.dockerImage}
>
{Object.keys(data.dockerImages).map((key) => (
{Object.keys(data.dockerImages).map(key => (
<option key={data.dockerImages[key]} value={data.dockerImages[key]}>
{key}
</option>
@ -126,7 +127,7 @@ const StartupContainer = () => {
</div>
<h3 css={tw`mt-8 mb-2 text-2xl`}>Variables</h3>
<div css={tw`grid gap-8 md:grid-cols-2`}>
{data.variables.map((variable) => (
{data.variables.map(variable => (
<VariableBox key={variable.envVariable} variable={variable} />
))}
</div>

32
resources/scripts/components/server/startup/VariableBox.tsx
View file

@ -1,4 +1,4 @@
import React, { memo, useState } from 'react';
import { memo, useState } from 'react';
import { ServerEggVariable } from '@/api/server/types';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { usePermissions } from '@/plugins/usePermissions';
@ -22,7 +22,7 @@ interface Props {
const VariableBox = ({ variable }: Props) => {
const FLASH_KEY = `server:startup:${variable.envVariable}`;
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [loading, setLoading] = useState(false);
const [canEdit] = usePermissions(['startup.update']);
const { clearFlashes, clearAndAddHttpError } = useFlash();
@ -35,28 +35,28 @@ const VariableBox = ({ variable }: Props) => {
updateStartupVariable(uuid, variable.envVariable, value)
.then(([response, invocation]) =>
mutate(
(data) => ({
...data,
data => ({
...data!,
invocation,
variables: (data.variables || []).map((v) =>
v.envVariable === response.envVariable ? response : v
variables: (data!.variables || []).map(v =>
v.envVariable === response.envVariable ? response : v,
),
}),
false
)
false,
),
)
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: FLASH_KEY });
clearAndAddHttpError({ key: FLASH_KEY, error });
})
.then(() => setLoading(false));
}, 500);
const useSwitch = variable.rules.some(
(v) => v === 'boolean' || v === 'in:0,1' || v === 'in:1,0' || v === 'in:true,false' || v === 'in:false,true'
v => v === 'boolean' || v === 'in:0,1' || v === 'in:1,0' || v === 'in:true,false' || v === 'in:false,true',
);
const isStringSwitch = variable.rules.some((v) => v === 'string');
const selectValues = variable.rules.find((v) => v.startsWith('in:'))?.split(',') || [];
const isStringSwitch = variable.rules.some(v => v === 'string');
const selectValues = variable.rules.find(v => v.startsWith('in:'))?.split(',') || [];
return (
<TitledGreyBox
@ -95,12 +95,12 @@ const VariableBox = ({ variable }: Props) => {
{selectValues.length > 0 ? (
<>
<Select
onChange={(e) => setVariableValue(e.target.value)}
onChange={e => setVariableValue(e.target.value)}
name={variable.envVariable}
defaultValue={variable.serverValue}
disabled={!canEdit || !variable.isEditable}
>
{selectValues.map((selectValue) => (
{selectValues.map(selectValue => (
<option
key={selectValue.replace('in:', '')}
value={selectValue.replace('in:', '')}
@ -113,7 +113,7 @@ const VariableBox = ({ variable }: Props) => {
) : (
<>
<Input
onKeyUp={(e) => {
onKeyUp={e => {
if (canEdit && variable.isEditable) {
setVariableValue(e.currentTarget.value);
}

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
import { Button } from '@/components/elements/button/index';

34
resources/scripts/components/server/users/EditSubuserModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useRef } from 'react';
import { useContext, useEffect, useRef } from 'react';
import { Subuser } from '@/state/server/subusers';
import { Form, Formik } from 'formik';
import { array, object, string } from 'yup';
@ -29,24 +29,24 @@ interface Values {
const EditSubuserModal = ({ subuser }: Props) => {
const ref = useRef<HTMLHeadingElement>(null);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSubuser = ServerContext.useStoreActions((actions) => actions.subusers.appendSubuser);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
(actions: Actions<ApplicationStore>) => actions.flashes
(actions: Actions<ApplicationStore>) => actions.flashes,
);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const isRootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const permissions = useStoreState((state) => state.permissions.data);
const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const permissions = useStoreState(state => state.permissions.data);
// The currently logged in user's permissions. We're going to filter out any permissions
// that they should not need.
const loggedInPermissions = ServerContext.useStoreState((state) => state.server.permissions);
const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);
const [canEditUser] = usePermissions(subuser ? ['user.update'] : ['user.create']);
// The permissions that can be modified by this user.
const editablePermissions = useDeepCompareMemo(() => {
const cleaned = Object.keys(permissions).map((key) =>
Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)
const cleaned = Object.keys(permissions).map(key =>
Object.keys(permissions[key]?.keys ?? {}).map(pkey => `${key}.${pkey}`),
);
const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));
@ -55,7 +55,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
return list;
}
return list.filter((key) => loggedInPermissions.indexOf(key) >= 0);
return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
}, [isRootAdmin, permissions, loggedInPermissions]);
const submit = (values: Values) => {
@ -63,11 +63,11 @@ const EditSubuserModal = ({ subuser }: Props) => {
clearFlashes('user:edit');
createOrUpdateSubuser(uuid, values, subuser)
.then((subuser) => {
.then(subuser => {
appendSubuser(subuser);
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setPropOverrides(null);
clearAndAddHttpError({ key: 'user:edit', error });
@ -82,7 +82,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
() => () => {
clearFlashes('user:edit');
},
[]
[],
);
return (
@ -137,17 +137,17 @@ const EditSubuserModal = ({ subuser }: Props) => {
)}
<div css={tw`my-6`}>
{Object.keys(permissions)
.filter((key) => key !== 'websocket')
.filter(key => key !== 'websocket')
.map((key, index) => (
<PermissionTitleBox
key={`permission_${key}`}
title={key}
isEditable={canEditUser}
permissions={Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)}
permissions={Object.keys(permissions[key]?.keys ?? {}).map(pkey => `${key}.${pkey}`)}
css={index > 0 ? tw`mt-4` : undefined}
>
<p css={tw`text-sm text-neutral-400 mb-4`}>{permissions[key].description}</p>
{Object.keys(permissions[key].keys).map((pkey) => (
<p css={tw`text-sm text-neutral-400 mb-4`}>{permissions[key]?.description}</p>
{Object.keys(permissions[key]?.keys ?? {}).map(pkey => (
<PermissionRow
key={`permission_${key}.${pkey}`}
permission={`${key}.${pkey}`}

11
resources/scripts/components/server/users/PermissionRow.tsx
View file

@ -1,7 +1,6 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import tw from 'twin.macro';
import Checkbox from '@/components/elements/Checkbox';
import React from 'react';
import { useStoreState } from 'easy-peasy';
import Label from '@/components/elements/Label';
@ -36,8 +35,8 @@ interface Props {
}
const PermissionRow = ({ permission, disabled }: Props) => {
const [key, pkey] = permission.split('.', 2);
const permissions = useStoreState((state) => state.permissions.data);
const [key = '', pkey = ''] = permission.split('.', 2);
const permissions = useStoreState(state => state.permissions.data);
return (
<Container htmlFor={`permission_${permission}`} className={disabled ? 'disabled' : undefined}>
@ -54,8 +53,8 @@ const PermissionRow = ({ permission, disabled }: Props) => {
<Label as={'p'} css={tw`font-medium`}>
{pkey}
</Label>
{permissions[key].keys[pkey].length > 0 && (
<p css={tw`text-xs text-neutral-400 mt-1`}>{permissions[key].keys[pkey]}</p>
{(permissions[key]?.keys?.[pkey]?.length ?? 0) > 0 && (
<p css={tw`text-xs text-neutral-400 mt-1`}>{permissions[key]?.keys?.[pkey] ?? ''}</p>
)}
</div>
</Container>

32
resources/scripts/components/server/users/PermissionTitleBox.tsx
View file

@ -1,29 +1,33 @@
import React, { memo, useCallback } from 'react';
import { useField } from 'formik';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import type { ReactNode } from 'react';
import { memo, useCallback } from 'react';
import isEqual from 'react-fast-compare';
import tw from 'twin.macro';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import Input from '@/components/elements/Input';
interface Props {
isEditable: boolean;
children?: ReactNode;
className?: string;
isEditable?: boolean;
title: string;
permissions: string[];
className?: string;
}
const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
function PermissionTitleBox({ isEditable, title, permissions, className, children }: Props) {
const [{ value }, , { setValue }] = useField<string[]>('permissions');
const onCheckboxClicked = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
setValue([...value, ...permissions.filter((p) => !value.includes(p))]);
setValue([...value, ...permissions.filter(p => !value.includes(p))]);
} else {
setValue(value.filter((p) => !permissions.includes(p)));
setValue(value.filter(p => !permissions.includes(p)));
}
},
[permissions, value]
[permissions, value],
);
return (
@ -34,7 +38,7 @@ const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissio
{isEditable && (
<Input
type={'checkbox'}
checked={permissions.every((p) => value.includes(p))}
checked={permissions.every(p => value.includes(p))}
onChange={onCheckboxClicked}
/>
)}
@ -45,6 +49,8 @@ const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissio
{children}
</TitledGreyBox>
);
}, isEqual);
}
export default PermissionTitleBox;
const MemoizedPermissionTitleBox = memo(PermissionTitleBox, isEqual);
export default MemoizedPermissionTitleBox;

8
resources/scripts/components/server/users/RemoveSubuserButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { ServerContext } from '@/state/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -14,8 +14,8 @@ export default ({ subuser }: { subuser: Subuser }) => {
const [loading, setLoading] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const removeSubuser = ServerContext.useStoreActions((actions) => actions.subusers.removeSubuser);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const removeSubuser = ServerContext.useStoreActions(actions => actions.subusers.removeSubuser);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const doDeletion = () => {
@ -26,7 +26,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
setLoading(false);
removeSubuser(subuser.uuid);
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'users', message: httpErrorToHuman(error) });
setShowConfirmation(false);

6
resources/scripts/components/server/users/UserRow.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Subuser } from '@/state/server/subusers';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
@ -14,7 +14,7 @@ interface Props {
}
export default ({ subuser }: Props) => {
const uuid = useStoreState((state) => state.user!.data!.uuid);
const uuid = useStoreState(state => state.user!.data!.uuid);
const [visible, setVisible] = useState(false);
return (
@ -40,7 +40,7 @@ export default ({ subuser }: Props) => {
</div>
<div css={tw`ml-4 hidden md:block`}>
<p css={tw`font-medium text-center`}>
{subuser.permissions.filter((permission) => permission !== 'websocket.connect').length}
{subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
</div>

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
@ -15,9 +15,9 @@ import tw from 'twin.macro';
export default () => {
const [loading, setLoading] = useState(true);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const subusers = ServerContext.useStoreState((state) => state.subusers.data);
const setSubusers = ServerContext.useStoreActions((actions) => actions.subusers.setSubusers);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const subusers = ServerContext.useStoreState(state => state.subusers.data);
const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
const getPermissions = useStoreActions((actions: Actions<ApplicationStore>) => actions.permissions.getPermissions);
@ -26,18 +26,18 @@ export default () => {
useEffect(() => {
clearFlashes('users');
getServerSubusers(uuid)
.then((subusers) => {
.then(subusers => {
setSubusers(subusers);
setLoading(false);
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'users', message: httpErrorToHuman(error) });
});
}, []);
useEffect(() => {
getPermissions().catch((error) => {
getPermissions().catch(error => {
addError({ key: 'users', message: httpErrorToHuman(error) });
console.error(error);
});
@ -53,7 +53,7 @@ export default () => {
{!subusers.length ? (
<p css={tw`text-center text-sm text-neutral-300`}>It looks like you don&apos;t have any subusers.</p>
) : (
subusers.map((subuser) => <UserRow key={subuser.uuid} subuser={subuser} />)
subusers.map(subuser => <UserRow key={subuser.uuid} subuser={subuser} />)
)}
<Can action={'user.create'}>
<div css={tw`flex justify-end mt-6`}>