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

@@ -224,8 +224,10 @@ const getValue = (record: AnalyticsExploreRecord): string => {
 </script>
 
 <style lang="scss" scoped>
+@import '../styles/base';
 .kong-ui-public-top-n-table {
   border: none !important;
+  height: 100%;
   padding: 0 !important;
   .top-n-card-title {
     font-size: $kui-font-size-40;
@@ -243,12 +245,20 @@ const getValue = (record: AnalyticsExploreRecord): string => {
     line-height: 22px;
   }
 
+  :deep(.card-content) {
+    overflow-y: auto;
+
+    @include scrollbarBase;
+  }
+
   .top-n-table {
     display: flex;
     flex-direction: column;
+    max-height: 100%;
     width: 100%;
 
     .table-headings {
+      flex-shrink: 0;
       font-size: $kui-font-size-30;
       font-weight: $kui-font-weight-semibold;
       line-height: $kui-line-height-40;
@@ -276,6 +286,7 @@ const getValue = (record: AnalyticsExploreRecord): string => {
     }
 
     .table-body {
+      overflow-y: auto;
       .table-row:first-of-type {
         border-top: $kui-border-width-10 solid $kui-color-border;
       }

packages/analytics/analytics-chart/src/types/chart-data.ts

@@ -130,3 +130,10 @@ export interface DatasetLabel {
   name: string,
   id: string,
 }
+
+export interface TopNTableRecord {
+  id: string
+  name: string
+  deleted: boolean
+  dimension: string
+}

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/sandbox/index.ts

@@ -8,6 +8,7 @@ import sandboxQueryProvider from './sandbox-query-provider'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
 import { createRouter, createWebHistory } from 'vue-router'
+import { createPinia } from 'pinia'
 
 const app = createApp(App)
 
@@ -48,6 +49,9 @@ const appLinks: SandboxNavigationItem[] = ([
   },
 ])
 
+const pinia = createPinia()
+app.use(pinia)
+
 app.provide('app-links', appLinks)
 
 app.use(Kongponents)

packages/analytics/dashboard-renderer/sandbox/mock-data.ts

@@ -369,3 +369,65 @@ export const summaryDashboardConfig: DashboardConfig = {
     } as unknown as TileConfig,
   ],
 }
+
+export const routeExploreResponse: ExploreResultV4 = {
+  meta: {
+    display: {
+      route: {
+        'b486fb30-e058-4b5f-85c2-495ec26ba522:09ba7bc7-58d6-42d5-b9c0-3ffb28b307e6': { name: 'GetMeAKongDefault (secondaryRuntime)', deleted: false },
+        'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:2a3e9d21-804b-4b3b-ab7e-c6f002dadbf4': { name: 'dp-mock-msg-per-sec-us-dev (default)', deleted: false },
+        'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:8b1db7eb-5c3c-489c-9344-eb0b272019ca': { name: '8b1db (default)', deleted: false },
+        'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:8f3f6808-a723-4793-8444-f2046961226b': { name: 'dp-mock-us-dev (default)', deleted: false },
+        'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:b4cd1c10-d77f-41b0-a84d-31fc0d99f0d9': { name: 'GetMeASongRoute (default)', deleted: false },
+      },
+    },
+    end_ms: 1692295253000,
+    granularity_ms: 300000,
+    limit: 50,
+    metric_names: [
+      'request_count',
+    ],
+    metric_units: {
+      request_count: 'count',
+    },
+    query_id: '4cc77ce4-6458-49f0-8a7e-443a4312dacd',
+    start_ms: 1692294953000,
+  },
+  data: [
+    {
+      event: {
+        request_count: 9483,
+        route: 'b486fb30-e058-4b5f-85c2-495ec26ba522:09ba7bc7-58d6-42d5-b9c0-3ffb28b307e6',
+      },
+      timestamp: '2023-08-17T17:55:53.000Z',
+    },
+    {
+      event: {
+        request_count: 5587,
+        route: 'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:b4cd1c10-d77f-41b0-a84d-31fc0d99f0d9',
+      },
+      timestamp: '2023-08-17T17:55:53.000Z',
+    },
+    {
+      event: {
+        request_count: 5583,
+        route: 'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:8b1db7eb-5c3c-489c-9344-eb0b272019ca',
+      },
+      timestamp: '2023-08-17T17:55:53.000Z',
+    },
+    {
+      event: {
+        request_count: 1485,
+        route: 'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:8f3f6808-a723-4793-8444-f2046961226b',
+      },
+      timestamp: '2023-08-17T17:55:53.000Z',
+    },
+    {
+      event: {
+        request_count: 309,
+        route: 'd5ac5d88-efed-4e10-9dfe-0b0a6646c219:2a3e9d21-804b-4b3b-ab7e-c6f002dadbf4',
+      },
+      timestamp: '2023-08-17T17:55:53.000Z',
+    },
+  ],
+}

packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue

@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import type { DashboardConfig, DashboardRendererContext, TileConfig } from '../../src'
-import { ChartTypes, DashboardRenderer } from '../../src'
+import { CP_ID_TOKEN, ChartTypes, DashboardRenderer, ENTITY_ID_TOKEN } from '../../src'
 import { inject } from 'vue'
 import { ChartMetricDisplay } from '@kong-ui-public/analytics-chart'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
@@ -92,7 +92,9 @@ const dashboardConfig: DashboardConfig = {
     {
       definition: {
         chart: {
-          type: ChartTypes.VerticalBar,
+          type: ChartTypes.TopN,
+          chartTitle: 'Top N chart of mock data',
+          description: 'Description',
         },
         query: {},
       },
@@ -113,8 +115,9 @@ const dashboardConfig: DashboardConfig = {
           type: ChartTypes.TopN,
           chartTitle: 'Top N chart of mock data',
           description: 'Description',
+          entityLink: `https://test.com/cp/${CP_ID_TOKEN}/entity/${ENTITY_ID_TOKEN}`,
         },
-        query: {},
+        query: { dimensions: ['route'] },
       },
       layout: {
         position: {

packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vue'
-import { nonTsExploreResponse, timeSeriesExploreResponse } from './mock-data'
+import { nonTsExploreResponse, timeSeriesExploreResponse, routeExploreResponse } from './mock-data'
 import { INJECT_QUERY_PROVIDER } from '../src/constants'
-import type { AnalyticsBridge, ExploreQuery, ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsBridge, AnalyticsConfig, ExploreQuery, ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
 
 const delayedResponse = <T>(response: T): Promise<T> => {
   return new Promise((resolve) => {
@@ -15,12 +15,25 @@ const queryFn = async (query: ExploreQuery): Promise<ExploreResultV4> => {
   if (query.dimensions && query.dimensions.findIndex(d => d === 'time') > -1) {
     return await delayedResponse(timeSeriesExploreResponse)
   }
+  if (query.dimensions && query.dimensions.findIndex(d => d === 'route') > -1) {
+    return await delayedResponse(routeExploreResponse)
+  }
+
   return await delayedResponse(nonTsExploreResponse)
 }
 
+const configFn = (): Promise<AnalyticsConfig> => Promise.resolve({
+  analytics: true,
+  percentiles: true,
+  api_requests_retention: '1d',
+  api_requests_retention_ms: 86400000,
+  api_analytics_retention: '30d',
+  api_analytics_retention_ms: 30 * 86400000,
+})
+
 const sandboxQueryProvider: Plugin = {
   install(app) {
-    app.provide(INJECT_QUERY_PROVIDER, { queryFn } as AnalyticsBridge)
+    app.provide(INJECT_QUERY_PROVIDER, { queryFn, configFn } as AnalyticsBridge)
   },
 }
 

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

@@ -59,3 +59,9 @@ const componentData = computed(() => {
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.tile-boundary {
+  height: v-bind('`${height}px`');
+}
+</style>

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

@@ -10,15 +10,44 @@
       :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="parseLink(record)"
+        />
+      </template>
+    </TopNTable>
   </QueryDataProvider>
 </template>
 
 <script setup lang="ts">
-import type { RendererProps, TopNTableOptions } from '../types'
+import { CP_ID_TOKEN, ENTITY_ID_TOKEN, type RendererProps, type TopNTableOptions } from '../types'
 import { TopNTable } from '@kong-ui-public/analytics-chart'
+import type { TopNTableRecord } from '@kong-ui-public/analytics-chart'
 import QueryDataProvider from './QueryDataProvider.vue'
+import { EntityLink } from '@kong-ui-public/entities-shared'
 
-defineProps<RendererProps<TopNTableOptions>>()
+const props = defineProps<RendererProps<TopNTableOptions>>()
+
+const parseLink = (record: TopNTableRecord) => {
+  if (props.chartOptions?.entityLink) {
+    if (record.id.includes(':')) {
+      const [cpId, entityId] = record.id.split(':')
+
+      return props.chartOptions.entityLink.replace(CP_ID_TOKEN, cpId).replace(ENTITY_ID_TOKEN, entityId)
+    } else {
+      return props.chartOptions.entityLink.replace(ENTITY_ID_TOKEN, record.id)
+    }
+  }
+  return ''
+}
 
 </script>

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

@@ -3,6 +3,9 @@ import { ChartMetricDisplay } from '@kong-ui-public/analytics-chart'
 import { DEFAULT_TILE_HEIGHT } from '../constants'
 import type { ExploreFilter, ExploreQuery, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 
+export const ENTITY_ID_TOKEN = '{entity-id}'
+export const CP_ID_TOKEN = '{cp-id}'
+
 export interface DashboardRendererContext {
   filters: ExploreFilter[]
   timeSpec: TimeRangeV4
@@ -133,6 +136,9 @@ export const topNTableSchema = {
     description: {
       type: 'string',
     },
+    entityLink: {
+      type: 'string',
+    },
   },
   required: ['type'],
   additionalProperties: false,