bfg-common 1.5.417 → 1.5.419

package/components/common/modals/confirmation/ConfirmationNew.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
     isLoading?: boolean
   }>(),
   {
-    isLoading: boolean,
+    isLoading: false,
   }
 )
 const emits = defineEmits<{

package/components/common/pages/backups/Backups.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="main-content-backups h-full overflow-hidden">
+    <common-pages-backups-tools
+      :project="props.project"
+      :backups-count="backupsTree.length"
+      :backups-loading="backupsLoading"
+      :selected-node="selectedNode"
+      :target-type="typeFromRoute"
+      @select="onShowModal"
+    />
+
+    <atoms-loader-pre-loader
+      v-show="backupsLoading"
+      id="loader"
+      :show="true"
+      class="backups-loading w-full h-full flex items-center justify-center"
+      test-id="backups-tree-spinner"
+    />
+    <div class="fill-parent w-full h-full">
+      <div v-if="backupsTree.length" class="backup-view mt-1 flex w-full">
+        <common-tree-view
+          :loading="backupsLoading"
+          :nodes="backupsTree"
+          @select-node="onSelectNode"
+          @show-nodes="onShowNodes"
+        />
+        <common-pages-backups-detail-view :detail="detailData" />
+      </div>
+      <div v-else class="empty-block flex justify-center items-center w-full">
+        {{ localization.common.noBackupAvailable }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_T_TargetType,
+  UI_T_BackupActionType,
+} from '~/components/common/pages/backups/lib/models/types'
+import type {
+  UI_I_Backup,
+  UI_I_BackupsTreeNode,
+} from '~/components/common/pages/backups/lib/models/interfaces'
+
+const props = defineProps<{
+  project: UI_T_Project
+  backups: UI_I_Backup[]
+  backupsTree: UI_I_BackupsTreeNode[]
+  backupsLoading: boolean
+  selectedNode: UI_I_BackupsTreeNode
+}>()
+const emits = defineEmits<{
+  (event: 'select-node', value: string | number): void
+  (event: 'show-nodes', value: string | number): void
+  (event: 'set-action', value: UI_T_BackupActionType): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $recursion }: any = useNuxtApp()
+
+const typeFromRoute = computed<UI_T_TargetType>(
+  () => useRoute().params.type.toString() as UI_T_TargetType
+)
+
+const detailData = computed<UI_I_BackupsTreeNode | null>(() => {
+  const node =
+    $recursion.find(props.backupsTree, true, 'isActive', 'nodes') || null
+  return node?.type === 'backup' ? node : null
+})
+
+const onSelectNode = (item: UI_I_BackupsTreeNode): void => {
+  emits('select-node', item.id)
+  if (item.type === 'group') {
+    onShowNodes(item.id.toString())
+  }
+}
+const onShowNodes = (id: string | number): void => {
+  emits('show-nodes', id)
+}
+
+const onShowModal = (action: UI_T_BackupActionType): void => {
+  emits('set-action', action)
+}
+</script>
+
+<style scoped lang="scss">
+.main-content-backups {
+  padding: 10px 5px 10px 0;
+
+  .fill-parent {
+    overflow: visible;
+
+    .backup-view {
+      // TODO fix
+      height: calc(90% - 24px);
+    }
+  }
+}
+</style>

package/components/common/pages/backups/DetailView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="detail-view overflow-auto py-0 px-6">
+    <table v-if="detailData" class="table table-noborder">
+      <tbody>
+        <tr>
+          <td class="left">{{ localization.common.name }}</td>
+          <td class="left backup-name-label">{{ detailData.name }}</td>
+        </tr>
+        <tr>
+          <td class="left">{{ localization.common.description }}</td>
+          <td class="left backup-name-label">{{ detailData.description }}</td>
+        </tr>
+        <tr>
+          <td class="left">{{ localization.common.timestamp }}</td>
+          <td class="left backup-name-label">{{ detailData.timestamp }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_BackupsTreeNode } from '~/components/common/pages/backups/lib/models/interfaces'
+
+const props = defineProps<{
+  detail: UI_I_BackupsTreeNode | null
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const detailData = ref<UI_I_BackupsTreeNode | null>(null)
+watch(
+  () => props.detail,
+  (newValue) => {
+    detailData.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.detail-view {
+  width: 50%;
+
+  .table {
+    .left:not(.backup-name-label) {
+      width: 320px;
+    }
+  }
+}
+</style>

package/components/common/pages/backups/lib/models/interfaces.ts

@@ -0,0 +1,24 @@
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface API_UI_I_Backup {
+  creation_time: number
+  creation_type: number
+  description: string
+  kind: number // TODO
+  msg: string
+  name: string
+  state: number // TODO
+  uuid: string
+  vm_name: string
+  vmid: string
+  storage_id: string
+  storage_name: string
+}
+
+export interface UI_I_Backup extends API_UI_I_Backup {}
+
+export interface UI_I_BackupsTreeNode extends UI_I_TreeNode<UI_I_BackupsTreeNode> {
+  parent_id: string
+  timestamp: string
+  description: string
+}

package/components/common/pages/backups/lib/models/types.ts

@@ -0,0 +1,7 @@
+export type UI_T_TargetType = 'vm' | 'bucket'
+
+export type UI_T_BackupActionType =
+  | 'createBackup'
+  | 'restore'
+  | 'delete'
+  | 'deleteAll'

package/components/common/pages/backups/modals/Modals.vue

@@ -0,0 +1,229 @@
+<template>
+  <common-pages-backups-modals-create-backup
+    v-if="isShowCreateBackupModal.isShow"
+    v-model="backupForm"
+    v-model:scheduler-form="schedulerTaskForm"
+    :is-scheduled-tasks="isShowCreateBackupModal.scheduler.isSchedulerTask"
+    :is-edit-scheduled-tasks="isShowCreateBackupModal.scheduler.editTask"
+    :target="props.target"
+    :selected-vm-name="props.selectedVmName"
+    :disks="props.disks"
+    :disks-loading="props.disksLoading"
+    :datastore-table="props.datastoreTable"
+    :datastore-table-loading="props.datastoreTableLoading"
+    @change-step-create-backup="onChangeStepCreateBackup"
+    @finish="onCreateBackup"
+    @hide="onHide"
+  />
+
+  <common-pages-backups-modals-restore
+    v-if="isShowRestoreModal"
+    v-model="restoreForm"
+    :datastore="props.restoreDatastore"
+    :datastore-loading="props.isRestoreDatastoreLoading"
+    :networks="props.restoreNetworks"
+    @get-datastore="onGetRestoreDatastore"
+    @get-networks="onGetRestoreNetworks"
+    @check-name="onCheckRestoreName"
+    @finish="onRestore"
+    @hide="onHide"
+  />
+
+  <common-pages-backups-modals-delete-backup
+    v-if="isShowDeleteBackupModal"
+    :name="action.name"
+    :is-loading="isLoadingDeleteBackup"
+    @remove="onDeleteBackup"
+    @hide="onHide"
+  />
+  <common-pages-backups-modals-delete-backup
+    v-if="isShowDeleteAllBackupsModal"
+    is-all
+    :is-loading="isLoadingDeleteBackup"
+    @remove="onDeleteBackup"
+    @hide="onHide"
+  />
+</template>
+
+<script lang="ts" setup>
+import { sendTask } from '~/lib/utils/sendTask'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_SendTaskParams } from '~/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type {
+  UI_I_CreateBackupForm,
+  UI_I_CreateBackupFormDiskDevice,
+  UI_I_RestoreForm,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
+import { scheduledTaskDefaultFormFunc } from '~/components/common/pages/scheduledTasks/modals/lib/config/createScheduledTask'
+import { backupDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/createBackup'
+import { restoreDefaultFormFunc } from '~/components/common/pages/backups/modals/lib/config/restore'
+import { scheduledTasks } from '~/components/common/pages/scheduledTasks/lib/utils/utils'
+
+const action = defineModel<I_ActionPayload>('action', { required: true })
+
+const props = defineProps<{
+  project: UI_T_Project
+  target: string
+  selectedVmName: string
+  disks: UI_I_CreateBackupFormDiskDevice[]
+  disksLoading: boolean
+  datastoreTable: any // ??
+  datastoreTableLoading: boolean
+  restoreDatastore: UI_I_DatastoreTableItem[]
+  isRestoreDatastoreLoading: boolean
+  restoreNetworks: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
+  (event: 'get-restore-datastore', value: string): void
+  (event: 'get-restore-networks', value: string): void
+  (event: 'check-restore-name', value: any): void // ??
+  (event: 'delete-backup', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const idFromRoute = useRoute().params.id?.toString() || ''
+
+const backupForm = ref<UI_I_CreateBackupForm>(
+  useDeepCopy(backupDefaultFormFunc())
+)
+backupForm.value.target = props.target
+
+const schedulerTaskForm = ref<UI_I_ScheduleNewTasksForm>(
+  useDeepCopy(scheduledTaskDefaultFormFunc())
+)
+
+const restoreForm = ref<UI_I_RestoreForm>(useDeepCopy(restoreDefaultFormFunc()))
+const deleteBackupId = ref<string>('')
+
+// TODO
+const isShowCreateBackupModal = computed<any>( // ??
+  () => $store.getters['backup/getCreateBackupModal']
+)
+const isShowDeleteBackupModal = ref<boolean>(false)
+const isShowDeleteAllBackupsModal = ref<boolean>(false)
+const isLoadingDeleteBackup = ref<boolean>(false)
+const isShowRestoreModal = ref<boolean>(false)
+
+const onCreateBackup = (): void => {
+  const backupTask: UI_I_SendTaskParams = {
+    method:
+      props.project === 'sphere'
+        ? 'VirtualMachines.CreateBackup'
+        : 'backup.create_backup',
+    target: idFromRoute,
+    args: backupForm.value,
+  }
+
+  const {
+    scheduler: { isSchedulerTask, editTask, data },
+  } = isShowCreateBackupModal.value
+  const sendData = isSchedulerTask
+    ? scheduledTasks(
+        schedulerTaskForm.value,
+        backupTask,
+        idFromRoute,
+        editTask,
+        data,
+        props.project
+      )
+    : backupTask
+
+  sendTask(sendData)
+  onHide()
+}
+
+const onDeleteBackup = async (isAll: boolean): Promise<void> => {
+  isLoadingDeleteBackup.value = true
+  emits('delete-backup', isAll)
+  isLoadingDeleteBackup.value = false
+  onHide()
+}
+
+const onRestore = (): void => {
+  sendTask({
+    args: restoreForm.value,
+    method:
+      props.project === 'sphere'
+        ? 'VirtualMachines.RestoreBackup'
+        : 'backup.restore_backup',
+    target: props.target,
+  })
+  onHide()
+}
+
+watch(
+  action,
+  (newValue) => {
+    switch (newValue.action) {
+      case 'createBackup':
+        // TODO
+        $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
+          isShow: true,
+          scheduler: {
+            isSchedulerTask: false,
+            editTask: false,
+            data: null,
+          },
+        })
+        break
+      case 'restore':
+        isShowRestoreModal.value = true
+        restoreForm.value.backup_storage = newValue.storageId || ''
+        restoreForm.value.bucket = newValue.bucketId || ''
+        restoreForm.value.backup = newValue.backupId || ''
+        break
+      case 'deleteBackup':
+        deleteBackupId.value = newValue.backupId || ''
+        isShowDeleteBackupModal.value = true
+        break
+      case 'deleteAll':
+        isShowDeleteAllBackupsModal.value = true
+        break
+    }
+  },
+  { deep: true }
+)
+
+const onHide = (): void => {
+  // TODO
+  $store.dispatch('backup/A_SHOW_CREATE_BACKUP_MODAL', {
+    isShow: false,
+    scheduler: {
+      isSchedulerTask: false,
+      editTask: false,
+      data: null,
+    },
+  })
+  isShowRestoreModal.value = false
+  isShowDeleteBackupModal.value = false
+  isShowDeleteAllBackupsModal.value = false
+
+  action.value.action = ''
+  backupForm.value = useDeepCopy(backupDefaultFormFunc())
+  backupForm.value.target = props.target
+  restoreForm.value = useDeepCopy(restoreDefaultFormFunc())
+}
+
+const onChangeStepCreateBackup = (value: UI_I_WizardStep[]): void => {
+  emits('change-step-create-backup', value)
+}
+
+const onGetRestoreDatastore = (bucket: string): void => {
+  emits('get-restore-datastore', bucket)
+}
+const onGetRestoreNetworks = (hostId: string): void => {
+  emits('get-restore-networks', hostId)
+}
+const onCheckRestoreName = (data: any): void => {
+  // ??
+  emits('check-restore-name', data)
+}
+</script>
+
+<style lang="scss" scoped></style>