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 <[email protected]> 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
