Multicluster features

.env

@@ -1,2 +1 @@
 VUE_APP_DATA_TIMEOUT=500
-VUE_APP_GENERAL_CONFIG=http://localhost:5681/config

.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/App.vue

@@ -113,6 +113,15 @@ export default {
 
             // fetch the config
             this.$store.dispatch('getConfig')
+              .then(() => {
+                const config = this.$store.getters.getConfig
+                const mode = config.mode
+
+                // set Kuma's current mode in localStorage.
+                // if the mode is `global`, this denotes that it's
+                // running in Multicluster mode.
+                localStorage.setItem('kumaMode', mode)
+              })
 
             // set the selected mesh in localStorage
             const mesh = () => {

src/components/Global/Header.vue

@@ -21,10 +21,18 @@
           v-if="showStatus"
           class="py-1 md:py-0 md:px-4"
         >
-          <status
-            :active="guiStatus"
-            :content="statusContent"
-          />
+          <status :active="guiStatus">
+            <template slot="content">
+              <span>{{ statusContent }}</span>
+              <KBadge
+                v-if="multicluster"
+                appearance="success"
+                class="status-badge"
+              >
+                Multicluster
+              </KBadge>
+            </template>
+          </status>
         </div>
       </div>
     </div>
@@ -52,7 +60,9 @@ export default {
       // this checks the status of the API itself
       status: 'getStatus',
       // the currently selected mesh
-      currentMesh: 'getSelectedMesh'
+      currentMesh: 'getSelectedMesh',
+      // the status of multicluster
+      multicluster: 'getMulticlusterStatus'
     }),
     showStatus () {
       return !this.$route.meta.hideStatus && this.status === 'OK'
@@ -63,8 +73,11 @@ export default {
   },
   methods: {
     getGuiStatus () {
+      // these localStorage items are set on app launch
       const env = localStorage.getItem('kumaEnv')
       const apiUrl = localStorage.getItem('kumaApiUrl')
+
+      // get the other values from our state
       const tagline = this.$store.getters.getTagline
       const version = this.$store.getters.getVersion
 
@@ -116,6 +129,23 @@ export default {
   margin-left: auto;
 }
 
+.status-badge {
+  --KBadgeWidth: auto;
+  --KBadgePaddingX: var(--spacing-sm);
+}
+
+@media screen and (min-width: 990px) {
+  .status-badge {
+    margin-left: var(--spacing-sm);
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .status-badge {
+    margin-top: var(--spacing-sm);
+  }
+}
+
 @media screen and (max-width: 599px) {
   .upgrade-check-wrapper {
     display: none;

src/components/Sidebar/MenuList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="menu-list">
-    <template v-for="item in menuItems">
+    <template v-for="item in filteredItems">
       <li
         v-if="!item.hidden"
         :key="item.name"
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   name: 'MenuList',
@@ -45,7 +45,22 @@ export default {
     }
   },
   computed: {
-    ...mapState(['selectedMesh'])
+    ...mapState(['selectedMesh']),
+    ...mapGetters({
+      multicluster: 'getMulticlusterStatus'
+    }),
+    filteredItems () {
+      const items = this.menuItems
+      const mode = this.multicluster
+
+      return items.filter(item => {
+        if (mode) {
+          return true
+        }
+
+        return (typeof item.multicluster === 'undefined' || item.multicluster === false)
+      })
+    }
   },
   watch: {
     selectedMesh () {

src/components/Sidebar/SidebarMenu.vue

@@ -74,7 +74,7 @@ export default {
   margin-bottom: 18px;
 
   &.first {
-    margin: 18px 0 0;
+    margin: 18px 0;
   }
 
   &.last {

src/components/Sidebar/menu.js

@@ -17,13 +17,41 @@ export default {
           link: '/meshes',
           title: false,
           pathFlip: true
-          // root: true
         },
+        {
+          name: 'Remote CPs',
+          link: '/remote-cp',
+          title: false,
+          root: true
+          // multicluster: true
+        }
+      ]
+    },
+    {
+      name: 'Dataplane Types',
+      id: 'dataplanes',
+      skipRbac: true,
+      items: [
         {
           name: 'Dataplanes',
+          title: true
+        },
+        {
+          name: 'All Dataplanes',
           link: '/dataplanes',
           title: false
-          // root: true
+        },
+        {
+          name: 'Ingress',
+          link: '/ingress-dataplanes',
+          title: false
+          // multicluster: true
+        },
+        {
+          name: 'Gateway',
+          link: '/gateway-dataplanes',
+          title: false
+          // multicluster: true
         }
       ]
     },

src/components/Skeletons/DataOverview.vue

@@ -65,7 +65,7 @@
           >
             <div
               class="entity-status"
-              :class="{ 'is-offline': (rowValue.toLowerCase() === 'offline') }"
+              :class="{ 'is-offline': (rowValue.toString().toLowerCase() === 'offline' || rowValue === false) }"
             >
               <span class="entity-status__dot" />
               <span class="entity-status__label">{{ rowValue }}</span>
@@ -309,10 +309,7 @@ export default {
   },
   methods: {
     tableRowHandler (e, row, type) {
-      this.$emit('tableAction', {
-        name: row.name,
-        mesh: row.mesh
-      })
+      this.$emit('tableAction', row)
     }
   }
 }

src/components/Skeletons/YamlView.vue

@@ -180,7 +180,7 @@ export default {
       return !this.isEmpty && !this.hasError && !this.isLoading
     },
     activeTab: {
-      get (test) {
+      get () {
         const env = this.environment
 
         return {
@@ -206,6 +206,7 @@ export default {
         delete sourceObj.type
         delete sourceObj.name
 
+        newObj.apiVersion = 'kuma.io/v1alpha1'
         newObj.kind = type
         newObj.metadata = {
           name: name

src/components/Utils/EntityURLControl.vue

@@ -1,22 +1,27 @@
 <template>
-  <KClipboardProvider v-slot="{ copyToClipboard }">
-    <KPop placement="bottom">
-      <KButton
-        appearance="secondary"
-        size="small"
-        @click="() => { copyToClipboard(url) }"
-      >
-        <KIcon
-          slot="icon"
-          icon="externalLink"
-        />
-        {{ copyButtonText }}
-      </KButton>
-      <div slot="content">
-        <p>{{ confirmationText }}</p>
-      </div>
-    </KPop>
-  </KClipboardProvider>
+  <div class="entity-url-control">
+    <KClipboardProvider
+      v-if="shouldDisplay"
+      v-slot="{ copyToClipboard }"
+    >
+      <KPop placement="bottom">
+        <KButton
+          appearance="secondary"
+          size="small"
+          @click="() => { copyToClipboard(url) }"
+        >
+          <KIcon
+            slot="icon"
+            icon="externalLink"
+          />
+          {{ copyButtonText }}
+        </KButton>
+        <div slot="content">
+          <p>{{ confirmationText }}</p>
+        </div>
+      </KPop>
+    </KClipboardProvider>
+  </div>
 </template>
 
 <script>
@@ -35,6 +40,19 @@ export default {
       type: String,
       default: 'URL copied to clipboard!'
     }
+  },
+  computed: {
+    shouldDisplay () {
+      const mesh = this.$route.params.mesh || null
+
+      // we only want to display the copy button when the user has filtered
+      // the view by mesh and not all meshes
+      if (mesh && mesh !== 'all') {
+        return true
+      }
+
+      return false
+    }
   }
 }
 </script>

src/components/Utils/Status.vue

@@ -4,10 +4,9 @@
       class="status__dot"
       :class="{ 'is-active': active }"
     />
-    <span
-      class="status__label"
-      v-html="content"
-    />
+    <span class="status__label">
+      <slot name="content" />
+    </span>
   </div>
 </template>
 
@@ -27,7 +26,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .status {
   display: flex;
   align-items: center;
@@ -46,9 +45,13 @@ export default {
   border-radius: 100%;
   margin-right: 6px;
   background-color: var(--status-color);
+
+  &.is-active {
+    --status-color: var(--green-1);
+  }
 }
 
-.status__dot.is-active {
-  --status-color: var(--green-1);
+.status__label {
+
 }
 </style>

src/router.js

@@ -92,7 +92,7 @@ export default (store) => {
     },
     // App
 
-    // meshes
+    // overview
     {
       path: '/overview',
       alias: '/',
@@ -103,6 +103,16 @@ export default (store) => {
         breadcrumb: 'Overview'
       }
     },
+    // remote CPs
+    {
+      path: '/remote-cp',
+      name: 'remote-cp',
+      component: () => import(/* webpackChunkName: "remote-cp" */ '@/views/Entities/RemoteCP'),
+      meta: {
+        title: 'Remote CPs',
+        breadcrumb: 'Remote CPs'
+      }
+    },
     // all Meshes
     {
       path: '/meshes',
@@ -138,7 +148,7 @@ export default (store) => {
       params: { mesh: ':mesh' },
       component: () => import(/* webpackChunkName: "shell-default" */ '@/views/Shell'),
       children: [
-        // dataplanes
+        // all dataplanes
         {
           path: 'dataplanes',
           name: 'dataplanes',
@@ -148,6 +158,26 @@ export default (store) => {
           },
           component: () => import(/* webpackChunkName: "dataplanes" */ '@/views/Entities/Dataplanes')
         },
+        // ingress dataplanes
+        {
+          path: 'ingress-dataplanes',
+          name: 'ingress-dataplanes',
+          component: () => import(/* webpackChunkName: "dataplanes-ingress" */ '@/views/Entities/IngressDataplanes'),
+          meta: {
+            title: 'Ingress Dataplanes',
+            breadcrumb: 'Ingress Dataplanes'
+          }
+        },
+        // gateway dataplanes
+        {
+          path: 'gateway-dataplanes',
+          name: 'gateway-dataplanes',
+          component: () => import(/* webpackChunkName: "dataplanes-gateway" */ '@/views/Entities/GatewayDataplanes'),
+          meta: {
+            title: 'Gateway Dataplanes',
+            breadcrumb: 'Gateway Dataplanes'
+          }
+        },
         // traffic permissions
         {
           path: 'traffic-permissions',