feat: logs for execution

src/lib/components/logs.svelte

@@ -9,11 +9,12 @@
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { page } from '$app/stores';
+    import { calculateTime } from '$lib/helpers/timeConversion';
 
     console.log('test');
 
-    let selectedTab = 'response';
-    let rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/execution/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+    let selectedTab: string;
+    let rawData: string;
 
     const languages = {
         'node-16.0': 'js',
@@ -23,11 +24,22 @@
     };
 
     function isDeployment(data: Models.Deployment | Models.Execution): data is Models.Deployment {
-        selectedTab = 'logs';
-        rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/deployment/${data.$id}?mode=admin&project=${$page.params.project}`;
-
-        return true;
+        if ('buildId' in data) {
+            selectedTab = 'logs';
+            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/deployment/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            return true;
+        }
     }
+
+    function isExecution(data: Models.Deployment | Models.Execution): data is Models.Execution {
+        if ('trigger' in data) {
+            selectedTab = 'response';
+            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/execution/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            return true;
+        }
+    }
+
+    console.log(isDeployment($log.data));
 </script>
 
 {#if $log.data}
@@ -67,10 +79,14 @@
                     <Tabs>
                         <Tab
                             selected={selectedTab === 'logs'}
-                            on:click={() => (selectedTab = 'logs')}>Logs</Tab>
+                            on:click={() => (selectedTab = 'logs')}>
+                            Logs
+                        </Tab>
                         <Tab
                             selected={selectedTab === 'errors'}
-                            on:click={() => (selectedTab = 'errors')}>Errors</Tab>
+                            on:click={() => (selectedTab = 'errors')}>
+                            Errors
+                        </Tab>
                     </Tabs>
                 </div>
                 <div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
@@ -104,8 +120,90 @@
                     </section>
                 </div>
             </div>
-        {:else}
-            lol
+        {:else if isExecution($log.data)}
+            <div class="cover-frame-content u-flex u-flex-vertical">
+                <div class="u-flex u-gap-16">
+                    <div class="avatar is-size-large">
+                        <img
+                            height="28"
+                            width="28"
+                            src={`${base}/icons/${$app.themeInUse}/color/${
+                                $log.func.runtime.split('-')[0]
+                            }.svg`}
+                            alt="technology" />
+                    </div>
+                    <div>
+                        <h2 class="body-text-2">Execution ID: {$log.data.$id}</h2>
+                        <time class="u-block">
+                            Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
+                    </div>
+                    <div>
+                        <p>Triggered by: {$log.data.trigger}</p>
+                        <p>Type: TBI</p>
+                    </div>
+                    <div class="status u-margin-inline-start-auto">
+                        <Status status={$log.data.status}>{$log.data.status}</Status>
+
+                        <time>{calculateTime($log.data.duration)}</time>
+                    </div>
+                </div>
+                <div class="tabs u-margin-block-start-48 u-sep-block-end">
+                    <Tabs>
+                        <Tab
+                            selected={selectedTab === 'response'}
+                            on:click={() => (selectedTab = 'response')}>
+                            Response
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'errors'}
+                            on:click={() => (selectedTab = 'errors')}>
+                            Errors
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'logs'}
+                            on:click={() => (selectedTab = 'logs')}>
+                            Logs
+                        </Tab>
+                    </Tabs>
+                </div>
+                <div class="theme-dark u-stretch u-margin-block-start-32 u-overflow-hidden">
+                    <section class="code-panel">
+                        <header class="code-panel-header">
+                            <div class="u-flex u-gap-16 u-margin-inline-start-auto">
+                                <Button text external href={rawData}>
+                                    <span class="icon-external-link" aria-hidden="true" />
+                                    <span class="text">Raw data</span>
+                                </Button>
+                                <Button secondary>
+                                    <span class="text">Scroll to top</span>
+                                </Button>
+                            </div>
+                        </header>
+                        {#if selectedTab === 'logs'}
+                            <Code
+                                scrollable
+                                noMargin
+                                withLineNumbers
+                                language={languages[$log.func.runtime]}
+                                code={$log.data.stdout ?? 'No logs recorded'} />
+                        {:else if selectedTab === 'errors'}
+                            <Code
+                                scrollable
+                                noMargin
+                                withLineNumbers
+                                language={languages[$log.func.runtime]}
+                                code={$log.data.stderr ?? 'No errors recorded'} />
+                        {:else}
+                            <Code
+                                scrollable
+                                noMargin
+                                withLineNumbers
+                                language={languages[$log.func.runtime]}
+                                code={$log.data.response ?? 'No response recorded'} />
+                        {/if}
+                    </section>
+                </div>
+            </div>
         {/if}
     </section>
 {/if}

src/lib/helpers/sizeConvertion.ts

@@ -24,6 +24,7 @@ export function humanFileSize(value: number): {
     value: string;
     unit: string;
 } {
+    if (!value) return { value: 'No', unit: 'Bytes' };
     const length = value.toString().length;
     const unit =
         length < 7

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

@@ -20,6 +20,7 @@
     import { calculateTime } from '$lib/helpers/timeConversion';
     import { Query } from '@aw-labs/appwrite-console';
     import { log } from '$lib/stores/logs';
+    import { func } from '../store';
 
     let search = '';
     let offset = 0;
@@ -47,6 +48,7 @@
                     <TableRow
                         on:click={() => {
                             $log.show = true;
+                            $log.func = $func;
                             $log.data = execution;
                         }}>
                         <TableCell title="Deployment ID">
@@ -65,7 +67,7 @@
                                 <span class="text u-trim">{execution.trigger}</span>
                             </Pill>
                         </TableCellText>
-                        <TableCellText title="Type">{execution.trigger}</TableCellText>
+                        <TableCellText title="Type">TBI</TableCellText>
                         <TableCellText title="Duration">
                             {calculateTime(execution.duration)}</TableCellText>
                     </TableRow>