Support failed backup display on the frontend; use SWR for backup pages

Author: DaneEveritt

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

@@ -1,5 +1,6 @@
-import { rawDataToServerBackup, ServerBackup } from '@/api/server/backups/getServerBackups';
 import http from '@/api/http';
+import { ServerBackup } from '@/api/server/types';
+import { rawDataToServerBackup } from '@/api/server/transformers';
 
 export default (uuid: string, name?: string, ignored?: string): Promise<ServerBackup> => {
     return new Promise((resolve, reject) => {

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

@@ -0,0 +1,13 @@
+import { FractalResponseData } from '@/api/http';
+import { ServerBackup } from '@/api/server/types';
+
+export const rawDataToServerBackup = ({ attributes }: FractalResponseData): ServerBackup => ({
+    uuid: attributes.uuid,
+    isSuccessful: attributes.is_successful,
+    name: attributes.name,
+    ignoredFiles: attributes.ignored_files,
+    sha256Hash: attributes.sha256_hash,
+    bytes: attributes.bytes,
+    createdAt: new Date(attributes.created_at),
+    completedAt: attributes.completed_at ? new Date(attributes.completed_at) : null,
+});

resources/scripts/api/server/transformers.ts

@@ -0,0 +1,10 @@
+export interface ServerBackup {
+    uuid: string;
+    isSuccessful: boolean;
+    name: string;
+    ignoredFiles: string;
+    sha256Hash: string;
+    bytes: number;
+    createdAt: Date;
+    completedAt: Date | null;
+}

resources/scripts/api/server/types.d.ts

@@ -0,0 +1,18 @@
+import useSWR from 'swr';
+import http, { getPaginationSet, PaginatedResult } from '@/api/http';
+import { ServerBackup } from '@/api/server/types';
+import { rawDataToServerBackup } from '@/api/server/transformers';
+import useServer from '@/plugins/useServer';
+
+export default (page?: number | string) => {
+    const { uuid } = useServer();
+
+    return useSWR<PaginatedResult<ServerBackup>>([ 'server:backups', uuid, page ], async () => {
+        const { data } = await http.get(`/api/client/servers/${uuid}/backups`, { params: { page } });
+
+        return ({
+            items: (data.data || []).map(rawDataToServerBackup),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/api/swr/getServerBackups.ts

@@ -1,72 +1,67 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import Spinner from '@/components/elements/Spinner';
-import getServerBackups 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';
 import BackupRow from '@/components/server/backups/BackupRow';
-import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
+import getServerBackups from '@/api/swr/getServerBackups';
 
 export default () => {
-    const { uuid, featureLimits, name: serverName } = useServer();
-    const { addError, clearFlashes } = useFlash();
-    const [ loading, setLoading ] = useState(true);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { featureLimits, name: serverName } = useServer();
 
-    const backups = ServerContext.useStoreState(state => state.backups.data);
-    const setBackups = ServerContext.useStoreActions(actions => actions.backups.setBackups);
+    const { data: backups, error, isValidating } = getServerBackups();
 
     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 (!error) {
+            clearFlashes('backups');
 
-    if (backups.length === 0 && loading) {
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'backups' });
+    }, [ error ]);
+
+    if (!backups || (error && isValidating)) {
         return <Spinner size={'large'} centered/>;
     }
 
     return (
         <PageContentBlock>
             <Helmet>
-                <title> {serverName} | Backups</title>
+                <title>{serverName} | Backups</title>
             </Helmet>
             <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
-            {!backups.length ?
+            {!backups.items.length ?
                 <p css={tw`text-center text-sm text-neutral-400`}>
                     There are no backups stored for this server.
                 </p>
                 :
                 <div>
-                    {backups.map((backup, index) => <BackupRow
+                    {backups.items.map((backup, index) => <BackupRow
                         key={backup.uuid}
                         backup={backup}
                         css={index > 0 ? tw`mt-2` : undefined}
                     />)}
                 </div>
             }
             {featureLimits.backups === 0 &&
-                <p css={tw`text-center text-sm text-neutral-400`}>
-                    Backups cannot be created for this server.
-                </p>
+            <p css={tw`text-center text-sm text-neutral-400`}>
+                Backups cannot be created for this server.
+            </p>
             }
             <Can action={'backup.create'}>
-                {(featureLimits.backups > 0 && backups.length > 0) &&
+                {(featureLimits.backups > 0 && backups.items.length > 0) &&
                 <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                    {backups.length} of {featureLimits.backups} backups have been created for this server.
+                    {backups.items.length} of {featureLimits.backups} backups have been created for this server.
                 </p>
                 }
-                {featureLimits.backups > 0 && featureLimits.backups !== backups.length &&
+                {featureLimits.backups > 0 && featureLimits.backups !== backups.items.length &&
                 <div css={tw`mt-6 flex justify-end`}>
                     <CreateBackupButton/>
                 </div>

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

@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
-import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { faCloudDownloadAlt, faEllipsisH, faLock, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownMenu, { DropdownButtonRow } from '@/components/elements/DropdownMenu';
 import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
-import { httpErrorToHuman } from '@/api/http';
 import useFlash from '@/plugins/useFlash';
 import ChecksumModal from '@/components/server/backups/ChecksumModal';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useServer from '@/plugins/useServer';
 import deleteBackup from '@/api/server/backups/deleteBackup';
-import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import Can from '@/components/elements/Can';
 import tw from 'twin.macro';
+import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerBackup } from '@/api/server/types';
 
 interface Props {
     backup: ServerBackup;
@@ -24,8 +23,8 @@ export default ({ backup }: Props) => {
     const [ loading, setLoading ] = useState(false);
     const [ visible, setVisible ] = useState(false);
     const [ deleteVisible, setDeleteVisible ] = useState(false);
-    const { addError, clearFlashes } = useFlash();
-    const removeBackup = ServerContext.useStoreActions(actions => actions.backups.removeBackup);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getServerBackups();
 
     const doDownload = () => {
         setLoading(true);
@@ -37,7 +36,7 @@ export default ({ backup }: Props) => {
             })
             .catch(error => {
                 console.error(error);
-                addError({ key: 'backups', message: httpErrorToHuman(error) });
+                clearAndAddHttpError({ key: 'backups', error });
             })
             .then(() => setLoading(false));
     };
@@ -46,10 +45,15 @@ export default ({ backup }: Props) => {
         setLoading(true);
         clearFlashes('backups');
         deleteBackup(uuid, backup.uuid)
-            .then(() => removeBackup(backup.uuid))
+            .then(() => {
+                mutate(data => ({
+                    ...data,
+                    items: data.items.filter(b => b.uuid !== backup.uuid),
+                }), false);
+            })
             .catch(error => {
                 console.error(error);
-                addError({ key: 'backups', message: httpErrorToHuman(error) });
+                clearAndAddHttpError({ key: 'backups', error });
                 setLoading(false);
                 setDeleteVisible(false);
             });
@@ -76,35 +80,44 @@ export default ({ backup }: Props) => {
                 be recovered once deleted.
             </ConfirmationModal>
             <SpinnerOverlay visible={loading} fixed/>
-            <DropdownMenu
-                renderToggle={onClick => (
-                    <button
-                        onClick={onClick}
-                        css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
-                    >
-                        <FontAwesomeIcon icon={faEllipsisH}/>
-                    </button>
-                )}
-            >
-                <div css={tw`text-sm`}>
-                    <Can action={'backup.download'}>
-                        <DropdownButtonRow onClick={() => doDownload()}>
-                            <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Download</span>
+            {backup.isSuccessful ?
+                <DropdownMenu
+                    renderToggle={onClick => (
+                        <button
+                            onClick={onClick}
+                            css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
+                        >
+                            <FontAwesomeIcon icon={faEllipsisH}/>
+                        </button>
+                    )}
+                >
+                    <div css={tw`text-sm`}>
+                        <Can action={'backup.download'}>
+                            <DropdownButtonRow onClick={() => doDownload()}>
+                                <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
+                                <span css={tw`ml-2`}>Download</span>
+                            </DropdownButtonRow>
+                        </Can>
+                        <DropdownButtonRow onClick={() => setVisible(true)}>
+                            <FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Checksum</span>
                         </DropdownButtonRow>
-                    </Can>
-                    <DropdownButtonRow onClick={() => setVisible(true)}>
-                        <FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
-                        <span css={tw`ml-2`}>Checksum</span>
-                    </DropdownButtonRow>
-                    <Can action={'backup.delete'}>
-                        <DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
-                            <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Delete</span>
-                        </DropdownButtonRow>
-                    </Can>
-                </div>
-            </DropdownMenu>
+                        <Can action={'backup.delete'}>
+                            <DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
+                                <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
+                                <span css={tw`ml-2`}>Delete</span>
+                            </DropdownButtonRow>
+                        </Can>
+                    </div>
+                </DropdownMenu>
+                :
+                <button
+                    onClick={() => setDeleteVisible(true)}
+                    css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
+                >
+                    <FontAwesomeIcon icon={faTrashAlt}/>
+                </button>
+            }
         </>
     );
 };

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

@@ -1,34 +1,39 @@
 import React from 'react';
-import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
-import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerBackup } from '@/api/server/types';
 
 interface Props {
     backup: ServerBackup;
     className?: string;
 }
 
 export default ({ backup, className }: Props) => {
-    const appendBackup = ServerContext.useStoreActions(actions => actions.backups.appendBackup);
+    const { mutate } = getServerBackups();
 
     useWebsocketEvent(`backup completed:${backup.uuid}`, data => {
         try {
             const parsed = JSON.parse(data);
-            appendBackup({
-                ...backup,
-                sha256Hash: parsed.sha256_hash || '',
-                bytes: parsed.file_size || 0,
-                completedAt: new Date(),
-            });
+
+            mutate(data => ({
+                ...data,
+                items: data.items.map(b => b.uuid !== backup.uuid ? b : ({
+                    ...b,
+                    isSuccessful: parsed.is_successful || true,
+                    sha256Hash: parsed.sha256_hash || '',
+                    bytes: parsed.file_size || 0,
+                    completedAt: new Date(),
+                })),
+            }), false);
         } catch (e) {
             console.warn(e);
         }
@@ -45,8 +50,13 @@ export default ({ backup, className }: Props) => {
             </div>
             <div css={tw`flex-1`}>
                 <p css={tw`text-sm mb-1`}>
+                    {!backup.isSuccessful &&
+                    <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
+                        Failed
+                    </span>
+                    }
                     {backup.name}
-                    {backup.completedAt &&
+                    {(backup.completedAt && backup.isSuccessful) &&
                     <span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
                     }
                 </p>