IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Timeseries: fix outside range stale state (#49633)

Browse Source 
Co-authored-by: Todd Treece <todd.treece@grafana.com>
This commit is contained in:
Ryan McKinley 2022-05-25 14:19:56 -07:00 committed by GitHub
parent 1f85101787
commit df90393057
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@ -316,7 +316,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
/>
)}
<OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
</>
);
}}

2
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@ -118,7 +118,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
timeZone={timeZone}
renderTooltip={renderCustomTooltip}
/>
<OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
</>
);
}}

2
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@ -72,7 +72,7 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<TooltipPlugin data={alignedFrame} config={config} mode={options.tooltip.mode} timeZone={timeZone} />
<OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
</>
);
}}

2
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@ -138,7 +138,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
/>
)}
<OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
</>
);
}}

27
public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
View File

@ -1,34 +1,43 @@
import React, { useLayoutEffect, useRef } from 'react';
import uPlot from 'uplot';
import React, { useLayoutEffect, useRef, useState } from 'react';
import uPlot, { TypedArray, Scale } from 'uplot';
import { TimeRange, AbsoluteTimeRange } from '@grafana/data';
import { AbsoluteTimeRange } from '@grafana/data';
import { UPlotConfigBuilder, Button } from '@grafana/ui';
interface ThresholdControlsPluginProps {
config: UPlotConfigBuilder;
range: TimeRange;
onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
}
export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, range, onChangeTimeRange }) => {
export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, onChangeTimeRange }) => {
const plotInstance = useRef<uPlot>();
const [timevalues, setTimeValues] = useState<number[] | TypedArray>([]);
const [timeRange, setTimeRange] = useState<Scale | undefined>();
useLayoutEffect(() => {
config.addHook('init', (u) => {
plotInstance.current = u;
});
config.addHook('setScale', (u) => {
setTimeValues(u.data?.[0] ?? []);
setTimeRange(u.scales['x'] ?? undefined);
});
}, [config]);
const timevalues = plotInstance.current?.data?.[0];
if (!timevalues || !plotInstance.current || timevalues.length < 2 || !onChangeTimeRange) {
if (timevalues.length < 2 || !onChangeTimeRange) {
return null;
}
if (!timeRange || !timeRange.time || !timeRange.min || !timeRange.max!) {
return null;
}
// Time values are always sorted for uPlot to work
const first = timevalues[0];
const last = timevalues[timevalues.length - 1];
const fromX = range.from.valueOf();
const toX = range.to.valueOf();
const fromX = timeRange.min;
const toX = timeRange.max;
// (StartA <= EndB) and (EndA >= StartB)
if (first <= toX && last >= fromX) {