From d582f30b441cfaf4756221d0aaf24d51b008c7ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hornych?= <lukashornych@proton.me>
Date: Wed, 16 Oct 2024 00:05:44 +0200
Subject: [PATCH] feat(#117): refactor and polish jfr viewer

---
 .../backup-viewer/components/BackupList.vue   |  73 +++----
 .../components/BackupListItem.vue             |  52 -----
 .../backup-viewer/components/BackupViewer.vue |   4 +-
 .../service/BackupViewerService.ts            |  10 -
 src/modules/base/component/VFormDialog.vue    |   2 +
 .../base/component/VTabMainActionButton.vue   |   7 +-
 .../component/VDownloadServerFileButton.vue   |   2 +-
 src/modules/i18n/en.json                      |  45 ++--
 .../components/EndRecordingButton.vue         |  47 ++++
 ...rdingDialog.vue => EndRecordingDialog.vue} |   4 +
 .../jfr-viewer/components/JfrViewer.vue       | 202 ++++--------------
 .../jfr-viewer/components/RecordingList.vue   | 121 +++++++++++
 .../jfr-viewer/components/RecordingTitle.vue  |  43 ++++
 .../components/StartRecordingButton.vue       |  48 +++++
 ...ingDialog.vue => StartRecordingDialog.vue} |   5 +
 .../jfr-viewer/service/JfrViewerService.ts    |   5 -
 src/modules/modules.ts                        |   2 +
 .../ServerFileViewerModuleRegistrar.ts        |  16 ++
 .../component/DeleteServerFileButton.vue}     |  12 +-
 .../component/DeleteServerFileDialog.vue}     |  35 +--
 .../component/DownloadServerFileButton.vue}   |  10 +-
 .../component/ServerFileList.vue              |  66 ++++++
 .../component/ServerFileListItem.vue          |  47 ++++
 .../component/ServerFileTitle.vue}            |  12 +-
 .../service/ServerFileViewerService.ts        |  25 +++
 .../task-viewer/components/TaskList.vue       |   5 +-
 26 files changed, 579 insertions(+), 321 deletions(-)
 delete mode 100644 src/modules/backup-viewer/components/BackupListItem.vue
 create mode 100644 src/modules/jfr-viewer/components/EndRecordingButton.vue
 rename src/modules/jfr-viewer/components/{EndJfrRecordingDialog.vue => EndRecordingDialog.vue} (94%)
 create mode 100644 src/modules/jfr-viewer/components/RecordingList.vue
 create mode 100644 src/modules/jfr-viewer/components/RecordingTitle.vue
 create mode 100644 src/modules/jfr-viewer/components/StartRecordingButton.vue
 rename src/modules/jfr-viewer/components/{StartJfrRecordingDialog.vue => StartRecordingDialog.vue} (95%)
 create mode 100644 src/modules/server-file-viewer/ServerFileViewerModuleRegistrar.ts
 rename src/modules/{backup-viewer/components/DeleteBackupFileButton.vue => server-file-viewer/component/DeleteServerFileButton.vue} (75%)
 rename src/modules/{backup-viewer/components/DeleteBackupFileDialog.vue => server-file-viewer/component/DeleteServerFileDialog.vue} (64%)
 rename src/modules/{backup-viewer/components/DownloadBackupFileButton.vue => server-file-viewer/component/DownloadServerFileButton.vue} (78%)
 create mode 100644 src/modules/server-file-viewer/component/ServerFileList.vue
 create mode 100644 src/modules/server-file-viewer/component/ServerFileListItem.vue
 rename src/modules/{backup-viewer/components/BackupTitle.vue => server-file-viewer/component/ServerFileTitle.vue} (76%)
 create mode 100644 src/modules/server-file-viewer/service/ServerFileViewerService.ts

diff --git a/src/modules/backup-viewer/components/BackupList.vue b/src/modules/backup-viewer/components/BackupList.vue
index fcda3656..ad9e3920 100644
--- a/src/modules/backup-viewer/components/BackupList.vue
+++ b/src/modules/backup-viewer/components/BackupList.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 
-import BackupListItem from '@/modules/backup-viewer/components/BackupListItem.vue'
-import VListItemDivider from '@/modules/base/component/VListItemDivider.vue'
 import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { PaginatedList } from '@/modules/connection/model/PaginatedList'
@@ -10,6 +8,8 @@ import { BackupViewerService, useBackupViewerService } from '@/modules/backup-vi
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
 import { useI18n } from 'vue-i18n'
 import { Connection } from '@/modules/connection/model/Connection'
+import ServerFileList from '@/modules/server-file-viewer/component/ServerFileList.vue'
+import RestoreBackupFileButton from '@/modules/backup-viewer/components/RestoreBackupFileButton.vue'
 
 const backupViewerService: BackupViewerService = useBackupViewerService()
 const toaster: Toaster = useToaster()
@@ -20,7 +20,7 @@ const props = defineProps<{
     backupsInPreparationPresent: boolean
 }>()
 const emit = defineEmits<{
-    (e: 'tasksUpdate'): void
+    (e: 'requestTaskUpdate'): void
 }>()
 
 const backupFilesLoaded = ref<boolean>(false)
@@ -50,7 +50,13 @@ async function loadBackupFiles(): Promise<boolean> {
             pageNumber.value,
             pageSize.value
         )
-        backupFilesLoaded.value = true
+
+        if (backupFiles.value.pageNumber > 1 && backupFiles.value?.data.size === 0) {
+            pageNumber.value--
+        }
+        if (!backupFilesLoaded.value) {
+            backupFilesLoaded.value = true
+        }
         return true
     } catch (e: any) {
         toaster.error(t(
@@ -63,7 +69,7 @@ async function loadBackupFiles(): Promise<boolean> {
 loadBackupFiles().then()
 
 let canReload: boolean = true
-let reloadBackupFilesTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined
+let reloadTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined
 async function reload(manual: boolean = false): Promise<void> {
     if (!canReload && !manual) {
         return
@@ -76,7 +82,7 @@ async function reload(manual: boolean = false): Promise<void> {
             // requests additional reload in between
         } else {
             // set new timeout only for automatic reload or reload recovery
-            reloadBackupFilesTimeoutId = setTimeout(reload, 5000)
+            reloadTimeoutId = setTimeout(reload, 5000)
         }
         canReload = true
     } else {
@@ -84,9 +90,9 @@ async function reload(manual: boolean = false): Promise<void> {
         canReload = false
     }
 }
-reloadBackupFilesTimeoutId = setTimeout(reload, 5000)
+reloadTimeoutId = setTimeout(reload, 5000)
 
-onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
+onUnmounted(() => clearInterval(reloadTimeoutId))
 
 defineExpose<{
     reload(manual: boolean): Promise<void>
@@ -96,37 +102,28 @@ defineExpose<{
 </script>
 
 <template>
-    <VList v-if="backupFilesLoaded && backupFileItems.length > 0">
-        <VListSubheader v-if="backupsInPreparationPresent">
+    <ServerFileList
+        v-if="backupFilesLoaded && backupFileItems.length > 0"
+        :connection="connection"
+        :files="backupFileItems"
+        v-model:page-number="pageNumber"
+        :page-size="pageSize"
+        :page-count="pageCount"
+        @request-task-update="emit('requestTaskUpdate')"
+        @request-file-update="reload(true)"
+    >
+        <template v-if="backupsInPreparationPresent" #subheader>
             {{ t('backupViewer.list.title') }}
-        </VListSubheader>
-
-        <VDataIterator
-            :items="backupFileItems"
-            :page="pageNumber"
-            :items-per-page="pageSize"
-        >
-            <template #default="{ items }">
-                <template v-for="(item, index) in items" :key="item.raw.fileId.code">
-                    <BackupListItem
-                        :connection="connection"
-                        :backup-file="item.raw"
-                        @files-update="reload(true)"
-                        @tasks-update="emit('tasksUpdate')"
-                    />
-
-                    <VListItemDivider
-                        v-if="index < backupFileItems.length - 1"
-                        inset
-                    />
-                </template>
-            </template>
-
-            <template #footer>
-                <VPagination v-model="pageNumber" :length="pageCount" />
-            </template>
-        </VDataIterator>
-    </VList>
+        </template>
+
+        <template #item-append="{ file }">
+            <RestoreBackupFileButton
+                :connection="connection"
+                :backup-file="file"
+                @restore="emit('requestTaskUpdate')"
+            />
+        </template>
+    </ServerFileList>
 
     <VMissingDataIndicator
         v-else
diff --git a/src/modules/backup-viewer/components/BackupListItem.vue b/src/modules/backup-viewer/components/BackupListItem.vue
deleted file mode 100644
index d75da2b5..00000000
--- a/src/modules/backup-viewer/components/BackupListItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-
-import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
-import { Connection } from '@/modules/connection/model/Connection'
-import BackupTitle from '@/modules/backup-viewer/components/BackupTitle.vue'
-import DownloadBackupFileButton from '@/modules/backup-viewer/components/DownloadBackupFileButton.vue'
-import RestoreBackupFileButton from '@/modules/backup-viewer/components/RestoreBackupFileButton.vue'
-import DeleteBackupFileButton from '@/modules/backup-viewer/components/DeleteBackupFileButton.vue'
-
-const props = defineProps<{
-    connection: Connection,
-    backupFile: ServerFile
-}>()
-const emit = defineEmits<{
-    (e: 'filesUpdate'): void
-    (e: 'tasksUpdate'): void
-}>()
-</script>
-
-<template>
-    <VListItem>
-        <template #prepend>
-            <VIcon>mdi-file-outline</VIcon>
-        </template>
-
-        <template #title>
-            <BackupTitle :backup-file="backupFile" />
-        </template>
-
-        <template #append>
-            <DeleteBackupFileButton
-                :connection="connection"
-                :backup-file="backupFile"
-                @delete="emit('filesUpdate')"
-            />
-            <RestoreBackupFileButton
-                :connection="connection"
-                :backup-file="backupFile"
-                @restore="emit('tasksUpdate')"
-            />
-            <DownloadBackupFileButton
-                :connection="connection"
-                :backup-file="backupFile"
-            />
-        </template>
-    </VListItem>
-
-</template>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/modules/backup-viewer/components/BackupViewer.vue b/src/modules/backup-viewer/components/BackupViewer.vue
index bae577b3..b85dbee7 100644
--- a/src/modules/backup-viewer/components/BackupViewer.vue
+++ b/src/modules/backup-viewer/components/BackupViewer.vue
@@ -19,8 +19,8 @@ const shownTaskTypes: string[] = [backupTaskName, restoreTaskName]
 
 const { t } = useI18n()
 
-const emit = defineEmits<TabComponentEvents>()
 const props = defineProps<TabComponentProps<BackupViewerTabParams, VoidTabData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const taskListRef = ref<typeof TaskList>()
 const backupListRef = ref<typeof BackupList>()
@@ -75,7 +75,7 @@ emit('ready')
                 ref="backupListRef"
                 :connection="params.connection"
                 :backups-in-preparation-present="backupsInPreparationPresent"
-                @tasks-update="reloadTasks"
+                @request-task-update="reloadTasks"
             />
         </VSheet>
     </div>
diff --git a/src/modules/backup-viewer/service/BackupViewerService.ts b/src/modules/backup-viewer/service/BackupViewerService.ts
index 124b5de6..1dc69ca6 100644
--- a/src/modules/backup-viewer/service/BackupViewerService.ts
+++ b/src/modules/backup-viewer/service/BackupViewerService.ts
@@ -84,21 +84,11 @@ export class BackupViewerService {
         return await driver.restoreCatalog(connection, fileId, catalogName)
     }
 
-    async downloadBackup(connection: Connection, fileId: Uuid): Promise<Blob> {
-        const driver = await this.connectionService.getDriver(connection)
-        return await driver.downloadFile(connection, fileId)
-    }
-
     async uploadBackup(connection: Connection, stream: AsyncIterable<GrpcRestoreCatalogRequest>): Promise<GrpcRestoreCatalogResponse>{
         const driver = await this.connectionService.getDriver(connection)
         return await driver.uploadFile(connection, stream)
     }
 
-    async deleteBackup(connection: Connection, fileId: Uuid): Promise<boolean> {
-        const driver: EvitaDBDriver = await this.connectionService.getDriver(connection)
-        return await driver.deleteFile(connection, fileId)
-    }
-
     async isCatalogNameValid(connection: Connection, catalogName: string): Promise<ClassifierValidationErrorType | undefined> {
         const driver: EvitaDBDriver = await this.connectionService.getDriver(connection)
         return driver.isClassifierValid(connection, ClassifierType.Catalog, catalogName)
diff --git a/src/modules/base/component/VFormDialog.vue b/src/modules/base/component/VFormDialog.vue
index 16a00c23..7faaa9ed 100644
--- a/src/modules/base/component/VFormDialog.vue
+++ b/src/modules/base/component/VFormDialog.vue
@@ -68,6 +68,8 @@ async function confirm(): Promise<void> {
         }
         emit('update:modelValue', false)
     }
+
+    props.reset()
 }
 </script>
 
diff --git a/src/modules/base/component/VTabMainActionButton.vue b/src/modules/base/component/VTabMainActionButton.vue
index 45ec1df3..a7d551e1 100644
--- a/src/modules/base/component/VTabMainActionButton.vue
+++ b/src/modules/base/component/VTabMainActionButton.vue
@@ -5,9 +5,11 @@
 
 const props = withDefaults(defineProps<{
     prependIcon: string
-    loading?: boolean
+    loading?: boolean,
+    disabled?: boolean
 }>(), {
-    loading: false
+    loading: false,
+    disabled: false
 })
 const emit = defineEmits<{
     (e: 'click', value: any): void
@@ -18,6 +20,7 @@ const emit = defineEmits<{
     <VBtn
         :loading="loading"
         :prepend-icon="prependIcon"
+        :disabled="disabled"
         density="compact"
         @click="emit('click', $event)"
         class="v-btn--variant-primary ml-2"
diff --git a/src/modules/connection/component/VDownloadServerFileButton.vue b/src/modules/connection/component/VDownloadServerFileButton.vue
index cd4c12df..99608399 100644
--- a/src/modules/connection/component/VDownloadServerFileButton.vue
+++ b/src/modules/connection/component/VDownloadServerFileButton.vue
@@ -35,7 +35,7 @@ async function download(): Promise<void> {
     state.value = State.Preparing
 
     try {
-        // todo lho refactor this after services refactor
+        // todo lho refactor this after services refactor, maybe merge with server file viewer module?
         const driver: EvitaDBDriver = await connectionService.getDriver(props.connection)
         const blob = await driver.downloadFile(props.connection, props.file.fileId)
 
diff --git a/src/modules/i18n/en.json b/src/modules/i18n/en.json
index 0ccb733e..7b10ae8d 100644
--- a/src/modules/i18n/en.json
+++ b/src/modules/i18n/en.json
@@ -950,12 +950,7 @@
       "noFiles": "No catalog backups are available",
       "backup": {
         "button": {
-          "deleteBackupFile": "Delete backup file",
-          "restoreBackupFile": "Restore backup file",
-          "downloadBackupFile": "Download backup file"
-        },
-        "notification": {
-          "couldNotDownloadBackupFile": "Could not download {fileName} file: {reason}"
+          "restoreBackupFile": "Restore backup file"
         }
       }
     },
@@ -1017,15 +1012,6 @@
         "restoreRequested": "A restoration of the {fileName} backup file has been requested.",
         "couldNotRestoreBackupFile": "Could not restore backup file {fileName}: {reason}"
       }
-    },
-    "delete": {
-      "title": "Delete {fileName} file",
-      "question": "Do you want to delete server file with backed up catalog?",
-      "notification": {
-        "fileDeleted": "The {fileName} backup file has been successfully deleted.",
-        "fileNotDeleted": "The {fileName} backup file has not been deleted.",
-        "couldNotDeleteFile": "Could not delete the {fileName} backup file: {reason}"
-      }
     }
   },
   "taskViewer": {
@@ -1105,7 +1091,8 @@
   "jfrViewer": {
     "path": "JFR Recordings",
     "button": {
-      "startRecording": "Start recording"
+      "startRecording": "Start recording",
+      "reloadRecordings": "Reload recordings"
     },
     "tasks": {
       "title": "Running recordings",
@@ -1114,9 +1101,11 @@
       }
     },
     "list": {
-      "title": "Finished recordings"
+      "title": "Finished recordings",
+      "noRecordings": "No JFR recordings are available."
     },
     "notification": {
+      "couldNotLoadRecordings": "Could not load JFR recording files: {reason}",
       "couldNotDownloadRecordingFile": "Could not download recording file {fileName}: {reason}"
     },
     "startRecording": {
@@ -1152,5 +1141,27 @@
         "recordingNotStopped": "JFR recording has not been stopped."
       }
     }
+  },
+  "serverFileViewer": {
+    "list": {
+      "item": {
+        "button": {
+          "deleteFile": "Delete server file",
+          "downloadFile": "Download server file"
+        },
+        "notification": {
+          "couldNotDownloadFile": "Could not download {fileName} file: {reason}"
+        }
+      }
+    },
+    "delete": {
+      "title": "Delete {fileName} file",
+      "question": "Do you want to delete server file?",
+      "notification": {
+        "fileDeleted": "The {fileName} file has been successfully deleted.",
+        "fileNotDeleted": "The {fileName} file has not been deleted.",
+        "couldNotDeleteFile": "Could not delete the {fileName} file: {reason}"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/modules/jfr-viewer/components/EndRecordingButton.vue b/src/modules/jfr-viewer/components/EndRecordingButton.vue
new file mode 100644
index 00000000..0ce3afbd
--- /dev/null
+++ b/src/modules/jfr-viewer/components/EndRecordingButton.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+import { TaskState } from '@/modules/connection/model/task/TaskState'
+import { ref } from 'vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import EndRecordingDialog from '@/modules/jfr-viewer/components/EndRecordingDialog.vue'
+import { useI18n } from 'vue-i18n'
+import { TaskStatus } from '@/modules/connection/model/task/TaskStatus'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection,
+    task: TaskStatus
+}>()
+const emit = defineEmits<{
+    (e: 'end'): void
+}>()
+
+const showEndRecordingDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <EndRecordingDialog
+        v-model="showEndRecordingDialog"
+        :connection="connection"
+        @end="emit('end')"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                v-if="task.state === TaskState.Running"
+                icon
+                @click="showEndRecordingDialog = true"
+                v-bind="props"
+            >
+                <VIcon>mdi-stop-circle-outline</VIcon>
+                <VTooltip activator="parent">
+                    {{ t('jfrViewer.tasks.button.stopRecording') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </EndRecordingDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue b/src/modules/jfr-viewer/components/EndRecordingDialog.vue
similarity index 94%
rename from src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue
rename to src/modules/jfr-viewer/components/EndRecordingDialog.vue
index 9b6782c4..9518280a 100644
--- a/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue
+++ b/src/modules/jfr-viewer/components/EndRecordingDialog.vue
@@ -48,6 +48,10 @@ async function stopRecording(): Promise<boolean> {
         :confirm="stopRecording"
         @update:model-value="emit('update:modelValue', $event)"
     >
+        <template #activator="{ props }">
+            <slot name="activator" :props="props" />
+        </template>
+
         <template #title>
             {{ t('jfrViewer.stopRecording.title') }}
         </template>
diff --git a/src/modules/jfr-viewer/components/JfrViewer.vue b/src/modules/jfr-viewer/components/JfrViewer.vue
index f6955e9d..ba19d6dc 100644
--- a/src/modules/jfr-viewer/components/JfrViewer.vue
+++ b/src/modules/jfr-viewer/components/JfrViewer.vue
@@ -1,210 +1,91 @@
 <script setup lang="ts">
 import { List } from 'immutable'
 import { useI18n } from 'vue-i18n'
-import { computed, onUnmounted, ref } from 'vue'
+import { 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 { VBtn, VIcon, VList } from 'vuetify/components'
-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'
-import VTabMainActionButton from '@/modules/base/component/VTabMainActionButton.vue'
 import { TaskState } from '@/modules/connection/model/task/TaskState'
-import StartJfrRecordingDialog from '@/modules/jfr-viewer/components/StartJfrRecordingDialog.vue'
-import EndJfrRecordingDialog from '@/modules/jfr-viewer/components/EndJfrRecordingDialog.vue'
-import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import { jfrRecorderTaskName } from '@/modules/jfr-viewer/model/JfrRecorderTask'
 import TaskList from '@/modules/task-viewer/components/TaskList.vue'
+import RecordingList from '@/modules/jfr-viewer/components/RecordingList.vue'
+import StartRecordingButton from '@/modules/jfr-viewer/components/StartRecordingButton.vue'
+import EndRecordingButton from '@/modules/jfr-viewer/components/EndRecordingButton.vue'
 
 const shownTaskStates: TaskState[] = [TaskState.Running, TaskState.Queued, TaskState.Failed]
 const shownTaskTypes: string[] = [jfrRecorderTaskName]
 
-const jfrViewerService: JfrViewerService = useJfrViewerService()
-const toaster: Toaster = useToaster()
 const { t } = useI18n()
 
 const props = defineProps<TabComponentProps<JfrViewerTabParams, VoidTabData>>()
 const emit = defineEmits<TabComponentEvents>()
 
-const jfrRecordingsReloadIntervalId = setInterval(loadJfrRecordings, 2000)
-
-onUnmounted(() => {
-    clearInterval(jfrRecordingsReloadIntervalId)
-})
+const taskListRef = ref<typeof TaskList>()
+const recordingListRef = ref<typeof RecordingList>()
 
 const path: List<string> = List([t('jfrViewer.path')])
 
-const initialized = ref<boolean>(false)
-const jfrRecordings = ref<PaginatedList<ServerFile> | undefined>()
-const jfrRecordingsLoaded = ref<boolean>(false)
-const jfrRecordingItems = computed<ServerFile[]>(() => {
-    if (jfrRecordings.value == undefined) {
-        return []
-    }
-    return jfrRecordings.value.data.toArray()
-})
-const runningRecordingsPresent = ref<boolean>(false)
-const pageNumber = ref<number>(1)
-const pageCount = computed<number>(() => {
-    if (jfrRecordings.value == undefined) {
-        return 1
-    }
-    return Math.ceil(jfrRecordings.value.totalNumberOfRecords / pageSize.value)
-})
-const pageSize = ref<number>(20)
-
-const showStartRecordingDialog = ref<boolean>(false)
-const showEndRecordingDialog = ref<boolean>(false)
-
-const taskListRef = ref<typeof TaskList>()
-
-loadJfrRecordings().then(() => {
-    initialized.value = true
-    emit('ready')
-})
+const recordingsInPreparationPresent = ref<boolean>(false)
 
-async function loadJfrRecordings() {
-    jfrRecordings.value = await jfrViewerService.getRecordings(props.params.connection)
-    jfrRecordingsLoaded.value = true
+function reloadRecordings(): void {
+    reloadTasks()
+    recordingListRef.value?.reload(true)
 }
 
-async function jfrRecordingEnded(): Promise<void> {
+function reloadTasks(): void {
     taskListRef.value?.reload(true)
 }
 
-async function downloadRecording(file: ServerFile) {
-    try {
-        const blob = await jfrViewerService.downloadFile(props.params.connection, file.fileId)
-
-        console.log('hej')
-        const downloadUrl = URL.createObjectURL(blob)
-        const link = document.createElement('a')
-        link.href = downloadUrl
-        link.download = file.name
-        document.body.appendChild(link)
-        link.click()
-    } catch (e: any) {
-        toaster.error(t(
-            'jfrViewer.notification.couldNotDownloadRecordingFile',
-            {
-                fileName: file.name,
-                reason: e.message
-            }
-        ))
-    }
-}
+emit('ready')
 </script>
 
 <template>
-    <div v-if="initialized" class="jfr-viewer">
+    <div class="jfr-viewer">
         <VTabToolbar prepend-icon="mdi-record-circle-outline" :path="path">
             <template #append>
-                <VTabMainActionButton prepend-icon="mdi-record-circle-outline" @click="showStartRecordingDialog = true">
-                    {{ t('jfrViewer.button.startRecording') }}
-                </VTabMainActionButton>
+                <VBtn icon @click="reloadRecordings">
+                    <VIcon>mdi-refresh</VIcon>
+                    <VTooltip activator="parent">
+                        {{ t('jfrViewer.button.reloadRecordings') }}
+                    </VTooltip>
+                </VBtn>
+                <StartRecordingButton
+                    :connection="params.connection"
+                    :disabled="recordingsInPreparationPresent"
+                    @start="reloadRecordings"
+                />
             </template>
         </VTabToolbar>
 
-        <div>
+        <VSheet class="jfr-viewer__body">
             <TaskList
                 ref="taskListRef"
-                v-show="runningRecordingsPresent"
+                v-show="recordingsInPreparationPresent"
                 :connection="params.connection"
                 :subheader="t('jfrViewer.tasks.title')"
                 :states="shownTaskStates"
                 :task-types="shownTaskTypes"
                 :page-size="5"
                 hideable-pagination
-                @update:active-jobs-present="runningRecordingsPresent = $event"
+                @update:active-jobs-present="recordingsInPreparationPresent = $event"
             >
                 <template #item-append-action-buttons="{ task }">
-                    <VBtn
-                        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>
+                    <EndRecordingButton
+                        :connection="params.connection"
+                        :task="task"
+                        @end="reloadRecordings"
+                    />
                 </template>
             </TaskList>
 
-            <VList v-if="jfrRecordingsLoaded">
-                <VListSubheader v-if="runningRecordingsPresent">
-                    {{ t('jfrViewer.list.title') }}
-                </VListSubheader>
-
-                <VDataIterator :items="jfrRecordingItems" :page="pageNumber">
-                    <template #default="{ items }">
-                        <VListItem
-                            v-for="item in items"
-                            :key="item.raw.fileId.code"
-                        >
-                            <VRow class="align-center">
-                                <!--                            todo lho revise -->
-                                <VCol>
-                                    <div class="d-flex align-center">
-                                        <VListItemTitle>{{ item.raw.name }}</VListItemTitle>
-                                        <VChip
-                                            color="grey"
-                                            text-color="white"
-                                            class="ml-2 small-chip"
-                                        >finished</VChip
-                                        >
-                                    </div>
-                                </VCol>
-                                <VCol
-                                    class="d-flex justify-end"
-                                    cols="auto"
-                                    v-if="item.raw.created"
-                                >
-                                    <VBtn
-                                        icon
-                                        density="compact"
-                                        variant="flat"
-                                        @click="downloadRecording(item.raw)"
-                                    >
-                                        <VIcon>mdi-download</VIcon>
-                                    </VBtn>
-                                    <!--
-                                    TODO: Implement
-                                    <VBtn icon variant="flat">
-                                        <VIcon>mdi-delete-outline</VIcon>
-                                    </VBtn>
-                                    -->
-                                </VCol>
-                            </VRow>
-                        </VListItem>
-                        <!--                        todo lho implement -->
-                        <!--                        <VListItemDivider-->
-                        <!--                            v-if="index < taskStatusesItems.length - 1"-->
-                        <!--                            inset-->
-                        <!--                        />-->
-                    </template>
-
-                    <template #footer>
-                        <VPagination v-model="pageNumber" :length="pageCount" />
-                    </template>
-                </VDataIterator>
-            </VList>
-        </div>
-
-        <StartJfrRecordingDialog
-            v-if="showStartRecordingDialog"
-            v-model="showStartRecordingDialog"
-            :connection="params.connection"
-        />
-        <EndJfrRecordingDialog
-            v-if="showEndRecordingDialog"
-            v-model="showEndRecordingDialog"
-            :connection="params.connection"
-            @end="jfrRecordingEnded"
-        />
+            <RecordingList
+                ref="recordingListRef"
+                :connection="params.connection"
+                :recordings-in-preparation-present="recordingsInPreparationPresent"
+            />
+        </VSheet>
     </div>
 </template>
 
@@ -214,7 +95,12 @@ async function downloadRecording(file: ServerFile) {
     grid-template-rows: 3rem 1fr;
 
     &__body {
-        position: relative;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 3rem;
+        bottom: 0;
+        overflow-y: auto;
     }
 }
 </style>
diff --git a/src/modules/jfr-viewer/components/RecordingList.vue b/src/modules/jfr-viewer/components/RecordingList.vue
new file mode 100644
index 00000000..283802e4
--- /dev/null
+++ b/src/modules/jfr-viewer/components/RecordingList.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
+import { useI18n } from 'vue-i18n'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { PaginatedList } from '@/modules/connection/model/PaginatedList'
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { JfrViewerService, useJfrViewerService } from '@/modules/jfr-viewer/service/JfrViewerService'
+import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { Connection } from '@/modules/connection/model/Connection'
+import ServerFileList from '@/modules/server-file-viewer/component/ServerFileList.vue'
+
+const jfrViewerService: JfrViewerService = useJfrViewerService()
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    recordingsInPreparationPresent: boolean
+}>()
+
+const recordingsLoaded = ref<boolean>(false)
+const recordings = ref<PaginatedList<ServerFile> | undefined>()
+const recordingItems = computed<ServerFile[]>(() => {
+    if (recordings.value == undefined) {
+        return []
+    }
+    return recordings.value.data.toArray()
+})
+
+const pageNumber = ref<number>(1)
+watch(pageNumber, async () => {
+    await loadRecordings()
+})
+const pageCount = computed<number>(() => {
+    if (recordings.value == undefined) {
+        return 1
+    }
+    return Math.ceil(recordings.value.totalNumberOfRecords / pageSize.value)
+})
+const pageSize = ref<number>(20)
+
+async function loadRecordings(): Promise<boolean> {
+    try {
+        recordings.value = await jfrViewerService.getRecordings(props.connection)
+
+        if (recordings.value.pageNumber > 1 && recordings.value?.data.size === 0) {
+            pageNumber.value--
+        }
+        if (!recordingsLoaded.value) {
+            recordingsLoaded.value = true
+        }
+        return true
+    } catch (e: any) {
+        toaster.error(t(
+            'jfrViewer.notification.couldNotLoadRecordings',
+            { reason: e.message }
+        ))
+        return false
+    }
+}
+loadRecordings().then()
+
+let canReload: boolean = true
+let reloadTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined
+async function reload(manual: boolean = false): Promise<void> {
+    if (!canReload && !manual) {
+        return
+    }
+
+    const loaded: boolean = await loadRecordings()
+    if (loaded) {
+        if (manual && canReload) {
+            // do nothing if the reloading process is working and user
+            // requests additional reload in between
+        } else {
+            // set new timeout only for automatic reload or reload recovery
+            reloadTimeoutId = setTimeout(reload, 5000)
+        }
+        canReload = true
+    } else {
+        // we don't want to spam user server is down, user needs to refresh manually
+        canReload = false
+    }
+}
+reloadTimeoutId = setTimeout(reload, 5000)
+
+onUnmounted(() => clearInterval(reloadTimeoutId))
+
+defineExpose<{
+    reload(manual: boolean): Promise<void>
+}>({
+    reload
+})
+</script>
+
+<template>
+    <ServerFileList
+        v-if="recordingsLoaded && recordingItems.length > 0"
+        :connection="connection"
+        :files="recordingItems"
+        v-model:page-number="pageNumber"
+        :page-size="pageSize"
+        :page-count="pageCount"
+        @request-file-update="reload(true)"
+    >
+        <template v-if="recordingsInPreparationPresent" #subheader>
+            {{ t('jfrViewer.list.title') }}
+        </template>
+    </ServerFileList>
+
+    <VMissingDataIndicator
+        v-else
+        icon="mdi-record-circle-outline"
+        :title="t('jfrViewer.list.noRecordings')"
+    />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/jfr-viewer/components/RecordingTitle.vue b/src/modules/jfr-viewer/components/RecordingTitle.vue
new file mode 100644
index 00000000..c5d84bc7
--- /dev/null
+++ b/src/modules/jfr-viewer/components/RecordingTitle.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { computed } from 'vue'
+import { formatByteSize } from '@/utils/string'
+
+const props = defineProps<{
+    recordingFile: ServerFile
+}>()
+
+const fileSize = computed<string>(() => {
+    return formatByteSize(Number(props.recordingFile.totalSizeInBytes))
+})
+</script>
+
+<template>
+    <span class="recording-title">
+        <span>{{ recordingFile.name }}</span>
+
+        <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
+        <span class="recording-title__chips">
+            <VChip>
+                {{ fileSize }}
+            </VChip>
+        </span>
+    </span>
+</template>
+
+<style lang="scss" scoped>
+.recording-title {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-flow: row wrap;
+    max-height: 1.5rem;
+
+    &__chips {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}
+</style>
diff --git a/src/modules/jfr-viewer/components/StartRecordingButton.vue b/src/modules/jfr-viewer/components/StartRecordingButton.vue
new file mode 100644
index 00000000..420a1c92
--- /dev/null
+++ b/src/modules/jfr-viewer/components/StartRecordingButton.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+
+import StartRecordingDialog from '@/modules/jfr-viewer/components/StartRecordingDialog.vue'
+import VTabMainActionButton from '@/modules/base/component/VTabMainActionButton.vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+    defineProps<{
+        connection: Connection,
+        disabled?: boolean
+    }>(),
+    {
+        disabled: false
+    }
+)
+const emit = defineEmits<{
+    (e: 'start'): void
+}>()
+
+const showStartRecordingDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <StartRecordingDialog
+        v-model="showStartRecordingDialog"
+        :connection="connection"
+        @start="emit('start')"
+    >
+        <template #activator="{ props }">
+            <VTabMainActionButton
+                prepend-icon="mdi-record-circle-outline"
+                :disabled="disabled"
+                @click="showStartRecordingDialog = true"
+                v-bind="props"
+            >
+                {{ t('jfrViewer.button.startRecording') }}
+            </VTabMainActionButton>
+        </template>
+    </StartRecordingDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/jfr-viewer/components/StartJfrRecordingDialog.vue b/src/modules/jfr-viewer/components/StartRecordingDialog.vue
similarity index 95%
rename from src/modules/jfr-viewer/components/StartJfrRecordingDialog.vue
rename to src/modules/jfr-viewer/components/StartRecordingDialog.vue
index d0242a9a..2340452b 100644
--- a/src/modules/jfr-viewer/components/StartJfrRecordingDialog.vue
+++ b/src/modules/jfr-viewer/components/StartRecordingDialog.vue
@@ -85,11 +85,16 @@ async function startRecording(): Promise<boolean> {
         :reset="reset"
         @update:model-value="emit('update:modelValue', $event)"
     >
+        <template #activator="{ props }">
+            <slot name="activator" v-bind="{ props }" />
+        </template>
+
         <template #title>
             {{ t('jfrViewer.startRecording.title') }}
         </template>
 
 <!--        todo lho singleline? -->
+<!--        todo lho add virtual select all/none item-->
         <template #default>
             <VAutocomplete
                 v-model="selectedTypes"
diff --git a/src/modules/jfr-viewer/service/JfrViewerService.ts b/src/modules/jfr-viewer/service/JfrViewerService.ts
index acdf317e..2a5f541e 100644
--- a/src/modules/jfr-viewer/service/JfrViewerService.ts
+++ b/src/modules/jfr-viewer/service/JfrViewerService.ts
@@ -22,11 +22,6 @@ export class JfrViewerService {
         return await driver.getFilesToFetch(connection, jfrRecorderTaskName, 1,20)
     }
 
-    async downloadFile(connection: Connection, fileId: Uuid):Promise<Blob> {
-        const driver = await this.connectionService.getDriver(connection)
-        return await driver.downloadFile(connection, fileId)
-    }
-
     async getEventTypes(connection: Connection):Promise<EventType[]>{
         const driver = await this.connectionService.getDriver(connection)
         return await driver.downloadRecordingEventTypes(connection)
diff --git a/src/modules/modules.ts b/src/modules/modules.ts
index f4b02607..688635bf 100644
--- a/src/modules/modules.ts
+++ b/src/modules/modules.ts
@@ -15,6 +15,7 @@ import { BackupViewerModuleRegistrar } from '@/modules/backup-viewer/BackupViewe
 import { TaskViewerModuleRegistrar } from '@/modules/task-viewer/TaskViewerModuleRegistrar'
 import { ServerActionsModuleRegistrar } from '@/modules/server-status/ServerActionsModuleRegistrar'
 import { JfrViewerModuleRegistrar } from '@/modules/jfr-viewer/JfrViewerModuleRegistrar'
+import { ServerFileViewerModuleRegistrar } from '@/modules/server-file-viewer/ServerFileViewerModuleRegistrar'
 
 // todo docs
 export const modules: ModuleRegistrar[] = [
@@ -34,6 +35,7 @@ export const modules: ModuleRegistrar[] = [
     new EntityViewerModuleRegistrar(),
     new SchemaViewerModuleRegistrar(),
     new ServerActionsModuleRegistrar(),
+    new ServerFileViewerModuleRegistrar(),
     new BackupViewerModuleRegistrar(),
     new TaskViewerModuleRegistrar(),
     new JfrViewerModuleRegistrar()
diff --git a/src/modules/server-file-viewer/ServerFileViewerModuleRegistrar.ts b/src/modules/server-file-viewer/ServerFileViewerModuleRegistrar.ts
new file mode 100644
index 00000000..c040600d
--- /dev/null
+++ b/src/modules/server-file-viewer/ServerFileViewerModuleRegistrar.ts
@@ -0,0 +1,16 @@
+import { ModuleRegistrar } from '@/ModuleRegistrar'
+import { ModuleContextBuilder } from '@/ModuleContextBuilder'
+import { ConnectionService, connectionServiceInjectionKey } from '@/modules/connection/service/ConnectionService'
+import {
+    ServerFileViewerService,
+    serverFileViewerServiceInjectionKey
+} from '@/modules/server-file-viewer/service/ServerFileViewerService'
+
+export class ServerFileViewerModuleRegistrar implements ModuleRegistrar {
+
+    register(builder: ModuleContextBuilder): void {
+        const connectionService: ConnectionService = builder.inject(connectionServiceInjectionKey)
+        const serverFileViewerService: ServerFileViewerService = new ServerFileViewerService(connectionService)
+        builder.provide(serverFileViewerServiceInjectionKey, serverFileViewerService)
+    }
+}
diff --git a/src/modules/backup-viewer/components/DeleteBackupFileButton.vue b/src/modules/server-file-viewer/component/DeleteServerFileButton.vue
similarity index 75%
rename from src/modules/backup-viewer/components/DeleteBackupFileButton.vue
rename to src/modules/server-file-viewer/component/DeleteServerFileButton.vue
index 6f226b2f..1ee1b788 100644
--- a/src/modules/backup-viewer/components/DeleteBackupFileButton.vue
+++ b/src/modules/server-file-viewer/component/DeleteServerFileButton.vue
@@ -4,13 +4,13 @@ import { Connection } from '@/modules/connection/model/Connection'
 import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
 import { useI18n } from 'vue-i18n'
 import { ref } from 'vue'
-import DeleteBackupFileDialog from '@/modules/backup-viewer/components/DeleteBackupFileDialog.vue'
+import DeleteServerFileDialog from '@/modules/server-file-viewer/component/DeleteServerFileDialog.vue'
 
 const { t } = useI18n()
 
 const props = defineProps<{
     connection: Connection
-    backupFile: ServerFile
+    file: ServerFile
 }>()
 const emit = defineEmits<{
     (e: 'delete'): void
@@ -20,10 +20,10 @@ const showDeleteDialog = ref<boolean>(false)
 </script>
 
 <template>
-    <DeleteBackupFileDialog
+    <DeleteServerFileDialog
         v-model="showDeleteDialog"
         :connection="connection"
-        :backup-file="backupFile"
+        :file="file"
         @delete="emit('delete')"
     >
         <template #activator="{ props }">
@@ -35,11 +35,11 @@ const showDeleteDialog = ref<boolean>(false)
                 <VIcon>mdi-delete-outline</VIcon>
 
                 <VTooltip activator="parent">
-                    {{ t('backupViewer.list.backup.button.deleteBackupFile') }}
+                    {{ t('serverFileViewer.list.item.button.deleteFile') }}
                 </VTooltip>
             </VBtn>
         </template>
-    </DeleteBackupFileDialog>
+    </DeleteServerFileDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/backup-viewer/components/DeleteBackupFileDialog.vue b/src/modules/server-file-viewer/component/DeleteServerFileDialog.vue
similarity index 64%
rename from src/modules/backup-viewer/components/DeleteBackupFileDialog.vue
rename to src/modules/server-file-viewer/component/DeleteServerFileDialog.vue
index 974044bd..92c29a2f 100644
--- a/src/modules/backup-viewer/components/DeleteBackupFileDialog.vue
+++ b/src/modules/server-file-viewer/component/DeleteServerFileDialog.vue
@@ -3,48 +3,51 @@
 import VFormDialog from '@/modules/base/component/VFormDialog.vue'
 import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
 import { useI18n } from 'vue-i18n'
-import { BackupViewerService, useBackupViewerService } from '@/modules/backup-viewer/service/BackupViewerService'
 import { Connection } from '@/modules/connection/model/Connection'
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import {
+    ServerFileViewerService,
+    useServerFileViewerService
+} from '@/modules/server-file-viewer/service/ServerFileViewerService'
 
-const backupViewerService: BackupViewerService = useBackupViewerService()
+const serverFileViewerService: ServerFileViewerService = useServerFileViewerService()
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
 
 const props = defineProps<{
     modelValue: boolean,
     connection: Connection
-    backupFile: ServerFile
+    file: ServerFile
 }>()
 const emit = defineEmits<{
     (e: 'update:modelValue', value: boolean): void
     (e: 'delete'): void
 }>()
 
-async function deleteBackupFile(): Promise<boolean> {
+async function deleteFile(): Promise<boolean> {
     try {
-        const deleted: boolean = await backupViewerService.deleteBackup(
+        const deleted: boolean = await serverFileViewerService.deleteFile(
             props.connection,
-            props.backupFile.fileId
+            props.file.fileId
         )
         if (deleted) {
             toaster.success(t(
-                'backupViewer.delete.notification.fileDeleted',
-                { fileName: props.backupFile.name }
+                'serverFileViewer.delete.notification.fileDeleted',
+                { fileName: props.file.name }
             ))
         } else {
             toaster.info(t(
-                'backupViewer.delete.notification.fileNotDeleted',
-                { fileName: props.backupFile.name }
+                'serverFileViewer.delete.notification.fileNotDeleted',
+                { fileName: props.file.name }
             ))
         }
         emit('delete')
         return true
     } catch (e: any) {
         toaster.error(t(
-            'backupViewer.delete.notification.couldNotDeleteFile',
+            'serverFileViewer.delete.notification.couldNotDeleteFile',
             {
-                fileName: props.backupFile.name,
+                fileName: props.file.name,
                 reason: e.message
             }
         ))
@@ -59,7 +62,7 @@ async function deleteBackupFile(): Promise<boolean> {
         dangerous
         changed
         confirm-button-icon="mdi-delete-outline"
-        :confirm="deleteBackupFile"
+        :confirm="deleteFile"
         @update:model-value="emit('update:modelValue', $event)"
     >
         <template #activator="{ props }">
@@ -67,15 +70,15 @@ async function deleteBackupFile(): Promise<boolean> {
         </template>
 
         <template #title>
-            <I18nT keypath="backupViewer.delete.title">
+            <I18nT keypath="serverFileViewer.delete.title">
                 <template #fileName>
-                    {{ backupFile.name }}
+                    {{ file.name }}
                 </template>
             </I18nT>
         </template>
 
         <template #prepend-form>
-            {{ t('backupViewer.delete.question') }}
+            {{ t('serverFileViewer.delete.question') }}
         </template>
 
         <template #confirm-button-body>
diff --git a/src/modules/backup-viewer/components/DownloadBackupFileButton.vue b/src/modules/server-file-viewer/component/DownloadServerFileButton.vue
similarity index 78%
rename from src/modules/backup-viewer/components/DownloadBackupFileButton.vue
rename to src/modules/server-file-viewer/component/DownloadServerFileButton.vue
index 68d6d3c7..77104f51 100644
--- a/src/modules/backup-viewer/components/DownloadBackupFileButton.vue
+++ b/src/modules/server-file-viewer/component/DownloadServerFileButton.vue
@@ -11,14 +11,14 @@ const { t } = useI18n()
 
 const props = defineProps<{
     connection: Connection,
-    backupFile: ServerFile
+    file: ServerFile
 }>()
 
 function onCouldNotDownloadResultFile(e: Error): void {
     toaster.error(t(
-        'backupViewer.list.backup.notification.couldNotDownloadBackupFile',
+        'serverFileViewer.list.item.notification.couldNotDownloadFile',
         {
-            fileName: props.backupFile.name,
+            fileName: props.file.name,
             reason: e.message
         }
     ))
@@ -28,10 +28,10 @@ function onCouldNotDownloadResultFile(e: Error): void {
 <template>
     <VDownloadServerFileButton
         :connection="connection"
-        :file="backupFile"
+        :file="file"
         @error="onCouldNotDownloadResultFile($event)"
     >
-        {{ t('backupViewer.list.backup.button.downloadBackupFile') }}
+        {{ t('serverFileViewer.list.item.button.downloadFile') }}
     </VDownloadServerFileButton>
 </template>
 
diff --git a/src/modules/server-file-viewer/component/ServerFileList.vue b/src/modules/server-file-viewer/component/ServerFileList.vue
new file mode 100644
index 00000000..3d300ee8
--- /dev/null
+++ b/src/modules/server-file-viewer/component/ServerFileList.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+import VListItemDivider from '@/modules/base/component/VListItemDivider.vue'
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { Connection } from '@/modules/connection/model/Connection'
+import ServerFileListItem from '@/modules/server-file-viewer/component/ServerFileListItem.vue'
+
+const props = defineProps<{
+    connection: Connection,
+    files: ServerFile[],
+    pageNumber: number,
+    pageSize: number,
+    pageCount: number
+}>()
+const emit = defineEmits<{
+    (e: 'update:pageNumber', value: number): void,
+    (e: 'requestTaskUpdate'): void,
+    (e: 'requestFileUpdate'): void
+}>()
+</script>
+
+<template>
+    <VList>
+        <VListSubheader v-if="$slots['subheader']">
+            <slot name="subheader" />
+        </VListSubheader>
+
+        <VDataIterator
+            :items="files"
+            :page="pageNumber"
+            :items-per-page="pageSize"
+        >
+            <template #default="{ items }">
+                <template v-for="(item, index) in items" :key="item.raw.fileId.code">
+                    <ServerFileListItem
+                        :connection="connection"
+                        :file="item.raw"
+                        @request-task-update="emit('requestTaskUpdate')"
+                        @request-file-update="emit('requestFileUpdate')"
+                    >
+                        <template #append="{ file }">
+                            <slot name="item-append" :file="file" />
+                        </template>
+                    </ServerFileListItem>
+
+                    <VListItemDivider
+                        v-if="index < files.length - 1"
+                        inset
+                    />
+                </template>
+            </template>
+
+            <template #footer>
+                <VPagination
+                    :model-value="pageNumber"
+                    :length="pageCount"
+                    @update:model-value="emit('update:pageNumber', $event)"
+                />
+            </template>
+        </VDataIterator>
+    </VList>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/server-file-viewer/component/ServerFileListItem.vue b/src/modules/server-file-viewer/component/ServerFileListItem.vue
new file mode 100644
index 00000000..70ff0f7f
--- /dev/null
+++ b/src/modules/server-file-viewer/component/ServerFileListItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+import ServerFileTitle from '@/modules/server-file-viewer/component/ServerFileTitle.vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import DeleteServerFileButton from '@/modules/server-file-viewer/component/DeleteServerFileButton.vue'
+import DownloadServerFileButton from '@/modules/server-file-viewer/component/DownloadServerFileButton.vue'
+
+const props = defineProps<{
+    connection: Connection,
+    file: ServerFile
+}>()
+const emit = defineEmits<{
+    (e: 'requestFileUpdate'): void
+    (e: 'requestTaskUpdate'): void
+}>()
+</script>
+
+<template>
+    <VListItem>
+        <template #prepend>
+            <VIcon>mdi-file-outline</VIcon>
+        </template>
+
+        <template #title>
+            <ServerFileTitle :file="file" />
+        </template>
+
+        <template #append>
+            <slot name="append" :file="file" />
+
+            <DeleteServerFileButton
+                :connection="connection"
+                :file="file"
+                @delete="emit('requestFileUpdate')"
+            />
+            <DownloadServerFileButton
+                :connection="connection"
+                :file="file"
+            />
+        </template>
+    </VListItem>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/BackupTitle.vue b/src/modules/server-file-viewer/component/ServerFileTitle.vue
similarity index 76%
rename from src/modules/backup-viewer/components/BackupTitle.vue
rename to src/modules/server-file-viewer/component/ServerFileTitle.vue
index 8e181ce1..eb91b4ab 100644
--- a/src/modules/backup-viewer/components/BackupTitle.vue
+++ b/src/modules/server-file-viewer/component/ServerFileTitle.vue
@@ -5,20 +5,20 @@ import { computed } from 'vue'
 import { formatByteSize } from '@/utils/string'
 
 const props = defineProps<{
-    backupFile: ServerFile
+    file: ServerFile
 }>()
 
 const fileSize = computed<string>(() => {
-    return formatByteSize(Number(props.backupFile.totalSizeInBytes))
+    return formatByteSize(Number(props.file.totalSizeInBytes))
 })
 </script>
 
 <template>
-    <span class="backup-title">
-        <span>{{ backupFile.name }}</span>
+    <span class="server-file-title">
+        <span>{{ file.name }}</span>
 
         <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
-        <span class="backup-title__chips">
+        <span class="server-file-title__chips">
             <VChip>
                 {{ fileSize }}
             </VChip>
@@ -27,7 +27,7 @@ const fileSize = computed<string>(() => {
 </template>
 
 <style lang="scss" scoped>
-.backup-title {
+.server-file-title {
     display: flex;
     gap: 1rem;
     align-items: center;
diff --git a/src/modules/server-file-viewer/service/ServerFileViewerService.ts b/src/modules/server-file-viewer/service/ServerFileViewerService.ts
new file mode 100644
index 00000000..c6020985
--- /dev/null
+++ b/src/modules/server-file-viewer/service/ServerFileViewerService.ts
@@ -0,0 +1,25 @@
+import { ConnectionService } from '@/modules/connection/service/ConnectionService'
+import { Connection } from '@/modules/connection/model/Connection'
+import { Uuid } from '@/modules/connection/model/data-type/Uuid'
+import { EvitaDBDriver } from '@/modules/connection/driver/EvitaDBDriver'
+import { InjectionKey } from 'vue'
+import { mandatoryInject } from '@/utils/reactivity'
+
+export const serverFileViewerServiceInjectionKey: InjectionKey<ServerFileViewerService> = Symbol('serverFileViewerService')
+
+export class ServerFileViewerService {
+    private readonly connectionService: ConnectionService
+
+    constructor(connectionService: ConnectionService) {
+        this.connectionService = connectionService
+    }
+
+    async deleteFile(connection: Connection, fileId: Uuid): Promise<boolean> {
+        const driver: EvitaDBDriver = await this.connectionService.getDriver(connection)
+        return await driver.deleteFile(connection, fileId)
+    }
+}
+
+export function useServerFileViewerService(): ServerFileViewerService {
+    return mandatoryInject(serverFileViewerServiceInjectionKey) as ServerFileViewerService
+}
diff --git a/src/modules/task-viewer/components/TaskList.vue b/src/modules/task-viewer/components/TaskList.vue
index 4b2b609f..4e54834c 100644
--- a/src/modules/task-viewer/components/TaskList.vue
+++ b/src/modules/task-viewer/components/TaskList.vue
@@ -75,16 +75,15 @@ const shouldDisplayPagination = computed<boolean>(() => {
 
 async function loadTaskStatuses(): Promise<boolean> {
     try {
-        const fetchedTaskStatuses: PaginatedList<TaskStatus> = await taskViewerService.getTaskStatuses(
+        taskStatuses.value = await taskViewerService.getTaskStatuses(
             props.connection,
             pageNumber.value,
             props.pageSize,
             props.states,
             props.taskTypes
         )
-        taskStatuses.value = fetchedTaskStatuses
 
-        if (fetchedTaskStatuses.pageNumber > 1 && taskStatuses.value?.data.size === 0) {
+        if (taskStatuses.value.pageNumber > 1 && taskStatuses.value?.data.size === 0) {
             pageNumber.value--
         }
         if (!loadedTaskStatuses.value) {