Make pending scheduled tasks cancellable

src/components/Menu.svelte

@@ -24,6 +24,7 @@
 
     let isOpen = $state(false);
 
+    // svelte-ignore non_reactive_update
     let outer: HTMLButtonElement;
     // svelte-ignore non_reactive_update
     let inner: HTMLDivElement;
@@ -51,30 +52,39 @@
     });
 </script>
 
-<button bind:this={outer} onclick={close} oncontextmenu={toggle} class="h-full w-full text-left">
-    {@render children?.()}
-
-    <Flex
-        bind:ref={inner}
-        class={`${isOpen ? 'fixed' : 'hidden'} bg-light z-20 min-w-56 flex-col 
-        rounded-lg border border-light py-2 text-base shadow-md shadow-black/10 group-hover:block`}
+{#if items.length}
+    <button
+        bind:this={outer}
+        onclick={close}
+        oncontextmenu={toggle}
+        class="h-full w-full text-left"
     >
-        {#each items as item, i (i)}
-            <button
-                onclick={() => onclick(item)}
-                class={twMerge(
-                    'hover:bg-purple flex w-full flex-row items-center p-8 py-1.5 hover:cursor-pointer',
-                    item.style
-                )}
-            >
-                {#if item.icon}
-                    <div class="mr-4 h-4 w-4">
-                        <Svg name={item.icon} />
-                    </div>
-                {/if}
+        {@render children?.()}
 
-                <p>{item.label}</p>
-            </button>
-        {/each}
-    </Flex>
-</button>
+        <Flex
+            bind:ref={inner}
+            class={`${isOpen ? 'fixed' : 'hidden'} bg-light border-light z-20 min-w-56 
+        flex-col rounded-lg border py-2 text-base shadow-md shadow-black/10 group-hover:block`}
+        >
+            {#each items as item, i (i)}
+                <button
+                    onclick={() => onclick(item)}
+                    class={twMerge(
+                        'hover:bg-purple flex w-full flex-row items-center p-8 py-1.5 hover:cursor-pointer',
+                        item.style
+                    )}
+                >
+                    {#if item.icon}
+                        <div class="mr-4 h-4 w-4">
+                            <Svg name={item.icon} />
+                        </div>
+                    {/if}
+
+                    <p>{item.label}</p>
+                </button>
+            {/each}
+        </Flex>
+    </button>
+{:else}
+    {@render children?.()}
+{/if}

src/lib/models/base.svelte.ts

@@ -234,7 +234,7 @@ export default function Model<R extends object>(table: string) {
         }
 
         /**
-         * Delete a record, by`id`.
+         * Delete a record, by `id`.
          */
         async delete(): Promise<boolean> {
             const query = await db.execute(`DELETE FROM ${table} WHERE id = $1`, [this.id]);

src/lib/models/task-run.svelte.ts

@@ -40,18 +40,31 @@ export default class TaskRun extends Base<Row>('task_runs') {
         return Session.find(Number(this.sessionId));
     }
 
+    isPending() {
+        return this.state == State.Pending;
+    }
+
     async pending() {
         this.state = State.Pending;
         await this.save();
     }
 
+    isSuccess() {
+        return this.state == State.Success;
+    }
+
     async succeed() {
         this.state = State.Success;
         await this.save();
     }
 
-    async fail() {
+    isFailure() {
+        return this.state == State.Failure;
+    }
+
+    async fail(reason: string = '') {
         this.state = State.Failure;
+        this.stateReason = reason;
         await this.save();
     }
 

src/routes/tasks/[task_id]/runs/[run_id]/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
+    import { afterNavigate, goto } from '$app/navigation';
     import { page } from '$app/state';
 
     import Flex from '$components/Flex.svelte';
     import Link from '$components/Link.svelte';
     import List from '$components/List.svelte';
+    import Menu from '$components/Menu.svelte';
     import Message from '$components/Message.svelte';
     import Spinner from '$components/Spinner.svelte';
     import Svg from '$components/Svg.svelte';
@@ -25,6 +26,25 @@
         }
     }
 
+    async function cancel(run: TaskRun) {
+        await run.fail('Cancelled');
+        goto(`/tasks/${task.id}`);
+    }
+
+    function menuItems(run: TaskRun) {
+        if (run.isPending()) {
+            return [
+                {
+                    label: 'Cancel',
+                    style: 'text-red hover:bg-red hover:text-white',
+                    onclick: async () => await cancel(run),
+                },
+            ];
+        } else {
+            return [];
+        }
+    }
+
     afterNavigate(() => {
         scrollToBottom(content);
     });
@@ -34,22 +54,28 @@
     });
 </script>
 
-{#snippet RunView(run: TaskRun)}
-    <Link
-        href={`/tasks/${task.id}/runs/${run.id}`}
-        class="text-medium flex flex-row items-center px-7 py-2"
-        activeClass="text-purple border-l border-l-purple"
-    >
-        {#if run.state == State.Pending}
-            <Spinner class="h-4 w-4 before:border-[2px] before:border-white/30" />
-        {:else if run.state == State.Success}
-            <Svg name="Check" class="text-green h-4 w-4" />
-        {:else}
-            <Svg name="Error" class="text-red h-4 w-4" />
-        {/if}
+{#snippet RunListItem(run: TaskRun)}
+    <Menu items={menuItems(run)}>
+        <Flex class="w-full pr-8">
+            <Link
+                href={`/tasks/${task.id}/runs/${run.id}`}
+                class="text-medium flex grow flex-row items-center px-7 py-2"
+                activeClass="text-purple border-l border-l-purple"
+            >
+                {#if run.state == State.Pending}
+                    <Spinner class="h-4 w-4 before:border-[2px] before:border-white/30" />
+                {:else if run.state == State.Success}
+                    <Svg name="Check" class="text-green h-4 w-4" />
+                {:else}
+                    <Svg name="Error" class="text-red h-4 w-4" />
+                {/if}
 
-        <p class="ml-4">{run.created?.format('LLLL')} UTC</p>
-    </Link>
+                <p class="ml-4">{run.created?.format('LLLL')} UTC</p>
+            </Link>
+
+            <p class="text-medium text-xs">{run.stateReason}</p>
+        </Flex>
+    </Menu>
 {/snippet}
 
 {#key page.params.task_id}
@@ -69,7 +95,7 @@
 
         <Flex class="border-t-light h-2/5 w-full flex-col items-start border-t">
             <h3 class="bg-medium w-full py-2 pl-8 font-medium uppercase">History</h3>
-            <List items={task?.runs} itemView={RunView} class="border-t-light border-t" />
+            <List items={task?.runs} itemView={RunListItem} class="border-t-light border-t" />
         </Flex>
     </Flex>
 {/key}