Meshes view adjustments to make it accept single mesh filtering. menu…

… and route adjustments to clean and tighten things up. GlobalOverview adjustments to account for Mesh Wizard being the only present one.

src/components/Sidebar/MenuList.vue

@@ -48,9 +48,12 @@ export default {
     ...mapState(['selectedMesh'])
   },
   watch: {
-    '$route' (to, from) {
-      // set the menu links accordingly
-      this.setMeshPath()
+    $route: {
+      deep: true,
+      handler () {
+        // set the menu links accordingly
+        this.setMeshPath()
+      }
     }
   },
   beforeMount () {
@@ -72,10 +75,10 @@ export default {
       } else if (meshFromLocalStorage && meshFromLocalStorage.length > 0) {
         // otherwise fall back to what's present in localStorage
         this.meshPath = meshFromLocalStorage
-      } else {
-        // otherwise fallback to what's in the store (it has a default value)
-        this.meshPath = this.$store.getters.getSelectedMesh
       }
+
+      // otherwise fallback to what's in the store (it has a default value)
+      this.meshPath = this.$store.getters.getSelectedMesh
     }
   }
 }

src/components/Sidebar/menu.js

@@ -15,11 +15,6 @@ export default {
           title: false,
           root: true
         },
-        // {
-        //   name: 'Mesh Overview',
-        //   link: '/overview',
-        //   title: false
-        // },
         {
           name: 'Meshes',
           link: '/meshes',

src/components/Skeletons/CardSkeleton.vue

@@ -3,7 +3,6 @@
     <KCard
       :title="cardTitle"
       :class="{ 'is-centered': centerText }"
-      border-variant="noBorder"
     >
       <template slot="body">
         <slot

src/components/Utils/MeshSelector.vue

@@ -62,16 +62,10 @@ export default {
       localStorage.setItem('selectedMesh', val)
 
       // update the route accordingly
-      if (this.$route.name === 'global-overview') {
-        this.$router.push({
-          name: 'mesh-overview',
-          params: { mesh: val }
-        })
-      } else {
-        this.$router.push({
-          params: { mesh: val }
-        })
-      }
+      this.$router.push({
+        name: 'all-meshes',
+        query: { mesh: val }
+      })
     }
   }
 }

src/router.js

@@ -15,15 +15,6 @@ export default (store) => {
       },
       component: () => import('@/views/NotFound')
     },
-    // for testing the data overview skeleton component
-    // {
-    //   path: '/test',
-    //   name: 'test-overview',
-    //   meta: {
-    //     title: 'Test Overview'
-    //   },
-    //   component: () => import('@/views/Entities/TestOverview')
-    // },
     {
       path: '/',
       redirect: { name: 'global-overview' }
@@ -82,28 +73,31 @@ export default (store) => {
       ]
     },
     // App
+
+    // meshes
     {
       path: '/overview',
       alias: '/',
       name: 'global-overview',
+      component: () => import('@/views/Overview'),
       meta: {
         title: 'Global Overview',
         breadcrumb: 'Overview'
-      },
-      component: () => import('@/views/Overview')
+      }
     },
     // all Meshes
     {
       path: '/meshes',
-      alias: '/',
       name: 'all-meshes',
       meta: {
         title: 'Meshes',
         breadcrumb: 'Meshes',
         parent: 'global-overview'
       },
+      params: { mesh: ':mesh' },
       component: () => import('@/views/Entities/Meshes')
     },
+
     {
       path: '/:mesh',
       redirect: { name: 'mesh-overview' },
@@ -116,16 +110,6 @@ export default (store) => {
       params: { mesh: ':mesh' },
       component: () => import('@/views/Shell'),
       children: [
-        // meshes
-        {
-          path: 'overview',
-          name: 'mesh-overview',
-          component: () => import('@/views/Entities/EntityOverview'),
-          meta: {
-            title: 'Mesh Overview',
-            excludeAsBreadcrumb: true
-          }
-        },
         // dataplanes
         {
           path: 'dataplanes',

src/views/Entities/Meshes.vue

@@ -162,7 +162,7 @@ export default {
       this.$store.dispatch('updateSelectedTab', this.tabs[0].hash)
 
       // set the active table row
-      this.$store.dispatch('updateSelectedTableRow', ev)
+      this.$store.dispatch('updateSelectedTableRow', data.name)
 
       // load the data into the tabs
       this.getEntity(data)
@@ -171,14 +171,34 @@ export default {
       this.isLoading = true
       this.isEmpty = false
 
-      const getHealthChecks = () => {
-        return this.$api.getAllMeshes()
+      const mesh = this.$route.query.mesh
+
+      const endpoint = (mesh === 'all' || !mesh)
+        ? this.$api.getAllMeshes()
+        : this.$api.getMesh(mesh)
+
+      const getMeshes = () => {
+        return endpoint
           .then(response => {
-            if (response.items.length > 0) {
-              const items = response.items
+            const cleanRes = () => {
+              if (mesh === 'all') {
+                return response.items
+              }
+
+              const newItems = { items: [] }
+
+              newItems.items.push(response)
+
+              return newItems.items
+            }
+
+            const items = cleanRes()
 
+            if (items.length > 0) {
               // sort the table data by name and the mesh it's associated with
-              this.sortEntities(items)
+              if (mesh === 'all') {
+                this.sortEntities(items)
+              }
 
               // set the first item as the default for initial load
               this.firstEntity = items[0].name
@@ -210,14 +230,14 @@ export default {
           })
       }
 
-      getHealthChecks()
+      getMeshes()
     },
     getEntity (entity) {
       this.entityIsLoading = true
       this.entityIsEmpty = false
 
       if (entity && entity !== null) {
-        return this.$api.getMesh(entity)
+        return this.$api.getMesh(entity.name)
           .then(response => {
             if (response) {
               const selected = ['type', 'name']

src/views/Overview.vue

@@ -12,9 +12,9 @@
       :metrics="overviewMetrics"
     />
 
-    <div class="md:flex items-stretch -mx-4">
+    <div class="md:flex -mx-4">
       <CardSkeleton
-        class="md:flex-1 mx-4"
+        class="md:flex-2 mx-4"
         :card-action-route="{ path: '/wizard/mesh' }"
         card-title="Create A Mesh"
         card-action-button-text="Start Now"
@@ -25,7 +25,7 @@
           </p>
         </template>
       </CardSkeleton>
-      <CardSkeleton
+      <!-- <CardSkeleton
         class="md:flex-1 mx-4"
         :card-action-route="{ path: '/default/dataplanes/' }"
         card-title="Add A Service / Dataplane"
@@ -36,8 +36,8 @@
             You can add a new service into a Mesh by adding Dataplanes to it.
           </p>
         </template>
-      </CardSkeleton>
-      <CardSkeleton
+      </CardSkeleton> -->
+      <!-- <CardSkeleton
         class="md:flex-1 mx-4"
         :card-action-route="{ path: '/default/dataplanes/' }"
         card-title="Some Title"
@@ -48,7 +48,7 @@
             Find Services among your {{ title }} Meshes
           </p>
         </template>
-      </CardSkeleton>
+      </CardSkeleton> -->
     </div>
 
     <FrameSkeleton>