Revert "fix: remove databases reads/writes usage tab and clear loaders"

This reverts commit 1f2aab9916.

src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte

@@ -34,6 +34,12 @@
                 event: 'backups',
                 hasChildren: true
             },
+            {
+                href: withPath(baseDatabasePath, '/usage'),
+                title: 'Usage',
+                event: 'usage',
+                hasChildren: true
+            },
             {
                 href: withPath(baseDatabasePath, '/settings'),
                 event: 'settings',

src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte

@@ -1,5 +1,24 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
+    import { Container, UsageMultiple } from '$lib/layout';
+
+    export let data;
+
+    $: reads = data.databaseReads;
+    $: readsTotal = data.databaseReadsTotal;
+
+    $: writes = data.databaseWrites;
+    $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Container></Container>
+<Container databasesMainScreen>
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendNumberFormat="abbreviate"
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</Container>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts

@@ -1,3 +1,17 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { UsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async () => ({});
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(UsageRange, params.period)
+        ? params.period
+        : UsageRange.ThirtyDays;
+
+    return {
+        ...(await sdk.forProject(params.region, params.project).tablesDB.getUsage({
+            databaseId: params.database,
+            range: period
+        }))
+    };
+};

src/routes/(console)/project-[region]-[project]/databases/header.svelte

@@ -14,6 +14,12 @@
             title: 'Databases',
             event: 'databases',
             hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage',
+            hasChildren: true
         }
     ];
 </script>

src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte

@@ -1,5 +1,28 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
+    import { Container, UsageMultiple } from '$lib/layout';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: reads = data.databasesReads;
+    $: readsTotal = data.databasesReadsTotal;
+
+    $: writes = data.databasesWrites;
+    $: writesTotal = data.databasesWritesTotal;
 </script>
 
-<Container></Container>
+<Container>
+    <Layout.Stack gap="l">
+        <UsageMultiple
+            title="Reads and writes"
+            showHeader={false}
+            total={[readsTotal, writesTotal]}
+            count={[reads, writes]}
+            legendNumberFormat="abbreviate"
+            legendData={[
+                { name: 'Reads', value: readsTotal },
+                { name: 'Writes', value: writesTotal }
+            ]} />
+    </Layout.Stack>
+</Container>

src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts

@@ -1,3 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { UsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async () => ({});
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(UsageRange, params.period)
+        ? params.period
+        : UsageRange.ThirtyDays;
+
+    return {
+        ...(await sdk
+            .forProject(params.region, params.project)
+            .tablesDB.listUsage({ range: period }))
+    };
+};