Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jaeger UI visualizing span with multiple parents #477

Merged
merged 24 commits into from
Dec 13, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
be7b0da
Add button icon to spans with multiple references
rubenvp8510 Nov 13, 2019
805bae5
Focus without hide other childs
rubenvp8510 Nov 13, 2019
1f7bba1
Improve ReferencesButton component
rubenvp8510 Nov 14, 2019
5bd6ddb
Add icon for spans refered by a multiparent span
rubenvp8510 Nov 14, 2019
70442f6
Fix tests
rubenvp8510 Nov 14, 2019
3fe484e
Test ReferencesButton component
rubenvp8510 Nov 16, 2019
488b2c3
Test span multiple reference transform
rubenvp8510 Nov 16, 2019
25c6bc9
Link to external references in other traces
rubenvp8510 Nov 17, 2019
4952cc4
Change reference link text
rubenvp8510 Nov 19, 2019
52cc0e7
References accordion in span details
rubenvp8510 Nov 20, 2019
8426a71
Change focusSpan function so it can be reused by accordion and ref bu…
rubenvp8510 Nov 20, 2019
b0f45d6
Create referenceLink component to reuse on accordion
rubenvp8510 Nov 20, 2019
8f33d80
Cosmetic changes to references accordion
rubenvp8510 Nov 21, 2019
ab4c324
Change icon for navigate to refered spans
rubenvp8510 Nov 22, 2019
c6b3a48
Reference button does not show tooltip on single link case
rubenvp8510 Nov 22, 2019
c3980a3
Added reference type info to references accordian
rubenvp8510 Nov 22, 2019
9ea2755
Merge branch 'master' into Issue-467
everett980 Dec 10, 2019
71ecc29
Multiple improvements to tests ,css styles and some components
rubenvp8510 Dec 11, 2019
5c824d9
Merge branch 'Issue-467' of github.com:rubenvp8510/jaeger-ui into Iss…
rubenvp8510 Dec 11, 2019
b8b908b
More improvements to tests ,css styles and some components
rubenvp8510 Dec 11, 2019
b59b5e8
Fix license headers
rubenvp8510 Dec 11, 2019
07237ef
Add Reference rendering tests to SpanBarRow
rubenvp8510 Dec 11, 2019
c4d7b5b
Small comments, improved tests and fix class names
rubenvp8510 Dec 12, 2019
24a3759
Unify criteria for externa/internal references for ReferenceLink and …
rubenvp8510 Dec 12, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Unify criteria for externa/internal references for ReferenceLink and …
…ReferencesButton components

Signed-off-by: Ruben Vargas <ruben.vp8510@gmail.com>
  • Loading branch information
rubenvp8510 committed Dec 12, 2019
commit 24a3759b8c5469fa2d2ac7551c76964c71231753
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,6 @@ describe(ReferencesButton, () => {
);

const baseProps = {
traceID: trace.traceID,
trace: {
data: trace,
},
focusSpan: () => {},
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import ReferenceLink from '../url/ReferenceLink';

type TReferencesButtonProps = {
references: SpanReference[];
traceID: string;
children: React.ReactNode;
tooltipText: string;
focusSpan: (spanID: string) => void;
Expand All @@ -38,7 +37,6 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
<Menu.Item key={`${spanID}`}>
<ReferenceLink
reference={ref}
traceID={this.props.traceID}
focusSpan={this.props.focusSpan}
className="ReferencesButton--TraceRefLink"
>
Expand Down Expand Up @@ -76,12 +74,7 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
const ref = references[0];
return (
<Tooltip {...tooltipProps}>
<ReferenceLink
reference={ref}
traceID={this.props.traceID}
focusSpan={focusSpan}
className="ReferencesButton-MultiParent"
>
<ReferenceLink reference={ref} focusSpan={focusSpan} className="ReferencesButton-MultiParent">
{children}
</ReferenceLink>
</Tooltip>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,6 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
{span.references && span.references.length > 1 && (
<ReferencesButton
references={span.references}
traceID={span.traceID}
tooltipText="Contains multiple references"
focusSpan={focusSpan}
>
Expand All @@ -167,7 +166,6 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
{span.subsidiarilyReferencedBy && span.subsidiarilyReferencedBy.length > 0 && (
<ReferencesButton
references={span.subsidiarilyReferencedBy}
traceID={span.traceID}
tooltipText={`This span is referenced by ${
span.subsidiarilyReferencedBy.length === 1 ? 'another span' : 'multiple other spans'
}`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ describe('<References>', () => {

const props = {
data: references,
traceID: 'trace1',
focusSpan: jest.fn(),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,25 @@ type AccordianReferencesProps = {
interactive?: boolean;
isOpen: boolean;
onToggle?: null | (() => void);
traceID: string;
focusSpan: (uiFind: string) => void;
};

type ReferenceItemProps = {
data: SpanReference[];
focusSpan: (uiFind: string) => void;
traceID: string;
};

// export for test
export function References(props: ReferenceItemProps) {
const { data, focusSpan, traceID } = props;
const { data, focusSpan } = props;

return (
<div className="ReferencesList u-simple-scrollbars">
<ul className="ReferencesList--List">
{data.map(reference => {
return (
<li className="ReferencesList--Item" key={`${reference.spanID}`}>
<ReferenceLink reference={reference} traceID={traceID} focusSpan={focusSpan}>
<ReferenceLink reference={reference} focusSpan={focusSpan}>
<span className="ReferencesList--itemContent">
{reference.span ? (
<span>
Expand Down Expand Up @@ -81,7 +80,7 @@ export default class AccordianReferences extends React.PureComponent<AccordianRe
};

render() {
const { data, highContrast, interactive, isOpen, onToggle, focusSpan, traceID } = this.props;
const { data, highContrast, interactive, isOpen, onToggle, focusSpan } = this.props;
const isEmpty = !Array.isArray(data) || !data.length;
const iconCls = cx('u-align-icon', { 'AccordianKReferences--emptyIcon': isEmpty });
let arrow: React.ReactNode | null = null;
Expand Down Expand Up @@ -110,7 +109,7 @@ export default class AccordianReferences extends React.PureComponent<AccordianRe
</strong>{' '}
({data.length})
</div>
{isOpen && <References data={data} focusSpan={focusSpan} traceID={traceID} />}
{isOpen && <References data={data} focusSpan={focusSpan} />}
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export default function SpanDetail(props: SpanDetailProps) {
data={references}
isOpen={isReferencesOpen}
onToggle={() => referencesToggle(spanID)}
traceID={span.traceID}
focusSpan={focusSpan}
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ import ReferenceLink from './ReferenceLink';

describe(ReferenceLink, () => {
const focusMock = jest.fn();
const traceID = 'trace1';

const sameTraceRef = {
refType: 'CHILD_OF',
traceID: 'trace1',
spanID: 'span1',
span: {
// not null or undefined is an indicator of an internal reference
},
};

const externalRef = {
Expand All @@ -35,28 +37,22 @@ describe(ReferenceLink, () => {

describe('rendering', () => {
it('render for this trace', () => {
const component = shallow(
<ReferenceLink reference={sameTraceRef} traceID={traceID} focusSpan={focusMock} />
);
const component = shallow(<ReferenceLink reference={sameTraceRef} focusSpan={focusMock} />);
const link = component.find('a');
expect(link.length).toBe(1);
expect(link.props().role).toBe('button');
});

it('render for external trace', () => {
const component = shallow(
<ReferenceLink reference={externalRef} traceID={traceID} focusSpan={focusMock} />
);
const component = shallow(<ReferenceLink reference={externalRef} focusSpan={focusMock} />);
const link = component.find('a[href="/trace/trace2/uiFind?=span2"]');
expect(link.length).toBe(1);
});
});
describe('focus span', () => {
it('call focusSpan', () => {
focusMock.mockReset();
const component = shallow(
<ReferenceLink reference={sameTraceRef} traceID={traceID} focusSpan={focusMock} />
);
const component = shallow(<ReferenceLink reference={sameTraceRef} focusSpan={focusMock} />);
const link = component.find('a');
link.simulate('click');
expect(focusMock).toHaveBeenLastCalledWith('span1');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { getUrl } from '.';

type ReferenceLinkProps = {
reference: SpanReference;
traceID: string;
children: React.ReactNode;
className?: string;
focusSpan: (spanID: string) => void;
Expand All @@ -28,9 +27,9 @@ type ReferenceLinkProps = {
const linkToExternalSpan = (traceID: string, spanID: string) => `${getUrl(traceID)}/uiFind?=${spanID}`;

export default function ReferenceLink(props: ReferenceLinkProps) {
const { traceID, reference, children, className, focusSpan, ...otherProps } = props;
const { reference, children, className, focusSpan, ...otherProps } = props;
delete otherProps.onClick;
if (traceID === reference.traceID) {
if (reference.span) {
return (
<a role="button" onClick={() => focusSpan(reference.spanID)} className={className} {...otherProps}>
{children}
Expand Down