feat: analytics modules backend + admin panel

client/components/admin.vue

@@ -50,6 +50,9 @@
           template(v-if='hasPermission(`manage:system`)')
             v-divider.my-2
             v-subheader.pl-4 {{ $t('admin:nav.modules') }}
+            v-list-tile(to='/analytics')
+              v-list-tile-avatar: v-icon timeline
+              v-list-tile-title {{ $t('admin:analytics.title') }}
             v-list-tile(to='/auth')
               v-list-tile-avatar: v-icon lock_outline
               v-list-tile-title {{ $t('admin:auth.title') }}
@@ -143,6 +146,7 @@ const router = new VueRouter({
     { path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups-edit.vue') },
     { path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users.vue') },
     { path: '/users/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users-edit.vue') },
+    { path: '/analytics', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-analytics.vue') },
     { path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-auth.vue') },
     { path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-rendering.vue') },
     { path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-editor.vue') },

client/components/admin/admin-analytics.vue

@@ -0,0 +1,178 @@
+<template lang='pug'>
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          img.animated.fadeInUp(src='/svg/icon-line-chart.svg', alt='Analytics', style='width: 80px;')
+          .admin-header-title
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:analytics.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:analytics.subtitle') }}
+          v-spacer
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
+
+      v-flex(lg3, xs12)
+        v-card.animated.fadeInUp
+          v-toolbar(flat, color='primary', dark, dense)
+            .subheading {{$t('admin:analytics.providers')}}
+          v-list(two-line, dense).py-0
+            template(v-for='(str, idx) in providers')
+              v-list-tile(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable')
+                v-list-tile-avatar
+                  v-icon(color='grey', v-if='!str.isAvailable') indeterminate_check_box
+                  v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') check_box
+                  v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank
+                v-list-tile-content
+                  v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }}
+                  v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }}
+                v-list-tile-avatar(v-if='selectedProvider === str.key')
+                  v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
+              v-divider(v-if='idx < providers.length - 1')
+
+      v-flex(xs12, lg9)
+
+        v-card.wiki-form.animated.fadeInUp.wait-p2s
+          v-toolbar(color='primary', dense, flat, dark)
+            .subheading {{provider.title}}
+          v-card-text
+            v-form
+              .analytic-provider-logo
+                img(:src='provider.logo', :alt='provider.title')
+              .caption.pt-3 {{provider.description}}
+              .caption.pb-3: a(:href='provider.website') {{provider.website}}
+              v-divider.mt-3
+              v-subheader.pl-0 {{$t('admin:analytics.providerConfiguration')}}
+              .body-1.ml-3(v-if='!provider.config || provider.config.length < 1'): em {{$t('admin:analytics.providerNoConfiguration')}}
+              template(v-else, v-for='cfg in provider.config')
+                v-select(
+                  v-if='cfg.value.type === "string" && cfg.value.enum'
+                  outline
+                  background-color='grey lighten-2'
+                  :items='cfg.value.enum'
+                  :key='cfg.key'
+                  :label='cfg.value.title'
+                  v-model='cfg.value.value'
+                  prepend-icon='settings_applications'
+                  :hint='cfg.value.hint ? cfg.value.hint : ""'
+                  persistent-hint
+                  :class='cfg.value.hint ? "mb-2" : ""'
+                )
+                v-switch.mb-3(
+                  v-else-if='cfg.value.type === "boolean"'
+                  :key='cfg.key'
+                  :label='cfg.value.title'
+                  v-model='cfg.value.value'
+                  color='primary'
+                  prepend-icon='settings_applications'
+                  :hint='cfg.value.hint ? cfg.value.hint : ""'
+                  persistent-hint
+                  )
+                v-text-field(
+                  v-else
+                  outline
+                  background-color='grey lighten-2'
+                  :key='cfg.key'
+                  :label='cfg.value.title'
+                  v-model='cfg.value.value'
+                  prepend-icon='settings_applications'
+                  :hint='cfg.value.hint ? cfg.value.hint : ""'
+                  persistent-hint
+                  :class='cfg.value.hint ? "mb-2" : ""'
+                  )
+
+</template>
+
+<script>
+import _ from 'lodash'
+
+import providersQuery from 'gql/admin/analytics/analytics-query-providers.gql'
+import providersSaveMutation from 'gql/admin/analytics/analytics-mutation-save-providers.gql'
+
+export default {
+  data() {
+    return {
+      providers: [],
+      selectedProvider: '',
+      provider: {}
+    }
+  },
+  watch: {
+    selectedProvider(newValue, oldValue) {
+      this.provider = _.find(this.providers, ['key', newValue]) || {}
+    },
+    providers(newValue, oldValue) {
+      this.selectedProvider = 'google'
+    }
+  },
+  methods: {
+    async refresh() {
+      await this.$apollo.queries.providers.refetch()
+      this.$store.commit('showNotification', {
+        message: this.$t('admin:analytics.refreshSuccess'),
+        style: 'success',
+        icon: 'cached'
+      })
+    },
+    async save() {
+      this.$store.commit(`loadingStart`, 'admin-analytics-saveproviders')
+      try {
+        await this.$apollo.mutate({
+          mutation: providersSaveMutation,
+          variables: {
+            providers: this.providers.map(str => _.pick(str, [
+              'isEnabled',
+              'key',
+              'config'
+            ])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
+          }
+        })
+        this.$store.commit('showNotification', {
+          message: this.$t('admin:analytics.saveSuccess'),
+          style: 'success',
+          icon: 'check'
+        })
+      } catch (err) {
+        this.$store.commit('pushGraphError', err)
+      }
+      this.$store.commit(`loadingStop`, 'admin-analytics-saveproviders')
+    }
+  },
+  apollo: {
+    providers: {
+      query: providersQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => _.cloneDeep(data.analytics.providers).map(str => ({
+        ...str,
+        config: _.sortBy(str.config.map(cfg => ({
+          ...cfg,
+          value: JSON.parse(cfg.value)
+        })), [t => t.value.order])
+      })),
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-analytics-refresh')
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+.analytic-provider-logo {
+  width: 250px;
+  height: 85px;
+  float:right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  img {
+    max-width: 100%;
+    max-height: 50px;
+  }
+}
+
+</style>

client/components/admin/admin-general.vue

@@ -99,36 +99,6 @@
                   v-spacer
                   v-chip(label, color='white', small).primary--text coming soon
                 v-card-text
-                  v-switch(
-                    label='Analytics'
-                    color='primary'
-                    v-model='config.featureAnalytics'
-                    persistent-hint
-                    hint='Enable site analytics using service provider.'
-                    disabled
-                    )
-                  v-select.mt-3(
-                    outline
-                    label='Analytics Service Provider'
-                    :items='analyticsServices'
-                    v-model='config.analyticsService'
-                    prepend-icon='subdirectory_arrow_right'
-                    persistent-hint
-                    hint='Automatically add tracking code for services like Google Analytics.'
-                    disabled
-                    )
-                  v-text-field.mt-2(
-                    v-if='config.analyticsService !== ``'
-                    outline
-                    label='Property Tracking ID'
-                    :counter='255'
-                    v-model='config.analyticsId'
-                    prepend-icon='timeline'
-                    persistent-hint
-                    hint='A unique identifier provided by your analytics service provider.'
-                    )
-
-                  v-divider.mt-3
                   v-switch(
                     label='Asset Image Optimization'
                     color='primary'
@@ -191,7 +161,7 @@ export default {
     return {
       analyticsServices: [
         { text: 'None', value: '' },
-        { text: 'Elasticsearch APM', value: 'elk' },
+        { text: 'Elasticsearch APM RUM', value: 'elk' },
         { text: 'Google Analytics', value: 'ga' },
         { text: 'Google Tag Manager', value: 'gtm' }
       ],

client/components/admin/admin-storage.vue

@@ -166,7 +166,7 @@
                   i18next.caption.mt-3(path='admin:storage.syncScheduleCurrent', tag='div')
                     strong(place='schedule') {{getDefaultSchedule(target.syncInterval)}}
                   i18next.caption(path='admin:storage.syncScheduleDefault', tag='div')
-                    strong {{getDefaultSchedule(target.syncIntervalDefault)}}
+                    strong(place='schedule') {{getDefaultSchedule(target.syncIntervalDefault)}}
 
               template(v-if='target.actions && target.actions.length > 0')
                 v-divider.mt-3
@@ -216,7 +216,9 @@ export default {
       runningAction: false,
       runningActionHandler: '',
       selectedTarget: '',
-      target: {},
+      target: {
+        supportedModes: []
+      },
       targets: [],
       status: []
     }
@@ -265,6 +267,7 @@ export default {
       this.$store.commit(`loadingStop`, 'admin-storage-savetargets')
     },
     getDefaultSchedule(val) {
+      if (!val) { return 'N/A' }
       return moment.duration(val).format('y [years], M [months], d [days], h [hours], m [minutes]')
     },
     async executeAction(targetKey, handler) {

client/graph/admin/analytics/analytics-mutation-save-providers.gql

@@ -0,0 +1,12 @@
+mutation($providers: [AnalyticsProviderInput]!) {
+  analytics {
+    updateProviders(providers: $providers) {
+      responseResult {
+        succeeded
+        errorCode
+        slug
+        message
+      }
+    }
+  }
+}

client/graph/admin/analytics/analytics-query-providers.gql

@@ -0,0 +1,17 @@
+query {
+  analytics {
+    providers {
+      isEnabled
+      key
+      title
+      description
+      isAvailable
+      logo
+      website
+      config {
+        key
+        value
+      }
+    }
+  }
+}

client/static/svg/icon-line-chart.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" width="96px" height="96px">
+<linearGradient id="SVGID_1__43631" gradientUnits="userSpaceOnUse" x1="31.7157" y1="11.1698" x2="32.2157" y2="53.0448" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1__43631);" d="M56,39h-2v11H43V39.899c2.279-0.465,4-2.484,4-4.899c0-1.328-0.529-2.53-1.378-3.427  l6.606-8.257c0.547,0.286,1.143,0.487,1.772,0.594V35h2V23.91c2.833-0.478,5-2.942,5-5.91c0-3.309-2.691-6-6-6s-6,2.691-6,6  c0,1.588,0.625,3.03,1.635,4.104l-6.649,8.312C43.376,30.151,42.706,30,42,30c-1.017,0-1.962,0.309-2.753,0.833l-9.362-9.362  C30.584,20.49,31,19.294,31,18c0-3.309-2.691-6-6-6s-6,2.691-6,6c0,1.294,0.416,2.49,1.115,3.471l-9.362,9.362  C9.962,30.309,9.017,30,8,30c-2.757,0-5,2.243-5,5c0,2.414,1.721,4.434,4,4.899V50H3v2h58v-2h-5V39z M55,14c2.206,0,4,1.794,4,4  s-1.794,4-4,4s-4-1.794-4-4S52.794,14,55,14z M42,32c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S40.346,32,42,32z M25,14  c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S22.794,14,25,14z M5,35c0-1.654,1.346-3,3-3s3,1.346,3,3s-1.346,3-3,3  S5,36.654,5,35z M9,39.899c2.279-0.465,4-2.484,4-4.899c0-1.017-0.309-1.962-0.833-2.753l9.362-9.362  C22.251,23.4,23.091,23.756,24,23.91V35h2V23.91c0.909-0.154,1.749-0.51,2.471-1.025l9.362,9.362C37.309,33.038,37,33.983,37,35  c0,2.414,1.721,4.434,4,4.899V50H26V39h-2v11H9V39.899z"/>
+<linearGradient id="SVGID_2__43631" gradientUnits="userSpaceOnUse" x1="25" y1="15.6667" x2="25" y2="20.6916" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_2__43631);" cx="25" cy="18" r="2"/>
+<linearGradient id="SVGID_3__43631" gradientUnits="userSpaceOnUse" x1="55" y1="15.6667" x2="55" y2="20.6916" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_3__43631);" cx="55" cy="18" r="2"/>
+<linearGradient id="SVGID_4__43631" gradientUnits="userSpaceOnUse" x1="42" y1="31.8333" x2="42" y2="38.3419" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_4__43631);" cx="42" cy="35" r="3"/>
+<linearGradient id="SVGID_5__43631" gradientUnits="userSpaceOnUse" x1="8" y1="31.8333" x2="8" y2="38.3419" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_5__43631);" cx="8" cy="35" r="3"/>
+</svg>