diff --git a/.eslintrc b/.eslintrc index d59697bc2f..7c29c80399 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,7 +17,6 @@ "comma-dangle": 0, "no-continue": 0, "no-plusplus": 0, - "no-restricted-syntax": 0, "no-self-compare": 0, "no-underscore-dangle": 0, diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 070582d62d..d6e2ec0e9f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -38,7 +38,7 @@ to be accepted if it: By contributing your code, you agree to license your contribution under the terms of the [Apache License](LICENSE). -If you are adding a new file it should have a header like below. +If you are adding a new file it should have a header like below. ``` // Copyright (c) 2017 The Jaeger Authors. @@ -117,3 +117,17 @@ If you want this to be automatic you can set up some aliases: git config --add alias.amend "commit -s --amend" git config --add alias.c "commit -s" ``` + +# Style Guide + +Prefer to use [flow](https://flow.org/) for new code. + +We use [`prettier`](https://prettier.io/), an "opinionated" code formatter. It +can be applied to both JavaScript and CSS source files via `yarn prettier`. + +Then, most issues will be caught by the linter, which can be applied via `yarn +eslint`. + +Finally, we generally adhere to the +[Airbnb Style Guide](https://github.com/airbnb/javascript), with exceptions as +noted in our `.eslintrc`. diff --git a/package.json b/package.json index b57b9ad581..0cbbfa8c0f 100644 --- a/package.json +++ b/package.json @@ -81,12 +81,20 @@ "lint": "npm run eslint && npm run prettier && npm run flow && npm run check-license", "eslint": "eslint src", "check-license": "./scripts/check-license.sh", - "prettier": "prettier --single-quote --trailing-comma es5 --print-width 110 --write \"src/**/*.js\"", + "prettier": "prettier --write \"src/**/*.js\" \"src/**/*.css\"", "flow": "flow; test $? -eq 0 -o $? -eq 2", "precommit": "lint-staged" }, "jest": { - "collectCoverageFrom": ["src/**/*.js", "!src/utils/DraggableManager/demo/*.js"] + "collectCoverageFrom": [ + "src/**/*.js", + "!src/utils/DraggableManager/demo/*.js" + ] + }, + "prettier": { + "printWidth": 110, + "singleQuote": true, + "trailingComma": "es5" }, "lint-staged": { "*.js": [ diff --git a/src/actions/jaeger-api.test.js b/src/actions/jaeger-api.test.js index aad70b1044..4565422aba 100644 --- a/src/actions/jaeger-api.test.js +++ b/src/actions/jaeger-api.test.js @@ -106,7 +106,10 @@ it('@JAEGER_API/FETCH_SERVICES should return a promise', () => { it('@JAEGER_API/FETCH_SERVICE_OPERATIONS should call the JaegerAPI', () => { const api = JaegerAPI; const mock = sinon.mock(api); - const called = mock.expects('fetchServiceOperations').once().withExactArgs('service'); + const called = mock + .expects('fetchServiceOperations') + .once() + .withExactArgs('service'); jaegerApiActions.fetchServiceOperations('service'); expect(called.verify()).toBeTruthy(); mock.restore(); diff --git a/src/api/jaeger.js b/src/api/jaeger.js index f1e1b23276..94b0f2e4cc 100644 --- a/src/api/jaeger.js +++ b/src/api/jaeger.js @@ -32,11 +32,9 @@ function getJSON(url, query) { .then(({ errors = [] }) => { throw new Error(errors.length > 0 ? errors[0].msg : 'An unknown error occurred.'); }) - .catch( - (/* err */) => { - throw new Error('Bad JSON returned from the Jaeger Query Service.'); - } - ); + .catch((/* err */) => { + throw new Error('Bad JSON returned from the Jaeger Query Service.'); + }); } return response.json(); }); diff --git a/src/components/App/App.css b/src/components/App/App.css index c7daf3d71a..427bf3ccd4 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -34,20 +34,20 @@ body ::-webkit-scrollbar { } a { - color: #11939A; + color: #11939a; } a:hover { - color: #00474E; + color: #00474e; cursor: pointer; } .clearfix:after { - content: " "; - visibility: hidden; - display: block; - height: 0; - clear: both; + content: ' '; + visibility: hidden; + display: block; + height: 0; + clear: both; } .pull-left { @@ -83,19 +83,21 @@ a:hover { } .ui.table td.light-grey { - background-color: #F1F1F1; + background-color: #f1f1f1; } -.ui.table, .ui.table thead tr:first-child>th:last-child, .ui.table thead tr:first-child>th:first-child { +.ui.table, +.ui.table thead tr:first-child > th:last-child, +.ui.table thead tr:first-child > th:first-child { border-radius: 0; } .ui.table thead th { - background-color: #F1F1F1; + background-color: #f1f1f1; } .ui.sortable.table thead th.sorted, .ui.sortable.table thead th:hover, .ui.sortable.table thead th.sorted:hover { - background-color: #D6D6D5; + background-color: #d6d6d5; } diff --git a/src/components/App/NotFound.js b/src/components/App/NotFound.js index 8c37a50226..94f205ee12 100644 --- a/src/components/App/NotFound.js +++ b/src/components/App/NotFound.js @@ -1,3 +1,5 @@ +// @flow + // Copyright (c) 2017 Uber Technologies, Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -12,40 +14,32 @@ // See the License for the specific language governing permissions and // limitations under the License. -import PropTypes from 'prop-types'; import React from 'react'; import { Link } from 'react-router-dom'; import prefixUrl from '../../utils/prefix-url'; -export default function NotFound({ error }) { +type NotFoundProps = { + error: any, +}; + +export default function NotFound({ error }: NotFoundProps) { return (
-

- {'404'} -

-

- {"Looks like you tried to access something that doesn't exist."} -

+

{'404'}

+

{"Looks like you tried to access something that doesn't exist."}

- {error && + {error && (
-

- {String(error)} -

-
} +

{String(error)}

+
+ )}
- - {'Back home'} - + {'Back home'}
); } - -NotFound.propTypes = { - error: PropTypes.object, -}; diff --git a/src/components/App/Page.js b/src/components/App/Page.js index d07a53565c..dd51028d85 100644 --- a/src/components/App/Page.js +++ b/src/components/App/Page.js @@ -55,9 +55,7 @@ class Page extends React.Component {
-
- {children} -
+
{children}
); } diff --git a/src/components/DependencyGraph/DAG.js b/src/components/DependencyGraph/DAG.js index 2a339f6497..37862cb5c4 100644 --- a/src/components/DependencyGraph/DAG.js +++ b/src/components/DependencyGraph/DAG.js @@ -21,17 +21,20 @@ import dagre from 'dagre'; cydagre(cytoscape, dagre); export default class DAG extends React.Component { - static get propTypes() { - return { - serviceCalls: PropTypes.arrayOf( - PropTypes.shape({ - parent: PropTypes.string, - child: PropTypes.string, - callCount: PropTypes.number, - }) - ), - }; - } + static propTypes = { + serviceCalls: PropTypes.arrayOf( + PropTypes.shape({ + parent: PropTypes.string, + child: PropTypes.string, + callCount: PropTypes.number, + }) + ), + }; + + static defaultProps = { + serviceCalls: [], + }; + componentDidMount() { const { serviceCalls } = this.props; const nodeMap = {}; diff --git a/src/components/DependencyGraph/DependencyForceGraph.js b/src/components/DependencyGraph/DependencyForceGraph.js index 108c362fe5..5346493a65 100644 --- a/src/components/DependencyGraph/DependencyForceGraph.js +++ b/src/components/DependencyGraph/DependencyForceGraph.js @@ -65,9 +65,11 @@ export default class DependencyForceGraph extends Component { return (
{ - this.container = c; - }} + ref={ + /* istanbul ignore next */ c => { + this.container = c; + } + } style={{ position: 'relative' }} > - {nodes.map(({ labelStyle, labelClass, showLabel, opacity, fill, ...node }) => + {nodes.map(({ labelStyle, labelClass, showLabel, opacity, fill, ...node }) => ( - )} - {links.map(({ opacity, ...link }) => + ))} + {links.map(({ opacity, ...link }) => ( ${link.target}`} opacity={opacity} link={link} /> - )} + ))}
); diff --git a/src/components/DependencyGraph/DependencyGraph.css b/src/components/DependencyGraph/DependencyGraph.css index c11aa9a7b8..544908faa5 100644 --- a/src/components/DependencyGraph/DependencyGraph.css +++ b/src/components/DependencyGraph/DependencyGraph.css @@ -15,7 +15,7 @@ limitations under the License. */ .rv-force__node { - fill: #11939A; + fill: #11939a; cursor: pointer; } diff --git a/src/components/DependencyGraph/index.js b/src/components/DependencyGraph/index.js index d79e4dac37..b508e5bcf3 100644 --- a/src/components/DependencyGraph/index.js +++ b/src/components/DependencyGraph/index.js @@ -28,16 +28,22 @@ import DependencyForceGraph from './DependencyForceGraph'; import DAG from './DAG'; export default class DependencyGraphPage extends Component { - static get propTypes() { - return { - dependencies: PropTypes.any, - fetchDependencies: PropTypes.func.isRequired, - nodes: nodesPropTypes, - links: linksPropTypes, - loading: PropTypes.bool, - error: PropTypes.object, - }; - } + static propTypes = { + // eslint-disable-next-line react/forbid-prop-types + dependencies: PropTypes.any.isRequired, + fetchDependencies: PropTypes.func.isRequired, + nodes: nodesPropTypes, + links: linksPropTypes, + loading: PropTypes.bool.isRequired, + // eslint-disable-next-line react/forbid-prop-types + error: PropTypes.object, + }; + + static defaultProps = { + nodes: null, + links: null, + error: null, + }; constructor(props) { super(props); @@ -85,14 +91,14 @@ export default class DependencyGraphPage extends Component { return (
- {GRAPH_TYPE_OPTIONS.map(option => + {GRAPH_TYPE_OPTIONS.map(option => ( this.handleGraphTypeChange(option.type)} /> - )} + ))}
- {overValue && + {overValue && ( -

- {overValue.name || '¯\\_(ツ)_/¯'} -

- } +

{overValue.name || '¯\\_(ツ)_/¯'}

+ + )}
); diff --git a/src/components/SearchTracePage/TraceSearchForm.js b/src/components/SearchTracePage/TraceSearchForm.js index 8f3fc18069..322ee5ce52 100644 --- a/src/components/SearchTracePage/TraceSearchForm.js +++ b/src/components/SearchTracePage/TraceSearchForm.js @@ -91,7 +91,7 @@ export function TraceSearchFormComponent(props) { />
- {!noSelectedService && + {!noSelectedService && (
({ text: op, value: op, key: op }))} /> -
} + + )}
@@ -127,7 +128,7 @@ export function TraceSearchFormComponent(props) {
- {selectedLookback === 'custom' && + {selectedLookback === 'custom' && (
@@ -138,9 +139,10 @@ export function TraceSearchFormComponent(props) {
- } + + )} - {selectedLookback === 'custom' && + {selectedLookback === 'custom' && (
@@ -151,7 +153,8 @@ export function TraceSearchFormComponent(props) {
- } + + )}
@@ -183,7 +186,7 @@ export function TraceSearchFormComponent(props) { } TraceSearchFormComponent.propTypes = { - handleSubmit: PropTypes.func, + handleSubmit: PropTypes.func.isRequired, submitting: PropTypes.bool, services: PropTypes.arrayOf( PropTypes.shape({ @@ -197,6 +200,9 @@ TraceSearchFormComponent.propTypes = { TraceSearchFormComponent.defaultProps = { services: [], + submitting: false, + selectedService: null, + selectedLookback: null, }; export const searchSideBarFormSelector = formValueSelector('searchSideBar'); @@ -300,7 +306,10 @@ const mapDispatchToProps = dispatch => { let end; if (lookback !== 'custom') { const unit = lookback.split('').pop(); - start = moment().subtract(parseInt(lookback, 10), unit).valueOf() * 1000; + start = + moment() + .subtract(parseInt(lookback, 10), unit) + .valueOf() * 1000; end = moment().valueOf() * 1000; } else { const times = getUnixTimeStampInMSFromForm({ diff --git a/src/components/SearchTracePage/TraceSearchResult.css b/src/components/SearchTracePage/TraceSearchResult.css index 132a0f20c1..094518c535 100644 --- a/src/components/SearchTracePage/TraceSearchResult.css +++ b/src/components/SearchTracePage/TraceSearchResult.css @@ -15,19 +15,19 @@ limitations under the License. */ .ui.header.trace-search-result--duration { - color: #11939A; + color: #11939a; } .trace-search-result:hover .ui.header.trace-search-result--duration { - color: #00474E; + color: #00474e; } .trace-search-result--spans { - display: inline-block; - margin-right: 0.5em; + display: inline-block; + margin-right: 0.5em; } .trace-search-result--erred-spans { - color: #c00; - display: inline-block; + color: #c00; + display: inline-block; } diff --git a/src/components/SearchTracePage/TraceSearchResult.js b/src/components/SearchTracePage/TraceSearchResult.js index 6be536a4c0..de1ef32a5a 100644 --- a/src/components/SearchTracePage/TraceSearchResult.js +++ b/src/components/SearchTracePage/TraceSearchResult.js @@ -36,12 +36,8 @@ export default function TraceSearchResult({ trace, durationPercent = 100 }) { background: getBackgroundStyle(durationPercent), }} > - - {traceName} - - - {formatDuration(duration * 1000)} - + {traceName} + {formatDuration(duration * 1000)}
@@ -49,17 +45,18 @@ export default function TraceSearchResult({ trace, durationPercent = 100 }) { {numberOfSpans} span{numberOfSpans > 1 && 's'} - {Boolean(numberOfErredSpans) && + {Boolean(numberOfErredSpans) && ( {numberOfErredSpans} error{numberOfErredSpans > 1 && 's'} - } + + )}
- {sortBy(services, s => s.name).map(service => + {sortBy(services, s => s.name).map(service => (
- )} + ))}
diff --git a/src/components/SearchTracePage/TraceSearchResult.test.js b/src/components/SearchTracePage/TraceSearchResult.test.js index 1721cc7c83..b0b368b3e0 100644 --- a/src/components/SearchTracePage/TraceSearchResult.test.js +++ b/src/components/SearchTracePage/TraceSearchResult.test.js @@ -34,7 +34,10 @@ const testTraceProps = { it(' should render base case correctly', () => { const wrapper = shallow(); - const numberOfSpanText = wrapper.find('.trace-search-result--spans').first().text(); + const numberOfSpanText = wrapper + .find('.trace-search-result--spans') + .first() + .text(); const numberOfServicesTags = wrapper.find(TraceServiceTag).length; expect(numberOfSpanText).toBe('5 spans'); expect(numberOfServicesTags).toBe(1); diff --git a/src/components/SearchTracePage/index.js b/src/components/SearchTracePage/index.js index e933a03a16..c47378ded2 100644 --- a/src/components/SearchTracePage/index.js +++ b/src/components/SearchTracePage/index.js @@ -37,7 +37,7 @@ import prefixUrl from '../../utils/prefix-url'; /** * Contains the dropdown to sort and filter trace search results */ -let TraceResultsFilterForm = () => +let TraceResultsFilterForm = () => (
@@ -49,7 +49,8 @@ let TraceResultsFilterForm = () =>
-
; +
+); TraceResultsFilterForm = reduxForm({ form: 'traceResultsFilters', @@ -90,80 +91,86 @@ export default class SearchTracePage extends Component {

Find Traces

- {!loadingServices && services - ? - :
-
-
} + {!loadingServices && services ? ( + + ) : ( +
+
+
+ )}
{loadingTraces &&
} {errorMessage && - !loadingTraces && -
- There was an error querying for traces:
- {errorMessage} -
} + !loadingTraces && ( +
+ There was an error querying for traces:
+ {errorMessage} +
+ )} {isHomepage && - !hasTraceResults && -
-
- presentation + !hasTraceResults && ( +
+
+ presentation +
-
} + )} {!isHomepage && !hasTraceResults && !loadingTraces && - !errorMessage && -
No trace results. Try another query.
} + !errorMessage && ( +
No trace results. Try another query.
+ )} {hasTraceResults && - !loadingTraces && -
+ !loadingTraces && (
-
-
- ({ - x: t.timestamp, - y: t.duration, - traceID: t.traceID, - size: t.numberOfSpans, - name: t.traceName, - }))} - onValueClick={t => { - this.props.history.push(`/trace/${t.traceID}`); - }} - /> -
-
-
- - {numberOfTraceResults} Trace - {numberOfTraceResults > 1 && 's'} - +
+
+
+ ({ + x: t.timestamp, + y: t.duration, + traceID: t.traceID, + size: t.numberOfSpans, + name: t.traceName, + }))} + onValueClick={t => { + this.props.history.push(`/trace/${t.traceID}`); + }} + />
-
- +
+
+ + {numberOfTraceResults} Trace + {numberOfTraceResults > 1 && 's'} + +
+
+ +
+
+
    + {traceResults.map(trace => ( +
  • + + + +
    • + ))} +
+
-
-
    - {traceResults.map(trace => -
  • - - - -
    • - )} -
-
-
} + )}
); diff --git a/src/components/TracePage/ScrollManager.js b/src/components/TracePage/ScrollManager.js index 9d47bb618c..df1923d0e5 100644 --- a/src/components/TracePage/ScrollManager.js +++ b/src/components/TracePage/ScrollManager.js @@ -39,8 +39,8 @@ export type Accessors = { }; interface Scroller { - scrollTo: number => void, - scrollBy: (number, ?boolean) => void, + scrollTo: number => void; + scrollBy: (number, ?boolean) => void; } /** @@ -104,6 +104,7 @@ export default class ScrollManager { const isUp = direction < 0; const position = xrs.getRowPosition(rowIndex); if (!position) { + // eslint-disable-next-line no-console console.warn('Invalid row index'); return; } diff --git a/src/components/TracePage/SpanGraph/Scrubber.css b/src/components/TracePage/SpanGraph/Scrubber.css index c0d42095f2..d9b222cbc7 100644 --- a/src/components/TracePage/SpanGraph/Scrubber.css +++ b/src/components/TracePage/SpanGraph/Scrubber.css @@ -20,27 +20,27 @@ limitations under the License. fill: #44f; } - .Scrubber.isDragging .Scrubber--handleExpansion, - .Scrubber--handles:hover > .Scrubber--handleExpansion { - fill-opacity: 1; - } +.Scrubber.isDragging .Scrubber--handleExpansion, +.Scrubber--handles:hover > .Scrubber--handleExpansion { + fill-opacity: 1; +} .Scrubber--handle { cursor: col-resize; fill: #555; } - .Scrubber.isDragging .Scrubber--handle, - .Scrubber--handles:hover > .Scrubber--handle { - fill: #44f; - } +.Scrubber.isDragging .Scrubber--handle, +.Scrubber--handles:hover > .Scrubber--handle { + fill: #44f; +} .Scrubber--line { pointer-events: none; stroke: #555; } - .Scrubber.isDragging > .Scrubber--line, - .Scrubber--handles:hover + .Scrubber--line { - stroke: #44f; - } +.Scrubber.isDragging > .Scrubber--line, +.Scrubber--handles:hover + .Scrubber--line { + stroke: #44f; +} diff --git a/src/components/TracePage/SpanGraph/TickLabels.js b/src/components/TracePage/SpanGraph/TickLabels.js index 788b3fd374..51b52f5de8 100644 --- a/src/components/TracePage/SpanGraph/TickLabels.js +++ b/src/components/TracePage/SpanGraph/TickLabels.js @@ -39,9 +39,5 @@ export default function TickLabels(props: TickLabelsProps) { ); } - return ( -
- {ticks} -
- ); + return
{ticks}
; } diff --git a/src/components/TracePage/SpanGraph/ViewingLayer.js b/src/components/TracePage/SpanGraph/ViewingLayer.js index c89ab6084f..174fc6d889 100644 --- a/src/components/TracePage/SpanGraph/ViewingLayer.js +++ b/src/components/TracePage/SpanGraph/ViewingLayer.js @@ -284,18 +284,20 @@ export default class ViewingLayer extends React.PureComponent - {leftInactive > 0 && - } - {rightInactive > 0 && + {leftInactive > 0 && ( + + )} + {rightInactive > 0 && ( } + /> + )} - {cursorPosition && + {cursorPosition && ( } + /> + )} {shiftStart != null && this._getMarkers(viewStart, shiftStart, true)} {shiftEnd != null && this._getMarkers(viewEnd, shiftEnd, true)} void, + updateTextFilter: string => void, + textFilter: ?string, + // these props are used by the `HEADER_ITEMS` + // eslint-disable-next-line react/no-unused-prop-types + timestamp: number, + // eslint-disable-next-line react/no-unused-prop-types + duration: number, + // eslint-disable-next-line react/no-unused-prop-types + numServices: number, + // eslint-disable-next-line react/no-unused-prop-types + maxDepth: number, + // eslint-disable-next-line react/no-unused-prop-types + numSpans: number, +}; + export const HEADER_ITEMS = [ { key: 'timestamp', title: 'Trace Start', - renderer: props => formatDatetime(props.timestamp), + propName: null, + renderer: (props: TracePageHeaderProps) => formatDatetime(props.timestamp), }, { key: 'duration', title: 'Duration', - renderer: props => formatDuration(props.duration), + propName: null, + renderer: (props: TracePageHeaderProps) => formatDuration(props.duration), }, { key: 'service-count', title: 'Services', propName: 'numServices', + renderer: null, }, { key: 'depth', title: 'Depth', propName: 'maxDepth', + renderer: null, }, { key: 'span-count', title: 'Total Spans', propName: 'numSpans', + renderer: null, }, ]; -export default function TracePageHeader(props) { +export default function TracePageHeader(props: TracePageHeaderProps) { const { traceID, name, slimView, onSlimViewClicked, updateTextFilter, textFilter } = props; if (!traceID) { @@ -59,7 +85,7 @@ export default function TracePageHeader(props) { - {!slimView && + {!slimView && (
- {HEADER_ITEMS.map(({ renderer, propName, title, key }) => -
- - {title}:{' '} - - {propName ? props[propName] : renderer(props)} -
- )} -
} + {HEADER_ITEMS.map(({ renderer, propName, title, key }) => { + let value: ?React.Node; + if (propName) { + value = props[propName]; + } else if (renderer) { + value = renderer(props); + } else { + throw new Error('Invalid HEADER_ITEM configuration'); + } + return ( +
+ {title}: + {value} +
+ ); + })} +
+ )} ); } - -TracePageHeader.propTypes = { - duration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types - maxDepth: PropTypes.number, // eslint-disable-line react/no-unused-prop-types - name: PropTypes.string, - numServices: PropTypes.number, // eslint-disable-line react/no-unused-prop-types - numSpans: PropTypes.number, // eslint-disable-line react/no-unused-prop-types - onSlimViewClicked: PropTypes.func, - slimView: PropTypes.bool, - textFilter: PropTypes.string, - timestamp: PropTypes.number, // eslint-disable-line react/no-unused-prop-types - traceID: PropTypes.string, - updateTextFilter: PropTypes.func.isRequired, -}; diff --git a/src/components/TracePage/TracePageHeader.test.js b/src/components/TracePage/TracePageHeader.test.js index cddadd9aab..26920f9f49 100644 --- a/src/components/TracePage/TracePageHeader.test.js +++ b/src/components/TracePage/TracePageHeader.test.js @@ -58,7 +58,10 @@ describe('', () => { const props = { ...defaultProps, updateTextFilter }; wrapper = shallow(); const event = { target: { value: 'my new value' } }; - wrapper.find('#trace-page__text-filter').first().prop('onChange')(event); + wrapper + .find('#trace-page__text-filter') + .first() + .prop('onChange')(event); expect(updateTextFilter.calledWith('my new value')).toBeTruthy(); }); }); diff --git a/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js b/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js index b9b821feb7..6045aabc4a 100644 --- a/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js +++ b/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js @@ -32,11 +32,7 @@ describe('', () => { function Item(props) { // eslint-disable-next-line react/prop-types const { children, ...rest } = props; - return ( -
- {children} -
- ); + return
{children}
; } function renderItem(itemKey, styles, itemIndex, attrs) { diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBar.css b/src/components/TracePage/TraceTimelineViewer/SpanBar.css index 121d3e4043..12dea165a0 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBar.css +++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.css @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ - .SpanBar--wrapper { bottom: 0; left: 0; @@ -48,7 +47,7 @@ limitations under the License. .SpanBar--label { font-size: 12px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1em; white-space: nowrap; padding: 0 0.5em; diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBar.js b/src/components/TracePage/TraceTimelineViewer/SpanBar.js index 2292208e0b..efeb7ebd3a 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBar.js +++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.js @@ -43,7 +43,13 @@ function SpanBar(props: SpanBarProps) { const { viewEnd, viewStart, color, label, hintSide, onClick, setLongLabel, setShortLabel, rpc } = props; return ( -
+
-
- {label} -
+
{label}
- {rpc && + {rpc && (
} + /> + )}
); } diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css index 1cf5a07ca1..788a0258a5 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css +++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css @@ -26,11 +26,11 @@ limitations under the License. } .span-row.clipping-left .span-name-column::before { - content: " "; + content: ' '; height: 100%; position: absolute; width: 6px; - background-image: linear-gradient(to right, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0.0)); + background-image: linear-gradient(to right, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0)); left: 100%; z-index: -1; } @@ -104,11 +104,11 @@ limitations under the License. } .span-row.clipping-right .span-view::before { - content: " "; + content: ' '; height: 100%; position: absolute; width: 6px; - background-image: linear-gradient(to left, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0.0)); + background-image: linear-gradient(to left, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0)); right: 0%; z-index: 1; } diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js index a7ca6ff9cc..510b9aec2d 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js +++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js @@ -135,16 +135,15 @@ export default class SpanBarRow extends React.PureComponent { > {showErrorIcon &&