1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<template lang='pug'>
v-dialog(v-model='isShown', width='90vw', max-width='1200')
.dialog-header
span Live Console
v-spacer
.caption.blue--text.text--lighten-3.mr-3 Streaming...
v-progress-circular(
indeterminate
color='blue lighten-3'
:size='20'
:width='2'
)
.consoleTerm(ref='consoleContainer')
v-toolbar(flat, color='grey darken-3', dark)
v-spacer
v-btn(outline, @click='clear')
v-icon(left) cancel_presentation
span Clear
v-btn(outline, @click='close')
v-icon(left) close
span Close
</template>
<script>
import _ from 'lodash'
// import { Terminal } from 'xterm'
// import * as fit from 'xterm/lib/addons/fit/fit'
import livetrailSubscription from 'gql/admin/logging/logging-subscription-livetrail.gql'
// Terminal.applyAddon(fit)
export default {
term: null,
props: {
value: {
type: Boolean,
default: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
watch: {
value(newValue, oldValue) {
if (newValue) {
_.delay(() => {
// this.term = new Terminal()
this.term.open(this.$refs.consoleContainer)
this.term.writeln('Connecting to \x1B[1;3;31mconsole output\x1B[0m...')
this.attach()
}, 100)
} else {
this.term.dispose()
this.term = null
}
}
},
mounted() {
},
methods: {
clear() {
this.term.clear()
},
close() {
this.isShown = false
},
attach() {
const self = this
const observer = this.$apollo.subscribe({
query: livetrailSubscription
})
observer.subscribe({
next(data) {
const item = _.get(data, `data.loggingLiveTrail`, {})
console.info(item)
self.term.writeln(`${item.level}: ${item.output}`)
},
error(error) {
self.$store.commit('showNotification', {
style: 'red',
message: error.message,
icon: 'warning'
})
}
})
}
}
}
</script>
<style lang='scss'>
.consoleTerm {
background-color: #000;
padding: 16px;
width: 100%;
height: 415px;
}
</style>