Merge branch 'feat/release-0.7.0-prep'

.env

@@ -1 +1,2 @@
 VUE_APP_DATA_TIMEOUT=500
+VUE_APP_SENTRY_DSN=https://[email protected]/5356675

.env.development

@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_MOCK_API_ENABLED=true
+VUE_APP_MOCK_API_ENABLED=false
 VUE_APP_KUMA_CONFIG=http://localhost:5681/config

package.json

@@ -31,6 +31,8 @@
     "@kongponents/ktoaster": "0.0.1-beta.4",
     "@kongponents/ktoggle": "^0.1.1",
     "@kongponents/styles": "^0.1.2",
+    "@sentry/browser": "^5.20.1",
+    "@sentry/integrations": "^5.20.1",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "core-js": "^2.6.5",

src/App.vue

@@ -135,16 +135,14 @@ export default {
               const lsMesh = localStorage.getItem('selectedMesh')
               const routeMesh = this.$route.params.mesh || null
 
-              // if the `mesh` param is present, use that
               if (routeMesh) {
+                // if the `mesh` param is present, use that
                 return routeMesh
-              }
-              // or use what's available in localStorage
-              else if (lsMesh && lsMesh !== 'undefined' && lsMesh.length > 0) {
+              } else if (lsMesh && lsMesh !== 'undefined' && lsMesh.length > 0) {
+                // or use what's available in localStorage
                 return lsMesh
-              }
-              // otherwise, fall back to the default value from our VueX store
-              else {
+              } else {
+                // otherwise, fall back to the default value from our VueX store
                 return this.$store.getters.getSelectedMesh
               }
             }

src/main.js

@@ -6,16 +6,18 @@ import Store from '@/store'
 import axios from 'axios'
 import Kuma from '@/services/kuma'
 
-// Globally import all Kongponents
+/** Sentry */
+// import * as Sentry from '@sentry/browser'
+// import * as Integrations from '@sentry/integrations'
+
+/** Kongponents */
 import './kongponents'
 
-// Third party styles
+/** Tailwind */
 import '@/assets/styles/third-party/tailwind.css'
 
-// Kong Manager styles
+/** Styles */
 import '@/assets/styles/kong-manager/inputs.css'
-
-// Kuma styles
 import '@/assets/styles/variables.css'
 import '@/assets/styles/utilities.css'
 import '@/assets/styles/fonts.css'
@@ -25,11 +27,44 @@ import '@/assets/styles/inputs.css'
 import '@/assets/styles/components.css'
 import '@/assets/styles/transitions.css'
 
-// const kuma = new Kuma({
-//   url: process.env.VUE_APP_KUMA_API || false
+/** Initiate Sentry */
+// let sentryDebugging = true
+// let sentryEnv = 'staging'
+
+// if (process.env.NODE_ENV === 'production') {
+//   sentryDebugging = false
+//   sentryEnv = 'production'
+// }
+
+/**
+ * Sentry integration
+ *
+ * Sentry's out-of-box documentation implements this in a way that
+ * does not work for everyone. To get error tracking working, the below
+ * integration follows these instructions:
+ *
+ * https://github.com/getsentry/sentry-javascript/issues/2160#issuecomment-509964166
+ */
+// Sentry.init({
+//   dsn: process.env.VUE_APP_SENTRY_DSN,
+//   debug: sentryDebugging,
+//   environment: sentryEnv,
+//   integrations: integrations => [
+//     ...integrations,
+//     new Integrations.Vue({
+//       Vue,
+//       attachProps: true,
+//       logErrors: true
+//     })
+//   ]
 // })
 
+/** Send a test Sentry error. Uncomment this and reload the app to trigger */
+// Sentry.captureException(new Error('This is a test error for Sentry.'))
+
+/** Initiate plugins */
 Vue.use(VueMeta)
+
 Vue.config.productionTip = false
 
 /**

src/router.js

@@ -17,7 +17,9 @@ export default (store) => {
     },
     {
       path: '/',
-      redirect: { name: 'global-overview' }
+      redirect: {
+        name: 'global-overview'
+      }
     },
     // Onboarding
     {
@@ -95,17 +97,6 @@ export default (store) => {
     },
     // App
 
-    // overview
-    {
-      path: '/overview',
-      alias: '/',
-      name: 'global-overview',
-      component: () => import(/* webpackChunkName: "global-overview" */ '@/views/Overview'),
-      meta: {
-        title: 'Global Overview',
-        breadcrumb: 'Overview'
-      }
-    },
     // diagnostics
     {
       path: '/diagnostics',
@@ -116,15 +107,14 @@ export default (store) => {
         breadcrumb: 'Diagnostics'
       }
     },
-    // remote CPs
+    // Zones
     {
       path: '/zones',
       name: 'zones',
-      component: () => import(/* webpackChunkName: "zones" */ '@/views/Entities/Zones'),
       meta: {
-        title: 'Zones',
-        breadcrumb: 'Zones'
-      }
+        title: 'Zones'
+      },
+      component: () => import(/* webpackChunkName: "zones" */ '@/views/Entities/Zones')
     },
     // all Meshes
     {
@@ -171,15 +161,15 @@ export default (store) => {
           },
           component: () => import(/* webpackChunkName: "global-overview" */ '@/views/Overview')
         },
-        // remote CPs
-        {
-          path: 'remote-cps',
-          name: 'remote-cps',
-          meta: {
-            title: 'Remote CPs'
-          },
-          component: () => import(/* webpackChunkName: "remote-cps" */ '@/views/Entities/RemoteCP')
-        },
+        // Zones
+        // {
+        //   path: 'zones',
+        //   name: 'zones',
+        //   meta: {
+        //     title: 'Zones'
+        //   },
+        //   component: () => import(/* webpackChunkName: "zones" */ '@/views/Entities/Zones')
+        // },
         // all dataplanes
         {
           path: 'dataplanes',
@@ -302,6 +292,37 @@ export default (store) => {
     next()
   })
 
+  /**
+   * If the user is sent to the homepage root url ("/")
+   * redirect them to the Global Overview and set the mesh to "all".
+   * This ensures they get to the desired starting page once finished
+   * with the onboarding process.
+   *
+   * When the user is sent to the Global Overview from the root, this will also
+   * changed the selected mesh in their localStorage if it's set to something
+   * other than "all".
+   */
+  router.beforeEach((to, from, next) => {
+    const isRoot = to.fullPath === '/'
+    const storedMesh = localStorage.getItem('selectedMesh') || null
+    const targetMesh = 'all'
+
+    if (isRoot) {
+      /** sync the mesh in localStorage with the route change */
+      if (storedMesh && storedMesh !== targetMesh) {
+        localStorage.setItem('selectedMesh', targetMesh)
+      }
+
+      /** send the user to the Global Overview from "/" */
+      next({
+        name: 'global-overview',
+        params: { mesh: targetMesh }
+      })
+    } else {
+      next()
+    }
+  })
+
   /**
    * This will make sure that the Meshes page displays all meshes
    * if the user happens to go to the bare `/meshes` url with no
@@ -319,10 +340,9 @@ export default (store) => {
   })
 
   /**
-   * A route guard for handling the onboarding process. If the user hasn't gone
-   * through the setup/onboarding process yet, this sends them through it. Once
-   * completed, a localStorage value is set to true so that they're not sent
-   * through it again.
+   * If the user hasn't gone through the setup/onboarding process yet, this
+   * sends them through it. Once completed, a localStorage value is set to true
+   * so that they're not sent through it again.
    */
   router.beforeEach((to, from, next) => {
     const hasOnboarded = JSON.parse(localStorage.getItem('kumaOnboardingComplete') || null)

src/services/kuma.js

@@ -36,7 +36,7 @@ export default class Kuma {
   }
 
   /**
-   * Multicluster
+   * Zones
    */
 
   // Zone status
@@ -49,6 +49,20 @@ export default class Kuma {
     return this.client.get('/zones', { params })
   }
 
+  /**
+   * Zone Insights
+   */
+
+  // Get all Zone Insights/Overviews
+  getAllZoneOverviews (params) {
+    return this.client.get('/zones+insights', { params })
+  }
+
+  // Get a single Zone Insight/Overview
+  getZoneOverview (name, params) {
+    return this.client.get(`/zones+insights/${name}`, { params })
+  }
+
   /**
    * Meshes
    */