From f593346dbdc9f33d3278673bd9debfd9c91d6bd3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 27 Oct 2022 14:37:23 +0200
Subject: [PATCH] feat: database activity

---
 .../activity/[[page]]/+page.svelte            | 100 ++++++++++++++++++
 .../activity/[[page]]/+page.ts                |  19 ++++
 .../document-[document]/activity/+page.svelte |   7 --
 .../activity/[[page]]/+page.svelte            | 100 ++++++++++++++++++
 .../activity/[[page]]/+page.ts                |  21 ++++
 .../collection-[collection]/header.svelte     |   4 +
 6 files changed, 244 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts
 delete mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
new file mode 100644
index 000000000..9426dfff0
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No logs available</p>
+                </div>
+                <div class="common-section">
+                    <Button external secondary href="https://appwrite.io/docs/server/database">
+                        Documentation
+                    </Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/databases/database-${$page.params.team}/collection-${$page.params.collection}/document-${$page.params.document}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts
new file mode 100644
index 000000000..bfb63d8c6
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts
@@ -0,0 +1,19 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: sdkForProject.databases.listCollectionLogs(params.database, params.collection, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset)
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte
deleted file mode 100644
index dde4f656b..000000000
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import { Card } from '$lib/components';
-</script>
-
-<h1>Activity</h1>
-
-<Card />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
new file mode 100644
index 000000000..9426dfff0
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No logs available</p>
+                </div>
+                <div class="common-section">
+                    <Button external secondary href="https://appwrite.io/docs/server/database">
+                        Documentation
+                    </Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/databases/database-${$page.params.team}/collection-${$page.params.collection}/document-${$page.params.document}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts
new file mode 100644
index 000000000..aa93b9396
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: sdkForProject.databases.listDocumentLogs(
+            params.database,
+            params.collection,
+            params.document,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset)]
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 573f394a9..bb77e449f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -22,6 +22,10 @@
             href: `${path}/indexes`,
             title: 'Indexes'
         },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        },
         {
             href: `${path}/usage`,
             title: 'Usage'