Remove crosshair synchronization to avoid display bug. (#33660)
Fix broken snapshot. Fix busted type.
This commit is contained in:
parent
06d7ebef8f
commit
062cfc7efe
|
@ -29,7 +29,6 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
|
|||
}
|
||||
>
|
||||
<FlexibleEuiSeriesChart
|
||||
crosshairValue={150}
|
||||
height={200}
|
||||
margins={
|
||||
Object {
|
||||
|
@ -39,7 +38,6 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
|
|||
"top": 10,
|
||||
}
|
||||
}
|
||||
onCrosshairUpdate={[MockFunction]}
|
||||
width={500}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
xType="time"
|
||||
|
@ -201,7 +199,6 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
|
|||
}
|
||||
>
|
||||
<FlexibleEuiSeriesChart
|
||||
crosshairValue={150}
|
||||
height={200}
|
||||
margins={
|
||||
Object {
|
||||
|
@ -211,7 +208,6 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
|
|||
"top": 10,
|
||||
}
|
||||
}
|
||||
onCrosshairUpdate={[MockFunction]}
|
||||
stackBy="y"
|
||||
width={500}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
|
|
|
@ -59,13 +59,11 @@ describe('MonitorCharts component', () => {
|
|||
const component = shallowWithIntl(
|
||||
<MonitorCharts
|
||||
checkDomainLimits={[0, 75]}
|
||||
crosshairLocation={150}
|
||||
danger="dangerColor"
|
||||
durationDomainLimits={[0, 75]}
|
||||
monitorChartData={chartResponse.monitorChartsData}
|
||||
primary="primaryColor"
|
||||
secondary="secondaryColor"
|
||||
updateCrosshairLocation={jest.fn()}
|
||||
/>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
|
|
|
@ -29,24 +29,20 @@ import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/h
|
|||
|
||||
interface MonitorChartsProps {
|
||||
checkDomainLimits: number[];
|
||||
crosshairLocation: number;
|
||||
danger: string;
|
||||
durationDomainLimits: number[];
|
||||
monitorChartData: MonitorChart;
|
||||
primary: string;
|
||||
secondary: string;
|
||||
updateCrosshairLocation: (crosshairLocation: number) => void;
|
||||
}
|
||||
|
||||
export const MonitorCharts = ({
|
||||
checkDomainLimits,
|
||||
crosshairLocation,
|
||||
danger,
|
||||
durationDomainLimits,
|
||||
monitorChartData: { durationArea, durationLine, status },
|
||||
primary,
|
||||
secondary,
|
||||
updateCrosshairLocation,
|
||||
}: MonitorChartsProps) => (
|
||||
<Fragment>
|
||||
<EuiFlexGroup>
|
||||
|
@ -60,7 +56,6 @@ export const MonitorCharts = ({
|
|||
/>
|
||||
</h4>
|
||||
</EuiTitle>
|
||||
|
||||
<EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
|
||||
<EuiSeriesChart
|
||||
margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
|
||||
|
@ -69,8 +64,6 @@ export const MonitorCharts = ({
|
|||
xType={EuiSeriesChartUtils.SCALE.TIME}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
yDomain={durationDomainLimits}
|
||||
crosshairValue={crosshairLocation}
|
||||
onCrosshairUpdate={updateCrosshairLocation}
|
||||
>
|
||||
<EuiAreaSeries
|
||||
color={secondary}
|
||||
|
@ -120,8 +113,6 @@ export const MonitorCharts = ({
|
|||
xType={EuiSeriesChartUtils.SCALE.TIME}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
stackBy="y"
|
||||
crosshairValue={crosshairLocation}
|
||||
onCrosshairUpdate={updateCrosshairLocation}
|
||||
yDomain={checkDomainLimits}
|
||||
>
|
||||
<EuiAreaSeries
|
||||
|
|
|
@ -17,72 +17,56 @@ interface MonitorChartsProps {
|
|||
monitorId: string;
|
||||
}
|
||||
|
||||
interface MonitorChartsState {
|
||||
crosshairLocation: number;
|
||||
}
|
||||
|
||||
type Props = MonitorChartsProps & UptimeCommonProps;
|
||||
|
||||
export class MonitorChartsQuery extends React.Component<Props, MonitorChartsState> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { crosshairLocation: 0 };
|
||||
}
|
||||
export const MonitorChartsQuery = ({
|
||||
colors: { primary, secondary, danger },
|
||||
dateRangeStart,
|
||||
dateRangeEnd,
|
||||
monitorId,
|
||||
autorefreshIsPaused,
|
||||
autorefreshInterval,
|
||||
}: Props) => {
|
||||
return (
|
||||
<Query
|
||||
pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
|
||||
query={createGetMonitorChartsQuery}
|
||||
variables={{ dateRangeStart, dateRangeEnd, monitorId }}
|
||||
>
|
||||
{({ loading, error, data }) => {
|
||||
if (loading) {
|
||||
return i18n.translate('xpack.uptime.monitorCharts.loadingMessage', {
|
||||
defaultMessage: 'Loading…',
|
||||
});
|
||||
}
|
||||
if (error) {
|
||||
return i18n.translate('xpack.uptime.monitorCharts.errorMessage', {
|
||||
values: { message: error.message },
|
||||
defaultMessage: 'Error {message}',
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
colors: { primary, secondary, danger },
|
||||
dateRangeStart,
|
||||
dateRangeEnd,
|
||||
monitorId,
|
||||
autorefreshIsPaused,
|
||||
autorefreshInterval,
|
||||
} = this.props;
|
||||
return (
|
||||
<Query
|
||||
pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
|
||||
query={createGetMonitorChartsQuery}
|
||||
variables={{ dateRangeStart, dateRangeEnd, monitorId }}
|
||||
>
|
||||
{({ loading, error, data }) => {
|
||||
if (loading) {
|
||||
return i18n.translate('xpack.uptime.monitorCharts.loadingMessage', {
|
||||
defaultMessage: 'Loading…',
|
||||
});
|
||||
}
|
||||
if (error) {
|
||||
return i18n.translate('xpack.uptime.monitorCharts.errorMessage', {
|
||||
values: { message: error.message },
|
||||
defaultMessage: 'Error {message}',
|
||||
});
|
||||
}
|
||||
const {
|
||||
monitorChartsData,
|
||||
monitorChartsData: { durationMaxValue, statusMaxCount },
|
||||
}: { monitorChartsData: MonitorChart } = data;
|
||||
|
||||
const {
|
||||
monitorChartsData,
|
||||
monitorChartsData: { durationMaxValue, statusMaxCount },
|
||||
}: { monitorChartsData: MonitorChart } = data;
|
||||
const durationMax = microsToMillis(durationMaxValue);
|
||||
// These limits provide domain sizes for the charts
|
||||
const checkDomainLimits = [0, statusMaxCount];
|
||||
const durationDomainLimits = [0, durationMax ? durationMax : 0];
|
||||
|
||||
const durationMax = microsToMillis(durationMaxValue);
|
||||
// These limits provide domain sizes for the charts
|
||||
const checkDomainLimits = [0, statusMaxCount];
|
||||
const durationDomainLimits = [0, durationMax ? durationMax : 0];
|
||||
|
||||
return (
|
||||
<MonitorCharts
|
||||
checkDomainLimits={checkDomainLimits}
|
||||
crosshairLocation={this.state.crosshairLocation}
|
||||
danger={danger}
|
||||
durationDomainLimits={durationDomainLimits}
|
||||
monitorChartData={monitorChartsData}
|
||||
primary={primary}
|
||||
secondary={secondary}
|
||||
updateCrosshairLocation={this.updateCrosshairLocation}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Query>
|
||||
);
|
||||
}
|
||||
private updateCrosshairLocation = (crosshairLocation: number) =>
|
||||
this.setState({ crosshairLocation });
|
||||
}
|
||||
return (
|
||||
<MonitorCharts
|
||||
checkDomainLimits={checkDomainLimits}
|
||||
danger={danger}
|
||||
durationDomainLimits={durationDomainLimits}
|
||||
monitorChartData={monitorChartsData}
|
||||
primary={primary}
|
||||
secondary={secondary}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Query>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue