@nethserver/ns8-ui-lib 0.0.22 → 0.0.26
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/dist/ns8-ui-lib.esm.js +570 -454
- package/dist/ns8-ui-lib.min.js +1 -1
- package/dist/ns8-ui-lib.ssr.js +548 -445
- package/package.json +1 -1
- package/src/lib-components/NsDangerDeleteModal.vue +113 -0
- package/src/lib-components/NsEmptyState.vue +20 -2
- package/src/lib-components/NsInfoCard.vue +3 -0
- package/src/lib-components/NsLottieAnimation.vue +68 -0
- package/src/lib-components/pictograms/Group.vue +18 -0
- package/src/lib-components/NsNodeCard.vue +0 -212
package/package.json
CHANGED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<cv-modal
|
|
3
|
+
kind="danger"
|
|
4
|
+
size="default"
|
|
5
|
+
:visible="isShown"
|
|
6
|
+
@modal-hidden="onModalHidden"
|
|
7
|
+
@primary-click="confirmDelete"
|
|
8
|
+
:primary-button-disabled="name !== userInput"
|
|
9
|
+
>
|
|
10
|
+
<template slot="title">{{ title }}</template>
|
|
11
|
+
<template slot="content">
|
|
12
|
+
<NsInlineNotification
|
|
13
|
+
kind="warning"
|
|
14
|
+
:title="warning"
|
|
15
|
+
:showCloseButton="false"
|
|
16
|
+
/>
|
|
17
|
+
<div class="mg-bottom-md" v-html="description"></div>
|
|
18
|
+
<div v-html="typeToConfirmMessage"></div>
|
|
19
|
+
<cv-form @submit.prevent="confirmDelete">
|
|
20
|
+
<cv-text-input
|
|
21
|
+
v-model="userInput"
|
|
22
|
+
class="mg-bottom-md"
|
|
23
|
+
ref="userInput"
|
|
24
|
+
></cv-text-input>
|
|
25
|
+
</cv-form>
|
|
26
|
+
</template>
|
|
27
|
+
<template slot="secondary-button">{{ cancelLabel }}</template>
|
|
28
|
+
<template slot="primary-button">{{ deleteLabel }}</template>
|
|
29
|
+
</cv-modal>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script>
|
|
33
|
+
import UtilService from "../lib-mixins/util.js";
|
|
34
|
+
import IconService from "../lib-mixins/util.js";
|
|
35
|
+
import NsInlineNotification from "./NsInlineNotification.vue";
|
|
36
|
+
|
|
37
|
+
export default {
|
|
38
|
+
name: "NsDangerDeleteModal",
|
|
39
|
+
//component added for storybook to work
|
|
40
|
+
components: { NsInlineNotification },
|
|
41
|
+
mixins: [UtilService, IconService],
|
|
42
|
+
props: {
|
|
43
|
+
isShown: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
default: true,
|
|
46
|
+
},
|
|
47
|
+
name: {
|
|
48
|
+
type: String,
|
|
49
|
+
required: true,
|
|
50
|
+
},
|
|
51
|
+
title: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: "Confirm deletion",
|
|
54
|
+
},
|
|
55
|
+
warning: {
|
|
56
|
+
type: String,
|
|
57
|
+
default: "Please read carefully",
|
|
58
|
+
},
|
|
59
|
+
description: {
|
|
60
|
+
type: String,
|
|
61
|
+
default:
|
|
62
|
+
"Do you really want to delete this object? This action is irreversible",
|
|
63
|
+
},
|
|
64
|
+
typeToConfirm: {
|
|
65
|
+
type: String,
|
|
66
|
+
default: "",
|
|
67
|
+
},
|
|
68
|
+
cancelLabel: {
|
|
69
|
+
type: String,
|
|
70
|
+
default: "Cancel",
|
|
71
|
+
},
|
|
72
|
+
deleteLabel: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: "I understand, delete",
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
data() {
|
|
78
|
+
return {
|
|
79
|
+
userInput: "",
|
|
80
|
+
};
|
|
81
|
+
},
|
|
82
|
+
computed: {
|
|
83
|
+
typeToConfirmMessage() {
|
|
84
|
+
if (this.typeToConfirm) {
|
|
85
|
+
return this.typeToConfirm;
|
|
86
|
+
} else {
|
|
87
|
+
return `Type <strong>${this.name}</strong> to confirm deletion`;
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
watch: {
|
|
92
|
+
isShown: function () {
|
|
93
|
+
if (this.isShown) {
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
this.focusElement("userInput");
|
|
96
|
+
}, 300);
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
methods: {
|
|
101
|
+
onModalHidden() {
|
|
102
|
+
this.$emit("hide");
|
|
103
|
+
},
|
|
104
|
+
confirmDelete() {
|
|
105
|
+
if (this.name == this.userInput) {
|
|
106
|
+
this.$emit("confirmDelete");
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
};
|
|
111
|
+
</script>
|
|
112
|
+
|
|
113
|
+
<style scoped lang="scss"></style>
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="empty-state">
|
|
3
|
-
<
|
|
3
|
+
<NsLottieAnimation
|
|
4
|
+
v-if="animationData"
|
|
5
|
+
:animationData="animationData"
|
|
6
|
+
:refName="animationTitle"
|
|
7
|
+
:animateOnHover="true"
|
|
8
|
+
:loop="1"
|
|
9
|
+
:autoPlay="true"
|
|
10
|
+
class="animation image"
|
|
11
|
+
/>
|
|
12
|
+
<NsPictogram v-else title="empty state" class="image">
|
|
4
13
|
<template v-if="hasPictogramSlot">
|
|
5
14
|
<slot name="pictogram"></slot>
|
|
6
15
|
</template>
|
|
@@ -20,16 +29,19 @@
|
|
|
20
29
|
|
|
21
30
|
<script>
|
|
22
31
|
import NsPictogram from "./NsPictogram.vue";
|
|
32
|
+
import NsLottieAnimation from "./NsLottieAnimation";
|
|
23
33
|
import ExclamationMark from "./pictograms/ExclamationMark";
|
|
24
34
|
|
|
25
35
|
export default {
|
|
26
36
|
name: "NsEmptyState",
|
|
27
|
-
components: { NsPictogram, ExclamationMark },
|
|
37
|
+
components: { NsPictogram, ExclamationMark, NsLottieAnimation },
|
|
28
38
|
props: {
|
|
29
39
|
title: {
|
|
30
40
|
type: String,
|
|
31
41
|
required: true,
|
|
32
42
|
},
|
|
43
|
+
animationData: Object,
|
|
44
|
+
animationTitle: String,
|
|
33
45
|
},
|
|
34
46
|
computed: {
|
|
35
47
|
hasPictogramSlot() {
|
|
@@ -55,4 +67,10 @@ export default {
|
|
|
55
67
|
.empty-state .description {
|
|
56
68
|
margin-top: 1rem;
|
|
57
69
|
}
|
|
70
|
+
|
|
71
|
+
.animation {
|
|
72
|
+
display: inline-block;
|
|
73
|
+
width: 64px;
|
|
74
|
+
height: 64px;
|
|
75
|
+
}
|
|
58
76
|
</style>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ns-lottie-animation" @mouseover="onMouseOver">
|
|
3
|
+
<LottieAnimation
|
|
4
|
+
:ref="refName"
|
|
5
|
+
:animationData="animationData"
|
|
6
|
+
:loop="loop"
|
|
7
|
+
:autoPlay="autoPlay"
|
|
8
|
+
@loopComplete="onLoopComplete"
|
|
9
|
+
@complete="onComplete"
|
|
10
|
+
@enterFrame="onEnterFrame"
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
import LottieAnimation from "lottie-web-vue";
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
name: "NsLottieAnimation",
|
|
20
|
+
components: { LottieAnimation },
|
|
21
|
+
props: {
|
|
22
|
+
animationData: {
|
|
23
|
+
type: Object,
|
|
24
|
+
required: true,
|
|
25
|
+
},
|
|
26
|
+
loop: {
|
|
27
|
+
type: [Boolean, Number],
|
|
28
|
+
default: false,
|
|
29
|
+
},
|
|
30
|
+
autoPlay: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: true,
|
|
33
|
+
},
|
|
34
|
+
refName: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: "anim",
|
|
37
|
+
},
|
|
38
|
+
animateOnHover: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: true,
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
methods: {
|
|
44
|
+
onLoopComplete(eventData) {
|
|
45
|
+
this.$emit("loopComplete", eventData);
|
|
46
|
+
},
|
|
47
|
+
onComplete(eventData) {
|
|
48
|
+
this.$emit("complete", eventData);
|
|
49
|
+
|
|
50
|
+
if (this.animateOnHover) {
|
|
51
|
+
this.$refs[this.refName].stop();
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
onEnterFrame(eventData) {
|
|
55
|
+
this.$emit("enterFrame", eventData);
|
|
56
|
+
},
|
|
57
|
+
onMouseOver(eventData) {
|
|
58
|
+
this.$emit("mouseover", eventData);
|
|
59
|
+
|
|
60
|
+
if (this.animateOnHover) {
|
|
61
|
+
this.$refs[this.refName].play();
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style scoped lang="scss"></style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<path
|
|
3
|
+
id="group"
|
|
4
|
+
d="M24.36,31h-0.72v-7.5c0-3.552-2.414-6.604-5.872-7.424c-0.15-0.036-0.261-0.163-0.275-0.316
|
|
5
|
+
c-0.015-0.154,0.071-0.3,0.212-0.363c1.517-0.675,2.496-2.181,2.496-3.836c0-2.316-1.884-4.201-4.2-4.201S11.8,9.244,11.8,11.561
|
|
6
|
+
c0,1.655,0.98,3.162,2.496,3.836c0.141,0.063,0.227,0.209,0.212,0.363c-0.014,0.153-0.125,0.281-0.275,0.316
|
|
7
|
+
c-3.458,0.82-5.872,3.872-5.872,7.424V31H7.64v-7.5c0-3.592,2.257-6.718,5.585-7.879c-1.326-0.907-2.146-2.421-2.146-4.061
|
|
8
|
+
c0-1.964,1.157-3.664,2.826-4.452C14.101,6.617,14.2,6.097,14.2,5.561c0-2.316-1.884-4.201-4.2-4.201S5.799,3.244,5.799,5.561
|
|
9
|
+
c0,1.656,0.98,3.162,2.496,3.836C8.437,9.46,8.521,9.606,8.507,9.76c-0.014,0.153-0.125,0.281-0.275,0.316
|
|
10
|
+
C4.774,10.896,2.36,13.948,2.36,17.5V25H1.64v-7.5c0-3.592,2.257-6.718,5.585-7.879C5.899,8.714,5.08,7.2,5.08,5.561
|
|
11
|
+
c0-2.713,2.207-4.92,4.92-4.92s4.92,2.207,4.92,4.92c0,0.422-0.052,0.836-0.157,1.237c0.791-0.205,1.683-0.205,2.473,0
|
|
12
|
+
c-0.104-0.401-0.157-0.815-0.157-1.237c0-2.713,2.208-4.92,4.921-4.92s4.921,2.207,4.921,4.92c0,1.64-0.82,3.154-2.146,4.061
|
|
13
|
+
c3.329,1.161,5.586,4.287,5.586,7.879V25H29.64v-7.5c0-3.552-2.414-6.604-5.872-7.424c-0.15-0.036-0.261-0.163-0.275-0.316
|
|
14
|
+
c-0.015-0.154,0.071-0.3,0.212-0.363C25.221,8.722,26.2,7.216,26.2,5.561c0-2.316-1.884-4.201-4.2-4.201s-4.2,1.884-4.2,4.201
|
|
15
|
+
c0,0.536,0.099,1.056,0.295,1.548c1.669,0.789,2.826,2.488,2.826,4.452c0,1.64-0.82,3.154-2.146,4.061
|
|
16
|
+
c3.329,1.161,5.586,4.287,5.586,7.879L24.36,31L24.36,31z"
|
|
17
|
+
/>
|
|
18
|
+
</template>
|
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<cv-tile kind="standard" :light="light" class="node-card">
|
|
3
|
-
<!-- icon -->
|
|
4
|
-
<div class="row">
|
|
5
|
-
<NsSvg :svg="Chip32" />
|
|
6
|
-
</div>
|
|
7
|
-
<div class="row">
|
|
8
|
-
<h3 class="title">{{ nodeLabel }} {{ nodeId }}</h3>
|
|
9
|
-
</div>
|
|
10
|
-
<div class="row">
|
|
11
|
-
<cv-tag v-if="isLeader" kind="green" :label="leaderLabel"></cv-tag>
|
|
12
|
-
<cv-tag v-else kind="blue" :label="workerLabel"></cv-tag>
|
|
13
|
-
</div>
|
|
14
|
-
<div v-if="loading" class="row node-card-skeleton">
|
|
15
|
-
<cv-skeleton-text :paragraph="true" :line-count="5"></cv-skeleton-text>
|
|
16
|
-
</div>
|
|
17
|
-
<div v-else class="table-wrapper">
|
|
18
|
-
<div class="table">
|
|
19
|
-
<div class="tr">
|
|
20
|
-
<div class="td label">{{ cpuUsageLabel }}</div>
|
|
21
|
-
<div :class="['td', { warning: cpuUsage >= cpuUsageWarningTh }]">
|
|
22
|
-
{{ cpuUsage }}%
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="tr">
|
|
26
|
-
<div class="td label">
|
|
27
|
-
{{ cpuLoadLabel }}
|
|
28
|
-
<cv-tooltip
|
|
29
|
-
alignment="center"
|
|
30
|
-
direction="bottom"
|
|
31
|
-
:tip="cpuLoadTooltip"
|
|
32
|
-
class="info"
|
|
33
|
-
>
|
|
34
|
-
<Information16 />
|
|
35
|
-
</cv-tooltip>
|
|
36
|
-
</div>
|
|
37
|
-
<div class="td">
|
|
38
|
-
<span :class="{ warning: load1Min >= cpuLoadWarningTh }"
|
|
39
|
-
>{{ load1Min }}%</span
|
|
40
|
-
>
|
|
41
|
-
/
|
|
42
|
-
<span :class="{ warning: load5Min >= cpuLoadWarningTh }"
|
|
43
|
-
>{{ load5Min }}%</span
|
|
44
|
-
>
|
|
45
|
-
/
|
|
46
|
-
<span :class="{ warning: load15Min >= cpuLoadWarningTh }"
|
|
47
|
-
>{{ load15Min }}%</span
|
|
48
|
-
>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="tr">
|
|
52
|
-
<div class="td label">{{ memoryUsageLabel }}</div>
|
|
53
|
-
<div :class="['td', { warning: memoryUsage >= memoryWarningTh }]">
|
|
54
|
-
{{ memoryUsage }}%
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="tr">
|
|
58
|
-
<div class="td label">{{ swapUsageLabel }}</div>
|
|
59
|
-
<div :class="['td', { warning: swapUsage >= swapWarningTh }]">
|
|
60
|
-
{{ swapUsage }}%
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
<div class="tr" v-for="(disk, index) in disksUsage" :key="index">
|
|
64
|
-
<div class="td label">{{ disk.diskId }} {{ diskUsageLabel }}</div>
|
|
65
|
-
<div :class="['td', { warning: disk.usage >= diskWarningTh }]">
|
|
66
|
-
{{ disk.usage }}%
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
<div class="row slot">
|
|
72
|
-
<!-- Extra content -->
|
|
73
|
-
<slot></slot>
|
|
74
|
-
</div>
|
|
75
|
-
</cv-tile>
|
|
76
|
-
</template>
|
|
77
|
-
|
|
78
|
-
<script>
|
|
79
|
-
import NsSvg from "./NsSvg.vue";
|
|
80
|
-
import { CvTile } from "@carbon/vue";
|
|
81
|
-
import Chip32 from "@carbon/icons-vue/es/chip/32";
|
|
82
|
-
import Information16 from "@carbon/icons-vue/es/information/16";
|
|
83
|
-
|
|
84
|
-
export default {
|
|
85
|
-
name: "NsNodeCard",
|
|
86
|
-
//components added for storybook to work
|
|
87
|
-
components: { NsSvg, CvTile, Information16 },
|
|
88
|
-
props: {
|
|
89
|
-
nodeId: String,
|
|
90
|
-
nodeLabel: {
|
|
91
|
-
type: String,
|
|
92
|
-
default: "Node",
|
|
93
|
-
},
|
|
94
|
-
isLeader: Boolean,
|
|
95
|
-
leaderLabel: {
|
|
96
|
-
type: String,
|
|
97
|
-
default: "leader",
|
|
98
|
-
},
|
|
99
|
-
workerLabel: {
|
|
100
|
-
type: String,
|
|
101
|
-
default: "worker",
|
|
102
|
-
},
|
|
103
|
-
cpuUsageLabel: {
|
|
104
|
-
type: String,
|
|
105
|
-
default: "CPU usage",
|
|
106
|
-
},
|
|
107
|
-
cpuLoadLabel: {
|
|
108
|
-
type: String,
|
|
109
|
-
default: "CPU load",
|
|
110
|
-
},
|
|
111
|
-
cpuLoadTooltip: {
|
|
112
|
-
type: String,
|
|
113
|
-
default: "CPU average load of last 1 / 5 / 15 minutes",
|
|
114
|
-
},
|
|
115
|
-
memoryUsageLabel: {
|
|
116
|
-
type: String,
|
|
117
|
-
default: "Memory usage",
|
|
118
|
-
},
|
|
119
|
-
swapUsageLabel: {
|
|
120
|
-
type: String,
|
|
121
|
-
default: "Swap usage",
|
|
122
|
-
},
|
|
123
|
-
diskUsageLabel: {
|
|
124
|
-
type: String,
|
|
125
|
-
default: "usage",
|
|
126
|
-
},
|
|
127
|
-
cpuUsage: Number,
|
|
128
|
-
cpuUsageWarningTh: {
|
|
129
|
-
type: Number,
|
|
130
|
-
default: 90,
|
|
131
|
-
},
|
|
132
|
-
load1Min: Number,
|
|
133
|
-
load5Min: Number,
|
|
134
|
-
load15Min: Number,
|
|
135
|
-
cpuLoadWarningTh: {
|
|
136
|
-
type: Number,
|
|
137
|
-
default: 90,
|
|
138
|
-
},
|
|
139
|
-
memoryUsage: Number,
|
|
140
|
-
memoryWarningTh: {
|
|
141
|
-
type: Number,
|
|
142
|
-
default: 90,
|
|
143
|
-
},
|
|
144
|
-
swapUsage: Number,
|
|
145
|
-
swapWarningTh: {
|
|
146
|
-
type: Number,
|
|
147
|
-
default: 90,
|
|
148
|
-
},
|
|
149
|
-
disksUsage: Array,
|
|
150
|
-
diskWarningTh: {
|
|
151
|
-
type: Number,
|
|
152
|
-
default: 90,
|
|
153
|
-
},
|
|
154
|
-
loading: Boolean,
|
|
155
|
-
light: Boolean,
|
|
156
|
-
},
|
|
157
|
-
data() {
|
|
158
|
-
return {
|
|
159
|
-
Chip32,
|
|
160
|
-
};
|
|
161
|
-
},
|
|
162
|
-
};
|
|
163
|
-
</script>
|
|
164
|
-
|
|
165
|
-
<style scoped lang="scss">
|
|
166
|
-
.node-card {
|
|
167
|
-
display: flex;
|
|
168
|
-
flex-direction: column;
|
|
169
|
-
justify-content: center;
|
|
170
|
-
min-height: 7rem;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
.row {
|
|
174
|
-
display: flex;
|
|
175
|
-
align-items: center;
|
|
176
|
-
justify-content: center;
|
|
177
|
-
margin-bottom: 0.25rem;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.node-card-skeleton {
|
|
181
|
-
margin: 1rem 3rem;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.label {
|
|
185
|
-
padding-right: 0.5rem;
|
|
186
|
-
font-weight: bold;
|
|
187
|
-
text-align: right;
|
|
188
|
-
padding-bottom: 0.5rem;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.slot {
|
|
192
|
-
margin-top: 0.5rem;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.table-wrapper {
|
|
196
|
-
display: flex;
|
|
197
|
-
justify-content: center;
|
|
198
|
-
margin-top: 0.5rem;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.table {
|
|
202
|
-
display: table;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.tr {
|
|
206
|
-
display: table-row;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.td {
|
|
210
|
-
display: table-cell;
|
|
211
|
-
}
|
|
212
|
-
</style>
|