feat: project usage

src/lib/stores/organization.ts

@@ -9,6 +9,7 @@ export type Organization = Models.Team<Record<string, unknown>> & {
     budgetAlerts: number[];
     paymentMethodId: string;
     backupPaymentMethodId: string;
+    billingLimits: Record<string, number>;
     billingCurrentInvoiceDate: string;
     billingNextInvoiceDate: string;
     billingTrialStartDate?: string;

src/routes/console/account/payments/editAddressModal.svelte

@@ -12,7 +12,7 @@
     export let show = false;
     export let selectedAddress: Address;
 
-    let zip = parseInt(selectedAddress.postalCode);
+    let zip = selectedAddress?.postalCode ? parseInt(selectedAddress.postalCode) : null;
     let options = [
         {
             value: 'US',

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

@@ -1,22 +1,36 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
+    import { Card, SecondaryTabsItem, SecondaryTabs, Heading, CardGrid } from '$lib/components';
     import { total } from '$lib/layout/usage.svelte';
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
+    import { bytesToSize, humanFileSize } from '$lib/helpers/sizeConvertion';
 
     export let data;
 
-    $: requests = data.requests;
-    // $: network = data.network;
-    // $: executions = data.executions;
-    // $: documents = data.documents;
-    // $: databases = data.databases;
-    // $: users = data.users;
-    // $: storage = data.storage;
-    // $: buckets = data.buckets;
+    $: files = normalizeFileSize(data.filesTotal);
+    $: requests = data.requestsTotal;
+    $: executions = data.executionsTotal;
+    $: network = data.networkTotal;
+    $: users = data.usersTotal;
 
-    $: console.log(data);
+    function normalizeFileSize(
+        files: {
+            date: string;
+            value: number;
+        }[]
+    ) {
+        const sizes = files.map((e) => e.value);
+        const biggestSize = Math.max(...sizes);
+        const unit = humanFileSize(biggestSize).unit;
+        return {
+            data: files.map((e) => ({
+                date: new Date(e.date).toLocaleDateString(),
+                value: bytesToSize(e.value, unit)
+            })),
+            unit
+        };
+    }
 </script>
 
 <Container>
@@ -40,18 +54,136 @@
             </SecondaryTabsItem>
         </SecondaryTabs>
     </div>
-    {#if requests}
-        <Card>
-            <Heading tag="h6" size="6">{total(requests)}</Heading>
-            <p>Executions</p>
-            <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: 'Count of function executions over time',
-                        data: [...requests.map((e) => [e.date, e.value])]
-                    }
-                ]} />
-        </Card>
-    {/if}
+    <CardGrid>
+        <Heading tag="h4" size="7">Bandwidth</Heading>
+        <p class="text">Calculated for all bandwidth used across your project.</p>
+        <svelte:fragment slot="aside">
+            {#if total(requests)}
+                <div class="u-flex u-gap-8 u-cross-baseline">
+                    <Heading tag="h5" size="4">{total(requests)}</Heading>
+                    <Heading tag="h6" size="6">GB</Heading>
+                </div>
+                <BarChart
+                    series={[
+                        {
+                            name: 'Bandwidth over time',
+                            data: [...requests.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <Heading tag="h4" size="7">Active users</Heading>
+        <p class="text">Active users of your project.</p>
+        <svelte:fragment slot="aside">
+            {#if total(users)}
+                <div class="u-flex u-gap-8 u-cross-baseline">
+                    <Heading tag="h5" size="4">{total(users)}</Heading>
+                    <Heading tag="h6" size="6">AU</Heading>
+                </div>
+                <BarChart
+                    series={[
+                        {
+                            name: 'Active users over time',
+                            data: [...users.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <Heading tag="h4" size="7">Function executions</Heading>
+        <p class="text">Calculated for all functions executed in your project.</p>
+        <svelte:fragment slot="aside">
+            {#if total(executions)}
+                <div class="u-flex u-gap-8 u-cross-baseline">
+                    <Heading tag="h5" size="4">{total(executions)}</Heading>
+                    <Heading tag="h6" size="6">Executions</Heading>
+                </div>
+                <BarChart
+                    series={[
+                        {
+                            name: 'Executions over time',
+                            data: [...executions.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <Heading tag="h4" size="7">Storage</Heading>
+        <p class="text">Calculated for all storage operations in your project.</p>
+        <svelte:fragment slot="aside">
+            {@const size = total(files.data)}
+            {#if size}
+                <div class="u-flex u-gap-8 u-cross-baseline">
+                    <Heading tag="h5" size="4">{size}</Heading>
+                    <Heading tag="h6" size="6">{files.unit}</Heading>
+                </div>
+                <BarChart
+                    series={[
+                        {
+                            name: 'Storage over time',
+                            data: [...files.data]
+                        }
+                    ]} />
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+    <CardGrid>
+        <Heading tag="h4" size="7">Realtime connections</Heading>
+        <p class="text">
+            Calculated for all concurrent connections and messages sent to your project in realtime.
+        </p>
+        <svelte:fragment slot="aside">
+            <div class="u-flex u-gap-8 u-cross-baseline">
+                <Heading tag="h5" size="4">{total(network)}</Heading>
+                <Heading tag="h6" size="6">Concurrent connections</Heading>
+            </div>
+        </svelte:fragment>
+    </CardGrid>
+    <p class="text u-text-color-gray u-margin-block-start-16">
+        Metrics are estimates updated every 24 hours and may not accurately reflect your invoice.
+    </p>
 </Container>

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

@@ -6,17 +6,17 @@ import { error } from '@sveltejs/kit';
 export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.project.getUsage(params.period ?? '30d');
-
+        console.log(response);
         return {
-            //  range: response string;
-            requests: response.requests as unknown as Models.Metric[],
-            network: response.network as unknown as Models.Metric[],
-            executions: response.executions as unknown as Models.Metric[],
-            documents: response.documents as unknown as Models.Metric[],
-            databases: response.databases as unknown as Models.Metric[],
-            users: response.users as unknown as Models.Metric[],
-            storage: response.storage as unknown as Models.Metric[],
-            buckets: response.buckets as unknown as Models.Metric[]
+            range: response.range,
+            bucketsTotal: response.bucketsTotal as unknown as Models.Metric[],
+            filesTotal: response.filesStorage as unknown as Models.Metric[],
+            databasesTotal: response.databasesTotal as unknown as Models.Metric[],
+            documentsTotal: response.documentsTotal as unknown as Models.Metric[],
+            executionsTotal: response.executionsTotal as unknown as Models.Metric[],
+            networkTotal: response.network as unknown as Models.Metric[],
+            requestsTotal: response.requestsTotal as unknown as Models.Metric[],
+            usersTotal: response.usersTotal as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);