feature(dataplanes): add filtered XDS config to inbound drawers

Signed-off-by: John Cowen <[email protected]>

packages/kuma-gui/src/app/connections/locales/en-us/index.yaml

@@ -3,5 +3,6 @@ connections:
     item:
       navigation:
         overview: 'Overview'
+        xds: 'XDS Configuration'
         stats: 'Stats'
         clusters: 'Clusters'

packages/kuma-gui/src/app/connections/routes.ts

@@ -11,6 +11,11 @@ export const routes = (): RouteRecordRaw[] => {
           name: 'connection-inbound-summary-overview-view',
           component: () => import('@/app/connections/views/ConnectionInboundSummaryOverviewView.vue'),
         },
+        {
+          path: 'xds-config',
+          name: 'connection-inbound-summary-xds-config-view',
+          component: () => import('@/app/connections/views/ConnectionInboundSummaryXdsConfigView.vue'),
+        },
         {
           path: 'stats',
           name: 'connection-inbound-summary-stats-view',

packages/kuma-gui/src/app/connections/views/ConnectionInboundSummaryXdsConfigView.vue

@@ -0,0 +1,61 @@
+<template>
+  <RouteView
+    :params="{
+      codeSearch: '',
+      codeFilter: false,
+      codeRegExp: false,
+      mesh: '',
+      dataPlane: '',
+      connection: '',
+      includeEds: false,
+    }"
+    name="connection-inbound-summary-xds-config-view"
+    v-slot="{ route, uri }"
+  >
+    <RouteTitle
+      :render="false"
+      :title="`XDS Configuration`"
+    />
+    <AppView>
+      <DataLoader
+        :src="uri(sources, '/meshes/:mesh/dataplanes/:dataplane/inbound/:inbound/xds', {
+          mesh: route.params.mesh,
+          dataplane: route.params.dataPlane,
+          inbound: `${props.data.addressPort}`,
+        })"
+        v-slot="{ data: raw, refresh }"
+      >
+        <XCodeBlock
+          language="json"
+          :code="JSON.stringify(raw, null, 2)"
+          is-searchable
+          :query="route.params.codeSearch"
+          :is-filter-mode="route.params.codeFilter"
+          :is-reg-exp-mode="route.params.codeRegExp"
+          @query-change="route.update({ codeSearch: $event })"
+          @filter-mode-change="route.update({ codeFilter: $event })"
+          @reg-exp-mode-change="route.update({ codeRegExp: $event })"
+        >
+          <template #primary-actions>
+            <XAction
+              action="refresh"
+              appearance="primary"
+              @click="refresh"
+            >
+              Refresh
+            </XAction>
+          </template>
+        </XCodeBlock>
+      </DataLoader>
+    </AppView>
+  </RouteView>
+</template>
+<script lang="ts" setup>
+import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'
+import { sources } from '@/app/data-planes/sources'
+
+const props = defineProps<{
+  data: DataplaneInbound
+  dataplaneOverview: DataplaneOverview
+}>()
+</script>

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

@@ -79,7 +79,8 @@ export const DataplaneNetworking = {
           listenerAddress: '',
         }]
         : inbounds.map((item) => {
-          const address = item.address ?? networking.address
+          // inbound address, advertisedAddress, networkingAddress because externally accessible address
+          const address = item.address ?? networking.advertisedAddress ?? networking.address
           const port = item.servicePort ?? item.port
           return {
             ...item,
@@ -91,8 +92,7 @@ export const DataplaneNetworking = {
             service: item.tags['kuma.io/service'],
             protocol: item.tags['kuma.io/protocol'] ?? 'tcp',
             address,
-            // inbound address, advertisedAddress, networkingAddress because externally accessible address
-            addressPort: `${item.address ?? networking.advertisedAddress ?? networking.address}:${item.port}`,
+            addressPort: `${address}:${item.port}`,
             // inbound serviceAddress, inbound address, networkingAddress because the internal services accessible address
             serviceAddressPort: `${item.serviceAddress ?? address}:${port}`,
           }

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

@@ -30,7 +30,60 @@ export type MeshGatewayDataplaneSource = DataSourceResponse<MeshGatewayDataplane
 const includes = <T extends readonly string[]>(arr: T, item: string): item is T[number] => {
   return arr.includes(item as T[number])
 }
+type XdsConfig = Record<'configs', {
+  dynamic_active_clusters?: {
+    cluster: {
+      name: string
+    }
+  }[]
+  dynamic_listeners?: {
+    name: string
+  }[]
+  dynamic_endpoint_configs?: {
+    endpoint_config: {
+      cluster_name: string
+    }
+  }[]
+}[]>
+const filter = (data: XdsConfig, inbound: string) => {
+  const { configs } = data
+  return {
+    configs: configs.reduce((prev, item) => {
+      const entries = Object.entries(item)
+      const found = entries.reduce((prev, [key, value]) => {
+        let found
+        switch (key) {
+          case 'dynamic_listeners':
+            found = value.filter(item => item.name === `inbound:${inbound}`)
+            break
+          default:
+            break
+          // case 'bootstrap':
+          //   // return value.node.cluster === 'redis_kuma-demo_svc_6379'
+          //   return false
+          // case 'dynamic_active_clusters':
+          //   found = value.filter(item => item.cluster.name === 'default_redis_kuma-demo_default_msvc_6379')
+          //   break
+          // case 'dynamic_endpoint_configs':
+          //   found = value.filter(item => item.endpoint_config.cluster_name === 'default_redis_kuma-demo_default_msvc_6379')
+          //   break
+        }
+        if (found) {
+          if (typeof prev[key] === 'undefined') {
+            prev[key] = []
+          }
+          prev[key] = prev[key].concat(found)
+        }
+        return prev
+      }, {} as typeof configs[number])
+      if (Object.keys(found).length > 0) {
+        return prev.concat(found)
+      }
+      return prev
 
+    }, [] as typeof configs),
+  }
+}
 export const sources = (source: Source, api: KumaApi, can: Can) => {
   return defineSources({
     // always resolves and keeps polling until we have at least one dataplane and all dataplanes are online
@@ -87,6 +140,21 @@ export const sources = (source: Source, api: KumaApi, can: Can) => {
         dataPath,
       })
     },
+    '/meshes/:mesh/dataplanes/:dataplane/inbound/:inbound/xds': async (params) => {
+      const { mesh, dataplane, inbound } = params
+
+      // we don't ask for endpoints because we don't need them for inbound filtering
+      const res = await api.getDataplaneData({
+        mesh,
+        dppName: dataplane,
+        dataPath: 'xds',
+      }, {
+        include_eds: false,
+      })
+      // @ts-ignore api.getDataplaneData() returns a string even though it doens' always return a string
+      // once we get OpenAPI specs for this we should be able to remove
+      return filter(res, inbound)
+    },
     '/meshes/:mesh/dataplanes/:name/xds/:endpoints': async (params) => {
       const { mesh, name, endpoints } = params
 

packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div
+    class="x-code-block"
+    data-testid="x-code-block"
+  >
     <template
       v-if="$slots['primary-actions']"
     >
@@ -17,7 +20,7 @@
       :initial-filter-mode="props.isFilterMode"
       :initial-reg-exp-mode="props.isRegExpMode"
       :processing="isProcessing"
-      :searchable="isSearchable"
+      :searchable="true"
       :show-copy-button="showCopyButton"
       :query="props.query"
       theme="dark"