feat(dpp): adds rules API data to policies tab

Adds rules from the inspect API to the policies tab.

Reworks layout for policies tab content to be grouped by policy type.

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>

.env.development

@@ -1 +1 @@
-# VITE_FAKE_MULTIZONE=true
+VITE_FAKE_MULTIZONE=true

.github/workflows/create-gui-pr.yml

@@ -23,7 +23,7 @@ jobs:
     steps:
       - name: Generate GitHub App token
         # https://github.com/tibdex/github-app-token
-        # Note: Specifically references https://github.com/tibdex/github-app-token/commit/f717b5ecd4534d3c4df4ce9b5c1c2214f0f7cd06 (v1.6.0) to ensure that this exact version of the workflow action is used. This is a security precaution as automatically opting into newer versions of the action could leak or get the app token stolen.
+        # Note: Specifically references https://github.com/tibdex/github-app-token/commit/021a2405c7f990db57f5eae5397423dcc554159c (v1.7.0) to ensure that this exact version of the workflow action is used. This is a security precaution as automatically opting into newer versions of the action could leak or get the app token stolen.
         uses: tibdex/github-app-token@021a2405c7f990db57f5eae5397423dcc554159c
         id: generate-token
         with:
@@ -87,6 +87,6 @@ jobs:
           labels: ci/skip-e2e-test
           body: |
             Bumps ${{ github.repository }} to version  [${{ github.ref_name }}@${{ github.sha }}](https://github.com/${{ github.repository }}/tree/${{ github.sha }})
-            
+
             > Changelog: chore(deps): use latest ${{github.repository}}
           draft: false

jest.config.js

@@ -25,7 +25,7 @@
     ],
     '^.+\\.js$': 'babel-jest',
     '^.+\\.svg(\\?(url|raw))?$': 'jest-transform-stub',
-    '^.+\\.(css|png|gif)?$': 'jest-transform-stub',
+    '^.+\\.(css|png|gif|jpg)?$': 'jest-transform-stub',
   },
   transformIgnorePatterns: [
     // Not transforming amcharts speeds up the the tests significantly.

src/api/kumaApi.ts

@@ -1,8 +1,9 @@
 import { RestClient } from './RestClient'
-import { ApiListResponse, ApiKindListResponse } from '@/types/api.d'
+import { ApiListResponse, ApiKindListResponse, PaginatedApiListResponse } from '@/types/api.d'
 import {
   DataPlane,
   DataPlaneOverview,
+  DataplaneRule,
   ExternalService,
   GlobalInsights,
   Info,
@@ -71,15 +72,15 @@ class KumaApi {
     return this.client.get('global-insights')
   }
 
-  getZones(params?: any): Promise<ApiListResponse<Zone>> {
+  getZones(params?: any): Promise<PaginatedApiListResponse<Zone>> {
     return this.client.get('zones', { params })
   }
 
   getZone({ name }: { name: string }, params?: any): Promise<Zone> {
     return this.client.get(`zones/${name}`, { params })
   }
 
-  getAllZoneOverviews(params?: any): Promise<ApiListResponse<ZoneOverview>> {
+  getAllZoneOverviews(params?: any): Promise<PaginatedApiListResponse<ZoneOverview>> {
     return this.client.get('zones+insights', { params })
   }
 
@@ -117,35 +118,35 @@ class KumaApi {
     return this.client.get(`zoneegressoverviews/${name}`, { params })
   }
 
-  getAllMeshes(params?: any): Promise<ApiListResponse<Mesh>> {
+  getAllMeshes(params?: any): Promise<PaginatedApiListResponse<Mesh>> {
     return this.client.get('meshes', { params })
   }
 
   getMesh({ name }: { name: string }, params?: any): Promise<Mesh> {
     return this.client.get(`meshes/${name}`, { params })
   }
 
-  getAllMeshInsights(params?: any): Promise<ApiListResponse<MeshInsight>> {
+  getAllMeshInsights(params?: any): Promise<PaginatedApiListResponse<MeshInsight>> {
     return this.client.get('mesh-insights', { params })
   }
 
   getMeshInsights({ name }: { name: string }, params?: any): Promise<MeshInsight> {
     return this.client.get(`mesh-insights/${name}`, { params })
   }
 
-  getAllDataplanes(params?: any): Promise<ApiListResponse<DataPlane>> {
+  getAllDataplanes(params?: any): Promise<PaginatedApiListResponse<DataPlane>> {
     return this.client.get('dataplanes', { params })
   }
 
   getDataplaneFromMesh({ mesh, name }: { mesh: string, name: string }, params?: any): Promise<DataPlane> {
     return this.client.get(`meshes/${mesh}/dataplanes/${name}`, { params })
   }
 
-  getAllDataplaneOverviews(params?: any): Promise<ApiListResponse<DataPlaneOverview>> {
+  getAllDataplaneOverviews(params?: any): Promise<PaginatedApiListResponse<DataPlaneOverview>> {
     return this.client.get('dataplanes+insights', { params })
   }
 
-  getAllDataplaneOverviewsFromMesh({ mesh }: { mesh: string }, params?: any): Promise<ApiListResponse<DataPlaneOverview>> {
+  getAllDataplaneOverviewsFromMesh({ mesh }: { mesh: string }, params?: any): Promise<PaginatedApiListResponse<DataPlaneOverview>> {
     return this.client.get(`meshes/${mesh}/dataplanes+insights`, { params })
   }
 
@@ -161,46 +162,50 @@ class KumaApi {
     return this.client.get(`meshes/${mesh}/dataplanes/${name}/policies`, { params })
   }
 
+  getDataplaneRules({ mesh, name }: { mesh: string; name: string }, params?: any): Promise<ApiListResponse<DataplaneRule>> {
+    return this.client.get(`meshes/${mesh}/dataplanes/${name}/rules`, { params })
+  }
+
   /**
    * Fetches additional data like xDS configuration, envoy stats, or envoy clusters.
    */
   getDataplaneData({ mesh, dppName, dataPath }: { mesh: string, dppName: string, dataPath: 'xds' | 'stats' | 'clusters' }, params?: any): Promise<string> {
     return this.client.get(`meshes/${mesh}/dataplanes/${dppName}/${dataPath}`, { params })
   }
 
-  getAllServiceInsights(params?: any): Promise<ApiListResponse<ServiceInsight>> {
+  getAllServiceInsights(params?: any): Promise<PaginatedApiListResponse<ServiceInsight>> {
     return this.client.get('service-insights', { params })
   }
 
-  getAllServiceInsightsFromMesh({ mesh }: { mesh: string }, params?: any): Promise<ApiListResponse<ServiceInsight>> {
+  getAllServiceInsightsFromMesh({ mesh }: { mesh: string }, params?: any): Promise<PaginatedApiListResponse<ServiceInsight>> {
     return this.client.get(`meshes/${mesh}/service-insights`, { params })
   }
 
   getServiceInsight({ mesh, name }: { mesh: string, name: string }, params?: any): Promise<ServiceInsight> {
     return this.client.get(`meshes/${mesh}/service-insights/${name}`, { params })
   }
 
-  getAllExternalServices(params?: any): Promise<ApiListResponse<ExternalService>> {
+  getAllExternalServices(params?: any): Promise<PaginatedApiListResponse<ExternalService>> {
     return this.client.get('external-services', { params })
   }
 
-  getAllExternalServicesFromMesh({ mesh }: { mesh: string }, params?: any): Promise<ApiListResponse<ExternalService>> {
+  getAllExternalServicesFromMesh({ mesh }: { mesh: string }, params?: any): Promise<PaginatedApiListResponse<ExternalService>> {
     return this.client.get(`meshes/${mesh}/external-services`, { params })
   }
 
   getExternalService({ mesh, name }: { mesh: string, name: string }, params?: any): Promise<ExternalService> {
     return this.client.get(`meshes/${mesh}/external-services/${name}`, { params })
   }
 
-  getPolicyConnections({ mesh, policyType, policyName }: { mesh: string; policyType: string; policyName: string }, params?: any): Promise<ApiListResponse<any>> {
+  getPolicyConnections({ mesh, policyType, policyName }: { mesh: string; policyType: string; policyName: string }, params?: any): Promise<PaginatedApiListResponse<any>> {
     return this.client.get(`meshes/${mesh}/${policyType}/${policyName}/dataplanes`, { params })
   }
 
-  getAllPolicyEntities({ path }: { path: string }, params?: any): Promise<ApiListResponse<PolicyEntity>> {
+  getAllPolicyEntities({ path }: { path: string }, params?: any): Promise<PaginatedApiListResponse<PolicyEntity>> {
     return this.client.get(path, { params })
   }
 
-  getAllPolicyEntitiesFromMesh({ mesh, path }: { mesh: string, path: string }, params?: any): Promise<ApiListResponse<PolicyEntity>> {
+  getAllPolicyEntitiesFromMesh({ mesh, path }: { mesh: string, path: string }, params?: any): Promise<PaginatedApiListResponse<PolicyEntity>> {
     return this.client.get(`meshes/${mesh}/${path}`, { params })
   }
 

src/api/mock-data/dataplane-policies.json

@@ -17,7 +17,12 @@
             "sources": [
               {
                 "match": {
-                  "kuma.io/service": "*"
+                  "kuma.io/service": "service-a"
+                }
+              },
+              {
+                "match": {
+                  "kuma.io/service": "service-b"
                 }
               }
             ],

src/api/mock-data/dataplane-rules.json

@@ -0,0 +1,108 @@
+{
+  "total": 3,
+  "items": [
+    {
+      "type": "clientSubset",
+      "name": "192.168.0.1:80",
+      "service": "backend",
+      "policyType": "MeshTrafficPermission",
+      "subset": {
+        "kuma.io/service": "client",
+        "kuma.io/zone": "east"
+      },
+      "conf": {
+        "action": "DENY"
+      },
+      "origins": [
+        {
+          "mesh": "default",
+          "name": "mtp-1"
+        }
+      ]
+    },
+    {
+      "type": "clientSubset",
+      "name": "192.168.0.1:80",
+      "service": "backend",
+      "policyType": "MeshTrafficPermission",
+      "subset": {},
+      "conf": {
+        "action": "DENY"
+      },
+      "origins": [
+        {
+          "mesh": "default",
+          "name": "default"
+        }
+      ]
+    },
+    {
+      "type": "clientSubset",
+      "name": "192.168.0.1:80",
+      "service": "backend",
+      "policyType": "MeshTrafficPermission",
+      "subset": {
+        "kuma.io/service": "client",
+        "kuma.io/zone": "west"
+      },
+      "conf": {
+        "action": "ALLOW"
+      },
+      "origins": [
+        {
+          "mesh": "default",
+          "name": "mtp-1"
+        },
+        {
+          "mesh": "default",
+          "name": "mtp-2"
+        }
+      ]
+    },
+    {
+      "type": "destinationSubset",
+      "name": "192.168.0.2:8080",
+      "service": "redis",
+      "policyType": "MeshAccessLog",
+      "subset": {},
+      "conf": {
+        "backends": [
+          {
+            "file": {
+              "path": "/tmp/access.logs"
+            }
+          }
+        ]
+      },
+      "origins": [
+        {
+          "mesh": "default",
+          "name": "mal-1"
+        }
+      ]
+    },
+    {
+      "type": "singleItem",
+      "name": "dataplane",
+      "service": "",
+      "policyType": "MeshTrace",
+      "subset": {},
+      "conf": {
+        "backends": [
+          {
+            "zipkin": {
+              "url": "http://zipkin.internal/api/v2/spans"
+            }
+          }
+        ],
+        "tags": null
+      },
+      "origins": [
+        {
+          "mesh": "default",
+          "name": "mal-1"
+        }
+      ]
+    }
+  ]
+}

src/api/mocks.ts

@@ -152,6 +152,7 @@ const mockFileImports: Array<[string, () => Promise<any>]> = [
   // Define routes with dynamic segments last so they don’t match before more specific routes.
   ['meshes/:mesh/:policyType/:policyName/dataplanes', () => import('./mock-data/policy-connections.json')],
   ['meshes/:mesh/dataplanes/:dataplaneName/policies', () => import('./mock-data/dataplane-policies.json')],
+  ['meshes/:mesh/dataplanes/:dataplaneName/rules', () => import('./mock-data/dataplane-rules.json')],
   ['meshes/:mesh/dataplanes/:dataplaneName/xds', () => import('./mock-data/dataplane-xds.json')],
 ]
 

src/app/common/CodeBlock.vue

@@ -7,14 +7,15 @@
     :language="language"
     :is-processing="isProcessing"
     :is-searchable="isSearchable"
+    :show-copy-button="showCopyButton"
     :query="query"
     @code-block-render="handleCodeBlockRenderEvent"
     @query-change="updateStoredQuery"
   />
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, PropType, nextTick } from 'vue'
+import { computed, ref, PropType } from 'vue'
 import { KCodeBlock } from '@kong/kongponents'
 import { CodeBlockEventData } from '@kong/kongponents/dist/types/components/KCodeBlock/KCodeBlock.vue.d'
 
@@ -23,39 +24,33 @@ import { ClientStorage } from '@/utilities/ClientStorage'
 import { reformatYaml } from '@/utilities/reformatYaml'
 
 const props = defineProps({
-  /**
-   * ID value used for form elements like the search input and its label.
-   */
   id: {
     type: String,
     required: true,
   },
 
-  /**
-   * The code that will be rendered as a text node inside of a `<pre><code></code></pre>` fragment.
-   */
   code: {
     type: String,
     required: true,
   },
 
-  /**
-   * The syntax language of `props.code` (e.g. `'json'`).
-   */
   language: {
     type: String as PropType<AvailableLanguages>,
     required: true,
   },
 
-  /**
-   * Shows an actions bar with a search input and related action buttons.
-   */
   isSearchable: {
     type: Boolean,
     required: false,
     default: false,
   },
 
+  showCopyButton: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+
   queryKey: {
     type: String,
     required: false,
@@ -78,7 +73,6 @@ const reformattedCode = computed(() => props.language === 'yaml' ? reformatYaml(
 async function handleCodeBlockRenderEvent({ preElement, codeElement, language, code }: CodeBlockEventData): Promise<void> {
   isProcessing.value = true
 
-  await nextTick()
   highlightElement(preElement, codeElement, code, language as AvailableLanguages)
 
   isProcessing.value = false

src/app/common/DataOverview.vue

@@ -134,6 +134,19 @@
             </template>
           </template>
 
+          <template #zone="{ row, rowValue }">
+            <router-link
+              v-if="row.zoneRoute"
+              :to="row.zoneRoute"
+            >
+              {{ rowValue }}
+            </router-link>
+
+            <template v-else>
+              {{ rowValue }}
+            </template>
+          </template>
+
           <!--- total Updates --->
           <template #totalUpdates="{ row }">
             <span>