From e93ce4436521d35c85829f935202588abe503728 Mon Sep 17 00:00:00 2001
From: Cees Voesenek <cees.voesenek@vortech.nl>
Date: Wed, 18 Dec 2024 13:12:17 +0100
Subject: [PATCH 1/9] Add task runs panel

This adds a button to the application bar that opens a task runs menu,
showing currently running tasks and their properties.
---
 .../tasks/BaseTaskFilterControl.vue           | 114 ++++++++++++
 src/components/tasks/PeriodFilterControl.vue  |  68 ++++++++
 src/components/tasks/TaskRunProgress.vue      | 120 +++++++++++++
 src/components/tasks/TaskRunSummary.vue       | 164 ++++++++++++++++++
 src/components/tasks/TaskRunsPanel.vue        | 157 +++++++++++++++++
 .../tasks/TaskStatusFilterControl.vue         |  87 ++++++++++
 .../tasks/WorkflowFilterControl.vue           |  31 ++++
 src/layouts/DefaultLayout.vue                 |  14 +-
 src/lib/date/index.ts                         |   3 +
 src/lib/period/convert.ts                     |  12 ++
 src/lib/period/index.ts                       |   1 +
 src/lib/period/types.ts                       |   9 +
 src/lib/taskruns/convert.ts                   |  84 +++++++++
 src/lib/taskruns/index.ts                     |   3 +
 src/lib/taskruns/status.ts                    |  87 ++++++++++
 src/lib/taskruns/types.ts                     |  32 ++++
 src/lib/timer/create.ts                       |  44 +++++
 src/lib/timer/index.ts                        |   2 +
 src/lib/timer/types.ts                        |   3 +
 src/services/useTasksRuns/index.ts            | 126 ++++++++++++++
 src/views/TopologyDisplayView.vue             |  24 ++-
 21 files changed, 1181 insertions(+), 4 deletions(-)
 create mode 100644 src/components/tasks/BaseTaskFilterControl.vue
 create mode 100644 src/components/tasks/PeriodFilterControl.vue
 create mode 100644 src/components/tasks/TaskRunProgress.vue
 create mode 100644 src/components/tasks/TaskRunSummary.vue
 create mode 100644 src/components/tasks/TaskRunsPanel.vue
 create mode 100644 src/components/tasks/TaskStatusFilterControl.vue
 create mode 100644 src/components/tasks/WorkflowFilterControl.vue
 create mode 100644 src/lib/period/convert.ts
 create mode 100644 src/lib/period/index.ts
 create mode 100644 src/lib/period/types.ts
 create mode 100644 src/lib/taskruns/convert.ts
 create mode 100644 src/lib/taskruns/index.ts
 create mode 100644 src/lib/taskruns/status.ts
 create mode 100644 src/lib/taskruns/types.ts
 create mode 100644 src/lib/timer/create.ts
 create mode 100644 src/lib/timer/index.ts
 create mode 100644 src/lib/timer/types.ts
 create mode 100644 src/services/useTasksRuns/index.ts

diff --git a/src/components/tasks/BaseTaskFilterControl.vue b/src/components/tasks/BaseTaskFilterControl.vue
new file mode 100644
index 000000000..8c88d6ffa
--- /dev/null
+++ b/src/components/tasks/BaseTaskFilterControl.vue
@@ -0,0 +1,114 @@
+<template>
+  <v-menu :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-chip
+        variant="tonal"
+        :color="isAllSelected ? undefined : 'primary'"
+        v-bind="props"
+      >
+        <template #prepend>
+          <v-btn
+            class="mr-2"
+            size="20"
+            variant="plain"
+            :icon="isAllSelected ? 'mdi-filter-plus' : 'mdi-filter-remove'"
+            @click="removeFilterIfEnabled"
+          />
+        </template>
+        {{ label }}
+      </v-chip>
+    </template>
+    <v-card min-height="300" height="50dvh">
+      <v-card-text class="h-100 d-flex flex-column gr-2">
+        <div class="flex-0-0 d-flex flex-row justify-space-between">
+          <v-btn @click="selectAll">Select all</v-btn>
+          <v-btn @click="selectNone">Select none</v-btn>
+        </div>
+        <div class="flex-0-0">
+          <slot name="actions"></slot>
+        </div>
+        <v-list
+          class="flex-1-1 overflow-auto"
+          v-model:selected="selectedValues"
+          select-strategy="leaf"
+        >
+          <v-list-item
+            v-for="item in sortedItems"
+            :key="item.id"
+            :title="item.title"
+            :value="item.value"
+          >
+            <template #prepend="{ isSelected }">
+              <v-list-item-action start>
+                <v-checkbox-btn :model-value="isSelected" />
+              </v-list-item-action>
+            </template>
+            <template v-if="item.isPreferred" #append>
+              <v-icon icon="mdi-star" />
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
+
+interface SelectItem {
+  id: string
+  title: string
+  value: T
+  isPreferred?: boolean
+}
+
+interface Props {
+  label: string
+  items: SelectItem[]
+  doSortItems?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  doSortItems: false,
+})
+const selectedValues = defineModel<T[]>({ required: true })
+
+const sortedItems = computed<SelectItem[]>(() => {
+  // Sort items only if selected.
+  if (!props.doSortItems) return props.items
+
+  return props.items.toSorted((a, b) => {
+    if (a.isPreferred && !b.isPreferred) {
+      // Preferred items appear at the top.
+      return -1
+    } else if (!a.isPreferred && b.isPreferred) {
+      // Preferred items appear at the top.
+      return 1
+    } else {
+      // Preferred items are sorted by title.
+      return a.title.localeCompare(b.title)
+    }
+  })
+})
+
+const allValues = computed<T[]>(() => props.items.map((item) => item.value))
+const isAllSelected = computed<boolean>(
+  () => selectedValues.value.length === props.items.length,
+)
+
+function removeFilterIfEnabled(event: MouseEvent): void {
+  // We don't need to do anything if we have no filter defined.
+  if (isAllSelected.value) return
+  // Otherwise, remove the filter and prevent propagation of the click event so
+  // we do not open the menu.
+  event.stopPropagation()
+  selectAll()
+}
+
+function selectAll(): void {
+  selectedValues.value = allValues.value
+}
+
+function selectNone(): void {
+  selectedValues.value = []
+}
+</script>
diff --git a/src/components/tasks/PeriodFilterControl.vue b/src/components/tasks/PeriodFilterControl.vue
new file mode 100644
index 000000000..2e89fe253
--- /dev/null
+++ b/src/components/tasks/PeriodFilterControl.vue
@@ -0,0 +1,68 @@
+<template>
+  <v-select
+    v-model="numSecondsBack"
+    :items="options"
+    item-value="numSecondsBack"
+    density="compact"
+    hide-details
+  />
+</template>
+<script setup lang="ts">
+import { RelativePeriod } from '@/lib/period'
+import { computed } from 'vue'
+
+const period = defineModel<RelativePeriod | null>({ required: true })
+
+interface RelativePeriodOption {
+  id: string
+  title: string
+  numSecondsBack: number | null
+}
+
+const secondsPerHour = 60 * 60
+const secondsPerDay = 24 * secondsPerHour
+const options: RelativePeriodOption[] = [
+  {
+    id: '-2h',
+    title: 'Last 2 hours',
+    numSecondsBack: 2 * secondsPerHour,
+  },
+  {
+    id: '-8h',
+    title: 'Last 8 hours',
+    numSecondsBack: 8 * secondsPerHour,
+  },
+  {
+    id: '-1d',
+    title: 'Last day',
+    numSecondsBack: 1 * secondsPerDay,
+  },
+  {
+    id: '-1w',
+    title: 'Last week',
+    numSecondsBack: 7 * secondsPerDay,
+  },
+  {
+    id: 'all',
+    title: 'All',
+    numSecondsBack: null,
+  },
+] as const
+
+const numSecondsBack = computed<number | null>({
+  get: () => {
+    if (!period.value) return null
+    return -period.value?.startOffsetSeconds
+  },
+  set: (newNumSecondsBack) => {
+    if (newNumSecondsBack === null) {
+      period.value = null
+    } else {
+      period.value = {
+        startOffsetSeconds: -newNumSecondsBack,
+        endOffsetSeconds: 0,
+      }
+    }
+  },
+})
+</script>
diff --git a/src/components/tasks/TaskRunProgress.vue b/src/components/tasks/TaskRunProgress.vue
new file mode 100644
index 000000000..9ea311984
--- /dev/null
+++ b/src/components/tasks/TaskRunProgress.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-tooltip location="bottom">
+    <template #activator="{ props: activatorProps }">
+      <v-progress-linear
+        v-bind="activatorProps"
+        v-model="progress"
+        :color="color"
+        :indeterminate="isUnknownProgress"
+      />
+    </template>
+    {{ details }}
+  </v-tooltip>
+</template>
+<script setup lang="ts">
+import { createTimer, Timer } from '@/lib/timer'
+import { Duration, DurationUnit } from 'luxon'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+interface Props {
+  dispatchTimestamp: number | null
+  expectedRuntimeSeconds: number | null
+  color?: string
+  updateIntervalSeconds?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  updateIntervalSeconds: 0.5,
+})
+
+const progress = ref(0)
+const isUnknownProgress = ref(false)
+const details = ref('')
+
+// Initialise progress, then update every few seconds; remove timer when the
+// component is unmounted.
+let timer: Timer | null = null
+onMounted(() => {
+  timer = createTimer(updateProgress, props.updateIntervalSeconds, true)
+})
+onUnmounted(() => timer?.deactivate())
+
+function updateProgress(): void {
+  if (
+    props.dispatchTimestamp === null ||
+    props.expectedRuntimeSeconds === null
+  ) {
+    // If we do not know how long to take, set progress to unknown to show
+    // progress bar as indeterminate.
+    setProgress(null)
+    return
+  }
+
+  const currentTimestamp = Date.now()
+  const currentDurationSeconds =
+    (currentTimestamp - props.dispatchTimestamp) / 1000
+  // Compute expected fraction done.
+  const fractionDone = currentDurationSeconds / props.expectedRuntimeSeconds
+
+  // If we are over 100%, set progress to null since we cannot predict our
+  // progress anymore.
+  setProgress(fractionDone <= 1 ? fractionDone * 100 : null)
+}
+
+function setProgress(newProgress: number | null): void {
+  isUnknownProgress.value = newProgress === null
+  progress.value = newProgress ?? 0
+  details.value = getProgressDetails()
+}
+
+function getProgressDetails(): string {
+  if (isUnknownProgress.value) {
+    return getRemainingTimeString()
+  }
+  const percentage = progress.value.toFixed(0)
+  const remaining = getRemainingTimeString()
+  return `${percentage}%; ${remaining}`
+}
+
+function getRemainingTimeString(): string {
+  const currentTimestamp = Date.now()
+  const currentDurationMilliseconds =
+    currentTimestamp - props.dispatchTimestamp!
+  const remainingMilliseconds =
+    props.expectedRuntimeSeconds! * 1000 - currentDurationMilliseconds
+
+  const hasOverrunExpectedTime = remainingMilliseconds < 0
+  if (hasOverrunExpectedTime) {
+    // We have overrun our expected task duration, negate the remaining time and
+    // format this as the amount of time we've overrun.
+    const remaining = formatDuration(-remainingMilliseconds)
+    return `Overran expected time by: ${remaining}`
+  } else {
+    const remaining = formatDuration(remainingMilliseconds)
+    return `expected time remaining: ${remaining}`
+  }
+}
+
+function formatDuration(durationMilliseconds: number): string {
+  // Convert to human-readable duration in hours, minutes and seconds; drop
+  // the milliseconds.
+  // FIXME: workaround for Luxon's weird behaviour of toHuman(), which leaves
+  //        units that are 0 in the final string.
+  const units: DurationUnit[] = ['seconds']
+  if (durationMilliseconds > 1000 * 60) {
+    units.push('minutes')
+  }
+  if (durationMilliseconds > 1000 * 60 * 60) {
+    units.push('hours')
+  }
+  if (durationMilliseconds > 1000 * 60 * 60 * 24) {
+    units.push('days')
+  }
+
+  const duration = Duration.fromMillis(durationMilliseconds).shiftTo(...units)
+  // Remove milliseconds.
+  const durationWithoutMilliseconds = duration.set({
+    seconds: Math.round(duration.seconds),
+  })
+  return durationWithoutMilliseconds.toHuman()
+}
+</script>
diff --git a/src/components/tasks/TaskRunSummary.vue b/src/components/tasks/TaskRunSummary.vue
new file mode 100644
index 000000000..74232605a
--- /dev/null
+++ b/src/components/tasks/TaskRunSummary.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="d-flex flex-column">
+    <div>
+      <div class="d-flex flex-row justify-space-between">
+        <div>
+          {{ workflow.name }}
+        </div>
+        <div v-if="task.isScheduled" class="scheduled-task">Scheduled</div>
+        <div v-else>{{ task.userId }}</div>
+      </div>
+    </div>
+    <div v-if="!task.isScheduled && task.description" class="description">
+      {{ task.description }}
+    </div>
+    <div class="d-flex flex-row align-center gc-4">
+      <div
+        class="status d-flex flex-row align-center gc-1"
+        :class="statusClass"
+      >
+        <v-icon :icon="statusIcon" size="20" />
+        <span>{{ statusString }}</span>
+      </div>
+      <TaskRunProgress
+        v-if="isRunning"
+        :dispatch-timestamp="task.dispatchTimestamp"
+        :expected-runtime-seconds="workflow.expectedRuntimeSeconds"
+        color="info"
+      />
+    </div>
+    <div class="times d-flex flex-row gc-4">
+      <div>
+        <div>T0</div>
+        <div>{{ timeZeroString }}</div>
+      </div>
+      <div>
+        <div>Dispatched</div>
+        <div>{{ dispatchTimeString }}</div>
+      </div>
+      <div v-if="task.status === TaskStatus.Running">
+        <div>Expected completion</div>
+        <div>{{ expectedCompletionTimeString }}</div>
+      </div>
+      <div v-else>
+        <div>Completed</div>
+        <div>{{ completionTimeString }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  convertTaskStatusToString,
+  getTaskStatusCategory,
+  TaskRun,
+  TaskStatus,
+  TaskStatusCategory,
+} from '@/lib/taskruns'
+import { Workflow } from '@/lib/workflows'
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+import { computed } from 'vue'
+import TaskRunProgress from './TaskRunProgress.vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+
+interface Props {
+  task: TaskRun
+}
+const props = defineProps<Props>()
+
+const workflow = computed<Workflow>(() =>
+  availableWorkflowsStore.byId(props.task.workflowId),
+)
+
+const isRunning = computed<boolean>(
+  () => props.task.status === TaskStatus.Running,
+)
+
+const timeZeroString = computed<string>(() =>
+  formatTimestamp(props.task.timeZeroTimestamp),
+)
+const dispatchTimeString = computed<string>(() =>
+  formatTimestamp(props.task.dispatchTimestamp),
+)
+const completionTimeString = computed<string>(() =>
+  formatTimestamp(props.task.completionTimestamp),
+)
+const expectedCompletionTimeString = computed<string>(() => {
+  const expectedRunTime = workflow.value.expectedRuntimeSeconds
+  if (expectedRunTime === null || props.task.dispatchTimestamp === null) {
+    // We have no expected runtime, return a placeholder.
+    return formatTimestamp(null)
+  }
+  const expectedCompletionTimestamp =
+    props.task.dispatchTimestamp + expectedRunTime * 1000
+  return formatTimestamp(expectedCompletionTimestamp)
+})
+
+const statusString = computed<string>(() =>
+  convertTaskStatusToString(props.task.status),
+)
+const statusClass = computed<string>(() => {
+  const category = getTaskStatusCategory(props.task.status)
+  switch (category) {
+    case TaskStatusCategory.Pending:
+    case TaskStatusCategory.Running:
+      return 'pending'
+    case TaskStatusCategory.Completed:
+      return 'success'
+    case TaskStatusCategory.Failed:
+      return 'failed'
+  }
+})
+const statusIcon = computed<string>(() => {
+  const category = getTaskStatusCategory(props.task.status)
+  switch (category) {
+    case TaskStatusCategory.Pending:
+      return 'mdi-human-queue'
+    case TaskStatusCategory.Running:
+      return 'mdi-run'
+    case TaskStatusCategory.Completed:
+      return 'mdi-check'
+    case TaskStatusCategory.Failed:
+      return 'mdi-alert-circle'
+  }
+})
+
+function formatTimestamp(timestamp: number | null): string {
+  if (timestamp === null) return '—'
+
+  const date = new Date(timestamp)
+  return date.toLocaleString()
+}
+</script>
+
+<style scoped>
+.description {
+  font-size: 0.8em;
+}
+
+.times {
+  font-size: 0.8em;
+}
+
+.times > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.scheduled-task {
+  color: rgba(var(--v-theme-on-surface), 0.3);
+}
+
+.status.failed {
+  color: rgb(var(--v-theme-error));
+}
+
+.status.success {
+  color: rgb(var(--v-theme-success));
+}
+
+.status.pending {
+  color: rgb(var(--v-theme-info));
+}
+</style>
diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
new file mode 100644
index 000000000..1e584b928
--- /dev/null
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -0,0 +1,157 @@
+<template>
+  <v-btn icon="mdi-run" :active="isPanelOpen" @click="toggleTasksPanel" />
+  <Teleport to="#main-side-panel" defer>
+    <div v-if="isPanelOpen" class="h-100 d-flex flex-column">
+      <div class="flex-0-0 pa-2 d-flex gc-2 align-center">
+        <WorkflowFilterControl
+          v-model="selectedWorkflowIds"
+          @update:model-value="flagManuallyChanged"
+        />
+        <TaskStatusFilterControl v-model="selectedTaskStatuses" />
+        <v-spacer />
+        <PeriodFilterControl v-model="period" />
+      </div>
+      <v-list width="500" class="flex-1-1">
+        <v-list-item
+          class="task"
+          v-for="task in sortedTasks"
+          :key="task.taskId"
+        >
+          <TaskRunSummary :task="task" />
+        </v-list-item>
+      </v-list>
+      <div
+        class="flex-0-0 pa-2 d-flex flex-row justify-space-between align-center mt-2"
+      >
+        <div>Last updated: {{ lastUpdatedString }}</div>
+        <!-- Add fixed-height container around refresh button/progress
+               indicator to prevent layout shifts upon refreshing. -->
+        <div class="refresh-container">
+          <v-progress-circular
+            v-if="taskRuns.isLoading.value"
+            size="20"
+            indeterminate
+          />
+          <v-btn
+            v-else
+            density="compact"
+            variant="plain"
+            icon="mdi-refresh"
+            @click="taskRuns.fetch()"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { RelativePeriod } from '@/lib/period'
+import { TaskRun, TaskStatus } from '@/lib/taskruns'
+
+import { useTaskRuns } from '@/services/useTasksRuns'
+
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+
+import TaskStatusFilterControl from './TaskStatusFilterControl.vue'
+import TaskRunSummary from './TaskRunSummary.vue'
+import WorkflowFilterControl from './WorkflowFilterControl.vue'
+import PeriodFilterControl from './PeriodFilterControl.vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+
+const isPanelOpen = ref(false)
+
+const selectedWorkflowIds = ref<string[]>(availableWorkflowsStore.workflowIds)
+
+// Automatically select preferred workflow IDs if the user has not changed the
+// filter manually yet, otherwise, leave the filter as-is.
+let hasChangedWorkflowsFilterManually = false
+const flagManuallyChanged = () => (hasChangedWorkflowsFilterManually = true)
+watch(
+  () => availableWorkflowsStore.preferredWorkflowIds,
+  (preferredWorkflowIds) => {
+    if (hasChangedWorkflowsFilterManually) return
+    if (preferredWorkflowIds.length === 0) {
+      // If we have no preferred workflow IDs, select all.
+      selectedWorkflowIds.value = availableWorkflowsStore.workflowIds
+    } else {
+      // Otherwise, show only the preferred workflow IDs.
+      selectedWorkflowIds.value = preferredWorkflowIds
+    }
+  },
+)
+
+// The request for the available workflows may still be pending while this
+// component is created, so we may initialise the default selected workflows
+// with an empty array. To fix this, we reinitialise our selection upon changes
+// in the workflows, which occur when they have been fetched.
+watch(
+  () => availableWorkflowsStore.workflowIds,
+  (fetchedWorkflowIds) => {
+    selectedWorkflowIds.value = fetchedWorkflowIds
+  },
+  { once: true },
+)
+
+// Select all task statuses by default.
+const selectedTaskStatuses = ref<TaskStatus[]>(Object.values(TaskStatus))
+
+// Look 2 hours back by default..
+const period = ref<RelativePeriod | null>({
+  startOffsetSeconds: -2 * 60 * 60,
+  endOffsetSeconds: 0,
+})
+
+const tasksRefreshIntervalSeconds = 30
+const taskRuns = useTaskRuns(
+  tasksRefreshIntervalSeconds,
+  period,
+  selectedWorkflowIds,
+  selectedTaskStatuses,
+)
+
+const sortedTasks = computed<TaskRun[]>(() => {
+  return taskRuns.filteredTaskRuns.value.sort((a, b) => {
+    const hasDispatchTimeA = a.dispatchTimestamp !== null
+    const hasDispatchTimeB = b.dispatchTimestamp !== null
+    if (!hasDispatchTimeA && !hasDispatchTimeB) {
+      // If both tasks are pending, sort by workflowId.
+      return a.workflowId.localeCompare(b.workflowId)
+    } else if (!hasDispatchTimeA) {
+      // If A is pending and B is not, return A.
+      return -1
+    } else if (!hasDispatchTimeB) {
+      // If B is pending and A is not, return B.
+      return 1
+    } else {
+      // Otherwise, sort by timestamp.
+      return b.dispatchTimestamp! - a.dispatchTimestamp!
+    }
+  })
+})
+const lastUpdatedString = computed<string>(() => {
+  const lastUpdated = taskRuns.lastUpdatedTimestamp.value
+  if (lastUpdated === null) return '—'
+  return new Date(lastUpdated).toLocaleString()
+})
+
+function toggleTasksPanel(): void {
+  isPanelOpen.value = !isPanelOpen.value
+}
+</script>
+
+<style scoped>
+.refresh-container {
+  height: 28px;
+}
+
+.v-theme--light.task:nth-child(even) {
+  background-color: #f4f4f4;
+}
+
+.v-theme--dark.task:nth-child(even) {
+  background-color: black;
+}
+</style>
diff --git a/src/components/tasks/TaskStatusFilterControl.vue b/src/components/tasks/TaskStatusFilterControl.vue
new file mode 100644
index 000000000..3e3bf4829
--- /dev/null
+++ b/src/components/tasks/TaskStatusFilterControl.vue
@@ -0,0 +1,87 @@
+<template>
+  <BaseTaskFilterControl
+    v-model="selectedTaskStatuses"
+    :items="taskStatusOptions"
+    label="Status"
+    @update:model-value="updateSelectedCategories"
+  >
+    <template #actions>
+      <v-btn-toggle v-model="selectedCategories" color="primary" multiple>
+        <v-btn
+          v-for="category in getAllTaskStatusCategories()"
+          :key="category"
+          :value="category"
+          @click="toggleStatusCategory(category)"
+        >
+          {{ getTaskStatusCategoryName(category) }}
+        </v-btn>
+      </v-btn-toggle>
+    </template>
+  </BaseTaskFilterControl>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import {
+  getAllTaskStatusCategories,
+  getCompleteTaskStatusCategories,
+  getTaskStatusesForCategory,
+  getTaskStatusCategoryName,
+  TaskStatus,
+  TaskStatusCategory,
+} from '@/lib/taskruns'
+
+import BaseTaskFilterControl from '@/components/tasks/BaseTaskFilterControl.vue'
+
+const selectedTaskStatuses = defineModel<TaskStatus[]>({ required: true })
+const selectedCategories = ref<TaskStatusCategory[]>([])
+// Initialise the group selections based on the initially selected task
+// statuses.
+updateSelectedCategories(selectedTaskStatuses.value)
+
+interface TaskStatusItem {
+  id: string
+  title: string
+  value: TaskStatus
+}
+const taskStatusOptions: TaskStatusItem[] = Object.values(TaskStatus).map(
+  (value) => {
+    // Capitalise the first letter of the value to get a human-readable title.
+    const title = value[0].toUpperCase() + value.slice(1)
+    return {
+      id: value,
+      title,
+      value,
+    }
+  },
+)
+
+// Update the selected task status groups when the user selects or deselects
+// individual statuses.
+function updateSelectedCategories(newStatuses: TaskStatus[]): void {
+  selectedCategories.value = getCompleteTaskStatusCategories(newStatuses)
+}
+
+function toggleStatusCategory(category: TaskStatusCategory): void {
+  const isCurrentlySelected = selectedCategories.value.includes(category)
+
+  // This function is triggered _after_ the model value has been updated, so if
+  // we no longer have this category in the selected category, remove the
+  // associated statuses.
+  const doRemove = !isCurrentlySelected
+
+  const categoryStatuses = getTaskStatusesForCategory(category)
+  if (doRemove) {
+    // Remove statuses for this group from the current selection.
+    selectedTaskStatuses.value = selectedTaskStatuses.value.filter(
+      (status) => !categoryStatuses.includes(status),
+    )
+  } else {
+    // Add statuses for this group to the current selection.
+    selectedTaskStatuses.value = [
+      ...selectedTaskStatuses.value,
+      ...categoryStatuses,
+    ]
+  }
+}
+</script>
diff --git a/src/components/tasks/WorkflowFilterControl.vue b/src/components/tasks/WorkflowFilterControl.vue
new file mode 100644
index 000000000..38743a8dc
--- /dev/null
+++ b/src/components/tasks/WorkflowFilterControl.vue
@@ -0,0 +1,31 @@
+<template>
+  <BaseTasksFilterControl
+    v-model="selectedWorkflowIds"
+    :items="workflowItems"
+    label="Workflows"
+    do-sort-items
+  />
+</template>
+<script setup lang="ts">
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+
+import BaseTasksFilterControl from '@/components/tasks/BaseTaskFilterControl.vue'
+import { computed } from 'vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+const selectedWorkflowIds = defineModel<string[]>({ required: true })
+
+const workflowItems = computed(() =>
+  availableWorkflowsStore.workflows.map((workflow) => {
+    const id = workflow.workflowId
+    const isPreferred =
+      availableWorkflowsStore.preferredWorkflowIds.includes(id)
+    return {
+      id,
+      title: workflow.name,
+      value: workflow.workflowId,
+      isPreferred,
+    }
+  }),
+)
+</script>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index e2e74376b..73434d2cf 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -11,6 +11,7 @@
       <div class="h-100" id="app-bar-content-center"></div>
       <template #append>
         <div id="app-bar-content-end" />
+        <TaskRunsPanel />
         <time-control-menu />
         <user-settings-menu />
         <login-component v-if="configManager.authenticationIsEnabled" />
@@ -144,9 +145,14 @@
       </template>
     </v-navigation-drawer>
     <v-main id="main">
-      <Suspense>
-        <router-view></router-view>
-      </Suspense>
+      <div class="w-100 h-100 d-flex flex-row">
+        <div class="flex-1-1">
+          <Suspense>
+            <router-view></router-view>
+          </Suspense>
+        </div>
+        <div class="flex-0-0 h-100" id="main-side-panel"></div>
+      </div>
       <div class="alerts__container" v-if="alertsStore.hasAlerts">
         <v-alert
           v-for="alert in alertsStore.alerts"
@@ -175,6 +181,7 @@ import UserSettingsMenu from '../components/user-settings/UserSettingsMenu.vue'
 import TimeControlMenu from '../components/time-control/TimeControlMenu.vue'
 import StartupDialog from '@/components/dialog/StartupDialog.vue'
 import GlobalSearchComponent from '@/components/general/GlobalSearchComponent.vue'
+import TaskRunsPanel from '@/components/tasks/TaskRunsPanel.vue'
 
 import { configManager } from '@/services/application-config'
 import { getLocalOrRemoteFileUrl } from '@/lib/fews-config'
@@ -187,6 +194,7 @@ const configStore = useConfigStore()
 const settings = useUserSettingsStore()
 const { mobile } = useDisplay()
 const alertsStore = useAlertsStore()
+
 const theme = useTheme()
 
 const drawer = ref(true)
diff --git a/src/lib/date/index.ts b/src/lib/date/index.ts
index fc19a4cb7..fc357be5a 100644
--- a/src/lib/date/index.ts
+++ b/src/lib/date/index.ts
@@ -66,3 +66,6 @@ export function convertFewsPiDateTimeToJsDate(
 export function convertJSDateToFewsPiParameter(date: Date): string {
   return toISOString(date) + 'Z'
 }
+export function convertTimestampToFewsPiParameter(timestamp: number): string {
+  return convertJSDateToFewsPiParameter(new Date(timestamp))
+}
diff --git a/src/lib/period/convert.ts b/src/lib/period/convert.ts
new file mode 100644
index 000000000..c3130b8f3
--- /dev/null
+++ b/src/lib/period/convert.ts
@@ -0,0 +1,12 @@
+import { AbsolutePeriod, RelativePeriod } from './types'
+
+export function convertRelativeToAbsolutePeriod(
+  relative: RelativePeriod,
+  reference?: Date,
+): AbsolutePeriod {
+  const referenceTimestamp = reference?.getTime() ?? Date.now()
+  return {
+    startTimestamp: referenceTimestamp + relative.startOffsetSeconds * 1000,
+    endTimestamp: referenceTimestamp + relative.endOffsetSeconds * 1000,
+  }
+}
diff --git a/src/lib/period/index.ts b/src/lib/period/index.ts
new file mode 100644
index 000000000..c9f6f047d
--- /dev/null
+++ b/src/lib/period/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/src/lib/period/types.ts b/src/lib/period/types.ts
new file mode 100644
index 000000000..336cf0656
--- /dev/null
+++ b/src/lib/period/types.ts
@@ -0,0 +1,9 @@
+export interface AbsolutePeriod {
+  startTimestamp: number
+  endTimestamp: number
+}
+
+export interface RelativePeriod {
+  startOffsetSeconds: number
+  endOffsetSeconds: number
+}
diff --git a/src/lib/taskruns/convert.ts b/src/lib/taskruns/convert.ts
new file mode 100644
index 000000000..952ca40bf
--- /dev/null
+++ b/src/lib/taskruns/convert.ts
@@ -0,0 +1,84 @@
+import { TaskRun as FewsPiTaskRun } from '@deltares/fews-pi-requests'
+
+import { TaskRun, TaskStatus } from './types'
+
+export function convertFewsPiTaskRunToTaskRun(taskRun: FewsPiTaskRun): TaskRun {
+  const timeZeroTimestamp = new Date(taskRun.time0).getTime()
+  const dispatchTimestamp = taskRun.dispatchTime
+    ? new Date(taskRun.dispatchTime).getTime()
+    : null
+  const completionTimestamp = taskRun.completionTime
+    ? new Date(taskRun.completionTime).getTime()
+    : null
+  // Set null for undefined and empty descriptions.
+  const description = taskRun.description ? taskRun.description : null
+  return {
+    taskId: taskRun.id,
+    workflowId: taskRun.workflowId,
+    // FIXME: is "user" as userId or a user name? Also, it can be null for
+    //        scheduled tasks, but this is undocumented.
+    userId: taskRun.user,
+    status: convertToTaskStatus(taskRun.status),
+    description,
+    timeZeroTimestamp,
+    dispatchTimestamp,
+    completionTimestamp,
+    isScheduled: taskRun.user === null,
+  }
+}
+
+export function convertToTaskStatus(status: string): TaskStatus {
+  switch (status) {
+    case 'invalid':
+      return TaskStatus.Invalid
+    case 'pending':
+      return TaskStatus.Pending
+    case 'terminated':
+      return TaskStatus.Terminated
+    case 'running':
+      return TaskStatus.Running
+    case 'failed':
+      return TaskStatus.Failed
+    case 'completed fully successful':
+      return TaskStatus.CompletedFullySuccessful
+    case 'completed partly successful':
+      return TaskStatus.CompletePartlySuccessful
+    case 'approved':
+      return TaskStatus.Approved
+    case 'approved partly successful':
+      return TaskStatus.ApprovedPartlySuccessful
+    case 'amalgamated':
+      return TaskStatus.Amalgamated
+    case 'partly completed':
+      return TaskStatus.PartlyCompleted
+    default:
+      throw new Error(`Invalid task status: "${status}".`)
+  }
+}
+
+export function convertTaskStatusToString(status: TaskStatus): string {
+  switch (status) {
+    case TaskStatus.Invalid:
+      return 'Invalid'
+    case TaskStatus.Pending:
+      return 'Pending'
+    case TaskStatus.Terminated:
+      return 'Terminated'
+    case TaskStatus.Running:
+      return 'Running'
+    case TaskStatus.Failed:
+      return 'Failed'
+    case TaskStatus.CompletedFullySuccessful:
+      return 'Completed fully successful'
+    case TaskStatus.CompletePartlySuccessful:
+      return 'Completed partly successful'
+    case TaskStatus.Approved:
+      return 'Approved'
+    case TaskStatus.ApprovedPartlySuccessful:
+      return 'Approved partly successful'
+    case TaskStatus.Amalgamated:
+      return 'Amalgamated'
+    case TaskStatus.PartlyCompleted:
+      return 'Partly completed'
+  }
+}
diff --git a/src/lib/taskruns/index.ts b/src/lib/taskruns/index.ts
new file mode 100644
index 000000000..b6e2ecd2f
--- /dev/null
+++ b/src/lib/taskruns/index.ts
@@ -0,0 +1,3 @@
+export * from './convert'
+export * from './status'
+export * from './types'
diff --git a/src/lib/taskruns/status.ts b/src/lib/taskruns/status.ts
new file mode 100644
index 000000000..1c9497cd3
--- /dev/null
+++ b/src/lib/taskruns/status.ts
@@ -0,0 +1,87 @@
+import { TaskStatus, TaskStatusCategory } from './types'
+
+interface TaskStatusCategoryDefinition {
+  name: string
+  category: TaskStatusCategory
+  statuses: TaskStatus[]
+}
+const STATUS_CATEGORIES: TaskStatusCategoryDefinition[] = [
+  {
+    name: 'Pending',
+    category: TaskStatusCategory.Pending,
+    statuses: [TaskStatus.Pending],
+  },
+  {
+    name: 'Running',
+    category: TaskStatusCategory.Running,
+    statuses: [TaskStatus.Running],
+  },
+  {
+    name: 'Completed',
+    category: TaskStatusCategory.Completed,
+    statuses: [
+      TaskStatus.CompletedFullySuccessful,
+      TaskStatus.CompletePartlySuccessful,
+      TaskStatus.Approved,
+      TaskStatus.ApprovedPartlySuccessful,
+      TaskStatus.Amalgamated,
+      TaskStatus.PartlyCompleted,
+    ],
+  },
+  {
+    name: 'Failed',
+    category: TaskStatusCategory.Failed,
+    statuses: [TaskStatus.Invalid, TaskStatus.Terminated, TaskStatus.Failed],
+  },
+] as const
+
+export function getAllTaskStatusCategories(): TaskStatusCategory[] {
+  return Object.values(TaskStatusCategory)
+}
+
+export function getTaskStatusCategoryName(
+  category: TaskStatusCategory,
+): string {
+  const definition = STATUS_CATEGORIES.find(
+    (current) => current.category === category,
+  )
+  if (!definition) {
+    throw new Error(`No definition for task status category "${category}".`)
+  }
+  return definition.name
+}
+
+export function getTaskStatusCategory(status: TaskStatus): TaskStatusCategory {
+  const definition = STATUS_CATEGORIES.find((current) =>
+    current.statuses.includes(status),
+  )
+  if (!definition) {
+    throw new Error(
+      `Task status "${status}" is not in any task status category.`,
+    )
+  }
+  return definition.category
+}
+
+export function getCompleteTaskStatusCategories(
+  statuses: TaskStatus[],
+): TaskStatusCategory[] {
+  const completeCategories: TaskStatusCategory[] = []
+  for (const category of STATUS_CATEGORIES) {
+    // If all statuses in this category are in the specified array, the category
+    // is defined "complete" and included.
+    if (category.statuses.every((status) => statuses.includes(status))) {
+      completeCategories.push(category.category)
+    }
+  }
+  return completeCategories
+}
+
+export function getTaskStatusesForCategory(
+  selectedCategory: TaskStatusCategory,
+): TaskStatus[] {
+  const category = STATUS_CATEGORIES.find(
+    (current) => current.category === selectedCategory,
+  )
+  return category?.statuses ?? []
+}
diff --git a/src/lib/taskruns/types.ts b/src/lib/taskruns/types.ts
new file mode 100644
index 000000000..239f1a1eb
--- /dev/null
+++ b/src/lib/taskruns/types.ts
@@ -0,0 +1,32 @@
+export enum TaskStatus {
+  Invalid = 'invalid',
+  Pending = 'pending',
+  Terminated = 'terminated',
+  Running = 'running',
+  Failed = 'failed',
+  CompletedFullySuccessful = 'completed fully successful',
+  CompletePartlySuccessful = 'completed partly successful',
+  Approved = 'approved',
+  ApprovedPartlySuccessful = 'approved partly successful',
+  Amalgamated = 'amalgamated',
+  PartlyCompleted = 'partly completed',
+}
+
+export enum TaskStatusCategory {
+  Pending = 'pending',
+  Running = 'running',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+export interface TaskRun {
+  taskId: string
+  workflowId: string
+  status: TaskStatus
+  description: string | null
+  timeZeroTimestamp: number
+  dispatchTimestamp: number | null
+  completionTimestamp: number | null
+  userId: string | null
+  isScheduled: boolean
+}
diff --git a/src/lib/timer/create.ts b/src/lib/timer/create.ts
new file mode 100644
index 000000000..0fdfa918c
--- /dev/null
+++ b/src/lib/timer/create.ts
@@ -0,0 +1,44 @@
+import { Timer } from './types'
+
+export function createTimer(
+  callback: () => void,
+  intervalSeconds: number,
+  immediate: boolean,
+): Timer {
+  // Evaluate callback immediately, if so requested.
+  if (immediate) {
+    callback()
+  }
+
+  const createInterval = () => setInterval(callback, intervalSeconds * 1000)
+  let id = createInterval()
+
+  // Intervals are paused when a browser tab/window is inactive, so we add a
+  // listener to the window focus event to check whether a refresh is overdue
+  // if the window becomes active again.
+  let lastUpdatedTimestamp: number = Date.now()
+  const onFocus = () => {
+    const now = Date.now()
+    if (now - lastUpdatedTimestamp > intervalSeconds * 1000) {
+      // Call callback and update last updated time.
+      callback()
+      lastUpdatedTimestamp = now
+      // Reset interval so it starts counting from now, otherwise we may
+      // update too often.
+      clearInterval(id)
+      id = createInterval()
+    }
+  }
+  window.addEventListener('focus', onFocus)
+
+  // Create function to deactivate the current timer. It cannot be reactivated,
+  // only by creating a new timer.
+  const deactivate = () => {
+    clearInterval(id)
+    window.removeEventListener('focus', onFocus)
+  }
+
+  return {
+    deactivate,
+  }
+}
diff --git a/src/lib/timer/index.ts b/src/lib/timer/index.ts
new file mode 100644
index 000000000..e94961485
--- /dev/null
+++ b/src/lib/timer/index.ts
@@ -0,0 +1,2 @@
+export * from './create'
+export * from './types'
diff --git a/src/lib/timer/types.ts b/src/lib/timer/types.ts
new file mode 100644
index 000000000..c891cc2cd
--- /dev/null
+++ b/src/lib/timer/types.ts
@@ -0,0 +1,3 @@
+export interface Timer {
+  deactivate: () => void
+}
diff --git a/src/services/useTasksRuns/index.ts b/src/services/useTasksRuns/index.ts
new file mode 100644
index 000000000..26d20dd5b
--- /dev/null
+++ b/src/services/useTasksRuns/index.ts
@@ -0,0 +1,126 @@
+import {
+  DocumentFormat,
+  PiWebserviceProvider,
+  TaskStatus as TaskStatusId,
+  TaskRun as FewsPiTaskRun,
+} from '@deltares/fews-pi-requests'
+import {
+  computed,
+  MaybeRefOrGetter,
+  onUnmounted,
+  ref,
+  toValue,
+  watch,
+} from 'vue'
+
+import { convertTimestampToFewsPiParameter } from '@/lib/date'
+import { RelativePeriod } from '@/lib/period'
+import { createTransformRequestFn } from '@/lib/requests/transformRequest'
+import {
+  convertFewsPiTaskRunToTaskRun,
+  TaskRun,
+  TaskStatus,
+} from '@/lib/taskruns'
+import { createTimer } from '@/lib/timer'
+
+import { configManager } from '../application-config'
+import { convertRelativeToAbsolutePeriod } from '@/lib/period/convert'
+
+export function useTaskRuns(
+  refreshIntervalSeconds: number,
+  dispatchPeriod: MaybeRefOrGetter<RelativePeriod | null>,
+  workflowIds: MaybeRefOrGetter<string[]>,
+  statuses: MaybeRefOrGetter<TaskStatus[]>,
+) {
+  const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+  const piProvider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: createTransformRequestFn(),
+  })
+
+  const isLoading = ref(false)
+  const lastUpdatedTimestamp = ref<number | null>(null)
+  const allTaskRuns = ref<TaskRun[]>([])
+  const filteredTaskRuns = computed<TaskRun[]>(filterTasks)
+
+  const timer = createTimer(
+    () => {
+      fetch().catch((error) => console.error(`Failed to fetch tasks: ${error}`))
+    },
+    refreshIntervalSeconds,
+    true,
+  )
+  onUnmounted(() => timer.deactivate())
+
+  // Fetch taskruns if a new dispatch period is selected.
+  watch(() => toValue(dispatchPeriod), fetch)
+
+  async function fetch(): Promise<void> {
+    const _dispatchPeriod = toValue(dispatchPeriod)
+    const hasPeriod = _dispatchPeriod !== null
+
+    isLoading.value = true
+    const fetchedTaskRuns = hasPeriod
+      ? await fetchTaskRunsForPeriod(_dispatchPeriod)
+      : await fetchAllTaskRuns()
+    isLoading.value = false
+
+    allTaskRuns.value = fetchedTaskRuns.map(convertFewsPiTaskRunToTaskRun)
+    lastUpdatedTimestamp.value = Date.now()
+  }
+
+  async function fetchAllTaskRuns(): Promise<FewsPiTaskRun[]> {
+    const response = await piProvider.getTaskRuns({
+      documentFormat: DocumentFormat.PI_JSON,
+    })
+    return response.taskRuns
+  }
+
+  async function fetchTaskRunsForPeriod(
+    dispatchPeriod: RelativePeriod,
+  ): Promise<FewsPiTaskRun[]> {
+    const period = convertRelativeToAbsolutePeriod(dispatchPeriod)
+    const startDispatchTime = convertTimestampToFewsPiParameter(
+      period.startTimestamp,
+    )
+    const endDispatchTime = convertTimestampToFewsPiParameter(
+      period.endTimestamp,
+    )
+    // FIXME: it is documented that tasks can only be fetched for a specific
+    //        workflowId (i.e. that that is a required parameter), but that
+    //        seems to be untrue.
+    // Fetch pending tasks separately; they are not returned when we specify
+    // a dispatch period, as they have not yet been dispatched. We always return
+    // all pending tasks.
+    const [pendingTasksResponse, tasksResponse] = await Promise.all([
+      piProvider.getTaskRuns({
+        documentFormat: DocumentFormat.PI_JSON,
+        taskRunStatusIds: TaskStatusId.P,
+      }),
+      piProvider.getTaskRuns({
+        documentFormat: DocumentFormat.PI_JSON,
+        startDispatchTime,
+        endDispatchTime,
+      }),
+    ])
+
+    return [...pendingTasksResponse.taskRuns, ...tasksResponse.taskRuns]
+  }
+
+  function filterTasks(): TaskRun[] {
+    const _workflowIds = toValue(workflowIds)
+    const _statuses = toValue(statuses)
+    return allTaskRuns.value.filter(
+      (task) =>
+        _workflowIds.includes(task.workflowId) &&
+        _statuses.includes(task.status),
+    )
+  }
+
+  return {
+    allTaskRuns,
+    filteredTaskRuns,
+    lastUpdatedTimestamp,
+    isLoading,
+    fetch,
+  }
+}
diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 48efea029..f40755932 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/src/views/TopologyDisplayView.vue
@@ -97,7 +97,7 @@ import { useWorkflowsStore } from '@/stores/workflows'
 import type { TopologyNode } from '@deltares/fews-pi-requests'
 import type { WebOcTopologyDisplayConfig } from '@deltares/fews-pi-requests'
 
-import { computed, ref, StyleValue, watch, watchEffect } from 'vue'
+import { computed, onUnmounted, ref, StyleValue, watch, watchEffect } from 'vue'
 import {
   onBeforeRouteUpdate,
   RouteLocationNormalized,
@@ -115,6 +115,7 @@ import {
   type DisplayTab,
 } from '@/lib/topology/displayTabs.js'
 import { useTopologyNodesStore } from '@/stores/topologyNodes'
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
 
 interface Props {
   topologyId?: string
@@ -131,6 +132,7 @@ const props = defineProps<Props>()
 const configStore = useConfigStore()
 const settings = useUserSettingsStore()
 const workflowsStore = useWorkflowsStore()
+const availableWorkflowsStore = useAvailableWorkflowsStore()
 
 const menuType = computed(() => {
   const configured = settings.get('ui.hierarchical-menu-style')?.value as string
@@ -159,6 +161,26 @@ const activeNode = computed(() => {
   return node
 })
 
+// Set preferred workflow IDs for the running tasks menu, if this node has
+// associated workflows.
+watch(
+  activeNode,
+  (node) => {
+    const primaryWorkflowId = node?.workflowId ? [node.workflowId] : []
+    const secondaryWorkflowIds =
+      node?.secondaryWorkflows?.map(
+        (workflow) => workflow.secondaryWorkflowId,
+      ) ?? []
+    // Note: this list of workflow IDs may be empty, in which case we have no
+    //       preferred workflow.
+    const workflowIds = [...primaryWorkflowId, ...secondaryWorkflowIds]
+    availableWorkflowsStore.setPreferredWorkflowIds(workflowIds)
+  },
+  { immediate: true },
+)
+// Clear the preferred workflow IDs when we unmount.
+onUnmounted(() => availableWorkflowsStore.clearPreferredWorkflowIds())
+
 const secondaryWorkflows = computed(() => {
   if (!activeNode.value?.secondaryWorkflows) return null
   return activeNode.value.secondaryWorkflows

From 543d585f5333f63a9d0cd6476a7c795f1e1293d8 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 15:03:34 +0100
Subject: [PATCH 2/9] Clean up UI

---
 src/components/tasks/BaseTaskFilterControl.vue | 4 ++++
 src/components/tasks/PeriodFilterControl.vue   | 2 ++
 src/components/tasks/TaskRunsPanel.vue         | 4 ++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/BaseTaskFilterControl.vue b/src/components/tasks/BaseTaskFilterControl.vue
index 8c88d6ffa..57e43490a 100644
--- a/src/components/tasks/BaseTaskFilterControl.vue
+++ b/src/components/tasks/BaseTaskFilterControl.vue
@@ -3,8 +3,11 @@
     <template #activator="{ props }">
       <v-chip
         variant="tonal"
+        pilled
+        label
         :color="isAllSelected ? undefined : 'primary'"
         v-bind="props"
+        class="mx-1"
       >
         <template #prepend>
           <v-btn
@@ -16,6 +19,7 @@
           />
         </template>
         {{ label }}
+        <v-icon>mdi-chevron-down</v-icon>
       </v-chip>
     </template>
     <v-card min-height="300" height="50dvh">
diff --git a/src/components/tasks/PeriodFilterControl.vue b/src/components/tasks/PeriodFilterControl.vue
index 2e89fe253..1a43dd440 100644
--- a/src/components/tasks/PeriodFilterControl.vue
+++ b/src/components/tasks/PeriodFilterControl.vue
@@ -4,6 +4,8 @@
     :items="options"
     item-value="numSecondsBack"
     density="compact"
+    variant="plain"
+    flat
     hide-details
   />
 </template>
diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
index 1e584b928..13eebfb8f 100644
--- a/src/components/tasks/TaskRunsPanel.vue
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -2,7 +2,7 @@
   <v-btn icon="mdi-run" :active="isPanelOpen" @click="toggleTasksPanel" />
   <Teleport to="#main-side-panel" defer>
     <div v-if="isPanelOpen" class="h-100 d-flex flex-column">
-      <div class="flex-0-0 pa-2 d-flex gc-2 align-center">
+      <v-toolbar density="compact">
         <WorkflowFilterControl
           v-model="selectedWorkflowIds"
           @update:model-value="flagManuallyChanged"
@@ -10,7 +10,7 @@
         <TaskStatusFilterControl v-model="selectedTaskStatuses" />
         <v-spacer />
         <PeriodFilterControl v-model="period" />
-      </div>
+      </v-toolbar>
       <v-list width="500" class="flex-1-1">
         <v-list-item
           class="task"

From 23598999fd9e757190214b0d4ba66ae65f9d62ec Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 15:39:48 +0100
Subject: [PATCH 3/9] Clean up UI

---
 .../tasks/BaseTaskFilterControl.vue           | 79 +++++++++++--------
 .../tasks/TaskStatusFilterControl.vue         |  2 +-
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/components/tasks/BaseTaskFilterControl.vue b/src/components/tasks/BaseTaskFilterControl.vue
index 57e43490a..4cf6d8eb0 100644
--- a/src/components/tasks/BaseTaskFilterControl.vue
+++ b/src/components/tasks/BaseTaskFilterControl.vue
@@ -22,38 +22,37 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-chip>
     </template>
-    <v-card min-height="300" height="50dvh">
-      <v-card-text class="h-100 d-flex flex-column gr-2">
-        <div class="flex-0-0 d-flex flex-row justify-space-between">
-          <v-btn @click="selectAll">Select all</v-btn>
-          <v-btn @click="selectNone">Select none</v-btn>
-        </div>
-        <div class="flex-0-0">
-          <slot name="actions"></slot>
-        </div>
-        <v-list
-          class="flex-1-1 overflow-auto"
-          v-model:selected="selectedValues"
-          select-strategy="leaf"
+    <v-sheet min-height="300" height="50dvh">
+      <v-banner sticky density="compact" class="pa-2">
+        <v-btn
+          @click="toggleSelectAll"
+          :icon="selectAllIcon"
+          variant="plain"
+        ></v-btn>
+        <slot name="actions"></slot>
+      </v-banner>
+      <v-list
+        class="flex-1-1 overflow-auto"
+        v-model:selected="selectedValues"
+        select-strategy="leaf"
+      >
+        <v-list-item
+          v-for="item in sortedItems"
+          :key="item.id"
+          :title="item.title"
+          :value="item.value"
         >
-          <v-list-item
-            v-for="item in sortedItems"
-            :key="item.id"
-            :title="item.title"
-            :value="item.value"
-          >
-            <template #prepend="{ isSelected }">
-              <v-list-item-action start>
-                <v-checkbox-btn :model-value="isSelected" />
-              </v-list-item-action>
-            </template>
-            <template v-if="item.isPreferred" #append>
-              <v-icon icon="mdi-star" />
-            </template>
-          </v-list-item>
-        </v-list>
-      </v-card-text>
-    </v-card>
+          <template #prepend="{ isSelected }">
+            <v-list-item-action start>
+              <v-checkbox-btn :model-value="isSelected" />
+            </v-list-item-action>
+          </template>
+          <template v-if="item.isPreferred" #append>
+            <v-icon icon="mdi-star" />
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-sheet>
   </v-menu>
 </template>
 <script setup lang="ts" generic="T">
@@ -112,7 +111,21 @@ function selectAll(): void {
   selectedValues.value = allValues.value
 }
 
-function selectNone(): void {
-  selectedValues.value = []
+function toggleSelectAll(): void {
+  if (selectedValues.value.length === allValues.value.length) {
+    selectedValues.value = []
+  } else {
+    selectedValues.value = allValues.value
+  }
 }
+
+const selectAllIcon = computed(() => {
+  if (selectedValues.value.length === 0) {
+    return 'mdi-checkbox-blank-outline'
+  }
+  if (selectedValues.value.length === allValues.value.length) {
+    return 'mdi-close-box'
+  }
+  return 'mdi-minus-box' // 'mdi-checkbox-marked' // 'mdi-minus-box'
+})
 </script>
diff --git a/src/components/tasks/TaskStatusFilterControl.vue b/src/components/tasks/TaskStatusFilterControl.vue
index 3e3bf4829..70bfff7a6 100644
--- a/src/components/tasks/TaskStatusFilterControl.vue
+++ b/src/components/tasks/TaskStatusFilterControl.vue
@@ -6,7 +6,7 @@
     @update:model-value="updateSelectedCategories"
   >
     <template #actions>
-      <v-btn-toggle v-model="selectedCategories" color="primary" multiple>
+      <v-btn-toggle v-model="selectedCategories" multiple density="compact" variant="outlined">
         <v-btn
           v-for="category in getAllTaskStatusCategories()"
           :key="category"

From 7aa0923abe6657b5ebf3591ecd829093a337d91b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 15:48:38 +0100
Subject: [PATCH 4/9] Add empty task list message

---
 src/components/tasks/TaskRunsPanel.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
index 13eebfb8f..50cb8ae13 100644
--- a/src/components/tasks/TaskRunsPanel.vue
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -12,6 +12,9 @@
         <PeriodFilterControl v-model="period" />
       </v-toolbar>
       <v-list width="500" class="flex-1-1">
+        <v-list-item v-if="sortedTasks.length === 0">
+          No tasks available
+        </v-list-item>
         <v-list-item
           class="task"
           v-for="task in sortedTasks"

From a12a515b4ff328b2c70f5cdc8cab2233f0b5082e Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 15:53:05 +0100
Subject: [PATCH 5/9] Linter issue

---
 src/components/tasks/TaskStatusFilterControl.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/TaskStatusFilterControl.vue b/src/components/tasks/TaskStatusFilterControl.vue
index 70bfff7a6..cdf9ec34c 100644
--- a/src/components/tasks/TaskStatusFilterControl.vue
+++ b/src/components/tasks/TaskStatusFilterControl.vue
@@ -6,7 +6,12 @@
     @update:model-value="updateSelectedCategories"
   >
     <template #actions>
-      <v-btn-toggle v-model="selectedCategories" multiple density="compact" variant="outlined">
+      <v-btn-toggle
+        v-model="selectedCategories"
+        multiple
+        density="compact"
+        variant="outlined"
+      >
         <v-btn
           v-for="category in getAllTaskStatusCategories()"
           :key="category"

From 847e0cbd4366c73fd4b639bb549743dc7b655e71 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 16:14:17 +0100
Subject: [PATCH 6/9] Use compact list for filter items

---
 src/components/tasks/BaseTaskFilterControl.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/tasks/BaseTaskFilterControl.vue b/src/components/tasks/BaseTaskFilterControl.vue
index 4cf6d8eb0..d10bd52a5 100644
--- a/src/components/tasks/BaseTaskFilterControl.vue
+++ b/src/components/tasks/BaseTaskFilterControl.vue
@@ -22,7 +22,7 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-chip>
     </template>
-    <v-sheet min-height="300" height="50dvh">
+    <v-sheet min-height="300" max-height="80dvh">
       <v-banner sticky density="compact" class="pa-2">
         <v-btn
           @click="toggleSelectAll"
@@ -32,9 +32,9 @@
         <slot name="actions"></slot>
       </v-banner>
       <v-list
-        class="flex-1-1 overflow-auto"
         v-model:selected="selectedValues"
         select-strategy="leaf"
+        density="compact"
       >
         <v-list-item
           v-for="item in sortedItems"
@@ -43,9 +43,7 @@
           :value="item.value"
         >
           <template #prepend="{ isSelected }">
-            <v-list-item-action start>
-              <v-checkbox-btn :model-value="isSelected" />
-            </v-list-item-action>
+            <v-checkbox-btn density="compact" :model-value="isSelected" />
           </template>
           <template v-if="item.isPreferred" #append>
             <v-icon icon="mdi-star" />
@@ -124,7 +122,7 @@ const selectAllIcon = computed(() => {
     return 'mdi-checkbox-blank-outline'
   }
   if (selectedValues.value.length === allValues.value.length) {
-    return 'mdi-close-box'
+    return 'mdi-checkbox-marked'
   }
   return 'mdi-minus-box' // 'mdi-checkbox-marked' // 'mdi-minus-box'
 })

From 3fb48a3f150a43e7ccf0ddb9fa2c29ea0ddf70cc Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 20 Dec 2024 16:39:24 +0100
Subject: [PATCH 7/9] Update icon

---
 src/components/tasks/TaskRunsPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
index 50cb8ae13..1417ff4be 100644
--- a/src/components/tasks/TaskRunsPanel.vue
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn icon="mdi-run" :active="isPanelOpen" @click="toggleTasksPanel" />
+  <v-btn icon="mdi-clipboard-text-clock" :active="isPanelOpen" @click="toggleTasksPanel" />
   <Teleport to="#main-side-panel" defer>
     <div v-if="isPanelOpen" class="h-100 d-flex flex-column">
       <v-toolbar density="compact">

From 182dbf290433a081c10c6e59fc5f9a7172ae6676 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 27 Jan 2025 15:45:31 +0100
Subject: [PATCH 8/9] Linting

---
 src/components/tasks/TaskRunsPanel.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
index 1417ff4be..6bebc9957 100644
--- a/src/components/tasks/TaskRunsPanel.vue
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-btn icon="mdi-clipboard-text-clock" :active="isPanelOpen" @click="toggleTasksPanel" />
+  <v-btn
+    icon="mdi-clipboard-text-clock"
+    :active="isPanelOpen"
+    @click="toggleTasksPanel"
+  />
   <Teleport to="#main-side-panel" defer>
     <div v-if="isPanelOpen" class="h-100 d-flex flex-column">
       <v-toolbar density="compact">

From 6bdb8a022cc2678d494061b3d7e0eb3b9137dbfe Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 27 Jan 2025 15:45:41 +0100
Subject: [PATCH 9/9] Fix build errors caused by rebase

---
 src/components/tasks/TaskRunSummary.vue        | 3 +--
 src/components/tasks/WorkflowFilterControl.vue | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/TaskRunSummary.vue b/src/components/tasks/TaskRunSummary.vue
index 74232605a..75affc40a 100644
--- a/src/components/tasks/TaskRunSummary.vue
+++ b/src/components/tasks/TaskRunSummary.vue
@@ -55,7 +55,6 @@ import {
   TaskStatus,
   TaskStatusCategory,
 } from '@/lib/taskruns'
-import { Workflow } from '@/lib/workflows'
 import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
 import { computed } from 'vue'
 import TaskRunProgress from './TaskRunProgress.vue'
@@ -67,7 +66,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const workflow = computed<Workflow>(() =>
+const workflow = computed(() =>
   availableWorkflowsStore.byId(props.task.workflowId),
 )
 
diff --git a/src/components/tasks/WorkflowFilterControl.vue b/src/components/tasks/WorkflowFilterControl.vue
index 38743a8dc..73d97d5e0 100644
--- a/src/components/tasks/WorkflowFilterControl.vue
+++ b/src/components/tasks/WorkflowFilterControl.vue
@@ -17,13 +17,13 @@ const selectedWorkflowIds = defineModel<string[]>({ required: true })
 
 const workflowItems = computed(() =>
   availableWorkflowsStore.workflows.map((workflow) => {
-    const id = workflow.workflowId
+    const id = workflow.id
     const isPreferred =
       availableWorkflowsStore.preferredWorkflowIds.includes(id)
     return {
       id,
       title: workflow.name,
-      value: workflow.workflowId,
+      value: workflow.id,
       isPreferred,
     }
   }),