From c95d9e828358fc16bcfce239591fcae850c240c2 Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Thu, 23 Jul 2020 10:26:47 -0400
Subject: [PATCH 1/5] added and implemented a helper function to strip
 creationTime and modificationTime from all Dataplane views.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>
---
 src/helpers.js                           | 15 ++++++++++++++-
 src/views/Entities/Dataplanes.vue        |  5 +++--
 src/views/Entities/GatewayDataplanes.vue |  5 +++--
 src/views/Entities/IngressDataplanes.vue |  5 +++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/helpers.js b/src/helpers.js
index bf026c2fa..c400d0233 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -343,6 +343,18 @@ export function getOffset (url) {
   return match
 }
 
+/**
+ * stripTimes
+ *
+ * Strips the time values from the objects returned from
+ * various endpoints, in a non-destructive manner.
+ */
+export function stripTimes (content) {
+  const { creationTime, modificationTime, ...noTimes } = content
+
+  return noTimes
+}
+
 export default {
   forEach,
   decodeJWT,
@@ -361,5 +373,6 @@ export default {
   humanReadableDate,
   getSome,
   stripUrl,
-  getOffset
+  getOffset,
+  stripTimes
 }
diff --git a/src/views/Entities/Dataplanes.vue b/src/views/Entities/Dataplanes.vue
index 1465990ef..8f1a0c4b0 100644
--- a/src/views/Entities/Dataplanes.vue
+++ b/src/views/Entities/Dataplanes.vue
@@ -155,7 +155,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import { getSome, humanReadableDate, getOffset, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -776,7 +776,8 @@ export default {
                 this.entityOverviewTitle = `Entity Overview for ${i.basicData.name}`
               })
 
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Entities/GatewayDataplanes.vue b/src/views/Entities/GatewayDataplanes.vue
index fdb2f5bda..cf52d5495 100644
--- a/src/views/Entities/GatewayDataplanes.vue
+++ b/src/views/Entities/GatewayDataplanes.vue
@@ -155,7 +155,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import { getSome, humanReadableDate, getOffset, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -777,7 +777,8 @@ export default {
                 this.entityOverviewTitle = `Entity Overview for ${i.basicData.name}`
               })
 
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Entities/IngressDataplanes.vue b/src/views/Entities/IngressDataplanes.vue
index fc2cde269..a5ce81131 100644
--- a/src/views/Entities/IngressDataplanes.vue
+++ b/src/views/Entities/IngressDataplanes.vue
@@ -155,7 +155,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import { getSome, humanReadableDate, getOffset, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -777,7 +777,8 @@ export default {
                 this.entityOverviewTitle = `Entity Overview for ${i.basicData.name}`
               })
 
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true

From 44bb863a5e55f68ec601106c7fbf4ed226669d82 Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Thu, 23 Jul 2020 15:13:56 -0400
Subject: [PATCH 2/5] added the raw date and time in the Meshes detail view.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>
---
 src/helpers.js                | 17 +++++++++++++++++
 src/views/Entities/Meshes.vue | 11 ++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/helpers.js b/src/helpers.js
index c400d0233..9e576273c 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -298,6 +298,22 @@ export function humanReadableDate (tdate) {
   return `on ${systemDate.toLocaleDateString()}`
 }
 
+/**
+ * rawReadableDate
+ */
+export function rawReadableDate (date) {
+  const rawDate = new Date(Date.parse(date))
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }
+  const formattedDate = rawDate.toLocaleDateString('en-US', options)
+  const formattedTime = `${rawDate.getHours()}:${rawDate.getMinutes()}:${rawDate.getSeconds()}`
+
+  return `${formattedDate} @ ${formattedTime}`
+}
+
 /**
  * Takes an object or array and only returns the keys and
  * values you want based on the `items` value.
@@ -371,6 +387,7 @@ export default {
   formatDate,
   deepIncludes,
   humanReadableDate,
+  rawReadableDate,
   getSome,
   stripUrl,
   getOffset,
diff --git a/src/views/Entities/Meshes.vue b/src/views/Entities/Meshes.vue
index 2888e2345..234a027bc 100644
--- a/src/views/Entities/Meshes.vue
+++ b/src/views/Entities/Meshes.vue
@@ -74,7 +74,7 @@
                     {{ key }}
                   </h4>
                   <p v-if="key === 'creationTime' || key === 'modificationTime'">
-                    {{ value | readableDate }}
+                    {{ value | readableDate }} <em>({{ value | rawDate }})</em>
                   </p>
                   <p v-else>
                     {{ value }}
@@ -150,7 +150,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import { getSome, humanReadableDate, rawReadableDate, getOffset, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -180,6 +180,9 @@ export default {
     },
     readableDate (value) {
       return humanReadableDate(value)
+    },
+    rawDate (value) {
+      return rawReadableDate(value)
     }
   },
   mixins: [
@@ -508,7 +511,9 @@ export default {
                 basicData: col1,
                 extendedData: formatted()
               }
-              this.rawEntity = response
+
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true

From 4552bf9d1f91d6d13dc66e90f7c9cf9efac86e01 Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Thu, 23 Jul 2020 16:11:06 -0400
Subject: [PATCH 3/5] removed the creationTime and modificationTime values from
 all policy and entity views. fixed mocks for Traffic Permissions.

---
 src/services/mock.js                      | 22 +++++++++++-----------
 src/views/Policies/CircuitBreakers.vue    |  7 ++++---
 src/views/Policies/FaultInjections.vue    |  7 ++++---
 src/views/Policies/HealthChecks.vue       |  7 ++++---
 src/views/Policies/ProxyTemplates.vue     |  7 ++++---
 src/views/Policies/TrafficLogs.vue        |  7 ++++---
 src/views/Policies/TrafficPermissions.vue |  7 ++++---
 src/views/Policies/TrafficRoutes.vue      |  7 ++++---
 src/views/Policies/TrafficTraces.vue      |  7 ++++---
 9 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/services/mock.js b/src/services/mock.js
index 0d62f4d1e..b620d065d 100644
--- a/src/services/mock.js
+++ b/src/services/mock.js
@@ -1851,7 +1851,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'helloworld',
+            mesh: 'default',
             name: 'tp-bravo-alpha-shiba',
             sources: [
               {
@@ -1870,13 +1870,13 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/mesh-01/traffic-permissions')
+      .onGet('/meshes/default/traffic-permissions')
       .reply(200, {
         total: 3,
         items: [
           {
             type: 'TrafficPermission',
-            mesh: 'mesh-01',
+            mesh: 'default',
             name: 'tp-1',
             sources: [
               {
@@ -1895,7 +1895,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'mesh-01',
+            mesh: 'default',
             name: 'tp-1234',
             sources: [
               {
@@ -1914,7 +1914,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'mesh-01',
+            mesh: 'default',
             name: 'tp-alpha-tango-donut',
             sources: [
               {
@@ -1933,10 +1933,10 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/mesh-01/traffic-permissions/tp-1')
+      .onGet('/meshes/default/traffic-permissions/tp-1')
       .reply(200, {
         type: 'TrafficPermission',
-        mesh: 'mesh-1',
+        mesh: 'default',
         name: 'tp-1',
         creationTime: '2020-05-12T12:31:45.606217+02:00',
         modificationTime: '2020-05-12T12:31:45.606217+02:00',
@@ -1955,10 +1955,10 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/mesh-01/traffic-permissions/tp-1234')
+      .onGet('/meshes/default/traffic-permissions/tp-1234')
       .reply(200, {
         type: 'TrafficPermission',
-        mesh: 'mesh-1',
+        mesh: 'default',
         name: 'tp-1234',
         creationTime: '2020-05-12T12:31:45.606217+02:00',
         modificationTime: '2020-05-12T12:31:45.606217+02:00',
@@ -1977,10 +1977,10 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/mesh-01/traffic-permissions/tp-alpha-tango-donut')
+      .onGet('/meshes/default/traffic-permissions/tp-alpha-tango-donut')
       .reply(200, {
         type: 'TrafficPermission',
-        mesh: 'mesh-1',
+        mesh: 'default',
         name: 'tp-alpha-tango-donut',
         creationTime: '2020-05-12T12:31:45.606217+02:00',
         modificationTime: '2020-05-12T12:31:45.606217+02:00',
diff --git a/src/views/Policies/CircuitBreakers.vue b/src/views/Policies/CircuitBreakers.vue
index 52b46ff66..b6daf26b1 100644
--- a/src/views/Policies/CircuitBreakers.vue
+++ b/src/views/Policies/CircuitBreakers.vue
@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FormatForCLI from '@/mixins/FormatForCLI'
@@ -287,7 +287,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -338,7 +338,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/FaultInjections.vue b/src/views/Policies/FaultInjections.vue
index cc9b95b43..8e22a434e 100644
--- a/src/views/Policies/FaultInjections.vue
+++ b/src/views/Policies/FaultInjections.vue
@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FormatForCLI from '@/mixins/FormatForCLI'
@@ -287,7 +287,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -338,7 +338,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/HealthChecks.vue b/src/views/Policies/HealthChecks.vue
index 909cd9084..9dce2735a 100644
--- a/src/views/Policies/HealthChecks.vue
+++ b/src/views/Policies/HealthChecks.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -279,7 +279,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -330,7 +330,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/ProxyTemplates.vue b/src/views/Policies/ProxyTemplates.vue
index d9a09b337..37721ddbd 100644
--- a/src/views/Policies/ProxyTemplates.vue
+++ b/src/views/Policies/ProxyTemplates.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -279,7 +279,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -330,7 +330,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/TrafficLogs.vue b/src/views/Policies/TrafficLogs.vue
index 90dff558f..eb5fccc24 100644
--- a/src/views/Policies/TrafficLogs.vue
+++ b/src/views/Policies/TrafficLogs.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -279,7 +279,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -330,7 +330,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/TrafficPermissions.vue b/src/views/Policies/TrafficPermissions.vue
index 585a4f0ee..943f37045 100644
--- a/src/views/Policies/TrafficPermissions.vue
+++ b/src/views/Policies/TrafficPermissions.vue
@@ -110,7 +110,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -301,7 +301,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -352,7 +352,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/TrafficRoutes.vue b/src/views/Policies/TrafficRoutes.vue
index 827c4dce0..2e480d15f 100644
--- a/src/views/Policies/TrafficRoutes.vue
+++ b/src/views/Policies/TrafficRoutes.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -279,7 +279,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -330,7 +330,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true
diff --git a/src/views/Policies/TrafficTraces.vue b/src/views/Policies/TrafficTraces.vue
index e9b7bb755..29f31d061 100644
--- a/src/views/Policies/TrafficTraces.vue
+++ b/src/views/Policies/TrafficTraces.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { getSome } from '@/helpers'
+import { getSome, stripTimes } from '@/helpers'
 import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
@@ -279,7 +279,7 @@ export default {
               this.firstEntity = firstItem.name
 
               // load the YAML entity for the first item on page load
-              this.getEntity(firstItem)
+              this.getEntity(stripTimes(firstItem))
 
               // set the selected table row for the first item on page load
               this.$store.dispatch('updateSelectedTableRow', firstItem.name)
@@ -330,7 +330,8 @@ export default {
               const selected = ['type', 'name', 'mesh']
 
               this.entity = getSome(response, selected)
-              this.rawEntity = response
+              // this.rawEntity = response
+              this.rawEntity = stripTimes(response)
             } else {
               this.entity = null
               this.entityIsEmpty = true

From 2bff7f8ccae568e0b5bbf91f330dc8d13f1f4744 Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Thu, 23 Jul 2020 18:05:46 -0400
Subject: [PATCH 4/5] Zone view modifications for routes, API, store, etc.
 Sidebar menu revisions.

---
 .env.development                              |  4 ++--
 src/components/Global/Header.vue              |  8 +++++--
 src/components/Sidebar/MenuList.vue           | 16 ++++++++++---
 src/components/Sidebar/menu.js                | 22 ++++++++---------
 src/components/Skeletons/DataOverview.vue     |  7 +++---
 src/helpers.js                                | 24 ++++++++++++++++++-
 src/router.js                                 | 10 ++++----
 src/store/index.js                            |  4 ++--
 .../Entities/{RemoteCP.vue => Zones.vue}      |  8 +++----
 src/views/Overview.vue                        | 14 +++++++----
 10 files changed, 79 insertions(+), 38 deletions(-)
 rename src/views/Entities/{RemoteCP.vue => Zones.vue} (98%)

diff --git a/.env.development b/.env.development
index d11d272be..f6c921d8e 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_MOCK_API_ENABLED=false
-VUE_APP_KUMA_CONFIG=http://localhost:5681/config
\ No newline at end of file
+VUE_APP_MOCK_API_ENABLED=true
+VUE_APP_KUMA_CONFIG=http://localhost:5681/config
diff --git a/src/components/Global/Header.vue b/src/components/Global/Header.vue
index cbc034286..f4f5aa4ea 100644
--- a/src/components/Global/Header.vue
+++ b/src/components/Global/Header.vue
@@ -25,11 +25,15 @@
             <template slot="content">
               <span>{{ statusContent }}</span>
               <KBadge
-                v-if="multicluster"
                 appearance="success"
                 class="status-badge"
               >
-                Multicluster
+                <span v-if="multicluster">
+                  Multi-Zone
+                </span>
+                <span v-else>
+                  Standalone
+                </span>
               </KBadge>
             </template>
           </status>
diff --git a/src/components/Sidebar/MenuList.vue b/src/components/Sidebar/MenuList.vue
index 32ec13513..040e5cd4f 100644
--- a/src/components/Sidebar/MenuList.vue
+++ b/src/components/Sidebar/MenuList.vue
@@ -4,7 +4,7 @@
       <li
         v-if="!item.hidden"
         :key="item.name"
-        :class="{'menu-title' : item.title, 'hasBadge': item.badge}"
+        :class="{'menu-title' : item.title, 'hasBadge': item.badge, 'is-nested': item.nested }"
       >
         <router-link
           v-if="item.link && item.pathFlip"
@@ -22,7 +22,9 @@
         >
           {{ item.name }}
         </router-link>
-        <span v-else-if="!item.hidden">{{ item.name }}</span>
+        <span v-else-if="!item.hidden">
+          {{ item.name }}
+        </span>
       </li>
     </template>
   </ul>
@@ -159,6 +161,15 @@ export default {
     &:hover a {
       color: #1270b2;
     }
+
+    &.is-nested {
+      line-height: 32px;
+
+      a {
+        font-size: 15px;
+        padding: 0 24px 0 45px;
+      }
+    }
   }
 
   nav.closed & {
@@ -179,5 +190,4 @@ export default {
     }
   }
 }
-
 </style>
diff --git a/src/components/Sidebar/menu.js b/src/components/Sidebar/menu.js
index 4524a1f25..ffbfeb540 100644
--- a/src/components/Sidebar/menu.js
+++ b/src/components/Sidebar/menu.js
@@ -13,17 +13,17 @@ export default {
           root: true
         },
         {
-          name: 'Meshes',
-          link: '/meshes',
+          name: 'Zones',
+          link: '/zones',
           title: false,
-          pathFlip: true
+          root: true
+          // multicluster: true
         },
         {
-          name: 'Remote CPs',
-          link: '/remote-cp',
+          name: 'Meshes',
+          link: '/meshes',
           title: false,
-          root: true
-          // multicluster: true
+          pathFlip: true
         }
       ]
     },
@@ -44,14 +44,14 @@ export default {
         {
           name: 'Ingress',
           link: '/ingress-dataplanes',
-          title: false
-          // multicluster: true
+          title: false,
+          nested: true
         },
         {
           name: 'Gateway',
           link: '/gateway-dataplanes',
-          title: false
-          // multicluster: true
+          title: false,
+          nested: true
         }
       ]
     },
diff --git a/src/components/Skeletons/DataOverview.vue b/src/components/Skeletons/DataOverview.vue
index cb8fc3503..9b306164a 100644
--- a/src/components/Skeletons/DataOverview.vue
+++ b/src/components/Skeletons/DataOverview.vue
@@ -83,7 +83,7 @@
             >
               <span
                 class="entity-tags__label"
-                :class="`entity-tags__label--${item.label.toLowerCase().replace('kuma.io/','')}`"
+                :class="`entity-tags__label--${item.label.toLowerCase().replace('.','-').replace('/','-')}`"
               >
                 {{ item.label }}
               </span>
@@ -402,8 +402,9 @@ export default {
   box-shadow: inset 0 0 0 1px var(--color);
 }
 
-.entity-tags__label--service,
-.entity-tags__label--protocol {
+// this gives kuma-specific native tags a different color
+// to differentiate them from user-created tags.
+span[class*="kuma-io-"] {
   --color: var(--brand-color-6);
 
   background-color: var(--color);
diff --git a/src/helpers.js b/src/helpers.js
index 9e576273c..38835e78b 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -364,6 +364,9 @@ export function getOffset (url) {
  *
  * Strips the time values from the objects returned from
  * various endpoints, in a non-destructive manner.
+ *
+ * @param {Object} content The Object you want to remove the
+ * date/time strings from.
  */
 export function stripTimes (content) {
   const { creationTime, modificationTime, ...noTimes } = content
@@ -371,6 +374,24 @@ export function stripTimes (content) {
   return noTimes
 }
 
+/**
+ * cleanTag
+ *
+ * This function will take native Kuma tags and format
+ * them for things like CSS class usage.
+ */
+export function cleanTag (tag) {
+  /**
+   * this takes something like `kuma.io/service` and turns it into
+   * `kuma-io-service`.
+   */
+
+  return tag
+    .toLowerCase()
+    .replace('.', '-')
+    .replace('/', '-')
+}
+
 export default {
   forEach,
   decodeJWT,
@@ -391,5 +412,6 @@ export default {
   getSome,
   stripUrl,
   getOffset,
-  stripTimes
+  stripTimes,
+  cleanTag
 }
diff --git a/src/router.js b/src/router.js
index 4fa738d3f..16020e709 100644
--- a/src/router.js
+++ b/src/router.js
@@ -115,12 +115,12 @@ export default (store) => {
     },
     // remote CPs
     {
-      path: '/remote-cp',
-      name: 'remote-cp',
-      component: () => import(/* webpackChunkName: "remote-cp" */ '@/views/Entities/RemoteCP'),
+      path: '/zones',
+      name: 'zones',
+      component: () => import(/* webpackChunkName: "zones" */ '@/views/Entities/Zones'),
       meta: {
-        title: 'Remote CPs',
-        breadcrumb: 'Remote CPs'
+        title: 'Zones',
+        breadcrumb: 'Zones'
       }
     },
     // all Meshes
diff --git a/src/store/index.js b/src/store/index.js
index 0333d754f..9bd137335 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -178,9 +178,9 @@ export default (api) => {
        * the unneeded listing of max 100 items.
        */
 
-      // get total clusters (Remote CPs) when in multicluster
+      // get total clusters (Zones) when in multicluster (or "Multi-Zone") mode
       fetchTotalClusterCount ({ commit }) {
-        return api.getLocalCPs()
+        return api.getZones()
           .then(response => {
             const total = response.length
 
diff --git a/src/views/Entities/RemoteCP.vue b/src/views/Entities/Zones.vue
similarity index 98%
rename from src/views/Entities/RemoteCP.vue
rename to src/views/Entities/Zones.vue
index fe31a90c6..bf975c899 100644
--- a/src/views/Entities/RemoteCP.vue
+++ b/src/views/Entities/Zones.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="local-cps">
+  <div class="zones">
     <page-header noflex>
       <h2 class="xxl">
         {{ pageTitle }}
@@ -20,7 +20,7 @@
       </template>
       <template slot="message">
         <p>
-          To access this page, you must be running in <strong>Multicluster</strong> mode.
+          To access this page, you must be running in <strong>Multi-Zone</strong> mode.
         </p>
       </template>
     </KEmptyState>
@@ -104,9 +104,9 @@ import Tabs from '@/components/Utils/Tabs'
 import LabelList from '@/components/Utils/LabelList'
 
 export default {
-  name: 'RemoteCP',
+  name: 'Zones',
   metaInfo: {
-    title: 'Remote CPs'
+    title: 'Zones'
   },
   components: {
     PageHeader,
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index e2b17c9d8..f39706e38 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -2,9 +2,6 @@
   <div class="overview">
     <page-header noflex>
       <breadcrumbs />
-      <!-- <h2 class="xxl">
-        {{ pageTitle }}
-      </h2> -->
     </page-header>
 
     <!-- metrics boxes -->
@@ -107,6 +104,7 @@ export default {
 
       if (mesh === 'all') {
         storeVals = {
+          zoneCount: state.totalClusters,
           meshCount: state.totalMeshCount,
           dataplaneCount: state.totalDataplaneCount,
           faultInjectionCount: state.totalFaultInjectionCount,
@@ -120,6 +118,7 @@ export default {
         }
       } else {
         storeVals = {
+          zoneCount: state.totalClusters,
           dataplaneCount: state.totalDataplaneCountFromMesh,
           faultInjectionCount: state.totalFaultInjectionCountFromMesh,
           healthCheckCount: state.totalHealthCheckCountFromMesh,
@@ -133,6 +132,11 @@ export default {
       }
 
       const tableData = [
+        {
+          metric: 'Zones',
+          value: storeVals.zoneCount,
+          url: `/zones/${this.selectedMesh}`
+        },
         {
           metric: 'Meshes',
           value: storeVals.meshCount,
@@ -188,9 +192,9 @@ export default {
       // if Kuma is running in multicluster mode
       if (this.multicluster) {
         const clusters = {
-          metric: 'Remote CPs',
+          metric: 'Zones',
           value: this.$store.state.totalClusters,
-          url: '/remote-cp'
+          url: '/zones'
         }
 
         tableData.push(clusters)

From 4a6c0968f59d8b792342cf4c64850df06a5acf3f Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Fri, 24 Jul 2020 10:30:17 -0400
Subject: [PATCH 5/5] Overview modifications to align with the new Zones
 changes and approach.

---
 src/components/Metrics/MetricGrid.vue | 20 +++++++++++++++-
 src/services/mock.js                  | 18 ++++++++++++++
 src/store/index.js                    |  2 +-
 src/views/Overview.vue                | 34 +++++++++++++--------------
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/components/Metrics/MetricGrid.vue b/src/components/Metrics/MetricGrid.vue
index e11a69632..b8da9dcef 100644
--- a/src/components/Metrics/MetricGrid.vue
+++ b/src/components/Metrics/MetricGrid.vue
@@ -21,10 +21,16 @@
           {{ metric.metric }}
         </span>
         <span
-          :class="{ 'has-error': index === hasError[index] }"
+          :class="{ 'has-error': index === hasError[index], 'has-extra-label': metric.extraLabel }"
           class="metric-value"
         >
           {{ metric.value | formatValue | formatError }}
+          <em
+            v-if="metric.extraLabel"
+            class="metric-extra-label"
+          >
+            {{ metric.extraLabel }}
+          </em>
         </span>
       </router-link>
       <div
@@ -153,6 +159,18 @@ export default {
         font-weight: 400;
         margin-top: auto;
       }
+
+      &.has-extra-label {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .metric-extra-label {
+      font-style: normal;
+      font-size: 18px;
+      color: var(--tblack-45);
+      margin-left: 8px;
     }
 
     &.danger {
diff --git a/src/services/mock.js b/src/services/mock.js
index d568765fd..22ff4f2db 100644
--- a/src/services/mock.js
+++ b/src/services/mock.js
@@ -2342,6 +2342,24 @@ export default class Mock {
               ingress: {
                 address: '192.168.0.1:1000'
               }
+            },
+            {
+              type: 'Zone',
+              name: 'zone-2',
+              creationTime: '2020-07-22T19:37:28.442793+03:00',
+              modificationTime: '2020-07-22T19:37:28.442793+03:00',
+              ingress: {
+                address: '192.168.0.1:1000'
+              }
+            },
+            {
+              type: 'Zone',
+              name: 'zone-3',
+              creationTime: '2020-07-22T19:37:28.442793+03:00',
+              modificationTime: '2020-07-22T19:37:28.442793+03:00',
+              ingress: {
+                address: '192.168.0.1:1000'
+              }
             }
           ],
           next: null
diff --git a/src/store/index.js b/src/store/index.js
index 9bd137335..e7626573d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -182,7 +182,7 @@ export default (api) => {
       fetchTotalClusterCount ({ commit }) {
         return api.getZones()
           .then(response => {
-            const total = response.length
+            const total = response[0].total
 
             commit('SET_TOTAL_CLUSTER_COUNT', total)
           })
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index f39706e38..3e0b21e6d 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -104,7 +104,6 @@ export default {
 
       if (mesh === 'all') {
         storeVals = {
-          zoneCount: state.totalClusters,
           meshCount: state.totalMeshCount,
           dataplaneCount: state.totalDataplaneCount,
           faultInjectionCount: state.totalFaultInjectionCount,
@@ -118,7 +117,6 @@ export default {
         }
       } else {
         storeVals = {
-          zoneCount: state.totalClusters,
           dataplaneCount: state.totalDataplaneCountFromMesh,
           faultInjectionCount: state.totalFaultInjectionCountFromMesh,
           healthCheckCount: state.totalHealthCheckCountFromMesh,
@@ -132,11 +130,6 @@ export default {
       }
 
       const tableData = [
-        {
-          metric: 'Zones',
-          value: storeVals.zoneCount,
-          url: `/zones/${this.selectedMesh}`
-        },
         {
           metric: 'Meshes',
           value: storeVals.meshCount,
@@ -189,22 +182,25 @@ export default {
         }
       ]
 
-      // if Kuma is running in multicluster mode
-      if (this.multicluster) {
-        const clusters = {
-          metric: 'Zones',
-          value: this.$store.state.totalClusters,
-          url: '/zones'
-        }
-
-        tableData.push(clusters)
+      // append Zones to the data
+      const clusters = {
+        metric: 'Zones',
+        value: this.multicluster
+          ? this.$store.state.totalClusters
+          : '1',
+        extraLabel: !this.multicluster ? '(Standalone)' : false,
+        url: '/zones'
       }
 
-      // if the user is viewing data for all meshes
+      // prepend our Zones to the beginning of the array
+      tableData.unshift(clusters)
+
       if (mesh !== 'all') {
         // if the user is viewing the overview with a mesh selected,
         // we hide the mesh count from the metrics grid
-        tableData.shift()
+        return tableData.filter((value, index, arr) => {
+          return value.metric !== 'Meshes'
+        })
       }
 
       return tableData
@@ -243,6 +239,7 @@ export default {
         // if we are viewing data for all meshes,
         // load the total counts for everything
         actions = [
+          'fetchTotalClusterCount',
           'fetchMeshTotalCount',
           'fetchDataplaneTotalCount',
           'fetchHealthCheckTotalCount',
@@ -263,6 +260,7 @@ export default {
         // if we are viewing data for a single selected mesh,
         // load the total counts just for that selected mesh
         actions = [
+          'fetchTotalClusterCount',
           'fetchDataplaneTotalCountFromMesh',
           'fetchHealthCheckTotalCountFromMesh',
           'fetchProxyTemplateTotalCountFromMesh',