Mesh Wizard and UI overhaul

.env.development

@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_MOCK_API_ENABLED=false
+VUE_APP_MOCK_API_ENABLED=true
 VUE_APP_KUMA_CONFIG=/dev-api-config.json

package.json

@@ -21,14 +21,16 @@
     "@kongponents/kemptystate": "0.0.1-beta.4",
     "@kongponents/kicon": "0.3.0",
     "@kongponents/kinput": "^0.2.0-0",
+    "@kongponents/kinputswitch": "^0.2.2",
     "@kongponents/kmodal": "^0.1.4-8",
     "@kongponents/kooltip": "0.2.0",
     "@kongponents/kpop": "0.2.10",
     "@kongponents/krumbs": "0.0.1",
-    "@kongponents/ktable": "0.1.4-1",
+    "@kongponents/ktable": "^0.3.1",
+    "@kongponents/ktabs": "^0.1.2",
     "@kongponents/ktoaster": "0.0.1-beta.4",
     "@kongponents/ktoggle": "^0.1.1",
-    "@kongponents/styles": "0.0.4",
+    "@kongponents/styles": "^0.1.2",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "core-js": "^2.6.5",

src/App.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script>
-import { setItemToStorage } from '@/Cache'
 import { mapState, mapGetters } from 'vuex'
 import GlobalHeader from '@/components/Global/Header'
 import Sidebar from '@/components/Sidebar/Sidebar'
@@ -56,33 +55,63 @@ export default {
     ...mapState({
       loading: state => state.globalLoading
     }),
-
     ...mapGetters({
       status: 'getStatus'
     })
   },
+  watch: {
+    '$route' (to, from) {
+      this.bootstrap()
+    }
+  },
   beforeMount () {
-    // check the API status before we do anything else
-    this.$store.dispatch('getStatus')
-      .then(() => {
-        // only dispatch these actions if the API is online
-        if (this.$store.getters.getStatus === 'OK') {
-          // fetch the mesh list
-          this.$store.dispatch('fetchMeshList')
+    this.bootstrap()
+  },
+  methods: {
+    bootstrap () {
+      // check the API status before we do anything else
+      this.$store.dispatch('getStatus')
+        .then(() => {
+          // only dispatch these actions if the API is online
+          if (this.$store.getters.getStatus === 'OK') {
+            // set the current environment
+            this.$store.dispatch('updateEnvironment', localStorage.getItem('kumaEnv'))
 
-          // fetch all dataplanes
-          this.$store.dispatch('getAllDataplanes')
+            // fetch the mesh list
+            this.$store.dispatch('fetchMeshList')
 
-          // fetch the version
-          this.$store.dispatch('getVersion')
+            // fetch all dataplanes
+            // this.$store.dispatch('getAllDataplanes')
 
-          // fetch the tagline
-          this.$store.dispatch('getTagline')
+            // fetch the version
+            this.$store.dispatch('getVersion')
 
-          // set the selected mesh in localStorage
-          setItemToStorage('selectedMesh', this.$store.getters.getSelectedMesh)
-        }
-      })
+            // fetch the tagline
+            this.$store.dispatch('getTagline')
+
+            // set the selected mesh in localStorage
+            const mesh = () => {
+              const lsMesh = localStorage.getItem('selectedMesh')
+              const routeMesh = this.$route.params.mesh || null
+
+              // if the `mesh` param is present, use that
+              if (routeMesh) {
+                return routeMesh
+              }
+              // or use what's available in localStorage
+              else if (lsMesh && lsMesh !== 'undefined' && lsMesh.length > 0) {
+                return lsMesh
+              }
+              // otherwise, fall back to the default value from our VueX store
+              else {
+                return this.$store.getters.getSelectedMesh
+              }
+            }
+
+            localStorage.setItem('selectedMesh', mesh())
+          }
+        })
+    }
   }
 }
 </script>

src/assets/styles/components.css

@@ -32,3 +32,11 @@
   margin: 0 auto 10px auto;
   text-align: center;
 }
+
+/* KCard variants */
+
+@media screen and (min-width: 1024px) {
+  .k-card--small {
+    max-width: 65%;
+  }
+}

src/assets/styles/inputs.css

@@ -7,11 +7,11 @@ select {
   font-size: 16px;
   color: #1155CB;
   line-height: 20px;
-  padding: 10px 13px;
+  padding: 10px 16px 10px 13px;
 
   background-color: #fff;
   background-image: url("../images/chevron-down.svg?external");
-  background-position: 90% 50%;
+  background-position: calc(100% - 13px) 50%;
   background-repeat: no-repeat;
 }
 
@@ -22,3 +22,7 @@ select {
 .k-button.primary {
 
 }
+
+.code-sample {
+  font-family: var(--font-family-mono);
+}

src/assets/styles/variables.css

@@ -15,11 +15,15 @@
   --gray-3: rgba(0, 0, 0, 0.45);
   --gray-4: #ebebeb;
   --gray-5: #f7f9fa;
+  --gray-6: #fdfdfd;
+  --gray-7: #f3f5f7;
+
   --blue-1: #2d64b3;
   --blue-2: #3d88f2;
   --blue-3: rgba(61,136,242,0.07);
   --blue-4: #1155CB;
   --black-1: rgba(0, 0, 0, 0.75);
+
   --green-1: #1b9844;
 
   /* logo colors */
@@ -28,12 +32,22 @@
   --logo-mint: #00E8C2;
   --logo-navy: #172350;
   --logo-green: #3db664;
+  --logo-purple: #290b53;
+
+  --brand-color-1: var(--logo-coral);
+  --brand-color-2: var(--logo-teal);
+  --brand-color-3: var(--logo-mint);
+  --brand-color-4: var(--logo-navy);
+  --brand-color-5: var(--logo-green);
+  --brand-color-6: var(--logo-purple);
 
   /* Topbar */
   --topbar-height: 4rem;
 
   /* Sidebar */
   --sidebar-width: 240px;
+  --sidebar-width-closed: 63px;
+  --sidebar-bg-color: var(--gray-6);
 
   /* Kongponents color remappings */
   --KButtonPrimaryBase: var(--blue-4);

src/components/Global/Header.vue

@@ -3,17 +3,12 @@
     <div class="main-header__content flex justify-between items-center -mx-4">
       <div class="px-4">
         <router-link
-          :to="{
-            name: 'mesh-overview',
-            params: {
-              mesh: currentMesh
-            }
-          }"
+          :to="{ name: 'global-overview' }"
           exact
           class="logo"
         >
           <img
-            src="@/assets/images/kuma-logo.svg?external"
+            src="@/assets/images/kuma-logo-new.svg?external"
             alt="Kuma Logo"
           >
         </router-link>
@@ -75,7 +70,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .main-header {
   position: fixed;
   z-index: 9999;
@@ -94,12 +89,15 @@ export default {
 .main-header--simple {
   border-bottom: 0;
   background: none;
+}
 
-  .logo {
+.logo {
 
-    img {
-      // transform: translateY(68px);
-    }
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 46px;
   }
 }
 </style>

src/components/Pagination.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="pagination">
     <KButton
+      ref="paginatePrev"
       :disabled="!hasPrevious"
       appearance="primary"
-      data-testid="previous"
       @click="$emit('previous')"
     >
       &lsaquo; Previous
     </KButton>
 
     <KButton
+      ref="paginateNext"
       :disabled="!hasNext"
       appearance="primary"
-      data-testid="next"
       @click="$emit('next')"
     >
       Next &rsaquo;
@@ -38,16 +38,17 @@ export default {
 
 <style lang="scss" scoped>
 .pagination {
-  display: flex;
-  margin-top: 16px;
-  justify-content: space-between;
+  // display: flex;
+  // justify-content: space-between;
+  padding: var(--spacing-sm);
+  text-align: right;
 
   button {
     font-size: 14px;
     padding: 4px 8px;
 
-    &:nth-child(2) {
-      margin-left: auto;
+    &:not(:first-of-type) {
+      margin-left: var(--spacing-sm);
     }
 
     &:after {

src/components/Sidebar/KNav.vue

@@ -32,30 +32,30 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 nav {
   position: fixed;
   display: flex;
   flex-direction: column;
-  width: 240px;
+  width: var(--sidebar-width);
   height: auto;
   min-height: 100%;
   border-right: 1px solid #e6e7e8;
-  background: #fff;
+  background: var(--sidebar-bg-color);
   z-index: 1000;
 
   &.closed {
-    width: 63px;
+    width: var(--sidebar-width-closed);
   }
 }
 </style>
 
 <style lang="scss">
 nav#the-sidebar + .main-content {
-  margin-left: 240px;
+  margin-left: var(--sidebar-width);
 }
 
 nav#the-sidebar.closed + .main-content {
-  margin-left: 63px;
+  margin-left: var(--sidebar-width-closed);
 }
 </style>

src/components/Sidebar/MenuList.vue

@@ -7,20 +7,20 @@
         :class="{'menu-title' : item.title, 'hasBadge': item.badge}"
       >
         <router-link
-          v-if="item.link"
+          v-if="item.link && item.pathFlip"
+          :to="{
+            path: item.root ? preparePath(item.link) : preparePath(item.link) + '/' + meshPath
+          }"
+        >
+          {{ item.name }}
+        </router-link>
+        <router-link
+          v-else-if="item.link && !item.pathFlip"
           :to="{
             path: item.root ? preparePath(item.link) : '/' + meshPath + preparePath(item.link)
           }"
         >
           {{ item.name }}
-          <!-- <span
-            v-if="item.badge"
-            class="badge"
-          >{{ item.badge }}</span> -->
-          <!-- <span
-            v-if="item.badgeSecondary"
-            class="badge secondary"
-          >{{ item.badgeSecondary }}</span> -->
         </router-link>
         <span v-else-if="!item.hidden">{{ item.name }}</span>
       </li>
@@ -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
     }
   }
 }