fix(dataplanes): show dataplane info even when /stats fails (#4645)

I found a tiny loading/error bug whilst working on something else.

TLDR: There was a DataLoader waiting on `traffic` but not erroring on
`traffic`s error. When I looked at it I don't think we should be using a
DataLoader (neither a loader nor an error) and just wait for the data
and show the rendered ui once its loaded. Errors are dealt with via
error notifications elsewhere.

I added a little test to prevent future regressions (and tested it
breaks on master)

Previous to this PR, the `About Dataplane` box would show an eternal
loader if this errored (relatively common) even though it could show all
of the data about the Dataplane.

Signed-off-by: John Cowen <john.cowen@konghq.com>

Author: johncowen

packages/kuma-gui/features/mesh/legacy-dataplanes/DataplaneDetailsTraffic.feature

@@ -3,6 +3,7 @@ Feature: mesh / dataplanes / DataplaneDetailsTraffic
   Background:
     Given the CSS selectors
       | Alias           | Selector                                                                   |
+      | about-section   | [data-testid='dataplane-about-section']                                    |
       | detail-view     | [data-testid='data-plane-detail-tabs-view']                                |
       | loading-warning | [data-testid^='notification-data-planes.notifications.stats-not-enhanced'] |
       | traffic         | [data-testid='dataplane-traffic']                                          |
@@ -59,6 +60,7 @@ Feature: mesh / dataplanes / DataplaneDetailsTraffic
       body:
         dataplane:
           networking:
+            address: 58.25.181.133
             gateway: !!js/undefined
         dataplaneInsight:
           mTLS: !!js/undefined
@@ -78,3 +80,4 @@ Feature: mesh / dataplanes / DataplaneDetailsTraffic
     When I visit the "/meshes/default/data-planes/dpp-1-name-of-dataplane/overview" URL
     And the "$traffic" element exists
     And the "$loading-warning" element exists
+    And the "$about-section" element contains "58.25.181.133"

packages/kuma-gui/src/app/data-planes/routes.ts

@@ -2,6 +2,43 @@ import { routes as connections, networking } from '@/app/connections/routes'
 import { routes as subscriptions } from '@/app/subscriptions/routes'
 import type { RouteRecordRaw } from 'vue-router'
 
+export const routes = () => {
+  const item = (): RouteRecordRaw[] => [
+    {
+      path: '',
+      name: 'data-plane-root-view',
+      component: () => import('@/app/data-planes/views/RootView.vue'),
+      children: [...dataplaneRoutes()],
+    },
+  ]
+
+  const summary = (prefix?: string): RouteRecordRaw[] => {
+    const fullPrefix = prefix?.length ? `${prefix}-` : ''
+
+    return [
+      {
+        path: ':proxy',
+        name: `${fullPrefix}data-plane-summary-view`,
+        component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
+      },
+    ]
+  }
+
+  return {
+    items: (): RouteRecordRaw[] => {
+      return [
+        {
+          path: 'data-planes',
+          name: 'data-plane-list-view',
+          component: () => import('@/app/data-planes/views/DataPlaneListView.vue'),
+          children: summary(),
+        },
+      ]
+    },
+    item,
+    summary,
+  }
+}
 export const dataplaneRoutes = (): RouteRecordRaw[] => {
   return [
     {
@@ -77,40 +114,3 @@ export const dataplaneRoutes = (): RouteRecordRaw[] => {
   ]
 }
 
-export const routes = () => {
-  const item = (): RouteRecordRaw[] => [
-    {
-      path: '',
-      name: 'data-plane-root-view',
-      component: () => import('@/app/legacy-data-planes/views/RootView.vue'),
-      children: [...dataplaneRoutes()],
-    },
-  ]
-
-  const summary = (prefix?: string): RouteRecordRaw[] => {
-    const fullPrefix = prefix?.length ? `${prefix}-` : ''
-
-    return [
-      {
-        path: ':proxy',
-        name: `${fullPrefix}data-plane-summary-view`,
-        component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
-      },
-    ]
-  }
-
-  return {
-    items: (): RouteRecordRaw[] => {
-      return [
-        {
-          path: 'data-planes',
-          name: 'data-plane-list-view',
-          component: () => import('@/app/data-planes/views/DataPlaneListView.vue'),
-          children: summary(),
-        },
-      ]
-    },
-    item,
-    summary,
-  }
-}

…ata-planes/views/DataPlaneRouteGuard.vue …ata-planes/views/DataPlaneRouteGuard.vuepackages/kuma-gui/src/app/legacy-data-planes/views/DataPlaneRouteGuard.vue renamed to packages/kuma-gui/src/app/data-planes/views/DataPlaneRouteGuard.vue packages/kuma-gui/src/app/legacy-data-planes/views/DataPlaneRouteGuard.vue renamed to packages/kuma-gui/src/app/data-planes/views/DataPlaneRouteGuard.vue

@@ -3,6 +3,43 @@ import { routes as connections, networking } from '@/app/connections/routes'
 import { routes as subscriptions } from '@/app/subscriptions/routes'
 import type { RouteRecordRaw } from 'vue-router'
 
+export const routes = () => {
+  const item = (): RouteRecordRaw[] => [
+    {
+      path: '',
+      name: 'data-plane-root-view',
+      component: () => import('@/app/data-planes/views/RootView.vue'),
+      children: [...legacyDataplaneRoutes()],
+    },
+  ]
+
+  const summary = (prefix?: string): RouteRecordRaw[] => {
+    const fullPrefix = prefix?.length ? `${prefix}-` : ''
+
+    return [
+      {
+        path: ':proxy',
+        name: `${fullPrefix}data-plane-summary-view`,
+        component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
+      },
+    ]
+  }
+
+  return {
+    items: (): RouteRecordRaw[] => {
+      return [
+        {
+          path: 'data-planes',
+          name: 'data-plane-list-view',
+          component: () => import('@/app/data-planes/views/DataPlaneListView.vue'),
+          children: summary(),
+        },
+      ]
+    },
+    item,
+    summary,
+  }
+}
 export const legacyDataplaneRoutes = (): RouteRecordRaw[] => {
   return [
     {
@@ -85,40 +122,3 @@ export const legacyDataplaneRoutes = (): RouteRecordRaw[] => {
   ]
 }
 
-export const routes = () => {
-  const item = (): RouteRecordRaw[] => [
-    {
-      path: '',
-      name: 'data-plane-root-view',
-      component: () => import('@/app/legacy-data-planes/views/RootView.vue'),
-      children: [...legacyDataplaneRoutes()],
-    },
-  ]
-
-  const summary = (prefix?: string): RouteRecordRaw[] => {
-    const fullPrefix = prefix?.length ? `${prefix}-` : ''
-
-    return [
-      {
-        path: ':proxy',
-        name: `${fullPrefix}data-plane-summary-view`,
-        component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
-      },
-    ]
-  }
-
-  return {
-    items: (): RouteRecordRaw[] => {
-      return [
-        {
-          path: 'data-planes',
-          name: 'data-plane-list-view',
-          component: () => import('@/app/data-planes/views/DataPlaneListView.vue'),
-          children: summary(),
-        },
-      ]
-    },
-    item,
-    summary,
-  }
-}