@appscode/design-system 1.0.43-alpha.173 → 1.0.43-alpha.176
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/package.json +1 -1
- package/plugins/time-convert.js +49 -0
- package/vue-components/v2/notification/Notification.vue +101 -0
- package/vue-components/v2/notification/NotificationItem.vue +44 -0
- package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue +92 -0
- package/vue-components/v3/modals/LongRunningTasksModal.vue +334 -0
- package/vue-components/v3/notification/Notification.vue +98 -0
- package/vue-components/v3/notification/NotificationItem.vue +52 -0
- package/vue-components/v3/terminal/LongRunningTaskTerminal.vue +76 -0
package/package.json
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import moment from "moment";
|
|
2
|
+
import { useNow, useThrottleFn } from "@vueuse/core";
|
|
3
|
+
|
|
4
|
+
const getTime = option => {
|
|
5
|
+
if (parseInt(option.time, 10) < 0 || !option.time) {
|
|
6
|
+
return undefined;
|
|
7
|
+
}
|
|
8
|
+
let time = option.time;
|
|
9
|
+
|
|
10
|
+
// moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
|
|
11
|
+
time = moment(option.time).valueOf("x")
|
|
12
|
+
? moment(option.time).valueOf("x")
|
|
13
|
+
: time * 1000;
|
|
14
|
+
|
|
15
|
+
return moment(time).format("MMM DD YYYY, h:mm A");
|
|
16
|
+
};
|
|
17
|
+
const getDayDifferences = options => {
|
|
18
|
+
const past = moment(options.past).isValid()
|
|
19
|
+
? moment(options.past).valueOf("x") / 1000
|
|
20
|
+
: options.past;
|
|
21
|
+
const now = Date.now() / 1000;
|
|
22
|
+
const diff = now - past;
|
|
23
|
+
if (parseInt(options.past, 10) > 10) {
|
|
24
|
+
let ret = Math.floor(diff / 86400);
|
|
25
|
+
let unit = "";
|
|
26
|
+
if (diff < 60) {
|
|
27
|
+
ret = parseInt(diff, 10);
|
|
28
|
+
unit = " Second";
|
|
29
|
+
} else if (diff < 3600) {
|
|
30
|
+
ret = parseInt(diff / 60, 10);
|
|
31
|
+
unit = " Minute";
|
|
32
|
+
} else if (diff < 86400) {
|
|
33
|
+
ret = parseInt(diff / 3600, 10);
|
|
34
|
+
unit = " Hour";
|
|
35
|
+
} else {
|
|
36
|
+
ret = parseInt(diff / 86400, 10);
|
|
37
|
+
unit = " Day";
|
|
38
|
+
}
|
|
39
|
+
unit += ret > 1 ? "s" : "";
|
|
40
|
+
return ret + unit;
|
|
41
|
+
}
|
|
42
|
+
return undefined;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default {
|
|
46
|
+
getTime,
|
|
47
|
+
// formatMoment,
|
|
48
|
+
getDayDifferences
|
|
49
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
@mouseenter="notificationPanelOpen = true"
|
|
4
|
+
@mouseleave="notificationPanelOpen = false"
|
|
5
|
+
>
|
|
6
|
+
<button class="button ac-nav-button">
|
|
7
|
+
<span v-if="unreadCount">{{ unreadCount }}</span>
|
|
8
|
+
<i
|
|
9
|
+
class="fa fa-bell"
|
|
10
|
+
:class="{ 'ac-shake': unreadCount }"
|
|
11
|
+
aria-hidden="true"
|
|
12
|
+
></i>
|
|
13
|
+
</button>
|
|
14
|
+
<div class="ac-menu-content is-notification">
|
|
15
|
+
<div class="notification-header">
|
|
16
|
+
<div class="left-content">
|
|
17
|
+
<p>
|
|
18
|
+
Notifications <span>({{ notifications.length }})</span>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="right-content"></div>
|
|
22
|
+
</div>
|
|
23
|
+
<div :key="notificationPanelOpen ? 1 : 0" class="notification-body">
|
|
24
|
+
<transition-group v-if="notifications.length" name="slide-right">
|
|
25
|
+
<notification-item
|
|
26
|
+
v-for="notification in notifications"
|
|
27
|
+
:key="`${notification.id}${unreadCount}`"
|
|
28
|
+
:notification="notification"
|
|
29
|
+
/>
|
|
30
|
+
</transition-group>
|
|
31
|
+
<span v-else class="single-notification-item"
|
|
32
|
+
>No new notifications</span
|
|
33
|
+
>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
import { StringCodec } from "nats.ws";
|
|
41
|
+
export default {
|
|
42
|
+
components: {
|
|
43
|
+
NotificationItem: () => import("./NotificationItem.vue"),
|
|
44
|
+
},
|
|
45
|
+
data() {
|
|
46
|
+
return {
|
|
47
|
+
notifications: [],
|
|
48
|
+
notificationsRead: 0,
|
|
49
|
+
|
|
50
|
+
notificationPanelOpen: false,
|
|
51
|
+
subscription: null,
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
computed: {
|
|
55
|
+
unreadCount() {
|
|
56
|
+
return this.notifications.length - this.notificationsRead;
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
watch: {
|
|
60
|
+
notificationPanelOpen(n) {
|
|
61
|
+
if (n) {
|
|
62
|
+
this.notificationsRead = this.notifications.length;
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
created() {
|
|
67
|
+
this.subscribeToNotifcations();
|
|
68
|
+
},
|
|
69
|
+
methods: {
|
|
70
|
+
addNewNotification(notification) {
|
|
71
|
+
this.notifications.unshift(notification);
|
|
72
|
+
if (this.notificationPanelOpen) {
|
|
73
|
+
this.notificationsRead = this.notifications.length;
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
async subscribeToNotifcations() {
|
|
77
|
+
this.subscription = this.$nc?.subscribe("notifications");
|
|
78
|
+
console.log("Started listening to Notifications");
|
|
79
|
+
|
|
80
|
+
if (this.subscription) {
|
|
81
|
+
// listen to channel events
|
|
82
|
+
for await (const msg of this.subscription) {
|
|
83
|
+
console.log("notifications ===>");
|
|
84
|
+
console.log({ data: StringCodec().decode(msg.data) });
|
|
85
|
+
const log = JSON.parse(StringCodec().decode(msg.data));
|
|
86
|
+
console.log({ log });
|
|
87
|
+
const currentTime = new Date().getTime();
|
|
88
|
+
this.addNewNotification({
|
|
89
|
+
...log,
|
|
90
|
+
id: currentTime,
|
|
91
|
+
time: currentTime,
|
|
92
|
+
});
|
|
93
|
+
msg.respond();
|
|
94
|
+
}
|
|
95
|
+
console.log("Stopped listening to Notifications");
|
|
96
|
+
console.log("Closed Channel Notifications");
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
};
|
|
101
|
+
</script>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<a class="single-notification-item is-complete">
|
|
3
|
+
<p>
|
|
4
|
+
{{ notification.msg }}
|
|
5
|
+
</p>
|
|
6
|
+
<div class="notification-status">
|
|
7
|
+
<p
|
|
8
|
+
:class="{
|
|
9
|
+
'is-success': notification.status === 'Success',
|
|
10
|
+
'is-danger': notification.status === 'Failed',
|
|
11
|
+
'is-info':
|
|
12
|
+
notification.status === 'Started' ||
|
|
13
|
+
notification.status === 'Running',
|
|
14
|
+
'is-warning': notification.status === 'Pending',
|
|
15
|
+
}"
|
|
16
|
+
>
|
|
17
|
+
<i
|
|
18
|
+
class="fa mr-5"
|
|
19
|
+
:class="{
|
|
20
|
+
'fa-check': notification.status === 'Success',
|
|
21
|
+
'fa-exclamation-triangle': notification.status === 'Failed',
|
|
22
|
+
'fa-info-circle':
|
|
23
|
+
notification.status === 'Started' ||
|
|
24
|
+
notification.status === 'Pending' ||
|
|
25
|
+
notification.status === 'Running',
|
|
26
|
+
}"
|
|
27
|
+
/>
|
|
28
|
+
{{ notification.status }}
|
|
29
|
+
</p>
|
|
30
|
+
<p>{{ notification.time | getDayDifferences }} ago</p>
|
|
31
|
+
</div>
|
|
32
|
+
</a>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
export default {
|
|
37
|
+
props: {
|
|
38
|
+
notification: {
|
|
39
|
+
type: Object,
|
|
40
|
+
default: () => ({}),
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span href="" class="task-item" :class="[statusClass]">
|
|
3
|
+
<i class="fa" :class="`fa-${statusIcon}`" />
|
|
4
|
+
{{ title }}
|
|
5
|
+
</span>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
import { computed, toRefs } from "vue";
|
|
10
|
+
import { TaskStatus } from "../../../typings/long-running-tasks.ts";
|
|
11
|
+
|
|
12
|
+
const props = withDefaults(
|
|
13
|
+
defineProps<{ title: string; status: TaskStatus }>(),
|
|
14
|
+
{
|
|
15
|
+
title: "",
|
|
16
|
+
status: "Pending",
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
const { status } = toRefs(props);
|
|
21
|
+
const statusClass = computed(() => `is-${status.value.toLowerCase()}`);
|
|
22
|
+
const statusIcon = computed(() => {
|
|
23
|
+
if (status.value === "Running" || status.value === "Started")
|
|
24
|
+
return "circle-o-notch";
|
|
25
|
+
else if (status.value === "Success") return "check-circle";
|
|
26
|
+
else if (status.value === "Failed") return "times-circle";
|
|
27
|
+
else return "spinner";
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<style scoped lang="scss">
|
|
32
|
+
.task-item {
|
|
33
|
+
font-size: 14px;
|
|
34
|
+
display: block;
|
|
35
|
+
padding: 5px;
|
|
36
|
+
border-radius: 5px;
|
|
37
|
+
transition: all 0.3s ease-in-out;
|
|
38
|
+
&:hover {
|
|
39
|
+
background-color: var(--ac-white-light);
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
&.is-active {
|
|
43
|
+
background-color: var(--ac-white-light);
|
|
44
|
+
}
|
|
45
|
+
&.is-pending {
|
|
46
|
+
color: var(--ac-gray-light);
|
|
47
|
+
i {
|
|
48
|
+
visibility: hidden;
|
|
49
|
+
}
|
|
50
|
+
&:hover {
|
|
51
|
+
background-color: transparent;
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
&.is-aborted {
|
|
56
|
+
color: var(--ac-gray-light);
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color: transparent;
|
|
59
|
+
cursor: not-allowed;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&.is-running,
|
|
63
|
+
&.is-started {
|
|
64
|
+
i {
|
|
65
|
+
color: var(--ac-primary);
|
|
66
|
+
animation-name: spin;
|
|
67
|
+
animation-duration: 1000ms;
|
|
68
|
+
animation-iteration-count: infinite;
|
|
69
|
+
animation-timing-function: linear;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes spin {
|
|
73
|
+
from {
|
|
74
|
+
transform: rotate(0deg);
|
|
75
|
+
}
|
|
76
|
+
to {
|
|
77
|
+
transform: rotate(360deg);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
&.is-success {
|
|
82
|
+
i {
|
|
83
|
+
color: #158748;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
&.is-failed {
|
|
87
|
+
i {
|
|
88
|
+
color: #ff3729;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<modal
|
|
3
|
+
:open="open"
|
|
4
|
+
:title="title"
|
|
5
|
+
:is-close-option-disabled="!enableModalClose"
|
|
6
|
+
:ignore-outside-click="true"
|
|
7
|
+
:hide-action-footer="!enableModalFooter"
|
|
8
|
+
@closemodal="$emit('close')"
|
|
9
|
+
>
|
|
10
|
+
<div v-if="connectionError" class="task-simple-wrapper">
|
|
11
|
+
<div class="task-cogs-icon">
|
|
12
|
+
<i class="fa fa-times-circle has-text-danger fa-5x fa-fw"></i>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="task-log">
|
|
15
|
+
<span class="task-title">
|
|
16
|
+
<i class="fa fa-times-circle mr-5 is-failed" />
|
|
17
|
+
<span> Connection error </span>
|
|
18
|
+
</span>
|
|
19
|
+
<span>{{ connectionError }}</span>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div
|
|
23
|
+
v-else-if="isNatsConnectionLoading || !activeStep"
|
|
24
|
+
class="is-justify-content-center"
|
|
25
|
+
:class="simple ? 'task-simple-wrapper' : 'task-complex-wrapper'"
|
|
26
|
+
>
|
|
27
|
+
<preloader
|
|
28
|
+
:style="{ height: '100%' }"
|
|
29
|
+
class="is-fullheight"
|
|
30
|
+
message="Connecting..."
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
<div v-else-if="simple" class="task-simple-wrapper">
|
|
34
|
+
<div class="task-cogs-icon">
|
|
35
|
+
<i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
|
|
36
|
+
<span class="is-flex is-flex-direction-column">
|
|
37
|
+
<i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
|
|
38
|
+
<i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
|
|
39
|
+
</span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="task-log">
|
|
42
|
+
<span class="task-title">
|
|
43
|
+
<i
|
|
44
|
+
v-if="activeTask?.status === 'Running'"
|
|
45
|
+
class="fa fa-circle-o-notch fa-spin mr-5"
|
|
46
|
+
/>
|
|
47
|
+
<i
|
|
48
|
+
v-else-if="activeTask?.status === 'Success'"
|
|
49
|
+
class="fa fa-check-circle mr-5 is-success"
|
|
50
|
+
/>
|
|
51
|
+
<i
|
|
52
|
+
v-else-if="activeTask?.status === 'Failed'"
|
|
53
|
+
class="fa fa-times-circle mr-5 is-failed"
|
|
54
|
+
/>
|
|
55
|
+
<span>
|
|
56
|
+
{{ activeTask?.step }}
|
|
57
|
+
</span>
|
|
58
|
+
</span>
|
|
59
|
+
<span>{{ activeTask?.logs[activeTask?.logs.length - 1] }}</span>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<div v-else class="task-complex-wrapper">
|
|
63
|
+
<ul class="task-list">
|
|
64
|
+
<li v-for="task in tasks" :key="task.step">
|
|
65
|
+
<long-running-task-item
|
|
66
|
+
:title="task.step"
|
|
67
|
+
:status="task.status"
|
|
68
|
+
:class="{ 'is-active': activeStep === task.step }"
|
|
69
|
+
/>
|
|
70
|
+
</li>
|
|
71
|
+
</ul>
|
|
72
|
+
<long-running-task-terminal
|
|
73
|
+
:key="activeTask?.step"
|
|
74
|
+
:logs="activeTask?.logs"
|
|
75
|
+
class="task-log"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<template #modal-footer-controls>
|
|
80
|
+
<ac-button
|
|
81
|
+
title="Close"
|
|
82
|
+
modifier-classes="is-outlined"
|
|
83
|
+
@click.stop="$emit('close')"
|
|
84
|
+
/>
|
|
85
|
+
<ac-button
|
|
86
|
+
v-if="showSuccessButton"
|
|
87
|
+
:title="successCtx?.btnTitle"
|
|
88
|
+
:is-loader-active="successCtx?.isLoaderActive"
|
|
89
|
+
modifier-classes="is-primary"
|
|
90
|
+
icon-class="step-forward"
|
|
91
|
+
@click="successCtx.onSuccessBtnClick"
|
|
92
|
+
/>
|
|
93
|
+
<ac-button
|
|
94
|
+
v-if="showReportButton"
|
|
95
|
+
title="Report Issue"
|
|
96
|
+
modifier-classes="is-danger"
|
|
97
|
+
icon-class="external-link"
|
|
98
|
+
@click="onReportIssueClick"
|
|
99
|
+
/>
|
|
100
|
+
</template>
|
|
101
|
+
</modal>
|
|
102
|
+
</template>
|
|
103
|
+
<script setup lang="ts">
|
|
104
|
+
import {
|
|
105
|
+
computed,
|
|
106
|
+
getCurrentInstance,
|
|
107
|
+
onBeforeUnmount,
|
|
108
|
+
Ref,
|
|
109
|
+
toRefs,
|
|
110
|
+
watch,
|
|
111
|
+
watchEffect,
|
|
112
|
+
} from "vue";
|
|
113
|
+
import { defineAsyncComponent, ref } from "vue";
|
|
114
|
+
import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
|
|
115
|
+
import { Subscription, StringCodec } from "nats.ws";
|
|
116
|
+
|
|
117
|
+
const Modal = defineAsyncComponent(() => import("../modal/Modal.vue"));
|
|
118
|
+
const LongRunningTaskItem = defineAsyncComponent(
|
|
119
|
+
() => import("../long-running-tasks/LongRunningTaskItem.vue")
|
|
120
|
+
);
|
|
121
|
+
const LongRunningTaskTerminal = defineAsyncComponent(
|
|
122
|
+
() => import("../terminal/LongRunningTaskTerminal.vue")
|
|
123
|
+
);
|
|
124
|
+
const Preloader = defineAsyncComponent(
|
|
125
|
+
() => import("../../v2/preloader/Preloader.vue")
|
|
126
|
+
);
|
|
127
|
+
const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
|
|
128
|
+
|
|
129
|
+
defineEmits(["close"]);
|
|
130
|
+
|
|
131
|
+
const props = withDefaults(
|
|
132
|
+
defineProps<{
|
|
133
|
+
open: boolean;
|
|
134
|
+
title: string;
|
|
135
|
+
simple: boolean;
|
|
136
|
+
natsSubject: string;
|
|
137
|
+
isNatsConnectionLoading: boolean;
|
|
138
|
+
errorCtx?: {
|
|
139
|
+
connectionError: string;
|
|
140
|
+
onError: (msg: string) => void;
|
|
141
|
+
};
|
|
142
|
+
successCtx?: {
|
|
143
|
+
btnTitle?: string;
|
|
144
|
+
isLoaderActive?: boolean;
|
|
145
|
+
onSuccess: () => void;
|
|
146
|
+
onSuccessBtnClick?: () => void;
|
|
147
|
+
};
|
|
148
|
+
}>(),
|
|
149
|
+
{
|
|
150
|
+
open: true,
|
|
151
|
+
simple: true,
|
|
152
|
+
title: "Sample title",
|
|
153
|
+
natsSubject: "",
|
|
154
|
+
isNatsConnectionLoading: false,
|
|
155
|
+
errorCtx: undefined,
|
|
156
|
+
successCtx: undefined,
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
const { natsSubject, open, errorCtx, successCtx } = toRefs(props);
|
|
161
|
+
const connectionError = computed(() => errorCtx.value?.connectionError);
|
|
162
|
+
const currentInstance = getCurrentInstance();
|
|
163
|
+
const $nats = currentInstance?.appContext.config.globalProperties.$nc;
|
|
164
|
+
let subscription: Subscription;
|
|
165
|
+
|
|
166
|
+
const tasks: Ref<Array<Task>> = ref([]);
|
|
167
|
+
const activeStep: Ref<string> = ref("");
|
|
168
|
+
const activeTask = computed(() => {
|
|
169
|
+
const task = tasks.value.find((task) => task.step === activeStep.value);
|
|
170
|
+
return task;
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
function handleTaskLog(log: TaskLog) {
|
|
174
|
+
if (log.step) {
|
|
175
|
+
// log has a step
|
|
176
|
+
// so add new task
|
|
177
|
+
tasks.value.push({
|
|
178
|
+
...log,
|
|
179
|
+
logs: [(log.msg && log.msg) || ""],
|
|
180
|
+
});
|
|
181
|
+
activeStep.value = log.step;
|
|
182
|
+
} else {
|
|
183
|
+
const task = tasks.value.find((task) => task.step === activeStep.value);
|
|
184
|
+
if (task) {
|
|
185
|
+
task.status = log.status;
|
|
186
|
+
if (log.status === "Failed") {
|
|
187
|
+
task.logs.push(log.error || "");
|
|
188
|
+
} else {
|
|
189
|
+
task.logs.push(log.msg || "");
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
async function subscribeToChannel(channelId: string) {
|
|
196
|
+
subscription = $nats?.subscribe(channelId);
|
|
197
|
+
|
|
198
|
+
console.log("Started listening", channelId);
|
|
199
|
+
|
|
200
|
+
if (subscription) {
|
|
201
|
+
// listen to channel events
|
|
202
|
+
for await (const msg of subscription) {
|
|
203
|
+
console.log("Long Running Tasks Modal=>");
|
|
204
|
+
console.log({ data: StringCodec().decode(msg.data) });
|
|
205
|
+
const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
|
|
206
|
+
console.log({ log });
|
|
207
|
+
handleTaskLog(log);
|
|
208
|
+
}
|
|
209
|
+
console.log("Stopped listening", channelId);
|
|
210
|
+
console.log("Closed Channel", channelId);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
watchEffect(() => {
|
|
215
|
+
if (natsSubject.value) {
|
|
216
|
+
subscribeToChannel(natsSubject.value);
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
watch(open, (n) => {
|
|
221
|
+
if (!n) {
|
|
222
|
+
subscription && subscription.unsubscribe();
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
onBeforeUnmount(() => {
|
|
226
|
+
subscription && subscription.unsubscribe();
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
// modal close / footer feature
|
|
230
|
+
const enableModalClose = computed(() => {
|
|
231
|
+
return (
|
|
232
|
+
connectionError.value ||
|
|
233
|
+
activeTask.value?.status === "Failed" ||
|
|
234
|
+
activeTask.value?.status === "Success"
|
|
235
|
+
);
|
|
236
|
+
});
|
|
237
|
+
const enableModalFooter = computed(() => {
|
|
238
|
+
return showReportButton.value || showSuccessButton.value;
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
// report button
|
|
242
|
+
const showReportButton = computed(() => activeTask.value?.status === "Failed");
|
|
243
|
+
function onReportIssueClick() {
|
|
244
|
+
const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
|
|
245
|
+
activeStep.value
|
|
246
|
+
}&labels[]=bug&body=${window.location.href} %0A%0A %60%60%60 %0A ${
|
|
247
|
+
activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0]
|
|
248
|
+
} %0A %60%60%60`;
|
|
249
|
+
window.open(url, "_blank");
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
// success button
|
|
253
|
+
const showSuccessButton = computed(
|
|
254
|
+
() => activeTask.value?.status === "Success" && successCtx.value?.btnTitle
|
|
255
|
+
);
|
|
256
|
+
|
|
257
|
+
// execute on success and on error functions
|
|
258
|
+
watch(
|
|
259
|
+
() => activeTask.value?.status,
|
|
260
|
+
(n) => {
|
|
261
|
+
if (n === "Success") {
|
|
262
|
+
successCtx.value.onSuccess();
|
|
263
|
+
} else if (n === "Failed") {
|
|
264
|
+
errorCtx.value.onError(
|
|
265
|
+
activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0] || ""
|
|
266
|
+
);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
</script>
|
|
271
|
+
|
|
272
|
+
<style scoped lang="scss">
|
|
273
|
+
.task-simple-wrapper {
|
|
274
|
+
display: flex;
|
|
275
|
+
flex-direction: column;
|
|
276
|
+
justify-content: space-between;
|
|
277
|
+
width: 40vw;
|
|
278
|
+
height: 40vh;
|
|
279
|
+
.task-cogs-icon {
|
|
280
|
+
width: 100%;
|
|
281
|
+
height: 70%;
|
|
282
|
+
display: flex;
|
|
283
|
+
align-items: center;
|
|
284
|
+
justify-content: center;
|
|
285
|
+
font-size: 20px;
|
|
286
|
+
color: var(--ac-primary);
|
|
287
|
+
}
|
|
288
|
+
.task-log {
|
|
289
|
+
width: 100%;
|
|
290
|
+
height: 30%;
|
|
291
|
+
display: flex;
|
|
292
|
+
flex-direction: column;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
.task-title {
|
|
296
|
+
span,
|
|
297
|
+
i {
|
|
298
|
+
font-size: 16px;
|
|
299
|
+
}
|
|
300
|
+
i {
|
|
301
|
+
color: var(--ac-primary);
|
|
302
|
+
&.is-success {
|
|
303
|
+
color: #158748;
|
|
304
|
+
}
|
|
305
|
+
&.is-failed {
|
|
306
|
+
color: #ff3729;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
font-weight: 500;
|
|
310
|
+
}
|
|
311
|
+
span {
|
|
312
|
+
font-size: 14px;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
.task-complex-wrapper {
|
|
317
|
+
display: flex;
|
|
318
|
+
flex-direction: row;
|
|
319
|
+
justify-content: space-between;
|
|
320
|
+
width: 60vw;
|
|
321
|
+
height: 60vh;
|
|
322
|
+
|
|
323
|
+
.task-list {
|
|
324
|
+
width: 25%;
|
|
325
|
+
height: 100%;
|
|
326
|
+
}
|
|
327
|
+
.task-log {
|
|
328
|
+
width: 70%;
|
|
329
|
+
height: 100%;
|
|
330
|
+
border-radius: 1rem;
|
|
331
|
+
font-size: 13px;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
</style>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
@mouseenter="notificationPanelOpen = true"
|
|
4
|
+
@mouseleave="notificationPanelOpen = false"
|
|
5
|
+
>
|
|
6
|
+
<button class="button ac-nav-button">
|
|
7
|
+
<span v-if="unreadCount">{{ unreadCount }}</span>
|
|
8
|
+
<i
|
|
9
|
+
class="fa fa-bell"
|
|
10
|
+
:class="{ 'ac-shake': unreadCount }"
|
|
11
|
+
aria-hidden="true"
|
|
12
|
+
></i>
|
|
13
|
+
</button>
|
|
14
|
+
<div class="ac-menu-content is-notification">
|
|
15
|
+
<div class="notification-header">
|
|
16
|
+
<div class="left-content">
|
|
17
|
+
<p>
|
|
18
|
+
Notifications <span>({{ notifications.length }})</span>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="right-content"></div>
|
|
22
|
+
</div>
|
|
23
|
+
<div :key="notificationPanelOpen ? 1 : 0" class="notification-body">
|
|
24
|
+
<transition-group v-if="notifications.length" name="slide-right">
|
|
25
|
+
<notification-item
|
|
26
|
+
v-for="notification in notifications"
|
|
27
|
+
:key="`${notification.id}${unreadCount}`"
|
|
28
|
+
:notification="notification"
|
|
29
|
+
/>
|
|
30
|
+
</transition-group>
|
|
31
|
+
<span v-else class="single-notification-item"
|
|
32
|
+
>No new notifications</span
|
|
33
|
+
>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script setup lang="ts">
|
|
40
|
+
import { NatsConnection, StringCodec, Subscription } from "nats.ws";
|
|
41
|
+
import {
|
|
42
|
+
computed,
|
|
43
|
+
defineAsyncComponent,
|
|
44
|
+
getCurrentInstance,
|
|
45
|
+
ref,
|
|
46
|
+
Ref,
|
|
47
|
+
watch,
|
|
48
|
+
} from "vue";
|
|
49
|
+
import { TaskLog } from "../../../typings/long-running-tasks";
|
|
50
|
+
import { Notification } from "../../../typings/notification";
|
|
51
|
+
|
|
52
|
+
const NotificationItem = defineAsyncComponent(
|
|
53
|
+
() => import("./NotificationItem.vue")
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const notifications: Ref<Notification[]> = ref([]);
|
|
57
|
+
const notificationsRead = ref(0);
|
|
58
|
+
const unreadCount = computed(
|
|
59
|
+
() => notifications.value.length - notificationsRead.value
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
const notificationPanelOpen = ref(false);
|
|
63
|
+
watch(notificationPanelOpen, (n) => {
|
|
64
|
+
if (n) notificationsRead.value = notifications.value.length;
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
function addNewNotification(notification: Notification) {
|
|
68
|
+
notifications.value.unshift(notification);
|
|
69
|
+
if (notificationPanelOpen.value) {
|
|
70
|
+
notificationsRead.value = notifications.value.length;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const app = getCurrentInstance();
|
|
75
|
+
const $nats: NatsConnection = app?.appContext.config.globalProperties.$nc;
|
|
76
|
+
let subscription: Subscription;
|
|
77
|
+
|
|
78
|
+
async function subscribeToNotifcations() {
|
|
79
|
+
subscription = $nats?.subscribe("notifications");
|
|
80
|
+
console.log("Started listening to Notifications");
|
|
81
|
+
|
|
82
|
+
if (subscription) {
|
|
83
|
+
// listen to channel events
|
|
84
|
+
for await (const msg of subscription) {
|
|
85
|
+
console.log("notifications ===>");
|
|
86
|
+
console.log({ data: StringCodec().decode(msg.data) });
|
|
87
|
+
const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
|
|
88
|
+
console.log({ log });
|
|
89
|
+
const currentTime = new Date().getTime();
|
|
90
|
+
addNewNotification({ ...log, id: currentTime, time: currentTime });
|
|
91
|
+
msg.respond();
|
|
92
|
+
}
|
|
93
|
+
console.log("Stopped listening to Notifications");
|
|
94
|
+
console.log("Closed Channel Notifications");
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
subscribeToNotifcations();
|
|
98
|
+
</script>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<a class="single-notification-item is-complete">
|
|
3
|
+
<p>
|
|
4
|
+
{{ notification.msg }}
|
|
5
|
+
</p>
|
|
6
|
+
<div class="notification-status">
|
|
7
|
+
<p
|
|
8
|
+
:class="{
|
|
9
|
+
'is-success': notification.status === 'Success',
|
|
10
|
+
'is-danger': notification.status === 'Failed',
|
|
11
|
+
'is-info':
|
|
12
|
+
notification.status === 'Started' ||
|
|
13
|
+
notification.status === 'Running',
|
|
14
|
+
'is-warning': notification.status === 'Pending',
|
|
15
|
+
}"
|
|
16
|
+
>
|
|
17
|
+
<i
|
|
18
|
+
class="fa mr-5"
|
|
19
|
+
:class="{
|
|
20
|
+
'fa-check': notification.status === 'Success',
|
|
21
|
+
'fa-exclamation-triangle': notification.status === 'Failed',
|
|
22
|
+
'fa-info-circle':
|
|
23
|
+
notification.status === 'Started' ||
|
|
24
|
+
notification.status === 'Pending' ||
|
|
25
|
+
notification.status === 'Running',
|
|
26
|
+
}"
|
|
27
|
+
/>
|
|
28
|
+
{{ notification.status }}
|
|
29
|
+
</p>
|
|
30
|
+
<p>{{ notificationTime }} ago</p>
|
|
31
|
+
</div>
|
|
32
|
+
</a>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { computed, toRefs } from 'vue'
|
|
37
|
+
import { Notification } from '../../../typings/notification'
|
|
38
|
+
import TimeConvert from '../../../plugins/time-convert'
|
|
39
|
+
|
|
40
|
+
const props = withDefaults(defineProps<{ notification: Notification }>(), {
|
|
41
|
+
notification: () => ({
|
|
42
|
+
id: 0,
|
|
43
|
+
status: 'Pending',
|
|
44
|
+
time: 0,
|
|
45
|
+
}),
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
const { notification } = toRefs(props)
|
|
49
|
+
const notificationTime = computed(() =>
|
|
50
|
+
TimeConvert.getDayDifferences({ past: notification.value.time })
|
|
51
|
+
)
|
|
52
|
+
</script>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div ref="terminalRef" class="terminal-body"></div>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script setup lang="ts">
|
|
6
|
+
import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from 'vue'
|
|
7
|
+
import { Terminal } from 'xterm'
|
|
8
|
+
import { FitAddon } from 'xterm-addon-fit'
|
|
9
|
+
import { WebglAddon } from 'xterm-addon-webgl'
|
|
10
|
+
import { Material, MaterialDark } from 'xterm-theme' //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
|
|
11
|
+
|
|
12
|
+
const props = withDefaults(
|
|
13
|
+
defineProps<{
|
|
14
|
+
logs: string[]
|
|
15
|
+
}>(),
|
|
16
|
+
{ logs: () => [] }
|
|
17
|
+
)
|
|
18
|
+
// terminal print logic
|
|
19
|
+
const { logs } = toRefs(props)
|
|
20
|
+
const lastPrintIdx = ref(0)
|
|
21
|
+
watch(
|
|
22
|
+
logs,
|
|
23
|
+
(n) => {
|
|
24
|
+
if (n.length > lastPrintIdx.value) {
|
|
25
|
+
nextTick(() => {
|
|
26
|
+
writeOnTerminal(n.slice(lastPrintIdx.value).join('\n'))
|
|
27
|
+
lastPrintIdx.value = n.length
|
|
28
|
+
})
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{ immediate: true, deep: true }
|
|
32
|
+
)
|
|
33
|
+
|
|
34
|
+
//theme
|
|
35
|
+
const theme = ref('light') // handle theme logic later, without the useStore function because they are different in console and kubedb ui
|
|
36
|
+
const bodyBgc = computed(() =>
|
|
37
|
+
theme.value === 'light' ? '#eaeaea' : '#232322'
|
|
38
|
+
)
|
|
39
|
+
|
|
40
|
+
// xterm component logic
|
|
41
|
+
const terminalRef = ref<HTMLElement>()
|
|
42
|
+
const terminal = new Terminal({
|
|
43
|
+
windowsMode: false,
|
|
44
|
+
theme: theme.value === 'light' ? Material : MaterialDark,
|
|
45
|
+
})
|
|
46
|
+
const fitAddon = new FitAddon()
|
|
47
|
+
terminal.loadAddon(fitAddon)
|
|
48
|
+
const webGlAddon = new WebglAddon()
|
|
49
|
+
webGlAddon.onContextLoss(() => {
|
|
50
|
+
webGlAddon.dispose()
|
|
51
|
+
})
|
|
52
|
+
watchPostEffect(() => {
|
|
53
|
+
if (terminalRef.value) {
|
|
54
|
+
terminal.open(terminalRef.value)
|
|
55
|
+
fitAddon.fit()
|
|
56
|
+
terminal.focus()
|
|
57
|
+
terminal.loadAddon(webGlAddon)
|
|
58
|
+
}
|
|
59
|
+
})
|
|
60
|
+
function writeOnTerminal(msg: string) {
|
|
61
|
+
const lines = msg.split('\n')
|
|
62
|
+
lines.forEach((line, index) => {
|
|
63
|
+
if (lines.length === 1 || index < lines.length - 1) terminal.writeln(line)
|
|
64
|
+
else terminal.write(line)
|
|
65
|
+
})
|
|
66
|
+
}
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<style lang="scss">
|
|
70
|
+
.terminal-body {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
background-color: v-bind(bodyBgc);
|
|
74
|
+
padding: 5px 0px 0px 10px;
|
|
75
|
+
}
|
|
76
|
+
</style>
|