maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Remove crosshair synchronization to avoid display bug. (#33660)

Browse source 
Fix broken snapshot.

Fix busted type.
This commit is contained in:
Justin Kambic 2019-03-28 09:13:17 -04:00 committed by GitHub
parent 06d7ebef8f
commit 062cfc7efe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
View file

@ -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"

2
x-pack/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
View file

@ -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();

9
x-pack/plugins/uptime/public/components/functional/monitor_charts.tsx
View file

@ -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

112
x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts_query.tsx
View file

@ -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>
);
};