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

[Uptime] Add zero monitors down heading (#48257) (#49815)

Browse source 
* Add zero down heading.

* Create new heading component for snapshot.

* Add tests and cases for no monitors.
This commit is contained in:
Justin Kambic 2019-10-31 16:06:58 -04:00 • committed by GitHub
parent 6a13a97375
commit 3252a821b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 106 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

20
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap generated
View file

@ -4,22 +4,10 @@ exports[`Snapshot component renders without errors 1`] = `
<ChartWrapper
loading={false}
>
<EuiTitle
size="s"
>
<h2>
<FormattedMessage
defaultMessage="{down}/{total} monitors are down"
id="xpack.uptime.snapshot.downCountsMessage"
values={
Object {
"down": 2,
"total": 10,
}
}
/>
</h2>
</EuiTitle>
<SnapshotHeading
down={2}
total={10}
/>
<EuiSpacer
size="xs"
/>

31
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot_heading.test.tsx.snap generated Normal file
View file

@ -0,0 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SnapshotHeading renders custom heading for no down monitors 1`] = `
<EuiTitle
size="s"
>
<h2>
All monitors are up
</h2>
</EuiTitle>
`;
exports[`SnapshotHeading renders custom heading for no monitors 1`] = `
<EuiTitle
size="s"
>
<h2>
No monitors found
</h2>
</EuiTitle>
`;
exports[`SnapshotHeading renders standard heading for valid counts 1`] = `
<EuiTitle
size="s"
>
<h2>
3/17 monitors are down
</h2>
</EuiTitle>
`;

26
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/snapshot_heading.test.tsx Normal file
View file

@ -0,0 +1,26 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import React from 'react';
import { SnapshotHeading } from '../snapshot_heading';
describe('SnapshotHeading', () => {
it('renders custom heading for no down monitors', () => {
const wrapper = shallowWithIntl(<SnapshotHeading down={0} total={23} />);
expect(wrapper).toMatchSnapshot();
});
it('renders standard heading for valid counts', () => {
const wrapper = shallowWithIntl(<SnapshotHeading down={3} total={17} />);
expect(wrapper).toMatchSnapshot();
});
it('renders custom heading for no monitors', () => {
const wrapper = shallowWithIntl(<SnapshotHeading down={0} total={0} />);
expect(wrapper).toMatchSnapshot();
});
});

20
x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
View file

@ -4,8 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiSpacer } from '@elastic/eui';
import React from 'react';
import { get } from 'lodash';
import { DonutChart } from './charts';
@ -13,6 +12,7 @@ import { Snapshot as SnapshotType } from '../../../common/graphql/types';
import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
import { snapshotQuery } from '../../queries';
import { ChartWrapper } from './charts/chart_wrapper';
import { SnapshotHeading } from './snapshot_heading';
const SNAPSHOT_CHART_WIDTH = 144;
const SNAPSHOT_CHART_HEIGHT = 144;
@ -31,18 +31,10 @@ export const SnapshotComponent = ({
loading,
}: UptimeGraphQLQueryProps<SnapshotQueryResult>) => (
<ChartWrapper loading={loading}>
<EuiTitle size="s">
<h2>
<FormattedMessage
id="xpack.uptime.snapshot.downCountsMessage"
defaultMessage="{down}/{total} monitors are down"
values={{
down: get<number>(data, 'snapshot.counts.down', 0),
total: get<number>(data, 'snapshot.counts.total', 0),
}}
/>
</h2>
</EuiTitle>
<SnapshotHeading
down={get<number>(data, 'snapshot.counts.down', 0)}
total={get<number>(data, 'snapshot.counts.total', 0)}
/>
<EuiSpacer size="xs" />
<DonutChart
up={get<number>(data, 'snapshot.counts.up', 0)}

39
x-pack/legacy/plugins/uptime/public/components/functional/snapshot_heading.tsx Normal file
View file

@ -0,0 +1,39 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
interface Props {
down: number;
total: number;
}
const getMessage = (down: number, total: number): string => {
if (down === 0 && total > 0) {
return i18n.translate('xpack.uptime.snapshot.zeroDownMessage', {
defaultMessage: 'All monitors are up',
});
} else if (down === 0 && total === 0) {
return i18n.translate('xpack.uptime.snapshot.noMonitorMessage', {
defaultMessage: 'No monitors found',
});
}
return i18n.translate('xpack.uptime.snapshot.downCountsMessage', {
defaultMessage: '{down}/{total} monitors are down',
values: {
down,
total,
},
});
};
export const SnapshotHeading = ({ down, total }: Props) => (
<EuiTitle size="s">
<h2>{getMessage(down, total)}</h2>
</EuiTitle>
);