bfg-common 1.3.206 → 1.3.208

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.
@@ -1,89 +1,95 @@
1
- <template>
2
- <div :class="['alert', status]">
3
- <div class="alert-items">
4
- <slot v-if="$slots.headline" name="headline" :icon="iconName" />
5
-
6
- <slot name="body">
7
- <div v-for="(item, key) in items" :key="key" class="alert-item">
8
- <div v-if="!$slots.headline" class="alert-icon-wrapper">
9
- <atoms-the-icon
10
- :class="['alert-icon', iconName]"
11
- :name="iconName"
12
- />
13
- </div>
14
-
15
- <slot :item="item" :index="key">
16
- <span class="alert-text">{{ item }}</span>
17
- </slot>
18
- </div>
19
- </slot>
20
- </div>
21
- <button
22
- v-if="!hideCloseIcon"
23
- :id="`${props.testId}-close-button`"
24
- class="close"
25
- @click="removeAlert"
26
- >
27
- <atoms-the-icon class="alert-icon" name="close" />
28
- </button>
29
- </div>
30
- </template>
31
-
32
- <script setup lang="ts">
33
- import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
34
-
35
- const props = withDefaults(
36
- defineProps<{
37
- testId?: string
38
- status: 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
39
- items: string[] | any
40
- hideCloseIcon?: boolean
41
- }>(),
42
- { testId: 'ui-alert' }
43
- )
44
- const emits = defineEmits<{
45
- (event: 'remove'): void
46
- }>()
47
-
48
- const removeAlert = (): void => {
49
- emits('remove')
50
- }
51
- const iconName = computed<string>(() => UI_E_IconsByStatus[props.status])
52
- </script>
53
-
54
- <style scoped lang="scss">
55
- .alert {
56
- &-info {
57
- fill: #004d8a;
58
- }
59
- &-warning {
60
- background-color: var(--alert-warning-bg-color);
61
- border: 1px solid var(--alert-warning-border-color);
62
- fill: var(--alert-warning-icon-color);
63
- }
64
-
65
- &-icon {
66
- width: 20px;
67
- height: 20px;
68
- }
69
- &-text {
70
- color: var(--global-font-color5);
71
- }
72
-
73
- button.close:focus {
74
- box-shadow: none;
75
- }
76
- }
77
- </style>
78
- <style>
79
- :root {
80
- --alert-warning-icon-color: #d28f00;
81
- --alert-warning-bg-color: #fef3b5;
82
- --alert-warning-border-color: #d28f00;
83
- }
84
- :root.dark-theme {
85
- --alert-warning-icon-color: currentColor;
86
- --alert-warning-bg-color: #816709;
87
- --alert-warning-border-color: transparent;
88
- }
89
- </style>
1
+ <template>
2
+ <div :class="['alert', status]">
3
+ <div class="alert-items">
4
+ <slot v-if="$slots.headline" name="headline" :icon="iconName" />
5
+
6
+ <slot name="body">
7
+ <div v-for="(item, key) in items" :key="key" class="alert-item">
8
+ <div v-if="!$slots.headline" class="alert-icon-wrapper">
9
+ <atoms-the-icon
10
+ :class="['alert-icon', iconName]"
11
+ :name="iconName"
12
+ />
13
+ </div>
14
+
15
+ <slot :item="item" :index="key">
16
+ <span class="alert-text">{{ item }}</span>
17
+ </slot>
18
+ </div>
19
+ </slot>
20
+ </div>
21
+ <button
22
+ v-if="!hideCloseIcon"
23
+ :id="`${props.testId}-close-button`"
24
+ class="close"
25
+ @click="removeAlert"
26
+ >
27
+ <atoms-the-icon class="alert-icon" name="close" />
28
+ </button>
29
+ </div>
30
+ </template>
31
+
32
+ <script setup lang="ts">
33
+ import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
34
+ import type {
35
+ UI_T_AlertStatus,
36
+ UI_T_AlertIcon,
37
+ } from '~/components/atoms/alert/lib/models/types'
38
+
39
+ const props = withDefaults(
40
+ defineProps<{
41
+ status: UI_T_AlertStatus
42
+ items: string[] | any
43
+ testId?: string
44
+ hideCloseIcon?: boolean
45
+ }>(),
46
+ { testId: 'ui-alert' }
47
+ )
48
+ const emits = defineEmits<{
49
+ (event: 'remove'): void
50
+ }>()
51
+
52
+ const removeAlert = (): void => {
53
+ emits('remove')
54
+ }
55
+ const iconName = computed<UI_T_AlertIcon>(
56
+ () => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
57
+ )
58
+ </script>
59
+
60
+ <style scoped lang="scss">
61
+ .alert {
62
+ &-info {
63
+ fill: #004d8a;
64
+ }
65
+ &-warning {
66
+ background-color: var(--alert-warning-bg-color);
67
+ border: 1px solid var(--alert-warning-border-color);
68
+ fill: var(--alert-warning-icon-color);
69
+ }
70
+
71
+ &-icon {
72
+ width: 20px;
73
+ height: 20px;
74
+ }
75
+ &-text {
76
+ color: var(--global-font-color5);
77
+ }
78
+
79
+ button.close:focus {
80
+ box-shadow: none;
81
+ }
82
+ }
83
+ </style>
84
+ <style>
85
+ :root {
86
+ --alert-warning-icon-color: #d28f00;
87
+ --alert-warning-bg-color: #fef3b5;
88
+ --alert-warning-border-color: #d28f00;
89
+ }
90
+ :root.dark-theme {
91
+ --alert-warning-icon-color: currentColor;
92
+ --alert-warning-bg-color: #816709;
93
+ --alert-warning-border-color: transparent;
94
+ }
95
+ </style>
@@ -1,167 +1,170 @@
1
- <template>
2
- <div class="notification">
3
- <div
4
- class="notification-container-wrap animation"
5
- :class="{ active: isActive }"
6
- >
7
- <div class="notification-container">
8
- <div v-show="props.show" class="toast">
9
- <atoms-the-icon
10
- class="toast-icon"
11
- :class="iconName !== 'info' && 'with'"
12
- :name="iconName"
13
- />
14
- <div class="toast-content">
15
- <div class="flex-align-center flex-space-between">
16
- <h4>{{ props.title }}</h4>
17
- <button
18
- :id="`${props.testId}-close-button`"
19
- :title="localization.closeNotification"
20
- @click="hide"
21
- >
22
- <atoms-the-icon name="close" />
23
- </button>
24
- </div>
25
- <div class="description">
26
- <slot>
27
- <p class="pre-line">{{ props.description }}</p>
28
- </slot>
29
- </div>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
34
- </div>
35
- </template>
36
-
37
- <script setup lang="ts">
38
- import { UI_I_Localization } from '~/lib/models/interfaces'
39
- import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
40
- import { UI_T_Status } from '~/components/atoms/alert/lib/models/types'
41
-
42
- const props = withDefaults(
43
- defineProps<{
44
- status: UI_T_Status
45
- id: number
46
- show: boolean
47
- title: string
48
- description: string
49
- testId?: string
50
- }>(),
51
- { testId: 'ui-notification' }
52
- )
53
- const emits = defineEmits<{
54
- (event: 'hide', value: number): void
55
- }>()
56
-
57
- const localization = computed<UI_I_Localization>(() => useLocal())
58
- const hide = (): void => {
59
- isActive.value = false
60
-
61
- setTimeout(() => {
62
- emits('hide', props.id)
63
- }, 200)
64
- }
65
- const isActive = ref<boolean>(false)
66
-
67
- const iconName = computed<string>(
68
- () => UI_E_IconsByStatusNotification[props.status]
69
- )
70
-
71
- setTimeout(() => {
72
- isActive.value = true
73
- }, 1000)
74
- </script>
75
-
76
- <style scoped lang="scss">
77
- @import '~/assets/scss/common/mixins.scss';
78
-
79
- .notification {
80
- .notification-container-wrap {
81
- display: block;
82
- margin-top: 10px;
83
- width: 414px;
84
- position: relative;
85
- right: -600px;
86
- opacity: 0;
87
-
88
- &.active {
89
- right: 0;
90
- opacity: 1;
91
- }
92
-
93
- .notification-container {
94
- @include flex($dir: column, $just: flex-end);
95
- margin-right: 0;
96
-
97
- .toast {
98
- @include flex($dir: row);
99
- background-color: #25333d;
100
- border-radius: 3px;
101
- box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
102
- margin: 0;
103
- padding: 12px;
104
- transform: scale(1);
105
- transform-origin: 100% 0;
106
- width: 100%;
107
-
108
- .toast-icon {
109
- width: 36px;
110
- height: 36px;
111
- &.with {
112
- width: 26px;
113
- height: 26px;
114
- }
115
- }
116
-
117
- .toast-content {
118
- padding-left: 12px;
119
- width: 100%;
120
-
121
- h4 {
122
- color: #e9ecef;
123
- font-size: 14px;
124
- font-weight: 500;
125
- line-height: 24px;
126
- margin-top: 0;
127
- max-width: 240px;
128
- overflow: hidden;
129
- text-overflow: ellipsis;
130
- white-space: nowrap;
131
- }
132
-
133
- button {
134
- background: transparent;
135
- border: none;
136
- border-radius: 100%;
137
- cursor: pointer;
138
- display: inline-block;
139
- height: 30px;
140
- position: absolute;
141
- right: 8px;
142
- top: 8px;
143
- width: 30px;
144
-
145
- svg {
146
- width: 16px;
147
- height: 16px;
148
- fill: #adbbc4;
149
- margin-left: 1px;
150
- margin-top: -8px;
151
- }
152
- }
153
-
154
- .description {
155
- max-height: 60vh;
156
- overflow: auto;
157
-
158
- p {
159
- color: var(--global-font-color6);
160
- }
161
- }
162
- }
163
- }
164
- }
165
- }
166
- }
167
- </style>
1
+ <template>
2
+ <div class="notification">
3
+ <div
4
+ class="notification-container-wrap animation"
5
+ :class="{ active: isActive }"
6
+ >
7
+ <div class="notification-container">
8
+ <div v-show="props.show" class="toast">
9
+ <atoms-the-icon
10
+ class="toast-icon"
11
+ :class="iconName !== 'info' && 'with'"
12
+ :name="iconName"
13
+ />
14
+ <div class="toast-content">
15
+ <div class="flex-align-center flex-space-between">
16
+ <h4>{{ props.title }}</h4>
17
+ <button
18
+ :id="`${props.testId}-close-button`"
19
+ :title="localization.closeNotification"
20
+ @click="hide"
21
+ >
22
+ <atoms-the-icon name="close" />
23
+ </button>
24
+ </div>
25
+ <div class="description">
26
+ <slot>
27
+ <p class="pre-line">{{ props.description }}</p>
28
+ </slot>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </template>
36
+
37
+ <script setup lang="ts">
38
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
39
+ import type {
40
+ UI_T_NotificationStatus,
41
+ UI_T_NotificationIcon,
42
+ } from '~/components/atoms/alert/lib/models/types'
43
+ import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
44
+
45
+ const props = withDefaults(
46
+ defineProps<{
47
+ status: UI_T_NotificationStatus
48
+ id: number
49
+ show: boolean
50
+ title: string
51
+ description: string
52
+ testId?: string
53
+ }>(),
54
+ { testId: 'ui-notification' }
55
+ )
56
+ const emits = defineEmits<{
57
+ (event: 'hide', value: number): void
58
+ }>()
59
+
60
+ const localization = computed<UI_I_Localization>(() => useLocal())
61
+ const hide = (): void => {
62
+ isActive.value = false
63
+
64
+ setTimeout(() => {
65
+ emits('hide', props.id)
66
+ }, 200)
67
+ }
68
+ const isActive = ref<boolean>(false)
69
+
70
+ const iconName = computed<UI_T_NotificationIcon>(
71
+ () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
72
+ )
73
+
74
+ setTimeout(() => {
75
+ isActive.value = true
76
+ }, 1000)
77
+ </script>
78
+
79
+ <style scoped lang="scss">
80
+ @import '~/assets/scss/common/mixins.scss';
81
+
82
+ .notification {
83
+ .notification-container-wrap {
84
+ display: block;
85
+ margin-top: 10px;
86
+ width: 414px;
87
+ position: relative;
88
+ right: -600px;
89
+ opacity: 0;
90
+
91
+ &.active {
92
+ right: 0;
93
+ opacity: 1;
94
+ }
95
+
96
+ .notification-container {
97
+ @include flex($dir: column, $just: flex-end);
98
+ margin-right: 0;
99
+
100
+ .toast {
101
+ @include flex($dir: row);
102
+ background-color: #25333d;
103
+ border-radius: 3px;
104
+ box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
105
+ margin: 0;
106
+ padding: 12px;
107
+ transform: scale(1);
108
+ transform-origin: 100% 0;
109
+ width: 100%;
110
+
111
+ .toast-icon {
112
+ width: 36px;
113
+ height: 36px;
114
+ &.with {
115
+ width: 26px;
116
+ height: 26px;
117
+ }
118
+ }
119
+
120
+ .toast-content {
121
+ padding-left: 12px;
122
+ width: 100%;
123
+
124
+ h4 {
125
+ color: #e9ecef;
126
+ font-size: 14px;
127
+ font-weight: 500;
128
+ line-height: 24px;
129
+ margin-top: 0;
130
+ max-width: 240px;
131
+ overflow: hidden;
132
+ text-overflow: ellipsis;
133
+ white-space: nowrap;
134
+ }
135
+
136
+ button {
137
+ background: transparent;
138
+ border: none;
139
+ border-radius: 100%;
140
+ cursor: pointer;
141
+ display: inline-block;
142
+ height: 30px;
143
+ position: absolute;
144
+ right: 8px;
145
+ top: 8px;
146
+ width: 30px;
147
+
148
+ svg {
149
+ width: 16px;
150
+ height: 16px;
151
+ fill: #adbbc4;
152
+ margin-left: 1px;
153
+ margin-top: -8px;
154
+ }
155
+ }
156
+
157
+ .description {
158
+ max-height: 60vh;
159
+ overflow: auto;
160
+
161
+ p {
162
+ color: var(--global-font-color6);
163
+ }
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
169
+ }
170
+ </style>
@@ -1,4 +1,8 @@
1
- export type UI_T_Status = 'success' | 'error' | 'warning'
1
+ export type UI_T_NotificationStatus = 'success' | 'error' | 'warning'
2
+ export type UI_T_NotificationIcon = 'success-circle' | 'info' | 'warning'
3
+
4
+ export type UI_T_AlertStatus = 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
5
+ export type UI_T_AlertIcon = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'success-circle'
2
6
 
3
7
 
4
8
 
@@ -1,5 +1,5 @@
1
1
  import type { UI_I_State, UI_I_ListIndex } from '~/lib/models/interfaces'
2
- import { UI_E_Kind } from '~/lib/models/enums'
2
+ import { UI_E_Kind, UI_E_State } from '~/lib/models/enums'
3
3
  import { UI_E_NetworkType } from './enums'
4
4
  import { UI_T_Adapters } from '~/components/common/diagramMain/lib/models/types'
5
5
  import {
@@ -351,7 +351,7 @@ export interface UI_I_ModalsInitialData<T = string | number | boolean> {
351
351
  carrier?: boolean
352
352
  speed?: number
353
353
  duplex?: string
354
- networks?: null
354
+ networks?: string[] | null
355
355
  srIov?: boolean
356
356
  cdp?: boolean
357
357
  lldp?: boolean
@@ -486,13 +486,7 @@ export interface API_UI_I_Shaping {
486
486
  peak_bw?: number
487
487
  }
488
488
  export interface API_UI_I_State {
489
- state: 0 | 1 | 2 | 3
490
- // enum State {
491
- // UNKNOWN = 0;
492
- // OK = 1;
493
- // WARNING = 2;
494
- // ERROR = 3;
495
- // }
489
+ state: UI_E_State
496
490
  errors?: string[]
497
491
  }
498
492
 
@@ -63,17 +63,20 @@ export const adapterViewSettingsFunc = (
63
63
  name: localization.actualSpeedDuplex,
64
64
  value: initialData.carrier
65
65
  ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
66
- : '',
66
+ : localization.down,
67
67
  },
68
68
  {
69
69
  name: localization.configuredSpeedDuplex,
70
70
  value: initialData.carrier
71
71
  ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
72
- : '',
72
+ : localization.autoNegotiate,
73
73
  },
74
74
  {
75
75
  name: localization.networks,
76
- value: initialData.networks || '',
76
+ value:
77
+ initialData.networks && initialData.networks?.length > 0
78
+ ? initialData.networks
79
+ : localization.noNetworks,
77
80
  },
78
81
  ],
79
82
  },
@@ -102,10 +105,13 @@ export const adapterViewSettingsFunc = (
102
105
  },
103
106
  ]
104
107
 
105
- export const adapterPopupFieldsFunc = (localization: UI_I_Localization, id: string) => [
108
+ export const adapterPopupFieldsFunc = (
109
+ localization: UI_I_Localization,
110
+ id: string
111
+ ) => [
106
112
  {
107
113
  text: localization.viewSettings,
108
114
  value: 'adapter-view-settings',
109
- testId: `adapter-view-${id}`
115
+ testId: `adapter-view-${id}`,
110
116
  },
111
117
  ]
@@ -142,6 +142,7 @@ import {
142
142
  createFirstSchemeReadyCompleteFunc,
143
143
  createSecondSchemeReadyCompleteFunc,
144
144
  createThirdSchemeReadyCompleteFunc,
145
+ createFourthSchemeReadyCompleteFunc,
145
146
  stepsSchemeInitial,
146
147
  stepsFunc,
147
148
  connectionSettingsInitial,
@@ -424,6 +425,15 @@ watch(
424
425
  addedAdapters.value,
425
426
  localization.value
426
427
  )
428
+ return
429
+ }
430
+ if (wizard.isSelectedScheme(4)) {
431
+ readyCompleteFields.value = createFourthSchemeReadyCompleteFunc(
432
+ targetDevice.value.switch,
433
+ props.diagramsData,
434
+ adapterStatus.value,
435
+ localization.value
436
+ )
427
437
  }
428
438
  }
429
439
  )
@@ -481,7 +491,7 @@ const checkFinal = async (): Promise<UI_I_ArbitraryObject<string>> => {
481
491
  | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
482
492
  | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
483
493
 
484
- let type: 'network' | 'vmkernel'
494
+ let type: 'network' | 'vmkernel' | 'adapter'
485
495
 
486
496
  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
487
497
  const vlan = getVlanId(portProperties.value.vlanId)
@@ -521,7 +531,7 @@ const checkFinal = async (): Promise<UI_I_ArbitraryObject<string>> => {
521
531
  targetDevice.value.mtu
522
532
  )
523
533
 
524
- type = 'network'
534
+ type = 'adapter'
525
535
  }
526
536
 
527
537
  return new Promise((resolve, _reject) =>
@@ -702,7 +712,7 @@ const onSubmit = async (): Promise<void> => {
702
712
  | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
703
713
  | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
704
714
  | null = null
705
- let type: 'network' | 'vmkernel' = 'network'
715
+ let type: 'network' | 'vmkernel' | 'adapter' = 'network'
706
716
 
707
717
  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
708
718
  const vlan = getVlanId(portProperties.value.vlanId)
@@ -730,6 +740,7 @@ const onSubmit = async (): Promise<void> => {
730
740
  }
731
741
 
732
742
  if (wizard.isSelectedScheme(4) || wizard.isSelectedScheme(5)) {
743
+ type = 'adapter'
733
744
  sendData = addNetworkingFourthOrFifthSchemeDataFunc(
734
745
  targetDevice.value.switch,
735
746
  wizard.isSelectedScheme(4),
@@ -737,8 +748,6 @@ const onSubmit = async (): Promise<void> => {
737
748
  props.diagramsData,
738
749
  targetDevice.value.mtu
739
750
  )
740
-
741
- type = 'adapter'
742
751
  }
743
752
 
744
753
  sendData &&