feature(policies): add more information to the policy detail page

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

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>

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 }">

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,

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 })}`))
 

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: {

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: {

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,
+    },
+  }
+}