bfg-common 1.4.649 → 1.4.651
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/img/icons/icons-sprite-dark-3.svg +227 -227
- package/assets/img/icons/icons-sprite-dark-5.svg +488 -488
- package/assets/img/icons/icons-sprite-light-3.svg +227 -227
- package/assets/img/icons/icons-sprite-light-5.svg +488 -488
- package/assets/localization/local_be.json +6 -5
- package/assets/localization/local_en.json +6 -5
- package/assets/localization/local_hy.json +6 -5
- package/assets/localization/local_kk.json +6 -5
- package/assets/localization/local_ru.json +7 -6
- package/assets/localization/local_zh.json +6 -5
- package/components/common/browse/blocks/lib/models/types.ts +1 -1
- package/components/common/browse/lib/models/interfaces.ts +5 -5
- package/components/common/diagramMain/Header.vue +211 -211
- package/components/common/diagramMain/adapter/AdapterItems.vue +61 -61
- package/components/common/diagramMain/lib/config/initial.ts +50 -50
- package/components/common/diagramMain/lib/models/types.ts +21 -21
- package/components/common/diagramMain/lib/utils/utils.ts +331 -331
- package/components/common/diagramMain/modals/ManagePhysicalAdaptersModal.vue +330 -330
- package/components/common/diagramMain/modals/editSettings/ConfirmTeamingSettingsModal.vue +40 -40
- package/components/common/diagramMain/modals/editSettings/EditSettings.vue +497 -497
- package/components/common/diagramMain/modals/editSettings/EditSettingsModal.vue +812 -812
- package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue +214 -214
- package/components/common/diagramMain/modals/editSettings/tabs/Security.vue +189 -189
- package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue +163 -163
- package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue +175 -175
- package/components/common/diagramMain/modals/editSettings/tabs/TrafficShaping.vue +398 -398
- package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +346 -346
- package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +205 -205
- package/components/common/diagramMain/modals/lib/config/diagramConfig.ts +23 -23
- package/components/common/diagramMain/modals/lib/config/initial.ts +180 -180
- package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts +90 -90
- package/components/common/diagramMain/modals/lib/mappers/mappers.ts +87 -87
- package/components/common/diagramMain/modals/lib/utils/index.ts +24 -24
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue +537 -537
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts +114 -114
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue +169 -169
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/SelectVmkernelAdapter.vue +159 -159
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts +14 -14
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts +137 -137
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts +52 -52
- package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts +19 -19
- package/components/common/diagramMain/port/Ports.vue +47 -47
- package/components/common/monitor/overview/filters/Filters.vue +234 -232
- package/components/common/monitor/overview/filters/lib/config/filterOptions.ts +82 -81
- package/components/common/monitor/resourceAllocation/lib/models/interfaces.ts +13 -0
- package/components/common/monitor/resourceAllocation/resourceAllocation.vue +196 -0
- package/components/common/wizards/network/add/lib/config/steps.ts +464 -464
- package/package.json +1 -1
- package/components/common/modals/unsavedChanges/UnsavedChanges.vue +0 -56
|
@@ -2278,10 +2278,7 @@
|
|
|
2278
2278
|
"deleteNotesMessage": "Вы ўпэўненыя, што хочаце выдаліць нататкі з \"{vmName}\"?",
|
|
2279
2279
|
"passwordContainsInvalidCharacters": "Пароль змяшчае недапушчальныя сімвалы",
|
|
2280
2280
|
"fieldInvalidCharacters": "Гэта поле павінна ўтрымліваць ад 3 да 64 сімвалаў і можа ўключаць толькі лацінскія літары, лічбы і сімвалы \"_\", \"-\", '.'",
|
|
2281
|
-
"rowsPerPage": "Радкі на старонку"
|
|
2282
|
-
"unsavedChanges": "Непавераныя змены!",
|
|
2283
|
-
"unsavedChangesDescription": "Вы ўпэўнены, што хочаце пакінуць гэтую старонку? Непакураны змены будуць страчаны.",
|
|
2284
|
-
"leave": "Пакідаць"
|
|
2281
|
+
"rowsPerPage": "Радкі на старонку"
|
|
2285
2282
|
},
|
|
2286
2283
|
"auth": {
|
|
2287
2284
|
"welcomeTo": "Сардэчна запрашаем у",
|
|
@@ -2702,7 +2699,11 @@
|
|
|
2702
2699
|
"receivedDroppedPackets": "прынятыя адкінутыя пакеты",
|
|
2703
2700
|
"amountReceivedDroppedPackets": "колькасць прынятых адкінутых пакетаў",
|
|
2704
2701
|
"transmittedDroppedPackets": "перададзеныя адкінутыя пакеты",
|
|
2705
|
-
"amountTransmittedDroppedPackets": "колькасць перададзеных адкінутых пакетаў"
|
|
2702
|
+
"amountTransmittedDroppedPackets": "колькасць перададзеных адкінутых пакетаў",
|
|
2703
|
+
"storageReservationDetails": "Інфармацыя аб рэзерваванні месцы для захоўвання",
|
|
2704
|
+
"totalCapacity": "Агульная ўмяшчальнасць",
|
|
2705
|
+
"usedReservation": "Выкарыстанае браніраванне",
|
|
2706
|
+
"availableCapacity": "Даступная магутнасць"
|
|
2706
2707
|
},
|
|
2707
2708
|
"inventoryTabs": {
|
|
2708
2709
|
"summary": "Рэзюмэ",
|
|
@@ -2282,10 +2282,7 @@
|
|
|
2282
2282
|
"deleteNotesMessage": "Are you sure you want to delete notes from \"{vmName}\"?",
|
|
2283
2283
|
"passwordContainsInvalidCharacters": "Password contains invalid characters",
|
|
2284
2284
|
"fieldInvalidCharacters": "This field must contain from 3 to 64 characters and can include only Latin letters, numbers, and symbols '_', '-', '.'",
|
|
2285
|
-
"rowsPerPage": "Rows per page"
|
|
2286
|
-
"unsavedChanges": "Unsaved Changes!",
|
|
2287
|
-
"unsavedChangesDescription": "Are you sure you want to leave this page? Unsaved changes will be lost.",
|
|
2288
|
-
"leave": "Leave"
|
|
2285
|
+
"rowsPerPage": "Rows per page"
|
|
2289
2286
|
},
|
|
2290
2287
|
"auth": {
|
|
2291
2288
|
"welcomeTo": "Welcome to",
|
|
@@ -2706,7 +2703,11 @@
|
|
|
2706
2703
|
"receivedDroppedPackets": "received dropped packets",
|
|
2707
2704
|
"amountReceivedDroppedPackets": "amount of received dropped packets",
|
|
2708
2705
|
"transmittedDroppedPackets": "transmitted dropped packets",
|
|
2709
|
-
"amountTransmittedDroppedPackets": "amount of transmitted dropped packets"
|
|
2706
|
+
"amountTransmittedDroppedPackets": "amount of transmitted dropped packets",
|
|
2707
|
+
"storageReservationDetails": "Storage Reservation Details",
|
|
2708
|
+
"totalCapacity": "Total Capacity",
|
|
2709
|
+
"usedReservation": "Used Reservation",
|
|
2710
|
+
"availableCapacity": "Available Capacity"
|
|
2710
2711
|
},
|
|
2711
2712
|
"inventoryTabs": {
|
|
2712
2713
|
"summary": "Summary",
|
|
@@ -2282,10 +2282,7 @@
|
|
|
2282
2282
|
"deleteNotesMessage": "Համոզված եք, որ ցանկանում եք ջնջել գրառումները \"{vmName}\"-ից:",
|
|
2283
2283
|
"passwordContainsInvalidCharacters": "Գաղտնաբառը պարունակում է անվավեր նիշեր",
|
|
2284
2284
|
"fieldInvalidCharacters": "Այս դաշտը պետք է պարունակի 3-ից 64 նիշ եւ կարող է ներառել միայն լատինական տառեր, համարներ եւ խորհրդանիշներ «_», - «»:",
|
|
2285
|
-
"rowsPerPage": "Շարքեր մեկ էջում"
|
|
2286
|
-
"unsavedChanges": "Չհաստատված փոփոխություններ",
|
|
2287
|
-
"unsavedChangesDescription": "Համոզված եք, որ ցանկանում եք լքել այս էջը: Չպաշտպանված փոփոխությունները կկորչվեն:",
|
|
2288
|
-
"leave": "Հեռանալ"
|
|
2285
|
+
"rowsPerPage": "Շարքեր մեկ էջում"
|
|
2289
2286
|
},
|
|
2290
2287
|
"auth": {
|
|
2291
2288
|
"welcomeTo": "Բարի գալուստ",
|
|
@@ -2706,7 +2703,11 @@
|
|
|
2706
2703
|
"receivedDroppedPackets": "ընդունված մերժված փաթեթներ",
|
|
2707
2704
|
"amountReceivedDroppedPackets": "ընդունված մերժված փաթեթների քանակը",
|
|
2708
2705
|
"transmittedDroppedPackets": "փոխանցված դեն նետված փաթեթներ",
|
|
2709
|
-
"amountTransmittedDroppedPackets": "փոխանցված մերժված փաթեթների քանակը"
|
|
2706
|
+
"amountTransmittedDroppedPackets": "փոխանցված մերժված փաթեթների քանակը",
|
|
2707
|
+
"storageReservationDetails": "Պահեստային տարածքի ամրագրման տեղեկատվություն",
|
|
2708
|
+
"totalCapacity": "Ընդհանուր տարածություն",
|
|
2709
|
+
"usedReservation": "Օգտագործված ամրագրում",
|
|
2710
|
+
"availableCapacity": "Առկա տարածություն"
|
|
2710
2711
|
},
|
|
2711
2712
|
"inventoryTabs": {
|
|
2712
2713
|
"summary": "Ամփոփում",
|
|
@@ -2281,10 +2281,7 @@
|
|
|
2281
2281
|
"deleteNotesMessage": "Жазбаларды \"{vmName}\" ішінен жойғыңыз келетініне сенімдісіз бе?",
|
|
2282
2282
|
"passwordContainsInvalidCharacters": "Құпия сөзде жарамсыз таңбалар бар",
|
|
2283
2283
|
"fieldInvalidCharacters": "Бұл өрісте 3-тен 64 таңбадан тұруы керек және тек латын әріптері, сандар, сандар және символдар, '', '', '', ''.",
|
|
2284
|
-
"rowsPerPage": "Ағын сызықтары"
|
|
2285
|
-
"unsavedChanges": "Жетілмеген өзгерістер!",
|
|
2286
|
-
"unsavedChangesDescription": "Сіз бұл беттен кеткіңіз келе ме? Сақталмаған өзгерістер жоғалады.",
|
|
2287
|
-
"leave": "Тастау"
|
|
2284
|
+
"rowsPerPage": "Ағын сызықтары"
|
|
2288
2285
|
},
|
|
2289
2286
|
"auth": {
|
|
2290
2287
|
"welcomeTo": "Қош келдіңіз",
|
|
@@ -2705,7 +2702,11 @@
|
|
|
2705
2702
|
"receivedDroppedPackets": "тасталған пакеттер алынды",
|
|
2706
2703
|
"amountReceivedDroppedPackets": "түскен пакеттердің саны",
|
|
2707
2704
|
"transmittedDroppedPackets": "жіберілген пакеттер",
|
|
2708
|
-
"amountTransmittedDroppedPackets": "жіберілген пакеттердің саны"
|
|
2705
|
+
"amountTransmittedDroppedPackets": "жіберілген пакеттердің саны",
|
|
2706
|
+
"storageReservationDetails": "Сақтауды Брондау Мәліметтері",
|
|
2707
|
+
"totalCapacity": "Жалпы Сыйымдылығы",
|
|
2708
|
+
"usedReservation": "Пайдаланылған Брондау",
|
|
2709
|
+
"availableCapacity": "Қолжетімді Сыйымдылық"
|
|
2709
2710
|
},
|
|
2710
2711
|
"inventoryTabs": {
|
|
2711
2712
|
"summary": "Түйіндеме",
|
|
@@ -2283,10 +2283,7 @@
|
|
|
2283
2283
|
"deleteNotesMessage": "Вы уверены, что хотите удалить заметки из \"{vmName}\"?",
|
|
2284
2284
|
"passwordContainsInvalidCharacters": "Пароль содержит недопустимые символы",
|
|
2285
2285
|
"fieldInvalidCharacters": "Это поле должен содержать от 3 до 64 символов и может включать только латинские буквы, цифры, а также символы '_', '-', '.'",
|
|
2286
|
-
"rowsPerPage": "Кол-во строк"
|
|
2287
|
-
"unsavedChanges": "Несохранённые изменения!",
|
|
2288
|
-
"unsavedChangesDescription": "Вы уверены, что хотите покинуть эту страницу? Неиседлкие изменения будут потеряны.",
|
|
2289
|
-
"leave": "Покинуть"
|
|
2286
|
+
"rowsPerPage": "Кол-во строк"
|
|
2290
2287
|
},
|
|
2291
2288
|
"auth": {
|
|
2292
2289
|
"welcomeTo": "Добро пожаловать в",
|
|
@@ -2707,7 +2704,11 @@
|
|
|
2707
2704
|
"receivedDroppedPackets": "принятые отброшенные пакеты",
|
|
2708
2705
|
"amountReceivedDroppedPackets": "количество принятых отброшенных пакетов",
|
|
2709
2706
|
"transmittedDroppedPackets": "переданные отброшенные пакеты",
|
|
2710
|
-
"amountTransmittedDroppedPackets": "количество переданных отброшенных пакетов"
|
|
2707
|
+
"amountTransmittedDroppedPackets": "количество переданных отброшенных пакетов",
|
|
2708
|
+
"storageReservationDetails": "Информация о резервировании места для хранения",
|
|
2709
|
+
"totalCapacity": "Общая вместимость",
|
|
2710
|
+
"usedReservation": "Использованное бронирование",
|
|
2711
|
+
"availableCapacity": "Доступная емкость"
|
|
2711
2712
|
},
|
|
2712
2713
|
"inventoryTabs": {
|
|
2713
2714
|
"summary": "Сводка",
|
|
@@ -2788,7 +2789,7 @@
|
|
|
2788
2789
|
"events": {
|
|
2789
2790
|
"childs": "C Потомками",
|
|
2790
2791
|
"tasks": "C Тасками",
|
|
2791
|
-
"frontReqs": "
|
|
2792
|
+
"frontReqs": "С регулярными запросами",
|
|
2792
2793
|
"related": "Связанный",
|
|
2793
2794
|
"downloadChainEvents": "Загрузить все цепочку визовов",
|
|
2794
2795
|
"class": "Class",
|
|
@@ -2280,10 +2280,7 @@
|
|
|
2280
2280
|
"deleteNotesMessage": "您确定要从 \"{vmName}\" 中删除注释吗?",
|
|
2281
2281
|
"passwordContainsInvalidCharacters": "密码包含无效字符",
|
|
2282
2282
|
"fieldInvalidCharacters": "该字段必须包含3到64个字符,并且只能包括拉丁字母,数字和符号'_',',','。",
|
|
2283
|
-
"rowsPerPage": "每页行"
|
|
2284
|
-
"unsavedChanges": "未保存的更改!",
|
|
2285
|
-
"unsavedChangesDescription": "您确定要离开此页面吗?未保存的更改将丢失。",
|
|
2286
|
-
"leave": "离开"
|
|
2283
|
+
"rowsPerPage": "每页行"
|
|
2287
2284
|
},
|
|
2288
2285
|
"auth": {
|
|
2289
2286
|
"welcomeTo": "欢迎来到",
|
|
@@ -2704,7 +2701,11 @@
|
|
|
2704
2701
|
"receivedDroppedPackets": "接收到丢弃的数据包",
|
|
2705
2702
|
"amountReceivedDroppedPackets": "收到的丢弃数据包数量",
|
|
2706
2703
|
"transmittedDroppedPackets": "传输丢失的数据包",
|
|
2707
|
-
"amountTransmittedDroppedPackets": "传输的丢包数量"
|
|
2704
|
+
"amountTransmittedDroppedPackets": "传输的丢包数量",
|
|
2705
|
+
"storageReservationDetails": "储存预约详情",
|
|
2706
|
+
"totalCapacity": "总容量",
|
|
2707
|
+
"usedReservation": "已使用的预订",
|
|
2708
|
+
"availableCapacity": "可用容量"
|
|
2708
2709
|
},
|
|
2709
2710
|
"inventoryTabs": {
|
|
2710
2711
|
"summary": "概括",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type UI_T_BlocksWidth = [number, number, number]
|
|
1
|
+
export type UI_T_BlocksWidth = [number, number, number]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export interface UI_I_FileInfo {
|
|
2
|
-
type: string
|
|
3
|
-
title: string
|
|
4
|
-
value: string | number
|
|
5
|
-
}
|
|
1
|
+
export interface UI_I_FileInfo {
|
|
2
|
+
type: string
|
|
3
|
+
title: string
|
|
4
|
+
value: string | number
|
|
5
|
+
}
|
|
@@ -1,211 +1,211 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<template v-if="!props.inPortlet">
|
|
3
|
-
<div class="diagram-header">
|
|
4
|
-
<div class="diagram-header-left">
|
|
5
|
-
<atoms-the-icon
|
|
6
|
-
name="angle"
|
|
7
|
-
:class="[
|
|
8
|
-
'diagram-header__arrow-icon',
|
|
9
|
-
{
|
|
10
|
-
open: props.isShowDiagram,
|
|
11
|
-
},
|
|
12
|
-
]"
|
|
13
|
-
:data-id="`${props.testId}-toggle-icon`"
|
|
14
|
-
@click="onToggleDiagram"
|
|
15
|
-
/>
|
|
16
|
-
<a>
|
|
17
|
-
<span>
|
|
18
|
-
{{ localization.common.standardSwitch }}:
|
|
19
|
-
{{ props.diagramName }}
|
|
20
|
-
</span>
|
|
21
|
-
</a>
|
|
22
|
-
</div>
|
|
23
|
-
<div v-if="props.isShowDiagram" class="diagram-header__btn-container">
|
|
24
|
-
<span class="vertical-separator"></span>
|
|
25
|
-
<button
|
|
26
|
-
id="add-networking-button"
|
|
27
|
-
:data-id="`${props.testId}-add-networking-button`"
|
|
28
|
-
type="button"
|
|
29
|
-
@click="onShowModal('add-networking', props.diagramName)"
|
|
30
|
-
>
|
|
31
|
-
{{ localization.common.addNetworking }}
|
|
32
|
-
</button>
|
|
33
|
-
<button
|
|
34
|
-
id="switch-edit-button"
|
|
35
|
-
:data-id="`${props.testId}-edit-button`"
|
|
36
|
-
type="button"
|
|
37
|
-
@click="onShowModal('switch-edit')"
|
|
38
|
-
>
|
|
39
|
-
{{ localization.common.edit }}
|
|
40
|
-
</button>
|
|
41
|
-
<button
|
|
42
|
-
id="switch-manage-physical-adapters-button"
|
|
43
|
-
:data-id="`${props.testId}-manage-physical-adapters-button`"
|
|
44
|
-
type="button"
|
|
45
|
-
@click="onShowModal('switch-manage-physical-adapters')"
|
|
46
|
-
>
|
|
47
|
-
{{ localization.common.managePhysicalAdapters }}
|
|
48
|
-
</button>
|
|
49
|
-
<div class="diagram-main-actions-dots">
|
|
50
|
-
<atoms-collapse-nav
|
|
51
|
-
popup-class="diagram-main-actions__popup"
|
|
52
|
-
:close-after-click="true"
|
|
53
|
-
:items="switchMainNavigation"
|
|
54
|
-
:test-id="`${props.testId}-actions`"
|
|
55
|
-
@change="onShowModal"
|
|
56
|
-
/>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
<hr class="horizontal-separator" />
|
|
61
|
-
</template>
|
|
62
|
-
</template>
|
|
63
|
-
|
|
64
|
-
<script setup lang="ts">
|
|
65
|
-
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
66
|
-
import type {
|
|
67
|
-
UI_I_NavigationItem,
|
|
68
|
-
UI_I_ModalsInitialData,
|
|
69
|
-
} from '~/components/common/diagramMain/lib/models/interfaces'
|
|
70
|
-
import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals/lib/config'
|
|
71
|
-
|
|
72
|
-
const props = defineProps<{
|
|
73
|
-
inPortlet: boolean
|
|
74
|
-
isShowDiagram: boolean
|
|
75
|
-
diagramName: string
|
|
76
|
-
testId: string
|
|
77
|
-
}>()
|
|
78
|
-
|
|
79
|
-
const emits = defineEmits<{
|
|
80
|
-
(event: 'toggle-diagram'): void
|
|
81
|
-
(
|
|
82
|
-
event: 'show-modal',
|
|
83
|
-
modalName: string,
|
|
84
|
-
properties?: UI_I_ModalsInitialData
|
|
85
|
-
): void
|
|
86
|
-
}>()
|
|
87
|
-
|
|
88
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
89
|
-
|
|
90
|
-
const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
|
|
91
|
-
switchMainNavigationFunc(localization.value, props.testId)
|
|
92
|
-
)
|
|
93
|
-
|
|
94
|
-
const onToggleDiagram = () => emits('toggle-diagram')
|
|
95
|
-
|
|
96
|
-
const onShowModal = (modalName: string, diagramName?: string) =>
|
|
97
|
-
diagramName
|
|
98
|
-
? emits('show-modal', modalName, { switch_name: diagramName })
|
|
99
|
-
: emits('show-modal', modalName)
|
|
100
|
-
</script>
|
|
101
|
-
|
|
102
|
-
<style scoped lang="scss">
|
|
103
|
-
:root.dark-theme {
|
|
104
|
-
.diagram-header {
|
|
105
|
-
&-left {
|
|
106
|
-
a {
|
|
107
|
-
span {
|
|
108
|
-
color: #79c6e6;
|
|
109
|
-
|
|
110
|
-
&:hover {
|
|
111
|
-
color: #49afd9;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&__btn-container {
|
|
118
|
-
button {
|
|
119
|
-
color: #89cbdf;
|
|
120
|
-
|
|
121
|
-
&:hover {
|
|
122
|
-
color: #57c8ea;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.diagram-header {
|
|
130
|
-
display: flex;
|
|
131
|
-
padding-left: 8px;
|
|
132
|
-
a {
|
|
133
|
-
color: #0072a3;
|
|
134
|
-
cursor: pointer;
|
|
135
|
-
font-weight: 700;
|
|
136
|
-
user-select: none;
|
|
137
|
-
line-height: 20px;
|
|
138
|
-
span {
|
|
139
|
-
font-weight: 700;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
&-left {
|
|
144
|
-
display: flex;
|
|
145
|
-
flex-wrap: nowrap;
|
|
146
|
-
color: #49afd9;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
&__arrow-icon {
|
|
150
|
-
width: 16px;
|
|
151
|
-
height: 16px;
|
|
152
|
-
margin-right: 4px;
|
|
153
|
-
transform: rotate(90deg);
|
|
154
|
-
align-self: center;
|
|
155
|
-
fill: var(--triger-icon-color);
|
|
156
|
-
cursor: pointer;
|
|
157
|
-
&.open {
|
|
158
|
-
transform: rotate(180deg);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
&__btn-container {
|
|
163
|
-
display: flex;
|
|
164
|
-
|
|
165
|
-
button {
|
|
166
|
-
font-size: 11px;
|
|
167
|
-
height: 24px;
|
|
168
|
-
border: none;
|
|
169
|
-
background: none;
|
|
170
|
-
margin-right: 0;
|
|
171
|
-
cursor: pointer;
|
|
172
|
-
display: inline-block;
|
|
173
|
-
white-space: nowrap;
|
|
174
|
-
text-align: center;
|
|
175
|
-
text-transform: uppercase;
|
|
176
|
-
color: #49afd9;
|
|
177
|
-
line-height: 20px;
|
|
178
|
-
max-height: 16.8px;
|
|
179
|
-
padding: 0 14px;
|
|
180
|
-
font-weight: 500;
|
|
181
|
-
letter-spacing: 1px;
|
|
182
|
-
|
|
183
|
-
&:hover {
|
|
184
|
-
color: #004d8a;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.diagram-main-actions-dots {
|
|
191
|
-
position: relative;
|
|
192
|
-
transform: translate(62px, -11px);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.horizontal-separator {
|
|
196
|
-
margin: 5px 10px 10px;
|
|
197
|
-
border-left: 0;
|
|
198
|
-
border-right: 0;
|
|
199
|
-
border-color: #ddd;
|
|
200
|
-
box-sizing: content-box;
|
|
201
|
-
height: 0;
|
|
202
|
-
overflow: visible;
|
|
203
|
-
border-top: 0px solid #eee;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.vertical-separator {
|
|
207
|
-
border: 1px solid #ddd;
|
|
208
|
-
border-left: none;
|
|
209
|
-
margin: 0 3px 0 14px;
|
|
210
|
-
}
|
|
211
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<template v-if="!props.inPortlet">
|
|
3
|
+
<div class="diagram-header">
|
|
4
|
+
<div class="diagram-header-left">
|
|
5
|
+
<atoms-the-icon
|
|
6
|
+
name="angle"
|
|
7
|
+
:class="[
|
|
8
|
+
'diagram-header__arrow-icon',
|
|
9
|
+
{
|
|
10
|
+
open: props.isShowDiagram,
|
|
11
|
+
},
|
|
12
|
+
]"
|
|
13
|
+
:data-id="`${props.testId}-toggle-icon`"
|
|
14
|
+
@click="onToggleDiagram"
|
|
15
|
+
/>
|
|
16
|
+
<a>
|
|
17
|
+
<span>
|
|
18
|
+
{{ localization.common.standardSwitch }}:
|
|
19
|
+
{{ props.diagramName }}
|
|
20
|
+
</span>
|
|
21
|
+
</a>
|
|
22
|
+
</div>
|
|
23
|
+
<div v-if="props.isShowDiagram" class="diagram-header__btn-container">
|
|
24
|
+
<span class="vertical-separator"></span>
|
|
25
|
+
<button
|
|
26
|
+
id="add-networking-button"
|
|
27
|
+
:data-id="`${props.testId}-add-networking-button`"
|
|
28
|
+
type="button"
|
|
29
|
+
@click="onShowModal('add-networking', props.diagramName)"
|
|
30
|
+
>
|
|
31
|
+
{{ localization.common.addNetworking }}
|
|
32
|
+
</button>
|
|
33
|
+
<button
|
|
34
|
+
id="switch-edit-button"
|
|
35
|
+
:data-id="`${props.testId}-edit-button`"
|
|
36
|
+
type="button"
|
|
37
|
+
@click="onShowModal('switch-edit')"
|
|
38
|
+
>
|
|
39
|
+
{{ localization.common.edit }}
|
|
40
|
+
</button>
|
|
41
|
+
<button
|
|
42
|
+
id="switch-manage-physical-adapters-button"
|
|
43
|
+
:data-id="`${props.testId}-manage-physical-adapters-button`"
|
|
44
|
+
type="button"
|
|
45
|
+
@click="onShowModal('switch-manage-physical-adapters')"
|
|
46
|
+
>
|
|
47
|
+
{{ localization.common.managePhysicalAdapters }}
|
|
48
|
+
</button>
|
|
49
|
+
<div class="diagram-main-actions-dots">
|
|
50
|
+
<atoms-collapse-nav
|
|
51
|
+
popup-class="diagram-main-actions__popup"
|
|
52
|
+
:close-after-click="true"
|
|
53
|
+
:items="switchMainNavigation"
|
|
54
|
+
:test-id="`${props.testId}-actions`"
|
|
55
|
+
@change="onShowModal"
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<hr class="horizontal-separator" />
|
|
61
|
+
</template>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script setup lang="ts">
|
|
65
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
66
|
+
import type {
|
|
67
|
+
UI_I_NavigationItem,
|
|
68
|
+
UI_I_ModalsInitialData,
|
|
69
|
+
} from '~/components/common/diagramMain/lib/models/interfaces'
|
|
70
|
+
import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals/lib/config'
|
|
71
|
+
|
|
72
|
+
const props = defineProps<{
|
|
73
|
+
inPortlet: boolean
|
|
74
|
+
isShowDiagram: boolean
|
|
75
|
+
diagramName: string
|
|
76
|
+
testId: string
|
|
77
|
+
}>()
|
|
78
|
+
|
|
79
|
+
const emits = defineEmits<{
|
|
80
|
+
(event: 'toggle-diagram'): void
|
|
81
|
+
(
|
|
82
|
+
event: 'show-modal',
|
|
83
|
+
modalName: string,
|
|
84
|
+
properties?: UI_I_ModalsInitialData
|
|
85
|
+
): void
|
|
86
|
+
}>()
|
|
87
|
+
|
|
88
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
89
|
+
|
|
90
|
+
const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
|
|
91
|
+
switchMainNavigationFunc(localization.value, props.testId)
|
|
92
|
+
)
|
|
93
|
+
|
|
94
|
+
const onToggleDiagram = () => emits('toggle-diagram')
|
|
95
|
+
|
|
96
|
+
const onShowModal = (modalName: string, diagramName?: string) =>
|
|
97
|
+
diagramName
|
|
98
|
+
? emits('show-modal', modalName, { switch_name: diagramName })
|
|
99
|
+
: emits('show-modal', modalName)
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<style scoped lang="scss">
|
|
103
|
+
:root.dark-theme {
|
|
104
|
+
.diagram-header {
|
|
105
|
+
&-left {
|
|
106
|
+
a {
|
|
107
|
+
span {
|
|
108
|
+
color: #79c6e6;
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
color: #49afd9;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&__btn-container {
|
|
118
|
+
button {
|
|
119
|
+
color: #89cbdf;
|
|
120
|
+
|
|
121
|
+
&:hover {
|
|
122
|
+
color: #57c8ea;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.diagram-header {
|
|
130
|
+
display: flex;
|
|
131
|
+
padding-left: 8px;
|
|
132
|
+
a {
|
|
133
|
+
color: #0072a3;
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
font-weight: 700;
|
|
136
|
+
user-select: none;
|
|
137
|
+
line-height: 20px;
|
|
138
|
+
span {
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&-left {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-wrap: nowrap;
|
|
146
|
+
color: #49afd9;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&__arrow-icon {
|
|
150
|
+
width: 16px;
|
|
151
|
+
height: 16px;
|
|
152
|
+
margin-right: 4px;
|
|
153
|
+
transform: rotate(90deg);
|
|
154
|
+
align-self: center;
|
|
155
|
+
fill: var(--triger-icon-color);
|
|
156
|
+
cursor: pointer;
|
|
157
|
+
&.open {
|
|
158
|
+
transform: rotate(180deg);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__btn-container {
|
|
163
|
+
display: flex;
|
|
164
|
+
|
|
165
|
+
button {
|
|
166
|
+
font-size: 11px;
|
|
167
|
+
height: 24px;
|
|
168
|
+
border: none;
|
|
169
|
+
background: none;
|
|
170
|
+
margin-right: 0;
|
|
171
|
+
cursor: pointer;
|
|
172
|
+
display: inline-block;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
text-align: center;
|
|
175
|
+
text-transform: uppercase;
|
|
176
|
+
color: #49afd9;
|
|
177
|
+
line-height: 20px;
|
|
178
|
+
max-height: 16.8px;
|
|
179
|
+
padding: 0 14px;
|
|
180
|
+
font-weight: 500;
|
|
181
|
+
letter-spacing: 1px;
|
|
182
|
+
|
|
183
|
+
&:hover {
|
|
184
|
+
color: #004d8a;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.diagram-main-actions-dots {
|
|
191
|
+
position: relative;
|
|
192
|
+
transform: translate(62px, -11px);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.horizontal-separator {
|
|
196
|
+
margin: 5px 10px 10px;
|
|
197
|
+
border-left: 0;
|
|
198
|
+
border-right: 0;
|
|
199
|
+
border-color: #ddd;
|
|
200
|
+
box-sizing: content-box;
|
|
201
|
+
height: 0;
|
|
202
|
+
overflow: visible;
|
|
203
|
+
border-top: 0px solid #eee;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.vertical-separator {
|
|
207
|
+
border: 1px solid #ddd;
|
|
208
|
+
border-left: none;
|
|
209
|
+
margin: 0 3px 0 14px;
|
|
210
|
+
}
|
|
211
|
+
</style>
|