diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/CustomPlot.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/CustomPlot.stories.tsx new file mode 100644 index 0000000000000..48e83763cb9df --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/CustomPlot.stories.tsx @@ -0,0 +1,37 @@ +/* + * 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 { storiesOf } from '@storybook/react'; +import React from 'react'; +// @ts-ignore +import CustomPlot from './'; + +storiesOf('shared/charts/CustomPlot', module).add( + 'with annotations but no data', + () => { + const annotations = [ + { + type: 'version', + id: '2020-06-10 04:36:31', + '@timestamp': 1591763925012, + text: '2020-06-10 04:36:31', + }, + { + type: 'version', + id: '2020-06-10 15:23:01', + '@timestamp': 1591802689233, + text: '2020-06-10 15:23:01', + }, + ]; + return ; + }, + { + info: { + source: false, + text: + "When a chart has no data but does have annotations, the annotations shouldn't show up at all.", + }, + } +); diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js index 050cb0639ee88..e1ffec3a8d97f 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js +++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js @@ -168,7 +168,7 @@ export class InnerCustomPlot extends PureComponent { tickFormatX={this.props.tickFormatX} /> - {this.state.showAnnotations && !isEmpty(annotations) && ( + {this.state.showAnnotations && !isEmpty(annotations) && !noHits && ( { this.setState(({ showAnnotations }) => ({ diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js index d906e7f5093c2..ad1d73f2b766b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js +++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js @@ -255,12 +255,28 @@ describe('when response has no data', () => { const onHover = jest.fn(); const onMouseLeave = jest.fn(); const onSelectionEnd = jest.fn(); + const annotations = [ + { + type: 'version', + id: '2020-06-10 04:36:31', + '@timestamp': 1591763925012, + text: '2020-06-10 04:36:31', + }, + { + type: 'version', + id: '2020-06-10 15:23:01', + '@timestamp': 1591802689233, + text: '2020-06-10 15:23:01', + }, + ]; + let wrapper; beforeEach(() => { const series = getEmptySeries(1451606400000, 1451610000000); wrapper = mount( { expect(wrapper.find('Tooltip').length).toEqual(0); }); + it('should not show annotations', () => { + expect(wrapper.find('AnnotationsPlot')).toHaveLength(0); + }); + it('should have correct markup', () => { expect(toJson(wrapper)).toMatchSnapshot(); });