-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support upload trace in Zipkin Lens UI #2447
Merged
codefromthecrypt
merged 11 commits into
openzipkin:master
from
tacigar:upload-json-dropdown
Mar 21, 2019
+729
−257
Merged
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
58a549e
Add react-modal
tacigar 68a6b02
Add dropdown menu
tacigar a0b328b
Add transition to dropdown menu
tacigar e10fd09
Do Modal.setAppElement and set traceId input callback
tacigar 8ee6c85
Add fileInputer
tacigar 7156457
Split DetailedTraceSummary component and add TracePage & TraceViewer …
tacigar f6bafdf
Remove traceId component from search bar
tacigar 8425174
Fix trivial
tacigar 6f52b78
Rename setTrace -> loadTrace
tacigar d7e12a9
Improve error handling
tacigar 68e9be0
Improve error message
tacigar File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 was deleted.
Oops, something went wrong.
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,80 @@ | ||
| .global-dropdown-menu { | ||
| height: 50px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .global-dropdown-menu__modal-wrapper { | ||
| position:relative; | ||
| } | ||
|
|
||
| .global-dropdown-menu__button { | ||
| width: 35px; | ||
| height: 35px; | ||
| font-size: 24px; | ||
| border-radius: 3px; | ||
| border: solid 1px $gray-7; | ||
| cursor: pointer; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background: linear-gradient(to bottom, $gray-10, $gray-9); | ||
| } | ||
|
|
||
| .global-dropdown-menu__modal { | ||
| } | ||
|
|
||
| .global-dropdown-menu__overlay { | ||
| position: absolute; | ||
| right: 0; | ||
| top: 20px; | ||
| background-color: $white; | ||
| border: solid $gray-7 1px; | ||
| border-radius: 3px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-id { | ||
| width: 100%; | ||
| padding: 3px 4px 6px 4px; | ||
| box-sizing: border-box; | ||
| border-bottom: 1px solid $gray-7; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-id-label { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-id-search { | ||
| display: flex; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-id-input { | ||
| border: solid $gray-8 1px; | ||
| border-radius: 2px; | ||
| height: 18px; | ||
| width: 160px; | ||
| margin-right: 3px; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-id-button { | ||
| width: 20px; | ||
| height: 20px; | ||
| background: linear-gradient(to bottom, $gray-10, $gray-9); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 3px; | ||
| border: solid 1px $gray-7; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .global-dropdown-menu__trace-json { | ||
| font-size: 16px; | ||
| padding: 3px 4px 3px 4px; | ||
| box-sizing: border-box; | ||
| cursor: pointer; | ||
| &:hover { | ||
| background-color: $gray-10; | ||
| } | ||
| } |
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
14 changes: 7 additions & 7 deletions
14
...s/scss/components/_mini-trace-viewer.scss → ...-lens/scss/components/_mini-timeline.scss
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .trace-page { | ||
|
|
||
| } |
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,12 @@ | ||
| .ReactModal__Overlay { | ||
| opacity: 0; | ||
| transition: opacity 200ms ease-in-out; | ||
| } | ||
|
|
||
| .ReactModal__Overlay--after-open { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .ReactModal__Overlay--before-close { | ||
| opacity: 0; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import * as types from '../constants/action-types'; | ||
|
|
||
| export const setTrace = trace => ({ | ||
| type: types.TRACE_VIEWER_SET_TRACE, | ||
| trace, | ||
| }); |
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,13 @@ | ||
| import * as actions from './trace-viewer-action'; | ||
| import * as types from '../constants/action-types'; | ||
|
|
||
| describe('trace viewer actions', () => { | ||
| it('should create an action to set the trace', () => { | ||
| const trace = {}; | ||
| const expectedAction = { | ||
| type: types.TRACE_VIEWER_SET_TRACE, | ||
| trace, | ||
| }; | ||
| expect(actions.setTrace(trace)).toEqual(expectedAction); | ||
| }); | ||
| }); |
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
65 changes: 0 additions & 65 deletions
65
zipkin-lens/src/components/GlobalSearch/ConditionTraceId.js
This file was deleted.
Oops, something went wrong.
139 changes: 139 additions & 0 deletions
139
zipkin-lens/src/components/GlobalSearch/GlobalDropdownMenu.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,139 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import { withRouter } from 'react-router'; | ||
| import Modal from 'react-modal'; | ||
|
|
||
| const propTypes = { | ||
| history: PropTypes.shape({ | ||
| push: PropTypes.func.isRequired, | ||
| }).isRequired, | ||
| setTrace: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| // This selector (class name) is used to specify a modal parent component. | ||
| const modalWrapperClass = 'global-dropdown-menu__modal-wrapper'; | ||
|
|
||
| class GlobalDropdownMenu extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.fileInpueElement = undefined; | ||
| this.state = { | ||
| isModalOpened: false, | ||
| traceId: '', | ||
| }; | ||
| this.handleOpenModalToggle = this.handleOpenModalToggle.bind(this); | ||
| this.handleTraceIdButtonClick = this.handleTraceIdButtonClick.bind(this); | ||
| this.handleTraceIdChange = this.handleTraceIdChange.bind(this); | ||
| this.handleTraceJsonChange = this.handleTraceJsonChange.bind(this); | ||
| } | ||
|
|
||
| handleOpenModalToggle() { | ||
| const { isModalOpened } = this.state; | ||
| this.setState({ isModalOpened: !isModalOpened }); | ||
| } | ||
|
|
||
| handleTraceIdButtonClick(event) { | ||
| const { history } = this.props; | ||
| const { traceId } = this.state; | ||
| history.push({ | ||
| pathname: `/zipkin/traces/${traceId}`, | ||
| }); | ||
| this.setState({ isModalOpened: false }); | ||
| event.stopPropagation(); | ||
| } | ||
|
|
||
| handleTraceIdChange(event) { | ||
| this.setState({ | ||
| traceId: event.target.value, | ||
| }); | ||
| } | ||
|
|
||
| handleTraceJsonChange(event) { | ||
| const { history, setTrace } = this.props; | ||
|
|
||
| const [file] = event.target.files; | ||
| const fileReader = new FileReader(); | ||
|
|
||
| fileReader.onload = () => { | ||
| const { result } = fileReader; | ||
| let rawTrace; | ||
| try { | ||
| rawTrace = JSON.parse(result); | ||
| setTrace(rawTrace); | ||
| history.push({ | ||
| pathname: '/zipkin/traceViewer', | ||
| }); | ||
| } catch (error) { | ||
| // Do nothing | ||
| } | ||
| }; | ||
| fileReader.readAsText(file); | ||
| this.setState({ isModalOpened: false }); | ||
| } | ||
|
|
||
| renderModal() { | ||
| const { isModalOpened, traceId } = this.state; | ||
| return ( | ||
| <Modal | ||
| className="global-dropdown-menu__modal" | ||
| overlayClassName="global-dropdown-menu__overlay" | ||
| isOpen={isModalOpened} | ||
| parentSelector={() => document.querySelector(`.${modalWrapperClass}`)} | ||
| > | ||
| <div className="global-dropdown-menu__trace-id"> | ||
| <div className="global-dropdown-menu__trace-id-label">Trace ID</div> | ||
| <div className="global-dropdown-menu__trace-id-search"> | ||
| <input | ||
| className="global-dropdown-menu__trace-id-input" | ||
| type="text" | ||
| value={traceId} | ||
| onChange={this.handleTraceIdChange} | ||
| /> | ||
| <span | ||
| className="global-dropdown-menu__trace-id-button" | ||
| role="presentation" | ||
| onClick={this.handleTraceIdButtonClick} | ||
| > | ||
| <i className="fas fa-search" /> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className="global-dropdown-menu__trace-json"> | ||
| <input | ||
| type="file" | ||
| style={{ display: 'none' }} | ||
| ref={(element) => { this.fileInpueElement = element; }} | ||
| onChange={this.handleTraceJsonChange} | ||
| /> | ||
| <div | ||
| role="presentation" | ||
| onClick={() => { this.fileInpueElement.click(); }} | ||
| > | ||
| Choose JSON file... | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="global-dropdown-menu"> | ||
| <div | ||
| className="global-dropdown-menu__button" | ||
| onClick={this.handleOpenModalToggle} | ||
| role="presentation" | ||
| > | ||
| <i className="fas fa-bars" /> | ||
| </div> | ||
| <div className={modalWrapperClass}> | ||
| {this.renderModal()} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| GlobalDropdownMenu.propTypes = propTypes; | ||
|
|
||
| export default withRouter(GlobalDropdownMenu); | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
|
|
||
| import LoadingOverlay from '../Common/LoadingOverlay'; | ||
| import DetailedTraceSummary from '../DetailedTraceSummary'; | ||
| import { detailedTraceSummaryPropTypes } from '../../prop-types'; | ||
|
|
||
| const propTypes = { | ||
| isLoading: PropTypes.bool.isRequired, | ||
| traceId: PropTypes.string.isRequired, | ||
| traceSummary: detailedTraceSummaryPropTypes, | ||
| fetchTrace: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| traceSummary: null, | ||
| }; | ||
|
|
||
| class TracePage extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| startTs: null, | ||
| endTs: null, | ||
| }; | ||
| this.handleStartAndEndTsChange = this.handleStartAndEndTsChange.bind(this); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const { fetchTrace, traceId, traceSummary } = this.props; | ||
| if (!traceSummary || traceSummary.traceId !== traceId) { | ||
| fetchTrace(traceId); | ||
| } | ||
| } | ||
|
|
||
| handleStartAndEndTsChange(startTs, endTs) { | ||
| this.setState({ startTs, endTs }); | ||
| } | ||
|
|
||
| render() { | ||
| const { startTs, endTs } = this.state; | ||
| const { isLoading, traceId, traceSummary } = this.props; | ||
| return ( | ||
| <div className="trace-page"> | ||
| <LoadingOverlay active={isLoading} /> | ||
| <div className="trace-page__detailed-trace-summary-wrapper"> | ||
| { | ||
| (!traceSummary || traceSummary.traceId !== traceId) | ||
| ? null | ||
| : ( | ||
| <DetailedTraceSummary | ||
| startTs={startTs} | ||
| endTs={endTs} | ||
| onStartAndEndTsChange={this.handleStartAndEndTsChange} | ||
| traceSummary={traceSummary} | ||
| /> | ||
| ) | ||
| } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TracePage.propTypes = propTypes; | ||
| TracePage.defaultProps = defaultProps; | ||
|
|
||
| export default TracePage; |
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,51 @@ | ||
| import React from 'react'; | ||
|
|
||
| import DetailedTraceSummary from '../DetailedTraceSummary'; | ||
| import { detailedTraceSummaryPropTypes } from '../../prop-types'; | ||
|
|
||
| const propTypes = { | ||
| traceSummary: detailedTraceSummaryPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| traceSummary: null, | ||
| }; | ||
|
|
||
| class TraceViewer extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| startTs: null, | ||
| endTs: null, | ||
| }; | ||
| this.handleStartAndEndTsChange = this.handleStartAndEndTsChange.bind(this); | ||
| } | ||
|
|
||
| handleStartAndEndTsChange(startTs, endTs) { | ||
| this.setState({ startTs, endTs }); | ||
| } | ||
|
|
||
| render() { | ||
| const { startTs, endTs } = this.state; | ||
| const { traceSummary } = this.props; | ||
| return ( | ||
| <div className="trace-viewer"> | ||
| { | ||
| traceSummary ? ( | ||
| <DetailedTraceSummary | ||
| startTs={startTs} | ||
| endTs={endTs} | ||
| onStartAndEndTsChange={this.handleStartAndEndTsChange} | ||
| traceSummary={traceSummary} | ||
| /> | ||
| ) : null | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TraceViewer.propTypes = propTypes; | ||
| TraceViewer.defaultProps = defaultProps; | ||
|
|
||
| export default TraceViewer; |
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
15 changes: 15 additions & 0 deletions
15
zipkin-lens/src/containers/GlobalSearch/GlobalDropdownMenuContainer.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,15 @@ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import GlobalDropdownMenu from '../../components/GlobalSearch/GlobalDropdownMenu'; | ||
| import { setTrace } from '../../actions/trace-viewer-action'; | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| setTrace: trace => dispatch(setTrace(trace)), | ||
| }); | ||
|
|
||
| const GlobalDropdownMenuContainer = connect( | ||
| null, | ||
| mapDispatchToProps, | ||
| )(GlobalDropdownMenu); | ||
|
|
||
| export default GlobalDropdownMenuContainer; |
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
23 changes: 23 additions & 0 deletions
23
zipkin-lens/src/containers/TraceViewer/TraceViewerContainer.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,23 @@ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import TraceViewer from '../../components/TraceViewer'; | ||
| import { treeCorrectedForClockSkew, detailedTraceSummary } from '../../zipkin'; | ||
|
|
||
| const mapStateToProps = (state) => { | ||
| if (state.traceViewer.trace) { | ||
| return { | ||
| traceSummary: detailedTraceSummary( | ||
| treeCorrectedForClockSkew(state.traceViewer.trace), | ||
| ), | ||
| }; | ||
| } | ||
| return { | ||
| traceSummary: null, | ||
| }; | ||
| }; | ||
|
|
||
| const TraceViewerContainer = connect( | ||
| mapStateToProps, | ||
| )(TraceViewer); | ||
|
|
||
| export default TraceViewerContainer; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import * as types from '../constants/action-types'; | ||
|
|
||
| const initialState = { | ||
| trace: null, | ||
| }; | ||
|
|
||
| const traceViewer = (state = initialState, action) => { | ||
| switch (action.type) { | ||
| case types.TRACE_VIEWER_SET_TRACE: | ||
| return { | ||
| ...state, | ||
| trace: action.trace, | ||
| }; | ||
| default: | ||
| return state; | ||
| } | ||
| }; | ||
|
|
||
| export default traceViewer; |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe alert the json is malformed? I assume this catch will result in someone uploading an incorrect file (ex just one span) and getting no feedback about it. correct?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes.
Do you think that it is better to display the alert dialog?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
old UI did something like this..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, Thank you.
I'll do so