fix: modules non-string config + live trail logging

client/client-app.js

@@ -8,8 +8,11 @@ import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
 import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
 // import { BatchHttpLink } from 'apollo-link-batch-http'
+import { split } from 'apollo-link'
 import { createHttpLink } from 'apollo-link-http'
+import { WebSocketLink } from 'apollo-link-ws'
 import { InMemoryCache } from 'apollo-cache-inmemory'
+import { getMainDefinition } from 'apollo-utilities'
 import VueApollo from 'vue-apollo'
 import Vuetify from 'vuetify'
 import Velocity from 'velocity-animate'
@@ -48,6 +51,7 @@ moment.locale(siteConfig.lang)
 // ====================================
 
 const graphQLEndpoint = window.location.protocol + '//' + window.location.host + '/graphql'
+const graphQLWSEndpoint = ((window.location.protocol === 'https:') ? 'wss:' : 'ws:') + '//' + window.location.host + '/graphql-subscriptions'
 
 const graphQLLink = createPersistedQueryLink().concat(
   createHttpLink({
@@ -77,8 +81,19 @@ const graphQLLink = createPersistedQueryLink().concat(
   })
 )
 
+const graphQLWSLink = new WebSocketLink({
+  uri: graphQLWSEndpoint,
+  options: {
+    reconnect: true,
+    lazy: true
+  }
+})
+
 window.graphQL = new ApolloClient({
-  link: graphQLLink,
+  link: split(({ query }) => {
+    const { kind, operation } = getMainDefinition(query)
+    return kind === 'OperationDefinition' && operation === 'subscription'
+  }, graphQLWSLink, graphQLLink),
   cache: new InMemoryCache(),
   connectToDevTools: (process.env.node_env === 'development')
 })

client/components/admin/admin-auth.vue

@@ -164,7 +164,7 @@ export default {
             'selfRegistration',
             'domainWhitelist',
             'autoEnrollGroups'
-          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: cfg.value.value}))}))
+          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
         }
       })
       this.$store.commit('showNotification', {

client/components/admin/admin-groups-edit.vue

@@ -1,9 +1,12 @@
 <template lang='pug'>
-  v-card
-    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') people
-      .headline.blue--text.text--darken-2 Edit Group
-      .subheading.grey--text {{name}}
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') people
+          .admin-header-title
+            .headline.blue--text.text--darken-2 Edit Group
+            .subheading.grey--text {{name}}
       v-btn(color='primary', fab, absolute, bottom, right, small, to='/groups'): v-icon arrow_upward
     v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
       v-tab(key='properties') Properties

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

@@ -26,6 +26,8 @@ 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 {
@@ -49,6 +51,8 @@ export default {
           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()
@@ -57,8 +61,7 @@ export default {
     }
   },
   mounted() {
-    this.term = new Terminal()
-    this.term.open(this.$refs.consoleContainer)
+
   },
   methods: {
     clear() {
@@ -66,6 +69,26 @@ export default {
     },
     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'
+          })
+        }
+      })
     }
   }
 }

client/components/admin/admin-logging.vue

@@ -11,9 +11,9 @@
           v-btn(outline, color='grey', @click='refresh', large)
             v-icon refresh
           v-btn(color='black', dark, depressed, @click='toggleConsole', large)
-            v-icon(left) keyboard
-            span View Console
-          v-btn(color='primary', @click='save', depressed, large)
+            ConsoleLineIcon.mr-3
+            span Live Trail
+          v-btn.mr-0(color='primary', @click='save', depressed, large)
             v-icon(left) chevron_right
             span Apply Configuration
 
@@ -112,9 +112,12 @@ import LoggingConsole from './admin-logging-console.vue'
 import loggersQuery from 'gql/admin/logging/logging-query-loggers.gql'
 import loggersSaveMutation from 'gql/admin/logging/logging-mutation-save-loggers.gql'
 
+import ConsoleLineIcon from 'mdi/ConsoleLine'
+
 export default {
   components: {
-    LoggingConsole
+    LoggingConsole,
+    ConsoleLineIcon
   },
   data() {
     return {
@@ -147,7 +150,7 @@ export default {
             'key',
             'config',
             'level'
-          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: cfg.value.value}))}))
+          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
         }
       })
       this.$store.commit('showNotification', {
@@ -156,6 +159,9 @@ export default {
         icon: 'check'
       })
       this.$store.commit(`loadingStop`, 'admin-logging-saveloggers')
+    },
+    toggleConsole() {
+      this.showConsole = !this.showConsole
     }
   },
   apollo: {

client/components/admin/admin-search.vue

@@ -133,7 +133,7 @@ export default {
             'isEnabled',
             'key',
             'config'
-          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: cfg.value.value}))}))
+          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
         }
       })
       this.$store.commit('showNotification', {

client/components/admin/admin-storage.vue

@@ -148,7 +148,7 @@ export default {
             'key',
             'config',
             'mode'
-          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: cfg.value.value}))}))
+          ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
         }
       })
       this.$store.commit('showNotification', {

client/graph/admin/logging/logging-subscription-livetrail.gql

@@ -0,0 +1,7 @@
+subscription {
+  loggingLiveTrail {
+    level
+    output
+    timestamp
+  }
+}