From bcabff77df79c54f83e2ba74ffe3e9808d204c90 Mon Sep 17 00:00:00 2001 From: Kristina Durivage Date: Mon, 21 Oct 2024 14:07:59 -0500 Subject: [PATCH] Use hideFrom in GraphNG to hide fields if value is defined. Remove other filtering from timeline chart --- .../app/core/components/GraphNG/GraphNG.tsx | 4 +++- .../components/TimelineChart/utils.test.ts | 19 +++++++++++++------ .../core/components/TimelineChart/utils.ts | 9 +++++---- .../state-timeline/StateTimelinePanel.tsx | 5 +++-- .../status-history/StatusHistoryPanel.tsx | 5 +++-- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx index d2e1e83f4cd..9bccb792e44 100644 --- a/public/app/core/components/GraphNG/GraphNG.tsx +++ b/public/app/core/components/GraphNG/GraphNG.tsx @@ -167,7 +167,9 @@ export class GraphNG extends Component { // filter join field and fields.y alignedFrameFinal = { ...alignedFrame, - fields: alignedFrame.fields.filter((field, i) => i === 0 || fields.y(field, alignedFrame, [alignedFrame])), + fields: alignedFrame.fields + .filter((field, i) => i === 0 || fields.y(field, alignedFrame, [alignedFrame])) + .filter((field) => field.config.custom?.hideFrom?.viz !== true), }; } diff --git a/public/app/core/components/TimelineChart/utils.test.ts b/public/app/core/components/TimelineChart/utils.test.ts index a3c181ef42b..de4b2080acb 100644 --- a/public/app/core/components/TimelineChart/utils.test.ts +++ b/public/app/core/components/TimelineChart/utils.test.ts @@ -8,6 +8,7 @@ import { DataFrame, fieldMatchers, FieldMatcherID, + FieldConfigSource, } from '@grafana/data'; import { LegendDisplayMode, VizLegendOptions } from '@grafana/schema'; @@ -33,6 +34,12 @@ describe('prepare timeline graph', () => { to: dateTime(3), }, }; + + const fieldConfig: FieldConfigSource = { + defaults: {}, + overrides: [], + }; + it('errors with no time fields', () => { const frames = [ toDataFrame({ @@ -42,7 +49,7 @@ describe('prepare timeline graph', () => { ], }), ]; - const info = prepareTimelineFields(frames, true, timeRange, theme); + const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig); expect(info.warn).toEqual('Data does not have a time field'); }); @@ -55,7 +62,7 @@ describe('prepare timeline graph', () => { ], }), ]; - const info = prepareTimelineFields(frames, true, timeRange, theme); + const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig); expect(info.warn).toEqual('No graphable fields'); }); @@ -68,7 +75,7 @@ describe('prepare timeline graph', () => { ], }), ]; - const info = prepareTimelineFields(frames, true, timeRange, theme); + const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig); expect(info.warn).toBeUndefined(); const out = info.frames![0]; @@ -97,7 +104,7 @@ describe('prepare timeline graph', () => { ], }), ]; - const result = prepareTimelineFields(frames, true, timeRange, theme); + const result = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig); expect(result.frames?.[0].fields[0].values).toEqual([1, 2, 3, 4]); }); @@ -154,7 +161,7 @@ describe('prepare timeline graph', () => { }), ]; - const info = prepareTimelineFields(frames, true, timeRange2, theme); + const info = prepareTimelineFields(frames, true, timeRange2, theme, fieldConfig); let joined = preparePlotFrame( info.frames!, @@ -245,7 +252,7 @@ describe('prepare timeline graph', () => { }), ]; - const info = prepareTimelineFields(frames, true, timeRange2, theme); + const info = prepareTimelineFields(frames, true, timeRange2, theme, fieldConfig); let joined = preparePlotFrame( info.frames!, diff --git a/public/app/core/components/TimelineChart/utils.ts b/public/app/core/components/TimelineChart/utils.ts index 26f1227ebe0..d29735703e2 100644 --- a/public/app/core/components/TimelineChart/utils.ts +++ b/public/app/core/components/TimelineChart/utils.ts @@ -18,7 +18,9 @@ import { outerJoinDataFrames, ValueMapping, ThresholdsConfig, + FieldConfigSource, } from '@grafana/data'; +import { decoupleHideFromState } from '@grafana/data/src/field/fieldState'; import { maybeSortFrame, NULL_RETAIN } from '@grafana/data/src/transformations/transformers/joinDataFrames'; import { applyNullInsertThreshold } from '@grafana/data/src/transformations/transformers/nulls/nullInsertThreshold'; import { nullToValue } from '@grafana/data/src/transformations/transformers/nulls/nullToValue'; @@ -296,13 +298,15 @@ export function prepareTimelineFields( series: DataFrame[] | undefined, mergeValues: boolean, timeRange: TimeRange, - theme: GrafanaTheme2 + theme: GrafanaTheme2, + fieldConfig: FieldConfigSource ): { frames?: DataFrame[]; warn?: string } { if (!series?.length) { return { warn: 'No data in response' }; } cacheFieldDisplayNames(series); + decoupleHideFromState(series, fieldConfig); let hasTimeseries = false; const frames: DataFrame[] = []; @@ -375,9 +379,6 @@ export function prepareTimelineFields( const fields: Field[] = []; for (let field of frame.fields) { - if (field.config.custom?.hideFrom?.viz) { - continue; - } switch (field.type) { case FieldType.time: isTimeseries = true; diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx index df2df2c811c..c76ca6bcbfd 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx @@ -104,6 +104,7 @@ export const StateTimelinePanel = ({ height, replaceVariables, onChangeTimeRange, + fieldConfig, }: TimelinePanelProps) => { const theme = useTheme2(); @@ -113,8 +114,8 @@ export const StateTimelinePanel = ({ const cursorSync = sync?.() ?? DashboardCursorSync.Off; const { frames, warn } = useMemo( - () => prepareTimelineFields(data.series, options.mergeValues ?? true, timeRange, theme), - [data.series, options.mergeValues, timeRange, theme] + () => prepareTimelineFields(data.series, options.mergeValues ?? true, timeRange, theme, fieldConfig), + [data.series, options.mergeValues, timeRange, theme, fieldConfig] ); const { paginatedFrames, paginationRev, paginationElement, paginationHeight } = usePagination( diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx index 5f09c96ca52..33f0b30fdae 100644 --- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx +++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx @@ -31,6 +31,7 @@ export const StatusHistoryPanel = ({ height, replaceVariables, onChangeTimeRange, + fieldConfig, }: TimelinePanelProps) => { const theme = useTheme2(); @@ -42,8 +43,8 @@ export const StatusHistoryPanel = ({ const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations()); const { frames, warn } = useMemo( - () => prepareTimelineFields(data.series, false, timeRange, theme), - [data.series, timeRange, theme] + () => prepareTimelineFields(data.series, false, timeRange, theme, fieldConfig), + [data.series, timeRange, theme, fieldConfig] ); const legendItems = useMemo(