From cc8573ca7cb7aa9fec5aea1c0d05236344692701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hornych?= <lukashornych@proton.me>
Date: Tue, 15 Oct 2024 22:37:57 +0200
Subject: [PATCH] feat(#117): refactor and polish task viewer and backup viewer

---
 .../components/BackupCatalogButton.vue        |  41 ++++
 .../components/BackupCatalogDialog.vue        | 104 ++++++--
 .../backup-viewer/components/BackupList.vue   | 140 +++++++++++
 .../components/BackupListItem.vue             |  52 ++++
 .../backup-viewer/components/BackupTitle.vue  |  43 ++++
 .../backup-viewer/components/BackupViewer.vue | 222 +++---------------
 .../components/DeleteBackupFileButton.vue     |  47 ++++
 .../components/DeleteBackupFileDialog.vue     |  89 +++++++
 .../components/DownloadBackupFileButton.vue   |  40 ++++
 ...alogDialog.vue => RestoreBackupDialog.vue} |  18 +-
 .../components/RestoreBackupFileButton.vue    |  47 ++++
 .../model/BackupViewerTabParams.ts            |   8 +-
 .../model/BackupViewerTabParamsDto.ts         |   1 -
 .../service/BackupViewerService.ts            |  21 ++
 .../service/BackupViewerTabFactory.ts         |  16 +-
 src/modules/base/component/VConfirmDialog.vue |   4 +
 .../base/component/VMissingDataIndicator.vue  |   1 +
 .../base/component/VTabMainActionButton.vue   |   4 +-
 .../connection/driver/EvitaDBDriver.ts        |   1 +
 .../driver/grpc/EvitaDBDriverGrpc.ts          |  13 +
 .../explorer/component/CatalogItem.vue        |  24 --
 .../explorer/component/ConnectionItem.vue     |  17 ++
 .../explorer/model/CatalogItemType.ts         |   2 -
 .../explorer/model/ConnectionItemType.ts      |   3 +-
 src/modules/i18n/en.json                      |  42 +++-
 .../components/EndJfrRecordingDialog.vue      |   4 +-
 .../jfr-viewer/components/JfrViewer.vue       |   8 +
 .../DownloadTaskFileResultButton.vue          |   1 -
 .../task-viewer/components/TaskList.vue       |   9 +-
 .../task-viewer/components/TaskViewer.vue     |  18 +-
 src/utils/number.ts                           |   4 +
 src/utils/string.ts                           |  30 +++
 test/utils/number.test.ts                     |   8 +
 33 files changed, 804 insertions(+), 278 deletions(-)
 create mode 100644 src/modules/backup-viewer/components/BackupCatalogButton.vue
 create mode 100644 src/modules/backup-viewer/components/BackupList.vue
 create mode 100644 src/modules/backup-viewer/components/BackupListItem.vue
 create mode 100644 src/modules/backup-viewer/components/BackupTitle.vue
 create mode 100644 src/modules/backup-viewer/components/DeleteBackupFileButton.vue
 create mode 100644 src/modules/backup-viewer/components/DeleteBackupFileDialog.vue
 create mode 100644 src/modules/backup-viewer/components/DownloadBackupFileButton.vue
 rename src/modules/backup-viewer/components/{RestoreCatalogDialog.vue => RestoreBackupDialog.vue} (89%)
 create mode 100644 src/modules/backup-viewer/components/RestoreBackupFileButton.vue
 create mode 100644 src/utils/number.ts
 create mode 100644 test/utils/number.test.ts

diff --git a/src/modules/backup-viewer/components/BackupCatalogButton.vue b/src/modules/backup-viewer/components/BackupCatalogButton.vue
new file mode 100644
index 00000000..bc9dfaec
--- /dev/null
+++ b/src/modules/backup-viewer/components/BackupCatalogButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+import BackupCatalogDialog from '@/modules/backup-viewer/components/BackupCatalogDialog.vue'
+import VTabMainActionButton from '@/modules/base/component/VTabMainActionButton.vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+}>()
+const emit = defineEmits<{
+    (e: 'backup'): void
+}>()
+
+const showBackupCatalogDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <BackupCatalogDialog
+        v-model="showBackupCatalogDialog"
+        :connection="connection"
+        @backup="emit('backup')"
+    >
+        <template #activator="{ props }">
+            <VTabMainActionButton
+                prepend-icon="mdi-cloud-download-outline"
+                @click="showBackupCatalogDialog = true"
+                v-bind="props"
+            >
+                {{ t('backupViewer.button.backupCatalog') }}
+            </VTabMainActionButton>
+        </template>
+    </BackupCatalogDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/BackupCatalogDialog.vue b/src/modules/backup-viewer/components/BackupCatalogDialog.vue
index 349a68bf..89f6f27f 100644
--- a/src/modules/backup-viewer/components/BackupCatalogDialog.vue
+++ b/src/modules/backup-viewer/components/BackupCatalogDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OffsetDateTime } from '@/modules/connection/model/data-type/OffsetDateTime'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import VFormDialog from '@/modules/base/component/VFormDialog.vue'
 import { DateTime } from 'luxon'
@@ -9,6 +9,8 @@ import { BackupViewerService, useBackupViewerService } from '@/modules/backup-vi
 import { Connection } from '@/modules/connection/model/Connection'
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
 import { CatalogVersionAtResponse } from '@/modules/connection/model/CatalogVersionAtResponse'
+import Immutable from 'immutable'
+import { Catalog } from '@/modules/connection/model/Catalog'
 
 const backupViewerService: BackupViewerService = useBackupViewerService()
 const toaster: Toaster = useToaster()
@@ -16,28 +18,80 @@ const { t } = useI18n()
 
 const props = defineProps<{
     modelValue: boolean,
-    connection: Connection,
-    catalogName: string
+    connection: Connection
 }>()
 const emit = defineEmits<{
     (e: 'update:modelValue', value: boolean): void,
-    (e: 'backup', date: string): void
+    (e: 'backup'): void
 }>()
 
+const availableCatalogs = ref<string[]>([])
+const availableCatalogsLoaded = ref<boolean>(false)
 const minimalDate = ref<string | undefined>()
 const minimalDateLoaded = ref<boolean>(false)
 
+const catalogName = ref<string | undefined>(undefined)
+watch(catalogName, async () => {
+    minimalDateLoaded.value = false
+    pastMoment.value = undefined
+    if (catalogName.value != undefined && catalogName.value.trim().length > 0) {
+        await loadMinimalDate()
+    } else {
+        minimalDate.value = undefined
+    }
+})
 const pastMoment = ref<string>()
 const includeWal = ref<boolean>(false)
 
-async function loadMinimalDate(): Promise<CatalogVersionAtResponse> {
-    return await backupViewerService.getMinimalBackupDate(
-        props.connection,
-        props.catalogName
-    )
+const changed = computed<boolean>(() =>
+    catalogName.value != undefined && catalogName.value.trim().length > 0)
+
+const catalogNameRules = [
+    (value: string): any => {
+        if (value != undefined && value.trim().length > 0) return true
+        return t('backupViewer.backup.form.catalogName.validations.required')
+    },
+    async (value: string): Promise<any> => {
+        const available: boolean = await backupViewerService.isCatalogExists(props.connection, value)
+        if (available) return true
+        return t('backupViewer.backup.form.catalogName.validations.notExists')
+    }
+]
+
+async function loadAvailableCatalogs(): Promise<void> {
+    try {
+        const fetchedAvailableCatalogs: Immutable.List<Catalog> = await backupViewerService.getAvailableCatalogs(props.connection)
+        availableCatalogs.value = fetchedAvailableCatalogs
+            .filter(it => !it.corrupted)
+            .map(it => it.name)
+            .toArray()
+        availableCatalogsLoaded.value = true
+    } catch (e: any) {
+        toaster.error(t(
+            'backupViewer.backup.notification.couldNotLoadAvailableCatalogs',
+            { reason: e.message }
+        ))
+    }
+}
+
+async function loadMinimalDate(): Promise<void> {
+    try {
+        const minimalBackupDate: CatalogVersionAtResponse = await backupViewerService.getMinimalBackupDate(
+            props.connection,
+            catalogName.value!
+        )
+        minimalDate.value = minimalBackupDate.introducedAt.toString()
+        minimalDateLoaded.value = true
+    } catch (e: any) {
+        toaster.error(t(
+            'backupViewer.backup.notification.couldNotLoadMinimalDate',
+            { reason: e.message }
+        ))
+    }
 }
 
 function reset(): void {
+    catalogName.value = ''
     pastMoment.value = ''
     includeWal.value = false
 }
@@ -58,20 +112,21 @@ async function backup(): Promise<boolean> {
     try {
         await backupViewerService.backupCatalog(
             props.connection,
-            props.catalogName,
+            catalogName.value!,
             includeWal.value,
             convertPastMoment()
         )
         toaster.success(t(
             'backupViewer.backup.notification.backupRequested',
-            { catalogName: props.catalogName }
+            { catalogName: catalogName.value }
         ))
+        emit('backup')
         return true
     } catch (e: any) {
         toaster.error(t(
             'backupViewer.backup.notification.couldNotRequestBackup',
             {
-                catalogName: props.catalogName,
+                catalogName: catalogName.value,
                 reason: e.message
             }
         ))
@@ -79,27 +134,24 @@ async function backup(): Promise<boolean> {
     }
 }
 
-loadMinimalDate().then((catalogVersionAt) => {
-    minimalDate.value = catalogVersionAt.introducedAt.toString()
-    minimalDateLoaded.value = true
-})
+loadAvailableCatalogs().then()
 </script>
 
 <template>
     <VFormDialog
         :model-value="modelValue"
-        changed
+        :changed="changed"
         confirm-button-icon="mdi-cloud-download-outline"
         :confirm="backup"
         :reset="reset"
         @update:model-value="emit('update:modelValue', $event)"
     >
+        <template #activator="{ props }">
+            <slot name="activator" v-bind="{ props }"/>
+        </template>
+
         <template #title>
-            <I18nT keypath="backupViewer.backup.title">
-                <template #catalogName>
-                    <strong>{{ catalogName }}</strong>
-                </template>
-            </I18nT>
+            {{ t('backupViewer.backup.title') }}
         </template>
 
         <template #prepend-form>
@@ -107,6 +159,14 @@ loadMinimalDate().then((catalogVersionAt) => {
         </template>
 
         <template #default>
+            <VAutocomplete
+                v-model="catalogName"
+                :label="t('backupViewer.backup.form.catalogName.label')"
+                :items="availableCatalogs"
+                :rules="catalogNameRules"
+                :disabled="!availableCatalogsLoaded"
+                required
+            />
             <VDateInput
                 v-model="pastMoment"
                 :label="t('backupViewer.backup.form.pastMoment.label')"
diff --git a/src/modules/backup-viewer/components/BackupList.vue b/src/modules/backup-viewer/components/BackupList.vue
new file mode 100644
index 00000000..fcda3656
--- /dev/null
+++ b/src/modules/backup-viewer/components/BackupList.vue
@@ -0,0 +1,140 @@
+<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'
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { BackupViewerService, useBackupViewerService } from '@/modules/backup-viewer/service/BackupViewerService'
+import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { useI18n } from 'vue-i18n'
+import { Connection } from '@/modules/connection/model/Connection'
+
+const backupViewerService: BackupViewerService = useBackupViewerService()
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    backupsInPreparationPresent: boolean
+}>()
+const emit = defineEmits<{
+    (e: 'tasksUpdate'): void
+}>()
+
+const backupFilesLoaded = ref<boolean>(false)
+const backupFiles = ref<PaginatedList<ServerFile>>()
+const backupFileItems = computed<ServerFile[]>(() => {
+    if (backupFiles.value == undefined) {
+        return []
+    }
+    return backupFiles.value.data.toArray()
+})
+const pageNumber = ref<number>(1)
+watch(pageNumber, async () => {
+    await loadBackupFiles()
+})
+const pageCount = computed<number>(() => {
+    if (backupFiles.value == undefined) {
+        return 1
+    }
+    return Math.ceil(backupFiles.value.totalNumberOfRecords / pageSize.value)
+})
+const pageSize = ref<number>(20)
+
+async function loadBackupFiles(): Promise<boolean> {
+    try {
+        backupFiles.value = await backupViewerService.getBackupFiles(
+            props.connection,
+            pageNumber.value,
+            pageSize.value
+        )
+        backupFilesLoaded.value = true
+        return true
+    } catch (e: any) {
+        toaster.error(t(
+            'backupViewer.notification.couldNotLoadBackupFiles',
+            { reason: e.message }
+        ))
+        return false
+    }
+}
+loadBackupFiles().then()
+
+let canReload: boolean = true
+let reloadBackupFilesTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined
+async function reload(manual: boolean = false): Promise<void> {
+    if (!canReload && !manual) {
+        return
+    }
+
+    const loaded: boolean = await loadBackupFiles()
+    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
+            reloadBackupFilesTimeoutId = setTimeout(reload, 5000)
+        }
+        canReload = true
+    } else {
+        // we don't want to spam user server is down, user needs to refresh manually
+        canReload = false
+    }
+}
+reloadBackupFilesTimeoutId = setTimeout(reload, 5000)
+
+onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
+
+defineExpose<{
+    reload(manual: boolean): Promise<void>
+}>({
+    reload
+})
+</script>
+
+<template>
+    <VList v-if="backupFilesLoaded && backupFileItems.length > 0">
+        <VListSubheader v-if="backupsInPreparationPresent">
+            {{ 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>
+
+    <VMissingDataIndicator
+        v-else
+        icon="mdi-cloud-download-outline"
+        :title="t('backupViewer.list.noFiles')"
+    />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/BackupListItem.vue b/src/modules/backup-viewer/components/BackupListItem.vue
new file mode 100644
index 00000000..d75da2b5
--- /dev/null
+++ b/src/modules/backup-viewer/components/BackupListItem.vue
@@ -0,0 +1,52 @@
+<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/BackupTitle.vue b/src/modules/backup-viewer/components/BackupTitle.vue
new file mode 100644
index 00000000..8e181ce1
--- /dev/null
+++ b/src/modules/backup-viewer/components/BackupTitle.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<{
+    backupFile: ServerFile
+}>()
+
+const fileSize = computed<string>(() => {
+    return formatByteSize(Number(props.backupFile.totalSizeInBytes))
+})
+</script>
+
+<template>
+    <span class="backup-title">
+        <span>{{ backupFile.name }}</span>
+
+        <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
+        <span class="backup-title__chips">
+            <VChip>
+                {{ fileSize }}
+            </VChip>
+        </span>
+    </span>
+</template>
+
+<style lang="scss" scoped>
+.backup-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/backup-viewer/components/BackupViewer.vue b/src/modules/backup-viewer/components/BackupViewer.vue
index 1737908c..bae577b3 100644
--- a/src/modules/backup-viewer/components/BackupViewer.vue
+++ b/src/modules/backup-viewer/components/BackupViewer.vue
@@ -1,150 +1,48 @@
 <script setup lang="ts">
 import { TabComponentEvents } from '@/modules/workspace/tab/model/TabComponentEvents'
 import { List } from 'immutable'
-import { computed, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { VBtn, VIcon, VList } from 'vuetify/lib/components/index.mjs'
 import { TabComponentProps } from '@/modules/workspace/tab/model/TabComponentProps'
 import { VoidTabData } from '@/modules/workspace/tab/model/void/VoidTabData'
-import { BackupViewerService, useBackupViewerService } from '../service/BackupViewerService'
-import { onUnmounted } from 'vue'
 import { BackupViewerTabParams } from '@/modules/backup-viewer/model/BackupViewerTabParams'
 import { TaskState } from '@/modules/connection/model/task/TaskState'
-import BackupCatalogDialog from '@/modules/backup-viewer/components/BackupCatalogDialog.vue'
 import VTabToolbar from '@/modules/base/component/VTabToolbar.vue'
-import VTabMainActionButton from '@/modules/base/component/VTabMainActionButton.vue'
-import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
-import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
-import RestoreCatalogDialog from '@/modules/backup-viewer/components/RestoreCatalogDialog.vue'
-import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import { backupTaskName } from '@/modules/backup-viewer/model/BackupTask'
 import { restoreTaskName } from '@/modules/backup-viewer/model/RestoreTask'
 import TaskList from '@/modules/task-viewer/components/TaskList.vue'
-import VListItemDivider from '@/modules/base/component/VListItemDivider.vue'
+import BackupList from '@/modules/backup-viewer/components/BackupList.vue'
+import BackupCatalogButton from '@/modules/backup-viewer/components/BackupCatalogButton.vue'
 
 const shownTaskStates: TaskState[] = [TaskState.Running, TaskState.Queued, TaskState.Failed]
 const shownTaskTypes: string[] = [backupTaskName, restoreTaskName]
 
-const backupViewerService: BackupViewerService = useBackupViewerService()
-const toaster: Toaster = useToaster()
 const { t } = useI18n()
 
 const emit = defineEmits<TabComponentEvents>()
 const props = defineProps<TabComponentProps<BackupViewerTabParams, VoidTabData>>()
 
 const taskListRef = ref<typeof TaskList>()
+const backupListRef = ref<typeof BackupList>()
 
-const path: List<string> = List([props.params.catalogName])
-
-const initialized = ref<boolean>(false)
-
-const showBackupCatalogDialog = ref<boolean>(false)
-const showRestoreCatalogDialog = ref<boolean>(false)
-const restoreBackupFile = ref<ServerFile | undefined>()
+const path: List<string> = List([t('backupViewer.title')])
 
 const backupsInPreparationPresent = ref<boolean>(false)
-const backupFilesLoaded = ref<boolean>(false)
-const backupFiles = ref<PaginatedList<ServerFile>>()
-const backupFileItems = computed<ServerFile[]>(() => {
-    if (backupFiles.value == undefined) {
-        return []
-    }
-    return backupFiles.value.data.toArray()
-})
-const pageNumber = ref<number>(1)
-watch(pageNumber, async () => {
-    await loadBackupFiles()
-})
-const pageCount = computed<number>(() => {
-    if (backupFiles.value == undefined) {
-        return 1
-    }
-    return Math.ceil(backupFiles.value.totalNumberOfRecords / pageSize.value)
-})
-const pageSize = ref<number>(20)
-
-async function loadBackupFiles(): Promise<boolean> {
-    try {
-        backupFiles.value = await backupViewerService.getBackupFiles(
-            props.params.connection,
-            pageNumber.value,
-            pageSize.value
-        )
-        backupFilesLoaded.value = true
-        return true
-    } catch (e: any) {
-        toaster.error(t(
-            'backupViewer.notification.couldNotLoadBackupFiles',
-            { reason: e.message }
-        ))
-        return false
-    }
-}
-loadBackupFiles().then(() => {
-    initialized.value = true
-    emit('ready')
-})
-
-let canReloadBackupFiles: boolean = true
-let reloadBackupFilesTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined
-async function reloadBackupFiles(manual: boolean = false): Promise<void> {
-    if (!canReloadBackupFiles && !manual) {
-        return
-    }
-
-    const loaded: boolean = await loadBackupFiles()
-    if (loaded) {
-        canReloadBackupFiles = true
-        reloadBackupFilesTimeoutId = setTimeout(reloadBackupFiles, 2000)
-    } else {
-        // we don't want to spam user server is down, user needs to refresh manually
-        canReloadBackupFiles = false
-    }
-}
-reloadBackupFilesTimeoutId = setTimeout(reloadBackupFiles, 2000)
 
 function reloadBackups(): void {
-    reloadBackupFiles(true)
-    taskListRef.value?.reload(true)
+    reloadTasks()
+    backupListRef.value?.reload(true)
 }
 
-function showRestoreDialog(file: ServerFile): void {
-    restoreBackupFile.value = file
-    showRestoreCatalogDialog.value = true
-}
-
-function hideRestoreDialog(): void {
-    showRestoreCatalogDialog.value = false
-    restoreBackupFile.value = undefined
-}
-
-// todo lho download button instead
-async function downloadBackup(file: ServerFile){
-    try {
-        const blob = await backupViewerService.downloadBackup(props.params.connection, file.fileId)
-
-        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(
-            'backupViewer.notification.couldNotDownloadBackupFile',
-            {
-                fileName: file.name,
-                reason: e.message
-            }
-        ))
-    }
+function reloadTasks(): void {
+    taskListRef.value?.reload(true)
 }
 
-onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
+emit('ready')
 </script>
 
 <template>
-    <div v-if="initialized" class="backup-viewer">
+    <div class="backup-viewer">
         <VTabToolbar prepend-icon="mdi-cloud-download-outline" :path="path">
             <template #append>
                 <VBtn icon @click="reloadBackups">
@@ -153,13 +51,14 @@ onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
                         {{ t('backupViewer.button.reloadBackups') }}
                     </VTooltip>
                 </VBtn>
-                <VTabMainActionButton prepend-icon="mdi-cloud-download-outline" @click="showBackupCatalogDialog = true">
-                    {{ t('backupViewer.button.backupCatalog') }}
-                </VTabMainActionButton>
+                <BackupCatalogButton
+                    :connection="params.connection"
+                    @backup="reloadBackups"
+                />
             </template>
         </VTabToolbar>
 
-        <div>
+        <VSheet class="backup-viewer__body">
             <TaskList
                 ref="taskListRef"
                 v-show="backupsInPreparationPresent"
@@ -172,81 +71,13 @@ onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
                 @update:active-jobs-present="backupsInPreparationPresent = $event"
             />
 
-            <VList v-if="backupFilesLoaded">
-                <VListSubheader v-if="backupsInPreparationPresent">
-                    {{ t('backupViewer.list.title') }}
-                </VListSubheader>
-
-                <VDataIterator :items="backupFileItems" :page="pageNumber">
-                    <template #default="{ items }">
-                        <!--                    todo lho revise -->
-                        <VListItem v-for="item in items" :key="item.raw.fileId.code">
-                            <VRow class="align-center">
-                                <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="mdi-download"
-                                        variant="flat"
-                                        @click="downloadBackup(item.raw)"
-                                    />
-                                    <VBtn
-                                        icon="mdi-database-arrow-right-outline"
-                                        variant="flat"
-                                        @click="showRestoreDialog(item.raw)"
-                                    />
-                                </VCol>
-                                <VCol class="d-flex justify-end" cols="auto" v-else>
-                                    <!--                                todo lho what is this?-->
-                                    <VBtn
-                                        icon="mdi-window-close"
-                                        variant="flat"
-                                    />
-                                </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>
-
-        <BackupCatalogDialog
-            v-if="showBackupCatalogDialog"
-            v-model="showBackupCatalogDialog"
-            :connection="params.connection"
-            :catalog-name="params.catalogName"
-        />
-        <RestoreCatalogDialog
-            v-if="showRestoreCatalogDialog"
-            :model-value="showRestoreCatalogDialog"
-            :connection="params.connection"
-            :file="restoreBackupFile!"
-            @update:model-value="hideRestoreDialog()"
-        />
+            <BackupList
+                ref="backupListRef"
+                :connection="params.connection"
+                :backups-in-preparation-present="backupsInPreparationPresent"
+                @tasks-update="reloadTasks"
+            />
+        </VSheet>
     </div>
 </template>
 
@@ -256,7 +87,12 @@ onUnmounted(() => clearInterval(reloadBackupFilesTimeoutId))
     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/backup-viewer/components/DeleteBackupFileButton.vue b/src/modules/backup-viewer/components/DeleteBackupFileButton.vue
new file mode 100644
index 00000000..6f226b2f
--- /dev/null
+++ b/src/modules/backup-viewer/components/DeleteBackupFileButton.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+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'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    backupFile: ServerFile
+}>()
+const emit = defineEmits<{
+    (e: 'delete'): void
+}>()
+
+const showDeleteDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <DeleteBackupFileDialog
+        v-model="showDeleteDialog"
+        :connection="connection"
+        :backup-file="backupFile"
+        @delete="emit('delete')"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                icon
+                @click="showDeleteDialog = true"
+                v-bind="props"
+            >
+                <VIcon>mdi-delete-outline</VIcon>
+
+                <VTooltip activator="parent">
+                    {{ t('backupViewer.list.backup.button.deleteBackupFile') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </DeleteBackupFileDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/DeleteBackupFileDialog.vue b/src/modules/backup-viewer/components/DeleteBackupFileDialog.vue
new file mode 100644
index 00000000..974044bd
--- /dev/null
+++ b/src/modules/backup-viewer/components/DeleteBackupFileDialog.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+
+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'
+
+const backupViewerService: BackupViewerService = useBackupViewerService()
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    modelValue: boolean,
+    connection: Connection
+    backupFile: ServerFile
+}>()
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'delete'): void
+}>()
+
+async function deleteBackupFile(): Promise<boolean> {
+    try {
+        const deleted: boolean = await backupViewerService.deleteBackup(
+            props.connection,
+            props.backupFile.fileId
+        )
+        if (deleted) {
+            toaster.success(t(
+                'backupViewer.delete.notification.fileDeleted',
+                { fileName: props.backupFile.name }
+            ))
+        } else {
+            toaster.info(t(
+                'backupViewer.delete.notification.fileNotDeleted',
+                { fileName: props.backupFile.name }
+            ))
+        }
+        emit('delete')
+        return true
+    } catch (e: any) {
+        toaster.error(t(
+            'backupViewer.delete.notification.couldNotDeleteFile',
+            {
+                fileName: props.backupFile.name,
+                reason: e.message
+            }
+        ))
+        return false
+    }
+}
+</script>
+
+<template>
+    <VFormDialog
+        :model-value="modelValue"
+        dangerous
+        changed
+        confirm-button-icon="mdi-delete-outline"
+        :confirm="deleteBackupFile"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <template #activator="{ props }">
+            <slot name="activator" v-bind="{ props }"/>
+        </template>
+
+        <template #title>
+            <I18nT keypath="backupViewer.delete.title">
+                <template #fileName>
+                    {{ backupFile.name }}
+                </template>
+            </I18nT>
+        </template>
+
+        <template #prepend-form>
+            {{ t('backupViewer.delete.question') }}
+        </template>
+
+        <template #confirm-button-body>
+            {{ t('common.button.delete') }}
+        </template>
+    </VFormDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/DownloadBackupFileButton.vue b/src/modules/backup-viewer/components/DownloadBackupFileButton.vue
new file mode 100644
index 00000000..68d6d3c7
--- /dev/null
+++ b/src/modules/backup-viewer/components/DownloadBackupFileButton.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+
+import VDownloadServerFileButton from '@/modules/connection/component/VDownloadServerFileButton.vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { useI18n } from 'vue-i18n'
+
+const toaster: Toaster = useToaster()
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection,
+    backupFile: ServerFile
+}>()
+
+function onCouldNotDownloadResultFile(e: Error): void {
+    toaster.error(t(
+        'backupViewer.list.backup.notification.couldNotDownloadBackupFile',
+        {
+            fileName: props.backupFile.name,
+            reason: e.message
+        }
+    ))
+}
+</script>
+
+<template>
+    <VDownloadServerFileButton
+        :connection="connection"
+        :file="backupFile"
+        @error="onCouldNotDownloadResultFile($event)"
+    >
+        {{ t('backupViewer.list.backup.button.downloadBackupFile') }}
+    </VDownloadServerFileButton>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/components/RestoreCatalogDialog.vue b/src/modules/backup-viewer/components/RestoreBackupDialog.vue
similarity index 89%
rename from src/modules/backup-viewer/components/RestoreCatalogDialog.vue
rename to src/modules/backup-viewer/components/RestoreBackupDialog.vue
index 077e8c0b..e571c10b 100644
--- a/src/modules/backup-viewer/components/RestoreCatalogDialog.vue
+++ b/src/modules/backup-viewer/components/RestoreBackupDialog.vue
@@ -15,10 +15,11 @@ const { t } = useI18n()
 const props = defineProps<{
     modelValue: boolean,
     connection: Connection,
-    file: ServerFile
+    backupFile: ServerFile
 }>()
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void
+    (e: 'update:modelValue', value: boolean): void,
+    (e: 'restore'): void
 }>()
 
 
@@ -51,19 +52,20 @@ async function restore(): Promise<boolean> {
     try {
         await backupViewerService.restoreCatalog(
             props.connection,
-            props.file.fileId,
+            props.backupFile.fileId,
             catalogName.value
         )
         toaster.success(t(
             'backupViewer.restore.notification.restoreRequested',
-            { fileName: props.file.name }
+            { fileName: props.backupFile.name }
         ))
+        emit('restore')
         return true
     } catch (e: any) {
         toaster.error(t(
             'backupViewer.restore.notification.couldNotRestoreBackupFile',
             {
-                fileName: props.file.name,
+                fileName: props.backupFile.name,
                 reason: e.message
             }
         ))
@@ -81,10 +83,14 @@ async function restore(): Promise<boolean> {
         :reset="reset"
         @update:model-value="emit('update:modelValue', $event)"
     >
+        <template #activator="{ props }">
+            <slot name="activator" v-bind="{ props }" />
+        </template>
+
         <template #title>
             <I18nT keypath="backupViewer.restore.title">
                 <template #fileName>
-                    <strong>{{ file.name }}</strong>
+                    <strong>{{ backupFile.name }}</strong>
                 </template>
             </I18nT>
         </template>
diff --git a/src/modules/backup-viewer/components/RestoreBackupFileButton.vue b/src/modules/backup-viewer/components/RestoreBackupFileButton.vue
new file mode 100644
index 00000000..8c912b32
--- /dev/null
+++ b/src/modules/backup-viewer/components/RestoreBackupFileButton.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import RestoreBackupDialog from '@/modules/backup-viewer/components/RestoreBackupDialog.vue'
+import { ref } from 'vue'
+import { Connection } from '@/modules/connection/model/Connection'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    connection: Connection
+    backupFile: ServerFile
+}>()
+const emit = defineEmits<{
+    (e: 'restore'): void
+}>()
+
+const showRestoreDialog = ref<boolean>(false)
+</script>
+
+<template>
+    <RestoreBackupDialog
+        v-model="showRestoreDialog"
+        :connection="connection"
+        :backup-file="backupFile"
+        @restore="emit('restore')"
+    >
+        <template #activator="{ props }">
+            <VBtn
+                icon
+                @click="showRestoreDialog = true"
+                v-bind="props"
+            >
+                <VIcon>mdi-cloud-upload-outline</VIcon>
+
+                <VTooltip activator="parent">
+                    {{ t('backupViewer.list.backup.button.restoreBackupFile') }}
+                </VTooltip>
+            </VBtn>
+        </template>
+    </RestoreBackupDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/modules/backup-viewer/model/BackupViewerTabParams.ts b/src/modules/backup-viewer/model/BackupViewerTabParams.ts
index a8929ee4..a0413b7a 100644
--- a/src/modules/backup-viewer/model/BackupViewerTabParams.ts
+++ b/src/modules/backup-viewer/model/BackupViewerTabParams.ts
@@ -5,16 +5,14 @@ import { Connection } from "@/modules/connection/model/Connection";
 export class BackupViewerTabParams implements TabParams<BackupViewerTabParamsDto> {
 
     readonly connection: Connection
-    readonly catalogName: string
 
-    constructor(connection: Connection, catalogName: string) {
+    constructor(connection: Connection) {
         this.connection = connection
-        this.catalogName = catalogName
     }
+
     toSerializable(): BackupViewerTabParamsDto {
         return {
-            connectionId: this.connection.id,
-            catalogName: this.catalogName
+            connectionId: this.connection.id
         }
     }
 }
diff --git a/src/modules/backup-viewer/model/BackupViewerTabParamsDto.ts b/src/modules/backup-viewer/model/BackupViewerTabParamsDto.ts
index cda7dcbf..ed0a32da 100644
--- a/src/modules/backup-viewer/model/BackupViewerTabParamsDto.ts
+++ b/src/modules/backup-viewer/model/BackupViewerTabParamsDto.ts
@@ -3,5 +3,4 @@ import { ConnectionId } from '@/modules/connection/model/ConnectionId'
 
 export interface BackupViewerTabParamsDto extends TabParamsDto {
     readonly connectionId: ConnectionId
-    readonly catalogName: string
 }
diff --git a/src/modules/backup-viewer/service/BackupViewerService.ts b/src/modules/backup-viewer/service/BackupViewerService.ts
index d17c8f31..124b5de6 100644
--- a/src/modules/backup-viewer/service/BackupViewerService.ts
+++ b/src/modules/backup-viewer/service/BackupViewerService.ts
@@ -17,6 +17,8 @@ import { UnexpectedError } from '@/modules/base/exception/UnexpectedError'
 import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
 import { backupTaskName } from '@/modules/backup-viewer/model/BackupTask'
+import { Catalog } from '@/modules/connection/model/Catalog'
+import Immutable from 'immutable'
 
 export const backupViewerServiceInjectionKey: InjectionKey<BackupViewerService> = Symbol('backupViewerService')
 
@@ -27,6 +29,20 @@ export class BackupViewerService {
         this.connectionService = connectionService
     }
 
+    async getAvailableCatalogs(connection: Connection): Promise<Immutable.List<Catalog>> {
+        return this.connectionService.getCatalogs(connection, true)
+    }
+
+    async isCatalogExists(connection: Connection, catalogName: string): Promise<boolean> {
+        const driver: EvitaDBDriver = await this.connectionService.getDriver(connection)
+        try {
+            await driver.getCatalog(connection, catalogName)
+            return true
+        } catch (e) {
+            return false
+        }
+    }
+
     async getMinimalBackupDate(
         connection: Connection,
         catalogName: string
@@ -78,6 +94,11 @@ export class BackupViewerService {
         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/backup-viewer/service/BackupViewerTabFactory.ts b/src/modules/backup-viewer/service/BackupViewerTabFactory.ts
index 8569d040..2232de38 100644
--- a/src/modules/backup-viewer/service/BackupViewerTabFactory.ts
+++ b/src/modules/backup-viewer/service/BackupViewerTabFactory.ts
@@ -16,30 +16,30 @@ export class BackupViewerTabFactory {
         this.connectionService = connectionService
     }
 
-    createNew(connection: Connection, catalogName: string): BackupViewerTabDefinition {
+    createNew(connection: Connection): BackupViewerTabDefinition {
         return new BackupViewerTabDefinition(
-            this.constructTitle(connection, catalogName),
-            new BackupViewerTabParams(connection, catalogName)
+            this.constructTitle(connection),
+            new BackupViewerTabParams(connection)
         )
     }
 
     restoreFromJson(paramsJson: TabParamsDto): BackupViewerTabDefinition {
         const params: BackupViewerTabParams = this.restoreTabParamsFromSerializable(paramsJson)
         return new BackupViewerTabDefinition(
-            this.constructTitle(params.connection, params.catalogName),
+            this.constructTitle(params.connection),
             params
         )
     }
 
-    private constructTitle(connection: Connection, catalogName: string): string {
-        return `${catalogName} [${connection.name}]`
+    // todo lho i18n
+    private constructTitle(connection: Connection): string {
+        return `Catalog backups [${connection.name}]`
     }
 
     private restoreTabParamsFromSerializable(json: TabParamsDto): BackupViewerTabParams {
         const dto: BackupViewerTabParamsDto = json as BackupViewerTabParamsDto
         return new BackupViewerTabParams(
-            this.connectionService.getConnection(dto.connectionId),
-            dto.catalogName
+            this.connectionService.getConnection(dto.connectionId)
         )
     }
 }
diff --git a/src/modules/base/component/VConfirmDialog.vue b/src/modules/base/component/VConfirmDialog.vue
index 1bc37d98..bcb34536 100644
--- a/src/modules/base/component/VConfirmDialog.vue
+++ b/src/modules/base/component/VConfirmDialog.vue
@@ -42,6 +42,10 @@ function reject(): void {
         persistent
         max-width="36rem"
     >
+        <template #activator="{ props }">
+            <slot name="activator" v-bind="{ props }"/>
+        </template>
+
         <template #title>
             <slot name="title">
                 {{ t('common.dialog.confirmDialog.title') }}
diff --git a/src/modules/base/component/VMissingDataIndicator.vue b/src/modules/base/component/VMissingDataIndicator.vue
index adf40186..af88457d 100644
--- a/src/modules/base/component/VMissingDataIndicator.vue
+++ b/src/modules/base/component/VMissingDataIndicator.vue
@@ -22,6 +22,7 @@ const props = defineProps<{
 .missing-data-indicator {
     align-self: stretch;
     flex-grow: 2;
+    height: 100%;
 
     display: flex;
     flex-direction: column;
diff --git a/src/modules/base/component/VTabMainActionButton.vue b/src/modules/base/component/VTabMainActionButton.vue
index 4018fe28..45ec1df3 100644
--- a/src/modules/base/component/VTabMainActionButton.vue
+++ b/src/modules/base/component/VTabMainActionButton.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
     loading: false
 })
 const emit = defineEmits<{
-    (e: 'click'): void
+    (e: 'click', value: any): void
 }>()
 </script>
 
@@ -19,7 +19,7 @@ const emit = defineEmits<{
         :loading="loading"
         :prepend-icon="prependIcon"
         density="compact"
-        @click="emit('click')"
+        @click="emit('click', $event)"
         class="v-btn--variant-primary ml-2"
     >
         <slot />
diff --git a/src/modules/connection/driver/EvitaDBDriver.ts b/src/modules/connection/driver/EvitaDBDriver.ts
index 55a2e3a1..fb94a200 100644
--- a/src/modules/connection/driver/EvitaDBDriver.ts
+++ b/src/modules/connection/driver/EvitaDBDriver.ts
@@ -108,6 +108,7 @@ export interface EvitaDBDriver {
     downloadFile(connection:Connection, fileId: Uuid):Promise<Blob>
     //TODO: Add doc
     uploadFile(connection: Connection, stream: AsyncIterable<GrpcRestoreCatalogRequest>):Promise<GrpcRestoreCatalogResponse>
+    deleteFile(connection: Connection, fileId: Uuid): Promise<boolean>
     //TODO: Add doc
     downloadRecordingEventTypes(connection: Connection):Promise<EventType[]>
     //TODO: Add doc
diff --git a/src/modules/connection/driver/grpc/EvitaDBDriverGrpc.ts b/src/modules/connection/driver/grpc/EvitaDBDriverGrpc.ts
index 57a3d7c0..9bee29c3 100644
--- a/src/modules/connection/driver/grpc/EvitaDBDriverGrpc.ts
+++ b/src/modules/connection/driver/grpc/EvitaDBDriverGrpc.ts
@@ -36,6 +36,7 @@ import { ConnectError } from '@connectrpc/connect'
 import { ClassifierValidationErrorType } from '@/modules/connection/model/data-type/ClassifierValidationErrorType'
 import { ClassifierType } from '@/modules/connection/model/data-type/ClassifierType'
 import {
+    GrpcDeleteFileToFetchResponse,
     GrpcEvitaServerStatusResponse,
     GrpcReservedKeywordsResponse,
     GrpcRestoreCatalogRequest,
@@ -54,6 +55,7 @@ import { ServerStatus } from '@/modules/connection/model/status/ServerStatus'
 import { ServerFileConverter } from '@/modules/connection/driver/grpc/service/ServerFileConverter'
 import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import { ServerFile } from '@/modules/connection/model/server-file/ServerFile'
+import { file } from '@babel/types'
 
 //TODO: Add docs and add header 'X-EvitaDB-ClientID': this.getClientIdHeaderValue()
 export class EvitaDBDriverGrpc implements EvitaDBDriver {
@@ -566,6 +568,17 @@ export class EvitaDBDriverGrpc implements EvitaDBDriver {
         return res
     }
 
+    async deleteFile(connection: Connection, fileId: Uuid): Promise<boolean> {
+        const response: GrpcDeleteFileToFetchResponse = await this.clientProvider.getEvitaManagementClient(connection)
+            .deleteFile({
+                fileId: {
+                    leastSignificantBits: fileId.leastSignificantBits,
+                    mostSignificantBits: fileId.mostSignificantBits
+                }
+            })
+        return response.success
+    }
+
     async downloadRecordingEventTypes(connection: Connection):Promise<EventType[]>{
         const result = await ky.get(connection.observabilityUrl + '/getRecordingEventTypes')
         return (await result.json()) as EventType[]
diff --git a/src/modules/connection/explorer/component/CatalogItem.vue b/src/modules/connection/explorer/component/CatalogItem.vue
index 097073e1..f148fd35 100644
--- a/src/modules/connection/explorer/component/CatalogItem.vue
+++ b/src/modules/connection/explorer/component/CatalogItem.vue
@@ -36,10 +36,6 @@ import ReplaceCatalogDialog from '@/modules/connection/explorer/component/Replac
 import CreateCollectionDialog from '@/modules/connection/explorer/component/CreateCollectionDialog.vue'
 import SwitchCatalogToAliveStateDialog
     from '@/modules/connection/explorer/component/SwitchCatalogToAliveStateDialog.vue'
-import {
-    BackupViewerTabFactory,
-    useBackupsTabFactory,
-} from '@/modules/backup-viewer/service/BackupViewerTabFactory'
 import { ItemFlag } from '@/modules/base/model/tree-view/ItemFlag'
 import { EntityCollection } from '@/modules/connection/model/EntityCollection'
 import Immutable from 'immutable'
@@ -50,7 +46,6 @@ const workspaceService: WorkspaceService = useWorkspaceService()
 const evitaQLConsoleTabFactory: EvitaQLConsoleTabFactory = useEvitaQLConsoleTabFactory()
 const graphQLConsoleTabFactory: GraphQLConsoleTabFactory = useGraphQLConsoleTabFactory()
 const schemaViewerTabFactory: SchemaViewerTabFactory = useSchemaViewerTabFactory()
-const backupsService: BackupViewerTabFactory = useBackupsTabFactory()
 const { t } = useI18n()
 
 const props = defineProps<{
@@ -170,25 +165,6 @@ function createActions(): Map<CatalogItemType, MenuItem<CatalogItemType>> {
         )
     )
 
-    actions.set(
-        CatalogItemType.BackupSubheader,
-        new MenuSubheader(t('explorer.catalog.subheader.backup'))
-    )
-
-    actions.set(
-        CatalogItemType.Backups,
-        createMenuAction(
-            CatalogItemType.Backups,
-            'mdi-cloud-download-outline',
-            () => {
-                workspaceService.createTab(
-                    backupsService.createNew(connection, props.catalog.name)
-                )
-            },
-            catalogNotCorrupted && serverWritable
-        )
-    )
-
     actions.set(
         CatalogItemType.ModifySubheader,
         new MenuSubheader(t('explorer.catalog.subheader.modify'))
diff --git a/src/modules/connection/explorer/component/ConnectionItem.vue b/src/modules/connection/explorer/component/ConnectionItem.vue
index 24c18f5a..40d893db 100644
--- a/src/modules/connection/explorer/component/ConnectionItem.vue
+++ b/src/modules/connection/explorer/component/ConnectionItem.vue
@@ -36,6 +36,8 @@ import { ItemFlag } from '@/modules/base/model/tree-view/ItemFlag'
 import Immutable from 'immutable'
 import { ServerStatus } from '@/modules/connection/model/status/ServerStatus'
 import { ApiType } from '@/modules/connection/model/status/ApiType'
+import { CatalogItemType } from '@/modules/connection/explorer/model/CatalogItemType'
+import { BackupViewerTabFactory, useBackupsTabFactory } from '@/modules/backup-viewer/service/BackupViewerTabFactory'
 
 const evitaLabConfig: EvitaLabConfig = useEvitaLabConfig()
 const workspaceService: WorkspaceService = useWorkspaceService()
@@ -44,6 +46,7 @@ const graphQLConsoleTabFactory: GraphQLConsoleTabFactory = useGraphQLConsoleTabF
 const serverStatusTabFactory: ServerStatusTabFactory = useServerStatusTabFactory()
 const taskViewerTabFactory: TaskViewerTabFactory = useTaskViewerTabFactory()
 const jfrViewerTabFactory: JfrViewerTabFactory = useJfrViewerTabFactory()
+const backupsService: BackupViewerTabFactory = useBackupsTabFactory()
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -209,6 +212,7 @@ async function createActions(): Promise<Map<ConnectionItemType, MenuItem<Connect
             serverWritable && observabilityEnabled
         )
     )
+
     actions.set(
         ConnectionItemType.ModifySubheader,
         new MenuSubheader(t('explorer.connection.subheader.modify'))
@@ -247,6 +251,19 @@ async function createActions(): Promise<Map<ConnectionItemType, MenuItem<Connect
             serverWritable
         )
     )
+    actions.set(
+        ConnectionItemType.CatalogBackups,
+        createMenuAction(
+            ConnectionItemType.CatalogBackups,
+            'mdi-cloud-download-outline',
+            () => {
+                workspaceService.createTab(
+                    backupsService.createNew(props.connection)
+                )
+            },
+            serverWritable
+        )
+    )
     return actions
 }
 function createMenuAction(
diff --git a/src/modules/connection/explorer/model/CatalogItemType.ts b/src/modules/connection/explorer/model/CatalogItemType.ts
index 94d36aa5..e0f16f3f 100644
--- a/src/modules/connection/explorer/model/CatalogItemType.ts
+++ b/src/modules/connection/explorer/model/CatalogItemType.ts
@@ -12,7 +12,5 @@ export enum CatalogItemType {
     CollectionsSubheader = 'collectionsSubheader',
     JobsSubheader = 'jobsSubheader',
     CreateCollection = 'createCollection',
-    BackupSubheader = 'backupSubheader',
-    Backups = 'backups',
     Jobs = 'jobs'
 }
diff --git a/src/modules/connection/explorer/model/ConnectionItemType.ts b/src/modules/connection/explorer/model/ConnectionItemType.ts
index bd1f5d72..9f81fc1e 100644
--- a/src/modules/connection/explorer/model/ConnectionItemType.ts
+++ b/src/modules/connection/explorer/model/ConnectionItemType.ts
@@ -9,5 +9,6 @@ export enum ConnectionItemType {
     JfrRecordings = 'jfrRecordings',
     ModifySubheader = 'modifySubheader',
     CatalogsSubheader = 'catalogsSubheader',
-    CreateCatalog = 'createCatalog'
+    CreateCatalog = 'createCatalog',
+    CatalogBackups = 'catalogBackups'
 }
diff --git a/src/modules/i18n/en.json b/src/modules/i18n/en.json
index 0c5da85b..0ccb733e 100644
--- a/src/modules/i18n/en.json
+++ b/src/modules/i18n/en.json
@@ -19,6 +19,7 @@
       "add": "Add",
       "create": "Create",
       "drop": "Drop",
+      "delete": "Delete",
       "executeQuery": "Execute query",
       "showMore": "Show more",
       "copy": "Copy",
@@ -270,6 +271,7 @@
         "remove": "Remove connection",
         "detail": "Status",
         "createCatalog": "Create catalog",
+        "catalogBackups": "Catalog backups",
         "tasks": "Tasks",
         "jfrRecordings": "JFR recordings"
       },
@@ -331,8 +333,7 @@
       },
       "subheader": {
         "modify": "Modify",
-        "collections": "Collections",
-        "backup": "Backup"
+        "collections": "Collections"
       },
       "actions": {
         "openEvitaQLConsole": "evitaQL console",
@@ -343,8 +344,7 @@
         "renameCatalog": "Rename catalog",
         "replaceCatalog": "Replace catalog",
         "createCollection": "Create collection",
-        "switchCatalogToAliveState": "Switch catalog to alive state",
-        "backups": "Backups"
+        "switchCatalogToAliveState": "Switch catalog to alive state"
       },
       "errors": {
         "couldNotLoad": "This catalog couldn't be loaded because it's corrupted."
@@ -937,6 +937,7 @@
     }
   },
   "backupViewer": {
+    "title": "Catalog backups",
     "button": {
       "reloadBackups": "Reload backups",
       "backupCatalog": "Backup catalog"
@@ -945,17 +946,35 @@
       "title": "Backups in preparation"
     },
     "list": {
-      "title": "Finished backups"
+      "title": "Available backups",
+      "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}"
+        }
+      }
     },
     "notification": {
       "couldNotLoadBackupFiles": "Could not load backup files: {reason}",
       "couldNotDownloadBackupFile": "Could not download backup file {fileName}: {reason}"
     },
     "backup": {
-      "title": "Backup {catalogName} catalog",
+      "title": "Backup catalog",
       "description": "Request a new backup for the catalog:",
       "info": "The back up process may take a while. Therefore it will be started asynchronously. You can find it’s progress and backup file to download in task listing.",
       "form": {
+        "catalogName": {
+          "label": "Catalog to backup",
+          "validations": {
+            "required": "Catalog to backup is required.",
+            "notExists": "Selected catalog doesn't exist anymore."
+          }
+        },
         "pastMoment": {
           "label": "Past moment"
         },
@@ -968,6 +987,8 @@
         "backup": "Backup"
       },
       "notification": {
+        "couldNotLoadAvailableCatalogs": "Could not load available catalogs: {reason}",
+        "couldNotLoadMinimalDate": "Could not load available moments: {reason}",
         "backupRequested": "A backup for the {catalogName} catalog requested.",
         "couldNotRequestBackup": "Could not request a backup for the {catalogName} catalog: {reason}"
       }
@@ -996,6 +1017,15 @@
         "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": {
diff --git a/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue b/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue
index e8a1bc1f..9b6782c4 100644
--- a/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue
+++ b/src/modules/jfr-viewer/components/EndJfrRecordingDialog.vue
@@ -14,7 +14,8 @@ const props = defineProps<{
     connection: Connection
 }>()
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void
+    (e: 'update:modelValue', value: boolean): void,
+    (e: 'end'): void
 }>()
 
 async function stopRecording(): Promise<boolean> {
@@ -23,6 +24,7 @@ async function stopRecording(): Promise<boolean> {
         const stopped: boolean = await jfrViewerService.stopRecording(props.connection)
         if (stopped) {
             toaster.success(t('jfrViewer.stopRecording.notification.recordingStopped'))
+            emit('end')
         } else {
             toaster.info(t('jfrViewer.stopRecording.notification.recordingNotStopped'))
         }
diff --git a/src/modules/jfr-viewer/components/JfrViewer.vue b/src/modules/jfr-viewer/components/JfrViewer.vue
index 7ae79b50..f6955e9d 100644
--- a/src/modules/jfr-viewer/components/JfrViewer.vue
+++ b/src/modules/jfr-viewer/components/JfrViewer.vue
@@ -59,6 +59,8 @@ 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')
@@ -69,6 +71,10 @@ async function loadJfrRecordings() {
     jfrRecordingsLoaded.value = true
 }
 
+async function jfrRecordingEnded(): Promise<void> {
+    taskListRef.value?.reload(true)
+}
+
 async function downloadRecording(file: ServerFile) {
     try {
         const blob = await jfrViewerService.downloadFile(props.params.connection, file.fileId)
@@ -104,6 +110,7 @@ async function downloadRecording(file: ServerFile) {
 
         <div>
             <TaskList
+                ref="taskListRef"
                 v-show="runningRecordingsPresent"
                 :connection="params.connection"
                 :subheader="t('jfrViewer.tasks.title')"
@@ -196,6 +203,7 @@ async function downloadRecording(file: ServerFile) {
             v-if="showEndRecordingDialog"
             v-model="showEndRecordingDialog"
             :connection="params.connection"
+            @end="jfrRecordingEnded"
         />
     </div>
 </template>
diff --git a/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue b/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
index 9fcc7db9..472f3d35 100644
--- a/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
+++ b/src/modules/task-viewer/components/DownloadTaskFileResultButton.vue
@@ -28,7 +28,6 @@ function onCouldNotDownloadResultFile(e: Error): void {
 
 <template>
     <VDownloadServerFileButton
-
         :connection="connection"
         :file="(task.result as FileTaskResult).value"
         @error="onCouldNotDownloadResultFile($event)"
diff --git a/src/modules/task-viewer/components/TaskList.vue b/src/modules/task-viewer/components/TaskList.vue
index 4bd28311..4b2b609f 100644
--- a/src/modules/task-viewer/components/TaskList.vue
+++ b/src/modules/task-viewer/components/TaskList.vue
@@ -110,8 +110,14 @@ async function reload(manual: boolean = false): Promise<void> {
 
     const loaded: boolean = await loadTaskStatuses()
     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, 2000)
+        }
         canReload = true
-        reloadTimeoutId = setTimeout(reload, 2000)
     } else {
         // we don't want to spam user server is down, user needs to refresh manually
         canReload = false
@@ -165,7 +171,6 @@ defineExpose<{
                 />
             </template>
         </VDataIterator>
-
     </VList>
 
     <VMissingDataIndicator
diff --git a/src/modules/task-viewer/components/TaskViewer.vue b/src/modules/task-viewer/components/TaskViewer.vue
index 260a7219..c1193067 100644
--- a/src/modules/task-viewer/components/TaskViewer.vue
+++ b/src/modules/task-viewer/components/TaskViewer.vue
@@ -18,8 +18,11 @@ const path: List<string> = List([t('taskViewer.path')])
 
 const taskListRef = ref<typeof TaskList>()
 
+const reloadingTasks = ref<boolean>(false)
 function reloadTasks(): void {
+    reloadingTasks.value = true
     taskListRef.value?.reload(true)
+    reloadingTasks.value = false
 }
 
 emit('ready')
@@ -29,7 +32,7 @@ emit('ready')
     <div class="task-viewer">
         <VTabToolbar :prepend-icon="'mdi-chart-gantt'" :path="path">
             <template #append>
-                <VBtn icon @click="reloadTasks">
+                <VBtn icon :loading="reloadingTasks" @click="reloadTasks">
                     <VIcon>mdi-refresh</VIcon>
                     <VTooltip activator="parent">
                         {{ t('taskViewer.tasksVisualizer.button.reload') }}
@@ -38,17 +41,24 @@ emit('ready')
             </template>
         </VTabToolbar>
 
-        <TaskList ref="taskListRef" :connection="props.params.connection" />
+        <VSheet class="task-viewer__body">
+            <TaskList ref="taskListRef" :connection="props.params.connection" />
+        </VSheet>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .task-viewer {
     display: grid;
     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/utils/number.ts b/src/utils/number.ts
new file mode 100644
index 00000000..6da3054f
--- /dev/null
+++ b/src/utils/number.ts
@@ -0,0 +1,4 @@
+export function round(n: number, decimalPlaces: number): number {
+    const multiplier: number = Math.pow(10, decimalPlaces)
+    return Math.round(n * multiplier) / multiplier
+}
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 89f3f11d..08d90079 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -3,6 +3,24 @@ import Immutable from 'immutable'
 const stringWithCaseWordSplittingPattern: RegExp = /([^\s\-_A-Z]+)|([A-Z]+[^\s\-_A-Z]*)/g
 const unsupportedCharactersForWordSplittingPattern: RegExp = /[.:+\-@/\\|`~]/g
 
+/**
+ * The number of bytes in a kilobyte.
+ */
+const oneKB: number = 1024
+/**
+ * The number of bytes in a megabyte.
+ */
+const oneMB: number = oneKB * oneKB
+/**
+ * The number of bytes in a gigabyte.
+ */
+const oneGB: number = oneKB * oneMB
+
+const sizeFormatter: Intl.NumberFormat = new Intl.NumberFormat(
+    navigator.language,
+    { maximumFractionDigits: 2 }
+)
+
 /**
  * Splits string into words.
  * @param s input string to split
@@ -22,3 +40,15 @@ export function splitStringWithCaseIntoWords(s?: string): Immutable.List<string>
     }
     return Immutable.List(words)
 }
+
+export function formatByteSize(sizeInBytes: number): string {
+    if (Math.floor(sizeInBytes / oneGB) > 0) {
+        return `${sizeFormatter.format(sizeInBytes / oneGB)} GB`
+    } else if (Math.floor(sizeInBytes / oneMB) > 0) {
+        return `${sizeFormatter.format(sizeInBytes / oneMB)} MB`
+    } else if (Math.floor(sizeInBytes / oneKB) > 0) {
+        return `${sizeFormatter.format(sizeInBytes / oneKB)} KB`
+    } else {
+        return `${sizeFormatter.format(sizeInBytes)} B`
+    }
+}
diff --git a/test/utils/number.test.ts b/test/utils/number.test.ts
new file mode 100644
index 00000000..84aa8593
--- /dev/null
+++ b/test/utils/number.test.ts
@@ -0,0 +1,8 @@
+import { test, expect } from 'vitest'
+import { round } from '../../src/utils/number'
+
+test('Should round to specific decimal places', () => {
+    expect(round(12.12543, 0)).toEqual(12)
+    expect(round(12.12543, 5)).toEqual(12.12543)
+    expect(round(12.12543, 2)).toEqual(12.13)
+})