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.
Files changed (49) hide show
  1. package/assets/img/icons/icons-sprite-dark-3.svg +227 -227
  2. package/assets/img/icons/icons-sprite-dark-5.svg +488 -488
  3. package/assets/img/icons/icons-sprite-light-3.svg +227 -227
  4. package/assets/img/icons/icons-sprite-light-5.svg +488 -488
  5. package/assets/localization/local_be.json +6 -5
  6. package/assets/localization/local_en.json +6 -5
  7. package/assets/localization/local_hy.json +6 -5
  8. package/assets/localization/local_kk.json +6 -5
  9. package/assets/localization/local_ru.json +7 -6
  10. package/assets/localization/local_zh.json +6 -5
  11. package/components/common/browse/blocks/lib/models/types.ts +1 -1
  12. package/components/common/browse/lib/models/interfaces.ts +5 -5
  13. package/components/common/diagramMain/Header.vue +211 -211
  14. package/components/common/diagramMain/adapter/AdapterItems.vue +61 -61
  15. package/components/common/diagramMain/lib/config/initial.ts +50 -50
  16. package/components/common/diagramMain/lib/models/types.ts +21 -21
  17. package/components/common/diagramMain/lib/utils/utils.ts +331 -331
  18. package/components/common/diagramMain/modals/ManagePhysicalAdaptersModal.vue +330 -330
  19. package/components/common/diagramMain/modals/editSettings/ConfirmTeamingSettingsModal.vue +40 -40
  20. package/components/common/diagramMain/modals/editSettings/EditSettings.vue +497 -497
  21. package/components/common/diagramMain/modals/editSettings/EditSettingsModal.vue +812 -812
  22. package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue +214 -214
  23. package/components/common/diagramMain/modals/editSettings/tabs/Security.vue +189 -189
  24. package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue +163 -163
  25. package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue +175 -175
  26. package/components/common/diagramMain/modals/editSettings/tabs/TrafficShaping.vue +398 -398
  27. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +346 -346
  28. package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +205 -205
  29. package/components/common/diagramMain/modals/lib/config/diagramConfig.ts +23 -23
  30. package/components/common/diagramMain/modals/lib/config/initial.ts +180 -180
  31. package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts +90 -90
  32. package/components/common/diagramMain/modals/lib/mappers/mappers.ts +87 -87
  33. package/components/common/diagramMain/modals/lib/utils/index.ts +24 -24
  34. package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue +537 -537
  35. package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts +114 -114
  36. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue +169 -169
  37. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/SelectVmkernelAdapter.vue +159 -159
  38. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts +14 -14
  39. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts +137 -137
  40. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts +52 -52
  41. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts +19 -19
  42. package/components/common/diagramMain/port/Ports.vue +47 -47
  43. package/components/common/monitor/overview/filters/Filters.vue +234 -232
  44. package/components/common/monitor/overview/filters/lib/config/filterOptions.ts +82 -81
  45. package/components/common/monitor/resourceAllocation/lib/models/interfaces.ts +13 -0
  46. package/components/common/monitor/resourceAllocation/resourceAllocation.vue +196 -0
  47. package/components/common/wizards/network/add/lib/config/steps.ts +464 -464
  48. package/package.json +1 -1
  49. 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": "C регулярными запросамы",
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>