zipkin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From adrianc...@apache.org
Subject [incubator-zipkin] 02/02: Change suffix js -> jsx
Date Fri, 10 May 2019 05:06:20 GMT
This is an automated email from the ASF dual-hosted git repository.

adriancole pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-zipkin.git

commit d1792430d0922e36be00431c682db918b29cceb6
Author: tacigar <ig.lhound@gmail.com>
AuthorDate: Fri May 10 13:11:52 2019 +0900

    Change suffix js -> jsx
---
 .../src/components/App/{index.js => App.jsx}       |   0
 .../components/App/{index.test.js => App.test.js}  |   2 +-
 .../src/components/App/{Layout.js => Layout.jsx}   |   0
 .../App/Sidebar/{index.js => Sidebar.jsx}          |   0
 .../App/Sidebar/{index.test.js => Sidebar.test.js} |   2 +-
 ...{SidebarPageOption.js => SidebarPageOption.jsx} |   0
 zipkin-lens/src/components/App/Sidebar/index.js    |  84 +---
 zipkin-lens/src/components/App/index.js            |  52 +--
 .../components/Browser/{index.js => Browser.jsx}   |   0
 .../Browser/{index.test.js => Browser.test.js}     |   2 +-
 .../{BrowserHeader.js => BrowserHeader.jsx}        |   0
 .../{BrowserResults.js => BrowserResults.jsx}      |   0
 .../TraceSummary/{index.js => TraceSummary.jsx}    |   0
 .../{index.test.js => TraceSummary.test.js}        |   2 +-
 .../{TraceSummaryBar.js => TraceSummaryBar.jsx}    |   0
 ...ceSummaryButtons.js => TraceSummaryButtons.jsx} |   0
 ...SummaryUpperBar.js => TraceSummaryUpperBar.jsx} |   0
 .../src/components/Browser/TraceSummary/index.js   | 103 +----
 zipkin-lens/src/components/Browser/index.js        |  57 +--
 .../Common/{DatePicker.js => DatePicker.jsx}       |   0
 .../{LoadingOverlay.js => LoadingOverlay.jsx}      |   0
 .../{ServiceNameBadge.js => ServiceNameBadge.jsx}  |   0
 .../Dependencies/{index.js => Dependencies.jsx}    |   0
 .../{index.test.js => Dependencies.test.js}        |   2 +-
 ...{DependenciesGraph.js => DependenciesGraph.jsx} |   0
 ...endenciesSidebar.js => DependenciesSidebar.jsx} |   0
 .../{VizceralExt.js => VizceralExt.jsx}            |   0
 zipkin-lens/src/components/Dependencies/index.js   | 213 +---------
 .../DetailedTraceSummary/{index.js => index.jsx}   |   0
 ...{ConditionDuration.js => ConditionDuration.jsx} |   0
 .../{ConditionLimit.js => ConditionLimit.jsx}      |   0
 ...{ConditionLookback.js => ConditionLookback.jsx} |   0
 .../{ConditionName.js => ConditionName.jsx}        |   0
 .../{ConditionTags.js => ConditionTags.jsx}        |   0
 ...lobalDropdownMenu.js => GlobalDropdownMenu.jsx} |   0
 .../GlobalSearch/{index.js => GlobalSearch.jsx}    |   0
 .../{SearchCondition.js => SearchCondition.jsx}    |   0
 zipkin-lens/src/components/GlobalSearch/index.js   | 439 +--------------------
 .../MiniTimeline/{index.js => MiniTimeline.jsx}    |   0
 .../{index.test.js => MiniTimeline.test.js}        |   2 +-
 ...{MiniTimelineGraph.js => MiniTimelineGraph.jsx} |   0
 ...{MiniTimelineLabel.js => MiniTimelineLabel.jsx} |   0
 ...iniTimelineSlider.js => MiniTimelineSlider.jsx} |   0
 ...eTimeMarkers.js => MiniTimelineTimeMarkers.jsx} |   0
 zipkin-lens/src/components/MiniTimeline/index.js   |  53 +--
 .../components/Timeline/{index.js => Timeline.jsx} |   0
 .../{TimelineHeader.js => TimelineHeader.jsx}      |   0
 .../Timeline/{TimelineSpan.js => TimelineSpan.jsx} |   0
 .../{TimelineSpanData.js => TimelineSpanData.jsx}  |   0
 zipkin-lens/src/components/Timeline/index.js       | 151 +------
 .../components/TracePage/{index.js => index.jsx}   |   0
 .../components/TraceViewer/{index.js => index.jsx} |   0
 52 files changed, 14 insertions(+), 1150 deletions(-)

diff --git a/zipkin-lens/src/components/App/index.js b/zipkin-lens/src/components/App/App.jsx
similarity index 100%
copy from zipkin-lens/src/components/App/index.js
copy to zipkin-lens/src/components/App/App.jsx
diff --git a/zipkin-lens/src/components/App/index.test.js b/zipkin-lens/src/components/App/App.test.js
similarity index 98%
rename from zipkin-lens/src/components/App/index.test.js
rename to zipkin-lens/src/components/App/App.test.js
index e50c875..58635c4 100644
--- a/zipkin-lens/src/components/App/index.test.js
+++ b/zipkin-lens/src/components/App/App.test.js
@@ -19,7 +19,7 @@ import { Provider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { shallow } from 'enzyme';
 
-import App from './index';
+import App from './App';
 import Layout from './Layout';
 
 describe('<App />', () => {
diff --git a/zipkin-lens/src/components/App/Layout.js b/zipkin-lens/src/components/App/Layout.jsx
similarity index 100%
rename from zipkin-lens/src/components/App/Layout.js
rename to zipkin-lens/src/components/App/Layout.jsx
diff --git a/zipkin-lens/src/components/App/Sidebar/index.js b/zipkin-lens/src/components/App/Sidebar/Sidebar.jsx
similarity index 100%
copy from zipkin-lens/src/components/App/Sidebar/index.js
copy to zipkin-lens/src/components/App/Sidebar/Sidebar.jsx
diff --git a/zipkin-lens/src/components/App/Sidebar/index.test.js b/zipkin-lens/src/components/App/Sidebar/Sidebar.test.js
similarity index 98%
rename from zipkin-lens/src/components/App/Sidebar/index.test.js
rename to zipkin-lens/src/components/App/Sidebar/Sidebar.test.js
index 3464ef4..00a1d4f 100644
--- a/zipkin-lens/src/components/App/Sidebar/index.test.js
+++ b/zipkin-lens/src/components/App/Sidebar/Sidebar.test.js
@@ -18,7 +18,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Cookies from 'js-cookie';
 
-import Sidebar from './index';
+import Sidebar from './Sidebar';
 
 describe('<Sidebar />', () => {
   it('should have proper classes', () => {
diff --git a/zipkin-lens/src/components/App/Sidebar/SidebarPageOption.js b/zipkin-lens/src/components/App/Sidebar/SidebarPageOption.jsx
similarity index 100%
rename from zipkin-lens/src/components/App/Sidebar/SidebarPageOption.js
rename to zipkin-lens/src/components/App/Sidebar/SidebarPageOption.jsx
diff --git a/zipkin-lens/src/components/App/Sidebar/index.js b/zipkin-lens/src/components/App/Sidebar/index.js
index e4c6299..928f3ed 100644
--- a/zipkin-lens/src/components/App/Sidebar/index.js
+++ b/zipkin-lens/src/components/App/Sidebar/index.js
@@ -14,86 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router';
-import Cookies from 'js-cookie';
-
-import SidebarPageOption from './SidebarPageOption';
-import Logo from '../../../img/zipkin-logo.svg';
-
-const propTypes = {
-  location: PropTypes.shape({ pathname: PropTypes.string }).isRequired,
-  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
-};
-
-class Sidebar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.goBackToClassic = this.goBackToClassic.bind(this);
-  }
-
-  goBackToClassic(event) {
-    const { location, history } = this.props;
-
-    Cookies.remove('lens');
-    if (location.pathname === '/zipkin') {
-      history.push('/zipkin/');
-    } else {
-      history.push(`${location.pathname}`);
-    }
-    window.location.reload(true);
-    event.preventDefault();
-  }
-
-  render() {
-    const { location } = this.props;
-    return (
-      <div className="sidebar">
-        <div
-          to={{ pathname: '' }}
-          className="sidebar__brand-link"
-        >
-          <Logo className="sidebar__brand-logo" />
-        </div>
-        <div className="sidebar__menu">
-          <SidebarPageOption location={location} pageName="browser" />
-          <SidebarPageOption location={location} pageName="dependencies" />
-        </div>
-        {
-          Cookies.get('lens')
-            ? (
-              <div className="sidebar__go-back-to-classic-button-wrapper">
-                <button
-                  type="button"
-                  className="sidebar__go-back-to-classic-button"
-                  onClick={this.goBackToClassic}
-                >
-                  Go back to classic Zipkin
-                </button>
-              </div>
-            )
-            : null
-        }
-        <div className="sidebar__other-links">
-          <a href="https://zipkin.apache.org/" target="_blank" rel="noopener noreferrer">
-            <div className="sidebar__other-link fas fa-home" />
-          </a>
-          <a href="https://github.com/openzipkin/zipkin" target="_blank" rel="noopener noreferrer">
-            <div className="sidebar__other-link fab fa-github" />
-          </a>
-          <a href="https://twitter.com/zipkinproject" target="_blank" rel="noopener noreferrer">
-            <div className="sidebar__other-link fab fa-twitter" />
-          </a>
-          <a href="https://gitter.im/openzipkin/zipkin/" target="_blank" rel="noopener noreferrer">
-            <div className="sidebar__other-link fab fa-gitter" />
-          </a>
-        </div>
-      </div>
-    );
-  }
-}
-
-Sidebar.propTypes = propTypes;
-
-export default withRouter(Sidebar);
+export { default } from './Sidebar';
diff --git a/zipkin-lens/src/components/App/index.js b/zipkin-lens/src/components/App/index.js
index 488338c..9b47f5d 100644
--- a/zipkin-lens/src/components/App/index.js
+++ b/zipkin-lens/src/components/App/index.js
@@ -14,54 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Provider } from 'react-redux';
-import { BrowserRouter, Route } from 'react-router-dom';
-
-import Layout from './Layout';
-import BrowserContainer from '../../containers/Browser/BrowserContainer';
-import TracePageContainer from '../../containers/TracePage/TracePageContainer';
-import DependenciesContainer from '../../containers/Dependencies/DependenciesContainer';
-import TraceViewerContainer from '../../containers/TraceViewer/TraceViewerContainer';
-import configureStore from '../../store/configure-store';
-
-const applicationTitle = 'Zipkin';
-
-class App extends React.Component {
-  componentDidMount() {
-    document.title = applicationTitle;
-  }
-
-  render() {
-    return (
-      <Provider store={configureStore()}>
-        <BrowserRouter>
-          <Layout>
-            <Route
-              exact
-              path="/zipkin/"
-              component={BrowserContainer}
-            />
-            <Route
-              exact
-              path="/zipkin/traces/:traceId"
-              component={TracePageContainer}
-            />
-            <Route
-              exact
-              path="/zipkin/dependency"
-              component={DependenciesContainer}
-            />
-            <Route
-              exact
-              path="/zipkin/traceViewer"
-              render={TraceViewerContainer}
-            />
-          </Layout>
-        </BrowserRouter>
-      </Provider>
-    );
-  }
-}
-
-export default App;
+export { default } from './App';
diff --git a/zipkin-lens/src/components/Browser/index.js b/zipkin-lens/src/components/Browser/Browser.jsx
similarity index 100%
copy from zipkin-lens/src/components/Browser/index.js
copy to zipkin-lens/src/components/Browser/Browser.jsx
diff --git a/zipkin-lens/src/components/Browser/index.test.js b/zipkin-lens/src/components/Browser/Browser.test.js
similarity index 98%
rename from zipkin-lens/src/components/Browser/index.test.js
rename to zipkin-lens/src/components/Browser/Browser.test.js
index d86f9c5..9bcbe23 100644
--- a/zipkin-lens/src/components/Browser/index.test.js
+++ b/zipkin-lens/src/components/Browser/Browser.test.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Browser from './index';
+import Browser from './Browser';
 import BrowserHeader from './BrowserHeader';
 import { sortingMethods } from './sorting';
 
diff --git a/zipkin-lens/src/components/Browser/BrowserHeader.js b/zipkin-lens/src/components/Browser/BrowserHeader.jsx
similarity index 100%
rename from zipkin-lens/src/components/Browser/BrowserHeader.js
rename to zipkin-lens/src/components/Browser/BrowserHeader.jsx
diff --git a/zipkin-lens/src/components/Browser/BrowserResults.js b/zipkin-lens/src/components/Browser/BrowserResults.jsx
similarity index 100%
rename from zipkin-lens/src/components/Browser/BrowserResults.js
rename to zipkin-lens/src/components/Browser/BrowserResults.jsx
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/index.js b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummary.jsx
similarity index 100%
copy from zipkin-lens/src/components/Browser/TraceSummary/index.js
copy to zipkin-lens/src/components/Browser/TraceSummary/TraceSummary.jsx
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/index.test.js b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummary.test.js
similarity index 97%
rename from zipkin-lens/src/components/Browser/TraceSummary/index.test.js
rename to zipkin-lens/src/components/Browser/TraceSummary/TraceSummary.test.js
index 5589d06..67497dc 100644
--- a/zipkin-lens/src/components/Browser/TraceSummary/index.test.js
+++ b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummary.test.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import TraceSummary from './index';
+import TraceSummary from './TraceSummary';
 
 jest.mock('../../../zipkin', () => ({
   ...(jest.requireActual('../../../zipkin')),
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryBar.js b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryBar.jsx
similarity index 100%
rename from zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryBar.js
rename to zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryBar.jsx
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryButtons.js b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryButtons.jsx
similarity index 100%
rename from zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryButtons.js
rename to zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryButtons.jsx
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryUpperBar.js b/zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryUpperBar.jsx
similarity index 100%
rename from zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryUpperBar.js
rename to zipkin-lens/src/components/Browser/TraceSummary/TraceSummaryUpperBar.jsx
diff --git a/zipkin-lens/src/components/Browser/TraceSummary/index.js b/zipkin-lens/src/components/Browser/TraceSummary/index.js
index f80af93..e3c01c0 100644
--- a/zipkin-lens/src/components/Browser/TraceSummary/index.js
+++ b/zipkin-lens/src/components/Browser/TraceSummary/index.js
@@ -14,105 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import TraceSummaryBar from './TraceSummaryBar';
-import TraceSummaryUpperBar from './TraceSummaryUpperBar';
-import TraceSummaryButtons from './TraceSummaryButtons';
-import Timeline from '../../Timeline';
-import ServiceNameBadge from '../../Common/ServiceNameBadge';
-import { detailedTraceSummary } from '../../../zipkin';
-import { traceSummaryPropTypes } from '../../../prop-types';
-
-const propTypes = {
-  traceSummary: traceSummaryPropTypes.isRequired,
-  skewCorrectedTrace: PropTypes.shape({}).isRequired,
-};
-
-class TraceSummary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isTimelineOpened: false };
-    this.handleTimelineOpenToggle = this.handleTimelineOpenToggle.bind(this);
-  }
-
-  handleTimelineOpenToggle(event) {
-    const { isTimelineOpened } = this.state;
-    this.setState({ isTimelineOpened: !isTimelineOpened });
-    event.stopPropagation();
-  }
-
-  render() {
-    const { traceSummary, skewCorrectedTrace } = this.props;
-    const { isTimelineOpened } = this.state;
-
-    const detailedTrace = detailedTraceSummary(skewCorrectedTrace);
-
-    return (
-      <div className="trace-summary">
-        <div
-          className="trace-summary__summary"
-          role="presentation"
-          onClick={this.handleTimelineOpenToggle}
-          data-test="summary"
-        >
-          <div className="trace-summary__trace-id">
-            Trace ID:&nbsp;
-            <b>
-              {traceSummary.traceId}
-            </b>
-          </div>
-          <div className="trace-summary__bars-and-buttons">
-            <div className="trace-summary__bars">
-              <TraceSummaryUpperBar traceSummary={traceSummary} />
-              {
-                traceSummary.servicePercentage != null && typeof traceSummary.servicePercentage !== 'undefined'
-                  ? (
-                    <TraceSummaryBar
-                      width={traceSummary.servicePercentage}
-                      infoClass={traceSummary.infoClass}
-                    >
-                      {traceSummary.servicePercentage}
-                      %
-                    </TraceSummaryBar>
-                  )
-                  : null
-              }
-            </div>
-            <TraceSummaryButtons traceId={traceSummary.traceId} />
-          </div>
-          <div className="trace-summary__service-badges">
-            {
-              traceSummary.serviceSummaries.map(serviceSummary => (
-                <div key={serviceSummary.serviceName} className="trace-summary__badge-wrapper">
-                  <ServiceNameBadge
-                    serviceName={serviceSummary.serviceName}
-                    count={serviceSummary.spanCount}
-                  />
-                </div>
-              ))
-            }
-          </div>
-        </div>
-        {
-          isTimelineOpened
-            ? (
-              <div className="trace-summary__timeline-wrapper">
-                <Timeline
-                  startTs={0}
-                  endTs={detailedTrace.duration}
-                  traceSummary={detailedTrace}
-                />
-              </div>
-            )
-            : null
-        }
-      </div>
-    );
-  }
-}
-
-TraceSummary.propTypes = propTypes;
-
-export default TraceSummary;
+export { default } from './TraceSummary';
diff --git a/zipkin-lens/src/components/Browser/index.js b/zipkin-lens/src/components/Browser/index.js
index 4cc12e1..e8e914b 100644
--- a/zipkin-lens/src/components/Browser/index.js
+++ b/zipkin-lens/src/components/Browser/index.js
@@ -14,59 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { sortingMethods } from './sorting';
-import BrowserHeader from './BrowserHeader';
-import BrowserResults from './BrowserResults';
-import LoadingOverlay from '../Common/LoadingOverlay';
-import { traceSummariesPropTypes } from '../../prop-types';
-
-const propTypes = {
-  traceSummaries: traceSummariesPropTypes.isRequired,
-  tracesMap: PropTypes.shape({}).isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  clearTraces: PropTypes.func.isRequired,
-};
-
-class Browser extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { sortingMethod: sortingMethods.LONGEST };
-    this.handleSortingMethodChange = this.handleSortingMethodChange.bind(this);
-  }
-
-  componentWillUnmount() {
-    const { clearTraces } = this.props;
-    clearTraces();
-  }
-
-  handleSortingMethodChange(selected) {
-    this.setState({ sortingMethod: selected.value });
-  }
-
-  render() {
-    const { isLoading, traceSummaries, tracesMap } = this.props;
-    const { sortingMethod } = this.state;
-    return (
-      <div className="browser">
-        <LoadingOverlay active={isLoading} />
-        <BrowserHeader
-          numTraces={traceSummaries.length}
-          sortingMethod={sortingMethod}
-          onChange={this.handleSortingMethodChange}
-        />
-        <BrowserResults
-          traceSummaries={traceSummaries}
-          sortingMethod={sortingMethod}
-          tracesMap={tracesMap}
-        />
-      </div>
-    );
-  }
-}
-
-Browser.propTypes = propTypes;
-
-export default Browser;
+export { default } from './Browser';
diff --git a/zipkin-lens/src/components/Common/DatePicker.js b/zipkin-lens/src/components/Common/DatePicker.jsx
similarity index 100%
rename from zipkin-lens/src/components/Common/DatePicker.js
rename to zipkin-lens/src/components/Common/DatePicker.jsx
diff --git a/zipkin-lens/src/components/Common/LoadingOverlay.js b/zipkin-lens/src/components/Common/LoadingOverlay.jsx
similarity index 100%
rename from zipkin-lens/src/components/Common/LoadingOverlay.js
rename to zipkin-lens/src/components/Common/LoadingOverlay.jsx
diff --git a/zipkin-lens/src/components/Common/ServiceNameBadge.js b/zipkin-lens/src/components/Common/ServiceNameBadge.jsx
similarity index 100%
rename from zipkin-lens/src/components/Common/ServiceNameBadge.js
rename to zipkin-lens/src/components/Common/ServiceNameBadge.jsx
diff --git a/zipkin-lens/src/components/Dependencies/index.js b/zipkin-lens/src/components/Dependencies/Dependencies.jsx
similarity index 100%
copy from zipkin-lens/src/components/Dependencies/index.js
copy to zipkin-lens/src/components/Dependencies/Dependencies.jsx
diff --git a/zipkin-lens/src/components/Dependencies/index.test.js b/zipkin-lens/src/components/Dependencies/Dependencies.test.js
similarity index 98%
rename from zipkin-lens/src/components/Dependencies/index.test.js
rename to zipkin-lens/src/components/Dependencies/Dependencies.test.js
index a981012..c79fba2 100644
--- a/zipkin-lens/src/components/Dependencies/index.test.js
+++ b/zipkin-lens/src/components/Dependencies/Dependencies.test.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Dependencies } from './index';
+import { Dependencies } from './Dependencies';
 
 describe('<Dependencies>', () => {
   it('should not fetch dependencies when location.search is empty', () => {
diff --git a/zipkin-lens/src/components/Dependencies/DependenciesGraph.js b/zipkin-lens/src/components/Dependencies/DependenciesGraph.jsx
similarity index 100%
rename from zipkin-lens/src/components/Dependencies/DependenciesGraph.js
rename to zipkin-lens/src/components/Dependencies/DependenciesGraph.jsx
diff --git a/zipkin-lens/src/components/Dependencies/DependenciesSidebar.js b/zipkin-lens/src/components/Dependencies/DependenciesSidebar.jsx
similarity index 100%
rename from zipkin-lens/src/components/Dependencies/DependenciesSidebar.js
rename to zipkin-lens/src/components/Dependencies/DependenciesSidebar.jsx
diff --git a/zipkin-lens/src/components/Dependencies/VizceralExt.js b/zipkin-lens/src/components/Dependencies/VizceralExt.jsx
similarity index 100%
rename from zipkin-lens/src/components/Dependencies/VizceralExt.js
rename to zipkin-lens/src/components/Dependencies/VizceralExt.jsx
diff --git a/zipkin-lens/src/components/Dependencies/index.js b/zipkin-lens/src/components/Dependencies/index.js
index 00c948f..f34eff3 100644
--- a/zipkin-lens/src/components/Dependencies/index.js
+++ b/zipkin-lens/src/components/Dependencies/index.js
@@ -14,215 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router';
-import ReactSelect from 'react-select';
-import queryString from 'query-string';
-import moment from 'moment';
-
-import DependenciesGraph from './DependenciesGraph';
-import DependenciesSidebar from './DependenciesSidebar';
-import DatePicker from '../Common/DatePicker';
-import LoadingOverlay from '../Common/LoadingOverlay';
-import { buildQueryParameters } from '../../util/api';
-
-const propTypes = {
-  location: PropTypes.shape({}).isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  graph: PropTypes.shape({}).isRequired,
-  fetchDependencies: PropTypes.func.isRequired,
-  clearDependencies: PropTypes.func.isRequired,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }).isRequired,
-};
-
-export class Dependencies extends React.Component { // export for testing without withRouter
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      startTs: moment().subtract(1, 'days'),
-      endTs: moment(),
-      selectedServiceName: '',
-      filter: '',
-    };
-
-    this.handleStartTsChange = this.handleStartTsChange.bind(this);
-    this.handleEndTsChange = this.handleEndTsChange.bind(this);
-    this.handleServiceSelect = this.handleServiceSelect.bind(this);
-    this.handleFilterChange = this.handleFilterChange.bind(this);
-    this.handleAnalyzeButtonClick = this.handleAnalyzeButtonClick.bind(this);
-  }
-
-  componentDidMount() {
-    const { location } = this.props;
-
-    const queryParams = queryString.parse(location.search);
-    const endTs = queryParams.endTs ? moment(parseInt(queryParams.endTs, 10)) : moment();
-    const lookback = queryParams.lookback
-      ? moment.duration(parseInt(queryParams.lookback, 10))
-      : moment.duration(1, 'days');
-    const startTs = endTs.clone().subtract(lookback); // subtract is not immutable.
-    this.setState({
-      startTs,
-      endTs,
-    });
-    this.fetchDependencies(location);
-  }
-
-  componentWillUnmount() {
-    const { clearDependencies } = this.props;
-    clearDependencies();
-  }
-
-  fetchDependencies(location) {
-    const { fetchDependencies } = this.props;
-    if (location.search !== '' && location.search !== '?') {
-      const queryParameters = queryString.parse(location.search);
-      fetchDependencies(queryParameters);
-    }
-  }
-
-  handleStartTsChange(startTs) {
-    this.setState({ startTs });
-  }
-
-  handleEndTsChange(endTs) {
-    this.setState({ endTs });
-  }
-
-  handleServiceSelect(selectedServiceName) {
-    this.setState({ selectedServiceName });
-  }
-
-  handleFilterChange(filter) {
-    this.setState({ filter });
-  }
-
-  handleAnalyzeButtonClick() {
-    const { startTs, endTs } = this.state;
-    const { history } = this.props;
-    const queryParameters = buildQueryParameters({
-      endTs: endTs.valueOf(),
-      lookback: endTs.valueOf() - startTs.valueOf(),
-    });
-    const location = {
-      pathname: '/zipkin/dependency',
-      search: queryParameters,
-    };
-    history.push(location);
-    this.fetchDependencies(location);
-  }
-
-  renderSearch() {
-    const { startTs, endTs } = this.state;
-    return (
-      <div className="dependencies__search">
-        <div className="dependencies__lookback-condition">
-          <DatePicker
-            onChange={this.handleStartTsChange}
-            selected={startTs}
-          />
-        </div>
-        <div className="dependencies__lookback-condition-separator">
-          -
-        </div>
-        <div className="dependencies__lookback-condition">
-          <DatePicker
-            onChange={this.handleEndTsChange}
-            selected={endTs}
-          />
-        </div>
-        <div className="dependencies__analyze-button-wrapper">
-          <div
-            role="presentation"
-            onClick={this.handleAnalyzeButtonClick}
-            className="dependencies__analyze-button"
-          >
-            Analyze Dependencies
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderFilter() {
-    const { filter } = this.state;
-    const { graph } = this.props;
-    const options = graph.allNodeNames().map(
-      nodeName => ({ value: nodeName, label: nodeName }),
-    );
-    const value = !filter ? undefined : { value: filter, label: filter };
-    return (
-      <ReactSelect
-        onChange={(selected) => { this.handleFilterChange(selected.value); }}
-        options={options}
-        value={value}
-        styles={{
-          control: provided => ({
-            ...provided,
-            width: '240px',
-          }),
-        }}
-        placeholder="Filter by ..."
-      />
-    );
-  }
-
-  render() {
-    const { isLoading, graph } = this.props;
-    const { selectedServiceName, filter } = this.state;
-    const isSidebarOpened = !!selectedServiceName;
-
-    return (
-      <div className="dependencies">
-        <LoadingOverlay active={isLoading} />
-        <div className={`dependencies__main ${
-          isSidebarOpened
-            ? 'dependencies__main--narrow'
-            : 'dependencies__main--wide'}`}
-        >
-          <div className="dependencies__search-wrapper">
-            {this.renderSearch()}
-          </div>
-          {
-            graph.allNodes().length === 0
-              ? null
-              : (
-                <div>
-                  <div className="dependencies__filter-wrapper">
-                    {this.renderFilter()}
-                  </div>
-                  <div className="dependencies__graph-wrapper">
-                    <DependenciesGraph
-                      graph={graph}
-                      onServiceSelect={this.handleServiceSelect}
-                      selectedServiceName={selectedServiceName}
-                      filter={filter}
-                    />
-                  </div>
-                </div>
-              )
-          }
-        </div>
-        <div className={`dependencies__sidebar-wrapper ${
-          isSidebarOpened
-            ? 'dependencies__sidebar-wrapper--opened'
-            : 'dependencies__sidebar-wrapper--closed'}`}
-        >
-          <DependenciesSidebar
-            serviceName={selectedServiceName}
-            targetEdges={graph.getTargetEdges(selectedServiceName)}
-            sourceEdges={graph.getSourceEdges(selectedServiceName)}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-Dependencies.propTypes = propTypes;
-
-export default withRouter(Dependencies);
+export { default } from './Dependencies';
diff --git a/zipkin-lens/src/components/DetailedTraceSummary/index.js b/zipkin-lens/src/components/DetailedTraceSummary/index.jsx
similarity index 100%
rename from zipkin-lens/src/components/DetailedTraceSummary/index.js
rename to zipkin-lens/src/components/DetailedTraceSummary/index.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/ConditionDuration.js b/zipkin-lens/src/components/GlobalSearch/ConditionDuration.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/ConditionDuration.js
rename to zipkin-lens/src/components/GlobalSearch/ConditionDuration.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/ConditionLimit.js b/zipkin-lens/src/components/GlobalSearch/ConditionLimit.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/ConditionLimit.js
rename to zipkin-lens/src/components/GlobalSearch/ConditionLimit.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/ConditionLookback.js b/zipkin-lens/src/components/GlobalSearch/ConditionLookback.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/ConditionLookback.js
rename to zipkin-lens/src/components/GlobalSearch/ConditionLookback.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/ConditionName.js b/zipkin-lens/src/components/GlobalSearch/ConditionName.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/ConditionName.js
rename to zipkin-lens/src/components/GlobalSearch/ConditionName.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/ConditionTags.js b/zipkin-lens/src/components/GlobalSearch/ConditionTags.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/ConditionTags.js
rename to zipkin-lens/src/components/GlobalSearch/ConditionTags.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/GlobalDropdownMenu.js b/zipkin-lens/src/components/GlobalSearch/GlobalDropdownMenu.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/GlobalDropdownMenu.js
rename to zipkin-lens/src/components/GlobalSearch/GlobalDropdownMenu.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/index.js b/zipkin-lens/src/components/GlobalSearch/GlobalSearch.jsx
similarity index 100%
copy from zipkin-lens/src/components/GlobalSearch/index.js
copy to zipkin-lens/src/components/GlobalSearch/GlobalSearch.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/SearchCondition.js b/zipkin-lens/src/components/GlobalSearch/SearchCondition.jsx
similarity index 100%
rename from zipkin-lens/src/components/GlobalSearch/SearchCondition.js
rename to zipkin-lens/src/components/GlobalSearch/SearchCondition.jsx
diff --git a/zipkin-lens/src/components/GlobalSearch/index.js b/zipkin-lens/src/components/GlobalSearch/index.js
index a9702ad..08aa9e4 100644
--- a/zipkin-lens/src/components/GlobalSearch/index.js
+++ b/zipkin-lens/src/components/GlobalSearch/index.js
@@ -14,441 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router';
-import moment from 'moment';
-import queryString from 'query-string';
-
-import SearchCondition from './SearchCondition';
-import ConditionDuration from './ConditionDuration';
-import ConditionLimit from './ConditionLimit';
-import ConditionName from './ConditionName';
-import ConditionTags from './ConditionTags';
-import ConditionLookback from './ConditionLookback';
-import GlobalDropdownMenuContainer from '../../containers/GlobalSearch/GlobalDropdownMenuContainer';
-import {
-  isAutocompleteKey,
-  defaultConditionValues,
-  getConditionKeyListWithAvailability,
-  buildQueryParametersWithConditions,
-  buildApiQueryParameters,
-  extractConditionsFromQueryParameters,
-  nextInitialConditionKey,
-} from '../../util/global-search';
-
-const propTypes = {
-  services: PropTypes.arrayOf(PropTypes.string).isRequired,
-  remoteServices: PropTypes.arrayOf(PropTypes.string).isRequired,
-  spans: PropTypes.arrayOf(PropTypes.string).isRequired,
-  conditions: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.shape({}),
-    ]),
-  })).isRequired,
-  lookbackCondition: PropTypes.shape({
-    value: PropTypes.string,
-    endTs: PropTypes.number,
-    startTs: PropTypes.number,
-  }).isRequired,
-  limitCondition: PropTypes.number.isRequired,
-  fetchServices: PropTypes.func.isRequired,
-  isLoadingServices: PropTypes.bool.isRequired,
-  fetchRemoteServices: PropTypes.func.isRequired,
-  isLoadingRemoteServices: PropTypes.bool.isRequired,
-  fetchSpans: PropTypes.func.isRequired,
-  isLoadingSpans: PropTypes.bool.isRequired,
-  fetchTraces: PropTypes.func.isRequired,
-  fetchAutocompleteKeys: PropTypes.func.isRequired,
-  fetchAutocompleteValues: PropTypes.func.isRequired,
-  autocompleteKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  isLoadingAutocompleteKeys: PropTypes.bool.isRequired,
-  autocompleteValues: PropTypes.arrayOf(PropTypes.string).isRequired,
-  isLoadingAutocompleteValues: PropTypes.bool.isRequired,
-  setLookbackCondition: PropTypes.func.isRequired,
-  setLimitCondition: PropTypes.func.isRequired,
-  addCondition: PropTypes.func.isRequired,
-  deleteCondition: PropTypes.func.isRequired,
-  changeConditionKey: PropTypes.func.isRequired,
-  changeConditionValue: PropTypes.func.isRequired,
-  location: PropTypes.shape({
-    search: PropTypes.string.isRequired,
-  }).isRequired,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }).isRequired,
-};
-
-class GlobalSearch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isConditionFocused: false,
-    };
-    this.handleAddButtonClick = this.handleAddButtonClick.bind(this);
-    this.handleSearchButtonClick = this.handleSearchButtonClick.bind(this);
-    this.handleDeleteConditionButtonClick = this.handleDeleteConditionButtonClick.bind(this);
-    this.handleConditionKeyChange = this.handleConditionKeyChange.bind(this);
-    this.handleConditionValueChange = this.handleConditionValueChange.bind(this);
-    this.handleLookbackChange = this.handleLookbackChange.bind(this);
-    this.handleLimitChange = this.handleLimitChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleConditionFocus = this.handleConditionFocus.bind(this);
-    this.handleConditionKeyBlur = this.handleConditionKeyBlur.bind(this);
-    this.handleConditionValueBlur = this.handleConditionValueBlur.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-    const {
-      fetchServices,
-      fetchRemoteServices,
-      fetchSpans,
-      fetchAutocompleteKeys,
-      location,
-      addCondition,
-      setLookbackCondition,
-      setLimitCondition,
-    } = this.props;
-
-    const initialConditions = this.getConditionsFromQueryParameters();
-    const { conditions, lookbackCondition, limitCondition } = initialConditions;
-    conditions.forEach((condition) => {
-      addCondition(condition);
-    });
-    setLookbackCondition({
-      value: lookbackCondition.value || '1h',
-      endTs: lookbackCondition.endTs || moment().valueOf(),
-      startTs: lookbackCondition.startTs || moment().valueOf(),
-    });
-    setLimitCondition(limitCondition || 10);
-
-    fetchServices();
-    const serviceNameCondition = initialConditions.conditions.find(condition => condition.key === 'serviceName');
-    if (serviceNameCondition) {
-      fetchRemoteServices(serviceNameCondition.value);
-      fetchSpans(serviceNameCondition.value);
-    }
-    fetchAutocompleteKeys();
-    this.fetchTraces(location);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  getConditionsFromQueryParameters() {
-    const { location } = this.props;
-    if (location.search !== '' && location.search !== '?') {
-      const queryParameters = queryString.parse(location.search);
-      return extractConditionsFromQueryParameters(queryParameters);
-    }
-    return {
-      conditions: [],
-      lookbackCondition: {},
-      limitCondition: null,
-    };
-  }
-
-  fetchTraces(location) {
-    const { fetchTraces } = this.props;
-    if (location.search !== '' && location.search !== '?') {
-      const queryParameters = queryString.parse(location.search);
-      const apiQueryParameters = buildApiQueryParameters(queryParameters);
-      fetchTraces(apiQueryParameters);
-    }
-  }
-
-  handleAddButtonClick() {
-    const { addCondition, conditions, autocompleteKeys } = this.props;
-    const nextConditionKey = nextInitialConditionKey(conditions, autocompleteKeys);
-    addCondition({
-      key: nextConditionKey,
-      value: defaultConditionValues(nextConditionKey),
-    });
-  }
-
-  handleKeyDown(event) {
-    const { isConditionFocused } = this.state;
-    if (event.key === 'Enter' && !isConditionFocused) {
-      this.handleSearchButtonClick();
-    }
-  }
-
-  handleSearchButtonClick() {
-    const {
-      history, conditions, lookbackCondition, limitCondition,
-    } = this.props;
-
-    const queryParams = buildQueryParametersWithConditions(
-      conditions,
-      lookbackCondition,
-      limitCondition,
-    );
-    const location = {
-      pathname: '/zipkin/',
-      search: queryParams,
-    };
-    history.push(location);
-    this.fetchTraces(location);
-  }
-
-  // Replaces the key of the "index"-th condition with "keyName" and clear value.
-  handleConditionKeyChange(index, conditionKey) {
-    const {
-      changeConditionKey,
-      fetchAutocompleteValues,
-    } = this.props;
-    changeConditionKey(index, conditionKey);
-
-    if (isAutocompleteKey(conditionKey)) {
-      fetchAutocompleteValues(conditionKey);
-    }
-  }
-
-  // Replaces the value of the "index"-th condition with "value".
-  handleConditionValueChange(index, conditionValue) {
-    const {
-      fetchRemoteServices,
-      fetchSpans,
-      conditions,
-      changeConditionValue,
-    } = this.props;
-
-    changeConditionValue(index, conditionValue);
-    if (conditions[index].key === 'serviceName') {
-      fetchRemoteServices(conditionValue);
-      fetchSpans(conditionValue);
-    }
-  }
-
-  handleDeleteConditionButtonClick(index) {
-    const { deleteCondition } = this.props;
-    deleteCondition(index);
-  }
-
-  handleLookbackChange(lookbackCondition) {
-    const { setLookbackCondition } = this.props;
-    setLookbackCondition(lookbackCondition);
-  }
-
-  handleLimitChange(limitCondition) {
-    const { setLimitCondition } = this.props;
-    setLimitCondition(limitCondition);
-  }
-
-  handleConditionFocus() {
-    this.setState({ isConditionFocused: true });
-  }
-
-  handleConditionKeyBlur() {
-    this.setState({ isConditionFocused: false });
-  }
-
-  handleConditionValueBlur() {
-    // Delay for avoiding to fetch
-    setTimeout(() => { this.setState({ isConditionFocused: false }); }, 0);
-  }
-
-  renderCondition(conditionKey, index, value) {
-    const {
-      services,
-      remoteServices,
-      spans,
-      isLoadingServices,
-      isLoadingRemoteServices,
-      isLoadingSpans,
-      autocompleteValues,
-      isLoadingAutocompleteValues,
-    } = this.props;
-    const commonProps = {
-      value,
-      onConditionChange: (val) => { this.handleConditionValueChange(index, val); },
-    };
-
-    switch (conditionKey) {
-      case 'serviceName':
-      case 'remoteServiceName':
-      case 'spanName': {
-        let options;
-        let isLoadingOptions;
-        if (conditionKey === 'serviceName') {
-          options = services;
-          isLoadingOptions = isLoadingServices;
-        } else if (conditionKey === 'remoteServiceName') {
-          options = remoteServices;
-          isLoadingOptions = isLoadingRemoteServices;
-        } else {
-          options = spans;
-          isLoadingOptions = isLoadingSpans;
-        }
-        return ({
-          onFocus, onBlur, setNextFocusRef, isFocused,
-        }) => (
-          <ConditionName
-            {...commonProps}
-            options={options}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            setNextFocusRef={setNextFocusRef}
-            isFocused={isFocused}
-            isLoadingOptions={isLoadingOptions}
-          />
-        );
-      }
-      case 'minDuration':
-      case 'maxDuration':
-        return ({
-          onFocus, onBlur, setNextFocusRef, isFocused,
-        }) => (
-          <ConditionDuration
-            {...commonProps}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            setNextFocusRef={setNextFocusRef}
-            isFocused={isFocused}
-          />
-        );
-      case 'tags':
-        return ({
-          onFocus, onBlur, setNextFocusRef, isFocused,
-        }) => (
-          <ConditionTags
-            {...commonProps}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            setNextFocusRef={setNextFocusRef}
-            isFocused={isFocused}
-          />
-        );
-      default: // autocompleteTags
-        return ({
-          onFocus, onBlur, setNextFocusRef, isFocused,
-        }) => (
-          <ConditionName
-            {...commonProps}
-            options={autocompleteValues}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            setNextFocusRef={setNextFocusRef}
-            isFocused={isFocused}
-            isLoadingOptions={isLoadingAutocompleteValues}
-          />
-        );
-    }
-  }
-
-  renderSearchCondition(condition, index) {
-    const {
-      conditions,
-      autocompleteKeys,
-      fetchAutocompleteValues,
-    } = this.props;
-
-    const commonProps = {
-      keyString: condition.key,
-      keyOptions: getConditionKeyListWithAvailability(condition.key, conditions, autocompleteKeys),
-      onConditionKeyChange: (conditionKey) => {
-        this.handleConditionKeyChange(index, conditionKey);
-      },
-      onDeleteButtonClick: () => { this.handleDeleteConditionButtonClick(index); },
-    };
-
-    if (isAutocompleteKey(condition.key)) {
-      return (
-        <SearchCondition
-          {...commonProps}
-          onKeyFocus={() => {
-            fetchAutocompleteValues(condition.key);
-            this.handleConditionFocus();
-          }}
-          onValueFocus={() => {
-            fetchAutocompleteValues(condition.key);
-            this.handleConditionFocus();
-          }}
-          onKeyBlur={this.handleConditionKeyBlur}
-          onValueBlur={this.handleConditionValueBlur}
-        >
-          { this.renderCondition(condition.key, index, condition.value) }
-        </SearchCondition>
-      );
-    }
-    return (
-      <SearchCondition
-        {...commonProps}
-        onKeyFocus={this.handleConditionFocus}
-        onValueFocus={this.handleConditionFocus}
-        onKeyBlur={this.handleConditionKeyBlur}
-        onValueBlur={this.handleConditionValueBlur}
-      >
-        { this.renderCondition(condition.key, index, condition.value) }
-      </SearchCondition>
-    );
-  }
-
-  render() {
-    const {
-      conditions,
-      lookbackCondition,
-      limitCondition,
-    } = this.props;
-    return (
-      <div className="global-search">
-        <div className="global-search__conditions">
-          {
-            conditions.length === 0
-              ? (
-                <div className="global-search__placeholder">
-                  Please select the criteria for your trace lookup.
-                </div>
-              )
-              : conditions.map((condition, index) => (
-                <div
-                  key={condition._id}
-                  className="global-search__search-condition-wrapper"
-                >
-                  { this.renderSearchCondition(condition, index) }
-                </div>
-              ))
-          }
-          <div
-            role="presentation"
-            onClick={this.handleAddButtonClick}
-            className="global-search__add-condition-button"
-          >
-            <span className="fas fa-plus global-search__add-condition-button-icon" />
-          </div>
-          <div
-            role="presentation"
-            onClick={this.handleSearchButtonClick}
-            className="global-search__find-button"
-          >
-            <span className="fas fa-search global-search__find-button-icon" />
-          </div>
-        </div>
-        <div className="global-search__condition-limit-wrapper">
-          <ConditionLimit
-            limit={limitCondition}
-            onLimitChange={this.handleLimitChange}
-          />
-        </div>
-        <div className="global-search__condition-lookback-wrapper">
-          <ConditionLookback
-            lookback={lookbackCondition}
-            onLookbackChange={this.handleLookbackChange}
-          />
-        </div>
-        <div className="global-search__dropdown-menu-wrapper">
-          <GlobalDropdownMenuContainer />
-        </div>
-      </div>
-    );
-  }
-}
-
-GlobalSearch.propTypes = propTypes;
-
-export default withRouter(GlobalSearch);
+export { default } from './GlobalSearch';
diff --git a/zipkin-lens/src/components/MiniTimeline/index.js b/zipkin-lens/src/components/MiniTimeline/MiniTimeline.jsx
similarity index 100%
copy from zipkin-lens/src/components/MiniTimeline/index.js
copy to zipkin-lens/src/components/MiniTimeline/MiniTimeline.jsx
diff --git a/zipkin-lens/src/components/MiniTimeline/index.test.js b/zipkin-lens/src/components/MiniTimeline/MiniTimeline.test.js
similarity index 98%
rename from zipkin-lens/src/components/MiniTimeline/index.test.js
rename to zipkin-lens/src/components/MiniTimeline/MiniTimeline.test.js
index 1139bdf..4643cef 100644
--- a/zipkin-lens/src/components/MiniTimeline/index.test.js
+++ b/zipkin-lens/src/components/MiniTimeline/MiniTimeline.test.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import MiniTimeline from './index';
+import MiniTimeline from './MiniTimeline';
 
 describe('<MiniTimeline />', () => {
   const commonProps = {
diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineGraph.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineGraph.jsx
similarity index 100%
rename from zipkin-lens/src/components/MiniTimeline/MiniTimelineGraph.js
rename to zipkin-lens/src/components/MiniTimeline/MiniTimelineGraph.jsx
diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.jsx
similarity index 100%
rename from zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js
rename to zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.jsx
diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineSlider.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineSlider.jsx
similarity index 100%
rename from zipkin-lens/src/components/MiniTimeline/MiniTimelineSlider.js
rename to zipkin-lens/src/components/MiniTimeline/MiniTimelineSlider.jsx
diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineTimeMarkers.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineTimeMarkers.jsx
similarity index 100%
rename from zipkin-lens/src/components/MiniTimeline/MiniTimelineTimeMarkers.js
rename to zipkin-lens/src/components/MiniTimeline/MiniTimelineTimeMarkers.jsx
diff --git a/zipkin-lens/src/components/MiniTimeline/index.js b/zipkin-lens/src/components/MiniTimeline/index.js
index d85435b..7bf72b6 100644
--- a/zipkin-lens/src/components/MiniTimeline/index.js
+++ b/zipkin-lens/src/components/MiniTimeline/index.js
@@ -14,55 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import MiniTimelineGraph from './MiniTimelineGraph';
-import MiniTimelineLabel from './MiniTimelineLabel';
-import MiniTimelineSlider from './MiniTimelineSlider';
-import { detailedTraceSummaryPropTypes } from '../../prop-types';
-
-const defaultNumTimeMarkers = 5;
-
-const propTypes = {
-  startTs: PropTypes.number.isRequired,
-  endTs: PropTypes.number.isRequired,
-  traceSummary: detailedTraceSummaryPropTypes.isRequired,
-  onStartAndEndTsChange: PropTypes.func.isRequired,
-};
-
-const MiniTimeline = ({
-  startTs, endTs, traceSummary, onStartAndEndTsChange,
-}) => {
-  const { spans, duration } = traceSummary;
-  if (spans.length <= 1) {
-    return null;
-  }
-
-  return (
-    <div className="mini-timeline">
-      <MiniTimelineLabel
-        numTimeMarkers={defaultNumTimeMarkers}
-        duration={duration}
-      />
-      <MiniTimelineGraph
-        spans={spans}
-        duration={duration}
-        startTs={startTs}
-        endTs={endTs}
-        onStartAndEndTsChange={onStartAndEndTsChange}
-        numTimeMarkers={defaultNumTimeMarkers}
-      />
-      <MiniTimelineSlider
-        duration={duration}
-        startTs={startTs}
-        endTs={endTs}
-        onStartAndEndTsChange={onStartAndEndTsChange}
-      />
-    </div>
-  );
-};
-
-MiniTimeline.propTypes = propTypes;
-
-export default MiniTimeline;
+export { default } from './MiniTimeline';
diff --git a/zipkin-lens/src/components/Timeline/index.js b/zipkin-lens/src/components/Timeline/Timeline.jsx
similarity index 100%
copy from zipkin-lens/src/components/Timeline/index.js
copy to zipkin-lens/src/components/Timeline/Timeline.jsx
diff --git a/zipkin-lens/src/components/Timeline/TimelineHeader.js b/zipkin-lens/src/components/Timeline/TimelineHeader.jsx
similarity index 100%
rename from zipkin-lens/src/components/Timeline/TimelineHeader.js
rename to zipkin-lens/src/components/Timeline/TimelineHeader.jsx
diff --git a/zipkin-lens/src/components/Timeline/TimelineSpan.js b/zipkin-lens/src/components/Timeline/TimelineSpan.jsx
similarity index 100%
rename from zipkin-lens/src/components/Timeline/TimelineSpan.js
rename to zipkin-lens/src/components/Timeline/TimelineSpan.jsx
diff --git a/zipkin-lens/src/components/Timeline/TimelineSpanData.js b/zipkin-lens/src/components/Timeline/TimelineSpanData.jsx
similarity index 100%
rename from zipkin-lens/src/components/Timeline/TimelineSpanData.js
rename to zipkin-lens/src/components/Timeline/TimelineSpanData.jsx
diff --git a/zipkin-lens/src/components/Timeline/index.js b/zipkin-lens/src/components/Timeline/index.js
index 2501057..405b637 100644
--- a/zipkin-lens/src/components/Timeline/index.js
+++ b/zipkin-lens/src/components/Timeline/index.js
@@ -14,153 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import TimelineHeader from './TimelineHeader';
-import TimelineSpan from './TimelineSpan';
-import { detailedTraceSummaryPropTypes } from '../../prop-types';
-
-const propTypes = {
-  startTs: PropTypes.number.isRequired,
-  endTs: PropTypes.number.isRequired,
-  traceSummary: detailedTraceSummaryPropTypes.isRequired,
-};
-
-const defaultServiceNameColumnWidth = 0.2;
-const defaultSpanNameColumnWidth = 0.1;
-const defaultNumTimeMarkers = 5;
-
-class Timeline extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      serviceNameColumnWidth: defaultServiceNameColumnWidth,
-      spanNameColumnWidth: defaultSpanNameColumnWidth,
-      childrenClosedSpans: {},
-      dataOpenedSpans: {},
-    };
-    this.handleServiceNameColumnWidthChange = this.handleServiceNameColumnWidthChange.bind(this);
-    this.handleSpanNameColumnWidthChange = this.handleSpanNameColumnWidthChange.bind(this);
-    this.handleChildrenOpenToggle = this.handleChildrenOpenToggle.bind(this);
-    this.handleDataOpenToggle = this.handleDataOpenToggle.bind(this);
-  }
-
-  handleServiceNameColumnWidthChange(serviceNameColumnWidth) {
-    this.setState({ serviceNameColumnWidth });
-  }
-
-  handleSpanNameColumnWidthChange(spanNameColumnWidth) {
-    this.setState({ spanNameColumnWidth });
-  }
-
-  handleChildrenOpenToggle(spanId) {
-    const { childrenClosedSpans: prevChildrenClosedSpans } = this.state;
-
-    let childrenClosedSpans = {};
-    if (prevChildrenClosedSpans[spanId]) {
-      childrenClosedSpans = {
-        ...prevChildrenClosedSpans,
-        [spanId]: undefined,
-      };
-    } else {
-      childrenClosedSpans = {
-        ...prevChildrenClosedSpans,
-        [spanId]: true,
-      };
-    }
-    this.setState({ childrenClosedSpans });
-  }
-
-  handleDataOpenToggle(spanId) {
-    const { dataOpenedSpans: prevDataOpenedSpans } = this.state;
-
-    let dataOpenedSpans = {};
-    if (prevDataOpenedSpans[spanId]) {
-      dataOpenedSpans = {
-        ...prevDataOpenedSpans,
-        [spanId]: false,
-      };
-    } else {
-      dataOpenedSpans = {
-        ...prevDataOpenedSpans,
-        [spanId]: true,
-      };
-    }
-    this.setState({ dataOpenedSpans });
-  }
-
-  render() {
-    const { startTs, endTs, traceSummary } = this.props;
-    const {
-      serviceNameColumnWidth,
-      spanNameColumnWidth,
-      childrenClosedSpans,
-      dataOpenedSpans,
-    } = this.state;
-
-    const closed = {};
-    for (let i = 0; i < traceSummary.spans.length; i += 1) {
-      if (childrenClosedSpans[traceSummary.spans[i].parentId]) {
-        closed[traceSummary.spans[i].spanId] = true;
-      }
-    }
-
-    return (
-      <div className="timeline">
-        <TimelineHeader
-          startTs={startTs}
-          endTs={endTs}
-          serviceNameColumnWidth={serviceNameColumnWidth}
-          spanNameColumnWidth={spanNameColumnWidth}
-          numTimeMarkers={defaultNumTimeMarkers}
-          onServiceNameColumnWidthChange={this.handleServiceNameColumnWidthChange}
-          onSpanNameColumnWidthChange={this.handleSpanNameColumnWidthChange}
-        />
-        {
-          traceSummary.spans.map(
-            (span, index, spans) => {
-              let hasChildren = false;
-              if (index < spans.length - 1) {
-                if (spans[index + 1].depth > span.depth) {
-                  hasChildren = true;
-                }
-              }
-              /* Skip closed spans */
-              if (closed[span.spanId]) {
-                if (hasChildren) {
-                  for (let i = 0; i < span.childIds.length; i += 1) {
-                    closed[span.childIds[i]] = true;
-                  }
-                }
-                return null;
-              }
-              return (
-                <TimelineSpan
-                  key={span.spanId}
-                  startTs={startTs}
-                  endTs={endTs}
-                  traceDuration={traceSummary.duration}
-                  traceTimestamp={traceSummary.spans[0].timestamp}
-                  numTimeMarkers={defaultNumTimeMarkers}
-                  serviceNameColumnWidth={serviceNameColumnWidth}
-                  spanNameColumnWidth={spanNameColumnWidth}
-                  span={span}
-                  hasChildren={hasChildren}
-                  areChildrenOpened={!childrenClosedSpans[span.spanId]}
-                  areDataOpened={!!dataOpenedSpans[span.spanId]}
-                  onChildrenOpenToggle={this.handleChildrenOpenToggle}
-                  onDataOpenToggle={this.handleDataOpenToggle}
-                />
-              );
-            },
-          )
-        }
-      </div>
-    );
-  }
-}
-
-Timeline.propTypes = propTypes;
-
-export default Timeline;
+export { default } from './Timeline';
diff --git a/zipkin-lens/src/components/TracePage/index.js b/zipkin-lens/src/components/TracePage/index.jsx
similarity index 100%
rename from zipkin-lens/src/components/TracePage/index.js
rename to zipkin-lens/src/components/TracePage/index.jsx
diff --git a/zipkin-lens/src/components/TraceViewer/index.js b/zipkin-lens/src/components/TraceViewer/index.jsx
similarity index 100%
rename from zipkin-lens/src/components/TraceViewer/index.js
rename to zipkin-lens/src/components/TraceViewer/index.jsx


Mime
View raw message