IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

VizTooltips: Disable newVizTooltips when dashboard shared cursor is enabled (#79996)

Browse Source
This commit is contained in:
Adela Almasan
2024-01-04 08:29:39 -06:00
committed by GitHub
parent d29f9cfd3c
commit 692e8958a3
7 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@@ -4,7 +4,7 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import uPlot from 'uplot'; import uPlot from 'uplot';
import { Field, getDisplayProcessor, getLinksSupplier, PanelProps } from '@grafana/data'; import { DashboardCursorSync, Field, getDisplayProcessor, getLinksSupplier, PanelProps } from '@grafana/data';
import { PanelDataErrorView } from '@grafana/runtime'; import { PanelDataErrorView } from '@grafana/runtime';
import { TooltipDisplayMode } from '@grafana/schema'; import { TooltipDisplayMode } from '@grafana/schema';
import { TooltipPlugin, TooltipPlugin2, UPlotConfigBuilder, usePanelContext, useTheme2, ZoomPlugin } from '@grafana/ui'; import { TooltipPlugin, TooltipPlugin2, UPlotConfigBuilder, usePanelContext, useTheme2, ZoomPlugin } from '@grafana/ui';
@@ -229,6 +229,7 @@ export const CandlestickPanel = ({
} }
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations()); const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
return ( return (
<TimeSeries <TimeSeries
@@ -257,7 +258,7 @@ export const CandlestickPanel = ({
return ( return (
<> <>
{config.featureToggles.newVizTooltips ? ( {showNewVizTooltips ? (
<TooltipPlugin2 <TooltipPlugin2
config={uplotConfig} config={uplotConfig}
hoverMode={TooltipHoverMode.xAll} hoverMode={TooltipHoverMode.xAll}
@@ -293,7 +294,7 @@ export const CandlestickPanel = ({
<AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} /> <AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} />
)} )}
{/* Enables annotations creation*/} {/* Enables annotations creation*/}
{!config.featureToggles.newVizTooltips ? ( {!showNewVizTooltips ? (
enableAnnotationCreation ? ( enableAnnotationCreation ? (
<AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}> <AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}>
{({ startAnnotating }) => { {({ startAnnotating }) => {

14
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React, { useCallback, useMemo, useRef, useState } from 'react'; import React, { useCallback, useMemo, useRef, useState } from 'react';
import { import {
DashboardCursorSync,
DataFrame, DataFrame,
DataFrameType, DataFrameType,
Field, Field,
@@ -156,6 +157,7 @@ export const HeatmapPanel = ({
// ugh // ugh
const dataRef = useRef(info); const dataRef = useRef(info);
dataRef.current = info; dataRef.current = info;
const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
const builder = useMemo(() => { const builder = useMemo(() => {
const scaleConfig: ScaleDistributionConfig = dataRef.current?.heatmap?.fields[1].config?.custom?.scaleDistribution; const scaleConfig: ScaleDistributionConfig = dataRef.current?.heatmap?.fields[1].config?.custom?.scaleDistribution;
@@ -164,8 +166,8 @@ export const HeatmapPanel = ({
dataRef, dataRef,
theme, theme,
eventBus, eventBus,
onhover: onhover, onhover: !showNewVizTooltips ? onhover : null,
onclick: options.tooltip.show ? onclick : null, onclick: !showNewVizTooltips && options.tooltip.show ? onclick : null,
isToolTipOpen, isToolTipOpen,
timeZone, timeZone,
getTimeRange: () => timeRangeRef.current, getTimeRange: () => timeRangeRef.current,
@@ -223,16 +225,14 @@ export const HeatmapPanel = ({
); );
} }
const newVizTooltips = config.featureToggles.newVizTooltips ?? false;
return ( return (
<> <>
<VizLayout width={width} height={height} legend={renderLegend()}> <VizLayout width={width} height={height} legend={renderLegend()}>
{(vizWidth: number, vizHeight: number) => ( {(vizWidth: number, vizHeight: number) => (
<UPlotChart config={builder} data={facets as any} width={vizWidth} height={vizHeight}> <UPlotChart config={builder} data={facets as any} width={vizWidth} height={vizHeight}>
{/*children ? children(config, alignedFrame) : null*/} {/*children ? children(config, alignedFrame) : null*/}
{!newVizTooltips && <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />} {!showNewVizTooltips && <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />}
{newVizTooltips && options.tooltip.show && ( {showNewVizTooltips && options.tooltip.show && (
<TooltipPlugin2 <TooltipPlugin2
config={builder} config={builder}
hoverMode={TooltipHoverMode.xyOne} hoverMode={TooltipHoverMode.xyOne}
@@ -267,7 +267,7 @@ export const HeatmapPanel = ({
</UPlotChart> </UPlotChart>
)} )}
</VizLayout> </VizLayout>
{!newVizTooltips && ( {!showNewVizTooltips && (
<Portal> <Portal>
{hover && options.tooltip.show && ( {hover && options.tooltip.show && (
<VizTooltipContainer <VizTooltipContainer

5
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@@ -163,6 +163,7 @@ export const StateTimelinePanel = ({
} }
} }
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations()); const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
return ( return (
<TimelineChart <TimelineChart
@@ -178,7 +179,7 @@ export const StateTimelinePanel = ({
mode={TimelineMode.Changes} mode={TimelineMode.Changes}
> >
{(builder, alignedFrame) => { {(builder, alignedFrame) => {
if (oldConfig.current !== builder) { if (oldConfig.current !== builder && !showNewVizTooltips) {
oldConfig.current = addTooltipSupport({ oldConfig.current = addTooltipSupport({
config: builder, config: builder,
onUPlotClick, onUPlotClick,
@@ -195,7 +196,7 @@ export const StateTimelinePanel = ({
return ( return (
<> <>
{config.featureToggles.newVizTooltips ? ( {showNewVizTooltips ? (
<> <>
{options.tooltip.mode !== TooltipDisplayMode.None && ( {options.tooltip.mode !== TooltipDisplayMode.None && (
<TooltipPlugin2 <TooltipPlugin2

6
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@@ -190,6 +190,8 @@ export const StatusHistoryPanel = ({
); );
} }
const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
return ( return (
<TimelineChart <TimelineChart
theme={theme} theme={theme}
@@ -204,7 +206,7 @@ export const StatusHistoryPanel = ({
mode={TimelineMode.Samples} mode={TimelineMode.Samples}
> >
{(builder, alignedFrame) => { {(builder, alignedFrame) => {
if (oldConfig.current !== builder) { if (oldConfig.current !== builder && !showNewVizTooltips) {
oldConfig.current = addTooltipSupport({ oldConfig.current = addTooltipSupport({
config: builder, config: builder,
onUPlotClick, onUPlotClick,
@@ -228,7 +230,7 @@ export const StatusHistoryPanel = ({
disableCanvasRendering={true} disableCanvasRendering={true}
/> />
)} )}
{config.featureToggles.newVizTooltips ? ( {showNewVizTooltips ? (
<> <>
{options.tooltip.mode !== TooltipDisplayMode.None && ( {options.tooltip.mode !== TooltipDisplayMode.None && (
<TooltipPlugin2 <TooltipPlugin2

7
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@@ -1,6 +1,6 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { PanelProps, DataFrameType } from '@grafana/data'; import { PanelProps, DataFrameType, DashboardCursorSync } from '@grafana/data';
import { PanelDataErrorView } from '@grafana/runtime'; import { PanelDataErrorView } from '@grafana/runtime';
import { TooltipDisplayMode } from '@grafana/schema'; import { TooltipDisplayMode } from '@grafana/schema';
import { KeyboardPlugin, TooltipPlugin, TooltipPlugin2, usePanelContext, ZoomPlugin } from '@grafana/ui'; import { KeyboardPlugin, TooltipPlugin, TooltipPlugin2, usePanelContext, ZoomPlugin } from '@grafana/ui';
@@ -64,6 +64,7 @@ export const TimeSeriesPanel = ({
} }
const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations()); const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
return ( return (
<TimeSeries <TimeSeries
@@ -92,7 +93,7 @@ export const TimeSeriesPanel = ({
<KeyboardPlugin config={uplotConfig} /> <KeyboardPlugin config={uplotConfig} />
{options.tooltip.mode === TooltipDisplayMode.None || ( {options.tooltip.mode === TooltipDisplayMode.None || (
<> <>
{config.featureToggles.newVizTooltips ? ( {showNewVizTooltips ? (
<TooltipPlugin2 <TooltipPlugin2
config={uplotConfig} config={uplotConfig}
hoverMode={ hoverMode={
@@ -135,7 +136,7 @@ export const TimeSeriesPanel = ({
<AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} /> <AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} />
)} )}
{/*Enables annotations creation*/} {/*Enables annotations creation*/}
{!config.featureToggles.newVizTooltips ? ( {!showNewVizTooltips ? (
enableAnnotationCreation ? ( enableAnnotationCreation ? (
<AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}> <AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}>
{({ startAnnotating }) => { {({ startAnnotating }) => {

4
public/app/plugins/panel/trend/TrendPanel.tsx
View File

@@ -26,7 +26,7 @@ export const TrendPanel = ({
replaceVariables, replaceVariables,
id, id,
}: PanelProps<Options>) => { }: PanelProps<Options>) => {
const { sync, dataLinkPostProcessor } = usePanelContext(); const { dataLinkPostProcessor } = usePanelContext();
// Need to fallback to first number field if no xField is set in options otherwise panel crashes 😬 // Need to fallback to first number field if no xField is set in options otherwise panel crashes 😬
const trendXFieldName = const trendXFieldName =
options.xField ?? data.series[0].fields.find((field) => field.type === FieldType.number)?.name; options.xField ?? data.series[0].fields.find((field) => field.type === FieldType.number)?.name;
@@ -137,7 +137,6 @@ export const TrendPanel = ({
data={alignedDataFrame} data={alignedDataFrame}
mode={options.tooltip.mode} mode={options.tooltip.mode}
sortOrder={options.tooltip.sort} sortOrder={options.tooltip.sort}
sync={sync}
dataIdxs={dataIdxs} dataIdxs={dataIdxs}
seriesIdx={seriesIdx} seriesIdx={seriesIdx}
isPinned={isPinned} isPinned={isPinned}
@@ -152,7 +151,6 @@ export const TrendPanel = ({
config={uPlotConfig} config={uPlotConfig}
mode={options.tooltip.mode} mode={options.tooltip.mode}
sortOrder={options.tooltip.sort} sortOrder={options.tooltip.sort}
sync={sync}
timeZone={timeZone} timeZone={timeZone}
/> />
)} )}

1
public/app/plugins/panel/trend/TrendTooltip.tsx
View File

@@ -43,7 +43,6 @@ export const TrendTooltip = ({
data, data,
mode = TooltipDisplayMode.Single, mode = TooltipDisplayMode.Single,
sortOrder = SortOrder.None, sortOrder = SortOrder.None,
sync,
dataIdxs, dataIdxs,
seriesIdx, seriesIdx,
isPinned, isPinned,