bfg-common 1.3.607 → 1.3.609
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,107 +1,114 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="most-alert">
|
|
3
|
-
<atoms-table-data-grid
|
|
4
|
-
v-model:selected-row="selectedRow"
|
|
5
|
-
v-model:page-size="pageSize"
|
|
6
|
-
v-model:page="page"
|
|
7
|
-
class="data-table"
|
|
8
|
-
test-id="alerts-table"
|
|
9
|
-
:head-items="headItems"
|
|
10
|
-
:body-items="bodyItems"
|
|
11
|
-
:total-items="bodyItems.length"
|
|
12
|
-
:total-pages="1"
|
|
13
|
-
off-select-by-row
|
|
14
|
-
hide-page-size
|
|
15
|
-
show-page-info
|
|
16
|
-
server-off
|
|
17
|
-
>
|
|
18
|
-
<template #th="{ item }">
|
|
19
|
-
<atoms-the-icon
|
|
20
|
-
width="20px"
|
|
21
|
-
height="20px"
|
|
22
|
-
:name="item.iconName"
|
|
23
|
-
class="title-icon"
|
|
24
|
-
/>
|
|
25
|
-
<span> {{ item.text }} </span>
|
|
26
|
-
</template>
|
|
27
|
-
<template #icon="{ item }">
|
|
28
|
-
<span :class="['datagrid-cell-icon', item.data.iconClassName]" />
|
|
29
|
-
<a
|
|
30
|
-
v-if="item.data.isLink"
|
|
31
|
-
href="javascript:void(0)"
|
|
32
|
-
class="text-ellipsis"
|
|
33
|
-
:title="item.text"
|
|
34
|
-
data-id="select-node-of-tree"
|
|
35
|
-
@click="selectNodeOfTree(item.data)"
|
|
36
|
-
>{{ item.text }}</a
|
|
37
|
-
>
|
|
38
|
-
<span v-else class="text-ellipsis">
|
|
39
|
-
{{ item.text }}
|
|
40
|
-
</span>
|
|
41
|
-
</template>
|
|
42
|
-
</atoms-table-data-grid>
|
|
43
|
-
</div>
|
|
44
|
-
</template>
|
|
45
|
-
|
|
46
|
-
<script setup lang="ts">
|
|
47
|
-
import type {
|
|
48
|
-
UI_I_HeadItem,
|
|
49
|
-
UI_I_BodyItem,
|
|
50
|
-
} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
|
|
51
|
-
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
52
|
-
import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
|
|
53
|
-
import type { UI_I_Alert } from '~/components/common/home/lib/models/interfaces'
|
|
54
|
-
import type { UI_I_AlertData } from '~/components/common/home/alertsTable/lib/models/interfaces'
|
|
55
|
-
import * as table from '~/components/common/home/alertsTable/lib/config/config'
|
|
56
|
-
|
|
57
|
-
const props = defineProps<{
|
|
58
|
-
dataTable: UI_I_Alert[]
|
|
59
|
-
}>()
|
|
60
|
-
|
|
61
|
-
const emits = defineEmits<{
|
|
62
|
-
(event: 'select-node-of-tree', value: UI_I_AlertData): void
|
|
63
|
-
}>()
|
|
64
|
-
|
|
65
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
66
|
-
|
|
67
|
-
const selectedRow = ref<UI_T_SelectedRow>(null)
|
|
68
|
-
const headItems = computed<UI_I_HeadItem[]>(() =>
|
|
69
|
-
table.headItems(localization.value)
|
|
70
|
-
)
|
|
71
|
-
const bodyItems = ref<UI_I_BodyItem[][]>([])
|
|
72
|
-
watch(
|
|
73
|
-
() => props.dataTable,
|
|
74
|
-
(newValue) => {
|
|
75
|
-
if (!newValue?.length) {
|
|
76
|
-
bodyItems.value = []
|
|
77
|
-
return
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
bodyItems.value = table.bodyItems(newValue)
|
|
81
|
-
},
|
|
82
|
-
{ deep: true, immediate: true }
|
|
83
|
-
)
|
|
84
|
-
const page = ref<number>(1)
|
|
85
|
-
const pageSize = ref<number>(1)
|
|
86
|
-
|
|
87
|
-
const selectNodeOfTree = (item: UI_I_AlertData): void => {
|
|
88
|
-
emits('select-node-of-tree', item)
|
|
89
|
-
}
|
|
90
|
-
</script>
|
|
91
|
-
|
|
92
|
-
<style lang="scss" scoped>
|
|
93
|
-
.most-alert {
|
|
94
|
-
margin: 0;
|
|
95
|
-
border: none;
|
|
96
|
-
|
|
97
|
-
:deep(.datagrid-outer-wrapper) {
|
|
98
|
-
padding: 0;
|
|
99
|
-
|
|
100
|
-
.datagrid {
|
|
101
|
-
margin: 0;
|
|
102
|
-
border: unset;
|
|
103
|
-
min-height: 200px;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="most-alert">
|
|
3
|
+
<atoms-table-data-grid
|
|
4
|
+
v-model:selected-row="selectedRow"
|
|
5
|
+
v-model:page-size="pageSize"
|
|
6
|
+
v-model:page="page"
|
|
7
|
+
class="data-table"
|
|
8
|
+
test-id="alerts-table"
|
|
9
|
+
:head-items="headItems"
|
|
10
|
+
:body-items="bodyItems"
|
|
11
|
+
:total-items="bodyItems.length"
|
|
12
|
+
:total-pages="1"
|
|
13
|
+
off-select-by-row
|
|
14
|
+
hide-page-size
|
|
15
|
+
show-page-info
|
|
16
|
+
server-off
|
|
17
|
+
>
|
|
18
|
+
<template #th="{ item }">
|
|
19
|
+
<atoms-the-icon
|
|
20
|
+
width="20px"
|
|
21
|
+
height="20px"
|
|
22
|
+
:name="item.iconName"
|
|
23
|
+
class="title-icon"
|
|
24
|
+
/>
|
|
25
|
+
<span class="title-column"> {{ item.text }} </span>
|
|
26
|
+
</template>
|
|
27
|
+
<template #icon="{ item }">
|
|
28
|
+
<span :class="['datagrid-cell-icon', item.data.iconClassName]" />
|
|
29
|
+
<a
|
|
30
|
+
v-if="item.data.isLink"
|
|
31
|
+
href="javascript:void(0)"
|
|
32
|
+
class="text-ellipsis"
|
|
33
|
+
:title="item.text"
|
|
34
|
+
data-id="select-node-of-tree"
|
|
35
|
+
@click="selectNodeOfTree(item.data)"
|
|
36
|
+
>{{ item.text }}</a
|
|
37
|
+
>
|
|
38
|
+
<span v-else class="text-ellipsis">
|
|
39
|
+
{{ item.text }}
|
|
40
|
+
</span>
|
|
41
|
+
</template>
|
|
42
|
+
</atoms-table-data-grid>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<script setup lang="ts">
|
|
47
|
+
import type {
|
|
48
|
+
UI_I_HeadItem,
|
|
49
|
+
UI_I_BodyItem,
|
|
50
|
+
} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
|
|
51
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
52
|
+
import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
|
|
53
|
+
import type { UI_I_Alert } from '~/components/common/home/lib/models/interfaces'
|
|
54
|
+
import type { UI_I_AlertData } from '~/components/common/home/alertsTable/lib/models/interfaces'
|
|
55
|
+
import * as table from '~/components/common/home/alertsTable/lib/config/config'
|
|
56
|
+
|
|
57
|
+
const props = defineProps<{
|
|
58
|
+
dataTable: UI_I_Alert[]
|
|
59
|
+
}>()
|
|
60
|
+
|
|
61
|
+
const emits = defineEmits<{
|
|
62
|
+
(event: 'select-node-of-tree', value: UI_I_AlertData): void
|
|
63
|
+
}>()
|
|
64
|
+
|
|
65
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
66
|
+
|
|
67
|
+
const selectedRow = ref<UI_T_SelectedRow>(null)
|
|
68
|
+
const headItems = computed<UI_I_HeadItem[]>(() =>
|
|
69
|
+
table.headItems(localization.value)
|
|
70
|
+
)
|
|
71
|
+
const bodyItems = ref<UI_I_BodyItem[][]>([])
|
|
72
|
+
watch(
|
|
73
|
+
() => props.dataTable,
|
|
74
|
+
(newValue) => {
|
|
75
|
+
if (!newValue?.length) {
|
|
76
|
+
bodyItems.value = []
|
|
77
|
+
return
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
bodyItems.value = table.bodyItems(newValue)
|
|
81
|
+
},
|
|
82
|
+
{ deep: true, immediate: true }
|
|
83
|
+
)
|
|
84
|
+
const page = ref<number>(1)
|
|
85
|
+
const pageSize = ref<number>(1)
|
|
86
|
+
|
|
87
|
+
const selectNodeOfTree = (item: UI_I_AlertData): void => {
|
|
88
|
+
emits('select-node-of-tree', item)
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
|
|
92
|
+
<style lang="scss" scoped>
|
|
93
|
+
.most-alert {
|
|
94
|
+
margin: 0;
|
|
95
|
+
border: none;
|
|
96
|
+
|
|
97
|
+
:deep(.datagrid-outer-wrapper) {
|
|
98
|
+
padding: 0;
|
|
99
|
+
|
|
100
|
+
.datagrid {
|
|
101
|
+
margin: 0;
|
|
102
|
+
border: unset;
|
|
103
|
+
min-height: 200px;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.title-column {
|
|
108
|
+
font-size: 11px;
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
text-overflow: ellipsis;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="ready-complete">
|
|
3
|
-
<div class="ready-complete__desc">{{ localization.readyCompleteDesc }}</div>
|
|
4
|
-
|
|
5
|
-
<common-details-list :items="properties" class="ready-complete__list list">
|
|
6
|
-
<template #default="{ item }">
|
|
7
|
-
<common-details-item
|
|
8
|
-
:has-children="true"
|
|
9
|
-
:test-id="item.testId"
|
|
10
|
-
open-by-default
|
|
11
|
-
>
|
|
12
|
-
<template #stackBlockKey>
|
|
13
|
-
<span class="list__labels">
|
|
14
|
-
{{ localization.chosenDatastoreName }}
|
|
15
|
-
</span>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<template #stackChildren>
|
|
19
|
-
<template
|
|
20
|
-
v-for="(item2, key2) in item.items"
|
|
21
|
-
:key="`${item2}_${key2}`"
|
|
22
|
-
>
|
|
23
|
-
<common-details-item
|
|
24
|
-
:has-children="false"
|
|
25
|
-
:test-id="item2.testId"
|
|
26
|
-
class="list__default-style"
|
|
27
|
-
>
|
|
28
|
-
<template #stackBlockKey>
|
|
29
|
-
<div>
|
|
30
|
-
{{ item2.label }}
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
<template #stackBlockContent>
|
|
34
|
-
<div v-if="item2.data">
|
|
35
|
-
<div
|
|
36
|
-
v-for="item3 in item2.data"
|
|
37
|
-
:key="item3"
|
|
38
|
-
class="flex-align-center"
|
|
39
|
-
>
|
|
40
|
-
<div class="vsphere-icon-host"></div>
|
|
41
|
-
<span>{{ item3 }}</span>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
<span v-else>
|
|
45
|
-
{{ item2.value }}
|
|
46
|
-
</span>
|
|
47
|
-
</template>
|
|
48
|
-
</common-details-item>
|
|
49
|
-
</template>
|
|
50
|
-
</template>
|
|
51
|
-
</common-details-item>
|
|
52
|
-
</template>
|
|
53
|
-
</common-details-list>
|
|
54
|
-
</div>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<script lang="ts" setup>
|
|
58
|
-
import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
|
|
59
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
60
|
-
|
|
61
|
-
const props = defineProps<{
|
|
62
|
-
dataReadyView: UI_I_DetailsItem[]
|
|
63
|
-
}>()
|
|
64
|
-
// console.log(props)
|
|
65
|
-
|
|
66
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
67
|
-
|
|
68
|
-
const properties = computed<UI_I_DetailsItem[]>(() => props.dataReadyView)
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<style lang="scss" scoped>
|
|
72
|
-
@import '~/assets/scss/common/mixins.scss';
|
|
73
|
-
.ready-complete {
|
|
74
|
-
&__list {
|
|
75
|
-
@include flex($dir: column);
|
|
76
|
-
padding: 12px 0;
|
|
77
|
-
row-gap: 15px;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
.list {
|
|
81
|
-
&__labels {
|
|
82
|
-
@include text($fs: 13px, $fw: 700);
|
|
83
|
-
}
|
|
84
|
-
:deep(.list__default-style) {
|
|
85
|
-
.stack-block {
|
|
86
|
-
&__label {
|
|
87
|
-
align-items: flex-start;
|
|
88
|
-
}
|
|
89
|
-
&-content {
|
|
90
|
-
white-space: pre-line;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ready-complete">
|
|
3
|
+
<div class="ready-complete__desc">{{ localization.readyCompleteDesc }}</div>
|
|
4
|
+
|
|
5
|
+
<common-details-list :items="properties" class="ready-complete__list list">
|
|
6
|
+
<template #default="{ item }">
|
|
7
|
+
<common-details-item
|
|
8
|
+
:has-children="true"
|
|
9
|
+
:test-id="item.testId"
|
|
10
|
+
open-by-default
|
|
11
|
+
>
|
|
12
|
+
<template #stackBlockKey>
|
|
13
|
+
<span class="list__labels">
|
|
14
|
+
{{ localization.chosenDatastoreName }}
|
|
15
|
+
</span>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<template #stackChildren>
|
|
19
|
+
<template
|
|
20
|
+
v-for="(item2, key2) in item.items"
|
|
21
|
+
:key="`${item2}_${key2}`"
|
|
22
|
+
>
|
|
23
|
+
<common-details-item
|
|
24
|
+
:has-children="false"
|
|
25
|
+
:test-id="item2.testId"
|
|
26
|
+
class="list__default-style"
|
|
27
|
+
>
|
|
28
|
+
<template #stackBlockKey>
|
|
29
|
+
<div>
|
|
30
|
+
{{ item2.label }}
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
<template #stackBlockContent>
|
|
34
|
+
<div v-if="item2.data">
|
|
35
|
+
<div
|
|
36
|
+
v-for="item3 in item2.data"
|
|
37
|
+
:key="item3"
|
|
38
|
+
class="flex-align-center"
|
|
39
|
+
>
|
|
40
|
+
<div class="vsphere-icon-host"></div>
|
|
41
|
+
<span>{{ item3 }}</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<span v-else>
|
|
45
|
+
{{ item2.value }}
|
|
46
|
+
</span>
|
|
47
|
+
</template>
|
|
48
|
+
</common-details-item>
|
|
49
|
+
</template>
|
|
50
|
+
</template>
|
|
51
|
+
</common-details-item>
|
|
52
|
+
</template>
|
|
53
|
+
</common-details-list>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script lang="ts" setup>
|
|
58
|
+
import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
|
|
59
|
+
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
60
|
+
|
|
61
|
+
const props = defineProps<{
|
|
62
|
+
dataReadyView: UI_I_DetailsItem[]
|
|
63
|
+
}>()
|
|
64
|
+
// console.log(props)
|
|
65
|
+
|
|
66
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
67
|
+
|
|
68
|
+
const properties = computed<UI_I_DetailsItem[]>(() => props.dataReadyView)
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<style lang="scss" scoped>
|
|
72
|
+
@import '~/assets/scss/common/mixins.scss';
|
|
73
|
+
.ready-complete {
|
|
74
|
+
&__list {
|
|
75
|
+
@include flex($dir: column);
|
|
76
|
+
padding: 12px 0;
|
|
77
|
+
row-gap: 15px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
.list {
|
|
81
|
+
&__labels {
|
|
82
|
+
@include text($fs: 13px, $fw: 700);
|
|
83
|
+
}
|
|
84
|
+
:deep(.list__default-style) {
|
|
85
|
+
.stack-block {
|
|
86
|
+
&__label {
|
|
87
|
+
align-items: flex-start;
|
|
88
|
+
}
|
|
89
|
+
&-content {
|
|
90
|
+
white-space: pre-line;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
</style>
|