fix(dataplanes): Correct Dataplane Inbound cluster tab filter

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

packages/kuma-gui/cypress/support/step_definitions/index.ts

@@ -248,10 +248,12 @@ Then(/^the "(.*)" element(s)? contain[s]?$/, (selector: string, multiple = '', t
     })
   }
 })
-Then(/^the "(.*)" element contains "(.*)"$/, (selector: string, value: string) => {
+Then(/^the "(.*)" element( doesn't | )contain[s]? "(.*)"$/, (selector: string, assertion: string, value: string) => {
   $(selector).then(($el) => {
+    const negative = assertion !== ' '
+    const prefix = negative ? 'not.' : ''
     const chainer = $el[0].tagName === 'INPUT' ? 'have.value' : 'contain'
-    $(selector).should(chainer, value)
+    $(selector).should(`${prefix}${chainer}`, value)
   })
 })
 

packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature

@@ -0,0 +1,54 @@
+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'] |
+    And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/_overview" responds with
+      """
+      body:
+        dataplane:
+          networking:
+            inbound:
+            - port: 9090
+      """
+    And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/clusters" responds with
+      """
+      body: |
+        localhost:9090::observability_name::localhost_9090
+        localhost:9090::default_priority::max_connections::1024
+        not_localhost:9090::priority::connections::1024
+        localhost:1111::default_priority::max_connections::1025
+        inbound:passthrough:ipv4::added_via_api::true
+      """
+    When I visit the "/meshes/mesh-name/data-planes/service-64cbb7b8b5-6g94n.namespace/overview/inbound/localhost_9090/clusters" URL
+    And the "$code" element contains "observability_name::localhost_9090"
+    And the "$code" element contains "default_priority::max_connections::1024"
+    And the "$code" element doesn't contain "priority::connections::1024"
+    And the "$code" element doesn't contain "default_priority::max_connections::1025"
+    And the "$code" element doesn't contain "added_via_api::true"
+
+  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'] |
+    And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/stats" responds with
+      """
+      body: |
+        cluster.mesh-name_service_namespace_default_msvc_9090.assignment_stale: 0
+      """
+
+    And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/clusters" responds with
+      """
+      body: |
+        mesh-name_service_namespace_default_msvc_9090::observability_name::mesh-name_service_namespace_default_msvc_9090
+        mesh-name_service_namespace_default_msvc_9090::default_priority::max_connections::1024
+        not_mesh-name_service_namespace_default_msvc_9090::priority::connections::1024
+        localhost:1111::default_priority::max_connections::1025
+        inbound:passthrough:ipv4::added_via_api::true
+      """
+    When I visit the "/meshes/mesh-name/data-planes/service-64cbb7b8b5-6g94n.namespace/overview/outbound/mesh-name_service_namespace_default_msvc_9090/clusters" URL
+    And the "$code" element contains "observability_name::mesh-name_service_namespace_default_msvc_9090"
+    And the "$code" element contains "default_priority::max_connections::1024"
+    And the "$code" element doesn't contain "priority::connections::1024"
+    And the "$code" element doesn't contain "default_priority::max_connections::1025"
+    And the "$code" element doesn't contain "added_via_api::true"

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

@@ -9,53 +9,56 @@
       connection: '',
     }"
     name="connection-inbound-summary-clusters-view"
-    v-slot="{ route }"
+    v-slot="{ route, uri }"
   >
     <RouteTitle
       :render="false"
       :title="`Clusters`"
     />
     <AppView>
       <DataLoader
-        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
-        v-slot="{ data: clusters, refresh }: ClustersDataSource"
+        :src="uri(sources, '/meshes/:mesh/dataplanes/:name/clusters', {
+          mesh: route.params.mesh,
+          name: route.params.dataPlane,
+        })"
+        v-slot="{ data , refresh }"
       >
-        <DataCollection
-          :items="clusters!.split('\n')"
-          :predicate="item => item.startsWith(`${props.data.service}::`)"
-          v-slot="{ items: lines }"
+        <template
+          v-for="prefix in [route.params.connection.replace('_', ':')]"
+          :key="typeof prefix"
         >
-          <XCodeBlock
-            language="json"
-            :code="lines.map(item => item.replace(`${props.data.service}::`, '')).join('\n')"
-            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 })"
+          <DataCollection
+            :items="data.split('\n')"
+            :predicate="item => item.startsWith(`${prefix}::`)"
+            v-slot="{ items: lines }"
           >
-            <template #primary-actions>
-              <XAction
-                action="refresh"
-                appearance="primary"
-                @click="refresh"
-              >
-                Refresh
-              </XAction>
-            </template>
-          </XCodeBlock>
-        </DataCollection>
+            <XCodeBlock
+              language="json"
+              :code="lines.map(item => item.replace(`${prefix}::`, '')).join('\n')"
+              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>
+          </DataCollection>
+        </template>
       </DataLoader>
     </AppView>
   </RouteView>
 </template>
 <script lang="ts" setup>
-import type { DataplaneInbound } from '@/app/data-planes/data'
-import type { ClustersDataSource } from '@/app/data-planes/sources'
-
-const props = defineProps<{
-  data: DataplaneInbound
-}>()
+import { sources } from '@/app/data-planes/sources'
 </script>

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

@@ -9,48 +9,56 @@
       connection: '',
     }"
     name="connection-outbound-summary-clusters-view"
-    v-slot="{ route }"
+    v-slot="{ route, uri }"
   >
     <RouteTitle
       :render="false"
       :title="`Clusters`"
     />
     <AppView>
       <DataLoader
-        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
-        v-slot="{ data, refresh }: ClustersDataSource"
+        :src="uri(sources, '/meshes/:mesh/dataplanes/:name/clusters', {
+          mesh: route.params.mesh,
+          name: route.params.dataPlane,
+        })"
+        v-slot="{ data, refresh }"
       >
-        <DataCollection
-          :items="data!.split('\n')"
-          :predicate="item => item.startsWith(`${route.params.connection}::`)"
-          v-slot="{ items: lines }"
+        <template
+          v-for="prefix in [route.params.connection]"
+          :key="typeof prefix"
         >
-          <XCodeBlock
-            language="json"
-            :code="lines.map(item => item.replace(`${route.params.connection}::`, '')).join('\n')"
-            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 })"
+          <DataCollection
+            :items="data.split('\n')"
+            :predicate="item => item.startsWith(`${prefix}::`)"
+            v-slot="{ items: lines }"
           >
-            <template #primary-actions>
-              <XAction
-                action="refresh"
-                appearance="primary"
-                @click="refresh"
-              >
-                Refresh
-              </XAction>
-            </template>
-          </XCodeBlock>
-        </DataCollection>
+            <XCodeBlock
+              language="json"
+              :code="lines.map(item => item.replace(`${prefix}::`, '')).join('\n')"
+              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>
+          </DataCollection>
+        </template>
       </DataLoader>
     </AppView>
   </RouteView>
 </template>
 <script lang="ts" setup>
-import type { ClustersDataSource } from '@/app/data-planes/sources'
+import { sources } from '@/app/data-planes/sources'
 </script>

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

@@ -76,7 +76,7 @@ export const sources = (source: Source, api: KumaApi, can: Can) => {
     '/meshes/:mesh/dataplanes/:name/as/kubernetes': async (params) => {
       return api.getDataplaneFromMesh(params, { format: 'kubernetes' })
     },
-
+    // @deprecated please use either /xds, /clusters or /stats endpoints (ie. without /data-path)
     '/meshes/:mesh/dataplanes/:name/data-path/:dataPath': async (params) => {
       const { mesh, name } = params
       const dataPath = includes(['xds', 'clusters', 'stats'] as const, params.dataPath) ? params.dataPath : 'xds'
@@ -87,6 +87,14 @@ export const sources = (source: Source, api: KumaApi, can: Can) => {
         dataPath,
       })
     },
+    '/meshes/:mesh/dataplanes/:name/clusters': async (params) => {
+      const { mesh, name } = params
+      return api.getDataplaneData({
+        mesh,
+        dppName: name,
+        dataPath: 'clusters',
+      })
+    },
     '/meshes/:mesh/dataplanes/:name/xds/:endpoints': async (params) => {
       const { mesh, name, endpoints } = params