Very basic implemention of frontend logic required to display backups and create a new one

resources/scripts/api/server/backups/createServerBackup.ts

@@ -0,0 +1,12 @@
+import { rawDataToServerBackup, ServerBackup } from '@/api/server/backups/getServerBackups';
+import http from '@/api/http';
+
+export default (uuid: string, name?: string, ignore?: string): Promise<ServerBackup> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/backups`, {
+            name, ignore,
+        })
+            .then(({ data }) => resolve(rawDataToServerBackup(data.attributes)))
+            .catch(reject);
+    });
+};

resources/scripts/api/server/backups/getServerBackups.ts

@@ -0,0 +1,32 @@
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+
+export interface ServerBackup {
+    uuid: string;
+    name: string;
+    contents: string;
+    sha256Hash: string;
+    bytes: number;
+    createdAt: Date;
+    completedAt: Date | null;
+}
+
+export const rawDataToServerBackup = ({ attributes }: FractalResponseData): ServerBackup => ({
+    uuid: attributes.uuid,
+    name: attributes.name,
+    contents: attributes.contents,
+    sha256Hash: attributes.sha256_hash,
+    bytes: attributes.bytes,
+    createdAt: new Date(attributes.created_at),
+    completedAt: attributes.completed_at ? new Date(attributes.completed_at) : null,
+});
+
+export default (uuid: string, page?: number | string): Promise<PaginatedResult<ServerBackup>> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/backups`, { params: { page } })
+            .then(({ data }) => resolve({
+                items: (data.data || []).map(rawDataToServerBackup),
+                pagination: getPaginationSet(data.meta.pagination),
+            }))
+            .catch(reject);
+    });
+};

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import Spinner from '@/components/elements/Spinner';
+import getServerBackups, { ServerBackup } from '@/api/server/backups/getServerBackups';
+import useServer from '@/plugins/useServer';
+import useFlash from '@/plugins/useFlash';
+import { httpErrorToHuman } from '@/api/http';
+import Can from '@/components/elements/Can';
+import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
+import FlashMessageRender from '@/components/FlashMessageRender';
+
+export default () => {
+    const { uuid } = useServer();
+    const { addError, clearFlashes } = useFlash();
+    const [ loading, setLoading ] = useState(true);
+    const [ backups, setBackups ] = useState<ServerBackup[]>([]);
+
+    useEffect(() => {
+        clearFlashes('backups');
+        getServerBackups(uuid)
+            .then(data => {
+                setBackups(data.items);
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'backups', message: httpErrorToHuman(error) });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading) {
+        return <Spinner size={'large'} centered={true}/>;
+    }
+
+    return (
+        <div className={'mt-10 mb-6'}>
+            <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
+            {!backups.length ?
+                <p className="text-center text-sm text-neutral-400">
+                    There are no backups stored for this server.
+                </p>
+                :
+                <div>
+                    {
+                        backups.map(backup => (
+                            <div key={backup.uuid}>
+                                {backup.uuid}
+                            </div>
+                        ))
+                    }
+                </div>
+            }
+            <Can action={'backup.create'}>
+                <div className={'mt-6 flex justify-end'}>
+                    <CreateBackupButton
+                        onBackupGenerated={backup => setBackups(s => [...s, backup])}
+                    />
+                </div>
+            </Can>
+        </div>
+    );
+};

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { object, string } from 'yup';
+import Field from '@/components/elements/Field';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import useFlash from '@/plugins/useFlash';
+import useServer from '@/plugins/useServer';
+import createServerBackup from '@/api/server/backups/createServerBackup';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { ServerBackup } from '@/api/server/backups/getServerBackups';
+
+interface Values {
+    name: string;
+    ignored: string;
+}
+
+interface Props {
+    onBackupGenerated: (backup: ServerBackup) => void;
+}
+
+const ModalContent = ({ ...props }: RequiredModalProps) => {
+    const { isSubmitting } = useFormikContext<Values>();
+
+    return (
+        <Modal {...props} showSpinnerOverlay={isSubmitting}>
+            <Form className={'pb-6'}>
+                <FlashMessageRender byKey={'backups:create'} className={'mb-4'}/>
+                <h3 className={'mb-6'}>Create server backup</h3>
+                <div className={'mb-6'}>
+                    <Field
+                        name={'name'}
+                        label={'Backup name'}
+                        description={'If provided, the name that should be used to reference this backup.'}
+                    />
+                </div>
+                <div className={'mb-6'}>
+                    <FormikFieldWrapper
+                        name={'ignore'}
+                        label={'Ignored Files & Directories'}
+                        description={`
+                            Enter the files or folders to ignore while generating this backup. Leave blank to use
+                            the contents of the .pteroignore file in the root of the server directory if present.
+                            Wildcard matching of files and folders is supported in addition to negating a rule by
+                            prefixing the path with an exclamation point.
+                        `}
+                    >
+                        <FormikField
+                            name={'contents'}
+                            component={'textarea'}
+                            className={'input-dark h-32'}
+                        />
+                    </FormikFieldWrapper>
+                </div>
+                <div className={'flex justify-end'}>
+                    <button
+                        type={'submit'}
+                        className={'btn btn-primary btn-sm'}
+                    >
+                        Start backup
+                    </button>
+                </div>
+            </Form>
+        </Modal>
+    );
+};
+
+export default ({ onBackupGenerated }: Props) => {
+    const { uuid } = useServer();
+    const { addError, clearFlashes } = useFlash();
+    const [ visible, setVisible ] = useState(false);
+
+    useEffect(() => {
+        clearFlashes('backups:create');
+    }, [visible]);
+
+    const submit = ({ name, ignored }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('backups:create')
+        createServerBackup(uuid, name, ignored)
+            .then(backup => {
+                onBackupGenerated(backup);
+                setVisible(false);
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'backups:create', message: httpErrorToHuman(error) });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            {visible &&
+            <Formik
+                onSubmit={submit}
+                initialValues={{ name: '', ignored: '' }}
+                validationSchema={object().shape({
+                    name: string().max(255),
+                    ignored: string(),
+                })}
+            >
+                <ModalContent
+                    appear={true}
+                    visible={visible}
+                    onDismissed={() => setVisible(false)}
+                />
+            </Formik>
+            }
+            <button
+                className={'btn btn-primary btn-sm'}
+                onClick={() => setVisible(true)}
+            >
+                Create backup
+            </button>
+        </>
+    );
+};

resources/scripts/plugins/useFlash.ts

@@ -0,0 +1,9 @@
+import { Actions, useStoreActions } from 'easy-peasy';
+import { FlashStore } from '@/state/flashes';
+import { ApplicationStore } from '@/state';
+
+const useFlash = (): Actions<FlashStore> => {
+    return useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+};
+
+export default useFlash;

resources/scripts/plugins/useServer.ts

@@ -0,0 +1,9 @@
+import { DependencyList } from 'react';
+import { ServerContext } from '@/state/server';
+import { Server } from '@/api/server/getServer';
+
+const useServer = (dependencies?: DependencyList): Server => {
+    return ServerContext.useStoreState(state => state.server.data!, [ dependencies ]);
+};
+
+export default useServer;

resources/scripts/routers/ServerRouter.tsx

@@ -16,6 +16,7 @@ import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
 import ScheduleEditContainer from '@/components/server/schedules/ScheduleEditContainer';
 import UsersContainer from '@/components/server/users/UsersContainer';
 import Can from '@/components/elements/Can';
+import BackupContainer from '@/components/server/backups/BackupContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -47,6 +48,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Can action={'user.*'}>
                             <NavLink to={`${match.url}/users`}>Users</NavLink>
                         </Can>
+                        <Can action={'backup.*'}>
+                            <NavLink to={`${match.url}/backups`}>Backups</NavLink>
+                        </Can>
                         <Can action={['settings.*', 'file.sftp']} matchAny={true}>
                             <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                         </Can>
@@ -77,6 +81,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
                             <Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
                             <Route path={`${match.path}/users`} component={UsersContainer} exact/>
+                            <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
                             <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                         </Switch>
                     </React.Fragment>