Merge pull request #246 from appwrite/feat/in-progress-execution-timer

Feat: function execution timer

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);
+        }
+    };
+};

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;
 
@@ -188,7 +189,9 @@
                                 </TableCell>
 
                                 <TableCellText title="Build Time">
-                                    {#if deployment.status === 'ready'}
+                                    {#if ['processing', 'building'].includes(deployment.status)}
+                                        <span use:timer={{ start: deployment.$createdAt }} />
+                                    {:else}
                                         {calculateTime(deployment.buildTime)}
                                     {/if}
                                 </TableCellText>

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

@@ -1,28 +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 {
-        TableHeader,
         TableBody,
-        TableCellHead,
         TableCell,
+        TableCellHead,
         TableCellText,
+        TableHeader,
         TableRow,
         TableScroll
     } 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 { func } from '../../store';
+    import type { PageData } from './$types';
 
     export let data: PageData;
     let showCreate = false;
@@ -83,7 +83,8 @@
                             </Pill>
                         </TableCellText>
                         <TableCellText title="Duration">
-                            {calculateTime(execution.duration)}</TableCellText>
+                            {calculateTime(execution.duration)}
+                        </TableCellText>
                         <TableCell>
                             <Button
                                 secondary

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": ["webworker", "ES2016", "DOM"],
+        "lib": ["webworker", "DOM", "ESNext"],
         "module": "ESNext",
         "moduleResolution": "Node",
         "importsNotUsedAsValues": "error",