bfg-common 1.4.734 → 1.4.736
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 +1 -0
- package/assets/localization/local_en.json +1 -0
- package/assets/localization/local_hy.json +1 -0
- package/assets/localization/local_kk.json +1 -0
- package/assets/localization/local_ru.json +1 -0
- package/assets/localization/local_zh.json +1 -0
- package/components/common/browse/blocks/lib/models/types.ts +1 -1
- package/components/common/browse/lib/models/interfaces.ts +5 -5
- package/components/common/{monitor/advanced/tools/chartOptionsModal → chartOptionsModal}/counters/timespan/form/Form.vue +17 -12
- package/components/common/{pages/hardwareHealth/historyTestimony/tools/chartOptionsModal → chartOptionsModal}/counters/timespan/form/lib/config/dateForm.ts +1 -0
- 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/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/advanced/Advanced.vue +5 -0
- package/components/common/monitor/advanced/tools/Tools.vue +9 -2
- package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue +9 -2
- package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue +2 -0
- package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/Timespan.vue +3 -1
- package/components/common/monitor/overview/filters/Filters.vue +3 -0
- package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModal.vue +15 -5
- package/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker.ts +24 -14
- package/components/common/pages/hardwareHealth/HardwareHealth.vue +12 -5
- package/components/common/pages/hardwareHealth/historyTestimony/Graph.vue +14 -2
- package/components/common/pages/hardwareHealth/historyTestimony/tools/Tools.vue +13 -4
- package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue +21 -6
- package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/Counters.vue +6 -6
- package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/Timespan.vue +7 -7
- package/package.json +2 -2
- package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/lib/config/dateForm.ts +0 -114
- package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/form/Form.vue +0 -539
|
@@ -2719,6 +2719,7 @@
|
|
|
2719
2719
|
"timeToShouldBeLaterTimeFrom": "Ўказаны дыяпазон часу недапушчальны. Дата \" да \"павінна быць пазней даты\"ад\".",
|
|
2720
2720
|
"timeRangeShouldNotBeSmallerThanHour": "Ўказаны дыяпазон часу недапушчальны. Ён не павінен быць менш 1 гадзіны.",
|
|
2721
2721
|
"timeRangeShouldNotBeMoreThanMonth": "Указаны дыяпазон часу несапраўдны. Яно не павінна быць больш за 1 месяца.",
|
|
2722
|
+
"timeRangeShouldNotBeMoreThanValidTo": "Указаны дыяпазон часу несапраўдны. Яно не павінна перавышаць {0}.",
|
|
2722
2723
|
"overview": "Агляд",
|
|
2723
2724
|
"spaceUtilization": "Выкарыстанне прасторы",
|
|
2724
2725
|
"changeCustomInterval": "Зменіце карыстацкі інтэрвал",
|
|
@@ -2723,6 +2723,7 @@
|
|
|
2723
2723
|
"timeToShouldBeLaterTimeFrom": "The specified time range is not valid. The \"to\" date should be later than the \"from\" date.",
|
|
2724
2724
|
"timeRangeShouldNotBeSmallerThanHour": "The specified time range is not valid. It should not be smaller than 1 hour.",
|
|
2725
2725
|
"timeRangeShouldNotBeMoreThanMonth": "The specified time range is not valid. It should not be more than 1 month.",
|
|
2726
|
+
"timeRangeShouldNotBeMoreThanValidTo": "The specified time range is not valid. It should not be more than {0}.",
|
|
2726
2727
|
"overview": "Overview",
|
|
2727
2728
|
"spaceUtilization": "Space Utilization",
|
|
2728
2729
|
"changeCustomInterval": "Change custom interval",
|
|
@@ -2723,6 +2723,7 @@
|
|
|
2723
2723
|
"timeToShouldBeLaterTimeFrom": "Նշված ժամանակային միջակայքն անընդունելի է: \"Նախքան\" ամսաթիվը պետք է լինի ավելի ուշ, քան \"from\"ամսաթիվը:",
|
|
2724
2724
|
"timeRangeShouldNotBeSmallerThanHour": "The specified time range is not valid. It should not be smaller than 1 hour.",
|
|
2725
2725
|
"timeRangeShouldNotBeMoreThanMonth": "Նշված ժամանակային միջակայքը վավեր չէ: Այն չպետք է լինի 1 ամսից ավելի։",
|
|
2726
|
+
"timeRangeShouldNotBeMoreThanValidTo": "Նշված ժամանակային միջակայքը վավեր չէ: Այն չպետք է լինի {0}-ից ավելի:",
|
|
2726
2727
|
"overview": "Ակնարկ",
|
|
2727
2728
|
"spaceUtilization": "Օգտագործելով տարածություն",
|
|
2728
2729
|
"changeCustomInterval": "Փոխեք օգտագործողի միջակայքը",
|
|
@@ -2722,6 +2722,7 @@
|
|
|
2722
2722
|
"timeToShouldBeLaterTimeFrom": "The specified time range is not valid. The \"to\" date should be later than the \"from\" date.",
|
|
2723
2723
|
"timeRangeShouldNotBeSmallerThanHour": "The specified time range is not valid. It should not be smaller than 1 hour.",
|
|
2724
2724
|
"timeRangeShouldNotBeMoreThanMonth": "Көрсетілген уақыт аралығы жарамсыз. 1 айдан аспауы керек.",
|
|
2725
|
+
"timeRangeShouldNotBeMoreThanValidTo": "Көрсетілген уақыт аралығы жарамсыз. Ол {0} аспауы керек.",
|
|
2725
2726
|
"overview": "Шолу",
|
|
2726
2727
|
"spaceUtilization": "Кеңістікті пайдалану",
|
|
2727
2728
|
"changeCustomInterval": "Пайдаланушы аралығын өзгертіңіз",
|
|
@@ -2724,6 +2724,7 @@
|
|
|
2724
2724
|
"timeToShouldBeLaterTimeFrom": "Указанный диапазон времени недопустим. Дата \"до\" должна быть позже даты \"от\".",
|
|
2725
2725
|
"timeRangeShouldNotBeSmallerThanHour": "Указанный диапазон времени недопустим. Он не должен быть меньше 1 часа.",
|
|
2726
2726
|
"timeRangeShouldNotBeMoreThanMonth": "Указанный диапазон времени недействителен. Он не должен быть больше 1 месяца.",
|
|
2727
|
+
"timeRangeShouldNotBeMoreThanValidTo": "Указанный временной диапазон недействителен. Он не должен быть больше {0}.",
|
|
2727
2728
|
"overview": "Обзор",
|
|
2728
2729
|
"spaceUtilization": "Использование пространства",
|
|
2729
2730
|
"changeCustomInterval": "Измените пользовательский интервал",
|
|
@@ -2721,6 +2721,7 @@
|
|
|
2721
2721
|
"timeToShouldBeLaterTimeFrom": "指定的时间范围无效。 “结束”日期应晚于“开始”日期。",
|
|
2722
2722
|
"timeRangeShouldNotBeSmallerThanHour": "指定的时间范围无效。 不应小于1小时。",
|
|
2723
2723
|
"timeRangeShouldNotBeMoreThanMonth": "指定的时间范围无效。它不应超过 1 个月。",
|
|
2724
|
+
"timeRangeShouldNotBeMoreThanValidTo": "指定的时间范围无效。它不应超过 {0}。",
|
|
2724
2725
|
"overview": "概述",
|
|
2725
2726
|
"spaceUtilization": "空间利用",
|
|
2726
2727
|
"changeCustomInterval": "更改自定义间隔",
|
|
@@ -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
|
+
}
|
|
@@ -184,7 +184,9 @@
|
|
|
184
184
|
{ active: localPeriodType === 'period' },
|
|
185
185
|
]"
|
|
186
186
|
>
|
|
187
|
-
<span>
|
|
187
|
+
<span>
|
|
188
|
+
({{ localization.inventoryMonitor.isoTimeFormat }})
|
|
189
|
+
</span>
|
|
188
190
|
</td>
|
|
189
191
|
</tr>
|
|
190
192
|
</tbody>
|
|
@@ -226,7 +228,7 @@ import {
|
|
|
226
228
|
timespanFunc,
|
|
227
229
|
customTimeFunc,
|
|
228
230
|
chartTypeFunc,
|
|
229
|
-
} from '~/components/common/
|
|
231
|
+
} from '~/components/common/chartOptionsModal/counters/timespan/form/lib/config/dateForm'
|
|
230
232
|
|
|
231
233
|
const props = defineProps<{
|
|
232
234
|
language: string
|
|
@@ -239,6 +241,7 @@ const props = defineProps<{
|
|
|
239
241
|
customDateTo: string
|
|
240
242
|
customTimeFrom: string
|
|
241
243
|
customTimeTo: string
|
|
244
|
+
validDateEnd: number
|
|
242
245
|
}>()
|
|
243
246
|
|
|
244
247
|
const emits = defineEmits<{
|
|
@@ -402,17 +405,19 @@ const currentTimeTo = ref<string>('')
|
|
|
402
405
|
const getCurrentTime = (): void => {
|
|
403
406
|
localCurrentDateFrom.value =
|
|
404
407
|
props.customDateFrom || $formattedDate(yesterday, '')
|
|
405
|
-
currentDateTo.value =
|
|
408
|
+
currentDateTo.value =
|
|
409
|
+
props.customDateTo || $formattedDate(props.validDateEnd, '')
|
|
406
410
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
currentTimeTo.value =
|
|
411
|
+
currentTimeFrom.value =
|
|
412
|
+
props.customTimeFrom || format(new Date(), $getTimeFormat(true))
|
|
413
|
+
currentTimeTo.value =
|
|
414
|
+
props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
|
|
410
415
|
}
|
|
411
416
|
|
|
412
|
-
const onUpdateDateFrom = (
|
|
413
|
-
if (!
|
|
417
|
+
const onUpdateDateFrom = (value: number): void => {
|
|
418
|
+
if (!value) return
|
|
414
419
|
|
|
415
|
-
localCurrentDateFrom.value = $formattedDate(new Date(
|
|
420
|
+
localCurrentDateFrom.value = $formattedDate(new Date(value), '')
|
|
416
421
|
}
|
|
417
422
|
watch(localCurrentDateFrom, (newValue) => {
|
|
418
423
|
emits('update-custom-date-from', newValue)
|
|
@@ -421,10 +426,10 @@ watch(localCurrentDateFrom, (newValue) => {
|
|
|
421
426
|
if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
|
|
422
427
|
})
|
|
423
428
|
|
|
424
|
-
const onUpdateDateTo = (
|
|
425
|
-
if (!
|
|
429
|
+
const onUpdateDateTo = (value: number): void => {
|
|
430
|
+
if (!value) return
|
|
426
431
|
|
|
427
|
-
currentDateTo.value = $formattedDate(new Date(
|
|
432
|
+
currentDateTo.value = $formattedDate(new Date(value), '')
|
|
428
433
|
}
|
|
429
434
|
watch(currentDateTo, (newValue) => {
|
|
430
435
|
emits('update-custom-date-to', newValue)
|
|
@@ -87,6 +87,7 @@ export const chartTypeFunc = (
|
|
|
87
87
|
]
|
|
88
88
|
|
|
89
89
|
const getCorrectRuForm = (value: number, type: string): string => {
|
|
90
|
+
// TODO поправить используя correctRuUnit из плагина date
|
|
90
91
|
const forms: UI_I_ArbitraryObject<string[]> = {
|
|
91
92
|
hour: ['Час', 'Часа', 'Часов'],
|
|
92
93
|
day: ['День', 'Дня', 'Дней'],
|
|
@@ -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>
|