feat: reworks data planes list view

Reworks the data plane list view. The bottom portion of the view detailing the currently selected data plane was removed. As replacement, a condensed data plane summary of the selected data plane was added in the form of a fixed sidebar to the right of the data planes table. Each data plane summary includes a link to a newly added data plane detail view. The data planes table was tweaked to be more space-efficient. Only a few specific tags (kuma.io/service, kuma.io/protocol, and kuma.io/zone) are now represented in the table as separate columns. The sidebar lists all tags.

Adds a column selector to the data plane list view which allows controlling which columns are visible in the table. The selection is stored in the user browser’s local storage (i.e. its device-bound). Eventually, this selector will be added to all data tables in the UI.

Adds a data plane detail view and associated routes. It currently shows the same tabular overview that used to be shown below the data planes table in the list view.

Moves all data plane specific files into `src/data-planes`. This is motivated by wanting to structure the code base by the information hierarchy in the UI.

Creates LoadingBlock, ErrorBlock, and EmptyBlock components for simplifying the use of commonly found components (i.e. the empty states shown when loading or when content is empty or couldn’t be loaded).

Restructures the way the top level elements in the UI (i.e. the main sidebar, main content area, top bar, etc.) are laid out. This was necessary to gain a better control over the layout possibilities for the changes made to the data planes list view. As a nice side effect, a lot of unused or unnecessary code could be removed (e.g. controlling the hover state of the main navigation via CSS instead of JS).

Updates Kongponents to the latest version. This is necessary because some bug fixes made in between are necessary for the changes to the data plane views to work properly. Unfortunately, this made it necessary to regenerate all snapshots which accounts for the biggest number of files changed in this commit.

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>

.env

@@ -6,7 +6,6 @@ VITE_DATA_TIMEOUT=500
 VITE_INSTALL_URL=https://kuma.io/install/latest/
 VITE_VERSION_URL=https://kuma.io/latest_version/
 VITE_NAMESPACE=Kuma
-VITE_SHOW_ENTERPRISE_BUTTON=true
 VITE_KUMA_API_SERVER_URL=http://localhost:5681/
 VITE_KUMA_DP_SERVER_URL=https://localhost:5678/
 VITE_AMCHARTS_LICENSE=''

.eslintrc.js

@@ -19,6 +19,10 @@
   rules: {
     indent: 'off',
     '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/no-unused-vars': ['warn', {
+      argsIgnorePattern: '^_',
+      ignoreRestSiblings: true,
+    }],
     'comma-dangle': ['error', 'always-multiline'],
     'space-before-function-paren': ['error', {
       anonymous: 'always',

.github/workflows/main.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn run lint
 
       - name: Test
-        run: yarn run test:unit
+        run: yarn run test
 
       - name: Build
         run: yarn run build

README.md

@@ -56,7 +56,7 @@ yarn run lint
 
 ### Run your unit tests
 ```
-yarn run test:unit
+yarn test
 ```
 
 ## Development

package.json

@@ -5,20 +5,20 @@
   "description": "Kuma Manager",
   "author": "Kong",
   "scripts": {
-    "dev": "VITE_MOCK_API_ENABLED=true vite",
+    "dev": "cross-env VITE_MOCK_API_ENABLED=true vite",
     "dev:with-api": "vite",
     "preview": "vite preview",
     "build": "vite build",
-    "build:ci": "VITE_MOCK_API_ENABLED=true yarn run build --mode development",
+    "build:ci": "cross-env VITE_MOCK_API_ENABLED=true yarn run build --mode development",
     "lint": "eslint --ext .js,.ts,.vue --fix .",
-    "test:unit": "jest",
-    "test:unit:watch": "yarn run test:unit --watch"
+    "test": "cross-env TZ=UTC jest",
+    "test:watch": "yarn run test --watch"
   },
   "dependencies": {
     "@amcharts/amcharts4": "^4.10.27",
     "@appscode/json2yaml": "^0.1.2",
     "@datadog/browser-logs": "^4.19.0",
-    "@kong/kongponents": "7.0.0-beta.87",
+    "@kong/kongponents": "8.0.0-beta.15",
     "lodash": "^4.17.21",
     "prismjs": "^1.29.0",
     "semver": "^7.3.7",
@@ -51,6 +51,7 @@
     "babel-jest": "^29.0.2",
     "babel-plugin-prismjs": "^2.1.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
+    "cross-env": "^7.0.3",
     "dotenv": "^16.0.2",
     "eslint": "^8.23.0",
     "eslint-config-standard": "^17.0.0",
@@ -64,7 +65,7 @@
     "jest-environment-jsdom": "^29.0.2",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
-    "msw": "^0.47.0",
+    "msw": "0.47.0",
     "postcss": "^8.4.16",
     "sass": "^1.54.9",
     "standard": "^17.0.0",

postcss.config.js

@@ -2,7 +2,6 @@
 const config = {
   plugins: [
     require('tailwindcss'),
-    require('autoprefixer'),
   ],
 }
 

src/App.spec.ts

@@ -2,7 +2,7 @@ import { createStore } from 'vuex'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { RouterLinkStub } from '@vue/test-utils'
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/vue'
-import { KAlert, KBadge, KButton, KEmptyState, KIcon, KPop } from '@kong/kongponents'
+import { KAlert, KBadge, KButton, KEmptyState, KIcon, KModal, KPop } from '@kong/kongponents'
 
 import App from './App.vue'
 import TestComponent from '@/testUtils/TestComponent.vue'
@@ -25,8 +25,12 @@ function renderComponent({ status = 'OK', tagline = 'Kuma' }: { status?: string,
         namespaced: true,
         state: {
           status: null,
-          tagline: null,
+          tagline: 'Kuma',
           version: null,
+          clientConfig: {
+            mode: 'global',
+            environment: 'universal',
+          },
         },
         getters: {
           getStatus: (state) => {
@@ -40,10 +44,32 @@ function renderComponent({ status = 'OK', tagline = 'Kuma' }: { status?: string,
             return state.tagline
           },
           getVersion: (state) => state.version,
+          getEnvironment: (state) => state.clientConfig?.environment,
+          getMulticlusterStatus: () => true,
+        },
+      },
+      onboarding: {
+        namespaced: true,
+        getters: {
+          showOnboarding: () => false,
+        },
+      },
+      sidebar: {
+        namespaced: true,
+        state: {
+          insights: {},
+        },
+      },
+      notifications: {
+        namespaced: true,
+        getters: {
+          amountOfActions: () => undefined,
         },
       },
     },
     state: {
+      policies: [],
+      meshes: [{}],
       globalLoading: true,
     },
     actions: {
@@ -56,17 +82,18 @@ function renderComponent({ status = 'OK', tagline = 'Kuma' }: { status?: string,
   return render(App, {
     global: {
       plugins: [router, store],
+      stubs: {
+        'router-link': RouterLinkStub,
+      },
       components: {
         KAlert,
         KBadge,
         KButton,
         KEmptyState,
         KIcon,
+        KModal,
         KPop,
       },
-      stubs: {
-        'router-link': RouterLinkStub,
-      },
     },
   })
 }

src/App.vue

@@ -1,48 +1,113 @@
 <template>
-  <div id="app">
-    <div
-      v-if="loading"
-      class="full-screen"
-    >
-      <KLoader />
-    </div>
+  <div
+    v-if="loading"
+    class="full-screen"
+  >
+    <KLoader />
+  </div>
+
+  <div
+    v-else
+    class="app"
+  >
+    <GlobalHeader />
+
+    <div class="app-content-container">
+      <ApiErrorMessage v-if="status !== 'OK'" />
+
+      <AppSidebar class="app-sidebar" />
 
-    <div v-else-if="status !== 'OK'">
-      <GlobalHeader />
-      <main class="main-content">
-        <ApiErrorMessage />
+      <main
+        class="app-main-content"
+        :class="{
+          'app-main-content--wide': isWideContent,
+          'app-main-content--narrow': !isWideContent,
+        }"
+      >
+        <NotificationManager />
+
+        <OnboardingNotification v-if="showOnboarding" />
+
+        <BreadcrumbsMenu />
+
+        <router-view
+          :key="routeKey"
+          v-slot="{ Component }"
+          class="app-main-content__view"
+        >
+          <transition
+            mode="out-in"
+            name="fade"
+          >
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </main>
     </div>
-
-    <router-view v-else />
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
-import GlobalHeader from '@/components/Global/GlobalHeader.vue'
 
-import KLoader from '@/components/KLoader.vue'
 import ApiErrorMessage from '@/components/Skeletons/ApiErrorMessage.vue'
+import AppSidebar from '@/components/Sidebar/AppSidebar.vue'
+import BreadcrumbsMenu from '@/components/BreadcrumbsMenu.vue'
+import GlobalHeader from '@/components/Global/GlobalHeader.vue'
+import KLoader from '@/components/KLoader.vue'
+import NotificationManager from '@/components/NotificationManager/NotificationManager.vue'
+import OnboardingNotification from '@/components/NotificationManager/components/OnboardingNotification.vue'
 
 export default {
+  name: 'App',
+
   components: {
+    ApiErrorMessage,
+    AppSidebar,
+    BreadcrumbsMenu,
     GlobalHeader,
     KLoader,
-    ApiErrorMessage,
+    NotificationManager,
+    OnboardingNotification,
   },
 
   data() {
-    return { loading: true, timeout: null }
+    return {
+      loading: true,
+      timeout: null,
+    }
   },
+
   computed: {
     ...mapState({
       globalLoading: (state) => state.globalLoading,
     }),
+
     ...mapGetters({
+      showOnboarding: 'onboarding/showOnboarding',
       status: 'config/getStatus',
     }),
+
+    /**
+     * The `router-view`’s `key` attribute value.
+     *
+     * Is always set to `'default'` (i.e. will never trigger an explicit re-render via Vue’s `key` mechanism).
+     * However, in some scenarios, we want Vue to re-render a route’s components
+     * (e.g. `src/views/Policies/PolicyView.vue` which is used by some dozen policy routes).
+     */
+    routeKey() {
+      if (this.$route.meta.shouldReRender) {
+        return this.$route.path
+      }
+
+      return 'default'
+    },
+
+    isWideContent() {
+      return ['data-plane-list-view'].includes(this.$route.name)
+    },
   },
+
   watch: {
     globalLoading: function (loading) {
       this.timeout = setTimeout(() => {
@@ -56,12 +121,15 @@ export default {
       document.title = routeMeta?.title ? `${routeMeta.title} | ${siteTitle}` : siteTitle
     },
   },
+
   beforeMount() {
     this.bootstrap()
   },
+
   unmounted() {
     clearTimeout(this.timeout)
   },
+
   methods: {
     ...mapActions(['bootstrap']),
   },
@@ -81,4 +149,31 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
+.app {
+  height: 100%;
+}
+
+.app-content-container {
+  flex-grow: 1;
+  margin-left: calc(var(--sidebarCollapsedWidth) + var(--subnavWidth));
+}
+
+.app-main-content {
+  padding: var(--spacing-lg);
+  transition: var(--transitionTiming) margin var(--transition);
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main-content--narrow {
+  width: 100%;
+  max-width: var(--global-content-max-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.app-main-content--wide .app-main-content__view {
+  flex-grow: 1;
+}
 </style>