Skip to content

Commit

Permalink
Move redux up from VirtualizedTraceView
Browse files Browse the repository at this point in the history 
Signed-off-by: Andrej Ocenas <[email protected]>
  • Loading branch information
@aocenas
aocenas committed Feb 6, 2020
1 parent 8cb13c4 commit e884e7c
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 136 deletions.
26 changes: 2 additions & 24 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,16 @@ import ListView from './ListView';
import SpanBarRow from './SpanBarRow';
import DetailState from './SpanDetail/DetailState';
import SpanDetailRow from './SpanDetailRow';
import { DEFAULT_HEIGHTS, VirtualizedTraceViewImpl } from './VirtualizedTraceView';
import VirtualizedTraceView, { DEFAULT_HEIGHTS } from './VirtualizedTraceView';
import traceGenerator from '../../../demo/trace-generators';
import transformTraceData from '../../../model/transform-trace-data';
import updateUiFindSpy from '../../../utils/update-ui-find';

jest.mock('./SpanTreeOffset');
jest.mock('../../../utils/update-ui-find');

describe('<VirtualizedTraceViewImpl>', () => {
let wrapper;
let instance;
const focusUiFindMatchesMock = jest.fn();

const trace = transformTraceData(traceGenerator.trace({ numberOfSpans: 10 }));
const props = {
Expand All @@ -47,18 +45,11 @@ describe('<VirtualizedTraceViewImpl>', () => {
registerAccessors: jest.fn(),
scrollToFirstVisibleSpan: jest.fn(),
setSpanNameColumnWidth: jest.fn(),
focusUiFindMatches: focusUiFindMatchesMock,
setTrace: jest.fn(),
shouldScrollToFirstUiFindMatch: false,
spanNameColumnWidth: 0.5,
trace,
uiFind: 'uiFind',
history: {
replace: () => {},
},
location: {
search: null,
},
};

function expandRow(rowIndex) {
Expand Down Expand Up @@ -97,7 +88,7 @@ describe('<VirtualizedTraceViewImpl>', () => {
props[key].mockReset();
}
});
wrapper = shallow(<VirtualizedTraceViewImpl {...props} />);
wrapper = shallow(<VirtualizedTraceView {...props} />);
instance = wrapper.instance();
});

Expand Down Expand Up @@ -400,17 +391,4 @@ describe('<VirtualizedTraceViewImpl>', () => {
});
});
});

describe('focusSpan', () => {
it('calls updateUiFind and focusUiFindMatches', () => {
const spanName = 'span1';
instance.focusSpan(spanName);
expect(updateUiFindSpy).toHaveBeenLastCalledWith({
history: props.history,
location: props.location,
uiFind: spanName,
});
expect(focusUiFindMatchesMock).toHaveBeenLastCalledWith(trace, spanName, false);
});
});
});
65 changes: 10 additions & 55 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,7 @@

import * as React from 'react';
import cx from 'classnames';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { withRouter, RouteComponentProps } from 'react-router-dom';

// import { History as RouterHistory, Location } from 'history';

import { actions } from './duck';
import ListView from './ListView';
import SpanBarRow from './SpanBarRow';
import DetailState from './SpanDetail/DetailState';
Expand All @@ -33,15 +27,14 @@ import {
ViewedBoundsFunctionType,
} from './utils';
import { Accessors } from '../ScrollManager';
import { extractUiFindFromState, TExtractUiFindFromStateReturn } from '../../common/UiFindInput';
import { TExtractUiFindFromStateReturn } from '../../common/UiFindInput';
import getLinks from '../../../model/link-patterns';
import colorGenerator from '../../../utils/color-generator';
import { TNil, ReduxState } from '../../../types';
import { TNil } from '../../../types';
import { Log, Span, Trace, KeyValuePair } from '../../../types/trace';
import TTraceTimeline from '../../../types/TTraceTimeline';

import './VirtualizedTraceView.css';
import updateUiFind from '../../../utils/update-ui-find';

type RowState = {
isDetail: boolean;
Expand All @@ -55,9 +48,9 @@ type TVirtualizedTraceViewOwnProps = {
scrollToFirstVisibleSpan: () => void;
registerAccessors: (accesors: Accessors) => void;
trace: Trace;
};
focusSpan: (uiFind: string) => void;

type TDispatchProps = {
// was from redux
childrenToggle: (spanID: string) => void;
clearShouldScrollToFirstUiFindMatch: () => void;
detailLogItemToggle: (spanID: string, log: Log) => void;
Expand All @@ -69,14 +62,11 @@ type TDispatchProps = {
detailToggle: (spanID: string) => void;
setSpanNameColumnWidth: (width: number) => void;
setTrace: (trace: Trace | TNil, uiFind: string | TNil) => void;
focusUiFindMatches: (trace: Trace, uiFind: string | TNil, allowHide?: boolean) => void;
};

type VirtualizedTraceViewProps = TVirtualizedTraceViewOwnProps &
TDispatchProps &
TExtractUiFindFromStateReturn &
TTraceTimeline &
RouteComponentProps;
TTraceTimeline;

// export for tests
export const DEFAULT_HEIGHTS = {
Expand Down Expand Up @@ -139,7 +129,7 @@ function getCssClasses(currentViewRange: [number, number]) {
}

// export from tests
export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceViewProps> {
export default class VirtualizedTraceView extends React.Component<VirtualizedTraceViewProps> {
clippingCssClasses: string;
listView: ListView | TNil;
rowStates: RowState[];
Expand Down Expand Up @@ -223,18 +213,6 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
}
}

focusSpan = (uiFind: string) => {
const { trace, focusUiFindMatches, location, history } = this.props;
if (trace) {
updateUiFind({
location,
history,
uiFind,
});
focusUiFindMatches(trace, uiFind, false);
}
};

getAccessors() {
const lv = this.listView;
if (!lv) {
Expand Down Expand Up @@ -332,6 +310,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
findMatchesIDs,
spanNameColumnWidth,
trace,
focusSpan,
} = this.props;
// to avert flow error
if (!trace) {
Expand Down Expand Up @@ -375,7 +354,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
getViewedBounds={this.getViewedBounds}
traceStartTime={trace.startTime}
span={span}
focusSpan={this.focusSpan}
focusSpan={focusSpan}
/>
</div>
);
Expand All @@ -395,6 +374,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
detailToggle,
spanNameColumnWidth,
trace,
focusSpan,
} = this.props;
const detailState = detailStates.get(spanID);
if (!trace || !detailState) {
Expand All @@ -417,7 +397,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
span={span}
tagsToggle={detailTagsToggle}
traceStartTime={trace.startTime}
focusSpan={this.focusSpan}
focusSpan={focusSpan}
/>
</div>
);
Expand All @@ -442,28 +422,3 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
);
}
}

/* istanbul ignore next */
function mapStateToProps(state: ReduxState): TTraceTimeline & TExtractUiFindFromStateReturn {
return {
...extractUiFindFromState(state),
...state.traceTimeline,
};
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch: Dispatch<ReduxState>): TDispatchProps {
return (bindActionCreators(actions, dispatch) as any) as TDispatchProps;
}

export default withRouter(
connect<
TTraceTimeline & TExtractUiFindFromStateReturn,
TDispatchProps,
TVirtualizedTraceViewOwnProps,
ReduxState
>(
mapStateToProps,
mapDispatchToProps
)(VirtualizedTraceViewImpl)
);
17 changes: 11 additions & 6 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import React from 'react';
import { shallow } from 'enzyme';

import TraceTimelineViewer, { TraceTimelineViewerImpl } from './index';
import TraceTimelineViewer from './index';
import traceGenerator from '../../../demo/trace-generators';
import transformTraceData from '../../../model/transform-trace-data';
import TimelineHeaderRow from './TimelineHeaderRow';
Expand All @@ -30,11 +30,19 @@ describe('<TraceTimelineViewer>', () => {
current: [0, 1],
},
},
spanNameColumnWidth: 0.5,
traceTimeline: {
spanNameColumnWidth: 0.5,
},
expandAll: jest.fn(),
collapseAll: jest.fn(),
expandOne: jest.fn(),
collapseOne: jest.fn(),
history: {
replace: () => {},
},
location: {
search: null,
},
};
const options = {
context: {
Expand All @@ -49,16 +57,13 @@ describe('<TraceTimelineViewer>', () => {
};

let wrapper;
let connectedWrapper;

beforeEach(() => {
wrapper = shallow(<TraceTimelineViewerImpl {...props} />, options);
connectedWrapper = shallow(<TraceTimelineViewer {...props} />, options);
wrapper = shallow(<TraceTimelineViewer {...props} />, options);
});

it('it does not explode', () => {
expect(wrapper).toBeDefined();
expect(connectedWrapper).toBeDefined();
});

it('it sets up actions', () => {
Expand Down
74 changes: 37 additions & 37 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,16 @@
// limitations under the License.

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';

import { actions } from './duck';
import TimelineHeaderRow from './TimelineHeaderRow';
import VirtualizedTraceView from './VirtualizedTraceView';
import { merge as mergeShortcuts } from '../keyboard-shortcuts';
import { Accessors } from '../ScrollManager';
import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate } from '../types';
import { TNil, ReduxState } from '../../../types';
import { Span, Trace } from '../../../types/trace';
import { TNil } from '../../../types';
import { Span, Trace, Log } from '../../../types/trace';
import TTraceTimeline from '../../../types/TTraceTimeline';
import { TExtractUiFindFromStateReturn } from '../../common/UiFindInput';

import './index.css';

Expand All @@ -33,19 +32,32 @@ type TDispatchProps = {
collapseOne: (spans: Span[]) => void;
expandAll: () => void;
expandOne: (spans: Span[]) => void;
};

type TProps = TDispatchProps & {
registerAccessors: (accessors: Accessors) => void;
findMatchesIDs: Set<string> | TNil;
scrollToFirstVisibleSpan: () => void;
spanNameColumnWidth: number;
trace: Trace;
updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
updateViewRangeTime: TUpdateViewRangeTimeFunction;
viewRange: IViewRange;
childrenToggle: (spanID: string) => void;
clearShouldScrollToFirstUiFindMatch: () => void;
detailLogItemToggle: (spanID: string, log: Log) => void;
detailLogsToggle: (spanID: string) => void;
detailWarningsToggle: (spanID: string) => void;
detailReferencesToggle: (spanID: string) => void;
detailProcessToggle: (spanID: string) => void;
detailTagsToggle: (spanID: string) => void;
detailToggle: (spanID: string) => void;
setTrace: (trace: Trace | TNil, uiFind: string | TNil) => void;
};

type TProps = TDispatchProps &
TExtractUiFindFromStateReturn & {
registerAccessors: (accessors: Accessors) => void;
findMatchesIDs: Set<string> | TNil;
scrollToFirstVisibleSpan: () => void;
traceTimeline: TTraceTimeline;
trace: Trace;
updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
updateViewRangeTime: TUpdateViewRangeTimeFunction;
viewRange: IViewRange;
focusSpan: (uiFind: string) => void;
};

const NUM_TICKS = 5;

/**
Expand All @@ -54,7 +66,7 @@ const NUM_TICKS = 5;
* re-render the ListView every time the cursor is moved on the trace minimap
* or `TimelineHeaderRow`.
*/
export class TraceTimelineViewerImpl extends React.PureComponent<TProps> {
export default class TraceTimelineViewer extends React.PureComponent<TProps> {
componentDidMount() {
mergeShortcuts({
collapseAll: this.collapseAll,
Expand Down Expand Up @@ -86,15 +98,16 @@ export class TraceTimelineViewerImpl extends React.PureComponent<TProps> {
updateNextViewRangeTime,
updateViewRangeTime,
viewRange,
traceTimeline,
...rest
} = this.props;
const { spanNameColumnWidth, trace } = rest;
const { trace } = rest;

return (
<div className="TraceTimelineViewer">
<TimelineHeaderRow
duration={trace.duration}
nameColumnWidth={spanNameColumnWidth}
nameColumnWidth={traceTimeline.spanNameColumnWidth}
numTicks={NUM_TICKS}
onCollapseAll={this.collapseAll}
onCollapseOne={this.collapseOne}
Expand All @@ -105,26 +118,13 @@ export class TraceTimelineViewerImpl extends React.PureComponent<TProps> {
updateNextViewRangeTime={updateNextViewRangeTime}
updateViewRangeTime={updateViewRangeTime}
/>
<VirtualizedTraceView {...rest} currentViewRangeTime={viewRange.time.current} />
<VirtualizedTraceView
{...rest}
{...traceTimeline}
setSpanNameColumnWidth={setSpanNameColumnWidth}
currentViewRangeTime={viewRange.time.current}
/>
</div>
);
}
}

function mapStateToProps(state: ReduxState) {
const spanNameColumnWidth = state.traceTimeline.spanNameColumnWidth;
return { spanNameColumnWidth };
}

function mapDispatchToProps(dispatch: Dispatch<ReduxState>): TDispatchProps {
const { setSpanNameColumnWidth, expandAll, expandOne, collapseAll, collapseOne } = bindActionCreators(
actions,
dispatch
);
return { setSpanNameColumnWidth, expandAll, expandOne, collapseAll, collapseOne };
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(TraceTimelineViewerImpl);
Loading

0 comments on commit e884e7c

Please sign in to comment.