From 811423a36cc28ea6623ffbf7779bd9fdde780e7a Mon Sep 17 00:00:00 2001
From: Filip <filgut@protonmail.com>
Date: Fri, 22 Nov 2024 14:33:00 -0800
Subject: [PATCH] feat: new dashboard tile header (#1802)

* feat: new dashboard tile header

- introduce a header to dashboard tiles
- render title and kebab menu for tile actions in this header
- behind FF no need for major version upgrade

* fix: component test

* fix: tighten up gap in topn table

* fix: show description in header in stead of kebab menu for golden signals and topn table

* fix: one more style tweak

* fix: style

* fix: component test

* fix: address comments

* fix: component test

* fix: address comments

* fix: tweak styles

* fix: comment
---
 .../src/components/AnalyticsChart.cy.ts       |  63 +-----
 .../src/components/AnalyticsChart.vue         | 163 +---------------
 .../src/components/TopNTable.vue              |   3 +-
 .../src/components/MetricCardContainer.vue    |   2 +-
 .../sandbox/pages/RendererDemo.vue            |   1 -
 .../sandbox/sandbox-query-provider.ts         |   2 +-
 .../components/BaseAnalyticsChartRenderer.vue |  13 +-
 .../src/components/DashboardRenderer.cy.ts    |   6 +-
 .../src/components/DashboardRenderer.vue      |   7 +-
 .../src/components/DashboardTile.vue          | 181 +++++++++++++++++-
 .../src/components/GoldenSignalsRenderer.vue  |  14 +-
 .../src/components/QueryDataProvider.vue      |  15 +-
 .../src/components/TopNTableRenderer.vue      |   7 +-
 .../src/composables/index.ts                  |   2 +
 .../composables/useEvauluateFeatureFlag.ts    |  19 ++
 .../dashboard-renderer/src/locales/en.json    |   7 +-
 16 files changed, 266 insertions(+), 239 deletions(-)
 create mode 100644 packages/analytics/dashboard-renderer/src/composables/useEvauluateFeatureFlag.ts

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
index 9cf34dff62..9c31074d7f 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts
@@ -23,7 +23,7 @@ describe('<AnalyticsChart />', () => {
   beforeEach(() => {
     cy.viewport(1280, 800)
     cy.stub(composables, 'useEvaluateFeatureFlag').returns({
-      evaluateFeatureFlag: () => true,
+      evaluateFeatureFlag: () => false,
     })
   })
 
@@ -254,52 +254,6 @@ describe('<AnalyticsChart />', () => {
         chartTitle: 'Requests',
       },
     })
-
-    cy.getTestId('chart-action-menu').should('not.exist')
-  })
-
-  it('renders the kebab menu with only the "Jump to Explore" link if no data is provided', () => {
-    cy.mount(AnalyticsChart, {
-      props: {
-        allowCsvExport: true,
-        goToExplore: 'https://cloud.konghq.tech/us/analytics/explorer',
-        chartData: emptyExploreResult,
-        chartOptions: {
-          type: 'timeseries_line',
-        },
-        chartTitle: 'Requests',
-      },
-    })
-
-    cy.getTestId('chart-action-menu').should('exist')
-
-    // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.getTestId('chart-action-menu').click().then(() => {
-      cy.getTestId('chart-jump-to-explore').should('exist')
-      cy.getTestId('csv-export-button').should('not.exist')
-    })
-  })
-
-  it('does not render an "Export" link in the kebab actions if chart data is present but prop is set to `false`', () => {
-    cy.mount(AnalyticsChart, {
-      props: {
-        allowCsvExport: false,
-        goToExplore: 'https://cloud.konghq.tech/us/analytics/explorer',
-        chartData: exploreResult,
-        chartOptions: {
-          type: 'timeseries_line',
-        },
-        chartTitle: 'Requests',
-      },
-    })
-
-    cy.getTestId('chart-action-menu').should('exist')
-
-    // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.getTestId('chart-action-menu').click().then(() => {
-      cy.getTestId('chart-jump-to-explore').should('exist')
-      cy.getTestId('csv-export-modal').should('not.exist')
-    })
   })
 
   it('Renders an "Export" button, and tabulated data in the modal preview', () => {
@@ -314,19 +268,10 @@ describe('<AnalyticsChart />', () => {
       },
     })
 
-    cy.getTestId('chart-action-menu').should('exist')
-
     cy.get('.chart-header').trigger('mouseenter')
-    cy.getTestId('kebab-action-menu').should('be.visible')
-
-    // eslint-disable-next-line cypress/unsafe-to-chain-command
-    cy.getTestId('kebab-action-menu').click().then(() => {
-      cy.getTestId('chart-jump-to-explore').should('not.exist')
-
-      cy.getTestId('csv-export-button').click()
-      cy.getTestId('csv-export-modal').should('exist')
-      cy.get('.modal-content .vitals-table').should('exist')
-    })
+    cy.getTestId('csv-export-button').click()
+    cy.getTestId('csv-export-modal').should('exist')
+    cy.get('.modal-content .vitals-table').should('exist')
   })
 
   it('multi dimension bar charts have "tooltipContext"', () => {
diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
index b7ee3dbe52..676737b54b 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -1,11 +1,9 @@
 <template>
   <div
     class="analytics-chart-shell"
-    :class="{ 'is-hovering': isHovering }"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
   >
     <div
+      v-if="hasValidChartData && resultSetTruncated && maxEntitiesShown || (!hasKebabMenuAccess && (allowCsvExport || props.chartTitle))"
       class="chart-header"
     >
       <div
@@ -15,9 +13,11 @@
       >
         {{ chartTitle }}
       </div>
-      <div class="chart-header-icons-wrapper">
+      <div
+        v-if="hasValidChartData && resultSetTruncated && maxEntitiesShown"
+        class="chart-header-icons-wrapper"
+      >
         <KTooltip
-          v-if="hasValidChartData && resultSetTruncated && maxEntitiesShown"
           class="tooltip"
           max-width="500"
           placement="right"
@@ -33,7 +33,7 @@
         </KTooltip>
       </div>
       <div
-        v-if="allowCsvExport && hasValidChartData && !hasKebabMenuAccess"
+        v-if="!hasKebabMenuAccess && allowCsvExport && hasValidChartData"
         class="chart-export-button"
       >
         <CsvExportButton
@@ -41,55 +41,6 @@
           :filename-prefix="filenamePrefix"
         />
       </div>
-      <!-- More actions menu -->
-      <KDropdown
-        v-if="hasKebabMenuAccess && hasMenuOptions"
-        class="dropdown"
-        data-testid="chart-action-menu"
-      >
-        <button
-          appearance="none"
-          :aria-label="i18n.t('more_actions')"
-          class="kebab-action-menu"
-          data-testid="kebab-action-menu"
-        >
-          <MoreIcon
-            :color="KUI_COLOR_TEXT_NEUTRAL"
-            :size="KUI_ICON_SIZE_40"
-          />
-        </button>
-        <template #items>
-          <KDropdownItem
-            v-if="!!goToExplore"
-            data-testid="chart-jump-to-explore"
-          >
-            <a :href="goToExplore">
-              {{ i18n.t('jumpToExplore') }}
-            </a>
-          </KDropdownItem>
-          <KDropdownItem
-            v-if="allowCsvExport && hasValidChartData"
-            class="chart-export-button"
-            data-testid="chart-csv-export"
-            @click="exportCsv()"
-          >
-            <span
-              class="chart-export-trigger"
-              data-testid="csv-export-button"
-            >
-              {{ i18n.t('csvExport.exportAsCsv') }}
-            </span>
-          </KDropdownItem>
-          <slot name="menu-items" />
-        </template>
-      </KDropdown>
-      <!-- Keep outside of dropdown, so we can independently affect its visibility -->
-      <CsvExportModal
-        v-if="exportModalVisible"
-        :chart-data="rawChartData"
-        :filename="csvFilename"
-        @toggle-modal="setExportModalVisibility"
-      />
     </div>
     <KEmptyState
       v-if="!hasValidChartData"
@@ -164,14 +115,13 @@ import { ChartLegendPosition } from '../enums'
 import StackedBarChart from './chart-types/StackedBarChart.vue'
 import DoughnutChart from './chart-types/DoughnutChart.vue'
 import type { PropType } from 'vue'
-import { computed, provide, toRef, ref } from 'vue'
+import { computed, provide, toRef } from 'vue'
 import { msToGranularity } from '@kong-ui-public/analytics-utilities'
 import type { AbsoluteTimeRangeV4, ExploreAggregations, ExploreResultV4, GranularityValues } from '@kong-ui-public/analytics-utilities'
 import { hasMillisecondTimestamps, defaultStatusCodeColors } from '../utils'
 import TimeSeriesChart from './chart-types/TimeSeriesChart.vue'
-import { KUI_COLOR_TEXT_NEUTRAL, KUI_COLOR_TEXT_WARNING, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import { MoreIcon, WarningIcon } from '@kong/icons'
-import CsvExportModal from './CsvExportModal.vue'
+import { KUI_COLOR_TEXT_WARNING, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { WarningIcon } from '@kong/icons'
 import CsvExportButton from './CsvExportButton.vue'
 
 const props = defineProps({
@@ -180,11 +130,6 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  goToExplore: {
-    type: String,
-    required: false,
-    default: '',
-  },
   chartData: {
     type: Object as PropType<ExploreResultV4>,
     required: true,
@@ -243,11 +188,6 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  showMenu: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
 })
 
 const emit = defineEmits<{
@@ -260,8 +200,6 @@ const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
 const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
 
 const rawChartData = toRef(props, 'chartData')
-const isHovering = ref(false)
-
 
 const computedChartData = computed(() => {
   return isTimeSeriesChart.value
@@ -281,15 +219,6 @@ const computedChartData = computed(() => {
     ).value
 })
 
-const exportModalVisible = ref(false)
-const setExportModalVisibility = (val: boolean) => {
-  exportModalVisible.value = val
-}
-const csvFilename = computed<string>(() => props.filenamePrefix || i18n.t('csvExport.defaultFilename'))
-const exportCsv = () => {
-  setExportModalVisibility(true)
-}
-
 const timeRangeMs = computed<number | undefined>(() => {
   if (!props.chartData?.meta) {
     return 0
@@ -377,8 +306,6 @@ const hasValidChartData = computed(() => {
   return props.chartData && props.chartData.meta && props.chartData.data.length
 })
 
-const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore || props.showMenu)
-
 const timeSeriesGranularity = computed<GranularityValues>(() => {
 
   if (!props.chartData.meta.granularity_ms) {
@@ -438,22 +365,6 @@ const chartTooltipSortFn = computed(() => {
   }
 })
 
-const chartHeaderPosition = computed(() => {
-  return props.chartTitle || !hasKebabMenuAccess || (resultSetTruncated.value && maxEntitiesShown.value) ? 'relative' : 'absolute'
-})
-
-const chartHeaderWidth = computed(() => {
-  return chartHeaderPosition.value === 'relative' ? '100%' : '2ch'
-})
-
-const handleMouseEnter = () => {
-  isHovering.value = true
-}
-
-const handleMouseLeave = () => {
-  isHovering.value = false
-}
-
 provide('showLegendValues', showLegendValues)
 provide('legendPosition', toRef(props, 'legendPosition'))
 
@@ -468,13 +379,6 @@ provide('legendPosition', toRef(props, 'legendPosition'))
   position: relative;
   width: 100%;
 
-  &.is-hovering {
-    .chart-header :deep(.popover-trigger-wrapper) {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
   .analytics-chart-parent {
     height: inherit;
     width: inherit;
@@ -490,17 +394,10 @@ provide('legendPosition', toRef(props, 'legendPosition'))
     align-items: center;
     display: flex;
     justify-content: flex-start;
-    padding-bottom: var(--kui-space-60, $kui-space-60);
-    position: v-bind('chartHeaderPosition');
     right: 0;
-    width: v-bind('chartHeaderWidth');
+    width: 100%;
     z-index: 999;
 
-    &:hover :deep(.popover-trigger-wrapper) {
-      opacity: 1;
-      visibility: visible;
-    }
-
     .chart-header-icons-wrapper {
       display: flex;
       justify-content: end;
@@ -528,45 +425,5 @@ provide('legendPosition', toRef(props, 'legendPosition'))
     margin-left: var(--kui-space-50, $kui-space-50);
     margin-top: var(--kui-space-10, $kui-space-10);
   }
-
-  // Action menu
-  .dropdown {
-    display: flex;
-    margin-left: var(--kui-space-auto, $kui-space-auto);
-    margin-right: var(--kui-space-0, $kui-space-0);
-
-    :deep(.popover-trigger-wrapper) {
-      opacity: 0;
-      transform: fade(0, -10px);
-      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
-      visibility: hidden;
-    }
-
-    .kebab-action-menu {
-      background: $kui-color-background-transparent;
-      border: none;
-      color: inherit;
-      cursor: pointer;
-      height: 100%;
-    }
-
-    li.k-dropdown-item {
-      a {
-        text-decoration: none;
-      }
-    }
-    a {
-      color: $kui-color-text;
-
-      &:hover {
-        color: $kui-color-text;
-        text-decoration: none;
-      }
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
 }
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
index f1a1afba81..3a6cdd124c 100644
--- a/packages/analytics/analytics-chart/src/components/TopNTable.vue
+++ b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -234,9 +234,8 @@ const getValue = (record: AnalyticsExploreRecord): string => {
 
 .kong-ui-public-top-n-table {
   border: none !important;
-  height: 100%;
+  max-height: 100%;
   padding: 0 !important;
-
   .top-n-card-description {
     color: $kui-color-text-neutral;
     font-size: $kui-font-size-20;
diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue b/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
index 60ac9e3c13..8bcc17645f 100644
--- a/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
@@ -4,7 +4,7 @@
     :class="cardSize"
   >
     <div
-      v-if="props.containerTitle"
+      v-if="props.containerTitle || props.containerDescription"
       class="container-title"
     >
       {{ props.containerTitle }}
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 08ff110979..6ff03ac5b4 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -162,7 +162,6 @@ const dashboardConfig: DashboardConfig = {
     {
       definition: {
         chart: {
-          chartTitle: 'Timeseries line chart of mock data',
           type: 'timeseries_line',
         },
         query: {
diff --git a/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts b/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts
index 7060d28d5f..f676ebbb7c 100644
--- a/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts
+++ b/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts
@@ -13,7 +13,7 @@ const delayedResponse = <T>(response: T): Promise<T> => {
 
 const queryFn = async (query: ExploreQuery): Promise<ExploreResultV4> => {
   console.log('Querying data:', query)
-  if (query.dimensions && query.dimensions.findIndex(d => d === 'time') > -1) {
+  if (query.dimensions && query.dimensions.includes('time')) {
     return await delayedResponse(
       generateSingleMetricTimeSeriesData(
         { name: 'requests', unit: 'count' },
diff --git a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
index e458e88898..7d27d8b73a 100644
--- a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
@@ -5,13 +5,14 @@
     :query="query"
     :query-ready="queryReady"
     :refresh-counter="refreshCounter"
+    @chart-data="onChartData"
   >
     <div class="analytics-chart">
       <AnalyticsChart
         :allow-csv-export="chartOptions.allowCsvExport"
         :chart-data="data"
         :chart-options="options"
-        :chart-title="chartOptions.chartTitle"
+        :chart-title="!hasKebabMenuAccess && chartOptions.chartTitle || ''"
         :go-to-explore="exploreLink"
         legend-position="bottom"
         :show-menu="context.editable"
@@ -40,14 +41,18 @@ import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
 import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
 import composables from '../composables'
 import { INJECT_QUERY_PROVIDER } from '../constants'
-import type { AiExploreAggregations, AiExploreQuery, AnalyticsBridge, ExploreAggregations, ExploreQuery, QueryableAiExploreDimensions, QueryableExploreDimensions, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
+import type { AiExploreAggregations, AiExploreQuery, AnalyticsBridge, ExploreAggregations, ExploreQuery, ExploreResultV4, QueryableAiExploreDimensions, QueryableExploreDimensions, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 
 const props = defineProps<RendererProps<any> & { extraProps?: Record<string, any> }>()
 const emit = defineEmits<{
   (e: 'edit-tile'): void
+  (e: 'chart-data', chartData: ExploreResultV4): void
 }>()
 const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
 const { i18n } = composables.useI18n()
+const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
+
+const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
 
 const options = computed((): AnalyticsChartOptions => ({
   type: props.chartOptions.type,
@@ -75,6 +80,10 @@ const exploreLink = computed(() => {
 const editTile = () => {
   emit('edit-tile')
 }
+
+const onChartData = (data: ExploreResultV4) => {
+  emit('chart-data', data)
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
index 8672e3e332..288df43bcc 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
@@ -462,7 +462,7 @@ describe('<DashboardRenderer />', () => {
       } }))
 
       // Check that it replaces the description token.
-      cy.get('.container-description').should('have.text', 'Last 24-Hour Summary')
+      cy.get('.header-description').should('have.text', 'Last 24-Hour Summary')
     })
   })
 
@@ -499,7 +499,7 @@ describe('<DashboardRenderer />', () => {
       }))
 
       // Check that it replaces the description token.
-      cy.get('.container-description').should('have.text', 'Last 7-Day Summary')
+      cy.get('.header-description').should('have.text', 'Last 7-Day Summary')
     })
   })
 
@@ -582,7 +582,7 @@ describe('<DashboardRenderer />', () => {
       }))
 
       // Check that it replaces the description token.
-      cy.get('.container-description').should('have.text', 'Last 7-Day Summary')
+      cy.get('.header-description').should('have.text', 'Last 7-Day Summary')
     })
   })
 })
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index f1034a117d..9acd519a9b 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -48,7 +48,7 @@ import {
   TIMEFRAME_TOKEN,
 } from '../constants'
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
-import { KUI_SPACE_70 } from '@kong/design-tokens'
+import { KUI_SPACE_70, KUI_SPACE_30 } from '@kong/design-tokens'
 
 const props = defineProps<{
   context: DashboardRendererContext,
@@ -73,6 +73,9 @@ if (!queryBridge) {
   console.warn('https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements')
 }
 
+const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
+const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
+
 const configStore = useAnalyticsConfigStore()
 
 const timeSpec = computed<TimeRangeV4>(() => {
@@ -182,7 +185,7 @@ defineExpose({ refresh: refreshTiles })
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     height: 100%;
-    padding: var(--kui-space-70, $kui-space-70);
+    padding: v-bind('!hasKebabMenuAccess ? KUI_SPACE_70 : KUI_SPACE_30');
   }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 689e7b7158..2e861a9000 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -1,10 +1,79 @@
 <template>
-  <div class="tile-boundary">
+  <div
+    class="tile-boundary"
+    @mouseenter="showKebabMenu = true"
+    @mouseleave="showKebabMenu = false"
+  >
+    <div
+      v-if="hasKebabMenuAccess && definition.chart.type !== 'slottable'"
+      class="tile-header"
+    >
+      <div class="title">
+        {{ definition.chart.chartTitle }}
+      </div>
+      <KDropdown
+        v-if="canShowKebabMenu"
+        class="dropdown"
+        data-testid="chart-action-menu"
+      >
+        <button
+          appearance="none"
+          class="kebab-action-menu"
+          data-testid="kebab-action-menu"
+        >
+          <MoreIcon
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            :size="KUI_ICON_SIZE_40"
+          />
+        </button>
+        <template #items>
+          <KDropdownItem
+            v-if="!!exploreLink"
+            data-testid="chart-jump-to-explore"
+          >
+            <a :href="exploreLink">
+              {{ i18n.t('jumpToExplore') }}
+            </a>
+          </KDropdownItem>
+          <KDropdownItem
+            v-if="'allowCsvExport' in definition.chart && definition.chart.allowCsvExport"
+            class="chart-export-button"
+            data-testid="chart-csv-export"
+            @click="exportCsv()"
+          >
+            <span
+              class="chart-export-trigger"
+              data-testid="csv-export-button"
+            >
+              {{ i18n.t('csvExport.exportAsCsv') }}
+            </span>
+          </KDropdownItem>
+          <KDropdownItem
+            v-if="context.editable"
+            @click="editTile"
+          >
+            {{ i18n.t('renderer.edit') }}
+          </KDropdownItem>
+        </template>
+      </KDropdown>
+      <div
+        v-else-if="'description' in definition.chart"
+        class="header-description"
+      >
+        {{ definition.chart.description }}
+      </div>
+      <CsvExportModal
+        v-if="exportModalVisible"
+        :chart-data="(chartData as ExploreResultV4)"
+        :filename="csvFilename"
+        @toggle-modal="setExportModalVisibility"
+      />
+    </div>
     <component
       :is="componentData.component"
       v-if="componentData"
       v-bind="componentData.rendererProps"
-      @edit-tile="onEditTile"
+      @chart-data="onChartData"
     />
   </div>
 </template>
@@ -13,16 +82,21 @@ import type { DashboardRendererContextInternal, DashboardTileType, TileDefinitio
 import type {
   Component,
 } from 'vue'
-import { computed } from 'vue'
+import { computed, inject, ref } from 'vue'
 import '@kong-ui-public/analytics-chart/dist/style.css'
 import '@kong-ui-public/analytics-metric-provider/dist/style.css'
 import SimpleChartRenderer from './SimpleChartRenderer.vue'
 import BarChartRenderer from './BarChartRenderer.vue'
-import { DEFAULT_TILE_HEIGHT } from '../constants'
+import { DEFAULT_TILE_HEIGHT, INJECT_QUERY_PROVIDER } from '../constants'
 import TimeseriesChartRenderer from './TimeseriesChartRenderer.vue'
 import GoldenSignalsRenderer from './GoldenSignalsRenderer.vue'
 import { KUI_SPACE_70 } from '@kong/design-tokens'
 import TopNTableRenderer from './TopNTableRenderer.vue'
+import composables from '../composables'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { MoreIcon } from '@kong/icons'
+import type { AiExploreAggregations, AiExploreQuery, AnalyticsBridge, ExploreAggregations, ExploreQuery, ExploreResultV4, QueryableAiExploreDimensions, QueryableExploreDimensions, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
+import { CsvExportModal } from '@kong-ui-public/analytics-chart'
 
 const PADDING_SIZE = parseInt(KUI_SPACE_70, 10)
 
@@ -40,6 +114,35 @@ const emit = defineEmits<{
   (e: 'edit-tile', tile: TileDefinition): void
 }>()
 
+const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
+const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
+const { i18n } = composables.useI18n()
+const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
+
+const chartData = ref<ExploreResultV4>()
+const exportModalVisible = ref<boolean>(false)
+const showKebabMenu = ref(false)
+
+const exploreLink = computed(() => {
+  if (queryBridge && queryBridge.exploreBaseUrl) {
+    const exploreQuery: ExploreQuery | AiExploreQuery = {
+      filters: [...props.context.filters, ...props.definition.query.filters ?? []],
+      metrics: props.definition.query.metrics as ExploreAggregations[] | AiExploreAggregations[] ?? [],
+      dimensions: props.definition.query.dimensions as QueryableExploreDimensions[] | QueryableAiExploreDimensions[] ?? [],
+      time_range: props.definition.query.time_range as TimeRangeV4 || props.context.timeSpec,
+
+    } as ExploreQuery | AiExploreQuery
+    // Explore only supports advanced or ai
+    const datasource = ['advanced', 'ai'].includes(props.definition.query.datasource) ? props.definition.query.datasource : 'advanced'
+    return `${queryBridge.exploreBaseUrl()}?q=${JSON.stringify(exploreQuery)}&d=${datasource}&c=${props.definition.chart.type}`
+  }
+
+  return ''
+})
+
+const csvFilename = computed<string>(() => i18n.t('csvExport.defaultFilename'))
+const canShowKebabMenu = computed(() => hasKebabMenuAccess && !['golden_signals', 'top_n', 'gauge'].includes(props.definition.chart.type))
+
 const rendererLookup: Record<DashboardTileType, Component | undefined> = {
   'timeseries_line': TimeseriesChartRenderer,
   'horizontal_bar': BarChartRenderer,
@@ -67,13 +170,81 @@ const componentData = computed(() => {
   }
 })
 
-const onEditTile = () => {
+const editTile = () => {
   emit('edit-tile', props.definition)
 }
+
+const onChartData = (data: ExploreResultV4) => {
+  chartData.value = data
+}
+
+const setExportModalVisibility = (val: boolean) => {
+  exportModalVisible.value = val
+}
+
+const exportCsv = () => {
+  setExportModalVisibility(true)
+}
 </script>
 
 <style lang="scss" scoped>
 .tile-boundary {
   height: v-bind('`${height}px`');
+
+  .tile-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--kui-space-30, $kui-space-30);
+    right: 0;
+    width: 100%;
+
+    .title {
+      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+    }
+
+    .header-description {
+      color: $kui-color-text-neutral;
+      font-size: $kui-font-size-20;
+      text-align: right;
+    }
+
+    .dropdown {
+      display: flex;
+      margin-left: var(--kui-space-auto, $kui-space-auto);
+      margin-right: var(--kui-space-0, $kui-space-0);
+
+      .kebab-action-menu {
+        background: $kui-color-background-transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        height: 100%;
+        opacity: v-bind('showKebabMenu ? 1 : 0');
+        transform: fade(0, -10px);
+        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
+        visibility: v-bind('showKebabMenu ? "visible" : "hidden"');
+      }
+
+      li.k-dropdown-item {
+        a {
+          text-decoration: none;
+        }
+      }
+
+      a {
+        color: $kui-color-text;
+
+        &:hover {
+          color: $kui-color-text;
+          text-decoration: none;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
index 2eaf02ccc0..22898cedcc 100644
--- a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
@@ -10,6 +10,7 @@ import type { MetricCardOptions, RendererProps } from '../types'
 import { MetricsProvider, MetricsConsumer } from '@kong-ui-public/analytics-metric-provider'
 import { computed, type Ref } from 'vue'
 import { type ExploreFilter, Timeframe, TimePeriods } from '@kong-ui-public/analytics-utilities'
+import composables from '../composables'
 
 // Unlike AnalyticsChart, the metric card package doesn't currently expose its options
 // in a convenient interface.
@@ -17,6 +18,10 @@ type ProviderProps = InstanceType<typeof MetricsProvider>['$props']
 
 const props = defineProps<RendererProps<MetricCardOptions>>()
 
+const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
+const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
+
+
 const overrideTimeframe: Ref<Timeframe> = computed(() => {
   // Convert the timeframe to a v4 timespec.
   // Ideally, metric cards would natively support timespecs, but for right now,
@@ -57,8 +62,8 @@ const options = computed<ProviderProps>(() => {
     tz: props.context.tz,
     additionalFilter: props.context.filters as ExploreFilter[], // TODO: Decide how to handle metric card filters.
     longCardTitles: props.chartOptions.longCardTitles,
-    containerTitle: props.chartOptions.chartTitle,
-    description: props.chartOptions.description,
+    ... !hasKebabMenuAccess && { containerTitle: props.chartOptions.chartTitle },
+    ... !hasKebabMenuAccess && { description: props.chartOptions.description },
     percentileLatency: props.chartOptions.percentileLatency,
     refreshInterval: props.context.refreshInterval,
     queryReady: props.queryReady,
@@ -72,11 +77,12 @@ const options = computed<ProviderProps>(() => {
   @media (min-width: ($kui-breakpoint-phablet - 1px)) {
     align-items: center;
     display: flex;
-    height: 100%;
+    height: v-bind('hasKebabMenuAccess ? "90%" : "100%"');;
   }
 
   :deep(.kong-ui-public-metric-card-container) {
-    height: 100%;
+    height: v-bind('hasKebabMenuAccess ? "auto" : "100%"');
+    max-height: v-bind('hasKebabMenuAccess ? "100%" : "none"');
 
     .metricscard {
       @media (min-width: ($kui-breakpoint-phablet - 1px)) {
diff --git a/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue b/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue
index faef8b62a0..f96eafdaaf 100644
--- a/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue
+++ b/packages/analytics/dashboard-renderer/src/components/QueryDataProvider.vue
@@ -30,7 +30,7 @@
  * on the third step to ensure that the type is correctly inferred as "not undefined".
  */
 
-import { computed, inject, onUnmounted, ref } from 'vue'
+import { computed, inject, onUnmounted, ref, watch } from 'vue'
 import useSWRV from 'swrv'
 import { useSwrvState } from '@kong-ui-public/core'
 import composables from '../composables'
@@ -38,7 +38,7 @@ import {
   type AllFilters,
   type AnalyticsBridge,
   type DatasourceAwareQuery, type ExploreFilter,
-  type ExploreQuery, type FilterTypeMap, type QueryDatasource, stripUnknownFilters,
+  type ExploreQuery, type ExploreResultV4, type FilterTypeMap, type QueryDatasource, stripUnknownFilters,
 } from '@kong-ui-public/analytics-utilities'
 import { INJECT_QUERY_PROVIDER } from '../constants'
 import type { DashboardRendererContextInternal, ValidDashboardQuery } from '../types'
@@ -50,7 +50,10 @@ const props = defineProps<{
   refreshCounter: number
 }>()
 
-const emit = defineEmits(['queryComplete'])
+const emit = defineEmits<{
+  (e: 'chart-data', chartData: ExploreResultV4): void,
+  (e: 'queryComplete'): void
+}>()
 
 const { i18n } = composables.useI18n()
 
@@ -136,4 +139,10 @@ const errorMessage = ref<string | null>(null)
 const hasError = computed(() => state.value === STATE.ERROR || !!errorMessage.value)
 const isLoading = computed(() => !props.queryReady || [STATE.PENDING, STATE.VALIDATING, STATE.VALIDATING_HAS_DATA].includes(state.value))
 
+watch(v4Data, (data) => {
+  if (data) {
+    emit('chart-data', data)
+  }
+})
+
 </script>
diff --git a/packages/analytics/dashboard-renderer/src/components/TopNTableRenderer.vue b/packages/analytics/dashboard-renderer/src/components/TopNTableRenderer.vue
index 509072609d..e13ac6e42f 100644
--- a/packages/analytics/dashboard-renderer/src/components/TopNTableRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/TopNTableRenderer.vue
@@ -8,9 +8,9 @@
   >
     <TopNTable
       :data="data"
-      :description="chartOptions.description"
+      :description="!hasKebabMenuAccess && chartOptions.description || ''"
       :synthetics-data-key="chartOptions.syntheticsDataKey"
-      :title="chartOptions.chartTitle || ''"
+      :title="!hasKebabMenuAccess && chartOptions.chartTitle || ''"
     >
       <template
         v-if="props.chartOptions.entityLink"
@@ -36,9 +36,12 @@ 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'
+import composables from '../composables'
 import '@kong-ui-public/entities-shared/dist/style.css'
 
 const props = defineProps<RendererProps<TopNTableOptions>>()
+const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
+const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
 
 const parseLink = (record: TopNTableRecord) => {
   if (props.chartOptions?.entityLink) {
diff --git a/packages/analytics/dashboard-renderer/src/composables/index.ts b/packages/analytics/dashboard-renderer/src/composables/index.ts
index 3893dfc828..81533afc30 100644
--- a/packages/analytics/dashboard-renderer/src/composables/index.ts
+++ b/packages/analytics/dashboard-renderer/src/composables/index.ts
@@ -1,6 +1,8 @@
 import useI18n from './useI18n'
+import useEvaluateFeatureFlag from './useEvauluateFeatureFlag'
 
 // All composables must be exported as part of the default object for Cypress test stubs
 export default {
   useI18n,
+  useEvaluateFeatureFlag,
 }
diff --git a/packages/analytics/dashboard-renderer/src/composables/useEvauluateFeatureFlag.ts b/packages/analytics/dashboard-renderer/src/composables/useEvauluateFeatureFlag.ts
new file mode 100644
index 0000000000..83c117f20f
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/src/composables/useEvauluateFeatureFlag.ts
@@ -0,0 +1,19 @@
+import type { AnalyticsBridge } from '@kong-ui-public/analytics-utilities'
+import { inject } from 'vue'
+import { INJECT_QUERY_PROVIDER } from '../constants'
+
+export default function useEvaluateFeatureFlag() {
+
+  const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
+
+  const evaluateFeatureFlag = (key: string, defaultValue: boolean) => {
+    if (!queryBridge) {
+      return defaultValue
+    }
+    return queryBridge.evaluateFeatureFlagFn(key, defaultValue)
+  }
+
+  return {
+    evaluateFeatureFlag,
+  }
+}
diff --git a/packages/analytics/dashboard-renderer/src/locales/en.json b/packages/analytics/dashboard-renderer/src/locales/en.json
index b41b0e493d..48e9022a24 100644
--- a/packages/analytics/dashboard-renderer/src/locales/en.json
+++ b/packages/analytics/dashboard-renderer/src/locales/en.json
@@ -10,5 +10,10 @@
   },
   "queryDataProvider": {
     "timeRangeExceeded":  "The time range for this report is outside of your organization's data retention period"
-  }
+  },
+  "csvExport": {
+    "defaultFilename": "Chart Export",
+    "exportAsCsv": "Export as CSV"
+  },
+  "jumpToExplore": "Open in Explorer"
 }