Merge branch 'master' into feat/dataplane-wizard

.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=/dev-api-config.json

src/components/Breadcrumbs.vue

@@ -27,11 +27,11 @@ export default {
         const key = (r.redirect !== undefined && r.redirect.name !== undefined) ? r.redirect.name : r.name
 
         /** this adds the mesh name and url to the breadcrumb chain */
-        if (this.isCurrentRoute(r) && this.pageMesh && this.$route.name !== 'mesh-overview') {
+        if (this.isCurrentRoute(r) && this.pageMesh && this.$route.name !== 'global-overview') {
           items.push({
             key: this.pageMesh,
-            to: { name: 'mesh-overview' },
-            title: `Mesh Overview for ${this.pageMesh}`,
+            to: { name: 'global-overview' },
+            title: 'Global Overview',
             text: this.pageMesh
           })
         }

src/components/Skeletons/DataOverview.vue

@@ -109,13 +109,7 @@
           </template>
         </KTable>
 
-        <Pagination
-          v-if="tableData && tableRowCount > pageSize"
-          :has-previous="pageNumber > 0"
-          :has-next="pageNumber < pageCount -1"
-          @next="goToNextPage"
-          @previous="goToPreviousPage"
-        />
+        <slot name="pagination" />
       </div>
 
       <!-- empty state if no items are found -->
@@ -279,11 +273,6 @@ export default {
       default: null
     }
   },
-  data () {
-    return {
-      pageNumber: 0
-    }
-  },
   computed: {
     isReady () {
       return !this.isEmpty && !this.hasError && !this.isLoading
@@ -300,21 +289,12 @@ export default {
     tableDataFiltered () {
       const data = this.tableData.data
       const headers = this.tableData.headers
-      const start = this.pageNumber * this.pageSize
-      const end = start + this.pageSize
-      const filtered = data.slice(start, end)
-      const newData = { headers, data: [...filtered] }
+      const newData = { headers, data: [...data] }
 
       return newData
     }
   },
   methods: {
-    goToPreviousPage () {
-      this.pageNumber--
-    },
-    goToNextPage () {
-      this.pageNumber++
-    },
     tableRowHandler (e, row, type) {
       this.$emit('tableAction', {
         name: row.name,

src/helpers.js

@@ -222,6 +222,12 @@ export function deepIncludes (src, target) {
   return src.includes(target)
 }
 
+/**
+ * =============================================================================
+ * Kuma Helpers
+ * =============================================================================
+ */
+
 /**
  * Outputs a friendly human-readable timeframe between now and the date string entered
  * @param {String} tdate
@@ -305,6 +311,38 @@ export function getSome (original, desired) {
   return desired.reduce((obj, key) => ({ ...obj, [key]: cleaned[key] }), {})
 }
 
+/**
+ * stripUrl
+ *
+ * Returns all of a URL after the last slash so that it does not
+ * include the root of the URL that we don't need (e.g. when fetching from
+ * an API).
+ *
+ * @param {String} url
+ */
+export function stripUrl (url) {
+  const regex = new RegExp(/([^\/]+$)/g)
+  const match = url.match(regex)[0]
+
+  return match
+}
+
+/**
+ * getOffset
+ *
+ * Returns the offset from an API query so that it can be used
+ * for things like next and prev controls in pagination.
+ *
+ * @param {String} url The URL you want to find `offset` in and
+ * simply return the value for.
+ */
+export function getOffset (url) {
+  const regex = new RegExp(/offset=(\w+)/)
+  const match = url.match(regex)[0].replace('offset=', '')
+
+  return match
+}
+
 export default {
   forEach,
   decodeJWT,
@@ -321,5 +359,7 @@ export default {
   formatDate,
   deepIncludes,
   humanReadableDate,
-  getSome
+  getSome,
+  stripUrl,
+  getOffset
 }

src/main.js

@@ -40,8 +40,13 @@ Vue.config.productionTip = false
 function VUE_APP () {
   const kuma = new Kuma()
 
+  // setup the HTTP API namespace
   Vue.prototype.$api = kuma
 
+  // define the page size globally for fetching
+  // API item count on table views
+  Vue.prototype.$pageSize = 12
+
   const store = Store(kuma)
   const router = Router(store)
 

src/router.js

@@ -133,7 +133,7 @@ export default (store) => {
       meta: {
         title: 'Meshes',
         breadcrumb: 'Meshes',
-        parent: 'mesh-overview'
+        parent: 'global-overview'
       },
       params: { mesh: ':mesh' },
       component: () => import('@/views/Shell'),
@@ -193,28 +193,6 @@ export default (store) => {
           },
           component: () => import('@/views/Policies/FaultInjections')
         },
-        // fault injections
-        {
-          path: 'fault-injections',
-          name: 'fault-injections',
-          meta: {
-            title: 'Fault Injections'
-          },
-          component: () => import('@/views/Policies/FaultInjection')
-        },
-        {
-          path: 'fault-injections/:faultinjection',
-          name: 'fault-injections-details',
-          params: {
-            faultinjection: ':faultinjection'
-          },
-          meta: {
-            title: 'Fault Injection Details',
-            breadcrumb: 'Fault Injections',
-            parent: 'fault-injections'
-          },
-          component: () => import('@/views/Policies/FaultInjectionDetail')
-        },
         // health checks
         {
           path: 'health-checks',

src/services/kuma.js

@@ -24,13 +24,20 @@ export default class Kuma {
     return this.client.status('/')
   }
 
+  /**
+   * Custom query
+   */
+  query (model, params) {
+    return this.client.get(`/${model}`, { params })
+  }
+
   /**
    * Meshes
    */
 
   // get a list of all meshes
-  getAllMeshes () {
-    return this.client.get('/meshes')
+  getAllMeshes (params) {
+    return this.client.get('/meshes', { params })
   }
 
   // get a single mesh