StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'develop' into matthewpi/server-details-patch-1

Browse source
This commit is contained in:
Matthew Penner 2020-12-06 13:30:56 -07:00 • committed by GitHub
commit ac8b7fec28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 407 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

14
resources/scripts/api/server/files/chmodFiles.ts Normal file
View file

@ -0,0 +1,14 @@
import http from '@/api/http';
interface Data {
file: string;
mode: string;
}
export default (uuid: string, directory: string, files: Data[]): Promise<void> => {
return new Promise((resolve, reject) => {
http.post(`/api/client/servers/${uuid}/files/chmod`, { root: directory, files })
.then(() => resolve())
.catch(reject);
});
};

1
resources/scripts/api/server/files/loadDirectory.ts
View file

@ -5,6 +5,7 @@ export interface FileObject {
key: string;
name: string;
mode: string;
modeBits: string,
size: number;
isFile: boolean;
isSymlink: boolean;

11
resources/scripts/api/swr/getServerBackups.ts
View file

@ -3,8 +3,17 @@ import http, { getPaginationSet, PaginatedResult } from '@/api/http';
import { ServerBackup } from '@/api/server/types';
import { rawDataToServerBackup } from '@/api/transformers';
import { ServerContext } from '@/state/server';
import { createContext, useContext } from 'react';
export default (page?: number | string) => {
interface ctx {
page: number;
setPage: (value: number | ((s: number) => number)) => void;
}
export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
export default () => {
const { page } = useContext(Context);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
return useSWR<PaginatedResult<ServerBackup>>([ 'server:backups', uuid, page ], async () => {

1
resources/scripts/api/transformers.ts
View file

@ -16,6 +16,7 @@ export const rawDataToFileObject = (data: FractalResponseData): FileObject => ({
key: `${data.attributes.is_file ? 'file' : 'dir'}_${data.attributes.name}`,
name: data.attributes.name,
mode: data.attributes.mode,
modeBits: data.attributes.mode_bits,
size: Number(data.attributes.size),
isFile: data.attributes.is_file,
isSymlink: data.attributes.is_symlink,

2
resources/scripts/components/dashboard/ApiKeyModal.tsx
View file

@ -13,7 +13,7 @@ const ApiKeyModal = ({ apiKey }: Props) => {
return (
<>
<h3 css={tw`mb-6`}>Your API Key</h3>
<h3 css={tw`mb-6 text-2xl`}>Your API Key</h3>
<p css={tw`text-sm mb-6`}>
The API key you have requested is shown below. Please store this in a safe location, it will not be
shown again.

15
resources/scripts/components/elements/SubNavigation.tsx
View file

@ -5,23 +5,24 @@ import config from '../../../../tailwind.config';
const SubNavigation = styled.div`
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
& > div {
${tw`flex items-center text-sm mx-auto px-2`};
max-width: 1200px;
& > a, & > div {
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
&:not(:first-of-type) {
${tw`ml-2`};
}
&:active, &:hover {
&:hover {
${tw`text-neutral-100`};
}
&:active, &:hover, &.active {
&:active, &.active {
${tw`text-neutral-100`};
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
}
}

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

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import useFlash from '@/plugins/useFlash';
import Can from '@/components/elements/Can';
@ -6,11 +6,13 @@ import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
import FlashMessageRender from '@/components/FlashMessageRender';
import BackupRow from '@/components/server/backups/BackupRow';
import tw from 'twin.macro';
import getServerBackups from '@/api/swr/getServerBackups';
import getServerBackups, { Context as ServerBackupContext } from '@/api/swr/getServerBackups';
import { ServerContext } from '@/state/server';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import Pagination from '@/components/elements/Pagination';
export default () => {
const BackupContainer = () => {
const { page, setPage } = useContext(ServerBackupContext);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data: backups, error, isValidating } = getServerBackups();
@ -33,19 +35,29 @@ export default () => {
return (
<ServerContentBlock title={'Backups'}>
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
{!backups.items.length ?
<p css={tw`text-center text-sm text-neutral-300`}>
There are no backups stored for this server.
</p>
:
<div>
{backups.items.map((backup, index) => <BackupRow
key={backup.uuid}
backup={backup}
css={index > 0 ? tw`mt-2` : undefined}
/>)}
</div>
}
<Pagination data={backups} onPageSelect={setPage}>
{({ items }) => (
!items.length ?
// Don't show any error messages if the server has no backups and the user cannot
// create additional ones for the server.
!backupLimit ?
null
:
<p css={tw`text-center text-sm text-neutral-300`}>
{page > 1 ?
'Looks like we\'ve run out of backups to show you, try going back a page.'
:
'It looks like there are no backups currently stored for this server.'
}
</p>
:
items.map((backup, index) => <BackupRow
key={backup.uuid}
backup={backup}
css={index > 0 ? tw`mt-2` : undefined}
/>)
)}
</Pagination>
{backupLimit === 0 &&
<p css={tw`text-center text-sm text-neutral-300`}>
Backups cannot be created for this server.
@ -59,10 +71,19 @@ export default () => {
</p>
}
{backupLimit > 0 && backupLimit !== backups.items.length &&
<CreateBackupButton css={tw`w-full sm:w-auto`}/>
<CreateBackupButton css={tw`w-full sm:w-auto`}/>
}
</div>
</Can>
</ServerContentBlock>
);
};
export default () => {
const [ page, setPage ] = useState<number>(1);
return (
<ServerBackupContext.Provider value={{ page, setPage }}>
<BackupContainer/>
</ServerBackupContext.Provider>
);
};

2
resources/scripts/components/server/backups/ChecksumModal.tsx
View file

@ -4,7 +4,7 @@ import tw from 'twin.macro';
const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum: string }) => (
<Modal {...props}>
<h3 css={tw`mb-6`}>Verify file checksum</h3>
<h3 css={tw`mb-6 text-2xl`}>Verify file checksum</h3>
<p css={tw`text-sm`}>
The checksum of this file is:
</p>

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

@ -111,7 +111,7 @@ export default ({ database, className }: Props) => {
</Formik>
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
<FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
<h3 css={tw`mb-6`}>Database connection details</h3>
<h3 css={tw`mb-6 text-2xl`}>Database connection details</h3>
<div>
<Label>Endpoint</Label>
<CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>

75
resources/scripts/components/server/files/ChmodFileModal.tsx Normal file
View file

@ -0,0 +1,75 @@
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';
import chmodFiles from '@/api/server/files/chmodFiles';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import useFlash from '@/plugins/useFlash';
interface FormikValues {
mode: string;
}
interface File {
file: string,
mode: string,
}
type OwnProps = RequiredModalProps & { files: File[] };
const ChmodFileModal = ({ files, ...props }: OwnProps) => {
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 submit = ({ 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), false);
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 => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });
})
.then(() => props.onDismissed());
};
return (
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : (files[0].mode || '') }}>
{({ isSubmitting }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form css={tw`m-0`}>
<div css={tw`flex flex-wrap items-end`}>
<div css={tw`w-full sm:flex-1 sm:mr-4`}>
<Field
type={'string'}
id={'file_mode'}
name={'mode'}
label={'File Mode'}
autoFocus
/>
</div>
<div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
<Button css={tw`w-full`}>Update</Button>
</div>
</div>
</Form>
</Modal>
)}
</Formik>
);
};
export default ChmodFileModal;

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

@ -5,6 +5,7 @@ import {
faCopy,
faEllipsisH,
faFileArchive,
faFileCode,
faFileDownload,
faLevelUpAlt,
faPencilAlt,
@ -30,8 +31,9 @@ import compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles';
import isEqual from 'react-fast-compare';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import ChmodFileModal from '@/components/server/files/ChmodFileModal';
type ModalType = 'rename' | 'move';
type ModalType = 'rename' | 'move' | 'chmod';
const StyledRow = styled.div<{ $danger?: boolean }>`
${tw`p-2 flex items-center rounded`};
@ -140,14 +142,23 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
renderToggle={onClick => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{!!modal &&
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(null)}
/>
{modal ?
modal === 'chmod' ?
<ChmodFileModal
visible
appear
files={[ { file: file.name, mode: file.modeBits } ]}
onDismissed={() => setModal(null)}
/>
:
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(null)}
/>
: null
}
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</div>
@ -156,6 +167,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
<Can action={'file.update'}>
<Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/>
<Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/>
<Row onClick={() => setModal('chmod')} icon={faFileCode} title={'Permissions'}/>
</Can>
{file.isFile &&
<Can action={'file.create'}>

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

@ -44,7 +44,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
};
return (
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
<div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
{(files && files.length > 0 && !params?.action) ?
<FileActionCheckbox
type={'checkbox'}

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

@ -51,9 +51,28 @@ export default () => {
return (
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<ErrorBoundary>
<FileManagerBreadcrumbs/>
</ErrorBoundary>
<div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
<ErrorBoundary>
<FileManagerBreadcrumbs/>
</ErrorBoundary>
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</div>
{
!files ?
<Spinner size={'large'} centered/>
@ -83,22 +102,6 @@ export default () => {
</div>
</CSSTransition>
}
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-wrap-reverse justify-end mt-4`}>
<NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
<UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
<NavLink
to={`/server/${id}/files/new${window.location.hash}`}
css={tw`flex-1 sm:flex-none sm:mt-0`}
>
<Button css={tw`w-full`}>
New File
</Button>
</NavLink>
</div>
</ErrorBoundary>
</Can>
</>
}
</ServerContentBlock>

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

@ -64,7 +64,11 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
>
<SelectFileCheckbox name={file.name}/>
<Clickable file={file}>
<div css={tw`flex-none self-center text-neutral-400 mr-4 text-lg pl-3 ml-6`}>
<div css={tw`w-24 ml-6 pl-3 hidden md:block`}>
{file.mode}
</div>
<div css={tw`flex-none self-center text-neutral-400 ml-6 md:ml-0 mr-4 text-lg pl-3`}>
{file.isFile ?
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}/>
:

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

@ -25,7 +25,8 @@ const schema = object().shape({
const generateDirectoryData = (name: string): FileObject => ({
key: `dir_${name.split('/', 1)[0] ?? name}`,
name: name.replace(/^(\/*)/, '').split('/', 1)[0] ?? name,
mode: '0644',
mode: 'drwxr-xr-x',
modeBits: '0755',
size: 0,
isFile: false,
isSymlink: false,

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

@ -48,21 +48,23 @@ export default ({ subuser }: Props) => {
</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
</div>
<Can action={'user.update'}>
{subuser.uuid !== uuid &&
<button
type={'button'}
aria-label={'Edit subuser'}
css={tw`block text-sm p-1 md:p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`}
onClick={() => setVisible(true)}
>
<FontAwesomeIcon icon={faPencilAlt}/>
</button>
}
</Can>
<Can action={'user.delete'}>
<RemoveSubuserButton subuser={subuser}/>
</Can>
{subuser.uuid !== uuid &&
<>
<Can action={'user.update'}>
<button
type={'button'}
aria-label={'Edit subuser'}
css={tw`block text-sm p-1 md:p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`}
onClick={() => setVisible(true)}
>
<FontAwesomeIcon icon={faPencilAlt} />
</button>
</Can>
<Can action={'user.delete'}>
<RemoveSubuserButton subuser={subuser} />
</Can>
</>
}
</GreyRowBox>
);
};

30
resources/scripts/helpers.ts
View file

@ -20,3 +20,33 @@ export const randomInt = (low: number, high: number) => Math.floor(Math.random()
export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');
export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
export function fileBitsToString (mode: string, directory: boolean): string {
const m = parseInt(mode, 8);
let buf = '';
'dalTLDpSugct?'.split('').forEach((c, i) => {
if ((m & (1 << (32 - 1 - i))) !== 0) {
buf = buf + c;
}
});
if (buf.length === 0) {
// If the file is directory, make sure it has the directory flag.
if (directory) {
buf = 'd';
} else {
buf = '-';
}
}
'rwxrwxrwx'.split('').forEach((c, i) => {
if ((m & (1 << (9 - 1 - i))) !== 0) {
buf = buf + c;
} else {
buf = buf + '-';
}
});
return buf;
}