From f706c78ea1ef4ffe3d2044170ad90d6057725ed5 Mon Sep 17 00:00:00 2001 From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com> Date: Fri, 10 May 2024 18:19:42 -0600 Subject: [PATCH] Chore: Refactor tooltip scrollable prop (#87671) --- packages/grafana-ui/src/options/builder/tooltip.tsx | 2 +- public/app/plugins/panel/barchart/BarChartPanel.tsx | 2 -- .../plugins/panel/candlestick/CandlestickPanel.tsx | 2 -- public/app/plugins/panel/heatmap/HeatmapPanel.tsx | 2 -- public/app/plugins/panel/heatmap/HeatmapTooltip.tsx | 10 +++++++--- public/app/plugins/panel/heatmap/module.tsx | 2 +- .../panel/state-timeline/StateTimelinePanel.tsx | 3 +-- .../panel/state-timeline/StateTimelineTooltip2.tsx | 9 +++++++-- .../panel/status-history/StatusHistoryPanel.tsx | 3 +-- .../app/plugins/panel/timeseries/TimeSeriesPanel.tsx | 3 +-- .../plugins/panel/timeseries/TimeSeriesTooltip.tsx | 11 ++++++++--- public/app/plugins/panel/trend/TrendPanel.tsx | 3 +-- 12 files changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/grafana-ui/src/options/builder/tooltip.tsx b/packages/grafana-ui/src/options/builder/tooltip.tsx index cce60cdc13c..eda34ed559a 100644 --- a/packages/grafana-ui/src/options/builder/tooltip.tsx +++ b/packages/grafana-ui/src/options/builder/tooltip.tsx @@ -76,6 +76,6 @@ export function addTooltipOptions( settings: { integer: true, }, - showIf: (options: T) => options.tooltip?.mode !== TooltipDisplayMode.None, + showIf: (options: T) => options.tooltip?.mode === TooltipDisplayMode.Multi, }); } diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index 3cff8d7dabc..ac544801c73 100644 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -15,7 +15,6 @@ import { import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2'; import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip'; -import { isTooltipScrollable } from '../timeseries/utils'; import { BarChartLegend, hasVisibleLegendSeries } from './BarChartLegend'; import { Options } from './panelcfg.gen'; @@ -171,7 +170,6 @@ export const BarChartPanel = (props: PanelProps) => { mode={options.tooltip.mode} sortOrder={options.tooltip.sort} isPinned={isPinned} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx index 3e18162e13c..cd2f5de2387 100644 --- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx +++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx @@ -26,7 +26,6 @@ import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2'; import { ExemplarsPlugin } from '../timeseries/plugins/ExemplarsPlugin'; import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin'; -import { isTooltipScrollable } from '../timeseries/utils'; import { prepareCandlestickFields } from './fields'; import { Options, defaultCandlestickColors, VizDisplayMode } from './types'; @@ -306,7 +305,6 @@ export const CandlestickPanel = ({ sortOrder={options.tooltip.sort} isPinned={isPinned} annotate={enableAnnotationCreation ? annotate : undefined} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx index 26cb18a7af8..86471494726 100644 --- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx @@ -21,7 +21,6 @@ import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHe import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2'; import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; -import { isTooltipScrollable } from '../timeseries/utils'; import { HeatmapTooltip } from './HeatmapTooltip'; import { prepareHeatmapData } from './fields'; @@ -208,7 +207,6 @@ export const HeatmapPanel = ({ showColorScale={options.tooltip.showColorScale} panelData={data} annotate={enableAnnotationCreation ? annotate : undefined} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx index 454f6d3133b..defd30e9c17 100644 --- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx @@ -23,6 +23,7 @@ import { DataHoverView } from 'app/features/visualization/data-hover/DataHoverVi import { getDataLinks } from '../status-history/utils'; import { getStyles } from '../timeseries/TimeSeriesTooltip'; +import { isTooltipScrollable } from '../timeseries/utils'; import { HeatmapData } from './fields'; import { renderHistogram } from './renderHistogram'; @@ -39,7 +40,6 @@ interface HeatmapTooltipProps { dismiss: () => void; panelData: PanelData; annotate?: () => void; - scrollable?: boolean; maxHeight?: number; } @@ -66,7 +66,6 @@ const HeatmapHoverCell = ({ showColorScale = false, mode, annotate, - scrollable, maxHeight, }: HeatmapTooltipProps) => { const index = dataIdxs[1]!; @@ -358,7 +357,12 @@ const HeatmapHoverCell = ({ return (
- + {customContent?.map((content, i) => (
{content} diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx index f767a6c5a92..f781881a29c 100644 --- a/public/app/plugins/panel/heatmap/module.tsx +++ b/public/app/plugins/panel/heatmap/module.tsx @@ -432,7 +432,7 @@ export const plugin = new PanelPlugin(HeatmapPanel) settings: { integer: true, }, - showIf: (options) => options.tooltip?.mode !== TooltipDisplayMode.None, + showIf: (options) => options.tooltip?.mode === TooltipDisplayMode.Multi, }); category = ['Legend']; diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx index ebe8273ecc1..10175fb0999 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx @@ -13,7 +13,7 @@ import { import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2'; import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; -import { getTimezones, isTooltipScrollable } from '../timeseries/utils'; +import { getTimezones } from '../timeseries/utils'; import { StateTimelineTooltip2 } from './StateTimelineTooltip2'; import { Options } from './panelcfg.gen'; @@ -124,7 +124,6 @@ export const StateTimelinePanel = ({ timeRange={timeRange} annotate={enableAnnotationCreation ? annotate : undefined} withDuration={true} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx index 73aa51c4e8d..c46f6298e18 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx @@ -12,6 +12,7 @@ import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineCha import { getDataLinks } from '../status-history/utils'; import { TimeSeriesTooltipProps, getStyles } from '../timeseries/TimeSeriesTooltip'; +import { isTooltipScrollable } from '../timeseries/utils'; interface StateTimelineTooltip2Props extends TimeSeriesTooltipProps { timeRange: TimeRange; @@ -24,7 +25,6 @@ export const StateTimelineTooltip2 = ({ seriesIdx, mode = TooltipDisplayMode.Single, sortOrder = SortOrder.None, - scrollable = false, isPinned, annotate, timeRange, @@ -83,7 +83,12 @@ export const StateTimelineTooltip2 = ({ return (
- + {footer}
); diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx index c919b183c0e..716445e784b 100644 --- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx +++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx @@ -13,7 +13,7 @@ import { import { StateTimelineTooltip2 } from '../state-timeline/StateTimelineTooltip2'; import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2'; import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; -import { getTimezones, isTooltipScrollable } from '../timeseries/utils'; +import { getTimezones } from '../timeseries/utils'; import { Options } from './panelcfg.gen'; @@ -129,7 +129,6 @@ export const StatusHistoryPanel = ({ timeRange={timeRange} annotate={enableAnnotationCreation ? annotate : undefined} withDuration={false} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index 5c655095149..22fae4f81ff 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx @@ -15,7 +15,7 @@ import { ExemplarsPlugin, getVisibleLabels } from './plugins/ExemplarsPlugin'; import { OutsideRangePlugin } from './plugins/OutsideRangePlugin'; import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin'; import { getPrepareTimeseriesSuggestion } from './suggestions'; -import { getTimezones, isTooltipScrollable, prepareGraphableFields } from './utils'; +import { getTimezones, prepareGraphableFields } from './utils'; interface TimeSeriesPanelProps extends PanelProps {} @@ -130,7 +130,6 @@ export const TimeSeriesPanel = ({ sortOrder={options.tooltip.sort} isPinned={isPinned} annotate={enableAnnotationCreation ? annotate : undefined} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> ); diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx index 8e44411fa06..8e480af4ffa 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx @@ -13,6 +13,8 @@ import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils'; import { getDataLinks } from '../status-history/utils'; import { fmt } from '../xychart/utils'; +import { isTooltipScrollable } from './utils'; + // exemplar / annotation / time region hovering? // add annotation UI / alert dismiss UI? @@ -31,7 +33,6 @@ export interface TimeSeriesTooltipProps { sortOrder?: SortOrder; isPinned: boolean; - scrollable?: boolean; annotate?: () => void; maxHeight?: number; @@ -44,7 +45,6 @@ export const TimeSeriesTooltip = ({ seriesIdx, mode = TooltipDisplayMode.Single, sortOrder = SortOrder.None, - scrollable = false, isPinned, annotate, maxHeight, @@ -94,7 +94,12 @@ export const TimeSeriesTooltip = ({ return (
{headerItem != null && } - + {footer}
); diff --git a/public/app/plugins/panel/trend/TrendPanel.tsx b/public/app/plugins/panel/trend/TrendPanel.tsx index 2242125429f..522c231eb08 100644 --- a/public/app/plugins/panel/trend/TrendPanel.tsx +++ b/public/app/plugins/panel/trend/TrendPanel.tsx @@ -11,7 +11,7 @@ import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries'; import { findFieldIndex } from 'app/features/dimensions'; import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip'; -import { isTooltipScrollable, prepareGraphableFields } from '../timeseries/utils'; +import { prepareGraphableFields } from '../timeseries/utils'; import { Options } from './panelcfg.gen'; @@ -129,7 +129,6 @@ export const TrendPanel = ({ mode={options.tooltip.mode} sortOrder={options.tooltip.sort} isPinned={isPinned} - scrollable={isTooltipScrollable(options.tooltip)} maxHeight={options.tooltip.maxHeight} /> );