From 5c2e17a56eade3ce88f8468e80ae809fa832d78b Mon Sep 17 00:00:00 2001 From: mihai-peteu Date: Wed, 23 Oct 2024 18:13:06 -0700 Subject: [PATCH 1/7] feat(analytics-chart): move actions into kebab menu [MA-3301] CSV export link moved to inside an action menu --- .../sandbox/pages/TimeSeriesChartDemo.vue | 3 + .../src/components/AnalyticsChart.vue | 80 +++++++++++++++---- .../src/components/CsvExportButton.vue | 11 +-- .../analytics-chart/src/locales/en.json | 1 + 4 files changed, 71 insertions(+), 24 deletions(-) diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue index e50e982a9b..5bb3b3da73 100644 --- a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue +++ b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue @@ -204,6 +204,7 @@ :chart-data="(exploreResult)" :chart-options="analyticsChartOptions" chart-title="Request count by Status Code" + :go-to-explore="(exploreLink)" :legend-position="legendPosition" :show-annotations="showAnnotationsToggle" :show-legend-values="showLegendValuesToggle" @@ -330,6 +331,8 @@ const exportCsv = () => { setModalVisibility(true) } +const exploreLink: string = 'https://cloud.konghq.tech/us/analytics/explorer' + const exploreResultText = ref('') const hasError = computed(() => !isValidJson(exploreResultText.value)) const isValid = computed(() => exploreResultText.value !== undefined && diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue index b1b3dba506..d6ee56a040 100644 --- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue +++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue @@ -27,15 +27,37 @@ -
+ - -
+ + , required: true, @@ -302,6 +329,8 @@ const showChartHeader = computed(() => { return (hasValidChartData.value && resultSetTruncated.value && maxEntitiesShown.value) || props.chartTitle || (props.allowCsvExport && hasValidChartData.value) }) +const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData) || !!props.goToExplore) + const timeSeriesGranularity = computed(() => { if (!props.chartData.meta.granularity_ms) { @@ -395,12 +424,6 @@ provide('legendPosition', toRef(props, 'legendPosition')) display: flex; justify-content: end; } - - .chart-export-button { - display: flex; - margin-left: var(--kui-space-auto, $kui-space-auto); - margin-right: var(--kui-space-0, $kui-space-0); - } } .chart-title { @@ -413,6 +436,33 @@ 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; + // } + + a { + color: $kui-color-text; + + &:hover { + color: $kui-color-text; + text-decoration: none; + } + } + + &:hover { + cursor: pointer; + } + } } diff --git a/packages/analytics/analytics-chart/src/components/CsvExportButton.vue b/packages/analytics/analytics-chart/src/components/CsvExportButton.vue index 6d22dd8332..ea619f5a9d 100644 --- a/packages/analytics/analytics-chart/src/components/CsvExportButton.vue +++ b/packages/analytics/analytics-chart/src/components/CsvExportButton.vue @@ -1,12 +1,11 @@ + + { ).value }) +const exportModalVisible = ref(false) +const setExportModalVisibility = (val: boolean) => { + exportModalVisible.value = val +} +const csvFilename = computed(() => props.filenamePrefix || i18n.t('csvExport.defaultFilename')) +const exportCsv = () => { + setExportModalVisibility(true) +} + const timeRangeMs = computed(() => { if (!props.chartData?.meta) { return 0 @@ -443,13 +462,11 @@ provide('legendPosition', toRef(props, 'legendPosition')) 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; - // } - + li.k-dropdown-item { + a { + text-decoration: none; + } + } a { color: $kui-color-text; From 562634d3d0e4914b57dae33ce59f90f96eebf01c Mon Sep 17 00:00:00 2001 From: Filip Gutica Date: Thu, 31 Oct 2024 11:35:02 -0700 Subject: [PATCH 5/7] fix: add ff checking --- .../src/components/AnalyticsChart.vue | 21 ++++++++++++++++++- .../src/components/CsvExportButton.vue | 11 ++++++++-- .../analytics-chart/src/composables/index.ts | 2 ++ .../composables/useEvauluateFeatureFlag.ts | 19 +++++++++++++++++ .../analytics-chart/src/constants/index.ts | 1 + .../analytics-chart/src/types/chart-data.ts | 1 + 6 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 packages/analytics/analytics-chart/src/composables/useEvauluateFeatureFlag.ts create mode 100644 packages/analytics/analytics-chart/src/constants/index.ts diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue index 6ea4a77816..108af261fa 100644 --- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue +++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue @@ -27,9 +27,18 @@ +
+ +
@@ -150,6 +159,7 @@ 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 CsvExportButton from './CsvExportButton.vue' const props = defineProps({ allowCsvExport: { @@ -227,6 +237,9 @@ const emit = defineEmits<{ }>() const { i18n } = composables.useI18n() +const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag() + +const hasKebabMenuAccess = computed(() => evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)) const rawChartData = toRef(props, 'chartData') @@ -443,6 +456,12 @@ provide('legendPosition', toRef(props, 'legendPosition')) display: flex; justify-content: end; } + + .chart-export-button { + display: flex; + margin-left: var(--kui-space-auto, $kui-space-auto); + margin-right: var(--kui-space-0, $kui-space-0); + } } .chart-title { diff --git a/packages/analytics/analytics-chart/src/components/CsvExportButton.vue b/packages/analytics/analytics-chart/src/components/CsvExportButton.vue index ea619f5a9d..6d22dd8332 100644 --- a/packages/analytics/analytics-chart/src/components/CsvExportButton.vue +++ b/packages/analytics/analytics-chart/src/components/CsvExportButton.vue @@ -1,11 +1,12 @@