feat: function page layout

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

@@ -44,7 +44,7 @@
                 <GridItem1
                     href={`${base}/console/project-${project}/functions/function/${func.$id}`}>
                     <svelte:fragment slot="title">
-                        <div class="u-flex u-gap-12 u-cross-center">
+                        <div class="u-flex u-gap-32 u-cross-center">
                             <div class="avatar is-medium">
                                 <img
                                     src={`${base}/icons/${$app.themeInUse}/color/${
@@ -52,7 +52,7 @@
                                     }.svg`}
                                     alt="technology" />
                             </div>
-                            {func.name}
+                            <span class="text"> {func.name}</span>
                         </div>
                     </svelte:fragment>
                     <!-- <svelte:fragment slot="status">{func.status}</svelte:fragment> -->
@@ -69,18 +69,6 @@
                                     }} />
                             </li>
                         {/if}
-                        <!--                         
-                        <li>
-                            <span
-                                class:u-opacity-0-2={!func.events}
-                                class="icon-exclamation"
-                                aria-hidden="true"
-                                use:tooltip={{
-                                    content: func.events
-                                        ? 'Antivirus enabled'
-                                        : 'Antivirus disabled'
-                                }} />
-                        </li> -->
                     </svelte:fragment>
 
                     <Copy value={func.$id}>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
@@ -20,6 +21,11 @@
             navigate: event,
             title: $func.name,
             level: 4,
+            back: `${base}/console/project-${$page.params.project}/functions`,
+            copy: {
+                text: 'ID Details',
+                value: functionId
+            },
             breadcrumbs: {
                 title: $func.name,
                 href: `function/${functionId}`
@@ -27,15 +33,15 @@
             tabs: [
                 {
                     href: path,
-                    title: 'Overview'
+                    title: 'Deployments'
                 },
                 {
-                    href: `${path}/monitors`,
-                    title: 'Monitors'
+                    href: `${path}/usage`,
+                    title: 'Usage'
                 },
                 {
-                    href: `${path}/logs`,
-                    title: 'Logs'
+                    href: `${path}/executions`,
+                    title: 'Executions'
                 },
                 {
                     href: `${path}/settings`,

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

@@ -1,76 +1,179 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import { CardGrid, Pagination, Copy, DropList, DropListItem, Empty } from '$lib/components';
     import {
         Table,
         TableHeader,
         TableBody,
         TableRow,
         TableCellHead,
-        TableCellLink,
+        TableCell,
         TableCellText
     } from '$lib/elements/table';
-    import { func } from './store';
+    import { deploymentList, func } from './store';
     import { Container } from '$lib/layout';
     import Create from './_create.svelte';
     import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
     let showCreate = false;
     let offset = 0;
+    let showDropdown = [];
 
-    const limit = 25;
-    const project = $page.params.project;
     const functionId = $page.params.function;
 
-    $: request = sdkForProject.functions.listDeployments(functionId, search, limit, offset);
+    $: deploymentList.load(functionId, search, $pageLimit, offset ?? 0);
     $: if (search) offset = 0;
+    $: activeDeployment = $deploymentList.deployments.find((d) => d.status === 'active');
 </script>
 
 <Container>
-    <h1>Overview</h1>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <h2 class="heading-level-5">Deployments</h2>
 
-    <Card>
-        <p><b>Function ID:</b> {$func.$id}</p>
-        <p><b>Runtime:</b> {$func.runtime}</p>
-        <p><b>Last Updated:</b> {$func.$updatedAt}</p>
-        <p><b>Created:</b> {$func.$createdAt}</p>
-    </Card>
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create deployment</span>
+        </Button>
+    </div>
 
-    <h1>Deployments</h1>
+    <div class="common-section">
+        <h2 class="heading-level-7">Active</h2>
+    </div>
+    {#if activeDeployment}
+        <CardGrid>
+            <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+                <div class="avatar is-medium">
+                    <img
+                        src={`${base}/icons/${$app.themeInUse}/color/${
+                            $func.runtime.split('-')[0]
+                        }.svg`}
+                        alt="technology" />
+                </div>
+                <div class="">
+                    <p><b>Function ID: {$func.$id} </b></p>
+                    <p>Deployment ID: {$func.deployment}</p>
+                </div>
+            </div>
+            <svelte:fragment slot="aside">
+                <div class="u-flex u-main-space-between">
+                    <div>
+                        <p>Created at: {toLocaleDateTime($func.$createdAt)}</p>
+                        <p>Updated at: {toLocaleDateTime($func.$updatedAt)}</p>
+                        <p>Entrypoint: {activeDeployment?.entrypoint}</p>
+                    </div>
+                    status
+                </div>
+            </svelte:fragment>
 
-    <Card>
-        <InputSearch bind:value={search} />
-    </Card>
+            <svelte:fragment slot="actions">
+                <Button text on:click={() => console.log('open Logs')}>Logs</Button>
+                <Button secondary on:click={() => console.log('exnow')}>Execute now</Button>
+            </svelte:fragment>
+        </CardGrid>
+    {:else}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => (showCreate = true)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p class="u-text-center">
+                        Add a new deployment, or activate an existing one to see your function in
+                        action.
+                    </p>
+                    <p class="u-text-center">
+                        Learn more about deployments in our <a
+                            class="link"
+                            href="https://appwrite.io/docs/functions#build"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            Documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </Empty>
+    {/if}
 
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        <Table>
-            <TableHeader>
-                <TableCellHead>ID</TableCellHead>
-                <TableCellHead>Active</TableCellHead>
-            </TableHeader>
-            <TableBody>
-                {#each response.deployments as deployment}
-                    <TableRow>
-                        <TableCellLink
-                            title="ID"
-                            href={`${base}/console/project-${project}/storage/bucket/${functionId}/${deployment.$id}`}>
-                            {deployment.$id}
-                        </TableCellLink>
-                        <TableCellText title="Active">{deployment.activate}</TableCellText>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </Table>
+    <div class="common-section">
+        <h2 class="heading-level-7">Inactive</h2>
+    </div>
 
-        <Pagination {limit} bind:offset sum={response.total} />
-    {/await}
+    <Table>
+        <TableHeader>
+            <TableCellHead>Deployment ID</TableCellHead>
+            <TableCellHead>Created</TableCellHead>
+            <TableCellHead>Status</TableCellHead>
+            <TableCellHead>Build time</TableCellHead>
+            <TableCellHead>Size</TableCellHead>
+            <TableCellHead />
+        </TableHeader>
+        <TableBody>
+            {#each $deploymentList.deployments as deployment, index}
+                <TableRow>
+                    <TableCell title="Deployment ID">
+                        <Copy value={deployment.$id}>
+                            <Pill button
+                                ><span class="icon-duplicate" aria-hidden="true" />
+                                <span class="text u-trim">{deployment.$id}</span></Pill>
+                        </Copy>
+                    </TableCell>
+                    <TableCellText title="Created">
+                        {toLocaleDateTime(deployment.$createdAt)}
+                    </TableCellText>
+                    <TableCellText title="Status">{deployment.activate}</TableCellText>
+                    <TableCellText title="Build Time">{deployment.entrypoint}</TableCellText>
+                    <TableCellText title="Size">{deployment.size}</TableCellText>
+                    <TableCell showOverflow>
+                        <DropList
+                            bind:show={showDropdown[index]}
+                            position="bottom"
+                            horizontal="left"
+                            arrow={false}>
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="More options"
+                                on:click|preventDefault={() => {
+                                    showDropdown[index] = !showDropdown[index];
+                                }}>
+                                <span class="icon-dots-horizontal" aria-hidden="true" />
+                            </button>
+                            <svelte:fragment slot="list">
+                                <DropListItem
+                                    icon="lightning-bolt"
+                                    on:click={() => {
+                                        console.log('execute now');
+                                    }}>Execute now</DropListItem>
+                                <DropListItem
+                                    icon="terminal"
+                                    on:click={() => {
+                                        console.log('output');
+                                    }}>Output</DropListItem>
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        console.log('delete');
+                                    }}>Delete</DropListItem>
+                            </svelte:fragment>
+                        </DropList>
+                    </TableCell>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
 
-    <Button on:click={() => (showCreate = true)}>Upload</Button>
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {$deploymentList?.total}</p>
+        <Pagination limit={$pageLimit} bind:offset sum={$deploymentList?.total} />
+    </div>
 </Container>
 
 <Create bind:showCreate />

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

@@ -1,17 +1,35 @@
+import { cachedStore } from '$lib/helpers/cache';
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-
-function createFunctionStore() {
-    const { subscribe, set } = writable<Models.Function>();
 
+export const func = cachedStore<
+    Models.Function,
+    {
+        load: (functionId: string) => Promise<void>;
+    }
+>('func', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (functionId: string) => {
+        load: async (functionId) => {
             set(await sdkForProject.functions.get(functionId));
         }
     };
-}
+});
 
-export const func = createFunctionStore();
+export const deploymentList = cachedStore<
+    Models.DeploymentList,
+    {
+        load: (functionId: string, search: string, limit: number, offset: number) => Promise<void>;
+    }
+>('deploymentList', function ({ set }) {
+    return {
+        load: async (functionId, search, limit, offset) => {
+            const response = await sdkForProject.functions.listDeployments(
+                functionId,
+                search,
+                limit,
+                offset
+            );
+            set(response);
+        }
+    };
+});

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

@@ -15,17 +15,3 @@ export const functionList = cachedStore<
         }
     };
 });
-
-export const runtimeList = cachedStore<
-    Models.RuntimeList,
-    {
-        load: () => Promise<void>;
-    }
->('runtimeList', function ({ set }) {
-    return {
-        load: async () => {
-            const response = await sdkForProject.functions.listRuntimes();
-            set(response);
-        }
-    };
-});