feat: threshold as object [MA-3442]

Kong · Dec 2, 2024 · 0f6ec3a · 0f6ec3a
1 parent b21ba3b
commit 0f6ec3a
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 45 deletions.
diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
@@ -207,7 +207,7 @@
         :legend-position="legendPosition"
         :show-annotations="showAnnotationsToggle"
         :show-legend-values="showLegendValuesToggle"
-        :threshold="1250"
+        :threshold="threshold"
         :timeseries-zoom="timeSeriesZoomToggle"
         tooltip-title="tooltip title"
         @zoom-time-range="eventLog += 'Zoomed to ' + JSON.stringify($event) + '\n'"
@@ -259,15 +259,14 @@ import {
   CsvExportButton,
 } from '../../src'
 import type { AnalyticsExploreRecord, ExploreResultV4, QueryResponseMeta } from '@kong-ui-public/analytics-utilities'
-import type { AnalyticsChartColors, AnalyticsChartOptions, ChartType } from '../../src/types'
+import type { AnalyticsChartColors, AnalyticsChartOptions, ChartType, MetricThreshold } from '../../src/types'
 import { isValidJson, rand } from '../utils/utils'
 import { lookupDatavisColor } from '../../src/utils'
 import { lookupStatusCodeColor } from '../../src/utils/customColors'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { generateMultipleMetricTimeSeriesData, generateSingleMetricTimeSeriesData } from '@kong-ui-public/analytics-utilities'
 import CodeText from '../CodeText.vue'
 import { INJECT_QUERY_PROVIDER } from '../../src/constants'
-import useEvaluateFeatureFlag from '../../src/composables/useEvauluateFeatureFlag'
 
 enum Metrics {
   TotalRequests = 'TotalRequests',
@@ -325,6 +324,10 @@ const serviceDimensionValues = ref(new Set([
   'service1', 'service2', 'service3', 'service4', 'service5',
 ]))
 
+const threshold:MetricThreshold = {
+  'request_count': 1250,
+} as any as MetricThreshold
+
 const exportModalVisible = ref(false)
 const setModalVisibility = (val: boolean) => {
   exportModalVisible.value = val

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -111,7 +111,7 @@
 
 <script setup lang="ts">
 import composables from '../composables'
-import type { AnalyticsChartOptions, EnhancedLegendItem, TooltipEntry } from '../types'
+import type { AnalyticsChartOptions, EnhancedLegendItem, MetricThreshold, TooltipEntry } from '../types'
 import { ChartLegendPosition } from '../enums'
 import StackedBarChart from './chart-types/StackedBarChart.vue'
 import DoughnutChart from './chart-types/DoughnutChart.vue'
@@ -185,7 +185,7 @@ const props = defineProps({
     default: true,
   },
   threshold: {
-    type: Number,
+    type: Object as PropType<MetricThreshold>,
     required: false,
     default: undefined,
   },

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -12,28 +12,30 @@
       ref="legendItemsRef"
       @click="handleLegendItemClick(datasetIndex, index)"
     >
-      <div
-        class="square-marker"
-        :style="{ background: fillStyle, 'border-color': strokeStyle }"
-      />
-      <div
-        class="label-container"
-        :class="{ 'strike-through': !isDatasetVisible(datasetIndex, index) }"
-      >
+      <template v-if="text !== i18n.t('chartLabels.threshold')">
         <div
-          class="label"
-          :class="{ 'truncate-label' : shouldTruncate }"
-          :title="text"
-        >
-          {{ text }}
-        </div>
+          class="square-marker"
+          :style="{ background: fillStyle, 'border-color': strokeStyle }"
+        />
         <div
-          v-if="value && showValues"
-          class="sub-label"
+          class="label-container"
+          :class="{ 'strike-through': !isDatasetVisible(datasetIndex, index) }"
         >
-          {{ value.formatted }}
+          <div
+            class="label"
+            :class="{ 'truncate-label' : shouldTruncate }"
+            :title="text"
+          >
+            {{ text }}
+          </div>
+          <div
+            v-if="value && showValues"
+            class="sub-label"
+          >
+            {{ value.formatted }}
+          </div>
         </div>
-      </div>
+      </template>
     </li>
   </ul>
 </template>
@@ -44,6 +46,9 @@ import { Chart, type LegendItem } from 'chart.js'
 import { inject, onBeforeUnmount, onMounted, ref, watch, type PropType, computed } from 'vue'
 import { KUI_SPACE_100, KUI_SPACE_80, KUI_SPACE_110 } from '@kong/design-tokens'
 import { debounce } from '../../utils'
+import composables from '../../composables'
+
+const { i18n } = composables.useI18n()
 
 const props = defineProps({
   id: {

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts
@@ -1,4 +1,4 @@
-import type { ExploreResultV4, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
+import type { ExploreAggregations, ExploreResultV4, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
 import { defaultLineOptions, lookupDatavisColor, datavisPalette, BORDER_WIDTH, NO_BORDER } from '../utils'
 import type { Ref } from 'vue'
 import { computed } from 'vue'
@@ -181,21 +181,28 @@ export default function useExploreResultToTimeDataset(
         // sort by total, descending
         datasets.sort((a, b) => (Number(a.total) < Number(b.total) ? -1 : 1))
 
-        // Draw an optional threshold line
+        // Draw threshold lines, if any
         if (deps.threshold) {
-          datasets.push({
-            type: 'line',
-            borderColor: KUI_COLOR_BACKGROUND_NEUTRAL,
-            borderWidth: 3,
-            borderDash: [12, 8],
-            fill: false,
-            order: -1, // Display above all other datasets
-            borderJoinStyle: 'miter',
-            stack: 'custom', // Never stack this dataset
-            data: zeroFilledTimeSeries.map(ts => {
-              return { x: ts, y: deps.threshold }
-            }),
-          } as Dataset)
+          for (const key of Object.keys(deps.threshold)) {
+            const thresholdValue = deps.threshold[key as keyof ExploreAggregations]
+
+            if (thresholdValue) {
+              datasets.push({
+                type: 'line',
+                rawMetric: key,
+                label: i18n.t('chartLabels.threshold'),
+                borderColor: KUI_COLOR_BACKGROUND_NEUTRAL,
+                borderWidth: 1.25,
+                borderDash: [12, 8],
+                fill: false,
+                order: -1, // Display above all other datasets
+                stack: 'custom', // Never stack this dataset
+                data: zeroFilledTimeSeries.map(ts => {
+                  return { x: ts, y: thresholdValue }
+                }),
+              } as Dataset)
+            }
+          }
         }
         return {
           datasets,

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts
@@ -6,6 +6,7 @@ import useExploreResultToTimeDataset from './useExploreResultToTimeDatasets'
 import { BORDER_WIDTH, NO_BORDER, defaultStatusCodeColors } from '../utils'
 import { addHours } from 'date-fns'
 import type { MockInstance } from 'vitest'
+import type { MetricThreshold } from 'src/types'
 
 const START_FOR_DAILY_QUERY = new Date(1672560000000)
 const END_FOR_DAILY_QUERY = new Date(1672646400000)
@@ -756,25 +757,24 @@ describe('useVitalsExploreDatasets', () => {
       },
     }))
 
-    const staticThreshold = 1.24
-
     const result = useExploreResultToTimeDataset(
       {
         fill: false,
-        threshold: staticThreshold,
+        threshold: { 'request_count': 320 } as any as MetricThreshold,
       },
       exploreResult,
     )
 
+    expect(result.value.datasets[2].label).toEqual('Alert threshold')
     expect(result.value.datasets[2].data).toEqual(
       [
         {
           x: START_FOR_DAILY_QUERY.getTime(),
-          y: staticThreshold,
+          y: 320,
         },
         {
           x: END_FOR_DAILY_QUERY.getTime(),
-          y: staticThreshold,
+          y: 320,
         },
       ],
     )

diff --git a/packages/analytics/analytics-chart/src/locales/en.json b/packages/analytics/analytics-chart/src/locales/en.json
@@ -137,7 +137,8 @@
     "cost": "Costs",
     "llm_cache_embeddings_latency_average": "Embeddings Latency (avg)",
     "llm_cache_fetch_latency_average": "Fetch Latency (avg)",
-    "llm_latency_average": "LLM Latency (avg)"
+    "llm_latency_average": "LLM Latency (avg)",
+    "threshold": "Alert threshold"
   },
   "metricAxisTitles": {
     "request_count": "Request Count",

diff --git a/packages/analytics/analytics-chart/src/types/chart-data.ts b/packages/analytics/analytics-chart/src/types/chart-data.ts
@@ -2,6 +2,7 @@ import type { ChartData, ChartDataset, LegendItem } from 'chart.js'
 import type { ChartMetricDisplay } from '../enums'
 import type { ChartTooltipSortFn } from './chartjs-options'
 import type { ChartType, SimpleChartType } from './chart-types'
+import type { ExploreAggregations } from '@kong-ui-public/analytics-utilities'
 
 // Chart.js extendend interfaces
 export type Dataset = ChartDataset & { rawDimension: string, rawMetric?: string, total?: number, lineTension?: number, fill?: boolean }
@@ -34,6 +35,10 @@ export interface LegendValueEntry {
   formatted: string
 }
 
+export type MetricThreshold = {
+  [K in keyof ExploreAggregations]: number
+}
+
 /**
  * Legend item with enhanced value
  */

diff --git a/packages/analytics/analytics-chart/src/types/explore-to-dataset-deps.ts b/packages/analytics/analytics-chart/src/types/explore-to-dataset-deps.ts
@@ -1,4 +1,5 @@
 import type { AnalyticsChartColors } from './chart-data'
+import type { MetricThreshold } from '../types'
 
 /**
  * Interace representing the various options
@@ -13,5 +14,5 @@ import type { AnalyticsChartColors } from './chart-data'
 export interface ExploreToDatasetDeps {
   colorPalette?: AnalyticsChartColors | string[]
   fill?: boolean
-  threshold?: number
+  threshold?: MetricThreshold
 }