feat(dashboard-renderer): stub out support for EntityLink [MA-2716]

packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue

@@ -229,9 +229,9 @@ import {
   SimpleChart,
   TopNTable,
 } from '../../src'
+import { SeededRandom } from '@kong-ui-public/analytics-utilities'
 import type { AnalyticsExploreRecord, DisplayBlob, ExploreResultV4, QueryResponseMeta } from '@kong-ui-public/analytics-utilities'
 import type { AnalyticsChartColors, SimpleChartOptions } from '../../src/types'
-import { SeededRandom } from '../utils/SeedRandom'
 import { rand } from '../utils/utils'
 import { lookupDatavisColor } from '../../src/utils'
 import { lookupStatusCodeColor } from '../../src/utils/customColors'

packages/analytics/analytics-chart/src/components/TopNTable.vue

@@ -183,6 +183,7 @@ const errorMessage = computed((): string => {
 })
 
 const getId = (record: AnalyticsExploreRecord): string => {
+  console.log(' >>> record >>>', record)
   const event = record.event
 
   return String(event[displayKey.value])

packages/analytics/dashboard-renderer/package.json

@@ -79,6 +79,7 @@
   },
   "dependencies": {
     "@kong-ui-public/core": "workspace:^",
+    "@kong-ui-public/entities-shared": "workspace:^",
     "ajv": "^8.12.0"
   }
 }

packages/analytics/dashboard-renderer/src/components/TopNTableRenderer.vue

@@ -10,15 +10,40 @@
       :description="chartOptions.description"
       :synthetics-data-key="chartOptions.syntheticsDataKey"
       :title="chartOptions.chartTitle || ''"
-    />
+    >
+      <template
+        v-if="props.chartOptions?.entityLink"
+        #name="{ record }"
+      >
+        <EntityLink
+          :entity-link-data="{
+            id: record.id,
+            label: record.name,
+            deleted: record.deleted
+          }"
+          :external-link="generateEntityUrl([
+            '{geo}',
+            'gateway-manager',
+            '{idTuple0}',
+            'gateway-services',
+            '{idTuple1}'
+          ])"
+        />
+      </template>
+    </TopNTable>
   </QueryDataProvider>
 </template>
 
 <script setup lang="ts">
 import type { RendererProps, TopNTableOptions } from '../types'
 import { TopNTable } from '@kong-ui-public/analytics-chart'
+import composables from '../composables'
 import QueryDataProvider from './QueryDataProvider.vue'
 
-defineProps<RendererProps<TopNTableOptions>>()
+const props = defineProps<RendererProps<TopNTableOptions>>()
+
+const generateEntityUrl = (routeParams: string[]): string => {
+  return composables.useExternalLinkCreator(routeParams)
+}
 
 </script>

packages/analytics/dashboard-renderer/src/composables/index.ts

@@ -1,6 +1,8 @@
+import useExternalLinkCreator from './useExternalLinkCreator'
 import useI18n from './useI18n'
 
 // All composables must be exported as part of the default object for Cypress test stubs
 export default {
+  useExternalLinkCreator,
   useI18n,
 }

packages/analytics/dashboard-renderer/src/composables/useExternalLinkCreator.ts

@@ -0,0 +1,12 @@
+import { useExternalLinkCreator } from '@kong-ui-public/entities-shared'
+
+export default (routeParams: string[]): string => {
+  // TODO: may have to pass in geo from consuming app
+  const activeGeoCode = 'us'
+
+  const parsedRouteParams = routeParams.map(rp => rp.replace('{geo}', activeGeoCode))
+
+  // TODO: replace `{idTuple0}` and `{idTuple1}` with actual record ID vales
+
+  return useExternalLinkCreator(parsedRouteParams)
+}

packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts

@@ -133,6 +133,9 @@ export const topNTableSchema = {
     description: {
       type: 'string',
     },
+    entityLink: {
+      type: 'string',
+    },
   },
   required: ['type'],
   additionalProperties: false,