feat: xterm + UI fixes

client/components/admin/admin-logging-console.vue

@@ -0,0 +1,83 @@
+<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'
+
+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...')
+        }, 100)
+      } else {
+        this.term.dispose()
+        this.term = null
+      }
+    }
+  },
+  mounted() {
+    this.term = new Terminal()
+    this.term.open(this.$refs.consoleContainer)
+  },
+  methods: {
+    clear() {
+      this.term.clear()
+    },
+    close() {
+      this.isShown = false
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+.consoleTerm {
+  background-color: #000;
+  padding: 16px;
+  width: 100%;
+  height: 415px;
+}
+
+</style>

client/components/admin/admin-logging.vue

@@ -25,7 +25,7 @@
             v-btn(color='primary')
               v-icon(left) chevron_right
               | Set Services
-            v-btn(color='black', dark)
+            v-btn(color='black', dark, @click='toggleConsole')
               v-icon(left) keyboard
               | View Console
             v-btn(color='black', dark)
@@ -45,21 +45,21 @@
               v-icon(left) chevron_right
               | Save Configuration
 
-    v-snackbar(
-      color='success'
-      top
-      v-model='refreshCompleted'
-    )
-      v-icon.mr-3(dark) cached
-      | List of logging services has been refreshed.
+    logging-console(v-model='showConsole')
 </template>
 
 <script>
 import _ from 'lodash'
 
+import LoggingConsole from './admin-logging-console.vue'
+
 export default {
+  components: {
+    LoggingConsole
+  },
   data() {
     return {
+      showConsole: false,
       services: [],
       selectedServices: ['console'],
       refreshCompleted: false
@@ -80,6 +80,9 @@ export default {
     async refresh() {
       await this.$apollo.queries.services.refetch()
       this.refreshCompleted = true
+    },
+    toggleConsole () {
+      this.showConsole = !this.showConsole
     }
   }
 }