Update prettier and wrap at 110 instead of 80

package.json

@@ -17,6 +17,7 @@
     "eslint-plugin-react": "7.1.0",
     "husky": "^0.13.3",
     "lint-staged": "^3.4.0",
+    "prettier": "^1.5.3",
     "react-scripts": "^0.9.5",
     "sets-equal": "^1.0.0",
     "sinon": "^1.17.5",
@@ -38,7 +39,6 @@
     "json-markup": "^1.0.0",
     "lodash": "^4.17.2",
     "moment": "^2.14.1",
-    "prettier": "^0.22.0",
     "prop-types": "^15.5.10",
     "query-string": "^4.2.3",
     "react": "^15.5.0",
@@ -78,7 +78,7 @@
     "coverage": "npm run test -- --coverage",
     "lint": "npm run eslint && npm run prettier && npm run flow",
     "eslint": "eslint .",
-    "prettier": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\"",
+    "prettier": "prettier --single-quote --trailing-comma es5 --print-width 110 --write \"src/**/*.js\"",
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "set-homepage": "json -I -f package.json -e 'this.homepage=process.env.HOMEPAGE'",
     "clear-homepage": "json -I -f package.json -e 'delete this.homepage'",

src/actions/jaeger-api.js

@@ -37,16 +37,14 @@ export const searchTraces = createAction(
   query => ({ query })
 );
 
-export const fetchServices = createAction('@JAEGER_API/FETCH_SERVICES', () =>
-  JaegerAPI.fetchServices());
+export const fetchServices = createAction('@JAEGER_API/FETCH_SERVICES', () => JaegerAPI.fetchServices());
 
 export const fetchServiceOperations = createAction(
   '@JAEGER_API/FETCH_SERVICE_OPERATIONS',
   serviceName => JaegerAPI.fetchServiceOperations(serviceName),
   serviceName => ({ serviceName })
 );
 
-export const fetchDependencies = createAction(
-  '@JAEGER_API/FETCH_DEPENDENCIES',
-  () => JaegerAPI.fetchDependencies()
+export const fetchDependencies = createAction('@JAEGER_API/FETCH_DEPENDENCIES', () =>
+  JaegerAPI.fetchDependencies()
 );

src/actions/jaeger-api.test.js

@@ -104,10 +104,7 @@ 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();

src/api/jaeger.js

@@ -34,9 +34,7 @@ function getJSON(url, query) {
       return response
         .json()
         .then(({ errors = [] }) => {
-          throw new Error(
-            errors.length > 0 ? errors[0].msg : 'An unknown error occurred.'
-          );
+          throw new Error(errors.length > 0 ? errors[0].msg : 'An unknown error occurred.');
         })
         .catch(
           (/* err */) => {
@@ -50,9 +48,7 @@ function getJSON(url, query) {
 }
 
 export const DEFAULT_API_ROOT = '/api/';
-export const DEFAULT_DEPENDENCY_LOOKBACK = moment
-  .duration(1, 'weeks')
-  .asMilliseconds();
+export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMilliseconds();
 
 const JaegerAPI = {
   apiRoot: DEFAULT_API_ROOT,
@@ -68,10 +64,7 @@ const JaegerAPI = {
   fetchServiceOperations(serviceName) {
     return getJSON(`${this.apiRoot}services/${serviceName}/operations`);
   },
-  fetchDependencies(
-    endTs = new Date().getTime(),
-    lookback = DEFAULT_DEPENDENCY_LOOKBACK
-  ) {
+  fetchDependencies(endTs = new Date().getTime(), lookback = DEFAULT_DEPENDENCY_LOOKBACK) {
     return getJSON(`${this.apiRoot}dependencies`, { endTs, lookback });
   },
 };

src/api/jaeger.test.js

@@ -29,8 +29,10 @@ jest.mock('isomorphic-fetch', () =>
         resolve({
           status: 200,
           data: () => Promise.resolve({ data: null }),
-        }))
-  ));
+        })
+      )
+  )
+);
 
 const fetchMock = require('isomorphic-fetch');
 
@@ -49,8 +51,7 @@ it('fetchTrace() should resolve the whole response', () => {
     })
   );
 
-  return JaegerAPI.fetchTrace('trace-id').then(resp =>
-    expect(resp.data).toBe(generatedTraces));
+  return JaegerAPI.fetchTrace('trace-id').then(resp => expect(resp.data).toBe(generatedTraces));
 });
 
 it('fetchTrace() should reject with a bad status code', () => {

src/components/App/NotFound.js

@@ -27,17 +27,23 @@ export default function NotFound({ error }) {
     <section className="ui container">
       <div className="ui center aligned basic segment">
         <div className="ui center aligned basic segment">
-          <h1>{'404'}</h1>
+          <h1>
+            {'404'}
+          </h1>
           <p>
             {"Looks like you tried to access something that doesn't exist."}
           </p>
         </div>
         {error &&
           <div className="ui red message">
-            <p>{error.toString()}</p>
+            <p>
+              {error.toString()}
+            </p>
           </div>}
         <div className="ui center aligned basic segment">
-          <Link to="/">{'Back home'}</Link>
+          <Link to="/">
+            {'Back home'}
+          </Link>
         </div>
       </div>
     </section>

src/components/App/TopNav.js

@@ -46,9 +46,11 @@ export default function TopNav() {
         <div className="ui input">
           <TraceIDSearchInput />
         </div>
-        {NAV_LINKS.map(({ key, to, text }) => (
-          <Link key={key} to={to} className="item">{text}</Link>
-        ))}
+        {NAV_LINKS.map(({ key, to, text }) =>
+          <Link key={key} to={to} className="item">
+            {text}
+          </Link>
+        )}
       </div>
     </nav>
   );

src/components/App/index.js

@@ -70,10 +70,7 @@ export default class JaegerUIApp extends Component {
           <Route path="/" component={PageWithMetrics}>
             <Route path="/search" component={ConnectedSearchTracePage} />
             <Route path="/trace/:id" component={ConnectedTracePage} />
-            <Route
-              path="/dependencies"
-              component={ConnectedDependencyGraphPage}
-            />
+            <Route path="/dependencies" component={ConnectedDependencyGraphPage} />
             <Route path="*" component={NotFound} />
             <IndexRedirect to="/search" />
           </Route>

src/components/DependencyGraph/DependencyForceGraph.js

@@ -19,18 +19,13 @@
 // THE SOFTWARE.
 
 import React, { Component } from 'react';
-import {
-  InteractiveForceGraph,
-  ForceGraphNode,
-  ForceGraphLink,
-} from 'react-vis-force';
+import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force';
 import { window } from 'global';
 import { debounce } from 'lodash';
 
 import { nodesPropTypes, linksPropTypes } from '../../propTypes/dependencies';
 
-const chargeStrength = ({ radius = 5, orphan }) =>
-  orphan ? -20 * radius : -12 * radius;
+const chargeStrength = ({ radius = 5, orphan }) => (orphan ? -20 * radius : -12 * radius);
 
 export default class DependencyForceGraph extends Component {
   static get propTypes() {
@@ -102,14 +97,7 @@ export default class DependencyForceGraph extends Component {
           nodeAttrs={['orphan']}
           highlightDependencies
         >
-          {nodes.map(({
-            labelStyle,
-            labelClass,
-            showLabel,
-            opacity,
-            fill,
-            ...node
-          }) => (
+          {nodes.map(({ labelStyle, labelClass, showLabel, opacity, fill, ...node }) =>
             <ForceGraphNode
               key={node.id}
               node={node}
@@ -119,14 +107,10 @@ export default class DependencyForceGraph extends Component {
               opacity={opacity}
               fill={fill}
             />
-          ))}
-          {links.map(({ opacity, ...link }) => (
-            <ForceGraphLink
-              key={`${link.source}=>${link.target}`}
-              opacity={opacity}
-              link={link}
-            />
-          ))}
+          )}
+          {links.map(({ opacity, ...link }) =>
+            <ForceGraphLink key={`${link.source}=>${link.target}`} opacity={opacity} link={link} />
+          )}
         </InteractiveForceGraph>
       </div>
     );

src/components/DependencyGraph/index.js

@@ -26,9 +26,7 @@ import { Menu } from 'semantic-ui-react';
 
 import './DependencyGraph.css';
 import * as jaegerApiActions from '../../actions/jaeger-api';
-import {
-  formatDependenciesAsNodesAndLinks,
-} from '../../selectors/dependencies';
+import { formatDependenciesAsNodesAndLinks } from '../../selectors/dependencies';
 import NotFound from '../App/NotFound';
 import { nodesPropTypes, linksPropTypes } from '../../propTypes/dependencies';
 
@@ -80,31 +78,27 @@ export default class DependencyGraphPage extends Component {
       return (
         <div className="m1">
           <div className="ui warning message">
-            <div className="header">
-              No service dependencies found.
-            </div>
+            <div className="header">No service dependencies found.</div>
           </div>
         </div>
       );
     }
 
-    const GRAPH_TYPE_OPTIONS = [
-      { type: 'FORCE_DIRECTED', name: 'Force Directed Graph' },
-    ];
+    const GRAPH_TYPE_OPTIONS = [{ type: 'FORCE_DIRECTED', name: 'Force Directed Graph' }];
 
     if (serviceCalls.length <= 100) {
       GRAPH_TYPE_OPTIONS.push({ type: 'DAG', name: 'DAG' });
     }
     return (
       <div className="my2">
         <Menu tabular>
-          {GRAPH_TYPE_OPTIONS.map(option => (
+          {GRAPH_TYPE_OPTIONS.map(option =>
             <Menu.Item
               name={option.name}
               active={graphType === option.type}
               onClick={() => this.handleGraphTypeChange(option.type)}
             />
-          ))}
+          )}
         </Menu>
         <div
           style={{
@@ -117,8 +111,7 @@ export default class DependencyGraphPage extends Component {
             background: 'whitesmoke',
           }}
         >
-          {graphType === 'FORCE_DIRECTED' &&
-            <DependencyForceGraph nodes={nodes} links={links} />}
+          {graphType === 'FORCE_DIRECTED' && <DependencyForceGraph nodes={nodes} links={links} />}
           {graphType === 'DAG' && <DAG serviceCalls={serviceCalls} />}
         </div>
       </div>
@@ -147,7 +140,4 @@ function mapDispatchToProps(dispatch) {
   return { fetchDependencies };
 }
 
-export const ConnectedDependencyGraphPage = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(DependencyGraphPage);
+export const ConnectedDependencyGraphPage = connect(mapStateToProps, mapDispatchToProps)(DependencyGraphPage);

src/components/SearchTracePage/SearchDropdownInput.js

@@ -38,10 +38,7 @@ export default class SearchDropdownInput extends Component {
     };
   }
   componentWillReceiveProps(nextProps) {
-    if (
-      this.props.items.map(i => i.text).join(',') !==
-      nextProps.items.map(i => i.text).join(',')
-    ) {
+    if (this.props.items.map(i => i.text).join(',') !== nextProps.items.map(i => i.text).join(',')) {
       this.setState({
         items: nextProps.items,
         currentItems: nextProps.items.slice(0, nextProps.maxResults),
@@ -50,9 +47,7 @@ export default class SearchDropdownInput extends Component {
   }
   onSearch(items, v) {
     const { maxResults } = this.props;
-    return this.state.items
-      .filter(i => i.text.startsWith(v))
-      .slice(0, maxResults);
+    return this.state.items.filter(i => i.text.startsWith(v)).slice(0, maxResults);
   }
   render() {
     const { input: { value, onChange } } = this.props;

src/components/SearchTracePage/TraceResultsScatterPlot.js

@@ -39,16 +39,8 @@ function TraceResultsScatterPlot(props) {
         width={containerWidth}
         height={200}
       >
-        <XAxis
-          title="Time"
-          tickTotal={4}
-          tickFormat={t => moment(t).format('hh:mm:ss a')}
-        />
-        <YAxis
-          title="Duration"
-          tickTotal={3}
-          tickFormat={t => formatDuration(t, 'milliseconds')}
-        />
+        <XAxis title="Time" tickTotal={4} tickFormat={t => moment(t).format('hh:mm:ss a')} />
+        <YAxis title="Duration" tickTotal={3} tickFormat={t => formatDuration(t, 'milliseconds')} />
         <MarkSeries size={3} onValueClick={onValueClick} data={data} />
       </XYPlot>
     </div>