From 913f1c620eaa3155f425b3c8de58097652022fb7 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 2 Feb 2023 17:12:17 +0000
Subject: [PATCH 1/5] feat: function execution timer

---
 src/lib/actions/timer.ts                      | 40 +++++++++++++++++++
 .../executions/[[page]]/+page.svelte          |  8 +++-
 tsconfig.json                                 |  8 +++-
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/actions/timer.ts

diff --git a/src/lib/actions/timer.ts b/src/lib/actions/timer.ts
new file mode 100644
index 000000000..1e5f9411e
--- /dev/null
+++ b/src/lib/actions/timer.ts
@@ -0,0 +1,40 @@
+import { calculateTime } from '$lib/helpers/timeConversion';
+import type { Action } from 'svelte/action';
+
+type Props = {
+    start?: string;
+    enabled?: boolean;
+};
+
+const defaultProps: Props = {
+    enabled: true
+};
+
+export const timer: Action<HTMLElement, Props> = (node, props) => {
+    let startDate: Date;
+    let frame: number;
+
+    function init(props: Props) {
+        const { start, enabled } = { ...defaultProps, ...props };
+        startDate = start ? new Date(start) : new Date();
+        frame = enabled ? window.requestAnimationFrame(step) : null;
+    }
+
+    function step() {
+        const diffInSeconds = Math.floor((new Date().getTime() - startDate.getTime()) / 1000);
+        node.textContent = calculateTime(diffInSeconds);
+        frame = window.requestAnimationFrame(step);
+    }
+
+    init(props);
+
+    return {
+        update(props) {
+            window.cancelAnimationFrame(frame);
+            init(props);
+        },
+        destroy() {
+            window.cancelAnimationFrame(frame);
+        }
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
index 6c0ba8502..2e9c766e5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
@@ -23,6 +23,7 @@
     import { invalidate } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
     import CreateDeployment from '../../create.svelte';
+    import { timer } from '$lib/actions/timer';
 
     export let data: PageData;
     let showCreate = false;
@@ -83,7 +84,12 @@
                             </Pill>
                         </TableCellText>
                         <TableCellText title="Duration">
-                            {calculateTime(execution.duration)}</TableCellText>
+                            {#if execution.duration === 0}
+                                <span use:timer={{ start: execution.$createdAt }} />
+                            {:else}
+                                {calculateTime(execution.duration)}
+                            {/if}
+                        </TableCellText>
                         <TableCell>
                             <Button
                                 secondary
diff --git a/tsconfig.json b/tsconfig.json
index d164d251e..1dda41afa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": ["webworker"],
+        "lib": [
+            "webworker",
+            "DOM",
+            "ESNext"
+        ],
         "module": "ESNext",
         "moduleResolution": "Node",
         "importsNotUsedAsValues": "error",
@@ -11,4 +15,4 @@
         "esModuleInterop": true,
         "resolveJsonModule": true
     }
-}
+}
\ No newline at end of file

From cd3527da82329b6b146db859174ffebd768a170f Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 8 Feb 2023 20:09:11 +0000
Subject: [PATCH 2/5] fix: linting

---
 tsconfig.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 1dda41afa..928ba209d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": [
-            "webworker",
-            "DOM",
-            "ESNext"
-        ],
+        "lib": ["webworker", "DOM", "ESNext"],
         "module": "ESNext",
         "moduleResolution": "Node",
         "importsNotUsedAsValues": "error",
@@ -15,4 +11,4 @@
         "esModuleInterop": true,
         "resolveJsonModule": true
     }
-}
\ No newline at end of file
+}

From e79b68d06a39bea48ebaa16a6e6f3cfbd14429c8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 15:33:37 +0000
Subject: [PATCH 3/5] feat: add timer to deployments

---
 .../functions/function-[function]/[[page]]/+page.svelte        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
index 292ee519b..fb69ec821 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
@@ -39,6 +39,7 @@
     import { page } from '$app/stores';
     import Output from '$lib/components/output.svelte';
     import { calculateTime } from '$lib/helpers/timeConversion';
+    import { timer } from '$lib/actions/timer';
 
     export let data: PageData;
 
@@ -190,6 +191,8 @@
                                 <TableCellText title="Build Time">
                                     {#if deployment.status === 'ready'}
                                         {calculateTime(deployment.buildTime)}
+                                    {:else}
+                                        <span use:timer={{ start: deployment.$createdAt }} />
                                     {/if}
                                 </TableCellText>
 

From bdb2b7b43247213fc02ef1f0e951721458ee89af Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 17:09:21 +0000
Subject: [PATCH 4/5] refactor: remove timer from executions

---
 .../executions/[[page]]/+page.svelte          | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
index 2e9c766e5..a79107390 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
@@ -1,29 +1,28 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Copy, EmptySearch, Heading, Pagination, Status } from '$lib/components';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
     import { Pill } from '$lib/elements';
-    import { Copy, Status, Heading, Pagination, EmptySearch } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
-        TableHeader,
         TableBody,
-        TableCellHead,
         TableCell,
+        TableCellHead,
         TableCellText,
+        TableHeader,
         TableRow
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { calculateTime } from '$lib/helpers/timeConversion';
+    import { Container } from '$lib/layout';
     import { log } from '$lib/stores/logs';
-    import { func } from '../../store';
-    import type { PageData } from './$types';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-    import { page } from '$app/stores';
-    import { onDestroy, onMount } from 'svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { invalidate } from '$app/navigation';
-    import { Button } from '$lib/elements/forms';
+    import { onDestroy, onMount } from 'svelte';
     import CreateDeployment from '../../create.svelte';
-    import { timer } from '$lib/actions/timer';
+    import { func } from '../../store';
+    import type { PageData } from './$types';
 
     export let data: PageData;
     let showCreate = false;
@@ -84,11 +83,7 @@
                             </Pill>
                         </TableCellText>
                         <TableCellText title="Duration">
-                            {#if execution.duration === 0}
-                                <span use:timer={{ start: execution.$createdAt }} />
-                            {:else}
-                                {calculateTime(execution.duration)}
-                            {/if}
+                            {calculateTime(execution.duration)}
                         </TableCellText>
                         <TableCell>
                             <Button

From 7db81533119588609ffc2ba9fbe96154d9ec4f3e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 10 Feb 2023 12:15:00 +0000
Subject: [PATCH 5/5] fix: timer not stopping when failed

---
 .../functions/function-[function]/[[page]]/+page.svelte     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
index fb69ec821..3d148a5d5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
@@ -189,10 +189,10 @@
                                 </TableCell>
 
                                 <TableCellText title="Build Time">
-                                    {#if deployment.status === 'ready'}
-                                        {calculateTime(deployment.buildTime)}
-                                    {:else}
+                                    {#if ['processing', 'building'].includes(deployment.status)}
                                         <span use:timer={{ start: deployment.$createdAt }} />
+                                    {:else}
+                                        {calculateTime(deployment.buildTime)}
                                     {/if}
                                 </TableCellText>