chore(zones): dedupe ZoneStats views and use ConnectionStats instead (#…

…3517) Continuation of #3515 This PR removes the final `Stats` 'networking' type view from Zone*gresses and reuses the one in `connections` instead. This one required some minor changes related to dataplanes, just so dataplanes and ZoneProxies could all share the same `source` URIs. There should be no logic changes here in `sources` but I just included some minor conditionals in the final shared `source`/URI to cope with the slight differences between dataplanes and zoneproxies. I didn't pay too much attention to why they are different right now, but there is a chance I might be able to reduce whatever the differences are for at a later date. Once this PR goes in, all _top level_ Stats/Clusters/XDSConfig views all use the same View.vue files. I'm going to try to reduce the duplication of the similar summary drawers views in `connections/views/*View.vue` / `connections/views/zones/*View.vue` next. I'm hoping when I stare at it some more now it will seem less complex. Signed-off-by: John Cowen <[email protected]>
kumahq · Feb 6, 2025 · 7375653 · 7375653
1 parent 202b876
commit 7375653
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 190 deletions.
diff --git a/packages/kuma-gui/src/app/connections/sources.ts b/packages/kuma-gui/src/app/connections/sources.ts
@@ -43,11 +43,16 @@ const filter = (data: Record<string, unknown>, cb: (key: string, arr: unknown[])
 }
 export const sources = (source: Source, api: KumaApi) => {
   return defineSources({
-    '/connections/stats/for/:proxyType/:name/:socketAddress': async (params) => {
-      const { name, socketAddress, proxyType } = params
+    '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress': async (params) => {
+      const { name, mesh, socketAddress, proxyType } = params
 
       const res = await (() => {
         switch (proxyType) {
+          case 'dataplane':
+            return api.getDataplaneStats({
+              mesh,
+              dppName: name,
+            })
           case 'zone-ingress':
             return api.getZoneIngressStats({
               name,
@@ -61,9 +66,39 @@ export const sources = (source: Source, api: KumaApi) => {
         }
       })()
       const connections = ConnectionCollection.fromObject(Stat.fromCollection(res))
+
+      let inbounds, outbounds, passthrough
+      if (proxyType === 'dataplane') {
+        // pick out the listeners/inbounds that start with our ip address (the.ip.address.1_port000)
+        inbounds = params.socketAddress === 'localhost'
+          ? Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => key.startsWith('localhost_')))
+          : Object.fromEntries(Object.entries(connections.listener).filter(([key, value]) => key.startsWith(`${params.socketAddress}_`) && !value.$clusterName.startsWith('_')))
+
+        outbounds = Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => ![
+          // if we don't exclude localhost_ we end up with  a `localhost_`
+          // outbound, which is the cluster of the inbound. Whilst we don't want
+          // to show this now, we might want to later as it can show how envoy
+          // might be interacting with the traffic vs the cluster/service itself
+          'localhost_',
+          'inbound_passthrough_',
+          'outbound_passthrough_',
+        ].some(item => key.startsWith(item))))
+
+        // pick out outbounds passthrough
+        passthrough = Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => [
+          'outbound_passthrough_',
+        ].some(item => key.startsWith(item))))
+
+      } else {
+        inbounds = Object.fromEntries(Object.entries(connections.listener).filter(([key, _value]) => key.startsWith(socketAddress.replace(':', '_'))))
+        outbounds = connections.cluster
+        passthrough = {}
+      }
+
       return {
-        inbounds: Object.fromEntries(Object.entries(connections.listener).filter(([key, _value]) => key.startsWith(socketAddress.replace(':', '_')))),
-        outbounds: connections.cluster,
+        passthrough,
+        inbounds,
+        outbounds,
         $raw: res,
         raw: res,
       }
@@ -197,44 +232,6 @@ export const sources = (source: Source, api: KumaApi) => {
       })
     },
 
-    '/meshes/:mesh/dataplanes/:name/stats/:address': async (params) => {
-      const { mesh, name } = params
-      const res = await api.getDataplaneData({
-        mesh,
-        dppName: name,
-        dataPath: 'stats',
-      })
-
-      const connections = ConnectionCollection.fromObject(Stat.fromCollection(res))
-
-      // pick out the listeners/inbounds that start with our ip address (the.ip.address.1_port000)
-      const inbounds = params.address === 'localhost'
-        ? Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => key.startsWith('localhost_')))
-        : Object.fromEntries(Object.entries(connections.listener).filter(([key, value]) => key.startsWith(`${params.address}_`) && !value.$clusterName.startsWith('_')))
-
-      const outbounds = Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => ![
-        // if we don't exclude localhost_ we end up with  a `localhost_`
-        // outbound, which is the cluster of the inbound. Whilst we don't want
-        // to show this now, we might want to later as it can show how envoy
-        // might be interacting with the traffic vs the cluster/service itself
-        'localhost_',
-        'inbound_passthrough_',
-        'outbound_passthrough_',
-      ].some(item => key.startsWith(item))))
-
-      // pick out outbounds passthrough
-      const passthrough = Object.fromEntries(Object.entries(connections.cluster).filter(([key, _value]) => [
-        'outbound_passthrough_',
-      ].some(item => key.startsWith(item))))
-
-      return {
-        passthrough,
-        inbounds,
-        outbounds,
-        $raw: res,
-        raw: res,
-      }
-    },
     '/meshes/:mesh/dataplanes/:dataplane/inbound/:inbound/xds': async (params) => {
       const { mesh, dataplane, inbound } = params
 

diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -6,6 +6,7 @@
       codeRegExp: false,
       mesh: '',
       proxy: '',
+      proxyType: '',
       connection: '',
     }"
     :name="props.routeName"
@@ -17,10 +18,11 @@
     />
     <AppView>
       <DataLoader
-        :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
-          mesh: route.params.mesh,
+        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
+          proxyType: ({ ingresses: 'zone-ingress', egresses: 'zone-egress'})[route.params.proxyType] ?? 'dataplane',
           name: route.params.proxy,
-          address: props.networking.inboundAddress,
+          mesh: route.params.mesh || '*',
+          socketAddress: props.networking.inboundAddress,
         })"
         v-slot="{ data: stats, refresh }"
       >

diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -6,6 +6,7 @@
       codeRegExp: false,
       mesh: '',
       proxy: '',
+      proxyType: '',
       connection: '',
     }"
     :name="props.routeName"
@@ -17,10 +18,11 @@
     />
     <AppView>
       <DataLoader
-        :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
-          mesh: route.params.mesh,
+        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
+          proxyType: ({ ingresses: 'zone-ingress', egresses: 'zone-egress'})[route.params.proxyType] ?? 'dataplane',
           name: route.params.proxy,
-          address: props.networking.inboundAddress,
+          mesh: route.params.mesh || '*',
+          socketAddress: props.networking.inboundAddress,
         })"
 
         v-slot="{ data, refresh }"

diff --git a/packages/kuma-gui/src/app/connections/views/ConnectionsStatsView.vue b/packages/kuma-gui/src/app/connections/views/ConnectionsStatsView.vue
@@ -4,6 +4,7 @@
     :params="{
       mesh: '',
       proxy: '',
+      proxyType: '',
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
@@ -17,10 +18,11 @@
     <AppView>
       <XCard>
         <DataLoader
-          :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
-            mesh: route.params.mesh,
+          :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
+            proxyType: ({ ingresses: 'zone-ingress', egresses: 'zone-egress'})[route.params.proxyType] ?? 'dataplane',
             name: route.params.proxy,
-            address: props.networking.inboundAddress,
+            mesh: route.params.mesh || '*',
+            socketAddress: props.networking.inboundAddress,
           })"
           v-slot="{ data: statsData, refresh }"
         >

diff --git a/packages/kuma-gui/src/app/connections/views/zones/ConnectionInboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/zones/ConnectionInboundSummaryStatsView.vue
@@ -17,8 +17,9 @@
     />
     <AppView>
       <DataLoader
-        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:socketAddress', {
+        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
           name: route.params.proxy,
+          mesh: '*',
           socketAddress: props.networking.inboundAddress,
           proxyType: route.params.proxyType === 'ingresses' ? 'zone-ingress' : 'zone-egress',
         })"

diff --git a/packages/kuma-gui/src/app/connections/views/zones/ConnectionOutboundSummaryStatsView.vue b/packages/kuma-gui/src/app/connections/views/zones/ConnectionOutboundSummaryStatsView.vue
@@ -17,8 +17,9 @@
     />
     <AppView>
       <DataLoader
-        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:socketAddress', {
+        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
           name: route.params.proxy,
+          mesh: '*',
           socketAddress: props.networking.inboundAddress,
           proxyType: route.params.proxyType === 'ingresses' ? 'zone-ingress' : 'zone-egress',
         })"

diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -3,17 +3,19 @@
     :params="{
       mesh: '',
       proxy: '',
+      proxyType: '',
       subscription: '',
       inactive: false,
     }"
     name="data-plane-detail-view"
     v-slot="{ route, t, can, me, uri }"
   >
     <DataSource
-      :src="uri(sources, '/meshes/:mesh/dataplanes/:name/stats/:address', {
-        mesh: route.params.mesh,
+      :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
+        proxyType: ({ ingresses: 'zone-ingress', egresses: 'zone-egress'})[route.params.proxyType] ?? 'dataplane',
         name: route.params.proxy,
-        address: props.data.dataplane.networking.inboundAddress,
+        mesh: route.params.mesh || '*',
+        socketAddress: props.data.dataplane.networking.inboundAddress,
       })"
       v-slot="{ data: traffic, error, refresh }"
     >

diff --git a/packages/kuma-gui/src/app/zone-egresses/routes.ts b/packages/kuma-gui/src/app/zone-egresses/routes.ts
@@ -1,4 +1,4 @@
-import { zones as connections } from '@/app/connections/routes'
+import { zones as connections, networking } from '@/app/connections/routes'
 import { routes as subscriptions } from '@/app/subscriptions/routes'
 import type { RouteRecordRaw } from 'vue-router'
 
@@ -20,21 +20,7 @@ export const routes = (prefix = 'egresses') => {
               ...subscriptions('zone-egress'),
             ],
           },
-          {
-            path: 'xds-config',
-            name: 'zone-egress-xds-config-view',
-            component: () => import('@/app/connections/views/ConnectionsXdsConfigView.vue'),
-          },
-          {
-            path: 'stats',
-            name: 'zone-egress-stats-view',
-            component: () => import('@/app/zone-egresses/views/ZoneEgressStatsView.vue'),
-          },
-          {
-            path: 'clusters',
-            name: 'zone-egress-clusters-view',
-            component: () => import('@/app/connections/views/ConnectionsClustersView.vue'),
-          },
+          ...networking('zone-egress'),
           {
             path: 'config',
             name: 'zone-egress-config-view',

diff --git a/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressDetailTabsView.vue b/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressDetailTabsView.vue
@@ -81,6 +81,7 @@
           <RouterView v-slot="child">
             <component
               :is="child.Component"
+              :networking="data?.zoneEgress.networking"
               :data="data"
             />
           </RouterView>

diff --git a/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressDetailView.vue b/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressDetailView.vue
@@ -61,8 +61,9 @@
         </XAboutCard>
 
         <DataLoader
-          :src="uri(sources, '/connections/stats/for/:proxyType/:name/:socketAddress', {
+          :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
             name: route.params.proxy,
+            mesh: '*',
             socketAddress: props.data.zoneEgress.socketAddress,
             proxyType: 'zone-egress',
           })"

diff --git a/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressStatsView.vue b/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressStatsView.vue
diff --git a/packages/kuma-gui/src/app/zone-ingresses/routes.ts b/packages/kuma-gui/src/app/zone-ingresses/routes.ts
@@ -1,4 +1,4 @@
-import { zones as connections } from '@/app/connections/routes'
+import { zones as connections, networking } from '@/app/connections/routes'
 import { routes as subscriptions } from '@/app/subscriptions/routes'
 import type { RouteRecordRaw } from 'vue-router'
 
@@ -25,21 +25,7 @@ export const routes = (prefix = 'ingresses') => {
             name: 'zone-ingress-services-view',
             component: () => import('@/app/zone-ingresses/views/ZoneIngressServicesView.vue'),
           },
-          {
-            path: 'xds-config',
-            name: 'zone-ingress-xds-config-view',
-            component: () => import('@/app/connections/views/ConnectionsXdsConfigView.vue'),
-          },
-          {
-            path: 'stats',
-            name: 'zone-ingress-stats-view',
-            component: () => import('@/app/zone-ingresses/views/ZoneIngressStatsView.vue'),
-          },
-          {
-            path: 'clusters',
-            name: 'zone-ingress-clusters-view',
-            component: () => import('@/app/connections/views/ConnectionsClustersView.vue'),
-          },
+          ...networking('zone-ingress'),
           {
             path: 'config',
             name: 'zone-ingress-config-view',

diff --git a/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressDetailTabsView.vue b/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressDetailTabsView.vue
@@ -80,6 +80,7 @@
           <RouterView v-slot="child">
             <component
               :is="child.Component"
+              :networking="data?.zoneIngress.networking"
               :data="data"
             />
           </RouterView>

diff --git a/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressDetailView.vue b/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressDetailView.vue
@@ -86,8 +86,9 @@
         </DefinitionCard>
       </XAboutCard>
       <DataLoader
-        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:socketAddress', {
+        :src="uri(sources, '/connections/stats/for/:proxyType/:name/:mesh/:socketAddress', {
           name: route.params.proxy,
+          mesh: '*',
           socketAddress: props.data.zoneIngress.socketAddress,
           proxyType: 'zone-ingress',
         })"