bfg-common 1.5.755 → 1.5.756
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/localization/local_be.json +4 -4
- package/assets/localization/local_en.json +4 -4
- package/assets/localization/local_hy.json +4 -4
- package/assets/localization/local_kk.json +4 -4
- package/assets/localization/local_ru.json +4 -4
- package/assets/localization/local_zh.json +4 -4
- package/components/atoms/table/dataGrid/DataGrid.vue +8 -8
- package/components/common/pages/backups/backupsNew/BackupsNew.vue +444 -448
- package/components/common/pages/backups/backupsNew/Skeleton.vue +26 -2
- package/components/common/pages/backups/modals/deleteBackup/DeleteBackup.vue +1 -0
- package/components/common/vm/snapshots/new/New.vue +8 -12
- package/components/common/vm/snapshots/new/Skeleton.vue +26 -2
- package/package.json +1 -1
|
@@ -2816,8 +2816,8 @@
|
|
|
2816
2816
|
"emptySessionName": "Імя сеансу не можа быць пустым. Увядзіце сапраўднае імя сеансу.",
|
|
2817
2817
|
"shortSessionName": "Назва сеансу павінна ўтрымліваць больш за пяць знакаў. Увядзіце дапушчальную назву сеансу.",
|
|
2818
2818
|
"invalidSessionName": "Няправільнае назва сеансу. Увядзіце дапушчальную назву сеансу з літарамі, лічбамі, _, - і прабеламі.",
|
|
2819
|
-
"invalidSamplingRate": "Вы ўвялі няслушную частату дыскрэтызацыі. Увядзіце значэнне ад
|
|
2820
|
-
"invalidMirroredPacketLength": "Вы ўвялі няслушную даўжыню люстрана адлюстраванага пакета. Увядзіце значэнне ад
|
|
2819
|
+
"invalidSamplingRate": "Вы ўвялі няслушную частату дыскрэтызацыі. Увядзіце значэнне ад 1 да 9000.",
|
|
2820
|
+
"invalidMirroredPacketLength": "Вы ўвялі няслушную даўжыню люстрана адлюстраванага пакета. Увядзіце значэнне ад 14 да 65535.",
|
|
2821
2821
|
"existsSessionName": "Сеанс з такім імем ужо існуе. Увядзіце унікальнае імя сеансу.",
|
|
2822
2822
|
"removePortMirroringSession": "Выдаліць сеанс люстранога адлюстравання порта {name}?",
|
|
2823
2823
|
"editPortMirroringSession": "Рэдагаваць сеанс люстранога адлюстравання порта",
|
|
@@ -3610,9 +3610,9 @@
|
|
|
3610
3610
|
"serverPlaceholder": "Напрыклад: nas, nas.it.com або 192.168.0.1",
|
|
3611
3611
|
"storageReview": "Перагледзьце падрабязнасці перад стварэннем рэзервовага сховішча.",
|
|
3612
3612
|
"backupStorageName": "Назва рэзервовага сховішча",
|
|
3613
|
-
"deleteBackupConfirmation": "
|
|
3613
|
+
"deleteBackupConfirmation": "Выдалення рэзервовай копіі",
|
|
3614
3614
|
"deleteBackupConfirmationDesc": "Вы ўпэўненыя, што хочаце выдаліць рэзервовую копію «{0}»?",
|
|
3615
|
-
"deleteAllBackupsConfirmation": "
|
|
3615
|
+
"deleteAllBackupsConfirmation": "Выдалення усіх рэзервовых копій",
|
|
3616
3616
|
"deleteAllBackupsConfirmationDesc": "Вы ўпэўненыя, што хочаце выдаліць усе рэзервовыя копіі?",
|
|
3617
3617
|
"backupCreationReview": "Перад стварэннем рэзервовага капіявання праглядзіце падрабязнасці.",
|
|
3618
3618
|
"restoreBackupReviewSubtitle": "Праверце падрабязнасці перад аднаўленнем існуючай віртуальнай машыны з рэзервовай копіі.",
|
|
@@ -2820,8 +2820,8 @@
|
|
|
2820
2820
|
"emptySessionName": "Session name cannot be empty. Enter a valid session name.",
|
|
2821
2821
|
"shortSessionName": "Session name must contain more than five characters. Enter a valid session name.",
|
|
2822
2822
|
"invalidSessionName": "Session name is invalid. Enter a valid session name with letters, numbers, _, - and spaces.",
|
|
2823
|
-
"invalidSamplingRate": "You have entered an invalid sampling rate. Enter a value between
|
|
2824
|
-
"invalidMirroredPacketLength": "You have entered an invalid mirrored packet length. Enter a value between
|
|
2823
|
+
"invalidSamplingRate": "You have entered an invalid sampling rate. Enter a value between 1 and 9000.",
|
|
2824
|
+
"invalidMirroredPacketLength": "You have entered an invalid mirrored packet length. Enter a value between 14 and 65535.",
|
|
2825
2825
|
"existsSessionName": "A session with this name already exists. Enter a unique session name.",
|
|
2826
2826
|
"removePortMirroringSession": "Remove port mirroring session {name}?",
|
|
2827
2827
|
"editPortMirroringSession": "Edit Port Mirroring Session",
|
|
@@ -3614,9 +3614,9 @@
|
|
|
3614
3614
|
"serverPlaceholder": "E.g: nas, nas.it.com or 192.168.0.1",
|
|
3615
3615
|
"storageReview": "Review the details before the backup storage is created.",
|
|
3616
3616
|
"backupStorageName": "Backup Storage Name",
|
|
3617
|
-
"deleteBackupConfirmation": "Delete Backup
|
|
3617
|
+
"deleteBackupConfirmation": "Delete Backup",
|
|
3618
3618
|
"deleteBackupConfirmationDesc": "Are you sure you want to delete backup “{0}”?",
|
|
3619
|
-
"deleteAllBackupsConfirmation": "Delete All Backups
|
|
3619
|
+
"deleteAllBackupsConfirmation": "Delete All Backups",
|
|
3620
3620
|
"deleteAllBackupsConfirmationDesc": "Are you sure you want to delete all backups?",
|
|
3621
3621
|
"backupCreationReview": "Review the details before the backup storage is created.",
|
|
3622
3622
|
"restoreBackupReviewSubtitle": "Review the details before the existing virtual machine is restored from backup.",
|
|
@@ -2820,8 +2820,8 @@
|
|
|
2820
2820
|
"emptySessionName": "Սեանսի անունը չի կարող դատարկ լինել: Մուտքագրեք սեանսի վավեր անուն:",
|
|
2821
2821
|
"shortSessionName": "Սեանսի անունը պետք է պարունակի ավելի քան հինգ նիշ: Մուտքագրեք սեանսի վավեր անուն:",
|
|
2822
2822
|
"invalidSessionName": "Սեանսի սխալ անուն: Մուտքագրեք սեանսի վավեր անվանումը տառերով, թվերով, _, - և բացատներով:",
|
|
2823
|
-
"invalidSamplingRate": "Դուք սխալ նմուշառման արագություն եք մուտքագրել: Մուտքագրեք արժեքը
|
|
2824
|
-
"invalidMirroredPacketLength": "Դուք մուտքագրել եք հայելային փաթեթի սխալ երկարություն: Մուտքագրեք արժեքը
|
|
2823
|
+
"invalidSamplingRate": "Դուք սխալ նմուշառման արագություն եք մուտքագրել: Մուտքագրեք արժեքը 1-ից 9000-ի սահմաններում:",
|
|
2824
|
+
"invalidMirroredPacketLength": "Դուք մուտքագրել եք հայելային փաթեթի սխալ երկարություն: Մուտքագրեք արժեքը 14-ից 65535-ի սահմաններում:",
|
|
2825
2825
|
"existsSessionName": "Այս անունով սեանս արդեն գոյություն ունի: Մուտքագրեք սեանսի եզակի անուն:",
|
|
2826
2826
|
"removePortMirroringSession": "Ջնջե՞լ {name} պորտերի հայելային ցուցադրման սեանսը։",
|
|
2827
2827
|
"editPortMirroringSession": "Խմբագրել պորտերի հայելային ցուցադրման սեանսը",
|
|
@@ -3614,9 +3614,9 @@
|
|
|
3614
3614
|
"serverPlaceholder": "Օրինակ՝ nas, nas.it.com կամ 192.168.0.1",
|
|
3615
3615
|
"storageReview": "Մինչ պահուստային պահեստի ստեղծումը, վերանայեք մանրամասները։",
|
|
3616
3616
|
"backupStorageName": "Պահուստային պահեստի անունը",
|
|
3617
|
-
"deleteBackupConfirmation": "Ջնջել պահուստային
|
|
3617
|
+
"deleteBackupConfirmation": "Ջնջել պահուստային պատճեն",
|
|
3618
3618
|
"deleteBackupConfirmationDesc": "Համոզվա՞ծ եք, որ ուզում եք ջնջել «{0}» պահուստային պատճենը?",
|
|
3619
|
-
"deleteAllBackupsConfirmation": "Ջնջել բոլոր պահուստային
|
|
3619
|
+
"deleteAllBackupsConfirmation": "Ջնջել բոլոր պահուստային պատճենները",
|
|
3620
3620
|
"deleteAllBackupsConfirmationDesc": "Համոզվա՞ծ եք, որ ուզում եք ջնջել բոլոր պահուստային պատճենները?",
|
|
3621
3621
|
"backupCreationReview": "Վերանայեք մանրամասները, նախքան պահուստային պահեստ ստեղծելը։",
|
|
3622
3622
|
"restoreBackupReviewSubtitle": "Նախքան առկա վիրտուալ մեքենայի պահուստային պատճենից վերականգնումը, վերանայեք մանրամասները։",
|
|
@@ -2819,8 +2819,8 @@
|
|
|
2819
2819
|
"emptySessionName": "Сеанс атауы бос болуы мүмкін емес. Жарамды сеанс атауын енгізіңіз.",
|
|
2820
2820
|
"shortSessionName": "Сеанс атауы бес таңбадан артық болуы керек. Жарамды сеанс атауын енгізіңіз.",
|
|
2821
2821
|
"invalidSessionName": "Сеанс атауы жарамсыз. Жарамды сеанс атауын әріптермен, сандармен, _, - және бос орындармен енгізіңіз.",
|
|
2822
|
-
"invalidSamplingRate": "Сіз жарамсыз іріктеу мөлшерлемесін енгіздіңіз.
|
|
2823
|
-
"invalidMirroredPacketLength": "Сіз жарамсыз айна пакетінің ұзындығын енгіздіңіз.
|
|
2822
|
+
"invalidSamplingRate": "Сіз жарамсыз іріктеу мөлшерлемесін енгіздіңіз. 1 пен 9000 арасындағы мәнді енгізіңіз.",
|
|
2823
|
+
"invalidMirroredPacketLength": "Сіз жарамсыз айна пакетінің ұзындығын енгіздіңіз. 14 пен 65535 арасындағы мәнді енгізіңіз.",
|
|
2824
2824
|
"existsSessionName": "Мұндай атаумен сеанс бұрыннан бар. Бірегей сеанс атауын енгізіңіз.",
|
|
2825
2825
|
"removePortMirroringSession": "Портты шағылыстыру сеансын жою {name}?",
|
|
2826
2826
|
"editPortMirroringSession": "Портты Көрсету Сеансын Өңдеу",
|
|
@@ -3613,9 +3613,9 @@
|
|
|
3613
3613
|
"serverPlaceholder": "Мысалы: nas, nas.it.com немесе 192.168.0.1",
|
|
3614
3614
|
"storageReview": "Резервтік сақтау орнын жасамас бұрын мәліметтерді қарап шығыңыз.",
|
|
3615
3615
|
"backupStorageName": "Резервтік сақтау атауы",
|
|
3616
|
-
"deleteBackupConfirmation": "Сақтық көшірмені
|
|
3616
|
+
"deleteBackupConfirmation": "Сақтық көшірмені жою",
|
|
3617
3617
|
"deleteBackupConfirmationDesc": "{0}» сақтық көшірмесін шынымен жойғыңыз келе ме?",
|
|
3618
|
-
"deleteAllBackupsConfirmation": "Барлық сақтық көшірмелерді
|
|
3618
|
+
"deleteAllBackupsConfirmation": "Барлық сақтық көшірмелерді жойыңыз",
|
|
3619
3619
|
"deleteAllBackupsConfirmationDesc": "Барлық сақтық көшірмелерді жойғыңыз келетініне сенімдісіз бе?",
|
|
3620
3620
|
"backupCreationReview": "Сақтық көшірме қоймасын жасамас бұрын мәліметтерді қарап шығыңыз.",
|
|
3621
3621
|
"restoreBackupReviewSubtitle": "Бар виртуалды машина сақтық көшірмеден қалпына келтірілмес бұрын мәліметтерді қарап шығыңыз.",
|
|
@@ -2819,8 +2819,8 @@
|
|
|
2819
2819
|
"emptySessionName": "Имя сеанса не может быть пустым. Введите действительное имя сеанса.",
|
|
2820
2820
|
"shortSessionName": "Название сеанса должно содержать более пяти символов. Введите допустимое название сеанса.",
|
|
2821
2821
|
"invalidSessionName": "Неверное название сеанса. Введите допустимое название сеанса с буквами, цифрами, _, - и пробелами.",
|
|
2822
|
-
"invalidSamplingRate": "Вы ввели неверную частоту дискретизации. Введите значение от
|
|
2823
|
-
"invalidMirroredPacketLength": "Вы ввели неверную длину зеркально отображенного пакета. Введите значение от
|
|
2822
|
+
"invalidSamplingRate": "Вы ввели неверную частоту дискретизации. Введите значение от 1 до 9000.",
|
|
2823
|
+
"invalidMirroredPacketLength": "Вы ввели неверную длину зеркально отображенного пакета. Введите значение от 14 до 65535.",
|
|
2824
2824
|
"existsSessionName": "Сеанс с таким именем уже существует. Введите уникальное имя сеанса.",
|
|
2825
2825
|
"removePortMirroringSession": "Удалить сеанс зеркального отображения порта {name}?",
|
|
2826
2826
|
"editPortMirroringSession": "Редактировать сеанс зеркального отображения порта",
|
|
@@ -3613,9 +3613,9 @@
|
|
|
3613
3613
|
"serverPlaceholder": "Например: nas, nas.it.com или 192.168.0.1",
|
|
3614
3614
|
"storageReview": "Просмотрите информацию перед созданием хранилища резервных копий.",
|
|
3615
3615
|
"backupStorageName": "Имя хранилища резервных копий",
|
|
3616
|
-
"deleteBackupConfirmation": "
|
|
3616
|
+
"deleteBackupConfirmation": "Удалить резервную копию",
|
|
3617
3617
|
"deleteBackupConfirmationDesc": "Вы уверены, что хотите удалить резервную копию “{0}”?",
|
|
3618
|
-
"deleteAllBackupsConfirmation": "
|
|
3618
|
+
"deleteAllBackupsConfirmation": "Удалить все резервные копии",
|
|
3619
3619
|
"deleteAllBackupsConfirmationDesc": "Вы уверены, что хотите удалить все резервные копии?",
|
|
3620
3620
|
"backupCreationReview": "Перед созданием резервного хранилища проверьте детали.",
|
|
3621
3621
|
"restoreBackupReviewSubtitle": "Перед восстановлением существующей виртуальной машины из резервной копии проверьте сведения.",
|
|
@@ -2817,8 +2817,8 @@
|
|
|
2817
2817
|
"emptySessionName": "会话名称不能为空。 输入有效的会话名称。",
|
|
2818
2818
|
"shortSessionName": "会话名称必须包含五个以上的字符。 输入有效的会话名称。",
|
|
2819
2819
|
"invalidSessionName": "会话名称无效。 输入包含字母、数字、_和空格的有效会话名称。",
|
|
2820
|
-
"invalidSamplingRate": "您输入了无效的采样率。 输入介于
|
|
2821
|
-
"invalidMirroredPacketLength": "您输入了无效的镜像数据包长度。 输入介于
|
|
2820
|
+
"invalidSamplingRate": "您输入了无效的采样率。 输入介于1和9000之间的值。",
|
|
2821
|
+
"invalidMirroredPacketLength": "您输入了无效的镜像数据包长度。 输入介于14和65535之间的值。",
|
|
2822
2822
|
"existsSessionName": "具有此名称的会话已存在。 输入唯一的会话名称。",
|
|
2823
2823
|
"removePortMirroringSession": "删除端口镜像会话{name}?",
|
|
2824
2824
|
"editPortMirroringSession": "编辑端口镜像会话",
|
|
@@ -3611,9 +3611,9 @@
|
|
|
3611
3611
|
"serverPlaceholder": "例如:nas、nas.it.com 或 192.168.0.1",
|
|
3612
3612
|
"storageReview": "在创建备份存储之前,请查看详细信息。",
|
|
3613
3613
|
"backupStorageName": "备份存储名称",
|
|
3614
|
-
"deleteBackupConfirmation": "
|
|
3614
|
+
"deleteBackupConfirmation": "删除备份",
|
|
3615
3615
|
"deleteBackupConfirmationDesc": "您确定要删除备份“{0}”吗?",
|
|
3616
|
-
"deleteAllBackupsConfirmation": "
|
|
3616
|
+
"deleteAllBackupsConfirmation": "删除所有备份",
|
|
3617
3617
|
"deleteAllBackupsConfirmationDesc": "您确定要删除所有备份吗?",
|
|
3618
3618
|
"backupCreationReview": "在创建备份存储之前检查详细信息。",
|
|
3619
3619
|
"restoreBackupReviewSubtitle": "在从备份恢复现有虚拟机之前,请查看详细信息。",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
v-for="(item, key) in headItemsPresent"
|
|
86
86
|
:key="key"
|
|
87
87
|
:style="{
|
|
88
|
-
width: columnsWidth[key][0],
|
|
89
|
-
minWidth: columnsWidth[key][1],
|
|
88
|
+
width: columnsWidth?.[key]?.[0],
|
|
89
|
+
minWidth: columnsWidth?.[key]?.[1],
|
|
90
90
|
}"
|
|
91
91
|
class="datagrid-column datagrid-fixed-width"
|
|
92
92
|
>
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
:title="item.text"
|
|
109
109
|
:style="{
|
|
110
110
|
width:
|
|
111
|
-
columnsWidth[key][0]?.slice(0, -2) -
|
|
111
|
+
columnsWidth?.[key]?.[0]?.slice?.(0, -2) -
|
|
112
112
|
(item.hasFilter ? 65 : 40) +
|
|
113
113
|
'px',
|
|
114
114
|
}"
|
|
@@ -328,8 +328,8 @@
|
|
|
328
328
|
"
|
|
329
329
|
:key="key2"
|
|
330
330
|
:style="{
|
|
331
|
-
width: columnsWidth[key2][0],
|
|
332
|
-
minWidth: columnsWidth[key2][1],
|
|
331
|
+
width: columnsWidth?.[key2]?.[0],
|
|
332
|
+
minWidth: columnsWidth?.[key2]?.[1],
|
|
333
333
|
}"
|
|
334
334
|
:class="[
|
|
335
335
|
'datagrid-cell datagrid-fixed-width',
|
|
@@ -992,7 +992,7 @@ const setGrab = (key: number, event: MouseEvent): void => {
|
|
|
992
992
|
|
|
993
993
|
if (!isShowHiddenInfo.value) {
|
|
994
994
|
grabColumn.value = key
|
|
995
|
-
const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
|
|
995
|
+
const currentWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[0])
|
|
996
996
|
grabStartX.value = event.clientX - currentWidth
|
|
997
997
|
if (isRtl.value) {
|
|
998
998
|
grabStartX.value = event.clientX + currentWidth
|
|
@@ -1019,7 +1019,7 @@ let mousemove = (event: MouseEvent): void => {
|
|
|
1019
1019
|
isDrag.value = true
|
|
1020
1020
|
resizeObserve.disconnect()
|
|
1021
1021
|
|
|
1022
|
-
const minWidth = parseInt(columnsWidth.value[grabColumn.value][1])
|
|
1022
|
+
const minWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[1])
|
|
1023
1023
|
let changeX = Math.max(event.clientX - grabStartX.value, minWidth)
|
|
1024
1024
|
if (isRtl.value) {
|
|
1025
1025
|
changeX = Math.max(grabStartX.value - event.clientX, minWidth)
|
|
@@ -1048,7 +1048,7 @@ const setColumnWidthWithInfo = (ent: ResizeObserverEntry[]): void => {
|
|
|
1048
1048
|
memoryWidth.value = useDeepCopy(columnsWidth.value)
|
|
1049
1049
|
columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 84}px`
|
|
1050
1050
|
} else {
|
|
1051
|
-
columnsWidth.value
|
|
1051
|
+
columnsWidth.value = useDeepCopy(memoryWidth.value)
|
|
1052
1052
|
}
|
|
1053
1053
|
}
|
|
1054
1054
|
|
|
@@ -1,448 +1,444 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<common-pages-backups-backups-new-skeleton v-if="props.backupsLoading" />
|
|
3
|
-
<div
|
|
4
|
-
v-else
|
|
5
|
-
:class="[
|
|
6
|
-
'backups-page grid h-inherit p-4 overflow-hidden ',
|
|
7
|
-
{ 'selected gap-3': props.detailData },
|
|
8
|
-
]"
|
|
9
|
-
>
|
|
10
|
-
<div class="left-content overflow-auto grid p-4">
|
|
11
|
-
<div class="flex justify-between gap-4 flex-wrap">
|
|
12
|
-
<h3 class="title-block font-[500] text-[16px]">
|
|
13
|
-
{{ localization.inventoryTabs.backups }} ({{
|
|
14
|
-
props.backupsTree.length
|
|
15
|
-
}})
|
|
16
|
-
</h3>
|
|
17
|
-
<ui-button
|
|
18
|
-
v-if="props.typeFromRoute === 'vm'"
|
|
19
|
-
v-permission="props.createBackupPermission"
|
|
20
|
-
test-id="take-backup-btn"
|
|
21
|
-
size="md"
|
|
22
|
-
class="create-backup-button"
|
|
23
|
-
@click="emits('set-action', 'createBackup')"
|
|
24
|
-
>
|
|
25
|
-
<ui-icon name="plus" width="20" height="20" class="mr-2 icon" />
|
|
26
|
-
{{ localization.common.createBackup }}
|
|
27
|
-
</ui-button>
|
|
28
|
-
</div>
|
|
29
|
-
<div
|
|
30
|
-
v-if="props.backupsTree.length"
|
|
31
|
-
class="backups-tree-content overflow-y-auto my-4 px-2 pb-2"
|
|
32
|
-
>
|
|
33
|
-
<ui-tree
|
|
34
|
-
:nodes="props.backupsTree"
|
|
35
|
-
@select-node="emits('select-node', $event)"
|
|
36
|
-
@toggle-node="emits('show-nodes', $event.id)"
|
|
37
|
-
@show-context-menu="showContextMenu"
|
|
38
|
-
>
|
|
39
|
-
<template #content="{ node }">
|
|
40
|
-
<div class="flex-align-center gap-2">
|
|
41
|
-
<span :class="['node-icon', node.iconClassName]"></span>
|
|
42
|
-
<span class="node-name text-ellipsis text-3">{{
|
|
43
|
-
node.name
|
|
44
|
-
}}</span>
|
|
45
|
-
</div>
|
|
46
|
-
</template>
|
|
47
|
-
</ui-tree>
|
|
48
|
-
</div>
|
|
49
|
-
<div v-else class="empty-block grid justify-items-center content-center">
|
|
50
|
-
<ui-icon
|
|
51
|
-
name="not-found-magnifier"
|
|
52
|
-
width="28"
|
|
53
|
-
height="28"
|
|
54
|
-
color="#9da6ad"
|
|
55
|
-
/>
|
|
56
|
-
<p class="title-block font-[400] text-[16px] mt-2">
|
|
57
|
-
{{ localization.common.noBackupsAvailable }}
|
|
58
|
-
</p>
|
|
59
|
-
<p class="description-block mt-[6px] text-[13px] text-center">
|
|
60
|
-
{{ localization.common.noBackupsAvailableDesc }}
|
|
61
|
-
</p>
|
|
62
|
-
</div>
|
|
63
|
-
<ui-button
|
|
64
|
-
v-permission="props.deleteAllPermission"
|
|
65
|
-
:disabled="!props.backupsTree.length"
|
|
66
|
-
:class="[
|
|
67
|
-
'delete-all w-max ml-auto',
|
|
68
|
-
{ disabled: !props.backupsTree.length },
|
|
69
|
-
]"
|
|
70
|
-
test-id="delete-all-backups-btn"
|
|
71
|
-
size="md"
|
|
72
|
-
variant="text"
|
|
73
|
-
is-without-sizes
|
|
74
|
-
is-without-height
|
|
75
|
-
@click="emits('set-action', 'deleteBackupAll')"
|
|
76
|
-
>
|
|
77
|
-
<ui-icon name="delete" width="20" height="20" class="mr-2" />
|
|
78
|
-
{{ localization.common.deleteAll }}
|
|
79
|
-
</ui-button>
|
|
80
|
-
</div>
|
|
81
|
-
<div
|
|
82
|
-
v-if="props.detailData"
|
|
83
|
-
class="backups-details overflow-hidden flex-direction-column p-4"
|
|
84
|
-
>
|
|
85
|
-
<div class="flex justify-between mb-6 gap-4 pr-4 flex-wrap">
|
|
86
|
-
<h3 class="title-block font-[500] text-[16px]">
|
|
87
|
-
{{ localization.common.backupDetails }}
|
|
88
|
-
</h3>
|
|
89
|
-
<div class="details-actions-block flex column-gap-4">
|
|
90
|
-
<ui-tooltip
|
|
91
|
-
id="restore-backups-btn"
|
|
92
|
-
test-id="restore-backups-btn-tooltip"
|
|
93
|
-
size="md"
|
|
94
|
-
position="bottom"
|
|
95
|
-
position-by-tooltip="center"
|
|
96
|
-
show-type="variant-1"
|
|
97
|
-
>
|
|
98
|
-
<template #target>
|
|
99
|
-
<div id="restore-backups-btn" class="popped tooltip">
|
|
100
|
-
<ui-button
|
|
101
|
-
v-permission="props.restoreBackupPermission"
|
|
102
|
-
test-id="restore-backups-btn"
|
|
103
|
-
size="md"
|
|
104
|
-
variant="text"
|
|
105
|
-
class="restore-backups-btn"
|
|
106
|
-
is-without-sizes
|
|
107
|
-
is-without-height
|
|
108
|
-
@click="emits('set-action', 'restoreBackup')"
|
|
109
|
-
>
|
|
110
|
-
<ui-icon name="update" width="20" height="20" />
|
|
111
|
-
</ui-button>
|
|
112
|
-
</div>
|
|
113
|
-
</template>
|
|
114
|
-
<template #content>
|
|
115
|
-
{{ localization.common.restore }}
|
|
116
|
-
</template>
|
|
117
|
-
</ui-tooltip>
|
|
118
|
-
<div class="border-line"></div>
|
|
119
|
-
<ui-tooltip
|
|
120
|
-
id="delete-backups-btn"
|
|
121
|
-
test-id="delete-backups-btn-tooltip"
|
|
122
|
-
size="md"
|
|
123
|
-
position="bottom"
|
|
124
|
-
position-by-tooltip="center"
|
|
125
|
-
show-type="variant-1"
|
|
126
|
-
>
|
|
127
|
-
<template #target>
|
|
128
|
-
<div id="delete-backups-btn" class="popped tooltip">
|
|
129
|
-
<ui-button
|
|
130
|
-
v-permission="props.deleteBackupPermission"
|
|
131
|
-
test-id="delete-backups-btn"
|
|
132
|
-
size="md"
|
|
133
|
-
variant="text"
|
|
134
|
-
class="delete-backups-btn"
|
|
135
|
-
is-without-sizes
|
|
136
|
-
is-without-height
|
|
137
|
-
@click="emits('set-action', 'deleteBackup')"
|
|
138
|
-
>
|
|
139
|
-
<ui-icon name="delete" width="20" height="20" />
|
|
140
|
-
</ui-button>
|
|
141
|
-
</div>
|
|
142
|
-
</template>
|
|
143
|
-
<template #content>
|
|
144
|
-
{{ localization.common.delete }}
|
|
145
|
-
</template>
|
|
146
|
-
</ui-tooltip>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
<div
|
|
150
|
-
ref="detailsScrollBlock"
|
|
151
|
-
:class="[
|
|
152
|
-
'grid row-gap-3 pr-4 overflow-y-auto details-scroll-block',
|
|
153
|
-
{ 'has-scroll': hasScroll },
|
|
154
|
-
]"
|
|
155
|
-
>
|
|
156
|
-
<ui-info-block
|
|
157
|
-
v-for="(item, index) in currentDetailsData"
|
|
158
|
-
:key="index"
|
|
159
|
-
:data="item"
|
|
160
|
-
>
|
|
161
|
-
<template v-if="item.labelIcon" #labelBlock>
|
|
162
|
-
<div class="info-block-label-content flex items-start">
|
|
163
|
-
<ui-icon
|
|
164
|
-
v-if="item.labelIcon"
|
|
165
|
-
:name="item.labelIcon"
|
|
166
|
-
:class="[
|
|
167
|
-
'info-label-icon mr-[10px]',
|
|
168
|
-
`icon-name-${item.labelIcon}`,
|
|
169
|
-
]"
|
|
170
|
-
width="20"
|
|
171
|
-
height="20"
|
|
172
|
-
/>
|
|
173
|
-
<span class="info-label">{{ item.label }}</span>
|
|
174
|
-
</div>
|
|
175
|
-
</template>
|
|
176
|
-
<template #valueBlock>
|
|
177
|
-
<span
|
|
178
|
-
v-if="item.value === 'empty-description'"
|
|
179
|
-
class="empty-description"
|
|
180
|
-
>
|
|
181
|
-
{{ localization.common.backupHasNoDescriptionYet }}
|
|
182
|
-
</span>
|
|
183
|
-
</template>
|
|
184
|
-
</ui-info-block>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
|
|
189
|
-
<common-pages-backups-backups-new-context-menu-view
|
|
190
|
-
:show="contextMenuShow"
|
|
191
|
-
:context-data="contextMenu"
|
|
192
|
-
:restore-backup-permission="props.restoreBackupPermission"
|
|
193
|
-
:delete-backup-permission="props.deleteBackupPermission"
|
|
194
|
-
@select-action="onSelectContextMenuItem"
|
|
195
|
-
/>
|
|
196
|
-
</template>
|
|
197
|
-
|
|
198
|
-
<script setup lang="ts">
|
|
199
|
-
import {
|
|
200
|
-
import
|
|
201
|
-
import type {
|
|
202
|
-
import type {
|
|
203
|
-
import type {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
import
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
(event: '
|
|
224
|
-
(event: '
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
)
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
const
|
|
241
|
-
const
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
:
|
|
256
|
-
--backups-page-
|
|
257
|
-
--backups-page-
|
|
258
|
-
--backups-page-
|
|
259
|
-
--backups-page-
|
|
260
|
-
--backups-page-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
--backups-page-
|
|
264
|
-
--backups-page-
|
|
265
|
-
|
|
266
|
-
:
|
|
267
|
-
--backups-page-
|
|
268
|
-
--backups-page-
|
|
269
|
-
--backups-page-
|
|
270
|
-
--backups-page-
|
|
271
|
-
--backups-page-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
color: #
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
}
|
|
405
|
-
:deep(.ui-main-info-block-item-right) {
|
|
406
|
-
white-space: unset !important;
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
:
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<common-pages-backups-backups-new-skeleton v-if="props.backupsLoading" />
|
|
3
|
+
<div
|
|
4
|
+
v-else
|
|
5
|
+
:class="[
|
|
6
|
+
'backups-page grid h-inherit p-4 overflow-hidden ',
|
|
7
|
+
{ 'selected gap-3': props.detailData },
|
|
8
|
+
]"
|
|
9
|
+
>
|
|
10
|
+
<div class="left-content overflow-auto grid p-4">
|
|
11
|
+
<div class="flex justify-between gap-4 flex-wrap">
|
|
12
|
+
<h3 class="title-block font-[500] text-[16px]">
|
|
13
|
+
{{ localization.inventoryTabs.backups }} ({{
|
|
14
|
+
props.backupsTree.length
|
|
15
|
+
}})
|
|
16
|
+
</h3>
|
|
17
|
+
<ui-button
|
|
18
|
+
v-if="props.typeFromRoute === 'vm'"
|
|
19
|
+
v-permission="props.createBackupPermission"
|
|
20
|
+
test-id="take-backup-btn"
|
|
21
|
+
size="md"
|
|
22
|
+
class="create-backup-button"
|
|
23
|
+
@click="emits('set-action', 'createBackup')"
|
|
24
|
+
>
|
|
25
|
+
<ui-icon name="plus" width="20" height="20" class="mr-2 icon" />
|
|
26
|
+
{{ localization.common.createBackup }}
|
|
27
|
+
</ui-button>
|
|
28
|
+
</div>
|
|
29
|
+
<div
|
|
30
|
+
v-if="props.backupsTree.length"
|
|
31
|
+
class="backups-tree-content overflow-y-auto my-4 px-2 pb-2"
|
|
32
|
+
>
|
|
33
|
+
<ui-tree
|
|
34
|
+
:nodes="props.backupsTree"
|
|
35
|
+
@select-node="emits('select-node', $event)"
|
|
36
|
+
@toggle-node="emits('show-nodes', $event.id)"
|
|
37
|
+
@show-context-menu="showContextMenu"
|
|
38
|
+
>
|
|
39
|
+
<template #content="{ node }">
|
|
40
|
+
<div class="flex-align-center gap-2">
|
|
41
|
+
<span :class="['node-icon', node.iconClassName]"></span>
|
|
42
|
+
<span class="node-name text-ellipsis text-3">{{
|
|
43
|
+
node.name
|
|
44
|
+
}}</span>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
47
|
+
</ui-tree>
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else class="empty-block grid justify-items-center content-center">
|
|
50
|
+
<ui-icon
|
|
51
|
+
name="not-found-magnifier"
|
|
52
|
+
width="28"
|
|
53
|
+
height="28"
|
|
54
|
+
color="#9da6ad"
|
|
55
|
+
/>
|
|
56
|
+
<p class="title-block font-[400] text-[16px] mt-2">
|
|
57
|
+
{{ localization.common.noBackupsAvailable }}
|
|
58
|
+
</p>
|
|
59
|
+
<p class="description-block mt-[6px] text-[13px] text-center">
|
|
60
|
+
{{ localization.common.noBackupsAvailableDesc }}
|
|
61
|
+
</p>
|
|
62
|
+
</div>
|
|
63
|
+
<ui-button
|
|
64
|
+
v-permission="props.deleteAllPermission"
|
|
65
|
+
:disabled="!props.backupsTree.length"
|
|
66
|
+
:class="[
|
|
67
|
+
'delete-all w-max ml-auto',
|
|
68
|
+
{ disabled: !props.backupsTree.length },
|
|
69
|
+
]"
|
|
70
|
+
test-id="delete-all-backups-btn"
|
|
71
|
+
size="md"
|
|
72
|
+
variant="text"
|
|
73
|
+
is-without-sizes
|
|
74
|
+
is-without-height
|
|
75
|
+
@click="emits('set-action', 'deleteBackupAll')"
|
|
76
|
+
>
|
|
77
|
+
<ui-icon name="delete" width="20" height="20" class="mr-2" />
|
|
78
|
+
{{ localization.common.deleteAll }}
|
|
79
|
+
</ui-button>
|
|
80
|
+
</div>
|
|
81
|
+
<div
|
|
82
|
+
v-if="props.detailData"
|
|
83
|
+
class="backups-details overflow-hidden flex-direction-column p-4"
|
|
84
|
+
>
|
|
85
|
+
<div class="flex justify-between mb-6 gap-4 pr-4 flex-wrap">
|
|
86
|
+
<h3 class="title-block font-[500] text-[16px]">
|
|
87
|
+
{{ localization.common.backupDetails }}
|
|
88
|
+
</h3>
|
|
89
|
+
<div class="details-actions-block flex column-gap-4">
|
|
90
|
+
<ui-tooltip
|
|
91
|
+
id="restore-backups-btn"
|
|
92
|
+
test-id="restore-backups-btn-tooltip"
|
|
93
|
+
size="md"
|
|
94
|
+
position="bottom"
|
|
95
|
+
position-by-tooltip="center"
|
|
96
|
+
show-type="variant-1"
|
|
97
|
+
>
|
|
98
|
+
<template #target>
|
|
99
|
+
<div id="restore-backups-btn" class="popped tooltip">
|
|
100
|
+
<ui-button
|
|
101
|
+
v-permission="props.restoreBackupPermission"
|
|
102
|
+
test-id="restore-backups-btn"
|
|
103
|
+
size="md"
|
|
104
|
+
variant="text"
|
|
105
|
+
class="restore-backups-btn"
|
|
106
|
+
is-without-sizes
|
|
107
|
+
is-without-height
|
|
108
|
+
@click="emits('set-action', 'restoreBackup')"
|
|
109
|
+
>
|
|
110
|
+
<ui-icon name="update" width="20" height="20" />
|
|
111
|
+
</ui-button>
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
<template #content>
|
|
115
|
+
{{ localization.common.restore }}
|
|
116
|
+
</template>
|
|
117
|
+
</ui-tooltip>
|
|
118
|
+
<div class="border-line"></div>
|
|
119
|
+
<ui-tooltip
|
|
120
|
+
id="delete-backups-btn"
|
|
121
|
+
test-id="delete-backups-btn-tooltip"
|
|
122
|
+
size="md"
|
|
123
|
+
position="bottom"
|
|
124
|
+
position-by-tooltip="center"
|
|
125
|
+
show-type="variant-1"
|
|
126
|
+
>
|
|
127
|
+
<template #target>
|
|
128
|
+
<div id="delete-backups-btn" class="popped tooltip">
|
|
129
|
+
<ui-button
|
|
130
|
+
v-permission="props.deleteBackupPermission"
|
|
131
|
+
test-id="delete-backups-btn"
|
|
132
|
+
size="md"
|
|
133
|
+
variant="text"
|
|
134
|
+
class="delete-backups-btn"
|
|
135
|
+
is-without-sizes
|
|
136
|
+
is-without-height
|
|
137
|
+
@click="emits('set-action', 'deleteBackup')"
|
|
138
|
+
>
|
|
139
|
+
<ui-icon name="delete" width="20" height="20" />
|
|
140
|
+
</ui-button>
|
|
141
|
+
</div>
|
|
142
|
+
</template>
|
|
143
|
+
<template #content>
|
|
144
|
+
{{ localization.common.delete }}
|
|
145
|
+
</template>
|
|
146
|
+
</ui-tooltip>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div
|
|
150
|
+
ref="detailsScrollBlock"
|
|
151
|
+
:class="[
|
|
152
|
+
'grid row-gap-3 pr-4 overflow-y-auto details-scroll-block',
|
|
153
|
+
{ 'has-scroll': hasScroll },
|
|
154
|
+
]"
|
|
155
|
+
>
|
|
156
|
+
<ui-info-block
|
|
157
|
+
v-for="(item, index) in currentDetailsData"
|
|
158
|
+
:key="index"
|
|
159
|
+
:data="item"
|
|
160
|
+
>
|
|
161
|
+
<template v-if="item.labelIcon" #labelBlock>
|
|
162
|
+
<div class="info-block-label-content flex items-start">
|
|
163
|
+
<ui-icon
|
|
164
|
+
v-if="item.labelIcon"
|
|
165
|
+
:name="item.labelIcon"
|
|
166
|
+
:class="[
|
|
167
|
+
'info-label-icon mr-[10px]',
|
|
168
|
+
`icon-name-${item.labelIcon}`,
|
|
169
|
+
]"
|
|
170
|
+
width="20"
|
|
171
|
+
height="20"
|
|
172
|
+
/>
|
|
173
|
+
<span class="info-label">{{ item.label }}</span>
|
|
174
|
+
</div>
|
|
175
|
+
</template>
|
|
176
|
+
<template #valueBlock>
|
|
177
|
+
<span
|
|
178
|
+
v-if="item.value === 'empty-description'"
|
|
179
|
+
class="empty-description"
|
|
180
|
+
>
|
|
181
|
+
{{ localization.common.backupHasNoDescriptionYet }}
|
|
182
|
+
</span>
|
|
183
|
+
</template>
|
|
184
|
+
</ui-info-block>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<common-pages-backups-backups-new-context-menu-view
|
|
190
|
+
:show="contextMenuShow"
|
|
191
|
+
:context-data="contextMenu"
|
|
192
|
+
:restore-backup-permission="props.restoreBackupPermission"
|
|
193
|
+
:delete-backup-permission="props.deleteBackupPermission"
|
|
194
|
+
@select-action="onSelectContextMenuItem"
|
|
195
|
+
/>
|
|
196
|
+
</template>
|
|
197
|
+
|
|
198
|
+
<script setup lang="ts">
|
|
199
|
+
import { useTemplateRef } from 'vue'
|
|
200
|
+
import { useElementSize } from '@vueuse/core'
|
|
201
|
+
import type { UI_I_InfoBlock } from '~/node_modules/bfg-uikit/components/ui/infoBlock/models/interfaces'
|
|
202
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
203
|
+
import type { UI_I_BackupsTreeNode } from '~/components/common/pages/backups/lib/models/interfaces'
|
|
204
|
+
import type {
|
|
205
|
+
UI_T_TargetType,
|
|
206
|
+
UI_T_BackupActionType,
|
|
207
|
+
} from '~/components/common/pages/backups/lib/models/types'
|
|
208
|
+
import * as utils from '~/components/common/pages/backups/backupsNew/lib/utils/contextMenu'
|
|
209
|
+
import { constructDetails } from '~/components/common/pages/backups/backupsNew/lib/utils/details'
|
|
210
|
+
|
|
211
|
+
const props = defineProps<{
|
|
212
|
+
backupsTree: UI_I_BackupsTreeNode[]
|
|
213
|
+
backupsLoading: boolean
|
|
214
|
+
typeFromRoute: UI_T_TargetType
|
|
215
|
+
detailData: UI_I_BackupsTreeNode | null
|
|
216
|
+
createBackupPermission: string
|
|
217
|
+
restoreBackupPermission: string
|
|
218
|
+
deleteBackupPermission: string
|
|
219
|
+
deleteAllPermission: string
|
|
220
|
+
}>()
|
|
221
|
+
|
|
222
|
+
const emits = defineEmits<{
|
|
223
|
+
(event: 'show-nodes', value: string | number): void
|
|
224
|
+
(event: 'set-action', value: UI_T_BackupActionType): void
|
|
225
|
+
(event: 'select-node', value: UI_I_BackupsTreeNode): void
|
|
226
|
+
}>()
|
|
227
|
+
|
|
228
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
229
|
+
|
|
230
|
+
const { showContextMenu, contextMenuShow, contextMenu } = utils.getContextMenu()
|
|
231
|
+
|
|
232
|
+
const onSelectContextMenuItem = (actionType: UI_T_BackupActionType): void => {
|
|
233
|
+
emits('set-action', actionType)
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
const currentDetailsData = computed<UI_I_InfoBlock[]>(() =>
|
|
237
|
+
constructDetails(localization.value, props.detailData)
|
|
238
|
+
)
|
|
239
|
+
|
|
240
|
+
const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
|
|
241
|
+
const { height } = useElementSize(detailsElement)
|
|
242
|
+
|
|
243
|
+
const hasScroll = computed<boolean>(
|
|
244
|
+
() =>
|
|
245
|
+
height.value &&
|
|
246
|
+
detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
|
|
247
|
+
)
|
|
248
|
+
</script>
|
|
249
|
+
|
|
250
|
+
<style>
|
|
251
|
+
:root {
|
|
252
|
+
--backups-page-inner-block-bg: #ffffff;
|
|
253
|
+
--backups-page-title-color: #4d5d69;
|
|
254
|
+
--backups-page-tree-border-color: #e9ebed;
|
|
255
|
+
--backups-page-tree-block-bg-color: #ffffff;
|
|
256
|
+
--backups-page-details-action-color: #4d5d69;
|
|
257
|
+
--backups-page-details-action-line-color: #e9ebeda3;
|
|
258
|
+
--backups-page-details-action-hover-color: #213444;
|
|
259
|
+
--backups-page-info-block-label-color: #4d5d69;
|
|
260
|
+
--backups-page-info-block-value-color: #182531;
|
|
261
|
+
}
|
|
262
|
+
:root.dark-theme {
|
|
263
|
+
--backups-page-inner-block-bg: #334453;
|
|
264
|
+
--backups-page-title-color: #e9eaec;
|
|
265
|
+
--backups-page-tree-border-color: #e9ebed1f;
|
|
266
|
+
--backups-page-tree-block-bg-color: #1b2a371f;
|
|
267
|
+
--backups-page-details-action-color: #e9eaec;
|
|
268
|
+
--backups-page-details-action-line-color: #e9ebed1f;
|
|
269
|
+
--backups-page-details-action-hover-color: #ffffff;
|
|
270
|
+
--backups-page-info-block-label-color: #e9eaec;
|
|
271
|
+
--backups-page-info-block-value-color: #e9eaec;
|
|
272
|
+
}
|
|
273
|
+
</style>
|
|
274
|
+
|
|
275
|
+
<style scoped lang="scss">
|
|
276
|
+
.backups-page {
|
|
277
|
+
&.selected {
|
|
278
|
+
grid-template-columns: repeat(2, calc(50% - 6px));
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.title-block {
|
|
282
|
+
color: var(--backups-page-title-color);
|
|
283
|
+
}
|
|
284
|
+
.create-backup-button {
|
|
285
|
+
white-space: nowrap;
|
|
286
|
+
|
|
287
|
+
.icon {
|
|
288
|
+
min-width: 20px;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.left-content {
|
|
293
|
+
background-color: var(--backups-page-inner-block-bg);
|
|
294
|
+
box-shadow: 0 1px 4px 0 #00000014;
|
|
295
|
+
border-radius: 8px;
|
|
296
|
+
grid-template-rows: max-content 1fr max-content;
|
|
297
|
+
|
|
298
|
+
.backups-tree-content {
|
|
299
|
+
border: 1px solid var(--backups-page-tree-border-color);
|
|
300
|
+
border-radius: 8px;
|
|
301
|
+
background-color: var(--backups-page-tree-block-bg-color);
|
|
302
|
+
|
|
303
|
+
:deep(.tree-container) {
|
|
304
|
+
width: max-content;
|
|
305
|
+
min-width: 100%;
|
|
306
|
+
|
|
307
|
+
.tree-content {
|
|
308
|
+
//padding-right: 8px;
|
|
309
|
+
|
|
310
|
+
.node-wrapper {
|
|
311
|
+
border-radius: 4px;
|
|
312
|
+
|
|
313
|
+
.toggle-button-empty {
|
|
314
|
+
display: none;
|
|
315
|
+
}
|
|
316
|
+
.node-element {
|
|
317
|
+
line-height: 20px;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.empty-block {
|
|
325
|
+
.description-block {
|
|
326
|
+
color: #9da6ad;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
.delete-all {
|
|
330
|
+
&.disabled {
|
|
331
|
+
color: #bdc3c7;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
&:not(.disabled) {
|
|
335
|
+
color: #ea3223;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
.backups-details {
|
|
340
|
+
background-color: var(--backups-page-inner-block-bg);
|
|
341
|
+
box-shadow: 0 1px 4px 0 #00000014;
|
|
342
|
+
border-radius: 8px;
|
|
343
|
+
padding-right: 0;
|
|
344
|
+
|
|
345
|
+
.details-actions-block {
|
|
346
|
+
.border-line {
|
|
347
|
+
width: 1px;
|
|
348
|
+
height: 20px;
|
|
349
|
+
background-color: var(--backups-page-details-action-line-color);
|
|
350
|
+
}
|
|
351
|
+
.restore-backups-btn {
|
|
352
|
+
:deep(path) {
|
|
353
|
+
stroke-width: 1.7;
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
.restore-backups-btn,
|
|
357
|
+
.edit-backups-btn {
|
|
358
|
+
color: var(--backups-page-details-action-color);
|
|
359
|
+
|
|
360
|
+
&:hover {
|
|
361
|
+
color: var(--backups-page-details-action-hover-color);
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
.delete-backups-btn {
|
|
365
|
+
color: #ea3223;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
.details-scroll-block {
|
|
369
|
+
padding-right: 0;
|
|
370
|
+
|
|
371
|
+
&:not(.has-scroll) {
|
|
372
|
+
padding-right: 16px;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
.info-block-label-content {
|
|
376
|
+
.info-label-icon {
|
|
377
|
+
color: #9da6ad;
|
|
378
|
+
min-width: 20px;
|
|
379
|
+
|
|
380
|
+
&.icon-name-vsphere-icon-storage-system-refresh {
|
|
381
|
+
:deep(path) {
|
|
382
|
+
stroke-width: 1.4;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
.info-label {
|
|
387
|
+
margin-top: 1px;
|
|
388
|
+
line-height: 18px;
|
|
389
|
+
color: var(--backups-page-info-block-label-color);
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
.empty-description {
|
|
393
|
+
color: #9da6ad;
|
|
394
|
+
margin-top: 1px;
|
|
395
|
+
line-height: 18px;
|
|
396
|
+
text-align: right;
|
|
397
|
+
}
|
|
398
|
+
:deep(.ui-main-info-block-item) {
|
|
399
|
+
grid-column-gap: 10px;
|
|
400
|
+
}
|
|
401
|
+
:deep(.ui-main-info-block-item-right) {
|
|
402
|
+
white-space: unset !important;
|
|
403
|
+
max-width: 50%;
|
|
404
|
+
}
|
|
405
|
+
:deep(.ui-main-info-block-item-right-value-parent) {
|
|
406
|
+
white-space: unset !important;
|
|
407
|
+
}
|
|
408
|
+
:deep(.ui-main-info-block-item-right-value) {
|
|
409
|
+
color: var(--backups-page-info-block-value-color);
|
|
410
|
+
font-size: 13px;
|
|
411
|
+
font-weight: 400;
|
|
412
|
+
line-height: 18px;
|
|
413
|
+
margin-top: 1px;
|
|
414
|
+
}
|
|
415
|
+
:deep(.ui-main-info-block-item-right-open) {
|
|
416
|
+
display: none;
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
:root.dark-theme {
|
|
421
|
+
.left-content {
|
|
422
|
+
.delete-all {
|
|
423
|
+
&.disabled {
|
|
424
|
+
opacity: 0.44;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
@media (max-width: 1200px) {
|
|
431
|
+
.backups-page {
|
|
432
|
+
overflow-y: auto;
|
|
433
|
+
|
|
434
|
+
&.selected {
|
|
435
|
+
grid-template-columns: 1fr;
|
|
436
|
+
grid-template-rows: minmax(189px, 1fr) 1fr;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.backups-details {
|
|
440
|
+
height: max-content;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
</style>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<ui-skeleton-item width="96" height="20" class="ml-auto" />
|
|
20
20
|
</div>
|
|
21
21
|
<div class="right-content grid p-4">
|
|
22
|
-
<div class="flex justify-between gap-4 flex-wrap top-container">
|
|
22
|
+
<div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
|
|
23
23
|
<ui-skeleton-item width="80" height="20" />
|
|
24
24
|
<div class="actions-block flex">
|
|
25
25
|
<ui-skeleton-item width="20" height="20" />
|
|
@@ -29,7 +29,13 @@
|
|
|
29
29
|
<ui-skeleton-item width="20" height="20" />
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
|
-
<div
|
|
32
|
+
<div
|
|
33
|
+
ref="detailsScrollBlock"
|
|
34
|
+
:class="[
|
|
35
|
+
'details-block flex flex-col my-6',
|
|
36
|
+
{ 'has-scroll': hasScroll },
|
|
37
|
+
]"
|
|
38
|
+
>
|
|
33
39
|
<div
|
|
34
40
|
v-for="index in detailsItemsCount"
|
|
35
41
|
:key="index"
|
|
@@ -45,7 +51,19 @@
|
|
|
45
51
|
</template>
|
|
46
52
|
|
|
47
53
|
<script setup lang="ts">
|
|
54
|
+
import { useTemplateRef } from 'vue'
|
|
55
|
+
import { useElementSize } from '@vueuse/core'
|
|
56
|
+
|
|
48
57
|
const detailsItemsCount = ref<number>(3)
|
|
58
|
+
|
|
59
|
+
const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
|
|
60
|
+
const { height } = useElementSize(detailsElement)
|
|
61
|
+
|
|
62
|
+
const hasScroll = computed<boolean>(
|
|
63
|
+
() =>
|
|
64
|
+
height.value &&
|
|
65
|
+
detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
|
|
66
|
+
)
|
|
49
67
|
</script>
|
|
50
68
|
|
|
51
69
|
<style>
|
|
@@ -84,6 +102,8 @@ const detailsItemsCount = ref<number>(3)
|
|
|
84
102
|
}
|
|
85
103
|
}
|
|
86
104
|
.right-content {
|
|
105
|
+
padding-right: 0;
|
|
106
|
+
|
|
87
107
|
.top-container {
|
|
88
108
|
.actions-block {
|
|
89
109
|
grid-column-gap: 10px;
|
|
@@ -98,6 +118,10 @@ const detailsItemsCount = ref<number>(3)
|
|
|
98
118
|
grid-row-gap: 10px;
|
|
99
119
|
overflow: auto;
|
|
100
120
|
|
|
121
|
+
&:not(.has-scroll) {
|
|
122
|
+
padding-right: 16px;
|
|
123
|
+
}
|
|
124
|
+
|
|
101
125
|
.details-block-item {
|
|
102
126
|
background-color: var(--backups-right-skeleton-item-bg-color);
|
|
103
127
|
border-radius: 6px;
|
|
@@ -48,6 +48,7 @@ const description = computed<string>(() => {
|
|
|
48
48
|
|
|
49
49
|
const modalTexts = computed<UI_I_ModalTexts>(() => {
|
|
50
50
|
return {
|
|
51
|
+
button1: localization.value.common.cancel,
|
|
51
52
|
button2: props.isAll
|
|
52
53
|
? localization.value.common.deleteAll
|
|
53
54
|
: localization.value.common.delete,
|
|
@@ -227,6 +227,7 @@
|
|
|
227
227
|
</template>
|
|
228
228
|
|
|
229
229
|
<script setup lang="ts">
|
|
230
|
+
import { useTemplateRef } from 'vue'
|
|
230
231
|
import { useElementSize } from '@vueuse/core'
|
|
231
232
|
import type { UI_I_InfoBlock } from '~/node_modules/bfg-uikit/components/ui/infoBlock/models/interfaces'
|
|
232
233
|
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
@@ -268,19 +269,14 @@ const onSelectContextMenuItem = (actionType: UI_T_SnapshotActionType): void => {
|
|
|
268
269
|
emits('show-modal', actionType)
|
|
269
270
|
}
|
|
270
271
|
|
|
271
|
-
const
|
|
272
|
-
const { height } = useElementSize(
|
|
273
|
-
const hasScroll = ref<boolean>(false)
|
|
274
|
-
const checkScroll = (): void => {
|
|
275
|
-
const element = detailsScrollBlock.value
|
|
276
|
-
if (element) {
|
|
277
|
-
hasScroll.value = element.scrollHeight > element.clientHeight
|
|
278
|
-
}
|
|
279
|
-
}
|
|
272
|
+
const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
|
|
273
|
+
const { height } = useElementSize(detailsElement)
|
|
280
274
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
275
|
+
const hasScroll = computed<boolean>(
|
|
276
|
+
() =>
|
|
277
|
+
height.value &&
|
|
278
|
+
detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
|
|
279
|
+
)
|
|
284
280
|
</script>
|
|
285
281
|
|
|
286
282
|
<style>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<ui-skeleton-item width="96" height="20" class="ml-auto" />
|
|
20
20
|
</div>
|
|
21
21
|
<div class="right-content grid p-4">
|
|
22
|
-
<div class="flex justify-between gap-4 flex-wrap top-container">
|
|
22
|
+
<div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
|
|
23
23
|
<ui-skeleton-item width="80" height="20" />
|
|
24
24
|
<div class="actions-block flex">
|
|
25
25
|
<ui-skeleton-item width="20" height="20" />
|
|
@@ -29,7 +29,13 @@
|
|
|
29
29
|
<ui-skeleton-item width="20" height="20" />
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
|
-
<div
|
|
32
|
+
<div
|
|
33
|
+
ref="detailsScrollBlock"
|
|
34
|
+
:class="[
|
|
35
|
+
'details-block flex flex-col my-6',
|
|
36
|
+
{ 'has-scroll': hasScroll },
|
|
37
|
+
]"
|
|
38
|
+
>
|
|
33
39
|
<div
|
|
34
40
|
v-for="index in detailsItemsCount"
|
|
35
41
|
:key="index"
|
|
@@ -45,7 +51,19 @@
|
|
|
45
51
|
</template>
|
|
46
52
|
|
|
47
53
|
<script setup lang="ts">
|
|
54
|
+
import { useTemplateRef } from 'vue'
|
|
55
|
+
import { useElementSize } from '@vueuse/core'
|
|
56
|
+
|
|
48
57
|
const detailsItemsCount = ref<number>(6)
|
|
58
|
+
|
|
59
|
+
const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
|
|
60
|
+
const { height } = useElementSize(detailsElement)
|
|
61
|
+
|
|
62
|
+
const hasScroll = computed<boolean>(
|
|
63
|
+
() =>
|
|
64
|
+
height.value &&
|
|
65
|
+
detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
|
|
66
|
+
)
|
|
49
67
|
</script>
|
|
50
68
|
|
|
51
69
|
<style>
|
|
@@ -84,6 +102,8 @@ const detailsItemsCount = ref<number>(6)
|
|
|
84
102
|
}
|
|
85
103
|
}
|
|
86
104
|
.right-content {
|
|
105
|
+
padding-right: 0;
|
|
106
|
+
|
|
87
107
|
.top-container {
|
|
88
108
|
.actions-block {
|
|
89
109
|
grid-column-gap: 10px;
|
|
@@ -98,6 +118,10 @@ const detailsItemsCount = ref<number>(6)
|
|
|
98
118
|
grid-row-gap: 10px;
|
|
99
119
|
overflow: auto;
|
|
100
120
|
|
|
121
|
+
&:not(.has-scroll) {
|
|
122
|
+
padding-right: 16px;
|
|
123
|
+
}
|
|
124
|
+
|
|
101
125
|
.details-block-item {
|
|
102
126
|
background-color: var(--snapshots-right-skeleton-item-bg-color);
|
|
103
127
|
border-radius: 6px;
|