From b15d7cbb56a0b9cfd2d771ea79b1bd395c3df6da Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 13 Nov 2024 15:30:44 +0100
Subject: [PATCH] feat: deployments

---
 src/lib/components/emptyFilter.svelte         |  40 +--
 src/lib/components/emptySearch.svelte         |   2 +-
 src/lib/components/filters/filters.svelte     |  15 +-
 src/lib/components/viewSelector.svelte        |   1 +
 src/lib/elements/forms/button.svelte          |   2 +-
 .../sites/site-[site]/breadcrumbs.svelte      |   5 +
 .../site-[site]/deployments/+layout.svelte    | 153 ++++++++++
 .../sites/site-[site]/deployments/+layout.ts  |  28 ++
 .../site-[site]/deployments/+page.svelte      | 198 ++++++++++++
 .../sites/site-[site]/deployments/+page.ts    |  32 ++
 .../site-[site]/deployments/cancel.svelte     |  49 +++
 .../site-[site]/deployments/delete.svelte     |  49 +++
 .../deployment-[deployment]/+page.svelte      |  36 +++
 .../deployment-[deployment]/+page.ts          |  13 +
 .../deployment-[deployment]/store.ts          |   5 +
 .../deployments/deploymentCard.svelte         | 121 ++++++++
 .../deployments/deploymentCreatedBy.svelte    |  14 +
 .../deployments/deploymentDomains.svelte      |  38 +++
 .../deployments/deploymentSource.svelte       |  38 +++
 .../deployments/quickFilters.svelte           | 281 ++++++++++++++++++
 .../deployments/redeployModal.svelte          |  56 ++++
 .../sites/site-[site]/deployments/store.ts    |  25 ++
 .../site-[site]/deployments/table.svelte      | 196 ++++++++++++
 23 files changed, 1369 insertions(+), 28 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.ts
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.ts
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancel.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/delete.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCard.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCreatedBy.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentDomains.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentSource.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte

diff --git a/src/lib/components/emptyFilter.svelte b/src/lib/components/emptyFilter.svelte
index 6e13c0cd8c..41b7fcccae 100644
--- a/src/lib/components/emptyFilter.svelte
+++ b/src/lib/components/emptyFilter.svelte
@@ -1,26 +1,28 @@
 <script lang="ts">
+    import { Card, Empty, Layout } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
-    import { EmptySearch } from '.';
     import { queries } from './filters';
 
     export let resource: string;
 </script>
 
-<EmptySearch hidePages>
-    <div class="common-section">
-        <div class="u-text-center common-section">
-            <b class="body-text-2 u-bold">Sorry, we couldn't find any {resource}.</b>
-            <p>There are no {resource} that match your filters.</p>
-        </div>
-        <div class="u-flex common-section u-main-center">
-            <Button
-                secondary
-                on:click={() => {
-                    queries.clearAll();
-                    queries.apply();
-                }}>
-                Clear filters
-            </Button>
-        </div>
-    </div>
-</EmptySearch>
+<Card.Base padding="none">
+    <Empty
+        title={`Sorry, we couldn't find any ${resource}`}
+        description={`There are no ${resource} that match your filters.`}
+        type="secondary">
+        <svelte:fragment slot="actions">
+            <Layout.Stack direction="row" justifyContent="center">
+                <Button
+                    secondary
+                    on:click={() => {
+                        queries.clearAll();
+                        queries.apply();
+                    }}>
+                    Clear filters
+                </Button>
+                <slot />
+            </Layout.Stack>
+        </svelte:fragment>
+    </Empty>
+</Card.Base>
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 151ddcdc73..5a0b7e00dd 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -9,7 +9,7 @@
 
 <Card.Base padding="none">
     <Empty
-        title={`Sorry, we couldn't find ‘${search}’`}
+        title={`Sorry, we couldn't find ${search ? `‘${search}’` : `any ${target}`}`}
         description={`There are no ${target} that match your search.`}
         type="secondary">
         <svelte:fragment slot="actions">
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index af3920fff6..c6e64f47d7 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -158,13 +158,13 @@
                     {/if}
                     <div class="u-flex u-gap-8">
                         {#if singleCondition}
-                            <Button text on:click={toggleDropdown}>Cancel</Button>
+                            <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
                         {:else}
-                            <Button disabled={applied === 0} text on:click={clearAll}>
+                            <Button size="s" disabled={applied === 0} text on:click={clearAll}>
                                 Clear all
                             </Button>
                         {/if}
-                        <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                        <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
                     </div>
                 </div>
             </div>
@@ -174,7 +174,7 @@
 
 <div class="is-only-mobile">
     <slot name="mobile" {disabled} toggle={toggleMobileModal}>
-        <Button secondary on:click={toggleMobileModal} {fullWidthMobile}>
+        <Button size="s" secondary on:click={toggleMobileModal} {fullWidthMobile}>
             <i class="icon-filter u-opacity-50" />
             Filters
             {#if applied > 0}
@@ -219,11 +219,12 @@
                 {/if}
                 <div class="u-flex u-gap-8">
                     {#if singleCondition}
-                        <Button text on:click={() => (showFiltersMobile = false)}>Cancel</Button>
+                        <Button size="s" text on:click={() => (showFiltersMobile = false)}
+                            >Cancel</Button>
                     {:else}
-                        <Button text on:click={clearAll}>Clear all</Button>
+                        <Button size="s" text on:click={clearAll}>Clear all</Button>
                     {/if}
-                    <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                    <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
                 </div>
             </div>
         </svelte:fragment>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index d0d69ed658..83779794b5 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -78,6 +78,7 @@
         {#if $columns?.length}
             <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
                 <Button
+                    size="s"
                     secondary
                     on:click={() => (showSelectColumns = !showSelectColumns)}
                     {fullWidthMobile}>
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 4c43c9afd8..efc18e9238 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -14,7 +14,7 @@
     export let danger = false;
     export let icon = false;
     export let link = false;
-    export let size: Props['size'] = 'medium';
+    export let size: Props['size'] = 'm';
     export let disabled = false;
     export let external = false;
     export let href: string = null;
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/breadcrumbs.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/breadcrumbs.svelte
index 1aff177352..5eac410de6 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -16,6 +17,10 @@
         {
             href: `${base}/project-${$project?.$id}/sites`,
             title: 'Sites'
+        },
+        {
+            href: `${base}/project-${$project?.$id}/sites/site-${$page.params.site}`,
+            title: $page.params.site
         }
     ];
 </script>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte
new file mode 100644
index 0000000000..5c24d2f0f6
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate, goto } from '$app/navigation';
+    import { registerCommands } from '$lib/commandCenter';
+    import { project } from '../../../store';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { canWriteSites } from '$lib/stores/roles';
+
+    onMount(() => {
+        let previousStatus = null;
+        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (previousStatus === message.payload.status) {
+                return;
+            }
+            previousStatus = message.payload.status;
+            if (message.events.includes('sites.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+            if (message.events.includes('sites.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                invalidate(Dependencies.FUNCTION);
+
+                return;
+            }
+            if (message.events.includes('sites.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+        });
+    });
+
+    $: $registerCommands([
+        {
+            label: 'Create deployment',
+            async callback() {
+                if (!$page.url.pathname.endsWith($page.params.site)) {
+                    await goto(`${base}/project-${$project.$id}/sites/site-${$page.params.site}`);
+                }
+            },
+            keys: $page.url.pathname.endsWith($page.params.site) ? ['c'] : ['c', 'd'],
+            group: 'functions',
+            icon: 'plus',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Permissions',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings#permissions`
+                );
+                scrollBy({ top: -100 });
+            },
+            icon: 'search',
+            group: 'functions',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Events',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings#events`
+                );
+                scrollBy({ top: -100 });
+            },
+            icon: 'calendar',
+            group: 'functions',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Variables',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings#variables`
+                );
+            },
+            icon: 'list',
+            group: 'functions',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Timeout',
+            callback() {
+                goto(
+                    `${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings#timeout`
+                );
+            },
+            icon: 'x-circle',
+            group: 'functions',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Schedule',
+            async callback() {
+                await goto(
+                    `${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings#schedule`
+                );
+                scrollBy({ top: -100 });
+            },
+            icon: 'clock',
+            group: 'functions',
+            disabled: !$canWriteSites
+        },
+        {
+            label: 'Go to deployments',
+            callback() {
+                goto(`${base}/project-${$project.$id}/sites/site-${$page.params.site}`);
+            },
+            keys: ['g', 'd'],
+            group: 'navigation',
+            rank: 10,
+            disabled: $page.url.pathname.endsWith($page.params.site)
+        },
+        {
+            label: 'Go to usage',
+            callback() {
+                goto(`${base}/project-${$project.$id}/sites/site-${$page.params.site}/usage`);
+            },
+            keys: ['g', 'u'],
+            group: 'navigation',
+            rank: 10,
+            disabled: $page.url.pathname.endsWith('usage')
+        },
+        {
+            label: 'Go to executions',
+            callback() {
+                goto(`${base}/project-${$project.$id}/sites/site-${$page.params.site}/executions`);
+            },
+            keys: ['g', 'e'],
+            group: 'navigation',
+            rank: 10,
+            disabled: $page.url.pathname.endsWith('executions')
+        },
+        {
+            label: 'Go to settings',
+            callback() {
+                goto(`${base}/project-${$project.$id}/sites/site-${$page.params.site}/settings`);
+            },
+            keys: ['g', 's'],
+            group: 'navigation',
+            rank: 10,
+            disabled: $page.url.pathname.endsWith('settings') || !$canWriteSites
+        }
+    ]);
+</script>
+
+<slot />
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.ts
new file mode 100644
index 0000000000..83a292b194
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+layout.ts
@@ -0,0 +1,28 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { Query } from '@appwrite.io/console';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.SITE);
+    depends(Dependencies.DEPLOYMENTS);
+
+    try {
+        const [site, proxyRuleList] = await Promise.all([
+            sdk.forProject.sites.get(params.site),
+            sdk.forProject.proxy.listRules([
+                Query.equal('resourceType', 'sites'),
+                Query.equal('resourceId', params.site),
+                Query.limit(1)
+            ])
+        ]);
+
+        return {
+            site,
+            proxyRuleList
+        };
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
new file mode 100644
index 0000000000..dbc47e8344
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { PaginationWithLimit, ViewSelector, EmptyFilter } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { deploymentList } from './store';
+    import { Container, ContainerHeader } from '$lib/layout';
+    import type { Models } from '@appwrite.io/console';
+    import { writable } from 'svelte/store';
+    import type { Column } from '$lib/helpers/types';
+    import { Filters } from '$lib/components/filters';
+    import { queries, tags } from '$lib/components/filters/store';
+    import { View } from '$lib/helpers/load';
+    import RedeployModal from './redeployModal.svelte';
+    import QuickFilters from './quickFilters.svelte';
+    import { Pill } from '$lib/elements';
+    import { onMount } from 'svelte';
+    import Table from './table.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
+
+    export let data;
+
+    let showRedeploy = false;
+
+    let selectedDeployment: Models.Deployment = null;
+
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
+        {
+            id: 'status',
+            title: 'Status',
+            type: 'enum',
+            show: true,
+            width: 110,
+            array: true,
+            format: 'enum',
+            elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
+            filter: false
+        },
+        {
+            id: 'type',
+            title: 'Source',
+            type: 'string',
+            show: true,
+            width: 90,
+            array: true,
+            format: 'enum',
+            elements: [
+                { value: 'manual', label: 'Manual' },
+                { value: 'cli', label: 'CLI' },
+                { value: 'vcs', label: 'Git' }
+            ]
+        },
+        {
+            id: '$updatedAt',
+            title: 'Updated',
+            type: 'datetime',
+            show: true,
+            width: 150,
+            format: 'datetime'
+        },
+
+        {
+            id: 'buildTime',
+            title: 'Build time',
+            type: 'integer',
+            show: true,
+            width: 90,
+            elements: [
+                {
+                    value: 15,
+                    label: 'more than 15 seconds'
+                },
+                {
+                    value: 60,
+                    label: 'more than 1 minute'
+                },
+                {
+                    value: 5 * 60,
+                    label: 'more than 5 minutes'
+                }
+            ],
+            filter: false
+        },
+        {
+            id: 'size',
+            title: 'Size',
+            type: 'integer',
+            show: true,
+            width: 140,
+            elements: [
+                {
+                    value: 2 * 1000 * 1000,
+                    label: 'more than 2MB'
+                },
+                {
+                    value: 10 * 1000 * 1000,
+                    label: 'more than 10MB'
+                },
+                {
+                    value: 50 * 1000 * 1000,
+                    label: 'more than 50MB'
+                }
+            ]
+        },
+        {
+            id: 'buildSize',
+            title: 'Build size',
+            type: 'integer',
+            show: false,
+            filter: false,
+            width: 80
+        }
+    ]);
+
+    let showMobileFilters = false;
+
+    onMount(() => {
+        data?.query ? (showMobileFilters = true) : (showMobileFilters = false);
+    });
+
+    function clearAll() {
+        queries.clearAll();
+        queries.apply();
+    }
+</script>
+
+<Container>
+    <ContainerHeader title="Deployments"></ContainerHeader>
+    <Layout.Stack justifyContent="space-between" direction="row">
+        <Layout.Stack alignItems="center" direction="row" gap="s">
+            <QuickFilters {columns} />
+            <Filters query={data.query} {columns} let:disabled let:toggle singleCondition>
+                <Layout.Stack alignItems="center" direction="row" gap="xs">
+                    <Button text on:click={toggle} {disabled} size="s" ariaLabel="open filter">
+                        <span class="icon-filter-line" />
+                        <span class="text">More filters</span>
+                    </Button>
+                    {#if $tags?.length}
+                        <!-- TODO: add vertical divider to pink 2 -->
+                        <div
+                            style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
+                        </div>
+                        <Button text on:click={clearAll} size="s">Clear all</Button>
+                    {/if}
+                </Layout.Stack>
+            </Filters>
+        </Layout.Stack>
+        <ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
+    </Layout.Stack>
+    <div class="is-only-mobile">
+        <Layout.Stack justifyContent="space-between" direction="row">
+            <Button
+                text
+                size="s"
+                on:click={() => (showMobileFilters = !showMobileFilters)}
+                ariaLabel="toggle filters">
+                <span class="icon-filter-line" />
+                <span class="text">Filters</span>
+            </Button>
+
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+        </Layout.Stack>
+        <div
+            class:u-hide={!showMobileFilters}
+            class:u-flex={showMobileFilters}
+            class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
+            <QuickFilters {columns} />
+
+            <Filters query={data.query} {columns} clearOnClick>
+                <svelte:fragment slot="mobile" let:disabled let:toggle>
+                    <Pill
+                        button
+                        on:click={toggle}
+                        {disabled}
+                        class="u-flex u-gap-4 u-cross-center"
+                        style="--p-tag-content-height: auto">
+                        <span class="text">More filters</span>
+                        <span class="icon-cheveron-down" />
+                    </Pill>
+                </svelte:fragment>
+            </Filters>
+        </div>
+    </div>
+    {#if $deploymentList.total}
+        <Table columns={$columns} {data} />
+    {:else if data?.query}
+        <EmptyFilter resource="deployments" />
+    {/if}
+
+    <PaginationWithLimit
+        name="Deployments"
+        limit={data.limit}
+        offset={data.offset}
+        total={$deploymentList?.total} />
+</Container>
+
+{#if selectedDeployment}
+    <RedeployModal {selectedDeployment} bind:show={showRedeploy} />
+{/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.ts
new file mode 100644
index 0000000000..aad33a0ee1
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.ts
@@ -0,0 +1,32 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+import { queries, queryParamToMap } from '$lib/components/filters';
+
+export const load: PageLoad = async ({ params, depends, url, route, parent }) => {
+    const data = await parent();
+    depends(Dependencies.DEPLOYMENTS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+    return {
+        offset,
+        limit,
+        query,
+        activeDeployment: data.site.deploymentId
+            ? await sdk.forProject.sites.getDeployment(params.site, data.site.deploymentId)
+            : null,
+        deploymentList: await sdk.forProject.sites.listDeployments(params.site, [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ])
+    };
+};
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancel.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancel.svelte
new file mode 100644
index 0000000000..77f91bca23
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancel.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+
+    export let showCancel = false;
+    export let selectedDeployment: Models.Deployment;
+
+    async function handleSubmit() {
+        try {
+            await sdk.forProject.functions.updateDeploymentBuild(
+                selectedDeployment.resourceId,
+                selectedDeployment.$id
+            );
+            await invalidate(Dependencies.FUNCTION);
+            showCancel = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been deleted`
+            });
+            trackEvent(Submit.DeploymentCancel);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DeploymentCancel);
+        }
+    }
+</script>
+
+<Modal
+    title="Cancel deployment"
+    bind:show={showCancel}
+    onSubmit={handleSubmit}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <p data-private>Are you sure you want to cancel this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCancel = false)}>Cancel</Button>
+        <Button secondary submit>Continue</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/delete.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/delete.svelte
new file mode 100644
index 0000000000..b0b9ce6bf3
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/delete.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+
+    export let showDelete = false;
+    export let selectedDeployment: Models.Deployment = null;
+
+    async function handleSubmit() {
+        try {
+            await sdk.forProject.functions.deleteDeployment(
+                selectedDeployment.resourceId,
+                selectedDeployment.$id
+            );
+            await invalidate(Dependencies.FUNCTION);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Deployment has been deleted`
+            });
+            trackEvent(Submit.DeploymentDelete);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DeploymentDelete);
+        }
+    }
+</script>
+
+<Modal
+    title="Delete deployment"
+    bind:show={showDelete}
+    onSubmit={handleSubmit}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <p data-private>Are you sure you want to delete this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
new file mode 100644
index 0000000000..456ed16e28
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { deployment } from './store';
+
+    export let data;
+
+    let logs = '';
+
+    onMount(() => {
+        logs = $deployment.buildLogs;
+        if ($deployment.status === 'ready') {
+            return;
+        }
+        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (
+                message.events.includes(
+                    `functions.${$page.params.site}.deployments.${$page.params.deployment}.update`
+                )
+            ) {
+                logs = message.payload['logs'];
+                if (message.payload.status === 'ready') {
+                    invalidate(Dependencies.DEPLOYMENT);
+                }
+            }
+        });
+    });
+</script>
+
+<Container></Container>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts
new file mode 100644
index 0000000000..a50f78e131
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.ts
@@ -0,0 +1,13 @@
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.DEPLOYMENT);
+
+    const deployment = await sdk.forProject.sites.getDeployment(params.site, params.deployment);
+
+    return {
+        deployment
+    };
+};
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts
new file mode 100644
index 0000000000..337a6b456e
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import type { Models } from '@appwrite.io/console';
+import { derived } from 'svelte/store';
+
+export const deployment = derived(page, ($page) => $page.data.deployment as Models.Deployment);
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCard.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCard.svelte
new file mode 100644
index 0000000000..e304a32ce1
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCard.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { CardGrid, Id, SvgIcon } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
+    import { func, proxyRuleList } from './store';
+    import { Pill } from '$lib/elements';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
+    import DeploymentSource from './deploymentSource.svelte';
+
+    import DeploymentDomains from './deploymentDomains.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
+
+    export let deployment: Models.Deployment;
+</script>
+
+<CardGrid>
+    <div class="u-flex u-cross-start u-gap-16">
+        <div class="avatar" style={`--p-image-size: ${32 / 16}rem`} aria-hidden="true">
+            <SvgIcon size={64} iconSize="large" name={$func.runtime.split('-')[0]}></SvgIcon>
+        </div>
+        <div class="u-grid-equal-row-size u-gap-4 u-line-height-1">
+            <p><b>Deployment ID</b></p>
+
+            <Id value={deployment.$id}>
+                {deployment.$id}
+            </Id>
+        </div>
+    </div>
+    <svelte:fragment slot="aside">
+        {@const status = deployment.status}
+        {@const deploymentSize = humanFileSize(deployment.size)}
+        {@const buildSize = humanFileSize(deployment.buildSize)}
+        {@const totalSize = humanFileSize(deployment.buildSize + deployment.size)}
+        <ul class="stats-grid-box u-gap-16">
+            <li class="u-flex-vertical u-gap-4">
+                <p class="u-color-text-offline">Status</p>
+                <span>
+                    <Pill
+                        danger={status === 'failed'}
+                        warning={status === 'building'}
+                        success={status === 'ready'}>
+                        <span class="icon-lightning-bolt" aria-hidden="true" />
+                        <span class="text u-trim">
+                            {status === 'ready' ? 'active' : status}
+                        </span>
+                    </Pill>
+                </span>
+            </li>
+            <li class="u-flex-vertical u-gap-4">
+                <p class="u-color-text-offline">Build time</p>
+                <p class="u-line-height-2">
+                    {calculateTime(deployment.buildTime)}
+                </p>
+            </li>
+            <li class="u-flex-vertical u-gap-4">
+                <p class="u-color-text-offline">Total size</p>
+                <p class="u-line-height-2">
+                    {totalSize.value + totalSize.unit}
+                    <button
+                        type="button"
+                        on:click|preventDefault
+                        class="tooltip"
+                        aria-label="input tooltip"
+                        use:tooltip={{
+                            content: `
+                                <p><b>Deployment size:</b> ${deploymentSize.value + deploymentSize.unit}</p>
+                                <p><b>Build size:</b> ${buildSize.value + buildSize.unit}</p>
+                            `,
+                            allowHTML: true,
+                            appendTo: 'parent'
+                        }}>
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                </p>
+            </li>
+            <li class="u-flex-vertical u-gap-4">
+                <p class="u-color-text-offline">Updated</p>
+                <p class="u-line-height-2">
+                    <DeploymentCreatedBy {deployment} />
+                </p>
+            </li>
+        </ul>
+
+        <div class="u-flex u-flex-vertical u-gap-4">
+            <p class="u-color-text-offline">Source</p>
+            <div>
+                <DeploymentSource {deployment} />
+            </div>
+        </div>
+
+        {#if $proxyRuleList?.rules?.length}
+            <div class="u-flex u-flex-vertical u-gap-4">
+                <p class="u-color-text-offline">Domains</p>
+                <DeploymentDomains domain={$proxyRuleList} />
+            </div>
+        {/if}
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <slot name="actions" />
+    </svelte:fragment>
+</CardGrid>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    .stats-grid-box {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media #{$break3open} {
+        .stats-grid-box {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCreatedBy.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCreatedBy.svelte
new file mode 100644
index 0000000000..15e429722e
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentCreatedBy.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { timeFromNow } from '$lib/helpers/date';
+    import type { Models } from '@appwrite.io/console';
+
+    export let deployment: Models.Deployment;
+</script>
+
+{timeFromNow(deployment.$updatedAt)}
+{#if deployment.providerCommitAuthor}
+    by <a
+        class="u-underline u-cursor-pointer"
+        target="_blank"
+        href={deployment.providerCommitAuthorUrl}>{deployment.providerCommitAuthor}</a>
+{/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentDomains.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentDomains.svelte
new file mode 100644
index 0000000000..bd441f17c7
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentDomains.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { DropList, DropListLink, Trim } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import type { Models } from '@appwrite.io/console';
+
+    export let domain: Models.ProxyRuleList;
+    let showDropdown = false;
+</script>
+
+<div class="u-flex u-gap-4 u-cross-center">
+    <a
+        href={`http://${domain.rules[0].domain}`}
+        target="_blank"
+        class="u-flex u-gap-4 u-cross-center">
+        <Trim alternativeTrim>
+            <span class="link">
+                {domain.rules[0].domain}
+            </span>
+        </Trim>
+        <span class="icon-external-link" aria-hidden="true" />
+    </a>
+    {#if domain.rules.length > 1}
+        <DropList bind:show={showDropdown} scrollable>
+            <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                +{domain.rules.length - 1}
+            </Pill>
+            <svelte:fragment slot="list">
+                {#each domain.rules as rule, i}
+                    {#if i !== 0}
+                        <DropListLink href={`http://${rule.domain}`} external icon="external-link">
+                            {rule.domain}
+                        </DropListLink>
+                    {/if}
+                {/each}
+            </svelte:fragment>
+        </DropList>
+    {/if}
+</div>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentSource.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentSource.svelte
new file mode 100644
index 0000000000..0c5b765de1
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentSource.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { DropList, DropListLink, Trim } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
+
+    export let deployment: Models.Deployment;
+    let showDropdown = false;
+</script>
+
+{#if deployment.type === 'vcs'}
+    <DropList bind:show={showDropdown}>
+        <button
+            on:click={() => (showDropdown = !showDropdown)}
+            type="button"
+            class="u-flex u-gap-4 u-cross-center">
+            <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
+        </button>
+        <svelte:fragment slot="list">
+            <DropListLink href={deployment.providerRepositoryUrl} external icon="github">
+                {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+            </DropListLink>
+            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
+                {deployment.providerBranch}
+            </DropListLink>
+            {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
+                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
+                    <Trim alternativeTrim>
+                        {deployment?.providerCommitHash?.substring(0, 7)}
+                        {deployment.providerCommitMessage}
+                    </Trim>
+                </DropListLink>
+            {/if}
+        </svelte:fragment>
+    </DropList>
+{:else if deployment.type === 'manual'}
+    <span class="icon-code" aria-hidden="true" /> <span>Manual</span>
+{:else if deployment.type === 'cli'}
+    <span class="icon-terminal" aria-hidden="true" /> <span>CLI</span>
+{/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
new file mode 100644
index 0000000000..efbbe4f066
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
@@ -0,0 +1,281 @@
+<script lang="ts">
+    import { afterNavigate } from '$app/navigation';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { DropList, DropListItem } from '$lib/components';
+    import {
+        addFilter,
+        queries,
+        queryParamToMap,
+        tagFormat,
+        tags,
+        ValidOperators,
+        type TagValue
+    } from '$lib/components/filters/store';
+    import { Pill, SelectSearchCheckbox } from '$lib/elements';
+    import type { Column } from '$lib/helpers/types';
+    import { type Writable } from 'svelte/store';
+
+    export let columns: Writable<Column[]>;
+
+    type FilterData = {
+        title: string;
+        id: string;
+        array: boolean;
+        show: boolean;
+        tag: string;
+        operator: ValidOperators;
+        options: { value: string; label: string; checked: boolean }[];
+    };
+
+    function buildFilterCol(col: Column, customOperator = null): FilterData {
+        return {
+            title: col.title,
+            id: col.id,
+            show: false,
+            array: col?.array,
+            tag: null,
+            operator: customOperator ?? ValidOperators.Equal,
+            options: col?.elements?.map((element) => {
+                return {
+                    value: (element?.value ?? element) as string,
+                    label: (element?.label ?? element) as string,
+                    checked: false
+                };
+            })
+        };
+    }
+
+    const statusCol = $columns.find((col) => col.id === 'status');
+    let statusFilter = buildFilterCol(statusCol);
+    const typeCol = $columns.find((col) => col.id === 'type');
+    let typeFilter = buildFilterCol(typeCol);
+    const sizeCol = $columns.find((col) => col.id === 'size');
+    let sizeFilter = buildFilterCol(sizeCol);
+    const buildTimeCol = $columns.find((col) => col.id === 'buildTime');
+    let buildTimeFilter = buildFilterCol(buildTimeCol);
+
+    let localQueries = new Map<TagValue, string>();
+
+    afterNavigate((p) => {
+        const paramQueries = p.to.url.searchParams.get('query');
+        localQueries = queryParamToMap(paramQueries || '[]');
+        const localTags = Array.from(localQueries.keys());
+
+        if (!localTags?.length) {
+            statusFilter.tag = null;
+            typeFilter.tag = null;
+            buildTimeFilter.tag = null;
+            [statusFilter, typeFilter].forEach((filter) => {
+                resetOptions(filter);
+            });
+        } else {
+            [statusFilter, typeFilter].forEach((filter) => {
+                setFilterData(filter, localTags);
+            });
+
+            const buildTimeTag = localTags.find((tag) =>
+                tag.tag.includes(`**${buildTimeFilter.title}**`)
+            );
+            if (buildTimeTag) {
+                const now = new Date();
+
+                const diff = now.getTime() - new Date(buildTimeTag.value as string).getTime();
+                const ranges = buildTimeCol.elements as { value: string; label: string }[];
+                const dateRange = ranges.reduce((prev, curr) => {
+                    if (parseInt(curr.value) < diff && curr.value > prev.value) {
+                        return curr;
+                    }
+                    return prev;
+                });
+                if (dateRange) {
+                    buildTimeFilter.tag = `**${buildTimeFilter.title}** is **${dateRange.label}**`;
+                    buildTimeFilter = buildTimeFilter;
+                }
+            } else {
+                buildTimeFilter.tag = null;
+            }
+
+            const sizeTag = localTags.find((tag) => tag.tag.includes(`**${sizeFilter.title}**`));
+            if (sizeTag) {
+                const size = sizeTag.value as string;
+                const ranges = sizeCol.elements as { value: string; label: string }[];
+                // find smallest range that is bigger than size
+                const sizeRange = ranges.reduce((prev, curr) => {
+                    if (parseInt(size) >= parseInt(curr.value)) {
+                        return curr;
+                    }
+                    return prev;
+                });
+                if (sizeRange) {
+                    sizeFilter.tag = `**${sizeFilter.title}** is **${sizeRange.label}**`;
+                    sizeFilter = sizeFilter;
+                }
+            } else {
+                sizeFilter.tag = null;
+            }
+
+            // Reasinging the filters to trigger reactivity
+            statusFilter = statusFilter;
+            typeFilter = typeFilter;
+            sizeFilter = sizeFilter;
+            buildTimeFilter = buildTimeFilter;
+        }
+    });
+
+    function setFilterData(filter: FilterData, list: TagValue[]) {
+        const tagData = list.find((tag) => tag.tag.includes(`**${filter.title}**`));
+        if (tagData) {
+            filter.tag = tagData.tag;
+            if (Array.isArray(tagData.value) && tagData.value?.length) {
+                const values = tagData.value as string[];
+                filter.options.forEach((option) => {
+                    option.checked = values.includes(option.value);
+                });
+            }
+        } else {
+            filter.tag = null;
+            resetOptions(filter);
+        }
+    }
+
+    function resetOptions(filter: FilterData) {
+        filter.options.forEach((option) => {
+            option.checked = false;
+        });
+    }
+
+    function addFilterAndApply(
+        colId: string,
+        colTitle: string,
+        operator: ValidOperators,
+        value: string,
+        arrayValues: string[] = []
+    ) {
+        const tagList = $tags.filter((tag) => tag.tag.includes(colTitle));
+        tagList.forEach((tag) => queries.removeFilter(tag));
+        if (value || arrayValues?.length) {
+            if (colId === buildTimeFilter.id) {
+                addBuildTimeFilter(value, colId);
+            } else if (colId === sizeFilter.id) {
+                addSizeFilter(value, colId);
+            } else {
+                addFilter($columns, colId, operator, value, arrayValues);
+            }
+        }
+        queries.apply();
+        trackEvent(Submit.ApplyQuickFilter, {
+            source: 'function_deployments',
+            column: colId,
+            value: value || arrayValues.join(', ')
+        });
+    }
+
+    function addSizeFilter(value: string, colId: string) {
+        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, value);
+    }
+    function addBuildTimeFilter(value: string, colId: string) {
+        const now = new Date();
+        const isoValue = new Date(now.getTime() - parseInt(value));
+        addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, isoValue.toISOString());
+        addFilter($columns, colId, ValidOperators.LessThanOrEqual, now.toISOString());
+    }
+</script>
+
+{#each [typeFilter] as filter}
+    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_deployments', column: filter.title }}>
+            {#key filter.tag}
+                <span use:tagFormat>
+                    {filter?.tag ?? filter.title}
+                </span>
+            {/key}
+            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
+            </span>
+        </Pill>
+        <svelte:fragment slot="list">
+            {#each filter.options as option (option.value + option.checked)}
+                <SelectSearchCheckbox
+                    padding={8}
+                    bind:value={option.checked}
+                    on:click={() => {
+                        option.checked = !option.checked;
+                        addFilterAndApply(
+                            filter.id,
+                            filter.title,
+                            filter.operator,
+                            filter?.array ? null : option.checked ? option.value : null,
+                            filter?.array
+                                ? (filter.options
+                                      .filter((opt) => opt.checked)
+                                      .map((opt) => opt.value) ?? [])
+                                : []
+                        );
+                    }}>
+                    {option.label}
+                </SelectSearchCheckbox>
+            {/each}
+            {#if filter.options.some((option) => option.checked)}
+                <DropListItem
+                    padding={8}
+                    on:click={() => {
+                        filter.show = false;
+                        filter.tag = null;
+                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
+                    }}>
+                    Clear selection
+                </DropListItem>
+            {/if}
+        </svelte:fragment>
+    </DropList>
+{/each}
+{#each [sizeFilter] as filter}
+    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_deployments', column: filter.title }}>
+            {#key filter.tag}
+                <span use:tagFormat>
+                    {filter?.tag ?? filter.title}
+                </span>
+            {/key}
+            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
+            </span>
+        </Pill>
+        <svelte:fragment slot="list">
+            {#each filter.options as option (option.value + option.checked)}
+                <DropListItem
+                    padding={8}
+                    on:click={() => {
+                        filter.show = false;
+
+                        addFilterAndApply(
+                            filter.id,
+                            filter.title,
+                            filter.operator,
+                            filter?.array ? null : option.value,
+                            []
+                        );
+                    }}>
+                    {option.label}
+                </DropListItem>
+            {/each}
+            {#if filter?.tag}
+                <DropListItem
+                    padding={8}
+                    on:click={() => {
+                        filter.show = false;
+                        filter.tag = null;
+                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
+                    }}>
+                    Clear selection
+                </DropListItem>
+            {/if}
+        </svelte:fragment>
+    </DropList>
+{/each}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
new file mode 100644
index 0000000000..dce772c9a4
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { func } from './store';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+
+    export let show = false;
+    export let selectedDeployment: Models.Deployment = null;
+    let error: string;
+
+    async function redeploy() {
+        try {
+            await sdk.forProject.functions.createBuild(
+                $func.$id,
+                selectedDeployment.$id,
+                selectedDeployment.buildId
+            );
+            addNotification({
+                type: 'success',
+                message: `Redeploying ${$func.name}`
+            });
+            trackEvent(Submit.FunctionRedeploy);
+
+            invalidate(Dependencies.FUNCTION);
+            invalidate(Dependencies.DEPLOYMENTS);
+            show = false;
+        } catch (e) {
+            error = e.message;
+
+            trackError(e, Submit.FunctionRedeploy);
+        }
+    }
+</script>
+
+<Modal
+    title="Redeploy function"
+    size="big"
+    bind:show
+    bind:error
+    onSubmit={redeploy}
+    headerDivider={false}>
+    <p class="text">
+        Are you sure you want to redeploy <b>{$func.name}</b>? Redeploying may affect your
+        production code.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Redeploy</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
new file mode 100644
index 0000000000..b38f241a94
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
@@ -0,0 +1,25 @@
+import { page } from '$app/stores';
+import { derived, writable, type Writable } from 'svelte/store';
+import type { Models } from '@appwrite.io/console';
+
+export const func = derived(page, ($page) => $page.data.function as Models.Function);
+export const deploymentList = derived(
+    page,
+    ($page) => $page.data.deploymentList as Models.DeploymentList
+);
+export const proxyRuleList = derived(
+    page,
+    ($page) => $page.data.proxyRuleList as Models.ProxyRuleList
+);
+
+export const repositories: Writable<{
+    search: string;
+    installationId: string;
+    repositories: Models.ProviderRepository[];
+}> = writable({
+    search: '',
+    installationId: '',
+    repositories: []
+});
+
+export const showCreateDeployment: Writable<boolean> = writable(false);
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
new file mode 100644
index 0000000000..3886ba2916
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+    import { DropList, DropListItem, DropListLink, Id } from '$lib/components';
+    import {
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow,
+        TableScroll
+    } from '$lib/elements/table';
+    import type { PageData } from './$types';
+    import { type Models } from '@appwrite.io/console';
+    import type { Column } from '$lib/helpers/types';
+    import { Pill } from '$lib/elements';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import DeploymentSource from './deploymentSource.svelte';
+    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
+    import { timer } from '$lib/actions/timer';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { func } from './store';
+    import { page } from '$app/stores';
+    import Delete from './delete.svelte';
+    import RedeployModal from './redeployModal.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import Cancel from './cancel.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { base } from '$app/paths';
+
+    export let columns: Column[];
+    export let data: PageData;
+
+    let showDropdown = [];
+    let showDelete = false;
+    let showActivate = false;
+    let showRedeploy = false;
+    let showCancel = false;
+
+    let selectedDeployment: Models.Deployment = null;
+
+    function handleActivate() {
+        invalidate(Dependencies.DEPLOYMENTS);
+    }
+
+    function getDownload(deploymentId: string) {
+        return (
+            sdk.forProject.functions.getDeploymentDownload($func.$id, deploymentId).toString() +
+            '&mode=admin'
+        );
+    }
+</script>
+
+<TableScroll noMargin>
+    <TableHeader>
+        {#each columns as column}
+            {#if column.show}
+                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+            {/if}
+        {/each}
+        <TableCellHead width={40} />
+    </TableHeader>
+    <TableBody>
+        {#each data.deploymentList.deployments as deployment, index (deployment.$id)}
+            <TableRow>
+                {#each columns as column}
+                    {#if column.show}
+                        {#if column.id === '$id'}
+                            {#key column.id}
+                                <TableCell width={column.width} title="Deployment ID">
+                                    <Id value={deployment.$id}>{deployment.$id}</Id>
+                                </TableCell>
+                            {/key}
+                        {:else if column.id === 'status'}
+                            <TableCell width={column.width} title={column.title}>
+                                {@const status = deployment.status}
+                                {#if data?.activeDeployment?.$id === deployment?.$id}
+                                    <Pill success>
+                                        <span class="icon-lightning-bolt" aria-hidden="true" />
+                                        <span class="text u-trim">active</span>
+                                    </Pill>
+                                {:else}
+                                    <Pill
+                                        danger={status === 'failed'}
+                                        warning={status === 'building'}
+                                        info={status === 'ready'}>
+                                        {status}
+                                    </Pill>
+                                {/if}
+                            </TableCell>
+                        {:else if column.id === 'type'}
+                            <TableCell width={column.width} title={column.title}>
+                                <DeploymentSource {deployment} />
+                            </TableCell>
+                        {:else if column.id === '$updatedAt'}
+                            <TableCellText width={column.width} title={column.title}>
+                                <DeploymentCreatedBy {deployment} />
+                            </TableCellText>
+                        {:else if column.id === 'buildTime'}
+                            <TableCellText width={column.width} title={column.title}>
+                                {#if ['processing', 'building'].includes(deployment.status)}
+                                    <span use:timer={{ start: deployment.$createdAt }} />
+                                {:else}
+                                    {calculateTime(deployment.buildTime)}
+                                {/if}
+                            </TableCellText>
+                        {:else if column.id === 'size'}
+                            <TableCellText width={column.width} title={column.title}>
+                                {calculateSize(deployment.size)}
+                            </TableCellText>
+                        {:else if column.id === 'buildSize'}
+                            <TableCellText width={column.width} title={column.title}>
+                                {calculateSize(deployment.buildSize)}
+                            </TableCellText>
+                        {/if}
+                    {/if}
+                {/each}
+                <TableCell width={40} showOverflow>
+                    <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
+                        <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="refresh"
+                                on:click={() => {
+                                    selectedDeployment = deployment;
+                                    showRedeploy = true;
+                                    showDropdown = [];
+                                }}>
+                                Redeploy
+                            </DropListItem>
+                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                                <DropListItem
+                                    icon="lightning-bolt"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showActivate = true;
+                                        showDropdown = [];
+                                    }}>
+                                    Activate
+                                </DropListItem>
+                            {/if}
+                            <DropListLink
+                                icon="terminal"
+                                href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
+                                Logs
+                            </DropListLink>
+                            <DropListLink
+                                icon="download"
+                                href={getDownload(deployment.$id)}
+                                on:click={() => (showDropdown[index] = false)}>
+                                Download
+                            </DropListLink>
+                            {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
+                                <DropListItem
+                                    icon="x-circle"
+                                    event="deployment_cancel"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showCancel = true;
+                                    }}>
+                                    Cancel
+                                </DropListItem>
+                            {/if}
+                            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showDelete = true;
+                                    }}>
+                                    Delete
+                                </DropListItem>
+                            {/if}
+                        </svelte:fragment>
+                    </DropList>
+                </TableCell>
+            </TableRow>
+        {/each}
+    </TableBody>
+</TableScroll>
+
+{#if selectedDeployment}
+    <Delete {selectedDeployment} bind:showDelete />
+    <!-- <Activate {selectedDeployment} bind:showActivate on:activated={handleActivate} /> -->
+    <Cancel {selectedDeployment} bind:showCancel />
+    <RedeployModal {selectedDeployment} bind:show={showRedeploy} />
+{/if}