mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
c41f3394a4
commit
58285e37a2
@ -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={() => {}}
|
||||
|
@ -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);
|
||||
|
@ -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(),
|
||||
|
@ -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,
|
||||
|
@ -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'),
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user