Merge branch 'feat/dataplane-view-revisions'

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>
kumahq · Jul 24, 2020 · 5668784 · 5668784
2 parents ff56894 + 4a6c096
commit 5668784
Show file tree

Hide file tree

Showing 24 changed files with 223 additions and 94 deletions.
diff --git 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
+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
@@ -29,11 +29,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/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/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
@@ -11,21 +11,18 @@ export default {
           link: '/overview',
           title: false
         },
+        {
+          name: 'Zones',
+          link: '/zones',
+          title: false,
+          root: true
+          // multicluster: true
+        },
         {
           name: 'Meshes',
           link: '/meshes',
           title: false,
           pathFlip: true
-        },
-        {
-          name: 'Remote CPs',
-          link: '/remote-cps',
-          title: false
-          /**
-           * the below setting will hide a nav item if it should only
-           * be shown when Multicluster (Distributed) mode is enabled.
-           */
-          // multicluster: true
         }
       ]
     },
@@ -46,14 +43,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
@@ -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
@@ -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.
@@ -343,6 +359,39 @@ export function getOffset (url) {
   return match
 }
 
+/**
+ * stripTimes
+ *
+ * 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
+
+  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,
@@ -359,7 +408,10 @@ export default {
   formatDate,
   deepIncludes,
   humanReadableDate,
+  rawReadableDate,
   getSome,
   stripUrl,
-  getOffset
+  getOffset,
+  stripTimes,
+  cleanTag
 }
diff --git a/src/router.js b/src/router.js
@@ -118,12 +118,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/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',
@@ -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
@@ -178,11 +178,11 @@ 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
+            const total = response[0].total
 
             commit('SET_TOTAL_CLUSTER_COUNT', total)
           })