Merge pull request #98 from appwrite/fix-realtime

fix: realtime

Author: TorstenDittmann

src/lib/charts/base.svelte

@@ -86,5 +86,6 @@
     .echart {
         width: 100%;
         min-height: 12rem;
+        height: 100%;
     }
 </style>

src/lib/constants.ts

@@ -15,15 +15,14 @@ export enum Dependencies {
     COLLECTION = 'collection',
     DOCUMENT = 'document',
     DOCUMENTS = 'documents',
-    ATTRIBUTES = 'attributes',
-    INDEXES = 'indexes',
     BUCKET = 'bucket',
     FILE = 'file',
     FILES = 'files',
     FUNCTION = 'function',
     FUNCTIONS = 'functions',
     VARIABLES = 'variables',
     DEPLOYMENTS = 'deployments',
+    EXECUTIONS = 'executions',
     PLATFORM = 'platform',
     PLATFORMS = 'platforms',
     KEY = 'key',

src/lib/layout/usage.svelte

@@ -75,59 +75,67 @@
                 <Heading tag="h6" size="6">{total(created)}</Heading>
                 <p>{createdMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: createdMetadata.legend,
-                            data: [...created.map((e) => [e.date, e.value])],
-                            color: Colors.Secondary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: createdMetadata.legend,
+                                data: [...created.map((e) => [e.date, e.value])],
+                                color: Colors.Secondary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
             {#if read}
                 <Heading tag="h6" size="6">{total(read)}</Heading>
                 <p>{readMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: readMetadata.legend,
-                            data: [...read.map((e) => [e.date, e.value])],
-                            color: Colors.Tertiary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: readMetadata.legend,
+                                data: [...read.map((e) => [e.date, e.value])],
+                                color: Colors.Tertiary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
             {#if updated}
                 <Heading tag="h6" size="6">{total(updated)}</Heading>
                 <p>{updatedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: updatedMetadata.legend,
-                            data: [...updated.map((e) => [e.date, e.value])],
-                            color: Colors.Quaternary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: updatedMetadata.legend,
+                                data: [...updated.map((e) => [e.date, e.value])],
+                                color: Colors.Quaternary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
             {#if deleted}
                 <Heading tag="h6" size="6">{total(deleted)}</Heading>
                 <p>{deletedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: deletedMetadata.legend,
-                            data: [...deleted.map((e) => [e.date, e.value])],
-                            color: Colors.Quinary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: deletedMetadata.legend,
+                                data: [...deleted.map((e) => [e.date, e.value])],
+                                color: Colors.Quinary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
     </Tiles>

src/routes/console/project-[project]/+layout.svelte

@@ -1,5 +1,26 @@
 <script lang="ts">
     import { UploadBox } from '$lib/components';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onDestroy, onMount } from 'svelte';
+    import { stats } from './store';
+
+    let unsubscribe: { (): void };
+
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe(['project', 'console'], (response) => {
+            if (response.events.includes('stats.connections')) {
+                for (const [projectId, value] of Object.entries(response.payload)) {
+                    stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
+                }
+            }
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </script>
 
 <slot />

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte

@@ -1,5 +1,28 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onDestroy, onMount } from 'svelte';
     import { collection } from './store';
+
+    let unsubscribe: { (): void };
+
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
+            if (
+                response.events.includes('databases.*.collections.*.attributes.*') ||
+                response.events.includes('databases.*.collections.*.indexes.*')
+            ) {
+                invalidate(Dependencies.COLLECTION);
+            }
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </script>
 
 <svelte:head>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.ts

@@ -6,8 +6,8 @@ import Header from './header.svelte';
 import { error } from '@sveltejs/kit';
 
 export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    await parent();
     depends(Dependencies.COLLECTION);
+    await parent();
 
     try {
         return {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte

@@ -10,16 +10,13 @@
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem, Empty, Heading } from '$lib/components';
-    import type { Attributes } from '../store';
+    import { attributes, type Attributes } from '../store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
     import Create from './createAttribute.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import Delete from './deleteAttribute.svelte';
     import Overview from './overview.svelte';
-    import type { PageData } from './$types';
-
-    export let data: PageData;
 
     let showDropdown = [];
     let selectedAttribute: Attributes = null;
@@ -39,7 +36,7 @@
         </Button>
     </div>
 
-    {#if data.attributes.total}
+    {#if $attributes.length}
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
@@ -48,7 +45,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each data.attributes.attributes as attribute, index}
+                {#each $attributes as attribute, index}
                     <TableRow>
                         <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
@@ -110,7 +107,7 @@
             </TableBody>
         </Table>
         <div class="u-flex common-section u-main-space-between">
-            <p class="text">Total results: {data.attributes.total}</p>
+            <p class="text">Total results: {$attributes.length}</p>
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts

@@ -12,7 +12,7 @@
     let submitted = false;
 
     const created = async () => {
-        invalidate(Dependencies.ATTRIBUTES);
+        invalidate(Dependencies.COLLECTION);
         showCreate = false;
     };
 

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttribute.svelte

@@ -21,7 +21,7 @@
                 $collection.$id,
                 selectedAttribute.key
             );
-            invalidate(Dependencies.ATTRIBUTES);
+            invalidate(Dependencies.COLLECTION);
             showDelete = false;
             await goto(
                 `${base}/console/project-${$page.params.project}/databases/database-${databaseId}/collection-${$page.params.collection}/attributes`