From c3a27e9237aa5af511faca29d9df47af2ce68de1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hornych?= <lukashornych@proton.me>
Date: Mon, 7 Oct 2024 08:22:33 +0200
Subject: [PATCH] feat(#117): refactor task list item, fix not be able to stop
 JFR recording

---
 .../backup-viewer/components/BackupViewer.vue |   7 +-
 .../connection/model/task/TaskStatus.ts       |  12 +-
 src/modules/i18n/en.json                      |  11 +-
 .../jfr-viewer/components/JfrViewer.vue       |  24 +-
 .../components/CancelTaskButton.vue           |  76 ++++++
 .../DownloadTaskFileResultButton.vue          |  42 +++
 .../components/ShowTaskDetailButton.vue       |  41 +++
 .../components/ShowTaskExceptionButton.vue    |  42 +++
 .../components/ShowTaskTextResultButton.vue   |  41 +++
 .../components/TaskDetailDialog.vue           |  21 +-
 .../task-viewer/components/TaskIcon.vue       |  32 +++
 .../task-viewer/components/TaskList.vue       |  15 +-
 .../task-viewer/components/TaskListItem.vue   | 242 ++----------------
 .../components/TaskProgressBar.vue            |  50 ++++
 .../task-viewer/components/TaskTitle.vue      |  65 +++++
 15 files changed, 465 insertions(+), 256 deletions(-)
 create mode 100644 src/modules/task-viewer/components/CancelTaskButton.vue
 create mode 100644 src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
 create mode 100644 src/modules/task-viewer/components/ShowTaskDetailButton.vue
 create mode 100644 src/modules/task-viewer/components/ShowTaskExceptionButton.vue
 create mode 100644 src/modules/task-viewer/components/ShowTaskTextResultButton.vue
 create mode 100644 src/modules/task-viewer/components/TaskIcon.vue
 create mode 100644 src/modules/task-viewer/components/TaskProgressBar.vue
 create mode 100644 src/modules/task-viewer/components/TaskTitle.vue

diff --git a/src/modules/backup-viewer/components/BackupViewer.vue b/src/modules/backup-viewer/components/BackupViewer.vue
index 15e18b8..ba94504 100644
--- a/src/modules/backup-viewer/components/BackupViewer.vue
+++ b/src/modules/backup-viewer/components/BackupViewer.vue
@@ -86,6 +86,7 @@ loadBackupFiles().then(() => {
 })
 
 let canReloadBackupFiles: boolean = true
+let reloadBackupFilesTimeoutId: number | undefined = undefined
 async function reloadBackupFiles(manual: boolean = false): Promise<void> {
     if (!canReloadBackupFiles && !manual) {
         return
@@ -94,13 +95,13 @@ async function reloadBackupFiles(manual: boolean = false): Promise<void> {
     const loaded: boolean = await loadBackupFiles()
     if (loaded) {
         canReloadBackupFiles = true
-        setTimeout(reloadBackupFiles, 2000)
+        reloadBackupFilesTimeoutId = setTimeout(reloadBackupFiles, 2000)
     } else {
         // we don't want to spam user server is down, user needs to refresh manually
         canReloadBackupFiles = false
     }
 }
-setTimeout(reloadBackupFiles, 2000)
+reloadBackupFilesTimeoutId = setTimeout(reloadBackupFiles, 2000)
 
 function reloadBackups(): void {
     reloadBackupFiles(true)
@@ -138,6 +139,8 @@ async function downloadBackup(file: ServerFile){
         ))
     }
 }
+
+onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
 </script>
 
 <template>
diff --git a/src/modules/connection/model/task/TaskStatus.ts b/src/modules/connection/model/task/TaskStatus.ts
index 63d4eb2..33fac4d 100644
--- a/src/modules/connection/model/task/TaskStatus.ts
+++ b/src/modules/connection/model/task/TaskStatus.ts
@@ -25,7 +25,7 @@ export class TaskStatus {
     readonly traits: Immutable.Set<TaskTrait>
 
     private _cancelRequested: boolean = false
-    private _elapsed?: Duration = undefined
+    private _duration?: Duration = undefined
 
     constructor(taskType: string,
                 taskName: string,
@@ -69,10 +69,10 @@ export class TaskStatus {
         }
     }
 
-    get elapsed(): Duration | undefined {
-        if (this._elapsed == undefined || this.finished == undefined) {
+    get duration(): Duration | undefined {
+        if (this._duration == undefined || this.finished == undefined) {
             if (this.started == undefined) {
-                this._elapsed = undefined
+                this._duration = undefined
             } else {
                 const startTime: number = Number(this.started.timestamp!.seconds) * 1000
                 const endTime: number = this.finished != null
@@ -80,9 +80,9 @@ export class TaskStatus {
                     : DateTime.now().toMillis()
 
                 const duration: number = endTime - startTime
-                this._elapsed = Duration.fromMillis(duration)
+                this._duration = Duration.fromMillis(duration)
             }
         }
-        return this._elapsed
+        return this._duration
     }
 }
diff --git a/src/modules/i18n/en.json b/src/modules/i18n/en.json
index 9e32804..2206046 100644
--- a/src/modules/i18n/en.json
+++ b/src/modules/i18n/en.json
@@ -1021,7 +1021,7 @@
           "downloadFileResult": "Download result",
           "textResult": "Result",
           "exception": "Exception",
-          "cancel": "Manually cancel task"
+          "cancel": "Forcefully cancel task"
         },
         "progress": {
           "indeterminate": "running..."
@@ -1044,8 +1044,8 @@
               "notStarted": "<task hasn't yet been started>",
               "notFinished": "<task hasn't yet been finished>"
             },
-            "elapsed": {
-              "label": "Time elapsed",
+            "duration": {
+              "label": "Duration",
               "notStarted": "<task hasn't yet been started>"
             },
             "progress": "Progress",
@@ -1077,7 +1077,10 @@
       "startRecording": "Start recording"
     },
     "tasks": {
-      "title": "Running recordings"
+      "title": "Running recordings",
+      "button": {
+        "stopRecording": "Stop recording"
+      }
     },
     "list": {
       "title": "Finished recordings"
diff --git a/src/modules/jfr-viewer/components/JfrViewer.vue b/src/modules/jfr-viewer/components/JfrViewer.vue
index 5296a58..7ae79b5 100644
--- a/src/modules/jfr-viewer/components/JfrViewer.vue
+++ b/src/modules/jfr-viewer/components/JfrViewer.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import { List } from 'immutable'
 import { useI18n } from 'vue-i18n'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { TabComponentEvents } from '@/modules/workspace/tab/model/TabComponentEvents'
 import { TabComponentProps } from '@/modules/workspace/tab/model/TabComponentProps'
 import { VoidTabData } from '@/modules/workspace/tab/model/void/VoidTabData'
 import { JfrViewerTabParams } from '@/modules/jfr-viewer/model/JfrViewerTabParams'
-import {
-    JfrViewerService,
-    useJfrViewerService,
-} from '@/modules/jfr-viewer/service/JfrViewerService'
+import { JfrViewerService, useJfrViewerService } from '@/modules/jfr-viewer/service/JfrViewerService'
 import { VBtn, VIcon, VList } from 'vuetify/components'
-import { onUnmounted } from 'vue'
 import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
 import VTabToolbar from '@/modules/base/component/VTabToolbar.vue'
@@ -23,7 +19,7 @@ import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import { jfrRecorderTaskName } from '@/modules/jfr-viewer/model/JfrRecorderTask'
 import TaskList from '@/modules/task-viewer/components/TaskList.vue'
 
-const shownTaskStates: TaskState[] = [TaskState.Running, TaskState.Queued]
+const shownTaskStates: TaskState[] = [TaskState.Running, TaskState.Queued, TaskState.Failed]
 const shownTaskTypes: string[] = [jfrRecorderTaskName]
 
 const jfrViewerService: JfrViewerService = useJfrViewerService()
@@ -117,13 +113,17 @@ async function downloadRecording(file: ServerFile) {
                 hideable-pagination
                 @update:active-jobs-present="runningRecordingsPresent = $event"
             >
-                <template #cancel-action="{ taskStatus }">
+                <template #item-append-action-buttons="{ task }">
                     <VBtn
-                        icon="mdi-stop-circle-outline"
-                        density="compact"
-                        variant="flat"
+                        v-if="task.state === TaskState.Running"
+                        icon
                         @click="showEndRecordingDialog = true"
-                    />
+                    >
+                        <VIcon>mdi-stop-circle-outline</VIcon>
+                        <VTooltip activator="parent">
+                            {{ t('jfrViewer.tasks.button.stopRecording') }}
+                        </VTooltip>
+                    </VBtn>
                 </template>
             </TaskList>
 
diff --git a/src/modules/task-viewer/components/CancelTaskButton.vue b/src/modules/task-viewer/components/CancelTaskButton.vue
new file mode 100644
index 0000000..e545cf3
--- /dev/null
+++ b/src/modules/task-viewer/components/CancelTaskButton.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+
+import { computed, ref } from 'vue'
+import { TaskTrait } from '@/modules/connection/model/task/TaskTrait'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { TaskViewerService, useTaskViewerService } from '@/modules/task-viewer/services/TaskViewerService'
+import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { useI18n } from 'vue-i18n'
+import { Connection } from '@/modules/connection/model/Connection'
+
+const taskViewerService: TaskViewerService = useTaskViewerService()
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    task: TaskStatus
+}>()
+
+const cancelling = ref<boolean>(false)
+const canBeCancelled = computed<boolean>(() => {
+    return (
+            props.task.traits.contains(TaskTrait.CanBeCancelled) ||
+            props.task.traits.contains(TaskTrait.NeedsToBeStopped)
+        ) &&
+        !props.task.isCancelRequested
+})
+
+async function cancelTask(): Promise<void> {
+    cancelling.value = true
+    try {
+        const cancelled = await taskViewerService.cancelTask(props.connection, props.task.taskId)
+        if (cancelled) {
+            toaster.success(t(
+                'taskViewer.tasksVisualizer.notification.taskCancelled',
+                { taskName: props.task.taskName }
+            ))
+        } else {
+            toaster.info(t(
+                'taskViewer.tasksVisualizer.notification.taskNotCancelled',
+                { taskName: props.task.taskName }
+            ))
+        }
+        // visualize the cancel until the next full reload
+        props.task.cancelRequested()
+    } catch (e: any) {
+        toaster.error(t(
+            'taskViewer.tasksVisualizer.notification.couldNotCancelTask',
+            {
+                taskName: props.task.taskName,
+                reason: e.message
+            }
+        ))
+    }
+    cancelling.value = false
+}
+</script>
+
+<template>
+    <VBtn
+        v-if="canBeCancelled"
+        icon
+        :loading="cancelling"
+        @click="cancelTask"
+    >
+        <VIcon>mdi-close</VIcon>
+
+        <VTooltip activator="parent">
+            {{ t('taskViewer.tasksVisualizer.task.button.cancel') }}
+        </VTooltip>
+    </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue b/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
new file mode 100644
index 0000000..9fcc7db
--- /dev/null
+++ b/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+
+import { FileTaskResult } from '@/modules/connection/model/task/FileTaskResult'
+import VDownloadServerFileButton from '@/modules/connection/component/VDownloadServerFileButton.vue'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { useI18n } from 'vue-i18n'
+import { Connection } from '@/modules/connection/model/Connection'
+
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    task: TaskStatus
+}>()
+
+function onCouldNotDownloadResultFile(e: Error): void {
+    toaster.error(t(
+        'taskViewer.tasksVisualizer.task.notification.couldNotDownloadResultFile',
+        {
+            taskName: props.task.taskName,
+            reason: e.message
+        }
+    ))
+}
+</script>
+
+<template>
+    <VDownloadServerFileButton
+
+        :connection="connection"
+        :file="(task.result as FileTaskResult).value"
+        @error="onCouldNotDownloadResultFile($event)"
+    >
+        {{ t('taskViewer.tasksVisualizer.task.button.downloadFileResult') }}
+    </VDownloadServerFileButton>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/ShowTaskDetailButton.vue b/src/modules/task-viewer/components/ShowTaskDetailButton.vue
new file mode 100644
index 0000000..b00e0db
--- /dev/null
+++ b/src/modules/task-viewer/components/ShowTaskDetailButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+import TaskDetailDialog from '@/modules/task-viewer/components/TaskDetailDialog.vue'
+import { ref } from 'vue'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const showDetailsDialog = ref<boolean>(false)
+
+</script>
+
+<template>
+    <TaskDetailDialog
+        v-model="showDetailsDialog"
+        :task="task"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                icon
+                v-bind="props"
+                @click="showDetailsDialog = true"
+            >
+                <VIcon>mdi-information-outline</VIcon>
+
+                <VTooltip activator="parent">
+                    {{ t('taskViewer.tasksVisualizer.task.button.details') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </TaskDetailDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/ShowTaskExceptionButton.vue b/src/modules/task-viewer/components/ShowTaskExceptionButton.vue
new file mode 100644
index 0000000..044e71d
--- /dev/null
+++ b/src/modules/task-viewer/components/ShowTaskExceptionButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+
+import TaskExceptionDialog from '@/modules/task-viewer/components/TaskExceptionDialog.vue'
+import { ref } from 'vue'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const showExceptionDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <TaskExceptionDialog
+        v-model="showExceptionDialog"
+        :exception="task.exception || ''"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                icon
+                variant="text"
+                color="warning"
+                v-bind="props"
+                @click="showExceptionDialog = true"
+            >
+                <VIcon>mdi-alert-outline</VIcon>
+
+                <VTooltip activator="parent">
+                    {{ t('taskViewer.tasksVisualizer.task.button.exception') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </TaskExceptionDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/ShowTaskTextResultButton.vue b/src/modules/task-viewer/components/ShowTaskTextResultButton.vue
new file mode 100644
index 0000000..99c6c05
--- /dev/null
+++ b/src/modules/task-viewer/components/ShowTaskTextResultButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+import { TextTaskResult } from '@/modules/connection/model/task/TextTaskResult'
+import TaskTextResultDialog from '@/modules/task-viewer/components/TaskTextResultDialog.vue'
+import { ref } from 'vue'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const showResultTextDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <TaskTextResultDialog
+        v-model="showResultTextDialog"
+        :result="task.result as TextTaskResult"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                icon
+                v-bind="props"
+                @click="showResultTextDialog = true"
+            >
+                <VIcon>mdi-file-document-outline</VIcon>
+
+                <VTooltip activator="parent">
+                    {{ t('taskViewer.tasksVisualizer.task.button.textResult') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </TaskTextResultDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/TaskDetailDialog.vue b/src/modules/task-viewer/components/TaskDetailDialog.vue
index ed054f9..0f989d6 100644
--- a/src/modules/task-viewer/components/TaskDetailDialog.vue
+++ b/src/modules/task-viewer/components/TaskDetailDialog.vue
@@ -34,11 +34,16 @@ const taskColor = computed<string | undefined>(() => {
     return undefined
 })
 
-const taskDuration = ref<Duration | undefined>(props.task.elapsed)
-const taskDurationRefreshId = setInterval(
-    () => taskDuration.value = props.task.elapsed,
-    1000
-)
+const taskDuration = ref<Duration | undefined>(props.task.duration)
+let taskDurationRefreshTimeoutId: number | undefined = undefined
+function refreshDuration(): void {
+    taskDuration.value = props.task.duration
+    if (props.task.finished == undefined) {
+        // when task is finished we have nothing to update anymore
+        taskDurationRefreshTimeoutId = setTimeout(refreshDuration, 1000)
+    }
+}
+taskDurationRefreshTimeoutId = setTimeout(refreshDuration, 1000)
 
 const properties = computed<Property[]>(() => {
     const properties: Property[] = []
@@ -90,11 +95,11 @@ const properties = computed<Property[]>(() => {
         )
     ))
     properties.push(new Property(
-        t('taskViewer.tasksVisualizer.task.detail.property.elapsed.label'),
+        t('taskViewer.tasksVisualizer.task.detail.property.duration.label'),
         new PropertyValue(
             taskDuration.value != undefined
                 ? taskDuration.value.toHuman()
-                : new PlaceholderValue(t('taskViewer.tasksVisualizer.task.detail.property.elapsed.notStarted'))
+                : new PlaceholderValue(t('taskViewer.tasksVisualizer.task.detail.property.duration.notStarted'))
         )
     ))
     properties.push(new Property(
@@ -123,7 +128,7 @@ const properties = computed<Property[]>(() => {
     return properties
 })
 
-onUnmounted(() => clearInterval(taskDurationRefreshId))
+onUnmounted(() => clearTimeout(taskDurationRefreshTimeoutId))
 </script>
 
 <template>
diff --git a/src/modules/task-viewer/components/TaskIcon.vue b/src/modules/task-viewer/components/TaskIcon.vue
new file mode 100644
index 0000000..d4f7f09
--- /dev/null
+++ b/src/modules/task-viewer/components/TaskIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { computed } from 'vue'
+import { fallbackTaskIcon, taskTypeToIconMapping } from '@/modules/task-viewer/model/taskTypeToIconMapping'
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const taskIcon = computed<string>(() => {
+    const icon: string | undefined = taskTypeToIconMapping.get(props.task.taskType)
+    if (icon != undefined) {
+        return icon
+    }
+    return fallbackTaskIcon
+})
+</script>
+
+<template>
+    <VIcon>
+        {{ taskIcon }}
+
+        <VTooltip activator="parent">
+            {{ task.taskType }}
+        </VTooltip>
+    </VIcon>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/task-viewer/components/TaskList.vue b/src/modules/task-viewer/components/TaskList.vue
index 14c80c1..a86da3f 100644
--- a/src/modules/task-viewer/components/TaskList.vue
+++ b/src/modules/task-viewer/components/TaskList.vue
@@ -5,7 +5,7 @@
 
 import { Connection } from '@/modules/connection/model/Connection'
 import { TaskViewerService, useTaskViewerService } from '../services/TaskViewerService'
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { TaskState } from '@/modules/connection/model/task/TaskState'
 import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
@@ -101,6 +101,7 @@ async function loadTaskStatuses(): Promise<boolean> {
 loadTaskStatuses().then()
 
 let canReload: boolean = true
+let reloadTimeoutId: number | undefined = undefined
 async function reload(manual: boolean = false): Promise<void> {
     if (!canReload && !manual) {
         return
@@ -109,13 +110,15 @@ async function reload(manual: boolean = false): Promise<void> {
     const loaded: boolean = await loadTaskStatuses()
     if (loaded) {
         canReload = true
-        setTimeout(reload, 2000)
+        reloadTimeoutId = setTimeout(reload, 2000)
     } else {
         // we don't want to spam user server is down, user needs to refresh manually
         canReload = false
     }
 }
-setTimeout(reload, 2000)
+reloadTimeoutId = setTimeout(reload, 2000)
+
+onUnmounted(() => clearTimeout(reloadTimeoutId))
 
 defineExpose<{
     reload(manual: boolean): Promise<void>
@@ -140,7 +143,11 @@ defineExpose<{
                     <TaskListItem
                         :connection="connection"
                         :task="item.raw"
-                    />
+                    >
+                        <template #append-action-buttons="{ task }">
+                            <slot name="item-append-action-buttons" :task="task"/>
+                        </template>
+                    </TaskListItem>
 
                     <VListItemDivider
                         v-if="index < taskStatusesItems.length - 1"
diff --git a/src/modules/task-viewer/components/TaskListItem.vue b/src/modules/task-viewer/components/TaskListItem.vue
index a0d118a..b040cc5 100644
--- a/src/modules/task-viewer/components/TaskListItem.vue
+++ b/src/modules/task-viewer/components/TaskListItem.vue
@@ -5,260 +5,66 @@
 
 import { TaskState } from '@/modules/connection/model/task/TaskState'
 import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
-import { TaskViewerService, useTaskViewerService } from '@/modules/task-viewer/services/TaskViewerService'
-import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
-import { useI18n } from 'vue-i18n'
 import { Connection } from '@/modules/connection/model/Connection'
-import { TaskTrait } from '@/modules/connection/model/task/TaskTrait'
 import { FileTaskResult } from '@/modules/connection/model/task/FileTaskResult'
 import { TextTaskResult } from '@/modules/connection/model/task/TextTaskResult'
-import { computed, onUnmounted, ref } from 'vue'
-import VDownloadServerFileButton from '@/modules/connection/component/VDownloadServerFileButton.vue'
-import { taskStateToColorMapping } from '@/modules/task-viewer/model/taskStateToColorMapping'
-import { fallbackTaskIcon, taskTypeToIconMapping } from '@/modules/task-viewer/model/taskTypeToIconMapping'
-import TaskDetailDialog from '@/modules/task-viewer/components/TaskDetailDialog.vue'
-import { Duration } from 'luxon'
-import TaskExceptionDialog from '@/modules/task-viewer/components/TaskExceptionDialog.vue'
-import TaskTextResultDialog from '@/modules/task-viewer/components/TaskTextResultDialog.vue'
-
-const taskViewerService: TaskViewerService = useTaskViewerService()
-const toaster: Toaster = useToaster()
-const { t } = useI18n()
+import CancelTaskButton from '@/modules/task-viewer/components/CancelTaskButton.vue'
+import ShowTaskTextResultButton from '@/modules/task-viewer/components/ShowTaskTextResultButton.vue'
+import ShowTaskExceptionButton from '@/modules/task-viewer/components/ShowTaskExceptionButton.vue'
+import ShowTaskDetailButton from '@/modules/task-viewer/components/ShowTaskDetailButton.vue'
+import TaskIcon from '@/modules/task-viewer/components/TaskIcon.vue'
+import TaskTitle from '@/modules/task-viewer/components/TaskTitle.vue'
+import TaskProgressBar from '@/modules/task-viewer/components/TaskProgressBar.vue'
+import DownloadTaskFileResultButton from '@/modules/task-viewer/components/DownloadTaskFileResultButton.vue'
 
 const props = defineProps<{
     connection: Connection
     task: TaskStatus
 }>()
-
-const showDetailsDialog = ref<boolean>(false)
-const showResultTextDialog = ref<boolean>(false)
-const showExceptionDialog = ref<boolean>(false)
-
-const taskIcon = computed<string>(() => {
-    const icon: string | undefined = taskTypeToIconMapping.get(props.task.taskType)
-    if (icon != undefined) {
-        return icon
-    }
-    return fallbackTaskIcon
-})
-const taskColor = computed<string | undefined>(() => {
-    const color: string | undefined = taskStateToColorMapping.get(props.task.state)
-    if (color != undefined && color.length > 0) {
-        return color
-    }
-    return undefined
-})
-const taskDuration = ref<Duration | undefined>(props.task.elapsed)
-const taskDurationRefreshId = setInterval(
-    () => taskDuration.value = props.task.elapsed,
-    1000
-)
-
-const indeterminateLoading = computed<boolean>(() => {
-    if (props.task.state !== TaskState.Running) {
-        return false
-    }
-    return !props.task.traits.contains(TaskTrait.CanBeCancelled) ||
-        props.task.traits.contains(TaskTrait.NeedsToBeStopped)
-})
-
-const cancelling = ref<boolean>(false)
-const canBeCancelled = computed<boolean>(() => {
-    return (
-            props.task.traits.contains(TaskTrait.CanBeCancelled) ||
-            props.task.traits.contains(TaskTrait.NeedsToBeStopped)
-        ) &&
-        !props.task.isCancelRequested
-})
-
-async function cancelTask(): Promise<void> {
-    cancelling.value = true
-    try {
-        const cancelled = await taskViewerService.cancelTask(props.connection, props.task.taskId)
-        if (cancelled) {
-            toaster.success(t(
-                'taskViewer.tasksVisualizer.notification.taskCancelled',
-                { taskName: props.task.taskName }
-            ))
-        } else {
-            toaster.info(t(
-                'taskViewer.tasksVisualizer.notification.taskNotCancelled',
-                { taskName: props.task.taskName }
-            ))
-        }
-        // visualize the cancel until the next full reload
-        props.task.cancelRequested()
-    } catch (e: any) {
-        toaster.error(t(
-            'taskViewer.tasksVisualizer.notification.couldNotCancelTask',
-            {
-                taskName: props.task.taskName,
-                reason: e.message
-            }
-        ))
-    }
-    cancelling.value = false
-}
-
-function onCouldNotDownloadResultFile(e: Error): void {
-    toaster.error(t(
-        'taskViewer.tasksVisualizer.task.notification.couldNotDownloadResultFile',
-        {
-            taskName: props.task.taskName,
-            reason: e.message
-        }
-    ))
-}
-
-onUnmounted(() => clearInterval(taskDurationRefreshId))
 </script>
 
 <template>
     <VListItem>
         <template #prepend>
-            <VIcon>
-                {{ taskIcon }}
-
-                <VTooltip activator="parent">
-                    {{ task.taskType }}
-                </VTooltip>
-            </VIcon>
+            <TaskIcon :task="task" />
         </template>
 
         <template #title>
-            <div class="task-title">
-                <span>{{ task.taskName }}</span>
-
-                <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
-                <div class="task-chips">
-                    <VChip :color="taskColor">
-                        {{ t(`taskViewer.tasksVisualizer.task.state.${task.state}`) }}
-                    </VChip>
-
-                    <VChip v-if="taskDuration != undefined">
-                        {{ taskDuration.toHuman() }}
-                    </VChip>
-                </div>
-            </div>
+            <TaskTitle :task="task" />
         </template>
 
         <template #append>
             <div class="task-actions">
-                <VTooltip>
-                    <template #activator="{ props }">
-                        <VProgressLinear
-                            v-if="task.state === TaskState.Running"
-                            :indeterminate="indeterminateLoading"
-                            :model-value="task.progress"
-                            class="task-progress"
-                            v-bind="props"
-                        />
-                    </template>
-                    <template #default>
-                        <template v-if="indeterminateLoading">
-                            {{ t('taskViewer.tasksVisualizer.task.progress.indeterminate') }}
-                        </template>
-                        <template v-else>
-                            {{ task.progress }}&nbsp;%
-                        </template>
-                    </template>
-                </VTooltip>
+                <TaskProgressBar :task="task" />
 
                 <div class="task-actions__buttons">
-                    <VBtn
-                        icon
-                        @click="showDetailsDialog = true"
-                    >
-                        <VIcon>mdi-information-outline</VIcon>
-
-                        <VTooltip activator="parent">
-                            {{ t('taskViewer.tasksVisualizer.task.button.details') }}
-                        </VTooltip>
-                    </VBtn>
+                    <ShowTaskDetailButton :task="task" />
                     <template v-if="task.state === TaskState.Running">
-                        <VBtn
-                            v-if="canBeCancelled"
-                            icon
-                            :loading="cancelling"
-                            @click="cancelTask"
-                        >
-                            <VIcon>mdi-close</VIcon>
-
-                            <VTooltip activator="parent">
-                                {{ t('taskViewer.tasksVisualizer.task.button.cancel') }}
-                            </VTooltip>
-                        </VBtn>
+                        <CancelTaskButton :connection="connection" :task="task" />
                     </template>
                     <template v-else-if="task.state === TaskState.Finished">
-                        <VDownloadServerFileButton
+                        <DownloadTaskFileResultButton
                             v-if="task.result instanceof FileTaskResult"
                             :connection="connection"
-                            :file="(task.result as FileTaskResult).value"
-                            @error="onCouldNotDownloadResultFile($event)"
-                        >
-                            {{ t('taskViewer.tasksVisualizer.task.button.downloadFileResult') }}
-                        </VDownloadServerFileButton>
-                        <VBtn
+                            :task="task"
+                        />
+                        <ShowTaskTextResultButton
                             v-else-if="task.result instanceof TextTaskResult"
-                            icon
-                            @click="showResultTextDialog = true"
-                        >
-                            <VIcon>mdi-file-document-outline</VIcon>
-
-                            <VTooltip activator="parent">
-                                {{ t('taskViewer.tasksVisualizer.task.button.textResult') }}
-                            </VTooltip>
-                        </VBtn>
+                            :task="task"
+                        />
                     </template>
                     <template v-else-if="task.state === TaskState.Failed">
-                        <VBtn
-                            icon
-                            variant="text"
-                            color="warning"
-                            @click="showExceptionDialog = true"
-                        >
-                            <VIcon>mdi-alert-outline</VIcon>
-
-                            <VTooltip activator="parent">
-                                {{ t('taskViewer.tasksVisualizer.task.button.exception') }}
-                            </VTooltip>
-                        </VBtn>
+                        <ShowTaskExceptionButton :task="task" />
                     </template>
+
+                    <slot name="append-action-buttons" :task="task" />
                 </div>
             </div>
         </template>
-
-        <TaskDetailDialog
-            v-if="showDetailsDialog"
-            v-model="showDetailsDialog"
-            :task="task"
-        />
-        <TaskTextResultDialog
-            v-if="showResultTextDialog"
-            v-model="showResultTextDialog"
-            :result="task.result as TextTaskResult"
-        />
-        <TaskExceptionDialog
-            v-if="showExceptionDialog"
-            v-model="showExceptionDialog"
-            :exception="task.exception || ''"
-        />
     </VListItem>
 </template>
 
 <style lang="scss" scoped>
-.task-title {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-}
-
-.task-chips {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
 .task-actions {
     display: flex;
     gap: 1rem;
@@ -270,8 +76,4 @@ onUnmounted(() => clearInterval(taskDurationRefreshId))
         align-items: center;
     }
 }
-
-.task-progress {
-    width: 10rem;
-}
 </style>
diff --git a/src/modules/task-viewer/components/TaskProgressBar.vue b/src/modules/task-viewer/components/TaskProgressBar.vue
new file mode 100644
index 0000000..44841f4
--- /dev/null
+++ b/src/modules/task-viewer/components/TaskProgressBar.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+import { TaskState } from '@/modules/connection/model/task/TaskState'
+import { computed } from 'vue'
+import { TaskTrait } from '@/modules/connection/model/task/TaskTrait'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const indeterminateLoading = computed<boolean>(() => {
+    if (props.task.state !== TaskState.Running) {
+        return false
+    }
+    return !props.task.traits.contains(TaskTrait.CanBeCancelled) ||
+        props.task.traits.contains(TaskTrait.NeedsToBeStopped)
+})
+</script>
+
+<template>
+    <VTooltip>
+        <template #activator="{ props }">
+            <VProgressLinear
+                v-if="task.state === TaskState.Running"
+                :indeterminate="indeterminateLoading"
+                :model-value="task.progress"
+                class="task-progress"
+                v-bind="props"
+            />
+        </template>
+        <template #default>
+            <template v-if="indeterminateLoading">
+                {{ t('taskViewer.tasksVisualizer.task.progress.indeterminate') }}
+            </template>
+            <template v-else>
+                {{ task.progress }}&nbsp;%
+            </template>
+        </template>
+    </VTooltip>
+</template>
+
+<style lang="scss" scoped>
+.task-progress {
+    width: 10rem;
+}
+</style>
diff --git a/src/modules/task-viewer/components/TaskTitle.vue b/src/modules/task-viewer/components/TaskTitle.vue
new file mode 100644
index 0000000..4be07a9
--- /dev/null
+++ b/src/modules/task-viewer/components/TaskTitle.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+import { computed, onUnmounted, ref } from 'vue'
+import { taskStateToColorMapping } from '@/modules/task-viewer/model/taskStateToColorMapping'
+import { Duration } from 'luxon'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    task: TaskStatus
+}>()
+
+const taskColor = computed<string | undefined>(() => {
+    const color: string | undefined = taskStateToColorMapping.get(props.task.state)
+    if (color != undefined && color.length > 0) {
+        return color
+    }
+    return undefined
+})
+
+const taskDuration = ref<Duration | undefined>(props.task.duration)
+let taskDurationRefreshTimeoutId: number | undefined = undefined
+function refreshDuration(): void {
+    taskDuration.value = props.task.duration
+    if (props.task.finished == undefined) {
+        // when task is finished we have nothing to update anymore
+        taskDurationRefreshTimeoutId = setTimeout(refreshDuration, 1000)
+    }
+}
+taskDurationRefreshTimeoutId = setTimeout(refreshDuration, 1000)
+
+onUnmounted(() => clearTimeout(taskDurationRefreshTimeoutId))
+</script>
+
+<template>
+    <div class="task-title">
+        <span>{{ task.taskName }}</span>
+
+        <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
+        <div class="task-title__chips">
+            <VChip :color="taskColor">
+                {{ t(`taskViewer.tasksVisualizer.task.state.${task.state}`) }}
+            </VChip>
+
+            <VChip v-if="taskDuration != undefined">
+                {{ taskDuration.toHuman() }}
+            </VChip>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.task-title {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    &__chips {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}
+</style>