From 3c09c7b8fe1ca3196347bb8df68ba6dfa904c746 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 30 Jan 2025 17:15:17 +0100
Subject: [PATCH] feat: logs

---
 .../sites/(components)/logs.svelte            | 16 ++-------
 .../logs/(components)/LogsRequest.svelte      | 36 ++++++++++++++++++-
 .../logs/(components)/LogsResponse.svelte     |  8 ++---
 .../sites/site-[site]/logs/sheet.svelte       |  5 +--
 4 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
index ca5c6bf94a..56db50e32a 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
@@ -10,7 +10,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { Badge, Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Card, Layout, Logs, Spinner, Typography } from '@appwrite.io/pink-svelte';
     import ansicolor from 'ansicolor';
     import { onMount } from 'svelte';
 
@@ -129,9 +129,7 @@
             </Layout.Stack>
         </div>
     </Layout.Stack>
-    <pre>
-        <code>{formatLogs(buildLogs)}</code>
-    </pre>
+    <Logs logs={formatLogs(buildLogs)} />
     <!-- <div>
                         <Code lang="text" code={buildLogs.replace(/\\n/g, '\n')} />
                     </div> -->
@@ -141,13 +139,3 @@
         {/if}
     </Layout.Stack>
 </Layout.Stack>
-
-<style>
-    /* TODO: move to pink */
-    pre {
-        max-height: 600px;
-        overflow-y: scroll;
-        display: flex;
-        flex-direction: column-reverse;
-    }
-</style>
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 f26cbb7eae..0b13f89def 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
@@ -2,10 +2,28 @@
     import type { Models } from '@appwrite.io/console';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { Badge, Icon, Layout, Table, Tabs, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
 
     export let selectedLog: Models.Execution;
 
     let requestTab: 'parameters' | 'headers' | 'body' = 'parameters';
+
+    let parameters = [];
+
+    onMount(() => {
+        try {
+            // Add dummy base URL to parse relative paths
+            const url = new URL(selectedLog.requestPath, 'http://dummy.local');
+            if (url.search) {
+                parameters = Array.from(url.searchParams.entries()).map(([name, value]) => ({
+                    name,
+                    value: decodeURIComponent(value)
+                }));
+            }
+        } catch (error) {
+            parameters = [];
+        }
+    });
 </script>
 
 <Layout.Stack>
@@ -14,6 +32,7 @@
             active={requestTab === 'parameters'}
             on:click={() => (requestTab = 'parameters')}>
             Parameters
+            <Badge variant="secondary" size="s" content={parameters?.length?.toString()} />
         </Tabs.Item.Button>
         <Tabs.Item.Button
             active={requestTab === 'headers'}
@@ -28,7 +47,22 @@
         </Tabs.Item.Button>
     </Tabs.Root>
     {#if requestTab === 'parameters'}
-        <Typography.Code>No parameters found.</Typography.Code>
+        {#if parameters?.length}
+            <Table.Root>
+                <svelte:fragment slot="header">
+                    <Table.Header.Cell>Key</Table.Header.Cell>
+                    <Table.Header.Cell>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each parameters as parameter}
+                    <Table.Row>
+                        <Table.Cell>{parameter.name}</Table.Cell>
+                        <Table.Cell>{parameter.value}</Table.Cell>
+                    </Table.Row>
+                {/each}
+            </Table.Root>
+        {:else}
+            <Typography.Code>No parameters found.</Typography.Code>
+        {/if}
     {:else if requestTab === 'headers'}
         {#if selectedLog.requestHeaders?.length}
             <Table.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 0e79182eae..477d56cf35 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
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Models } from '@appwrite.io/console';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import { Badge, Icon, Layout, Table, Tabs, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, Layout, Logs, Table, Tabs, Typography } from '@appwrite.io/pink-svelte';
 
     export let selectedLog: Models.Execution;
 
@@ -32,13 +32,13 @@
     </Tabs.Root>
     {#if responseTab === 'logs'}
         {#if selectedLog.logs}
-            {selectedLog.logs}
+            <Logs logs={selectedLog.logs} />
         {:else}
             <Typography.Code>No logs found.</Typography.Code>
         {/if}
     {:else if responseTab === 'errors'}
         {#if selectedLog.errors}
-            {selectedLog.errors}
+            <Logs logs={selectedLog.errors} />
         {:else}
             <Typography.Code>No errors found.</Typography.Code>
         {/if}
@@ -67,7 +67,7 @@
         {/if}
     {:else if responseTab === 'body'}
         {#if selectedLog.responseBody}
-            {selectedLog.responseBody}
+            <Logs logs={selectedLog.responseBody} />
         {:else}
             <Typography.Code>No parameters found.</Typography.Code>
         {/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
index 2a12437ece..7569f0bd8a 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
@@ -70,8 +70,9 @@
                                 color="--color-fgcolor-neutral-tertiary">
                                 Method
                             </Typography.Text>
-                            <Typography.Text variant="m-400"
-                                >{selectedLog.requestMethod}</Typography.Text>
+                            <Typography.Text variant="m-400">
+                                {selectedLog.requestMethod}
+                            </Typography.Text>
                         </Layout.Stack>
                         <Layout.Stack gap="xs" inline>
                             <Typography.Text