-
Notifications
You must be signed in to change notification settings - Fork 504
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add link to timeline view from comparison view and selection (#313)
* Add link to TraceDiffHeader & CohortTable, Make DiffSelection clickable Signed-off-by: Everett Ross <[email protected]> * Use getUrl util, use NewWindowIcon Signed-off-by: Everett Ross <[email protected]> * Add test for TraceTimelineLink className Signed-off-by: Everett Ross <[email protected]> * Add DiffSelection, ResultItem, TraceHeader tests Signed-off-by: Everett Ross <[email protected]> * Fix typos Signed-off-by: Everett Ross <[email protected]> * Change NewWindowIcon large behavior, remove link header Signed-off-by: Everett Ross <[email protected]> * Fix typo, remove unused TraceTimelineLink className prop Signed-off-by: Everett Ross <[email protected]> * Update snapshots to match enzyme version Signed-off-by: Everett Ross <[email protected]>
- Loading branch information
1 parent
6597593
commit 8e1a66e
Showing
18 changed files
with
767 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| // Copyright (c) 2019 Uber Technologies, Inc. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
|
|
||
| import DiffSelection, { CTA_MESSAGE } from './DiffSelection.js'; | ||
| import ResultItemTitle from './ResultItemTitle'; | ||
| import { fetchedState } from '../../../constants'; | ||
|
|
||
| describe('DiffSelection', () => { | ||
| const toggleComparison = () => {}; | ||
| const traces = [ | ||
| { | ||
| id: 'trace-id-0', | ||
| data: { | ||
| duration: 0, | ||
| traceName: 'trace-name-0', | ||
| }, | ||
| error: new Error('error-0'), | ||
| state: fetchedState.DONE, | ||
| }, | ||
| { | ||
| id: 'trace-id-1', | ||
| // deliberately missing data to test default | ||
| error: new Error('error-1'), | ||
| state: fetchedState.DONE, | ||
| }, | ||
| { | ||
| id: 'trace-id-2', | ||
| // deliberately missing data to test default | ||
| error: new Error('error-2'), | ||
| state: fetchedState.ERROR, | ||
| }, | ||
| ]; | ||
|
|
||
| it('renders a trace as expected', () => { | ||
| const wrapper = shallow( | ||
| <DiffSelection traces={traces.slice(0, 1)} toggleComparison={toggleComparison} /> | ||
| ); | ||
|
|
||
| expect(wrapper.find(ResultItemTitle).length).toBe(1); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders multiple traces as expected', () => { | ||
| const wrapper = shallow(<DiffSelection traces={traces} toggleComparison={toggleComparison} />); | ||
|
|
||
| expect(wrapper.find(ResultItemTitle).length).toBe(traces.length); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders CTA_MESSAGE when given empty traces array', () => { | ||
| const wrapper = shallow(<DiffSelection traces={[]} toggleComparison={toggleComparison} />); | ||
| expect(wrapper.contains(CTA_MESSAGE)).toBe(true); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| // Copyright (c) 2019 Uber Technologies, Inc. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| import React from 'react'; | ||
| import { Checkbox } from 'antd'; | ||
| import { shallow } from 'enzyme'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import ResultItemTitle from './ResultItemTitle'; | ||
| import { fetchedState } from '../../../constants'; | ||
|
|
||
| describe('ResultItemTitle', () => { | ||
| const defaultProps = { | ||
| duration: 150, | ||
| durationPercent: 10, | ||
| isInDiffCohort: true, | ||
| linkTo: 'linkToValue', | ||
| toggleComparison: jest.fn(), | ||
| traceID: 'trace-id-longer-than-8', | ||
| traceName: 'traceNameValue', | ||
| }; | ||
| let wrapper; | ||
|
|
||
| beforeEach(() => { | ||
| defaultProps.toggleComparison.mockReset(); | ||
| wrapper = shallow(<ResultItemTitle {...defaultProps} />); | ||
| }); | ||
|
|
||
| it('renders as expected', () => { | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| describe('Checkbox', () => { | ||
| it('does not render toggleComparison checkbox when props.disableComparision is true', () => { | ||
| expect(wrapper.find(Checkbox).length).toBe(1); | ||
| wrapper.setProps({ disableComparision: true }); | ||
| expect(wrapper.find(Checkbox).length).toBe(0); | ||
| }); | ||
|
|
||
| it('is disabled iff props.state === fetchedState.ERROR', () => { | ||
| expect(wrapper.find(Checkbox).prop('disabled')).toBe(false); | ||
| wrapper.setProps({ state: fetchedState.ERROR }); | ||
| expect(wrapper.find(Checkbox).prop('disabled')).toBe(true); | ||
| }); | ||
|
|
||
| it('is checked iff props.state !== fetchedState.ERROR && props.isInDiffCohort', () => { | ||
| [true, false].forEach(isInDiffCohort => { | ||
| [fetchedState.ERROR, fetchedState.DONE].forEach(state => { | ||
| wrapper.setProps({ isInDiffCohort, state }); | ||
| expect(wrapper.find(Checkbox).prop('checked')).toBe(state !== fetchedState.ERROR && isInDiffCohort); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('calls props.toggleComparison with correct arguments onChange', () => { | ||
| wrapper.find(Checkbox).prop('onChange')(); | ||
| expect(defaultProps.toggleComparison).toHaveBeenCalledWith( | ||
| defaultProps.traceID, | ||
| defaultProps.isInDiffCohort | ||
| ); | ||
| wrapper.setProps({ isInDiffCohort: !defaultProps.isInDiffCohort }); | ||
| wrapper.find(Checkbox).prop('onChange')(); | ||
| expect(defaultProps.toggleComparison).toHaveBeenLastCalledWith( | ||
| defaultProps.traceID, | ||
| !defaultProps.isInDiffCohort | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('WrapperComponent', () => { | ||
| it('renders <Link> when linkTo is provided', () => { | ||
| expect(wrapper.find(Link).length).toBe(1); | ||
| wrapper.setProps({ linkTo: null }); | ||
| expect(wrapper.find(Link).length).toBe(0); | ||
| }); | ||
|
|
||
| it('<Link> targets _blank and sets rel when targetBlank is true', () => { | ||
| expect(wrapper.find(Link).prop('target')).toBeUndefined(); | ||
| expect(wrapper.find(Link).prop('rel')).toBeUndefined(); | ||
| wrapper.setProps({ targetBlank: true }); | ||
| expect(wrapper.find(Link).prop('target')).toBe('_blank'); | ||
| expect(wrapper.find(Link).prop('rel')).toBe('noopener noreferrer'); | ||
| }); | ||
|
|
||
| it('hides formated duration when duration is not provided', () => { | ||
| const initialSpanCount = wrapper.find('span').length; | ||
| wrapper.setProps({ duration: null }); | ||
| expect(wrapper.find('span').length).toBe(initialSpanCount - 1); | ||
| }); | ||
| }); | ||
| }); |
126 changes: 126 additions & 0 deletions
126
...-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`DiffSelection renders a trace as expected 1`] = ` | ||
| <div | ||
| className="DiffSelection is-non-empty ub-mb3" | ||
| > | ||
| <div | ||
| className="DiffSelection--selectedItems" | ||
| > | ||
| <ResultItemTitle | ||
| disableComparision={false} | ||
| duration={0} | ||
| durationPercent={0} | ||
| error={[Error: error-0]} | ||
| isInDiffCohort={true} | ||
| key="trace-id-0" | ||
| linkTo="/trace/trace-id-0" | ||
| state="FETCH_DONE" | ||
| targetBlank={true} | ||
| toggleComparison={[Function]} | ||
| traceID="trace-id-0" | ||
| traceName="trace-name-0" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="DiffSelection--message" | ||
| > | ||
| <React.Fragment> | ||
| <Button | ||
| block={false} | ||
| className="ub-right" | ||
| disabled={true} | ||
| ghost={false} | ||
| loading={false} | ||
| prefixCls="ant-btn" | ||
| type="primary" | ||
| > | ||
| Compare Traces | ||
| </Button> | ||
| <h2 | ||
| className="ub-m0" | ||
| > | ||
| 1 | ||
| Selected for comparison | ||
| </h2> | ||
| </React.Fragment> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`DiffSelection renders multiple traces as expected 1`] = ` | ||
| <div | ||
| className="DiffSelection is-non-empty ub-mb3" | ||
| > | ||
| <div | ||
| className="DiffSelection--selectedItems" | ||
| > | ||
| <ResultItemTitle | ||
| disableComparision={false} | ||
| duration={0} | ||
| durationPercent={0} | ||
| error={[Error: error-0]} | ||
| isInDiffCohort={true} | ||
| key="trace-id-0" | ||
| linkTo="/trace/trace-id-0" | ||
| state="FETCH_DONE" | ||
| targetBlank={true} | ||
| toggleComparison={[Function]} | ||
| traceID="trace-id-0" | ||
| traceName="trace-name-0" | ||
| /> | ||
| <ResultItemTitle | ||
| disableComparision={false} | ||
| durationPercent={0} | ||
| error={[Error: error-1]} | ||
| isInDiffCohort={true} | ||
| key="trace-id-1" | ||
| linkTo="/trace/trace-id-1" | ||
| state="FETCH_DONE" | ||
| targetBlank={true} | ||
| toggleComparison={[Function]} | ||
| traceID="trace-id-1" | ||
| /> | ||
| <ResultItemTitle | ||
| disableComparision={false} | ||
| durationPercent={0} | ||
| error={[Error: error-2]} | ||
| isInDiffCohort={true} | ||
| key="trace-id-2" | ||
| linkTo="/trace/trace-id-2" | ||
| state="FETCH_ERROR" | ||
| targetBlank={true} | ||
| toggleComparison={[Function]} | ||
| traceID="trace-id-2" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="DiffSelection--message" | ||
| > | ||
| <React.Fragment> | ||
| <Link | ||
| replace={false} | ||
| to="/trace/trace-id-0...trace-id-1?cohort=trace-id-0&cohort=trace-id-1" | ||
| > | ||
| <Button | ||
| block={false} | ||
| className="ub-right" | ||
| disabled={false} | ||
| ghost={false} | ||
| loading={false} | ||
| prefixCls="ant-btn" | ||
| type="primary" | ||
| > | ||
| Compare Traces | ||
| </Button> | ||
| </Link> | ||
| <h2 | ||
| className="ub-m0" | ||
| > | ||
| 2 | ||
| Selected for comparison | ||
| </h2> | ||
| </React.Fragment> | ||
| </div> | ||
| </div> | ||
| `; |
Oops, something went wrong.