forked from jaegertracing/jaeger-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Span Search - Add result count, navigation and clear buttons (jaegert…
…racing#234) * Add result count, navigation and clear buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Correct imports Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Move and delete files Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review fixes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix TracePageHeader test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Lighten buttons when disabled Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review fixes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix tests Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix merge changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Fix TracePageHeader and TracePageSearchBar tests Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Delay TracePageHeader testing until release of Enzyme v3.5.0 Signed-off-by: Davit Yeghshatyan <davo@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
- Loading branch information
1 parent
eff9c27
commit dc4d9f0
Showing
16 changed files
with
260 additions
and
146 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
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
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
36 changes: 36 additions & 0 deletions
36
packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.css
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,36 @@ | ||
| /* | ||
| Copyright (c) 2018 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. | ||
| */ | ||
|
|
||
| .TracePageSearchBar { | ||
| max-width: 20rem; | ||
| } | ||
|
|
||
| .TracePageSearchBar--bar { | ||
| display: flex; | ||
| max-width: 20rem; | ||
| } | ||
|
|
||
| .TracePageSearchBar--count { | ||
| opacity: 0.6; | ||
| } | ||
|
|
||
| .TracePageSearchBar--btn { | ||
| transition: 0.2s; | ||
| } | ||
|
|
||
| .TracePageSearchBar--btn.is-disabled { | ||
| opacity: 0.5; | ||
| } |
82 changes: 82 additions & 0 deletions
82
packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.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,82 @@ | ||
| // @flow | ||
|
|
||
| // Copyright (c) 2018 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 * as React from 'react'; | ||
| import { Button, Input } from 'antd'; | ||
|
|
||
| import * as markers from './TracePageSearchBar.markers'; | ||
|
|
||
| import './TracePageSearchBar.css'; | ||
|
|
||
| type TracePageSearchBarProps = { | ||
| updateTextFilter: string => void, | ||
| textFilter: string, | ||
| prevResult: () => void, | ||
| nextResult: () => void, | ||
| clearSearch: () => void, | ||
| resultCount: number, | ||
| forwardedRef: { current: Input | null }, | ||
| }; | ||
|
|
||
| export function TracePageSearchBarFn(props: TracePageSearchBarProps) { | ||
| const { | ||
| prevResult, | ||
| nextResult, | ||
| clearSearch, | ||
| resultCount, | ||
| updateTextFilter, | ||
| textFilter, | ||
| forwardedRef, | ||
| } = props; | ||
|
|
||
| const count = textFilter ? <span className="TracePageSearchBar--count">{resultCount}</span> : null; | ||
|
|
||
| const updateFilter = event => updateTextFilter(event.target.value); | ||
| const onKeyDown = e => { | ||
| if (e.keyCode === 27) clearSearch(); | ||
| }; | ||
|
|
||
| const btnClass = `TracePageSearchBar--btn${textFilter ? '' : ' is-disabled'}`; | ||
|
|
||
| return ( | ||
| <div className="ub-flex-auto ub-mr2 TracePageSearchBar"> | ||
| {/* style inline because compact overwrites the display */} | ||
| <Input.Group compact style={{ display: 'flex' }}> | ||
| <Input | ||
| name="search" | ||
| className="TracePageSearchBar--bar ub-flex-auto" | ||
| placeholder="Search..." | ||
| onChange={updateFilter} | ||
| value={textFilter} | ||
| data-test={markers.IN_TRACE_SEARCH} | ||
| suffix={count} | ||
| ref={forwardedRef} | ||
| onKeyDown={onKeyDown} | ||
| onPressEnter={nextResult} | ||
| /> | ||
| <Button className={btnClass} disabled={!textFilter} icon="up" onClick={prevResult} /> | ||
| <Button className={btnClass} disabled={!textFilter} icon="down" onClick={nextResult} /> | ||
| <Button className={btnClass} disabled={!textFilter} icon="close" onClick={clearSearch} /> | ||
| </Input.Group> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // ghetto fabulous cast because the 16.3 API is not in flow yet | ||
| // https://github.com/facebook/flow/issues/6103 | ||
| export default (React: any).forwardRef((props, ref) => ( | ||
| <TracePageSearchBarFn {...props} forwardedRef={ref} /> | ||
| )); |
File renamed without changes.
55 changes: 55 additions & 0 deletions
55
packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.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,55 @@ | ||
| // Copyright (c) 2017 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 * as markers from './TracePageSearchBar.markers'; | ||
| import { TracePageSearchBarFn as TracePageSearchBar } from './TracePageSearchBar'; | ||
|
|
||
| describe('<TracePageSearchBar>', () => { | ||
| const defaultProps = { | ||
| updateTextFilter: () => {}, | ||
| textFilter: 'something', | ||
| prevResult: () => {}, | ||
| nextResult: () => {}, | ||
| resultCount: 0, | ||
| }; | ||
|
|
||
| let wrapper; | ||
|
|
||
| beforeEach(() => { | ||
| wrapper = shallow(<TracePageSearchBar {...defaultProps} />); | ||
| }); | ||
|
|
||
| it('calls updateTextFilter() function for onChange of the input', () => { | ||
| const updateTextFilter = jest.fn(); | ||
| const props = { ...defaultProps, updateTextFilter }; | ||
| wrapper = shallow(<TracePageSearchBar {...props} />); | ||
| const event = { target: { value: 'my new value' } }; | ||
| wrapper | ||
| .find(`[data-test="${markers.IN_TRACE_SEARCH}"]`) | ||
| .first() | ||
| .simulate('change', event); | ||
| expect(updateTextFilter.mock.calls.length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders the search bar', () => { | ||
| expect(wrapper.find('Input').length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders the buttons', () => { | ||
| expect(wrapper.find('Button').length).toBe(3); | ||
| }); | ||
| }); |
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
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
Oops, something went wrong.