From 044380493e2bc3418c135c3fa2df4d1c85c95280 Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 17 Jul 2024 12:58:07 -0500 Subject: [PATCH] Revert "Explore: Pass the dataframes along with the time range of the data" (#90551) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Revert "Explore: Pass the dataframes along with the time range of the data (#…" This reverts commit 58285e37a24bcf1de323b2783e80cf66972a1fa4. --- .../components/rule-editor/VizWrapper.tsx | 6 +++++- .../app/features/explore/CustomContainer.tsx | 20 ++++++++++++++++--- public/app/features/explore/Explore.test.tsx | 4 ++++ public/app/features/explore/Explore.tsx | 10 ++++++---- .../features/explore/Graph/ExploreGraph.tsx | 20 ++++++++++++++++--- .../features/explore/Graph/GraphContainer.tsx | 7 +++---- .../explore/Logs/LogsVolumePanel.test.tsx | 4 ++-- .../features/explore/Logs/LogsVolumePanel.tsx | 5 ++--- .../explore/Logs/LogsVolumePanelList.tsx | 11 +++++----- 9 files changed, 61 insertions(+), 26 deletions(-) diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx index 5d804c1261d..62529714a59 100644 --- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx @@ -24,6 +24,10 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => { const isTimeSeriesData = isTimeSeriesFrames(data.series); const statusMessage = getStatusMessage(data); const thresholdsStyle = thresholdsType ? { mode: thresholdsType } : undefined; + const timeRange = { + from: data.timeRange.from.valueOf(), + to: data.timeRange.to.valueOf(), + }; return (
@@ -37,7 +41,7 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => { eventBus={appEvents} height={300} width={width} - timeRange={data.timeRange} + absoluteRange={timeRange} timeZone="browser" onChangeTime={() => {}} splitOpenFn={() => {}} diff --git a/public/app/features/explore/CustomContainer.tsx b/public/app/features/explore/CustomContainer.tsx index 26cf7dd14f4..1a9c1286693 100644 --- a/public/app/features/explore/CustomContainer.tsx +++ b/public/app/features/explore/CustomContainer.tsx @@ -1,4 +1,6 @@ -import { DataFrame, EventBus, LoadingState, SplitOpen, TimeRange } from '@grafana/data'; +import { useMemo } from 'react'; + +import { AbsoluteTimeRange, DataFrame, dateTime, EventBus, LoadingState, SplitOpen } from '@grafana/data'; import { PanelRenderer } from '@grafana/runtime'; import { PanelChrome, PanelContext, PanelContextProvider } from '@grafana/ui'; @@ -12,7 +14,7 @@ export interface Props { timeZone: string; pluginId: string; frames: DataFrame[]; - timeRange: TimeRange; + absoluteRange: AbsoluteTimeRange; state: LoadingState; splitOpenFn: SplitOpen; eventBus: EventBus; @@ -25,10 +27,22 @@ export function CustomContainer({ state, pluginId, frames, - timeRange, + absoluteRange, splitOpenFn, eventBus, }: Props) { + const timeRange = useMemo( + () => ({ + from: dateTime(absoluteRange.from), + to: dateTime(absoluteRange.to), + raw: { + from: dateTime(absoluteRange.from), + to: dateTime(absoluteRange.to), + }, + }), + [absoluteRange.from, absoluteRange.to] + ); + const plugin = getPanelPluginMeta(pluginId); const dataLinkPostProcessor = useExploreDataLinkPostProcessor(splitOpenFn, timeRange); diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index de960e3e561..8cf7d3382e7 100644 --- a/public/app/features/explore/Explore.test.tsx +++ b/public/app/features/explore/Explore.test.tsx @@ -83,6 +83,10 @@ const dummyProps: Props = { syncedTimes: false, updateTimeRange: jest.fn(), graphResult: [], + absoluteRange: { + from: 0, + to: 0, + }, timeZone: 'UTC', queryResponse: makeEmptyQueryResponse(LoadingState.NotStarted), addQueryRow: jest.fn(), diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 8345f679d69..7bf13532be5 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -336,7 +336,7 @@ export class Explore extends PureComponent { } renderCustom(width: number) { - const { timeZone, queryResponse, eventBus } = this.props; + const { timeZone, queryResponse, absoluteRange, eventBus } = this.props; const groupedByPlugin = groupBy(queryResponse?.customFrames, 'meta.preferredVisualisationPluginId'); @@ -349,7 +349,7 @@ export class Explore extends PureComponent { pluginId={pluginId} frames={frames} state={queryResponse.state} - timeRange={queryResponse.timeRange} + absoluteRange={absoluteRange} height={400} width={width} splitOpenFn={this.onSplitOpen(pluginId)} @@ -361,7 +361,7 @@ export class Explore extends PureComponent { } renderGraphPanel(width: number) { - const { graphResult, timeZone, queryResponse, showFlameGraph } = this.props; + const { graphResult, absoluteRange, timeZone, queryResponse, showFlameGraph } = this.props; return ( @@ -369,7 +369,7 @@ export class Explore extends PureComponent { data={graphResult!} height={showFlameGraph ? 180 : 400} width={width} - timeRange={queryResponse.timeRange} + absoluteRange={absoluteRange} timeZone={timeZone} onChangeTime={this.onUpdateTimeRange} annotations={queryResponse.annotations} @@ -676,6 +676,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { showTable, showTrace, showCustom, + absoluteRange, queryResponse, showNodeGraph, showFlameGraph, @@ -696,6 +697,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { isLive, graphResult, logsResult: logsResult ?? undefined, + absoluteRange, queryResponse, syncedTimes, timeZone, diff --git a/public/app/features/explore/Graph/ExploreGraph.tsx b/public/app/features/explore/Graph/ExploreGraph.tsx index fa4ffa3a658..221ee9c1f37 100644 --- a/public/app/features/explore/Graph/ExploreGraph.tsx +++ b/public/app/features/explore/Graph/ExploreGraph.tsx @@ -1,6 +1,7 @@ import { identity } from 'lodash'; import { useEffect, useMemo, useRef, useState } from 'react'; import * as React from 'react'; +import { usePrevious } from 'react-use'; import { AbsoluteTimeRange, @@ -8,6 +9,7 @@ import { createFieldConfigRegistry, DashboardCursorSync, DataFrame, + dateTime, EventBus, FieldColorModeId, FieldConfigSource, @@ -15,7 +17,6 @@ import { LoadingState, SplitOpen, ThresholdsConfig, - TimeRange, } from '@grafana/data'; import { PanelRenderer } from '@grafana/runtime'; import { @@ -43,7 +44,7 @@ interface Props { data: DataFrame[]; height: number; width: number; - timeRange: TimeRange; + absoluteRange: AbsoluteTimeRange; timeZone: TimeZone; loadingState: LoadingState; annotations?: DataFrame[]; @@ -66,7 +67,7 @@ export function ExploreGraph({ height, width, timeZone, - timeRange, + absoluteRange, onChangeTime, loadingState, annotations, @@ -83,6 +84,19 @@ export function ExploreGraph({ toggleLegendRef, }: Props) { const theme = useTheme2(); + const previousTimeRange = usePrevious(absoluteRange); + const baseTimeRange = loadingState === LoadingState.Loading && previousTimeRange ? previousTimeRange : absoluteRange; + const timeRange = useMemo( + () => ({ + from: dateTime(baseTimeRange.from), + to: dateTime(baseTimeRange.to), + raw: { + from: dateTime(baseTimeRange.from), + to: dateTime(baseTimeRange.to), + }, + }), + [baseTimeRange.from, baseTimeRange.to] + ); const fieldConfigRegistry = useMemo( () => createFieldConfigRegistry(getGraphFieldConfig(defaultGraphConfig), 'Explore'), diff --git a/public/app/features/explore/Graph/GraphContainer.tsx b/public/app/features/explore/Graph/GraphContainer.tsx index c0a07faf61f..e844073f7ab 100644 --- a/public/app/features/explore/Graph/GraphContainer.tsx +++ b/public/app/features/explore/Graph/GraphContainer.tsx @@ -11,7 +11,6 @@ import { LoadingState, ThresholdsConfig, GrafanaTheme2, - TimeRange, } from '@grafana/data'; import { GraphThresholdsStyleConfig, @@ -39,7 +38,7 @@ interface Props extends Pick { data: DataFrame[]; annotations?: DataFrame[]; eventBus: EventBus; - timeRange: TimeRange; + absoluteRange: AbsoluteTimeRange; timeZone: TimeZone; onChangeTime: (absoluteRange: AbsoluteTimeRange) => void; splitOpenFn: SplitOpen; @@ -53,7 +52,7 @@ export const GraphContainer = ({ eventBus, height, width, - timeRange, + absoluteRange, timeZone, annotations, onChangeTime, @@ -113,7 +112,7 @@ export const GraphContainer = ({ data={slicedData} height={innerHeight} width={innerWidth} - timeRange={timeRange} + absoluteRange={absoluteRange} onChangeTime={onChangeTime} timeZone={timeZone} annotations={annotations} diff --git a/public/app/features/explore/Logs/LogsVolumePanel.test.tsx b/public/app/features/explore/Logs/LogsVolumePanel.test.tsx index 1959295cb58..bc7629f2401 100644 --- a/public/app/features/explore/Logs/LogsVolumePanel.test.tsx +++ b/public/app/features/explore/Logs/LogsVolumePanel.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import { DataQueryResponse, LoadingState, EventBusSrv, dateTime } from '@grafana/data'; +import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data'; import { LogsVolumePanel } from './LogsVolumePanel'; @@ -14,7 +14,7 @@ jest.mock('../Graph/ExploreGraph', () => { function renderPanel(logsVolumeData: DataQueryResponse) { render( {}} width={100} diff --git a/public/app/features/explore/Logs/LogsVolumePanel.tsx b/public/app/features/explore/Logs/LogsVolumePanel.tsx index 16f54444aae..320d7acfaea 100644 --- a/public/app/features/explore/Logs/LogsVolumePanel.tsx +++ b/public/app/features/explore/Logs/LogsVolumePanel.tsx @@ -10,7 +10,6 @@ import { EventBus, GrafanaTheme2, DataFrame, - TimeRange, } from '@grafana/data'; import { TimeZone } from '@grafana/schema'; import { Icon, SeriesVisibilityChangeMode, Tooltip, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui'; @@ -21,7 +20,7 @@ import { ExploreGraph } from '../Graph/ExploreGraph'; type Props = { logsVolumeData: DataQueryResponse; allLogsVolumeMaximum: number; - timeRange: TimeRange; + absoluteRange: AbsoluteTimeRange; timeZone: TimeZone; splitOpen: SplitOpen; width: number; @@ -87,7 +86,7 @@ export function LogsVolumePanel(props: Props) { data={logsVolumeData.data} height={height} width={width - spacing * 2} - timeRange={props.timeRange} + absoluteRange={props.absoluteRange} onChangeTime={onUpdateTimeRange} timeZone={timeZone} splitOpenFn={splitOpen} diff --git a/public/app/features/explore/Logs/LogsVolumePanelList.tsx b/public/app/features/explore/Logs/LogsVolumePanelList.tsx index a25a02b29dc..7cdecfe9f08 100644 --- a/public/app/features/explore/Logs/LogsVolumePanelList.tsx +++ b/public/app/features/explore/Logs/LogsVolumePanelList.tsx @@ -8,12 +8,10 @@ import { DataFrame, DataQueryResponse, DataTopic, - dateTime, EventBus, GrafanaTheme2, LoadingState, SplitOpen, - TimeRange, TimeZone, } from '@grafana/data'; import { Button, InlineField, Alert, useStyles2, SeriesVisibilityChangeMode } from '@grafana/ui'; @@ -88,9 +86,10 @@ export const LogsVolumePanelList = ({ const timeoutError = isTimeoutErrorResponse(logsVolumeData); - const from = dateTime(Math.max(absoluteRange.from, allLogsVolumeMaximumRange.from)); - const to = dateTime(Math.min(absoluteRange.to, allLogsVolumeMaximumRange.to)); - const visibleRange: TimeRange = { from, to, raw: { from, to } }; + const visibleRange = { + from: Math.max(absoluteRange.from, allLogsVolumeMaximumRange.from), + to: Math.min(absoluteRange.to, allLogsVolumeMaximumRange.to), + }; if (logsVolumeData?.state === LoadingState.Loading) { return Loading...; @@ -127,7 +126,7 @@ export const LogsVolumePanelList = ({