-
Notifications
You must be signed in to change notification settings - Fork 484
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
Move filter to query param and highlight filter matches on graphs #310
Conversation
Codecov Report
@@ Coverage Diff @@
## master #310 +/- ##
==========================================
+ Coverage 83.18% 90.72% +7.53%
==========================================
Files 145 152 +7
Lines 3224 3288 +64
Branches 660 666 +6
==========================================
+ Hits 2682 2983 +301
+ Misses 434 250 -184
+ Partials 108 55 -53
Continue to review full report at Codecov.
|
Can you add a gif / screenshot of the trace diff search? Also, the gif doesn't show much of a highlight... is it too grainy to see the highlight? If so, can you provide a screenshot of the effect? And, for the trace graph, is it not possible to use the search already on the page? Seems odd to have a second search input field. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great. A couple of comments. LMK if any of them look awry.
} | ||
|
||
export function mapStateToProps(state: ReduxState): { graphSearch?: string } { | ||
const { graphSearch } = queryString.parse(state.router.location.search); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It'd be nice to converge the graph and trace timeline search.
Also, for the query parameters, we took the approach of prefacing UI state related query params with ui<page><variable>
, e.g. uiTraceDetailFind
or something along those lines.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@tiffon I have been working on converging the graph and timeline search.
Things have changed quite a bit while working on the TraceTimeline search, should I close this PR and open a new one once #303 is done?
Also, I changed the name of the queryParameter to be more general, I will make sure it also includes the fact that it is a UI state variable, however I am not sure how to define the <page>
part as this will be used for Trace Timeline, Trace Graph, and Trace Diff Graph.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Opening a new PR might make sense. Or, we can try the "discard review" feature and see what happens.
Re the query param, maybe simple uiFind
would work?
textFilter | ||
.split(' ') | ||
.map(s => s.trim()) | ||
.filter(s => s) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be .filter(Boolean)
.
|
||
// split textFilter by whitespace, remove empty strings, and extract includeFilters and excludeKeys | ||
textFilter | ||
.split(' ') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.split(/\s+/)
should remove the need for the .trim()
map.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated filter-spans with these two changes
if (graphSearchQueryParam) { | ||
queryParams.graphSearch = graphSearchQueryParam; | ||
} | ||
this.props.history.replace(prefixUrl(`?${queryString.stringify(queryParams)}`)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would think this might always replace the URL with /?....
, i.e. with the URL at the root (with the prefix)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not entirely sure how prefixUrl
works, but it seems to work as expected on the timeline view and the diff view
@@ -0,0 +1,109 @@ | |||
// @flow |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like it might be nice to standardize naming where "search" is the search form and jaeger-query related and "find" is local to the UI. What do you think of renaming this to GraphFind
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as discussed above, changed to uiFind
Updated branch accordingly, along with other significant changes relating to #303
Add alternative view in TracePage which allows to see count, avg. time, total time and self time for a given trace grouped by service and operation. Signed-off-by: Patrick Coray <[email protected]> Signed-off-by: Everett Ross <[email protected]>
* Misc tweaks for search and trace detail embed mode Mostly from prior comments. - Rename query parameter for embedding to start with "ui" and use the page as the first word, e.g. "uiSearchHideGraph" - Change query parameters for the minimap and trace details from hiding to showing, e.g. "hidemap" -> "uiTimelineShowMap" - Save the embed query params in Redux state instead of passing them around - Use a Link with an icon instead of text buttons for opening the standalone view of the page - Propagate whether the trace detail page is from the search page or not via the Location#state member on the React Router Location - When returning to the search page use the previous results instead of executing a new search. This is done by storing the query with the search results. - Adjusted aesthetic of "Back to Search" button on trace detail page - Sequester parsing and stripping query parameters for the embed mode to a util - In various places switch to using the component/*/url.js#getUrl functions instead of prefixUrl(...) Signed-off-by: Joe Farro <[email protected]> * Fix test break from merging master Signed-off-by: Joe Farro <[email protected]> * Keep redux search query synced with results - Keep redux search query synced with redux search result (and their processing). Also fixes jaegertracing#288. - Bolster unit tests Signed-off-by: Joe Farro <[email protected]> * Fix typo Signed-off-by: Joe Farro <[email protected]> * Make TracePageHeader collapsible when embedded - Reconfigured embed query parameters for timeline: - uiTimelineCollapseTitle=1 - TracePageHeader starts out collapsed - uiTimelineHideMinimap=1 - TracePageHeader does not show the minimap - uiTimelineHideSummary=1 - TracePageHeader does not show the trace summary - Consolidate TracePageHeader and TracePageHeaderEmbed - Style changes to TracePageHeader - Embedded TracePageHeader can now be expanded and collapsed - Misc cleanup in TracePageHeader - Better comparisons for search page query to prevent re-fetching when returning to the search page Signed-off-by: Joe Farro <[email protected]> * Fix typo disableComparisions Signed-off-by: Joe Farro <[email protected]> * Use public registry to newly installed packages Signed-off-by: Joe Farro <[email protected]> * Test improvements Signed-off-by: Joe Farro <[email protected]> Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Joe Farro <[email protected]> Signed-off-by: Everett Ross <[email protected]>
…racing#290) * Add button to reset viewing layer zoom (jaegertracing#215) Signed-off-by: Everett Ross <[email protected]> * Adhere to className pattern, sort imports, remove event handling Signed-off-by: Everett Ross <[email protected]> Signed-off-by: Everett Ross <[email protected]>
…gertracing#292) * Add a copy icon to entries in KeyValuesTable (jaegertracing#204) Signed-off-by: Everett Ross <[email protected]> * Add a tooltip to copy icon in KeyValuesTable Signed-off-by: Everett Ross <[email protected]> * Fix copied test name, add test for KeyValuesTable state change on tooltip hide Signed-off-by: Everett Ross <[email protected]> * Add eslint rule to prevent unnecessary braces in jsx Signed-off-by: Everett Ross <[email protected]> * Add classname to tr to remove element selector, fix yarn.lock Signed-off-by: Everett Ross <[email protected]> Signed-off-by: Everett Ross <[email protected]>
…tracing#244) (jaegertracing#291) * Add validation for duration fields in SearchForm (jaegertracing#244) Signed-off-by: Everett Ross <[email protected]> * Add tests for redux-form-field-adapter Signed-off-by: Everett Ross <[email protected]> * Fix boolean prop type Signed-off-by: Everett Ross <[email protected]> * Add boolean for input validation, change popover to show when inactive Signed-off-by: Everett Ross <[email protected]> * Add tests for onChangeAdapter Signed-off-by: Everett Ross <[email protected]> * Create separate ValidatedAdaptedInput for duration fields Signed-off-by: Everett Ross <[email protected]> * Remove unnecessary curly braces Signed-off-by: Everett Ross <[email protected]> Signed-off-by: Everett Ross <[email protected]>
…racing#297) * Add indent guides to trace timeline view (jaegertracing#172) Signed-off-by: Everett Ross <[email protected]> * Add tests for connect functions, add more flow types Signed-off-by: Everett Ross <[email protected]> * Consolidate ducks, remove redudant PropTypes, add event type Signed-off-by: Everett Ross <[email protected]> * Rename hoverSpanId to hoverIndentGuideId Signed-off-by: Everett Ross <[email protected]> * Derive props from span, use dataset over getAttribute Signed-off-by: Everett Ross <[email protected]> Signed-off-by: Everett Ross <[email protected]>
…gertracing#307) Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
* WIP upgrade to create-react-app v2.1.2 Requires changes from PR jaegertracing#346 which are published as [email protected] timarney/react-app-rewired#346 Signed-off-by: Joe Farro <[email protected]> * Use node 8, less liberal browser support, fix test Signed-off-by: Joe Farro <[email protected]> * Use eslintrc, fix CI build, fix pre-commit hook Make sure the ./packages/jaeger-ui uses the ./.eslintrc. Make sure all tests are run in pre-commit hook. CRA is now failing builds in CI if there are any webpack build warnings: https://github.com/facebook/create-react-app/blob/73e3d0ebf1f2834e1c8c41d3a25ae5e0e99e6f14/packages/react-scripts/scripts/build.js#L171-L184 Signed-off-by: Joe Farro <[email protected]> * Skip react-vis.css format check, fail-fast in CI Signed-off-by: Joe Farro <[email protected]> * Don't collect coverage from dev proxy setup Signed-off-by: Joe Farro <[email protected]> * Upgrade react-app-rewired to 2.0.1 Avoid issue yarnpkg/yarn#6300 Signed-off-by: Joe Farro <[email protected]> * Cleanup npm packages in packages/jaeger-ui Signed-off-by: Joe Farro <[email protected]> Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
…cing#275) (jaegertracing#278) * Ability to open additional menu links in same tab (jaegertracing#275) Signed-off-by: Vitaliy Zabolotskyy <[email protected]> * Add negative test case Signed-off-by: Vitaliy Zabolotskyy <[email protected]> * Add helper function to create item links Signed-off-by: Vitaliy Zabolotskyy <[email protected]> * Fix no-use-before-define lint error Signed-off-by: Vitaliy Zabolotskyy <[email protected]> * Use anchorTarget in custom menu configuration Signed-off-by: Joe Farro <[email protected]> * Fix typo in test case Signed-off-by: Joe Farro <[email protected]> Signed-off-by: Everett Ross <[email protected]>
* Revive the changelog Signed-off-by: Joe Farro <[email protected]> * Add helper script to generate CHANGELOG entries Signed-off-by: Joe Farro <[email protected]> * One more changelog item, fix date typo Signed-off-by: Joe Farro <[email protected]> * Fix phrasing in changelog Signed-off-by: Joe Farro <[email protected]> Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Seems as though mixing inheritance and definition when using both long-hand and short-hand css rules for outlines works a bit differently than I originally thought. I changed the |
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Feedback has been addressed, will make issues for the outstanding work outside of the scope of this PR
…aph' into issue-239-fix-TracePageHeader-tests-once-new-version-of-enzyme-is-released
This PR should get the test coverage up to snuff. It was once 100% for all files in this PR. Now it might be slightly dated so I'll take a look on Thursday. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great. Search seems faster.
A handful of small comments.
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js
Outdated
Show resolved
Hide resolved
stroke-width: 1.2; | ||
} | ||
|
||
.TraceDiffGraph--dag.uiFind { |
There was a problem hiding this comment.
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
.
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css
Show resolved
Hide resolved
props: Props; | ||
export function setOnNodesContainer(state: Object) { | ||
const { zoomTransform } = state; | ||
const matchSize = 8 + 4 / _get(zoomTransform, 'k', 1); |
There was a problem hiding this comment.
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.
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js
Show resolved
Hide resolved
const ancestors: Span[] = []; | ||
let ref = getFirstAncestor(span); | ||
while (ref) { | ||
ancestors.push(ref); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like you can push the ID in and skip _map(...., 'spanID')
ancestors.push(ref.spanID);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good call, I changed it to a set of IDs (just in case there are repeated IDs) and then converted to an array in the return.
although now I am wondering if it is possible for there to be repeated spanIDs in a trace.
_searchBar: { current: Input | null }; | ||
_scrollManager: ScrollManager; | ||
traceDagEV: Object; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why make this an object instead of something with { edges: ..., vertices: ... }
or direct _edges
and _vertices
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if convPlexus
's return value was typed, then this and other places could simply import that return value. I started trying to type it but wasn't quite satisfying flow and the errors it gave were not simple to debug. Since we're about to convert to typescript, I'd rather add a todo comment.
// TODO: typescript conversion - use convPlexus return type
@@ -346,10 +306,14 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage | |||
return <ErrorMessage className="ub-m3" error={trace.error || 'Unknown error'} />; | |||
} | |||
|
|||
// $FlowIgnore because flow believes Set<string> cannot be assigned to Set<string | number> | |||
const findMatches: Set<string | number> = traceGraphView |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If uiFind
is empty, then filtering the vertices or spans is unnecessary.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Both of the filter functions that can be called have a default return for falsy uiFind
arguments.
packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.js
Show resolved
Hide resolved
* Process FOLLOWS_FROM spans in TraceView Signed-off-by: Ruben Vargas <[email protected]> * Add test for FOLLOWS_FROM span relation for SpanTreeOffset Signed-off-by: Ruben Vargas <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
41ebaad
to
c3d4d14
Compare
DCO seems to not work whenever master is merged into a branch. Which ever commits exists on master and not my branch fail even though they made it to master somehow. |
…aph' into issue-239-fix-TracePageHeader-tests-once-new-version-of-enzyme-is-released
Signed-off-by: Everett Ross <[email protected]>
…ests-once-new-version-of-enzyme-is-released Update enzyme, Re-enable and add TraceDiff and TracePage tests
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 The tests look great! 🎉
Some minor comments.
).toEqual([defaultA, defaultB, ...defaultCohortIds, nonDefaultCohortId]); | ||
}); | ||
|
||
// This test may false negative if previous tests are failing |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is this test dependent on previous tests? Seems like setting defaultProps
in beforeEach(...)
would avoid this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the test passes in isolation, but if this test and other tests are failing then the other tests should be investigated first as this one encompasses the functionality of simpler tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In that case, not sure I'd call it a false
negative. If this test and the simpler tests are failing, this test will still fail if run in isolation.
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css
Show resolved
Hide resolved
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/traceDiffGraphUtils.js
Outdated
Show resolved
Hide resolved
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceDiffHeader.test.js
Outdated
Show resolved
Hide resolved
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceDiffHeader.test.js
Outdated
Show resolved
Hide resolved
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js
Outdated
Show resolved
Hide resolved
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js
Outdated
Show resolved
Hide resolved
Signed-off-by: Everett Ross <[email protected]>
…tracegraph-and-tracediffgraph
Signed-off-by: Everett Ross <[email protected]>
Signed-off-by: Everett Ross <[email protected]>
Feedback implemented except for one TODO re types that'll be easier in tyescript
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome work! 🎉
…de-search-to-tracegraph-and-tracediffgraph Move filter to query param and highlight filter matches on graphs Signed-off-by: vvvprabhakar <[email protected]>
Which problem is this PR solving?
Short description of the changes
Demo
On initial load with three spanIDs provided:
Add another filter word
After clicking expand all
Changing filter does not hide / show any children nor expand detail states, only changes which rows are highlighted. On refresh all highlighted rows would have their detail states visible and spans not on any path to a highlighted row would be hidden.
Clickable SpanIDs
Find in Diff Graph
Diff Graph does not have header, uiFind is present in the bottom right
Finding Gif (old uiFind)
Updated uiFind
Updated uiFind Close Up
Find in Trace Graph
Close Up of Find
re-uses find header on Timeline view, but up and down arrows are disabled.