From 1cf8e95e9c3cc614c11809d886fceee3b836c3e3 Mon Sep 17 00:00:00 2001
From: shimon <shimon@appwrite.io>
Date: Mon, 21 Aug 2023 15:06:46 +0300
Subject: [PATCH 1/2] roll back to old usage charts

---
 package-lock.json                             | 10 +--
 package.json                                  |  2 +-
 src/lib/layout/usage.svelte                   | 83 ++++++++++++++++++-
 .../auth/usage/[[period]]/+page.svelte        | 26 +++++-
 .../auth/usage/[[period]]/+page.ts            |  6 +-
 .../usage/[[period]]/+page.svelte             | 26 +++++-
 .../usage/[[period]]/+page.ts                 |  6 +-
 .../usage/[[period]]/+page.svelte             | 26 +++++-
 .../usage/[[period]]/+page.ts                 |  6 +-
 .../databases/usage/[[period]]/+page.svelte   | 26 +++++-
 .../databases/usage/[[period]]/+page.ts       |  6 +-
 .../usage/[[period]]/+page.svelte             | 18 +++-
 .../usage/[[period]]/+page.ts                 |  3 +-
 .../project-[project]/overview/+layout.svelte | 14 ++--
 .../overview/bandwith.svelte                  |  4 +-
 .../overview/requests.svelte                  |  8 +-
 .../usage/[[period]]/+page.svelte             | 26 +++++-
 .../bucket-[bucket]/usage/[[period]]/+page.ts |  6 +-
 .../storage/usage/[[period]]/+page.svelte     | 27 +++++-
 .../storage/usage/[[period]]/+page.ts         |  6 +-
 20 files changed, 301 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a7482a42f8..b7f4ad53e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@analytics/google-tag-manager": "^0.5.3",
-                "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
+                "@appwrite.io/console": "npm:shimon-appwrite-console@0.1.1",
                 "@appwrite.io/pink": "0.1.0-next.3",
                 "@appwrite.io/pink-icons": "^0.1.0-next.3",
                 "@popperjs/core": "^2.11.6",
@@ -167,10 +167,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "name": "matej-appwrite-console",
-            "version": "7.1.126",
-            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.126.tgz",
-            "integrity": "sha512-ulgi17MwokLEG1BF/cmZIHdrv47pj1Hb4TLjEhIt57pMKuLDQ/VnFK6hyIBmD8pvU+wU56zEyFKl0Q+RIzFaow==",
+            "name": "shimon-appwrite-console",
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/shimon-appwrite-console/-/shimon-appwrite-console-0.1.1.tgz",
+            "integrity": "sha512-CT5RYvcaei5mk0VaXWVsEEjQgcegyYAGOV/SHndm79oaxF0E2RzI9kZqtN6f36GBPoumXZ8JJQuHygv0Th/OJQ==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 18e6008d9c..29d77fe54d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@analytics/google-tag-manager": "^0.5.3",
-        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
+        "@appwrite.io/console": "npm:shimon-appwrite-console@0.1.1",
         "@appwrite.io/pink": "0.1.0-next.3",
         "@appwrite.io/pink-icons": "^0.1.0-next.3",
         "@popperjs/core": "^2.11.6",
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 3e2b5c8729..bf2f3380de 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -13,10 +13,12 @@
 
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { BarChart } from '$lib/charts';
+    import { BarChart, LineChart } from '$lib/charts';
     import { Card, SecondaryTabs, SecondaryTabsItem, Heading } from '$lib/components';
+    import { Colors } from '$lib/charts/config';
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
+    import { Tiles } from '../components/index.js';
 
     type MetricMetadata = {
         title: string;
@@ -25,7 +27,16 @@
 
     export let title: string;
     export let count: Models.Metric[];
+    export let created: Models.Metric[];
+    export let read: Models.Metric[];
+    export let updated: Models.Metric[];
+    export let deleted: Models.Metric[];
+
     export let countMetadata: MetricMetadata;
+    export let createdMetadata: MetricMetadata;
+    export let readMetadata: MetricMetadata;
+    export let updatedMetadata: MetricMetadata;
+    export let deletedMetadata: MetricMetadata;
     export let path: string = null;
 </script>
 
@@ -62,6 +73,76 @@
             </div>
         {/if}
     </Card>
+    <Tiles>
+        <Card isTile>
+            {#if created}
+                <Heading tag="h6" size="6">{total(created)}</Heading>
+                <p>{createdMetadata.title}</p>
+                <div class="u-margin-block-start-16" />
+                <div class="chart-container">
+                    <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" />
+                <div class="chart-container">
+                    <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" />
+                <div class="chart-container">
+                    <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" />
+                <div class="chart-container">
+                    <LineChart
+                        series={[
+                            {
+                                name: deletedMetadata.legend,
+                                data: [...deleted.map((e) => [e.date, e.value])],
+                                color: Colors.Quinary
+                            }
+                        ]} />
+                </div>
+            {/if}
+        </Card>
+    </Tiles>
 </Container>
 
 <style lang="scss">
diff --git a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
index 33ef1bac09..879419d725 100644
--- a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.usersTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Users"
     path={`/console/project-${$page.params.project}/auth/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Users',
         title: 'Registered users'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Users created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Users read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Users updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Users deleted'
     }} />
diff --git a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
index b4a930690f..6ba6fec31a 100644
--- a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
@@ -8,7 +8,11 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.users.getUsage(period ?? '30d');
         return {
-            usersTotal: response.usersTotal as unknown as Models.Metric[]
+            count: response.usersCount as unknown as Models.Metric[],
+            created: response.usersCreate as unknown as Models.Metric[],
+            read: response.usersRead as unknown as Models.Metric[],
+            updated: response.usersUpdate as unknown as Models.Metric[],
+            deleted: response.usersDelete as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
index fd7382f3e1..b4f9eb530d 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.documentsTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Documents',
         title: 'Total documents'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Documents created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Documents read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Documents updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Documents deleted'
     }} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
index 924385aef0..b67082b4f4 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
@@ -10,6 +10,10 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        documentsTotal: response.documentsTotal as unknown as Models.Metric[]
+        count: response.documentsCount as unknown as Models.Metric[],
+        created: response.documentsCreate as unknown as Models.Metric[],
+        read: response.documentsRead as unknown as Models.Metric[],
+        updated: response.documentsUpdate as unknown as Models.Metric[],
+        deleted: response.documentsDelete as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index b376c62b18..8691504465 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.collectionsTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Collections',
         title: 'Total collections'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Collections created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Collections read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Collections updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Collections deleted'
     }} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
index bffa5e4dbc..95b4ff7f2e 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
@@ -9,6 +9,10 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        collectionsTotal: response.collectionsTotal as unknown as Models.Metric[]
+        count: response.collectionsCount as unknown as Models.Metric[],
+        created: response.collectionsCreate as unknown as Models.Metric[],
+        read: response.collectionsRead as unknown as Models.Metric[],
+        updated: response.collectionsUpdate as unknown as Models.Metric[],
+        deleted: response.collectionsDelete as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
index dce3a94d43..a4a116618b 100644
--- a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.databasesTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Databases',
         title: 'Total databases'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Databases created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Databases read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Databases updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Databases deleted'
     }} />
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
index 44c63496b4..5ebb5ac9f2 100644
--- a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
@@ -8,7 +8,11 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.databases.getUsage(period ?? '30d');
         return {
-            databasesTotal: response.databasesTotal as unknown as Models.Metric[]
+            count: response.databasesCount as unknown as Models.Metric[],
+            created: response.databasesCreate as unknown as Models.Metric[],
+            read: response.databasesRead as unknown as Models.Metric[],
+            updated: response.databasesUpdate as unknown as Models.Metric[],
+            deleted: response.databasesDelete as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index ed5901ed84..3ab9912461 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -7,7 +7,9 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-    $: count = data.executionsTotal;
+
+    $: count = data.count;
+    $: errors = data.errors;
 </script>
 
 <Container>
@@ -45,4 +47,18 @@
                 ]} />
         </Card>
     {/if}
+    {#if errors}
+        <Card>
+            <Heading tag="h6" size="6">{total(errors)}</Heading>
+            <p>Errors</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of function errors over time',
+                        data: [...errors.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </Card>
+    {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
index eabe89bed8..e7391906f7 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
@@ -11,7 +11,8 @@ export const load: PageLoad = async ({ params }) => {
         );
 
         return {
-            executionsTotal: response.executionsTotal as unknown as Models.Metric[]
+            count: response.executionsTotal as unknown as Models.Metric[],
+            errors: response.executionsFailure as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 8c7559701f..5d5e5c3ae0 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -95,7 +95,7 @@
             <Onboard {projectId} />
         {:else}
             {#if $usage}
-                {@const storage = humanFileSize(total($usage.filesStorage) ?? 0)}
+                {@const storage = humanFileSize(total($usage.storage) ?? 0)}
                 <section class="common-section">
                     <div class="grid-dashboard-1s-2m-6l">
                         <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -119,14 +119,14 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.documentsTotal) ?? 0)}
+                                        {format(total($usage.documents) ?? 0)}
                                     </div>
                                     <div>Documents</div>
                                 </div>
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Databases: {format(total($usage.databasesTotal) ?? 0)}
+                                        Databases: {format(total($usage.databases) ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -147,14 +147,14 @@
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
                                         {storage.value}
-                                        <span class="body-text-2 u-bold">{storage.unit}</span>
+                                        <span class="body-text-2">{storage.unit}</span>
                                     </div>
                                     <div>Storage</div>
                                 </div>
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Buckets: {format(total($usage.bucketsTotal) ?? 0)}
+                                        Buckets: {format(total($usage.buckets) ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -174,7 +174,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.usersTotal) ?? 0)}
+                                        {format(total($usage.users) ?? 0)}
                                     </div>
                                     <div>Users</div>
                                 </div>
@@ -195,7 +195,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.executionsTotal) ?? 0)}
+                                        {format(total($usage.executions) ?? 0)}
                                     </div>
                                     <div>Executions</div>
                                 </div>
diff --git a/src/routes/console/project-[project]/overview/bandwith.svelte b/src/routes/console/project-[project]/overview/bandwith.svelte
index defadb90c3..f4154a8a9e 100644
--- a/src/routes/console/project-[project]/overview/bandwith.svelte
+++ b/src/routes/console/project-[project]/overview/bandwith.svelte
@@ -17,7 +17,7 @@
         date: number;
         value: number;
     }>;
-    $: bandwith = humanFileSize(total($usage?.network));
+    $: bandwith = humanFileSize(total($usage.network));
 
     $: if (period) {
         showPeriod = false;
@@ -28,7 +28,7 @@
     <div>
         <div class="heading-level-4">
             {bandwith.value}
-            <span class="body-text-2 u-bold">{bandwith.unit}</span>
+            <span class="body-text-2">{bandwith.unit}</span>
         </div>
         <div>Bandwidth</div>
     </div>
diff --git a/src/routes/console/project-[project]/overview/requests.svelte b/src/routes/console/project-[project]/overview/requests.svelte
index b762f22dab..30e6509863 100644
--- a/src/routes/console/project-[project]/overview/requests.svelte
+++ b/src/routes/console/project-[project]/overview/requests.svelte
@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    $: requests = $usage?.requestsTotal as unknown as Array<{
+    $: requests = $usage?.requests as unknown as Array<{
         date: number;
         value: number;
     }>;
@@ -25,7 +25,7 @@
 <div class="u-flex u-gap-16 u-main-space-between">
     <div>
         <div class="heading-level-4">
-            {format(total($usage?.requestsTotal))}
+            {format(total($usage.requests))}
         </div>
         <div>Requests</div>
     </div>
@@ -41,7 +41,7 @@
         </svelte:fragment>
     </DropList>
 </div>
-{#if total($usage?.requestsTotal) !== 0}
+{#if total($usage.requests) !== 0}
     <div style="height: 12rem;">
         <LineChart
             options={{
@@ -54,7 +54,7 @@
             series={[
                 {
                     name: 'Requests',
-                    data: [...(requests?.map((e) => [e.date, e.value]) ?? [])]
+                    data: [...requests.map((e) => [e.date, e.value])]
                 }
             ]} />
     </div>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
index 9b18a11dfa..e9111d1503 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.filesTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Files"
     path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Files',
         title: 'Total files'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Files created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Files read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Files updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Files deleted'
     }} />
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
index d861437175..2cb8294fa7 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
@@ -9,6 +9,10 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        filesTotal: response.filesTotal as unknown as Models.Metric[]
+        count: response.filesCount as unknown as Models.Metric[],
+        created: response.filesCreate as unknown as Models.Metric[],
+        read: response.filesRead as unknown as Models.Metric[],
+        updated: response.filesUpdate as unknown as Models.Metric[],
+        deleted: response.filesDelete as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
index 8b5d097596..5ac40adb91 100644
--- a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
@@ -4,14 +4,39 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-    $: count = data.bucketsTotal;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Buckets"
     path={`/console/project-${$page.params.project}/storage/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Buckets',
         title: 'Total buckets'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Buckets created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Buckets read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Buckets updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Buckets deleted'
     }} />
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
index 6f3a947e36..0cc4a9cca8 100644
--- a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
@@ -8,7 +8,11 @@ export const load: PageLoad = async ({ params }) => {
         const response = await sdk.forProject.storage.getUsage(params.period ?? '30d');
 
         return {
-            bucketsTotal: response.bucketsTotal as unknown as Models.Metric[]
+            count: response.bucketsCount as unknown as Models.Metric[],
+            created: response.bucketsCreate as unknown as Models.Metric[],
+            read: response.bucketsRead as unknown as Models.Metric[],
+            updated: response.bucketsUpdate as unknown as Models.Metric[],
+            deleted: response.bucketsDelete as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

From a3a8a6c797c111e8acaf1d545458e46a847f2790 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 22 Aug 2023 20:10:39 +0200
Subject: [PATCH 2/2] fix: files

---
 package-lock.json                                | 16 ++++++++--------
 package.json                                     |  2 +-
 .../project-[project]/overview/+layout.svelte    |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5711a27fcd..3c691137ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@analytics/google-tag-manager": "^0.5.3",
-                "@appwrite.io/console": "npm:shimon-appwrite-console@0.1.1",
+                "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.24",
                 "@appwrite.io/pink": "0.1.0-next.4",
                 "@appwrite.io/pink-icons": "^0.1.0-next.4",
                 "@popperjs/core": "^2.11.6",
@@ -167,10 +167,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "name": "shimon-appwrite-console",
-            "version": "0.1.1",
-            "resolved": "https://registry.npmjs.org/shimon-appwrite-console/-/shimon-appwrite-console-0.1.1.tgz",
-            "integrity": "sha512-CT5RYvcaei5mk0VaXWVsEEjQgcegyYAGOV/SHndm79oaxF0E2RzI9kZqtN6f36GBPoumXZ8JJQuHygv0Th/OJQ==",
+            "name": "khushboo-console-vcs",
+            "version": "0.0.24",
+            "resolved": "https://registry.npmjs.org/khushboo-console-vcs/-/khushboo-console-vcs-0.0.24.tgz",
+            "integrity": "sha512-uk5eyq9QzzYFW/D2l15gK3lBcvGDvLYedmHYDfh3Q+zob7Br5GgCMhONLhyWlgq4fOPP4TLOAAr5EDN7oYYKng==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -8908,9 +8908,9 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "@appwrite.io/console": {
-            "version": "npm:shimon-appwrite-console@0.1.1",
-            "resolved": "https://registry.npmjs.org/shimon-appwrite-console/-/shimon-appwrite-console-0.1.1.tgz",
-            "integrity": "sha512-CT5RYvcaei5mk0VaXWVsEEjQgcegyYAGOV/SHndm79oaxF0E2RzI9kZqtN6f36GBPoumXZ8JJQuHygv0Th/OJQ==",
+            "version": "npm:khushboo-console-vcs@0.0.24",
+            "resolved": "https://registry.npmjs.org/khushboo-console-vcs/-/khushboo-console-vcs-0.0.24.tgz",
+            "integrity": "sha512-uk5eyq9QzzYFW/D2l15gK3lBcvGDvLYedmHYDfh3Q+zob7Br5GgCMhONLhyWlgq4fOPP4TLOAAr5EDN7oYYKng==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 0319fbf494..958f71f713 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@analytics/google-tag-manager": "^0.5.3",
-        "@appwrite.io/console": "npm:shimon-appwrite-console@0.1.1",
+        "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.24",
         "@appwrite.io/pink": "0.1.0-next.4",
         "@appwrite.io/pink-icons": "^0.1.0-next.4",
         "@popperjs/core": "^2.11.6",
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index dd9664bb1f..b5a22e3383 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -82,7 +82,7 @@
             <Onboard {projectId} />
         {:else}
             {#if $usage}
-                {@const storage = humanFileSize(totalMetrics($usage.files) ?? 0)}
+                {@const storage = humanFileSize(totalMetrics($usage.storage) ?? 0)}
                 <section class="common-section">
                     <div class="grid-dashboard-1s-2m-6l">
                         <div class="card is-2-columns-medium-screen is-3-columns-large-screen">