From ce857c2680d9e77fd49745e0b63a726e4a7c17ff Mon Sep 17 00:00:00 2001 From: Brendan O'Handley Date: Thu, 10 Oct 2024 11:49:24 -0500 Subject: [PATCH] Explore metrics: set options directly because of scenes error when options not set (#94284) * scenes error when options not set * add all of the options that are updated in onOptionsChange * add options to all the other places we are building timeseries panels * Update public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * remove activation handlers and unused code * Update public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * Update public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts Co-authored-by: Sven Grossmann --------- Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> Co-authored-by: Sven Grossmann --- .../graph-builders/percentiles.ts | 8 ++++++-- .../graph-builders/simple.ts | 3 +++ .../trails/Breakdown/LabelBreakdownScene.tsx | 19 ++++++++----------- .../features/trails/Breakdown/panelConfigs.ts | 8 -------- 4 files changed, 17 insertions(+), 21 deletions(-) delete mode 100644 public/app/features/trails/Breakdown/panelConfigs.ts diff --git a/public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts b/public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts index 9f40180d68d..36578e56ffb 100644 --- a/public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts +++ b/public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts @@ -1,10 +1,14 @@ import { PanelBuilders } from '@grafana/scenes'; +import { SortOrder } from '@grafana/schema'; +import { TooltipDisplayMode } from '@grafana/ui'; import { CommonVizParams } from './types'; export function percentilesGraphBuilder({ title, unit }: CommonVizParams) { - return PanelBuilders.timeseries() // + return PanelBuilders.timeseries() .setTitle(title) .setUnit(unit) - .setCustomFieldConfig('fillOpacity', 9); + .setCustomFieldConfig('fillOpacity', 9) + .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending }) + .setOption('legend', { showLegend: false }); } diff --git a/public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts b/public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts index 5eab7d70bfd..d04766f23e4 100644 --- a/public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts +++ b/public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts @@ -1,4 +1,6 @@ import { PanelBuilders } from '@grafana/scenes'; +import { SortOrder } from '@grafana/schema'; +import { TooltipDisplayMode } from '@grafana/ui'; import { CommonVizParams } from './types'; @@ -7,5 +9,6 @@ export function simpleGraphBuilder({ title, unit }: CommonVizParams) { .setTitle(title) .setUnit(unit) .setOption('legend', { showLegend: false }) + .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending }) .setCustomFieldConfig('fillOpacity', 9); } diff --git a/public/app/features/trails/Breakdown/LabelBreakdownScene.tsx b/public/app/features/trails/Breakdown/LabelBreakdownScene.tsx index 26b04788dda..b908c25f801 100644 --- a/public/app/features/trails/Breakdown/LabelBreakdownScene.tsx +++ b/public/app/features/trails/Breakdown/LabelBreakdownScene.tsx @@ -21,7 +21,7 @@ import { VariableDependencyConfig, VizPanel, } from '@grafana/scenes'; -import { DataQuery } from '@grafana/schema'; +import { DataQuery, SortOrder, TooltipDisplayMode } from '@grafana/schema'; import { Button, Field, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; import { Trans } from 'app/core/internationalization'; @@ -39,7 +39,6 @@ import { AddToFiltersGraphAction } from './AddToFiltersGraphAction'; import { BreakdownSearchReset, BreakdownSearchScene } from './BreakdownSearchScene'; import { ByFrameRepeater } from './ByFrameRepeater'; import { LayoutSwitcher } from './LayoutSwitcher'; -import { breakdownPanelOptions } from './panelConfigs'; import { BreakdownLayoutChangeCallback, BreakdownLayoutType } from './types'; import { getLabelOptions } from './utils'; import { BreakdownAxisChangeEvent, yAxisSyncBehavior } from './yAxisSyncBehavior'; @@ -300,6 +299,8 @@ export function buildAllLayout( const unit = queryDef.unit; const vizPanel = PanelBuilders.timeseries() + .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending }) + .setOption('legend', { showLegend: false }) .setTitle(option.label!) .setData( new SceneQueryRunner({ @@ -319,10 +320,6 @@ export function buildAllLayout( .setBehaviors([fixLegendForUnspecifiedLabelValueBehavior]) .build(); - vizPanel.addActivationHandler(() => { - vizPanel.onOptionsChange(breakdownPanelOptions); - }); - children.push( new SceneCSSGridItem({ $behaviors: [yAxisSyncBehavior], @@ -382,10 +379,6 @@ function buildNormalLayout( isHidden, }); - vizPanel.addActivationHandler(() => { - vizPanel.onOptionsChange(breakdownPanelOptions); - }); - return item; } @@ -409,7 +402,11 @@ function buildNormalLayout( children: [ new SceneFlexItem({ minHeight: 300, - body: PanelBuilders.timeseries().setTitle('$metric').build(), + body: PanelBuilders.timeseries() + .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending }) + .setOption('legend', { showLegend: false }) + .setTitle('$metric') + .build(), }), ], }), diff --git a/public/app/features/trails/Breakdown/panelConfigs.ts b/public/app/features/trails/Breakdown/panelConfigs.ts deleted file mode 100644 index 23d796fdf8e..00000000000 --- a/public/app/features/trails/Breakdown/panelConfigs.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { PanelOptionsBuilders } from '@grafana/scenes'; -import { SortOrder } from '@grafana/schema/dist/esm/index'; -import { TooltipDisplayMode } from '@grafana/ui'; - -export const breakdownPanelOptions = PanelOptionsBuilders.timeseries() - .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending }) - .setOption('legend', { showLegend: false }) - .build();