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

Move filter to query param and highlight filter matches on graphs #310

Merged
Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
bdc0220
Add a TraceGraph view (#273) (#276)
copa2 Dec 18, 2018
4112482
Revisions for search and trace detail embed mode (#286)
tiffon Dec 20, 2018
2baf075
Unfocus unit test (#298)
tiffon Dec 20, 2018
d90d042
Add a Button to Reset Viewing Layer Zoom (#215) (#290)
everett980 Jan 3, 2019
29b340d
Add a copy icon to entries in KeyValuesTable (#204) (#292)
everett980 Jan 4, 2019
e0f34e4
Add popover and prevent submit if duration params are invalid (#244) …
everett980 Jan 4, 2019
bf70c14
Add indent guides to trace timeline view (#172) (#297)
everett980 Jan 4, 2019
07c7f4f
Add ability to search for nodes in TraceDiffGraph and TraceGraph (#307)
everett980 Jan 7, 2019
1953db5
Style GraphSearch, Debounce query param updating
everett980 Jan 8, 2019
e918deb
Use hex instead of html colors, remove commented code
everett980 Jan 8, 2019
181562c
Handle falsy graphSearch value in state, improve typing
everett980 Jan 8, 2019
edf4805
Move GraphSearch and use as utility
everett980 Jan 8, 2019
d1e05d6
Add tests for GraphSearch
everett980 Jan 8, 2019
6ea7d6a
Update create-react-app to 2.1.2 (#302)
tiffon Jan 9, 2019
5fa907b
Add tests for consuming GraphSearch, Add tests for filter-spans
everett980 Jan 9, 2019
0122fd7
Improve spy variable name
everett980 Jan 9, 2019
f08a609
Ability to open additional menu links in same tab (Resolves #275) (#278)
zablvit Jan 9, 2019
8e2df85
Revive the changelog (#300)
tiffon Jan 12, 2019
7ea05f4
Add SpanID support to filter-spans, Consolidate textFilter & GraphSearch
everett980 Jan 15, 2019
2bf1b43
Unify uiFind name, fix refs, improve types, remove commented code
everett980 Jan 15, 2019
353d69c
Add tests to new & tested files, merge common/GraphSearch into user
everett980 Jan 15, 2019
99b7a6c
Update exisitng test files
everett980 Jan 16, 2019
10b5194
Polish filter-spans
everett980 Jan 16, 2019
dd9f14c
Merge branch 'jaegertracingmaster' into issue-307-add-node-search-to-…
everett980 Jan 16, 2019
0c5b591
Use uppercase types, remove constructor for initial state
everett980 Jan 16, 2019
50db264
Update enzyme, Re-enable and add TracePage/index.test.js tests
everett980 Jan 25, 2019
9a7e0c1
Merge branch 'jaegertracingmaster' into issue-307-add-node-search-to-…
everett980 Jan 25, 2019
ef880c7
Merge branch 'issue-307-add-node-search-to-tracegraph-and-tracediffgr…
everett980 Jan 25, 2019
e531d6e
Add tests to TraceDiff/
everett980 Feb 6, 2019
fe420c6
Treat all span relationships equally, make ui-find-match css more obv…
everett980 Feb 7, 2019
a5178e0
Fix node/edge layering, simplify ui-find-match css
everett980 Feb 7, 2019
66f080d
Change diffNode ui match color, scale ui match outline size
everett980 Feb 15, 2019
9dc1a4e
Calculate box-shadow size on nodesContainer not drawNode
everett980 Feb 20, 2019
f685d47
Fix color attributes to preserve node text color
everett980 Feb 21, 2019
b6b40c0
Rename UIFind to UiFind, Update TraceDiffFind
everett980 Feb 21, 2019
acd3e66
Finish DiffGraph find css, Render 0 count suffix
everett980 Feb 25, 2019
2434056
merge master and update test
everett980 Feb 25, 2019
51337fb
Fix git case insensitivity issue
everett980 Feb 26, 2019
4313988
Merge branch 'issue-307-add-node-search-to-tracegraph-and-tracediffgr…
everett980 Feb 26, 2019
1f5421d
Merge updated graph find, maintain increased test coverage
everett980 Feb 26, 2019
69a576a
Remove redundant find, Fix TraceGraph suffix, Fix flow complaint, WIP
everett980 Mar 1, 2019
259cd13
Clean up WIP commit
everett980 Mar 5, 2019
15c51d5
Clean up CSS, Track only TracePage, Fix span-ancestor-ids logic
everett980 Mar 5, 2019
a1f5e59
Ensure scroll to bottom scrolls to last visible span
everett980 Mar 5, 2019
aa3f2e5
Move addToUiFind logic to VirtualizedTraceView
everett980 Mar 5, 2019
df9bafd
Merge branch 'master' into issue-307-add-node-search-to-tracegraph-an…
everett980 Mar 5, 2019
7422720
Merge branch 'issue-307-add-node-search-to-tracegraph-and-tracediffgr…
everett980 Mar 6, 2019
c5034fa
Process FOLLOWS_FROM spans in TraceView (#335)
rubenvp8510 Mar 7, 2019
95026f9
Move graph utils to new file, Clean up span-ancestor-id loop
everett980 Mar 7, 2019
c3d4d14
fix merge again
everett980 Mar 8, 2019
bf3386f
Merge branch 'issue-307-add-node-search-to-tracegraph-and-tracediffgr…
everett980 Mar 8, 2019
b4afe2d
Update tests after merge
everett980 Mar 8, 2019
de6571f
Merge pull request #1 from everett980/issue-239-fix-TracePageHeader-t…
everett980 Mar 8, 2019
5386868
Clean up and DRY out tests, Change trackFilter to function
everett980 Mar 11, 2019
5971072
Merge branch 'jaegertracingmaster' into issue-307-add-node-search-to-…
everett980 Mar 11, 2019
c5f40c8
Fix yarn.lock urls
everett980 Mar 11, 2019
8a4b0fb
Fix yarn.lock change %2f back to /
everett980 Mar 11, 2019
d3965dc
Merge branch 'master' into issue-307-add-node-search-to-tracegraph-an…
tiffon Mar 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
1 change: 1 addition & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
./flow-typed/npm

[options]
suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore

[version]
0.71.0
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,35 @@ limitations under the License.
}

.TraceDiffGraph--dag {
transition: background 0.5s ease;
stroke-width: 1.2;
}

.TraceDiffGraph--dag.uiFind {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this CSS selector reflects the state of a component, uiFind should be prefixed with is-, e.g. something like .is-uiFind or .is-find-mode.

background: #ddd;
}

.TraceDiffGraph--dag.is-small {
stroke-width: 0.7;
}

/* Find within diff */
.TraceDiffGraph--uiFind {
bottom: 20px;
position: absolute;
right: 20px;
width: 300px;
z-index: 1;
}

.TraceDiffGraph--uiFind > .ant-input {
border: 1px solid #777;
border-radius: 0;
border-color: #aaa;
box-shadow: 0 0 2px 2px #ccc;
border-radius: 0;
}
everett980 marked this conversation as resolved.
Show resolved Hide resolved

tiffon marked this conversation as resolved.
Show resolved Hide resolved
/* DAG minimap */

.TraceDiffGraph--miniMap {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@

import * as React from 'react';
import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
import cx from 'classnames';
import _get from 'lodash/get';
import { connect } from 'react-redux';

import drawNode from './drawNode';
import { getUiFindVertexKeys, getEdgesAndVertices } from './traceDiffGraphUtils';
import ErrorMessage from '../../common/ErrorMessage';
import LoadingIndicator from '../../common/LoadingIndicator';
import UiFindInput, { extractUiFindFromState } from '../../common/UiFindInput';
import { fetchedState } from '../../../constants';
import convPlexus from '../../../model/trace-dag/convPlexus';
import TraceDag from '../../../model/trace-dag/TraceDag';

import type { FetchedTrace } from '../../../types';

Expand All @@ -31,25 +34,47 @@ import './TraceDiffGraph.css';
type Props = {
a: ?FetchedTrace,
b: ?FetchedTrace,
uiFind?: string,
};

const { classNameIsSmall } = DirectedGraph.propsFactories;

function setOnEdgesContainer(state: Object) {
export function setOnEdgesContainer(state: Object) {
const { zoomTransform } = state;
if (!zoomTransform) {
return null;
}
const { k } = zoomTransform;
const opacity = 0.1 + k * 0.9;
return { style: { opacity } };
return { style: { opacity, zIndex: 1, position: 'absolute', pointerEvents: 'none' } };
}

export default class TraceDiffGraph extends React.PureComponent<Props> {
props: Props;
export function setOnNodesContainer(state: Object) {
const { zoomTransform } = state;
const matchSize = 8 + 4 / _get(zoomTransform, 'k', 1);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like these magic numbers could stand to be consts.

return {
style: {
outline: `transparent solid ${matchSize}px`,
},
};
}

export function setOnNode() {
return {
style: {
outline: 'inherit',
},
};
}

class TraceDiffGraph extends React.PureComponent<Props> {
props: Props;
layoutManager: LayoutManager;

static defaultProps = {
uiFind: '',
};

constructor(props: Props) {
super(props);
this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
Expand All @@ -60,7 +85,12 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
}

render() {
const { a, b } = this.props;
const {
a,
b,
// Flow requires `= ''` because it does not interpret defaultProps
uiFind = '',
} = this.props;
if (!a || !b) {
return <h1 className="u-mt-vast u-tx-muted ub-tx-center">At least two Traces are needed</h1>;
}
Expand Down Expand Up @@ -92,27 +122,36 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
if (!aData || !bData) {
return <div className="TraceDiffGraph--graphWrapper" />;
}
const aTraceDag = TraceDag.newFromTrace(aData);
const bTraceDag = TraceDag.newFromTrace(bData);
const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
const { edges, vertices } = convPlexus(diffDag.nodesMap);
const { edges, vertices } = getEdgesAndVertices(aData, bData);
const keys = getUiFindVertexKeys(uiFind, vertices);
everett980 marked this conversation as resolved.
Show resolved Hide resolved
const dagClassName = cx('TraceDiffGraph--dag', { uiFind });

return (
<div className="TraceDiffGraph--graphWrapper">
<DirectedGraph
minimap
zoom
arrowScaleDampener={0}
className="TraceDiffGraph--dag"
className={dagClassName}
minimapClassName="TraceDiffGraph--miniMap"
layoutManager={this.layoutManager}
getNodeLabel={drawNode}
getNodeLabel={drawNode(keys)}
everett980 marked this conversation as resolved.
Show resolved Hide resolved
setOnRoot={classNameIsSmall}
setOnEdgesContainer={setOnEdgesContainer}
setOnNodesContainer={setOnNodesContainer}
setOnNode={setOnNode}
edges={edges}
vertices={vertices}
/>
<UiFindInput
inputProps={{
className: 'TraceDiffGraph--uiFind',
suffix: uiFind.length && String(keys.size),
}}
/>
</div>
);
}
}

export default connect(extractUiFindFromState)(TraceDiffGraph);
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@ limitations under the License.
.DiffNode {
background: #bbb;
border: 1px solid #777;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.65);
cursor: pointer;
white-space: nowrap;
}

.TraceDiffGraph--dag.is-small .DiffNode > tbody {
opacity: 0;
.DiffNode.is-ui-find-match {
outline: inherit;
outline-color: #fff3d7;
}

.DiffNode.is-changed {
Expand All @@ -41,15 +43,23 @@ limitations under the License.
color: #fff;
}

.DiffNode.is-removed {
background: #cc1616;
border: none;
color: #fff;
}

.DiffNode.is-less {
border-color: #cc1616;
background: #ffa39e;
}

.DiffNode.is-removed {
background: #cc1616;
border: none;
color: #fff;
.TraceDiffGraph--dag.is-small .DiffNode--body {
opacity: 0;
}

.DiffNode--popover .DiffNode.is-ui-find-match {
outline: #fff3d7 solid 3px;
everett980 marked this conversation as resolved.
Show resolved Hide resolved
}

.DiffNode--metricCell {
Expand Down Expand Up @@ -78,7 +88,7 @@ limitations under the License.

.DiffNode--popover .DiffNode--copyIcon,
.DiffNode:not(:hover) .DiffNode--copyIcon {
display: none;
color: transparent;
everett980 marked this conversation as resolved.
Show resolved Hide resolved
}

/* Tweak the popover aesthetics - unfortunate but necessary */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,17 @@ import './drawNode.css';
type Props = {
a: number,
b: number,
isUiFindMatch: boolean,
operation: string,
service: string,
};

const abs = Math.abs;
const max = Math.max;

class DiffNode extends React.PureComponent<Props> {
props: Props;

export class DiffNode extends React.PureComponent<Props> {
render() {
const { a, b, operation, service } = this.props;
const { a, b, isUiFindMatch, operation, service } = this.props;
const isSame = a === b;
const className = cx({
'is-same': isSame,
Expand All @@ -47,11 +46,12 @@ class DiffNode extends React.PureComponent<Props> {
'is-added': a === 0,
'is-less': a > b && b > 0,
'is-removed': b === 0,
'is-ui-find-match': isUiFindMatch,
});
const chgSign = a < b ? '+' : '-';
const table = (
<table className={`DiffNode ${className}`}>
<tbody>
<tbody className={`DiffNode--body ${className}`}>
everett980 marked this conversation as resolved.
Show resolved Hide resolved
<tr>
<td className={`DiffNode--metricCell ${className}`} rowSpan={isSame ? 2 : 1}>
{isSame ? null : <span className="DiffNode--metricSymbol">{chgSign}</span>}
Expand Down Expand Up @@ -88,7 +88,21 @@ class DiffNode extends React.PureComponent<Props> {
}
}

export default function drawNode<T>(vertex: PVertex<T>) {
const { data, operation, service } = vertex.data;
return <DiffNode {...data} operation={operation} service={service} />;
function drawNode<T>(vertex: PVertex<T>, keys: Set<number | string>) {
const { data, members, operation, service } = vertex.data;
return (
<DiffNode
{...data}
isUiFindMatch={keys.has(vertex.key)}
members={members}
operation={operation}
service={service}
/>
);
}

export default function drawNodeGenerator(keys: Set<number | string>) {
return function drawVertex<T>(vertex: PVertex<T>) {
return drawNode(vertex, keys);
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import _get from 'lodash/get';
import _map from 'lodash/map';

import convPlexus from '../../../model/trace-dag/convPlexus';
import TraceDag from '../../../model/trace-dag/TraceDag';
import filterSpans from '../../../utils/filter-spans';

import type { PVertex } from '../../../model/trace-dag/types';
import type { Trace } from '../../../types/trace';

export type vertexKeys = Set<number | string>;
everett980 marked this conversation as resolved.
Show resolved Hide resolved

let lastUiFind: string;
let lastVertices: PVertex<Trace>[];
let uiFindVertexKeys: ?vertexKeys;

export function getUiFindVertexKeys(uiFind: string, vertices: PVertex<Trace>[]): vertexKeys {
if (uiFind === lastUiFind && vertices === lastVertices && uiFindVertexKeys) {
return uiFindVertexKeys;
}
const newVertexKeys: Set<number | string> = new Set();
vertices.forEach(({ key, data: { members } }) => {
if (_get(filterSpans(uiFind, _map(members, 'span')), 'size')) {
newVertexKeys.add(key);
}
});
lastUiFind = uiFind;
lastVertices = vertices;
uiFindVertexKeys = newVertexKeys;
return newVertexKeys;
}

let lastAData: ?Trace;
let lastBData: ?Trace;
let edgesAndVertices: ?Object;
tiffon marked this conversation as resolved.
Show resolved Hide resolved

export function getEdgesAndVertices(aData: Trace, bData: Trace) {
if (aData === lastAData && bData === lastBData && edgesAndVertices) {
return edgesAndVertices;
}
lastAData = aData;
lastBData = bData;
const aTraceDag = TraceDag.newFromTrace(aData);
const bTraceDag = TraceDag.newFromTrace(bData);
const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
edgesAndVertices = convPlexus(diffDag.nodesMap);
return edgesAndVertices;
}
13 changes: 13 additions & 0 deletions packages/jaeger-ui/src/components/TracePage/ScrollManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,19 @@ export default class ScrollManager {
if (!nextSpanIndex || nextSpanIndex === boundary) {
// might as well scroll to the top or bottom
nextSpanIndex = boundary - direction;

// If there are hidden children, scroll to the last visible span
if (childrenAreHidden) {
let isFallbackHidden: ?boolean;
do {
const { isHidden, parentIDs } = isSpanHidden(spans[nextSpanIndex], childrenAreHidden, spansMap);
if (isHidden) {
childrenAreHidden.add(...parentIDs);
nextSpanIndex--;
}
isFallbackHidden = isHidden;
} while (isFallbackHidden);
}
}
const nextRow = xrs.mapSpanIndexToRowIndex(nextSpanIndex);
this._scrollPast(nextRow, direction);
Expand Down
Loading