feat: usage scafolding for projects(WIP)

src/lib/components/gridItem1.svelte

@@ -7,7 +7,7 @@
     <div class="grid-item-1">
         <div class="grid-item-1-start-start">
             <div class="eyebrow-heading-3"><slot name="eyebrow" /></div>
-            <Heading tag="h2" size="6"><slot name="title" /></Heading>
+            <Heading tag="h2" size="7"><slot name="title" /></Heading>
         </div>
         <div class="grid-item-1-start-end">
             <slot name="status" />

src/lib/components/index.ts

@@ -54,3 +54,5 @@ export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
+export { default as ProgressBar } from './progressBar.svelte';
+export { default as ProjectUsage } from './projectUsage.svelte';

src/lib/components/progressBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    export let name: string;
+    export let icon: string = null;
+    export let unit: string;
+    export let used: number;
+    export let max: number;
+    export let status: null | 'warning' | 'error' = null;
+
+    $: progress = Math.round((used / max) * 100);
+
+    //TODO: depending on the data received, we could set the status
+</script>
+
+<section class="progress-bar">
+    <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+        <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
+            {#if icon}
+                <span class={`icon-${icon}`} aria-hidden="true" />
+            {/if}
+            <span class="text">{name}</span>
+        </h3>
+        <p
+            class="u-medium u-bold"
+            class:u-color-text-warning={status === 'warning'}
+            class:u-color-text-danger={status === 'error'}>
+            {progress}%
+        </p>
+    </div>
+    <div
+        class="progress-bar-container"
+        class:is-warning={status === 'warning'}
+        class:is-danger={status === 'error'}
+        style:--graph-size={progress} />
+    <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
+        <span class="progress-bar-text-used">{used}</span>
+        <span class="progress-bar-text-max">{max}{unit}</span>
+    </div>
+</section>

src/lib/components/projectUsage.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { Card, Heading, ProgressBar } from '.';
+    export let title: string;
+    export let data: {
+        name: string;
+        icon: string;
+        unit: string;
+        max: number;
+        used: number;
+        status: null | 'warning' | 'error';
+    }[];
+</script>
+
+<Card>
+    <div class="grid-item-1">
+        <div class="grid-item-1-start-start">
+            <div class="eyebrow-heading-3"><slot name="eyebrow" /></div>
+            <Heading tag="h2" size="7">{title}</Heading>
+        </div>
+        <div class="grid-item-1-start-end">status</div>
+
+        <div class="grid-item-1-end-start">
+            <ul class="u-flex-vertical u-gap-24">
+                {#each data as project}
+                    <li>
+                        <ProgressBar
+                            name={project.name}
+                            max={project.max}
+                            used={project.used}
+                            unit={project.unit}
+                            icon={project.icon} />
+                    </li>
+                {/each}
+            </ul>
+        </div>
+        <div class="grid-item-1-end-end">
+            <a href="https://#">More details</a>
+        </div>
+    </div>
+</Card>

src/routes/console/organization-[organization]/header.svelte

@@ -36,6 +36,12 @@
             event: 'settings',
             title: 'Settings'
         },
+        {
+            href: `${path}/usage`,
+            event: 'usage',
+            title: 'Usage',
+            hasChildren: true
+        },
         {
             href: `${path}/billing`,
             event: 'billing',

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { Heading, ProjectUsage } from '$lib/components';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+</script>
+
+<Container>
+    <Heading tag="h2" size="5">Usage</Heading>
+    <div class="u-flex u-main-space-between common-section">
+        <p class="text">
+            Metrics are estimates updated every 24 hours and may not accurately reflect your
+            invoice.
+        </p>
+        <div class="u-flex u-gap-8">
+            <p class="text">Usage period:</p>
+
+            JANUARY 2021
+        </div>
+    </div>
+    <ul
+        class="grid-box common-section u-margin-block-start-32"
+        style={`--grid-gap:1.5rem; --grid-item-size:25rem'};`}
+        data-private>
+        {#each data.projectUsage as projectUsage}
+        {@const usage}
+            <ProjectUsage data={projectUsage} />
+        {/each}
+    </ul>
+</Container>

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

@@ -0,0 +1,22 @@
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    try {
+        return {
+            projectUsage: [
+                {
+                    title: 'Total',
+                    usage: {
+                        name: 'badwidth',
+                        max: 100,
+                        used: 50,
+                        unit: 'GB'
+                    }
+                }
+            ]
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};

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

@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params }) => {
             params.function,
             params.period ?? '30d'
         );
-
+        console.log(response);
         return {
             count: response.executionsTotal as unknown as Models.Metric[],
             errors: response.buildsFailure as unknown as Models.Metric[]

src/routes/console/project-[project]/settings/header.svelte

@@ -21,6 +21,17 @@
             href: `${path}/webhooks`,
             title: 'Webhooks',
             event: 'webhooks'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage',
+            hasChildren: true
+        },
+        {
+            href: `${path}/billing`,
+            title: 'Billing',
+            event: 'billing'
         }
     ];
 </script>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
+    import { total } from '$lib/layout/usage.svelte';
+    import { BarChart } from '$lib/charts';
+    import { page } from '$app/stores';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: errors = data.errors;
+</script>
+
+<Container>
+    <div class="u-flex u-main-space-between common-section">
+        <Heading tag="h2" size="5">Functions</Heading>
+        <SecondaryTabs>
+            <SecondaryTabsItem
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
+                disabled={($page.params.period ?? '24h') === '24h'}>
+                24h
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/30d`}
+                disabled={$page.params.period === '30d'}>
+                30d
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/90d`}
+                disabled={$page.params.period === '90d'}>
+                90d
+            </SecondaryTabsItem>
+        </SecondaryTabs>
+    </div>
+    {#if count}
+        <Card>
+            <Heading tag="h6" size="6">{total(count)}</Heading>
+            <p>Executions</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of function executions over time',
+                        data: [...count.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </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>

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

@@ -0,0 +1,20 @@
+// import type { Models } from '@appwrite.io/console';
+// import { sdk } from '$lib/stores/sdk';
+// import type { PageLoad } from './$types';
+// import { error } from '@sveltejs/kit';
+
+// export const load: PageLoad = async ({ params }) => {
+//     try {
+//         const response = await sdk.forProject.functions.getFunctionUsage(
+//             params.function,
+//             params.period ?? '30d'
+//         );
+
+//         return {
+//             count: response.executionsTotal as unknown as Models.Metric[],
+//             errors: response.buildsFailure as unknown as Models.Metric[]
+//         };
+//     } catch (e) {
+//         throw error(e.code, e.message);
+//     }
+// };