github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Fix broken snapshot.

Fix busted type.
This commit is contained in:
Justin Kambic 2019-04-11 15:09:04 -04:00 • committed by GitHub
parent 6dd4f22152
commit 884e0eddee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 145 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,171 +32,154 @@ 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 };
}
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}',
});
}
// TODO: this should not exist in the UI, update the GQL resolver/schema to return
// an object that contains these series already shaped in the way required by the visualizations.
const { monitorChartsData } = data;
const avgDurationSeries: any[] = [];
const areaDurationSeries: any[] = [];
const downSeries: any[] = [];
const upSeries: any[] = [];
const checksSeries: any[] = [];
monitorChartsData.forEach(({ avgDuration, maxDuration, minDuration, status }: any) => {
avgDurationSeries.push(avgDuration);
areaDurationSeries.push({ x: minDuration.x, y0: minDuration.y, y: maxDuration.y });
downSeries.push({ x: status.x, y: status.down });
upSeries.push({ x: status.x, y: status.up });
checksSeries.push({ x: status.x, y: status.total });
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}',
});
}
// As above, we are building a domain size for the chart to use.
// Without this code the chart could render data outside of the field.
const checksDomain = upSeries.concat(downSeries).map(({ y }) => y);
const checkDomainLimits = [0, Math.max(...checksDomain)];
const durationDomain = avgDurationSeries.concat(areaDurationSeries);
const durationDomainLimits = [0, Math.max(...durationDomain.map(({ y }) => y))];
const { monitorChartsData } = data;
return (
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
defaultMessage="Monitor Duration ms"
description="The 'ms' is an abbreviation for milliseconds."
/>
</h4>
</EuiTitle>
// TODO: this should not exist in the UI, update the GQL resolver/schema to return
// an object that contains these series already shaped in the way required by the visualizations.
const avgDurationSeries: any[] = [];
const areaDurationSeries: any[] = [];
const downSeries: any[] = [];
const upSeries: any[] = [];
const checksSeries: any[] = [];
monitorChartsData.forEach(({ avgDuration, maxDuration, minDuration, status }: any) => {
avgDurationSeries.push(avgDuration);
areaDurationSeries.push({ x: minDuration.x, y0: minDuration.y, y: maxDuration.y });
downSeries.push({ x: status.x, y: status.down });
upSeries.push({ x: status.x, y: status.up });
checksSeries.push({ x: status.x, y: status.total });
});
<EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
<EuiSeriesChart
margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
width={500}
height={200}
xType={EuiSeriesChartUtils.SCALE.TIME}
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
yDomain={durationDomainLimits}
crosshairValue={this.state.crosshairLocation}
onCrosshairUpdate={this.updateCrosshairLocation}
>
<EuiAreaSeries
color={secondary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel',
{
defaultMessage: 'Duration range',
}
)}
data={areaDurationSeries}
curve="curveBasis"
/>
<EuiLineSeries
color={primary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel',
{
defaultMessage: 'Mean duration',
}
)}
data={avgDurationSeries}
/>
</EuiSeriesChart>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.checkStatus.title"
defaultMessage="Check status"
/>
</h4>
</EuiTitle>
<EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
<EuiSeriesChart
margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
width={500}
height={200}
xType={EuiSeriesChartUtils.SCALE.TIME}
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
stackBy="y"
crosshairValue={this.state.crosshairLocation}
onCrosshairUpdate={this.updateCrosshairLocation}
yDomain={checkDomainLimits}
>
<EuiAreaSeries
name={i18n.translate(
'xpack.uptime.monitorCharts.checkStatus.series.upCountLabel',
{
defaultMessage: 'Up count',
}
)}
data={upSeries}
curve="curveBasis"
color={primary}
/>
<EuiAreaSeries
name={i18n.translate(
'xpack.uptime.monitorCharts.checkStatus.series.downCountLabel',
{
defaultMessage: 'Down count',
}
)}
data={downSeries}
curve="curveBasis"
color={danger}
/>
</EuiSeriesChart>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
);
}}
</Query>
);
}
private updateCrosshairLocation = (crosshairLocation: number) =>
this.setState({ crosshairLocation });
}
// As above, we are building a domain size for the chart to use.
// Without this code the chart could render data outside of the field.
const checksDomain = upSeries.concat(downSeries).map(({ y }) => y);
const checkDomainLimits = [0, Math.max(...checksDomain)];
const durationDomain = avgDurationSeries.concat(areaDurationSeries);
const durationDomainLimits = [0, Math.max(...durationDomain.map(({ y }) => y))];
return (
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
defaultMessage="Monitor Duration ms"
description="The 'ms' is an abbreviation for milliseconds."
/>
</h4>
</EuiTitle>
<EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
<EuiSeriesChart
margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
width={500}
height={200}
xType={EuiSeriesChartUtils.SCALE.TIME}
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
yDomain={durationDomainLimits}
>
<EuiAreaSeries
color={secondary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel',
{
defaultMessage: 'Duration range',
}
)}
data={areaDurationSeries}
curve="curveBasis"
/>
<EuiLineSeries
color={primary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel',
{
defaultMessage: 'Mean duration',
}
)}
data={avgDurationSeries}
/>
</EuiSeriesChart>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.checkStatus.title"
defaultMessage="Check status"
/>
</h4>
</EuiTitle>
<EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
<EuiSeriesChart
margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
width={500}
height={200}
xType={EuiSeriesChartUtils.SCALE.TIME}
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
stackBy="y"
yDomain={checkDomainLimits}
>
<EuiAreaSeries
name={i18n.translate(
'xpack.uptime.monitorCharts.checkStatus.series.upCountLabel',
{
defaultMessage: 'Up count',
}
)}
data={upSeries}
curve="curveBasis"
color={primary}
/>
<EuiAreaSeries
name={i18n.translate(
'xpack.uptime.monitorCharts.checkStatus.series.downCountLabel',
{
defaultMessage: 'Down count',
}
)}
data={downSeries}
curve="curveBasis"
color={danger}
/>
</EuiSeriesChart>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
);
}}
</Query>
);
};