draft: backups

package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/pink": "^0.0.4",
-        "@aw-labs/appwrite-console": "^13.1.0",
+        "@aw-labs/appwrite-console": "npm:[email protected]",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",
         "@sentry/tracing": "^7.36.0",

src/lib/actions/analytics.ts

@@ -194,6 +194,9 @@ export enum Submit {
     WebhookUpdateEvents = 'submit_webhook_update_events',
     WebhookUpdateName = 'submit_webhook_update_name',
     WebhookUpdateSecurity = 'submit_webhook_update_security',
+    BackupCreate = 'submit_backup_create',
+    BackupDelete = 'submit_backup_delete',
+    BackupRestore = 'submit_backup_restore',
     BucketCreate = 'submit_bucket_create',
     BucketDelete = 'submit_bucket_delete',
     BucketUpdateEnabled = 'submit_bucket_update_enabled',

src/lib/constants.ts

@@ -32,7 +32,8 @@ export enum Dependencies {
     KEYS = 'dependency:keys',
     DOMAINS = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
-    WEBHOOKS = 'dependency:webhooks'
+    WEBHOOKS = 'dependency:webhooks',
+    BACKUPS = 'dependency:backups'
 }
 
 export const scopes: {

src/routes/console/project-[project]/settings/backups/+page.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Empty, Status } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import type { PageData } from './$types';
+    import Heading from '$lib/components/heading.svelte';
+    import Create from './create.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Delete from './delete.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../store';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { createEventDispatcher } from 'svelte';
+
+    export let data: PageData;
+
+    let showCreate = false;
+    let showDelete = false;
+    let selectedBackup: Models.Backup;
+
+    const projectId = $project.$id;
+
+    const dispatch = createEventDispatcher();
+
+    async function handleCreate() {
+        showCreate = false;
+    }
+
+    async function handleRestore(backup: Models.Backup) {
+        try {
+            const restore = await sdkForConsole.projects.restoreBackup(projectId, backup.$id);
+            dispatch('created', restore);
+            addNotification({
+                type: 'success',
+                message: `${backup.name} is being restored.`
+            });
+            trackEvent(Submit.BackupRestore, {
+                customId: !!backup.$id
+            });
+            await invalidate(Dependencies.BACKUPS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupRestore);
+        }
+    }
+
+    console.log(data.backups);
+</script>
+
+<svelte:head>
+    <title>Backups - Appwrite</title>
+</svelte:head>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Backups</Heading>
+        <Button on:click={() => (showCreate = true)} event="create_backup">
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create Backup</span>
+        </Button>
+    </div>
+
+    {#if data.backups.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>Created</TableCellHead>
+                <TableCellHead width={80}>Status</TableCellHead>
+                <TableCellHead>Delete</TableCellHead>
+                <TableCellHead>Restore</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.backups.backups as backup}
+                    <TableRow>
+                        <TableCell title="Name">
+                            <div class="u-flex u-main-space-between">
+                                {backup.name}
+                            </div>
+                        </TableCell>
+                        <TableCellText title="Created"
+                            >{toLocaleDateTime(backup.$createdAt)}</TableCellText>
+                        <TableCellText title="Status">
+                            <Status status={backup.status}>
+                                {backup.status}
+                            </Status>
+                        </TableCellText>
+                        <TableCellText title="Delete">
+                            <Button
+                                on:click={async () => {
+                                    showDelete = true;
+                                    selectedBackup = backup;
+                                }}
+                                secondary>Delete</Button>
+                        </TableCellText>
+                        <TableCellText title="Restore">
+                            <Button on:click={async () => handleRestore(backup)} secondary
+                                >Restore</Button>
+                        </TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty
+            single
+            href="https://appwrite.io/docs/backups"
+            target="backup"
+            on:click={() => (showCreate = true)} />
+    {/if}
+</Container>
+
+<Create bind:showCreate on:created={handleCreate} />
+<Delete bind:showDelete bind:selectedBackup />

src/routes/console/project-[project]/settings/backups/+page.ts

@@ -0,0 +1,10 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.BACKUPS);
+    return {
+        backups: await sdkForConsole.projects.listBackups(params.project)
+    };
+};

src/routes/console/project-[project]/settings/backups/create.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { project } from '../../store';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name = '';
+    let description = '';
+    let id: string = null;
+
+    const projectId = $project.$id;
+
+    const create = async () => {
+        try {
+            const backup = await sdkForConsole.projects.createBackup(projectId, name);
+            showCreate = false;
+            dispatch('created', backup);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+            trackEvent(Submit.BackupCreate, {
+                customId: !!id
+            });
+            name = id = null;
+            await invalidate(Dependencies.BACKUPS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupCreate);
+        }
+    };
+</script>
+
+<Modal size="big" on:submit={create} bind:show={showCreate}>
+    <svelte:fragment slot="header">Create Backup</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter Backup name"
+            bind:value={name}
+            autofocus
+            required />
+
+        <InputText
+            id="description"
+            label="Description"
+            placeholder="Enter Backup Description"
+            bind:value={description} />
+
+        <!-- {#each allScopes.filter((s) => s.category === category) as scope}
+            <InputChoice
+                id={scope.scope}
+                label={scope.scope}
+                bind:value={activeScopes[scope.scope]}>
+                {scope.description}
+            </InputChoice>
+        {/each} -->
+    </FormList>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/project-[project]/settings/backups/delete.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { project } from '../../store';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { base } from '$app/paths';
+
+    export let showDelete = false;
+    export let selectedBackup: Models.Backup;
+
+    const deleteBackup = async () => {
+        try {
+            await sdkForConsole.projects.deleteBackup($project.$id, selectedBackup.$id);
+            addNotification({
+                type: 'success',
+                message: `${selectedBackup.name} has been deleted`
+            });
+            trackEvent(Submit.BackupDelete);
+            await invalidate(Dependencies.BACKUPS);
+            await goto(`${base}/console/project-${$project.$id}/settings/backups`);
+            showDelete = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BackupDelete);
+        }
+    };
+</script>
+
+<Modal bind:show={showDelete} on:submit={deleteBackup} warning>
+    <svelte:fragment slot="header">Delete Backup</svelte:fragment>
+    {#if selectedBackup}
+        <p data-private>
+            Are you sure you want to delete backup <b>{selectedBackup.name}</b> from '{$project.name}'?
+        </p>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>