Explore: Pass the dataframes along with the time range of the data (#90259)

* Use data time range for rendering instead of selected range from the picker

* Update CustomContainer to use data time range

* Update test
This commit is contained in:
Piotr Jamróz 2024-07-17 11:05:09 +02:00 committed by GitHub
parent c41f3394a4
commit 58285e37a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 26 additions and 61 deletions

View File

@ -24,10 +24,6 @@ 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 (
<div className={styles.wrapper}>
@ -41,7 +37,7 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => {
eventBus={appEvents}
height={300}
width={width}
absoluteRange={timeRange}
timeRange={data.timeRange}
timeZone="browser"
onChangeTime={() => {}}
splitOpenFn={() => {}}

View File

@ -1,6 +1,4 @@
import { useMemo } from 'react';
import { AbsoluteTimeRange, DataFrame, dateTime, EventBus, LoadingState, SplitOpen } from '@grafana/data';
import { DataFrame, EventBus, LoadingState, SplitOpen, TimeRange } from '@grafana/data';
import { PanelRenderer } from '@grafana/runtime';
import { PanelChrome, PanelContext, PanelContextProvider } from '@grafana/ui';
@ -14,7 +12,7 @@ export interface Props {
timeZone: string;
pluginId: string;
frames: DataFrame[];
absoluteRange: AbsoluteTimeRange;
timeRange: TimeRange;
state: LoadingState;
splitOpenFn: SplitOpen;
eventBus: EventBus;
@ -27,22 +25,10 @@ export function CustomContainer({
state,
pluginId,
frames,
absoluteRange,
timeRange,
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);

View File

@ -83,10 +83,6 @@ const dummyProps: Props = {
syncedTimes: false,
updateTimeRange: jest.fn(),
graphResult: [],
absoluteRange: {
from: 0,
to: 0,
},
timeZone: 'UTC',
queryResponse: makeEmptyQueryResponse(LoadingState.NotStarted),
addQueryRow: jest.fn(),

View File

@ -336,7 +336,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
}
renderCustom(width: number) {
const { timeZone, queryResponse, absoluteRange, eventBus } = this.props;
const { timeZone, queryResponse, eventBus } = this.props;
const groupedByPlugin = groupBy(queryResponse?.customFrames, 'meta.preferredVisualisationPluginId');
@ -349,7 +349,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
pluginId={pluginId}
frames={frames}
state={queryResponse.state}
absoluteRange={absoluteRange}
timeRange={queryResponse.timeRange}
height={400}
width={width}
splitOpenFn={this.onSplitOpen(pluginId)}
@ -361,7 +361,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
}
renderGraphPanel(width: number) {
const { graphResult, absoluteRange, timeZone, queryResponse, showFlameGraph } = this.props;
const { graphResult, timeZone, queryResponse, showFlameGraph } = this.props;
return (
<ContentOutlineItem panelId="Graph" title="Graph" icon="graph-bar">
@ -369,7 +369,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
data={graphResult!}
height={showFlameGraph ? 180 : 400}
width={width}
absoluteRange={absoluteRange}
timeRange={queryResponse.timeRange}
timeZone={timeZone}
onChangeTime={this.onUpdateTimeRange}
annotations={queryResponse.annotations}
@ -676,7 +676,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
showTable,
showTrace,
showCustom,
absoluteRange,
queryResponse,
showNodeGraph,
showFlameGraph,
@ -697,7 +696,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
isLive,
graphResult,
logsResult: logsResult ?? undefined,
absoluteRange,
queryResponse,
syncedTimes,
timeZone,

View File

@ -1,7 +1,6 @@
import { identity } from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
import * as React from 'react';
import { usePrevious } from 'react-use';
import {
AbsoluteTimeRange,
@ -9,7 +8,6 @@ import {
createFieldConfigRegistry,
DashboardCursorSync,
DataFrame,
dateTime,
EventBus,
FieldColorModeId,
FieldConfigSource,
@ -17,6 +15,7 @@ import {
LoadingState,
SplitOpen,
ThresholdsConfig,
TimeRange,
} from '@grafana/data';
import { PanelRenderer } from '@grafana/runtime';
import {
@ -44,7 +43,7 @@ interface Props {
data: DataFrame[];
height: number;
width: number;
absoluteRange: AbsoluteTimeRange;
timeRange: TimeRange;
timeZone: TimeZone;
loadingState: LoadingState;
annotations?: DataFrame[];
@ -67,7 +66,7 @@ export function ExploreGraph({
height,
width,
timeZone,
absoluteRange,
timeRange,
onChangeTime,
loadingState,
annotations,
@ -84,19 +83,6 @@ 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'),

View File

@ -11,6 +11,7 @@ import {
LoadingState,
ThresholdsConfig,
GrafanaTheme2,
TimeRange,
} from '@grafana/data';
import {
GraphThresholdsStyleConfig,
@ -38,7 +39,7 @@ interface Props extends Pick<PanelChromeProps, 'statusMessage'> {
data: DataFrame[];
annotations?: DataFrame[];
eventBus: EventBus;
absoluteRange: AbsoluteTimeRange;
timeRange: TimeRange;
timeZone: TimeZone;
onChangeTime: (absoluteRange: AbsoluteTimeRange) => void;
splitOpenFn: SplitOpen;
@ -52,7 +53,7 @@ export const GraphContainer = ({
eventBus,
height,
width,
absoluteRange,
timeRange,
timeZone,
annotations,
onChangeTime,
@ -112,7 +113,7 @@ export const GraphContainer = ({
data={slicedData}
height={innerHeight}
width={innerWidth}
absoluteRange={absoluteRange}
timeRange={timeRange}
onChangeTime={onChangeTime}
timeZone={timeZone}
annotations={annotations}

View File

@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react';
import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data';
import { DataQueryResponse, LoadingState, EventBusSrv, dateTime } from '@grafana/data';
import { LogsVolumePanel } from './LogsVolumePanel';
@ -14,7 +14,7 @@ jest.mock('../Graph/ExploreGraph', () => {
function renderPanel(logsVolumeData: DataQueryResponse) {
render(
<LogsVolumePanel
absoluteRange={{ from: 0, to: 1 }}
timeRange={{ from: dateTime(0), to: dateTime(1), raw: { from: dateTime(0), to: dateTime(1) } }}
timeZone="timeZone"
splitOpen={() => {}}
width={100}

View File

@ -10,6 +10,7 @@ import {
EventBus,
GrafanaTheme2,
DataFrame,
TimeRange,
} from '@grafana/data';
import { TimeZone } from '@grafana/schema';
import { Icon, SeriesVisibilityChangeMode, Tooltip, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
@ -20,7 +21,7 @@ import { ExploreGraph } from '../Graph/ExploreGraph';
type Props = {
logsVolumeData: DataQueryResponse;
allLogsVolumeMaximum: number;
absoluteRange: AbsoluteTimeRange;
timeRange: TimeRange;
timeZone: TimeZone;
splitOpen: SplitOpen;
width: number;
@ -86,7 +87,7 @@ export function LogsVolumePanel(props: Props) {
data={logsVolumeData.data}
height={height}
width={width - spacing * 2}
absoluteRange={props.absoluteRange}
timeRange={props.timeRange}
onChangeTime={onUpdateTimeRange}
timeZone={timeZone}
splitOpenFn={splitOpen}

View File

@ -8,10 +8,12 @@ import {
DataFrame,
DataQueryResponse,
DataTopic,
dateTime,
EventBus,
GrafanaTheme2,
LoadingState,
SplitOpen,
TimeRange,
TimeZone,
} from '@grafana/data';
import { Button, InlineField, Alert, useStyles2, SeriesVisibilityChangeMode } from '@grafana/ui';
@ -86,10 +88,9 @@ export const LogsVolumePanelList = ({
const timeoutError = isTimeoutErrorResponse(logsVolumeData);
const visibleRange = {
from: Math.max(absoluteRange.from, allLogsVolumeMaximumRange.from),
to: Math.min(absoluteRange.to, allLogsVolumeMaximumRange.to),
};
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 } };
if (logsVolumeData?.state === LoadingState.Loading) {
return <span>Loading...</span>;
@ -126,7 +127,7 @@ export const LogsVolumePanelList = ({
<LogsVolumePanel
toggleLegendRef={toggleLegendRef}
key={index}
absoluteRange={visibleRange}
timeRange={visibleRange}
allLogsVolumeMaximum={allLogsVolumeMaximumValue}
width={width}
logsVolumeData={logsVolumeData}