You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zipkin.apache.org by ad...@apache.org on 2019/05/10 05:06:20 UTC
[incubator-zipkin] 02/02: Change suffix js -> jsx
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...@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:
- <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