From abf7fca2b12e484059fb0db4615267b0dc0e4070 Mon Sep 17 00:00:00 2001 From: Joe Farro Date: Thu, 16 Nov 2017 18:16:05 -0500 Subject: [PATCH 1/4] Update prettier to latest, apply to CSS files, too Signed-off-by: Joe Farro --- package.json | 12 +- src/actions/jaeger-api.test.js | 5 +- src/api/jaeger.js | 8 +- src/components/App/App.css | 24 +- src/components/App/NotFound.js | 21 +- src/components/App/Page.js | 4 +- src/components/App/TopNav.js | 4 +- .../DependencyGraph/DependencyForceGraph.js | 16 +- .../DependencyGraph/DependencyGraph.css | 2 +- src/components/DependencyGraph/index.js | 4 +- .../TraceResultsScatterPlot.js | 9 +- .../SearchTracePage/TraceSearchForm.js | 20 +- .../SearchTracePage/TraceSearchResult.css | 12 +- .../SearchTracePage/TraceSearchResult.js | 17 +- .../SearchTracePage/TraceSearchResult.test.js | 5 +- src/components/SearchTracePage/index.js | 125 +- src/components/TracePage/ScrollManager.js | 4 +- .../TracePage/SpanGraph/Scrubber.css | 24 +- .../TracePage/SpanGraph/TickLabels.js | 6 +- .../TracePage/SpanGraph/ViewingLayer.js | 15 +- .../TracePage/SpanGraph/render-into-canvas.js | 4 +- src/components/TracePage/TracePageHeader.js | 13 +- .../TracePage/TracePageHeader.test.js | 5 +- .../ListView/index.test.js | 6 +- .../TracePage/TraceTimelineViewer/SpanBar.css | 3 +- .../TracePage/TraceTimelineViewer/SpanBar.js | 9 +- .../TraceTimelineViewer/SpanBarRow.css | 8 +- .../TraceTimelineViewer/SpanBarRow.js | 9 +- .../SpanDetail/AccordianKeyValues.js | 8 +- .../SpanDetail/AccordianLogs.js | 9 +- .../SpanDetail/KeyValuesTable.js | 8 +- .../TraceTimelineViewer/SpanDetail/index.js | 40 +- .../SpanDetail/index.test.js | 5 +- .../TraceTimelineViewer/SpanDetailRow.css | 6 +- .../TraceTimelineViewer/SpanTreeOffset.js | 6 +- .../TracePage/TraceTimelineViewer/Ticks.js | 13 +- .../TimelineColumnResizer.css | 6 +- .../TimelineHeaderRow/TimelineHeaderRow.css | 2 +- .../TimelineViewingLayer.css | 2 +- .../TimelineHeaderRow/TimelineViewingLayer.js | 5 +- .../TraceTimelineViewer/TimelineRow.css | 2 +- .../VirtualizedTraceView.css | 2 +- .../TracePage/TraceTimelineViewer/grid.css | 1386 ++++++++--------- .../TracePage/TraceTimelineViewer/index.css | 28 +- src/components/TracePage/index.js | 10 +- src/types/search.js | 8 +- .../DraggableManager/demo/DividerDemo.css | 4 +- .../demo/DraggableManagerDemo.js | 8 +- .../DraggableManager/demo/RegionDemo.css | 2 +- src/utils/transform-trace.js | 9 +- yarn.lock | 4 +- 51 files changed, 984 insertions(+), 983 deletions(-) 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..8a081ae468 100644 --- a/src/components/App/NotFound.js +++ b/src/components/App/NotFound.js @@ -23,23 +23,16 @@ export default function NotFound({ error }) {
-

- {'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'}
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/App/TopNav.js b/src/components/App/TopNav.js index b943ab67ce..516ca881ad 100644 --- a/src/components/App/TopNav.js +++ b/src/components/App/TopNav.js @@ -79,11 +79,11 @@ export default function TopNav(props: TopNavProps) {
- {NAV_LINKS.map(({ key, to, text }) => + {NAV_LINKS.map(({ key, to, text }) => ( {text} - )} + ))}
{menuItems.map(item => { if (item.items) { 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..e7272ae488 100644 --- a/src/components/DependencyGraph/index.js +++ b/src/components/DependencyGraph/index.js @@ -85,14 +85,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..6bd173e579 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) {
- } + + )}
@@ -300,7 +303,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..d68db4b02a 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; } /** 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)}
- {!slimView && + {!slimView && (
- {HEADER_ITEMS.map(({ renderer, propName, title, key }) => + {HEADER_ITEMS.map(({ renderer, propName, title, key }) => (
- - {title}:{' '} - + {title}: {propName ? props[propName] : renderer(props)}
- )} -
} + ))} +
+ )} ); } 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..aba8e8b6c1 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBar.js +++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.js @@ -53,11 +53,9 @@ function SpanBar(props: SpanBarProps) { width: toPercent(viewEnd - viewStart), }} > -
- {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 &&