From c59280ee5302f63fd232ba011d36c8ac99b2bb61 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 15 Jan 2025 17:49:04 +0100
Subject: [PATCH] feat: logs

---
 .../logs/(components)/LogsRequest.svelte      | 58 +++++++++++++++++
 .../logs/(components)/LogsResponse.svelte     | 63 +++++++++++++++++++
 .../sites/site-[site]/logs/sheet.svelte       | 33 ++++------
 3 files changed, 132 insertions(+), 22 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte

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
new file mode 100644
index 000000000..3a72b5a56
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { Models } from '@appwrite.io/console';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Badge, Icon, Layout, Table, Tabs } from '@appwrite.io/pink-svelte';
+
+    export let selectedLog: Models.Execution;
+
+    let requestTab: 'parameters' | 'headers' | 'body' = 'parameters';
+</script>
+
+<Layout.Stack>
+    <Tabs.Root>
+        <Tabs.Item.Button
+            active={requestTab === 'parameters'}
+            on:click={() => (requestTab = 'parameters')}>
+            Parameters
+        </Tabs.Item.Button>
+        <Tabs.Item.Button
+            active={requestTab === 'headers'}
+            on:click={() => (requestTab = 'headers')}>
+            Headers <Badge
+                variant="secondary"
+                size="s"
+                content={selectedLog?.requestHeaders?.length?.toString()} />
+        </Tabs.Item.Button>
+        <Tabs.Item.Button active={requestTab === 'body'} on:click={() => (requestTab = 'body')}>
+            Body
+        </Tabs.Item.Button>
+    </Tabs.Root>
+    {#if requestTab === 'parameters'}
+        parameters
+    {:else if requestTab === 'headers'}
+        {#if selectedLog.requestHeaders?.length}
+            <Table.Root>
+                <svelte:fragment slot="header">
+                    <Table.Header.Cell>Key</Table.Header.Cell>
+                    <Table.Header.Cell>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each selectedLog.requestHeaders as request}
+                    <Table.Row>
+                        <Table.Cell>{request.name}</Table.Cell>
+                        <Table.Cell>{request.value}</Table.Cell>
+                    </Table.Row>
+                {/each}
+            </Table.Root>
+            <p>
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
+                    headers? Check our docs to see the supported data and how to log it.
+                </Layout.Stack>
+            </p>
+        {:else}
+            no headers
+        {/if}
+    {:else if requestTab === 'body'}
+        body
+    {/if}
+</Layout.Stack>
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
new file mode 100644
index 000000000..9faf722f0
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { Models } from '@appwrite.io/console';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { Badge, Icon, Layout, Table, Tabs } from '@appwrite.io/pink-svelte';
+
+    export let selectedLog: Models.Execution;
+
+    let responseTab: 'logs' | 'errors' | 'headers' | 'body' = 'logs';
+</script>
+
+<Layout.Stack>
+    <Tabs.Root>
+        <Tabs.Item.Button active={responseTab === 'logs'} on:click={() => (responseTab = 'logs')}>
+            Logs
+        </Tabs.Item.Button>
+        <Tabs.Item.Button
+            active={responseTab === 'errors'}
+            on:click={() => (responseTab = 'errors')}>
+            Errors
+        </Tabs.Item.Button>
+        <Tabs.Item.Button
+            active={responseTab === 'headers'}
+            on:click={() => (responseTab = 'headers')}>
+            Headers <Badge
+                variant="secondary"
+                size="s"
+                content={selectedLog?.responseHeaders?.length?.toString()} />
+        </Tabs.Item.Button>
+        <Tabs.Item.Button active={responseTab === 'body'} on:click={() => (responseTab = 'body')}>
+            Body
+        </Tabs.Item.Button>
+    </Tabs.Root>
+    {#if responseTab === 'logs'}
+        logs
+    {:else if responseTab === 'errors'}
+        errors
+    {:else if responseTab === 'headers'}
+        {#if selectedLog.responseHeaders?.length}
+            <Table.Root>
+                <svelte:fragment slot="header">
+                    <Table.Header.Cell>Key</Table.Header.Cell>
+                    <Table.Header.Cell>Value</Table.Header.Cell>
+                </svelte:fragment>
+                {#each selectedLog.responseHeaders as request}
+                    <Table.Row>
+                        <Table.Cell>{request.name}</Table.Cell>
+                        <Table.Cell>{request.value}</Table.Cell>
+                    </Table.Row>
+                {/each}
+            </Table.Root>
+            <p>
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
+                    headers? Check our docs to see the supported data and how to log it.
+                </Layout.Stack>
+            </p>
+        {:else}
+            no headers
+        {/if}
+    {:else if responseTab === 'body'}
+        {selectedLog.responseBody}
+    {/if}
+</Layout.Stack>
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 50abc1fe5..2a12437ec 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
@@ -9,22 +9,17 @@
         Icon,
         Layout,
         Sheet,
-        Table,
         Tag,
         Typography
     } from '@appwrite.io/pink-svelte';
     import { timeFromNow } from '$lib/helpers/date';
+    import LogsRequest from './(components)/LogsRequest.svelte';
+    import LogsResponse from './(components)/LogsResponse.svelte';
 
     export let open = false;
     export let selectedLogId: string;
     export let logs: Models.Execution[];
 
-    $: if (!open) {
-        selectedLogId = null;
-    }
-
-    $: selectedLog = logs?.find((log) => log.$id === selectedLogId);
-
     function nextLog() {
         const currentIndex = logs.findIndex((log) => log.$id === selectedLogId);
         if (currentIndex < logs.length - 1) {
@@ -37,9 +32,14 @@
             selectedLogId = logs[currentIndex - 1].$id;
         }
     }
+    $: if (!open) {
+        selectedLogId = null;
+    }
 
+    $: selectedLog = logs?.find((log) => log.$id === selectedLogId);
     $: isFirstLog = logs.findIndex((log) => log.$id === selectedLogId) === 0;
     $: isLastLog = logs.findIndex((log) => log.$id === selectedLogId) === logs.length - 1;
+    $: console.log(selectedLog);
 </script>
 
 <Sheet bind:open>
@@ -120,22 +120,11 @@
                 </Layout.Stack>
             </Accordion>
             <Accordion title="Request" open>
-                {#if selectedLog.requestHeaders?.length}
-                    <Table.Root>
-                        <svelte:fragment slot="header">
-                            <Table.Header.Cell>Key</Table.Header.Cell>
-                            <Table.Header.Cell>Value</Table.Header.Cell>
-                        </svelte:fragment>
-                        {#each selectedLog.requestHeaders as request}
-                            <Table.Row>
-                                <Table.Cell>{request.name}</Table.Cell>
-                                <Table.Cell>{request.value}</Table.Cell>
-                            </Table.Row>
-                        {/each}
-                    </Table.Root>
-                {/if}
+                <LogsRequest {selectedLog} />
+            </Accordion>
+            <Accordion title="Response" open>
+                <LogsResponse {selectedLog} />
             </Accordion>
-            <Accordion title="Response" open>Logs</Accordion>
         </Layout.Stack>
     {/if}
 </Sheet>