From 7096832961e9f31cf75f235bdc2cdb6baa8ff4b7 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:16:46 +0100
Subject: [PATCH] feature(policies): add more information to the policy detail
 page (#2935)

Adds further info to the policy detail page. Please note this purposefully doesn't add the producer/consumer/system type yet.

I'll be adding that along with the same in the listing page.

Closes https://github.com/kumahq/kuma-gui/issues/2929

Also defaults any empty top-level targetRef to `Mesh`

Closes https://github.com/kumahq/kuma-gui/issues/2934

---

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 src/app/policies/components/PolicySummary.vue | 26 +++++----
 src/app/policies/views/PolicyDetailView.vue   | 54 +++++++++++++++++--
 src/app/policies/views/PolicyListView.vue     | 21 ++++----
 src/test-support/mocks/fs.ts                  |  2 +
 src/test-support/mocks/src/mesh-insights/_.ts | 22 ++++++--
 .../mocks/src/meshes/_/meshfaultinjections.ts |  4 --
 .../src/meshes/_/meshfaultinjections/_.ts     |  4 --
 .../_/_resources/dataplanes.ts                | 28 ++++++++++
 8 files changed, 127 insertions(+), 34 deletions(-)
 create mode 100644 src/test-support/mocks/src/meshes/_/meshfaultinjections/_/_resources/dataplanes.ts

diff --git a/src/app/policies/components/PolicySummary.vue b/src/app/policies/components/PolicySummary.vue
index d378b58b5..2afdac808 100644
--- a/src/app/policies/components/PolicySummary.vue
+++ b/src/app/policies/components/PolicySummary.vue
@@ -16,15 +16,18 @@
           </template>
 
           <template #body>
-            <template v-if="props.policy.spec.targetRef">
-              <KBadge appearance="neutral">
-                {{ props.policy.spec.targetRef.kind }}<span v-if="props.policy.spec.targetRef.name">:<b>{{ props.policy.spec.targetRef.name }}</b></span>
-              </KBadge>
-            </template>
-
-            <template v-else>
-              {{ t('common.detail.none') }}
-            </template>
+            <KBadge
+              v-if="props.policy.spec.targetRef"
+              appearance="neutral"
+            >
+              {{ props.policy.spec.targetRef.kind }}<span v-if="props.policy.spec.targetRef.name">:<b>{{ props.policy.spec.targetRef.name }}</b></span>
+            </KBadge>
+            <KBadge
+              v-else
+              appearance="neutral"
+            >
+              Mesh
+            </KBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard
@@ -40,7 +43,7 @@
           </template>
         </DefinitionCard>
         <DefinitionCard
-          v-if="props.policy.zone"
+          v-if="can('use zones') && props.policy.zone"
           layout="horizontal"
         >
           <template
@@ -80,10 +83,11 @@
 
 <script lang="ts" setup>
 import type { Policy } from '../data'
-import { useI18n } from '@/app/application'
+import { useI18n, useCan } from '@/app/application'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 
 const { t } = useI18n()
+const can = useCan()
 
 const props = defineProps<{
   policy: Policy
diff --git a/src/app/policies/views/PolicyDetailView.vue b/src/app/policies/views/PolicyDetailView.vue
index 52d5a5890..a4559b035 100644
--- a/src/app/policies/views/PolicyDetailView.vue
+++ b/src/app/policies/views/PolicyDetailView.vue
@@ -13,11 +13,37 @@
     v-slot="{ route, t, uri, can, me }"
   >
     <AppView>
-      <KCard
-        v-if="can('use zones') && props.data.zone"
-      >
+      <KCard>
         <div class="columns">
           <DefinitionCard>
+            <template
+              #title
+            >
+              Type
+            </template>
+            <template
+              #body
+            >
+              {{ props.data.type }}
+            </template>
+          </DefinitionCard>
+          <DefinitionCard
+            v-if="props.data.namespace.length > 0"
+          >
+            <template
+              #title
+            >
+              Namespace
+            </template>
+            <template
+              #body
+            >
+              {{ props.data.namespace }}
+            </template>
+          </DefinitionCard>
+          <DefinitionCard
+            v-if="can('use zones') && props.data.zone"
+          >
             <template
               #title
             >
@@ -38,6 +64,28 @@
               </XAction>
             </template>
           </DefinitionCard>
+          <DefinitionCard
+            v-if="props.data.spec"
+          >
+            <template #title>
+              {{ t('http.api.property.targetRef') }}
+            </template>
+
+            <template #body>
+              <KBadge
+                v-if="props.data.spec.targetRef"
+                appearance="neutral"
+              >
+                {{ props.data.spec.targetRef.kind }}<span v-if="props.data.spec.targetRef.name">:<b>{{ props.data.spec.targetRef.name }}</b></span>
+              </KBadge>
+              <KBadge
+                v-else
+                appearance="neutral"
+              >
+                Mesh
+              </KBadge>
+            </template>
+          </DefinitionCard>
         </div>
       </KCard>
       <div>
diff --git a/src/app/policies/views/PolicyListView.vue b/src/app/policies/views/PolicyListView.vue
index 51b841bfe..1c55ea570 100644
--- a/src/app/policies/views/PolicyListView.vue
+++ b/src/app/policies/views/PolicyListView.vue
@@ -168,15 +168,18 @@
                         </template>
 
                         <template #targetRef="{ row }">
-                          <template v-if="type.isTargetRefBased && typeof row.spec?.targetRef !== 'undefined'">
-                            <KBadge appearance="neutral">
-                              {{ row.spec.targetRef.kind }}<span v-if="row.spec.targetRef.name">:<b>{{ row.spec.targetRef.name }}</b></span>
-                            </KBadge>
-                          </template>
-
-                          <template v-else>
-                            {{ t('common.detail.none') }}
-                          </template>
+                          <KBadge
+                            v-if="typeof row.spec?.targetRef !== 'undefined'"
+                            appearance="neutral"
+                          >
+                            {{ row.spec.targetRef.kind }}<span v-if="row.spec.targetRef.name">:<b>{{ row.spec.targetRef.name }}</b></span>
+                          </KBadge>
+                          <KBadge
+                            v-else
+                            appearance="neutral"
+                          >
+                            Mesh
+                          </KBadge>
                         </template>
 
                         <template #zone="{ row }">
diff --git a/src/test-support/mocks/fs.ts b/src/test-support/mocks/fs.ts
index bb2b1f06d..7c9217f96 100644
--- a/src/test-support/mocks/fs.ts
+++ b/src/test-support/mocks/fs.ts
@@ -45,6 +45,7 @@ import _138 from './src/meshes/_/meshexternalservices'
 import _139 from './src/meshes/_/meshexternalservices/_'
 import _52 from './src/meshes/_/meshfaultinjections'
 import _53 from './src/meshes/_/meshfaultinjections/_'
+import _54 from './src/meshes/_/meshfaultinjections/_/_resources/dataplanes'
 import _31 from './src/meshes/_/meshgatewayroutes'
 import _32 from './src/meshes/_/meshgatewayroutes/_'
 import _33 from './src/meshes/_/meshgateways'
@@ -148,6 +149,7 @@ export const fs: FS = {
   '/meshes/:mesh/health-checks/:name': _30,
   '/meshes/:mesh/meshfaultinjections': _52,
   '/meshes/:mesh/meshfaultinjections/:name': _53,
+  '/meshes/:mesh/meshfaultinjections/:name/_resources/dataplanes': _54,
   '/meshes/:mesh/meshgatewayroutes': _31,
   '/meshes/:mesh/meshgatewayroutes/:name': _32,
   '/meshes/:mesh/meshgateways': _33,
diff --git a/src/test-support/mocks/src/mesh-insights/_.ts b/src/test-support/mocks/src/mesh-insights/_.ts
index 37e4afeb8..be51f3035 100644
--- a/src/test-support/mocks/src/mesh-insights/_.ts
+++ b/src/test-support/mocks/src/mesh-insights/_.ts
@@ -1,12 +1,11 @@
 import type { EndpointDependencies, MockResponder } from '@/test-support'
 export default ({ env, fake }: EndpointDependencies): MockResponder => (req) => {
   const params = req.params
-  const policyTypes = [
+
+  const legacyTypes = [
     'CircuitBreaker',
     'FaultInjection',
     'HealthCheck',
-    'MeshGatewayRoute',
-    'MeshGateway',
     'ProxyTemplate',
     'RateLimit',
     'Retry',
@@ -17,6 +16,23 @@ export default ({ env, fake }: EndpointDependencies): MockResponder => (req) =>
     'TrafficTrace',
     'VirtualOutbound',
   ]
+  const policyTypes = [
+    'MeshAccessLog',
+    'MeshCircuitBreaker',
+    'MeshFaultInjection',
+    'MeshGatewayRoute',
+    'MeshHTTPRoute',
+    'MeshHealthCheck',
+    'MeshLoadBalancingStrategy',
+    'MeshMetric',
+    'MeshProxyPatch',
+    'MeshRateLimit',
+    'MeshRetry',
+    'MeshTCPRoute',
+    'MeshTimeout',
+    'MeshTrace',
+    'MeshTrafficPermission',
+  ].concat(legacyTypes)
 
   const serviceTotal = parseInt(env('KUMA_SERVICE_COUNT', `${fake.number.int({ min: 1, max: 30 })}`))
 
diff --git a/src/test-support/mocks/src/meshes/_/meshfaultinjections.ts b/src/test-support/mocks/src/meshes/_/meshfaultinjections.ts
index 7c8651c77..8ccdce4ba 100644
--- a/src/test-support/mocks/src/meshes/_/meshfaultinjections.ts
+++ b/src/test-support/mocks/src/meshes/_/meshfaultinjections.ts
@@ -34,10 +34,6 @@ export default ({ fake, pager, env }: EndpointDependencies): MockResponder => (r
             }
             : {}),
           spec: {
-            targetRef: {
-              kind: 'MeshService',
-              name: fake.hacker.noun(),
-            },
             from: [
               {
                 targetRef: {
diff --git a/src/test-support/mocks/src/meshes/_/meshfaultinjections/_.ts b/src/test-support/mocks/src/meshes/_/meshfaultinjections/_.ts
index 1b3268d8e..c910879b5 100644
--- a/src/test-support/mocks/src/meshes/_/meshfaultinjections/_.ts
+++ b/src/test-support/mocks/src/meshes/_/meshfaultinjections/_.ts
@@ -24,10 +24,6 @@ export default ({ fake, env }: EndpointDependencies): MockResponder => (req) =>
         }
         : {}),
       spec: {
-        targetRef: {
-          kind: 'MeshService',
-          name: fake.hacker.noun(),
-        },
         from: [
           {
             targetRef: {
diff --git a/src/test-support/mocks/src/meshes/_/meshfaultinjections/_/_resources/dataplanes.ts b/src/test-support/mocks/src/meshes/_/meshfaultinjections/_/_resources/dataplanes.ts
new file mode 100644
index 000000000..fab467522
--- /dev/null
+++ b/src/test-support/mocks/src/meshes/_/meshfaultinjections/_/_resources/dataplanes.ts
@@ -0,0 +1,28 @@
+import type { EndpointDependencies, MockResponder } from '@/test-support'
+
+export default (_deps: EndpointDependencies): MockResponder => (_req) => {
+  return {
+    headers: {},
+    body: {
+      total: 3,
+      items: [
+        {
+          type: 'Dataplane',
+          mesh: 'default',
+          name: 'backend',
+        },
+        {
+          type: 'Dataplane',
+          mesh: 'default',
+          name: 'db',
+        },
+        {
+          type: 'Dataplane',
+          mesh: 'default',
+          name: 'frontend',
+        },
+      ],
+      next: null,
+    },
+  }
+}