chore(dataplanes): refactor out reusable routes (#3406)

This PR has no user visible changes, and is purely moving files around in order to make them more reusable. Its a piece of work working towards #3321 All changes are related to making any XDS Config, Stats and Clusters pages resuable across Dataplanes and ZoneIngress/Egress areas. - Use `<RouteView name="prop.routeName" />` in views I'm planning to reuse in several routes. - Uses route prefixing in related route configuration. - Moves remaining `DataPlaneStatsView` etc into `ConnectionStatsView`, these will be reusable across DPPs/Zones. - Moves `ConnectionInbound/OutboundSummaryOverview` back to `DataPlaneInbound/OutboundSummaryView`. These files are very specific to DDPs only as they display Rules. These therefore belong in the dataplane module, not connections. - Any views that I plan to share are changed to reference `props.networking` instead of `props.dataplaneOverview.networking`. `networking` is a property shared between ZoneIngress/Egress and Dataplanes. Currently in this PR we still use the DataPlaneNetworking type for this property, but I would guess I would use a differently named type that covers both types of resources - this will happen in a later PR. Signed-off-by: John Cowen <[email protected]>
kumahq · Jan 15, 2025 · 12a3f2b · 12a3f2b
1 parent 5b8415b
commit 12a3f2b
Show file tree

Hide file tree

Showing 19 changed files with 123 additions and 82 deletions.
diff --git a/packages/kuma-gui/features/application/MainNavigation.feature b/packages/kuma-gui/features/application/MainNavigation.feature
@@ -95,4 +95,4 @@ Feature: application / MainNavigation
             inbound:
               - port: 51112
       """
-    And the "[data-testid='connection-inbound-summary-stats-view-tab'].active" element exists
+      And the "[data-testid='data-plane-connection-inbound-summary-stats-view-tab'].active" element exists
diff --git a/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature b/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature
@@ -3,7 +3,7 @@ Feature: mesh / dataplanes / connections / clusters
   Scenario: The inbound clusters tab correctly filters by 'localhost_<port>'
     Given the CSS selectors
       | Alias | Selector                                                                              |
-      | code  | [data-testid='connection-inbound-summary-clusters-view'] [data-testid='k-code-block'] |
+      | code  | [data-testid='data-plane-connection-inbound-summary-clusters-view'] [data-testid='k-code-block'] |
     And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/_overview" responds with
       """
       body:
@@ -31,7 +31,7 @@ Feature: mesh / dataplanes / connections / clusters
   Scenario: The outbound clusters tab correctly filters by '<clusterName>'
     Given the CSS selectors
       | Alias | Selector                                                                               |
-      | code  | [data-testid='connection-outbound-summary-clusters-view'] [data-testid='k-code-block'] |
+      | code  | [data-testid='data-plane-connection-outbound-summary-clusters-view'] [data-testid='k-code-block'] |
     And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/stats" responds with
       """
       body: |

diff --git a/packages/kuma-gui/src/app/connections/routes.ts b/packages/kuma-gui/src/app/connections/routes.ts
@@ -1,56 +1,68 @@
 import type { RouteRecordRaw } from 'vue-router'
-export const routes = (): RouteRecordRaw[] => {
+
+export const networking = (prefix: string) => {
+  return [
+    {
+      path: 'xds-config',
+      name: `${prefix}-xds-config-view`,
+      component: () => import('@/app/connections/views/ConnectionsXdsConfigView.vue'),
+    },
+    {
+      path: 'stats',
+      name: `${prefix}-stats-view`,
+      component: () => import('@/app/connections/views/ConnectionsStatsView.vue'),
+    },
+    {
+      path: 'clusters',
+      name: `${prefix}-clusters-view`,
+      component: () => import('@/app/connections/views/ConnectionsClustersView.vue'),
+    },
+
+  ]
+}
+
+export const routes = (prefix: string): RouteRecordRaw[] => {
   return [
     {
       path: 'inbound/:connection',
-      name: 'connection-inbound-summary-view',
+      name: `${prefix}-connection-inbound-summary-view`,
       component: () => import('@/app/connections/views/ConnectionInboundSummaryView.vue'),
       children: [
-        {
-          path: 'overview',
-          name: 'connection-inbound-summary-overview-view',
-          component: () => import('@/app/connections/views/ConnectionInboundSummaryOverviewView.vue'),
-        },
         {
           path: 'stats',
-          name: 'connection-inbound-summary-stats-view',
+          name: `${prefix}-connection-inbound-summary-stats-view`,
           component: () => import('@/app/connections/views/ConnectionInboundSummaryStatsView.vue'),
         },
         {
           path: 'clusters',
-          name: 'connection-inbound-summary-clusters-view',
+          name: `${prefix}-connection-inbound-summary-clusters-view`,
           component: () => import('@/app/connections/views/ConnectionInboundSummaryClustersView.vue'),
         },
         {
           path: 'xds-config',
-          name: 'connection-inbound-summary-xds-config-view',
+          name: `${prefix}-connection-inbound-summary-xds-config-view`,
           component: () => import('@/app/connections/views/ConnectionInboundSummaryXdsConfigView.vue'),
         },
       ],
     },
     {
       path: 'outbound/:connection',
-      name: 'connection-outbound-summary-view',
+      name: `${prefix}-connection-outbound-summary-view`,
       component: () => import('@/app/connections/views/ConnectionOutboundSummaryView.vue'),
       children: [
-        {
-          path: 'overview',
-          name: 'connection-outbound-summary-overview-view',
-          component: () => import('@/app/connections/views/ConnectionOutboundSummaryOverviewView.vue'),
-        },
         {
           path: 'stats',
-          name: 'connection-outbound-summary-stats-view',
+          name: `${prefix}-connection-outbound-summary-stats-view`,
           component: () => import('@/app/connections/views/ConnectionOutboundSummaryStatsView.vue'),
         },
         {
           path: 'clusters',
-          name: 'connection-outbound-summary-clusters-view',
+          name: `${prefix}-connection-outbound-summary-clusters-view`,
           component: () => import('@/app/connections/views/ConnectionOutboundSummaryClustersView.vue'),
         },
         {
           path: 'xds-config',
-          name: 'connection-outbound-summary-xds-config-view',
+          name: `${prefix}-connection-outbound-summary-xds-config-view`,
           component: () => import('@/app/connections/views/ConnectionOutboundSummaryXdsConfigView.vue'),
         },
       ],

diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryClustersView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
@@ -8,7 +8,7 @@
       dataPlane: '',
       connection: '',
     }"
-    name="connection-inbound-summary-clusters-view"
+    :name="props.routeName"
     v-slot="{ route, uri }"
   >
     <RouteTitle
@@ -61,4 +61,7 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
+const props = defineProps<{
+  routeName: string
+}>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -8,7 +8,7 @@
       dataPlane: '',
       connection: '',
     }"
-    name="connection-inbound-summary-stats-view"
+    :name="props.routeName"
     v-slot="{ route, uri }"
   >
     <RouteTitle
@@ -20,7 +20,7 @@
         :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
           mesh: route.params.mesh,
           name: route.params.dataPlane,
-          address: props.dataplaneOverview.dataplane.networking.inboundAddress,
+          address: props.networking.inboundAddress,
         })"
         v-slot="{ data: stats, refresh }"
       >
@@ -62,10 +62,11 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
-import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'
+import type { DataplaneInbound, DataplaneNetworking } from '@/app/data-planes/data/'
 
 const props = defineProps<{
   data: DataplaneInbound
-  dataplaneOverview: DataplaneOverview
+  networking: DataplaneNetworking
+  routeName: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryView.vue
@@ -1,6 +1,6 @@
 <template>
   <RouteView
-    name="connection-inbound-summary-view"
+    :name="props.routeName"
     :params="{
       connection: '',
       inactive: false,
@@ -11,7 +11,7 @@
     <!-- otherwise find the exact inbound -->
     <DataCollection
       :items="props.data"
-      :predicate="props.dataplaneOverview.dataplane.networking.type === 'gateway' ? (item) => true : (item) => item.name === route.params.connection"
+      :predicate="props.networking.type === 'gateway' ? (item) => true : (item) => item.name === route.params.connection"
       :find="true"
       v-slot="{ items }"
     >
@@ -38,7 +38,7 @@
                 },
               }"
             >
-              {{ t(`connections.routes.item.navigation.${name.split('-')[3]}`) }}
+              {{ t(`connections.routes.item.navigation.${name.split('-')[5]}`) }}
             </XAction>
           </template>
         </XTabs>
@@ -47,7 +47,7 @@
           <component
             :is="child.Component"
             :data="items[0]"
-            :dataplane-overview="props.dataplaneOverview"
+            :networking="props.networking"
           />
         </RouterView>
       </AppView>
@@ -56,10 +56,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'
+import type { DataplaneInbound, DataplaneNetworking } from '@/app/data-planes/data/'
 
 const props = defineProps<{
   data: DataplaneInbound[]
-  dataplaneOverview: DataplaneOverview
+  networking: DataplaneNetworking
+  routeName: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryXdsConfigView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryXdsConfigView.vue
@@ -8,7 +8,7 @@
       dataPlane: '',
       connection: '',
     }"
-    name="connection-inbound-summary-xds-config-view"
+    :name="props.routeName"
     v-slot="{ t, route, uri }"
   >
     <RouteTitle
@@ -51,10 +51,10 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
-import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'
+import type { DataplaneInbound } from '@/app/data-planes/data/'
 
 const props = defineProps<{
   data: DataplaneInbound
-  dataplaneOverview: DataplaneOverview
+  routeName: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
@@ -8,7 +8,7 @@
       dataPlane: '',
       connection: '',
     }"
-    name="connection-outbound-summary-clusters-view"
+    :name="props.routeName"
     v-slot="{ route, uri }"
   >
     <RouteTitle
@@ -61,4 +61,7 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
+const props = defineProps<{
+  routeName: string
+}>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -8,7 +8,7 @@
       dataPlane: '',
       connection: '',
     }"
-    name="connection-outbound-summary-stats-view"
+    :name="props.routeName"
     v-slot="{ route, uri }"
   >
     <RouteTitle
@@ -20,7 +20,7 @@
         :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
           mesh: route.params.mesh,
           name: route.params.dataPlane,
-          address: props.dataplaneOverview.dataplane.networking.inboundAddress,
+          address: props.networking.inboundAddress,
         })"
 
         v-slot="{ data, refresh }"
@@ -58,8 +58,9 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
-import type { DataplaneOverview } from '@/app/data-planes/data/'
+import type { DataplaneNetworking } from '@/app/data-planes/data/'
 const props = defineProps<{
-  dataplaneOverview: DataplaneOverview
+  networking: DataplaneNetworking
+  routeName: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryView.vue
@@ -1,6 +1,6 @@
 <template>
   <RouteView
-    name="connection-outbound-summary-view"
+    :name="props.routeName"
     :params="{
       connection: '',
       inactive: false,
@@ -29,7 +29,7 @@
 
             }"
           >
-            {{ t(`connections.routes.item.navigation.${item.name.split('-')[3]}`) }}
+            {{ t(`connections.routes.item.navigation.${item.name.split('-')[5]}`) }}
           </XAction>
         </template>
       </XTabs>
@@ -43,7 +43,7 @@
           <component
             :is="Component"
             :data="items[0][1]"
-            :dataplane-overview="props.dataplaneOverview"
+            :dataplane-overview="props.networking"
           />
         </DataCollection>
       </RouterView>
@@ -52,9 +52,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { DataplaneOverview } from '@/app/data-planes/data/'
+import type { DataplaneNetworking } from '@/app/data-planes/data/'
 const props = defineProps<{
   data: Record<string, any>
-  dataplaneOverview: DataplaneOverview
+  networking: DataplaneNetworking
+  routeName: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryXdsConfigView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryXdsConfigView.vue
@@ -9,7 +9,7 @@
       connection: '',
       includeEds: false,
     }"
-    name="connection-outbound-summary-xds-config-view"
+    :name="props.routeName"
     v-slot="{ t, route, uri }"
   >
     <RouteTitle
@@ -57,4 +57,7 @@
 </template>
 <script lang="ts" setup>
 import { sources } from '../sources'
+const props = defineProps<{
+  routeName: string
+}>()
 </script>
diff --git a/...ta-planes/views/DataPlaneClustersView.vue → ...ections/views/ConnectionsClustersView.vue b/...ta-planes/views/DataPlaneClustersView.vue → ...ections/views/ConnectionsClustersView.vue
@@ -1,6 +1,6 @@
 <template>
   <RouteView
-    name="data-plane-clusters-view"
+    :name="props.routeName"
     :params="{
       mesh: '',
       dataPlane: '',
@@ -50,5 +50,8 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import { sources } from '@/app/connections/sources'
+import { sources } from '../sources'
+const props = defineProps<{
+  routeName: string
+}>()
 </script>
diff --git a/.../data-planes/views/DataPlaneStatsView.vue → ...onnections/views/ConnectionsStatsView.vue b/.../data-planes/views/DataPlaneStatsView.vue → ...onnections/views/ConnectionsStatsView.vue
@@ -1,6 +1,6 @@
 <template>
   <RouteView
-    name="data-plane-stats-view"
+    :name="props.routeName"
     :params="{
       mesh: '',
       dataPlane: '',
@@ -20,7 +20,7 @@
           :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
             mesh: route.params.mesh,
             name: route.params.dataPlane,
-            address: props.data.dataplane.networking.inboundAddress,
+            address: props.networking.inboundAddress,
           })"
           v-slot="{ data: statsData, refresh }"
         >
@@ -52,10 +52,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { DataplaneOverview } from '../sources'
-import { sources } from '@/app/connections/sources'
+import { sources } from '../sources'
+import type { DataplaneNetworking } from '@/app/data-planes/data'
 
 const props = defineProps<{
-  data: DataplaneOverview
+  networking: DataplaneNetworking
+  routeName: string
 }>()
 </script>