feat(#117): refactor and polish jfr viewer

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,17 +82,17 @@ 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 {
         // we don't want to spam user server is down, user needs to refresh manually
         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

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>

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)

src/modules/base/component/VFormDialog.vue

@@ -68,6 +68,8 @@ async function confirm(): Promise<void> {
         }
         emit('update:modelValue', false)
     }
+
+    props.reset()
 }
 </script>
 

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"

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)
 

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}"
+      }
+    }
   }
 }

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>