From 5d03e9fb963f6bb84a13157472a63092293d2e87 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 7 Feb 2025 16:09:33 +0100
Subject: [PATCH] feat: logs

---
 pnpm-lock.yaml                                |  8 +--
 src/lib/components/git/repositories.svelte    |  4 +-
 src/lib/components/tab.svelte                 | 18 ++++-
 src/lib/components/tabs.svelte                |  6 +-
 .../sites/(components)/logs.svelte            | 70 +++----------------
 .../sites/create-site/domain.svelte           |  2 +-
 .../sites/create-site/templates/+page.svelte  |  6 +-
 .../template-[template]/+page.svelte          |  6 +-
 .../connectBehaviour.svelte                   | 10 +--
 .../create-site/variableEditorModal.svelte    |  6 +-
 .../project-[project]/sites/header.svelte     |  3 +-
 .../deployments/deploymentMetrics.svelte      |  4 +-
 .../sites/site-[site]/header.svelte           |  3 +-
 .../logs/(components)/LogsRequest.svelte      |  9 ++-
 .../logs/(components)/LogsResponse.svelte     | 14 +++-
 15 files changed, 78 insertions(+), 91 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 050376598..8f2e8e8c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2196,8 +2196,8 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
-  fuse.js@7.0.0:
-    resolution: {integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==}
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
     engines: {node: '>=10'}
 
   gensync@1.0.0-beta.2:
@@ -4112,7 +4112,7 @@ snapshots:
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
-      fuse.js: 7.0.0
+      fuse.js: 7.1.0
       pretty-bytes: 6.1.1
       react-dom: 18.3.1(react@18.3.1)
       shiki: 1.29.1
@@ -6402,7 +6402,7 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
-  fuse.js@7.0.0: {}
+  fuse.js@7.1.0: {}
 
   gensync@1.0.0-beta.2: {}
 
diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index a36f3d7a0..82dfdf157 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -64,7 +64,7 @@
         $repositories.search = search;
         $repositories.installationId = installationId;
 
-        if ($repositories.repositories.length) {
+        if ($repositories.repositories.length && action === 'select') {
             selectedRepository = $repositories.repositories[0].id;
             $repository = $repositories.repositories[0];
         }
@@ -193,7 +193,7 @@
                                         {#if action === 'button'}
                                             <Layout.Stack direction="row" justifyContent="flex-end">
                                                 <Button
-                                                    size="s"
+                                                    size="xs"
                                                     secondary
                                                     on:click={() => dispatch('connect', repo)}>
                                                     Connect
diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 4469988f6..9ca8c022a 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -5,10 +5,15 @@
     import { getElementDir } from '$lib/helpers/style';
     import { waitUntil } from '$lib/helpers/waitUntil';
     import { Tabs } from '@appwrite.io/pink-svelte';
+    import type { Variant } from '@appwrite.io/pink-svelte/dist/tabs/types';
 
     export let selected = false;
     export let href: string = null;
     export let event: string = null;
+    export let root: { variant: Variant; stretch: boolean } = {
+        variant: 'primary',
+        stretch: false
+    };
 
     async function handleClick(e: Event) {
         if (event) {
@@ -81,11 +86,20 @@
 </script>
 
 {#if href}
-    <Tabs.Item.Link {href} bind:active={selected} on:click={handleClick} on:keydown={handleKeyDown}>
+    <Tabs.Item.Link
+        {root}
+        {href}
+        bind:active={selected}
+        on:click={handleClick}
+        on:keydown={handleKeyDown}>
         <slot />
     </Tabs.Item.Link>
 {:else}
-    <Tabs.Item.Button bind:active={selected} on:click={handleClick} on:keydown={handleKeyDown}>
+    <Tabs.Item.Button
+        {root}
+        bind:active={selected}
+        on:click={handleClick}
+        on:keydown={handleKeyDown}>
         <slot />
     </Tabs.Item.Button>
 {/if}
diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
index 8910320fe..746dcd6f8 100644
--- a/src/lib/components/tabs.svelte
+++ b/src/lib/components/tabs.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { Tabs } from '@appwrite.io/pink-svelte';
+
+    export let variant: 'primary' | 'secondary' = 'primary';
 </script>
 
-<Tabs.Root>
-    <slot />
+<Tabs.Root {variant} let:root>
+    <slot {root} />
 </Tabs.Root>
diff --git a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
index 56db50e32..7327fa09f 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
@@ -6,12 +6,10 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { calculateTime } from '$lib/helpers/timeConversion';
-    import { app } from '$lib/stores/app';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { Badge, Card, Layout, Logs, Spinner, Typography } from '@appwrite.io/pink-svelte';
-    import ansicolor from 'ansicolor';
+    import { Badge, Layout, Logs, Spinner, Typography } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
 
     export let site: Models.Site;
@@ -26,9 +24,11 @@
                     `sites.${deployment.resourceId}.deployments.${deployment.$id}.update`
                 )
             ) {
-                status = response.payload.status;
+                const res = response.payload as Partial<Models.Deployment> & { logs: string };
+                console.log(res);
+                status = res.status;
                 // Models.Deployment has no `logs`, the payload sends `logs` though
-                buildLogs = response.payload.logs;
+                buildLogs = res.logs;
 
                 if (status === 'ready') {
                     goto(
@@ -40,57 +40,6 @@
         return () => unsubscribe();
     });
 
-    ansicolor.rgb =
-        $app.themeInUse === 'light'
-            ? {
-                  black: [0, 0, 0],
-                  darkGray: [86, 86, 92],
-                  lightGray: [151, 151, 155],
-                  white: [0, 0, 0],
-                  red: [179, 18, 18],
-                  lightRed: [179, 18, 18],
-                  green: [10, 113, 79],
-                  lightGreen: [10, 113, 79],
-                  yellow: [97, 37, 10],
-                  lightYellow: [97, 37, 10],
-                  blue: [62, 98, 152],
-                  lightBlue: [62, 98, 152],
-                  magenta: [74, 62, 152],
-                  lightMagenta: [74, 62, 152],
-                  cyan: [78, 126, 124],
-                  lightCyan: [78, 126, 124]
-              }
-            : {
-                  black: [255, 255, 255],
-                  darkGray: [129, 129, 134],
-                  lightGray: [195, 195, 198],
-                  white: [255, 255, 255],
-                  red: [255, 69, 58],
-                  lightRed: [255, 69, 58],
-                  green: [16, 185, 129],
-                  lightGreen: [16, 185, 129],
-                  yellow: [254, 124, 67],
-                  lightYellow: [254, 124, 67],
-                  blue: [104, 163, 254],
-                  lightBlue: [104, 163, 254],
-                  magenta: [203, 194, 255],
-                  lightMagenta: [203, 194, 255],
-                  cyan: [133, 219, 216],
-                  lightCyan: [133, 219, 216]
-              };
-
-    // TODO: Fix the buildLogs to return object, currently its a string.
-    function formatLogs(logs: { timestamp: string; content: string }[] = []) {
-        let output = '';
-        const sum = logs.map((n) => `${n.timestamp} ${n.content}`).join('\n');
-        const iterator = ansicolor.parse(sum);
-        for (const element of iterator.spans) {
-            if (element.color && !element.color.name) output += `<span>${element.text}</span>`;
-            else output += `${element.text}`;
-        }
-        return output;
-    }
-
     async function cancelDeployment() {
         try {
             await sdk.forProject.sites.updateDeploymentBuild(deployment.resourceId, deployment.$id);
@@ -106,6 +55,8 @@
             });
         }
     }
+
+    $: console.log(buildLogs);
 </script>
 
 <Layout.Stack>
@@ -129,10 +80,9 @@
             </Layout.Stack>
         </div>
     </Layout.Stack>
-    <Logs logs={formatLogs(buildLogs)} />
-    <!-- <div>
-                        <Code lang="text" code={buildLogs.replace(/\\n/g, '\n')} />
-                    </div> -->
+
+    <!-- <Logs logs={buildLogs ?? ''} /> -->
+
     <Layout.Stack alignItems="flex-end">
         {#if ['processing', 'building'].includes(status)}
             <Button size="xs" text on:click={cancelDeployment}>Cancel deployment</Button>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
index 11a3829d6..fb2779495 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
@@ -14,7 +14,7 @@
 
     const checkDomain = debounce(async (value: string) => {
         try {
-            // TODO: @Meldiron Fix in future, blocked by issue PLA-2254 
+            // TODO: @Meldiron Fix in future, blocked by issue PLA-2254
             // await sdk.forProject.proxy.checkSubdomain(ResourceType.Site, value);
             domainIsValid = true;
         } catch {
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
index 42377be96..626dccc69 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
@@ -63,7 +63,11 @@
     <title>Create site - Appwrite</title>
 </svelte:head>
 
-<Wizard href={`${base}/project-${$page.params.project}/sites/`} title="Create Site" invertColumns>
+<Wizard
+    href={`${base}/project-${$page.params.project}/sites/`}
+    title="Create Site"
+    invertColumns
+    hideFooter>
     <svelte:fragment slot="aside">
         <Layout.Stack gap="xxl">
             <InputSearch
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 90697d3f8..8a0d806a9 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -132,7 +132,7 @@
                     framework.installCommand,
                     framework.buildCommand,
                     framework.outputDirectory,
-                    domain,
+                    domain || undefined,
                     framework.adapter,
                     selectedInstallationId || undefined,
                     framework.fallbackFile,
@@ -190,6 +190,8 @@
     $: if (connectBehaviour === 'later') {
         selectedRepository = null;
     }
+
+    $: console.log(domain);
 </script>
 
 <svelte:head>
@@ -340,7 +342,7 @@
             fullWidthMobile
             size="s"
             on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting}>
+            disabled={$isSubmitting || (connectBehaviour === 'now' && !selectedRepository)}>
             Deploy
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
index a92cb333e..fb089794e 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { LabelCard } from '$lib/components';
+    import { consoleVariables } from '$routes/(console)/store';
 
     export let connectBehaviour: 'now' | 'later' = 'now';
-    // const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-    const isVcsEnabled = true;
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
 </script>
 
 <div style="display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;">
@@ -11,11 +11,11 @@
         value="now"
         bind:group={connectBehaviour}
         disabled={!isVcsEnabled}
-        title="Connect to Git repository">
-        Clone the template to a new repository or connect it to an existing one.
+        title="Connect your repository">
+        Clone this template into a new Git repository or link it to an existing one.
     </LabelCard>
     <LabelCard value="later" bind:group={connectBehaviour} disabled={!isVcsEnabled}>
         <svelte:fragment slot="title">Connect later</svelte:fragment>
-        Deploy now and continue development via CLI, or connect Git from your site settings.
+        Deploy now and connect your version control later via CLI or Git integration in your settings.
     </LabelCard>
 </div>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
index 31243b965..09764f8af 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
@@ -121,11 +121,11 @@
     submitOnEnter={false}>
     <p slot="description">Add, edit, or delete environment variables using a raw editor.</p>
     <Layout.Stack gap="s">
-        <Tabs.Root stretch>
-            <Tabs.Item.Button on:click={() => (tab = 'env')} active={tab === 'env'}>
+        <Tabs.Root stretch let:root>
+            <Tabs.Item.Button {root} on:click={() => (tab = 'env')} active={tab === 'env'}>
                 ENV
             </Tabs.Item.Button>
-            <Tabs.Item.Button on:click={() => (tab = 'json')} active={tab === 'json'}>
+            <Tabs.Item.Button {root} on:click={() => (tab = 'json')} active={tab === 'json'}>
                 JSON
             </Tabs.Item.Button>
         </Tabs.Root>
diff --git a/src/routes/(console)/project-[project]/sites/header.svelte b/src/routes/(console)/project-[project]/sites/header.svelte
index 1ac156e08..bc19b783c 100644
--- a/src/routes/(console)/project-[project]/sites/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/header.svelte
@@ -28,9 +28,10 @@
         <Typography.Title color="--color-fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
     </svelte:fragment>
 
-    <Tabs>
+    <Tabs variant="primary" let:root>
         {#each tabs as tab}
             <Tab
+                {root}
                 href={tab.href}
                 selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
                 event={tab.event}>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
index e8f15385e..8c18ec9ff 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -60,9 +60,9 @@
         });
         metrics = metrics;
         try {
-            const usage = await sdk.forProject.sites.getSiteUsage($page.params.site, range);
+            const usage = await sdk.forProject.sites.getUsage($page.params.site, range);
             metrics = metrics.map((metric) => {
-                metric.value = usage[metric.id];
+                metric.value = usage[metric.id] ?? 'n/a';
                 return metric;
             });
             metrics = metrics;
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
index deac4f016..9d7bcf309 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
@@ -47,9 +47,10 @@
         <CoverTitle href={`${base}/project-${projectId}/sites`}>{$site.name}</CoverTitle>
     </svelte:fragment>
 
-    <Tabs>
+    <Tabs let:root>
         {#each tabs as tab}
             <Tab
+                {root}
                 href={tab.href}
                 selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
                 event={tab.event}>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
index 0b13f89de..33167671b 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
@@ -27,14 +27,16 @@
 </script>
 
 <Layout.Stack>
-    <Tabs.Root variant="secondary">
+    <Tabs.Root variant="secondary" let:root>
         <Tabs.Item.Button
+            {root}
             active={requestTab === 'parameters'}
             on:click={() => (requestTab = 'parameters')}>
             Parameters
             <Badge variant="secondary" size="s" content={parameters?.length?.toString()} />
         </Tabs.Item.Button>
         <Tabs.Item.Button
+            {root}
             active={requestTab === 'headers'}
             on:click={() => (requestTab = 'headers')}>
             Headers <Badge
@@ -42,7 +44,10 @@
                 size="s"
                 content={selectedLog?.requestHeaders?.length?.toString()} />
         </Tabs.Item.Button>
-        <Tabs.Item.Button active={requestTab === 'body'} on:click={() => (requestTab = 'body')}>
+        <Tabs.Item.Button
+            {root}
+            active={requestTab === 'body'}
+            on:click={() => (requestTab = 'body')}>
             Body
         </Tabs.Item.Button>
     </Tabs.Root>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
index 477d56cf3..8a5ddbd60 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
@@ -9,16 +9,21 @@
 </script>
 
 <Layout.Stack>
-    <Tabs.Root variant="secondary">
-        <Tabs.Item.Button active={responseTab === 'logs'} on:click={() => (responseTab = 'logs')}>
+    <Tabs.Root variant="secondary" let:root>
+        <Tabs.Item.Button
+            {root}
+            active={responseTab === 'logs'}
+            on:click={() => (responseTab = 'logs')}>
             Logs
         </Tabs.Item.Button>
         <Tabs.Item.Button
+            {root}
             active={responseTab === 'errors'}
             on:click={() => (responseTab = 'errors')}>
             Errors
         </Tabs.Item.Button>
         <Tabs.Item.Button
+            {root}
             active={responseTab === 'headers'}
             on:click={() => (responseTab = 'headers')}>
             Headers <Badge
@@ -26,7 +31,10 @@
                 size="s"
                 content={selectedLog?.responseHeaders?.length?.toString()} />
         </Tabs.Item.Button>
-        <Tabs.Item.Button active={responseTab === 'body'} on:click={() => (responseTab = 'body')}>
+        <Tabs.Item.Button
+            {root}
+            active={responseTab === 'body'}
+            on:click={() => (responseTab = 'body')}>
             Body
         </Tabs.Item.Button>
     </Tabs.Root>