feat: usage

src/lib/layout/usage.svelte

@@ -1,5 +1,13 @@
 <script context="module" lang="ts">
     export type UsagePeriods = '24h' | '30d' | '90d';
+
+    export function last(set: Models.Metric[]): Models.Metric | null {
+        return set.slice(-1)[0] ?? null;
+    }
+
+    export function total(set: Models.Metric[]): number {
+        return set.reduce((prev, curr) => prev + curr.value, 0);
+    }
 </script>
 
 <script lang="ts">
@@ -27,14 +35,6 @@
     export let deletedMetadata: MetricMetadata;
 
     export let range: UsagePeriods;
-
-    function last(set: Models.Metric[]): Models.Metric | null {
-        return set.slice(-1)[0] ?? null;
-    }
-
-    function total(set: Models.Metric[]): number {
-        return set.reduce((prev, curr) => prev + curr.value, 0);
-    }
 </script>
 
 <Container>

src/routes/console/project-[project]/functions/function/[function]/monitors/+page.svelte

@@ -1,10 +0,0 @@
-<script>
-    import { Card } from '$lib/components';
-    import { Container } from '$lib/layout';
-</script>
-
-<Container>
-    <h1>Monitors</h1>
-
-    <Card />
-</Container>

src/routes/console/project-[project]/functions/function/[function]/store.ts

@@ -56,3 +56,17 @@ export const deploymentList = cachedStore<
 });
 
 export const execute: Writable<Models.Function> = writable();
+
+export const functionUsage = cachedStore<
+    Models.UsageFunctions,
+    {
+        load: (functionId: string, range: string) => Promise<void>;
+    }
+>('functionUsage', function ({ set }) {
+    return {
+        load: async (functionId, range) => {
+            const usages = await sdkForProject.functions.getFunctionUsage(functionId, range);
+            set(usages);
+        }
+    };
+});

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

@@ -1 +1,61 @@
-<h1>Usage</h1>
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { functionUsage } from '../store';
+    import { Container } from '$lib/layout';
+    import type { UsagePeriods } from '$lib/layout/usage.svelte';
+    import { Card, DropTabs, DropTabsItem, Heading } from '$lib/components';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    const functionId = $page.params.function;
+    import { last } from '$lib/layout/usage.svelte';
+    import { BarChart } from '$lib/charts';
+    let range: UsagePeriods = '30d';
+
+    $: functionUsage.load(functionId, range);
+
+    // TODO: metric type is wrong
+    $: count = $functionUsage?.executionsTotal as unknown as Models.Metric[];
+
+    $: errors = $functionUsage?.buildsFailure as unknown as Models.Metric[];
+</script>
+
+<Container>
+    <div class="u-flex u-main-space-between common-section">
+        <Heading tag="h2" size="5">Functions</Heading>
+        <DropTabs>
+            <DropTabsItem on:click={() => (range = '24h')} disabled={range === '24h'}>
+                24h
+            </DropTabsItem>
+            <DropTabsItem on:click={() => (range = '30d')} disabled={range === '30d'}>
+                30d
+            </DropTabsItem>
+            <DropTabsItem on:click={() => (range = '90d')} disabled={range === '90d'}>
+                90d
+            </DropTabsItem>
+        </DropTabs>
+    </div>
+    <Card>
+        <Heading tag="h6" size="6">{last(count).value}</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>
+    <Card>
+        <Heading tag="h6" size="6">{last(errors).value}</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>
+</Container>