-
Notifications
You must be signed in to change notification settings - Fork 483
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 <patrick.coray@bluewin.ch> Signed-off-by: Everett Ross <reverett@uber.com>
* 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 <joef@uber.com> * Fix test break from merging master Signed-off-by: Joe Farro <joef@uber.com> * 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 <joef@uber.com> * Fix typo Signed-off-by: Joe Farro <joef@uber.com> * 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 <joef@uber.com> * Fix typo disableComparisions Signed-off-by: Joe Farro <joef@uber.com> * Use public registry to newly installed packages Signed-off-by: Joe Farro <joef@uber.com> * Test improvements Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…racing#290) * Add button to reset viewing layer zoom (jaegertracing#215) Signed-off-by: Everett Ross <reverett@uber.com> * Adhere to className pattern, sort imports, remove event handling Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…gertracing#292) * Add a copy icon to entries in KeyValuesTable (jaegertracing#204) Signed-off-by: Everett Ross <reverett@uber.com> * Add a tooltip to copy icon in KeyValuesTable Signed-off-by: Everett Ross <reverett@uber.com> * Fix copied test name, add test for KeyValuesTable state change on tooltip hide Signed-off-by: Everett Ross <reverett@uber.com> * Add eslint rule to prevent unnecessary braces in jsx Signed-off-by: Everett Ross <reverett@uber.com> * Add classname to tr to remove element selector, fix yarn.lock Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…tracing#244) (jaegertracing#291) * Add validation for duration fields in SearchForm (jaegertracing#244) Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for redux-form-field-adapter Signed-off-by: Everett Ross <reverett@uber.com> * Fix boolean prop type Signed-off-by: Everett Ross <reverett@uber.com> * Add boolean for input validation, change popover to show when inactive Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for onChangeAdapter Signed-off-by: Everett Ross <reverett@uber.com> * Create separate ValidatedAdaptedInput for duration fields Signed-off-by: Everett Ross <reverett@uber.com> * Remove unnecessary curly braces Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…racing#297) * Add indent guides to trace timeline view (jaegertracing#172) Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for connect functions, add more flow types Signed-off-by: Everett Ross <reverett@uber.com> * Consolidate ducks, remove redudant PropTypes, add event type Signed-off-by: Everett Ross <reverett@uber.com> * Rename hoverSpanId to hoverIndentGuideId Signed-off-by: Everett Ross <reverett@uber.com> * Derive props from span, use dataset over getAttribute Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…gertracing#307) Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
* WIP upgrade to create-react-app v2.1.2 Requires changes from PR jaegertracing#346 which are published as react-app-rewired@2.0.2-next.0 timarney/react-app-rewired#346 Signed-off-by: Joe Farro <joef@uber.com> * Use node 8, less liberal browser support, fix test Signed-off-by: Joe Farro <joef@uber.com> * 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 <joef@uber.com> * Skip react-vis.css format check, fail-fast in CI Signed-off-by: Joe Farro <joef@uber.com> * Don't collect coverage from dev proxy setup Signed-off-by: Joe Farro <joef@uber.com> * Upgrade react-app-rewired to 2.0.1 Avoid issue yarnpkg/yarn#6300 Signed-off-by: Joe Farro <joef@uber.com> * Cleanup npm packages in packages/jaeger-ui Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
…cing#275) (jaegertracing#278) * Ability to open additional menu links in same tab (jaegertracing#275) Signed-off-by: Vitaliy Zabolotskyy <zablvit@gmail.com> * Add negative test case Signed-off-by: Vitaliy Zabolotskyy <zablvit@gmail.com> * Add helper function to create item links Signed-off-by: Vitaliy Zabolotskyy <zablvit@gmail.com> * Fix no-use-before-define lint error Signed-off-by: Vitaliy Zabolotskyy <zablvit@gmail.com> * Use anchorTarget in custom menu configuration Signed-off-by: Joe Farro <joef@uber.com> * Fix typo in test case Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
* Revive the changelog Signed-off-by: Joe Farro <joef@uber.com> * Add helper script to generate CHANGELOG entries Signed-off-by: Joe Farro <joef@uber.com> * One more changelog item, fix date typo Signed-off-by: Joe Farro <joef@uber.com> * Fix phrasing in changelog Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
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 <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
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 <ruben.vp8510@gmail.com> * Add test for FOLLOWS_FROM span relation for SpanTreeOffset Signed-off-by: Ruben Vargas <ruben.vp8510@gmail.com>
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
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 <reverett@uber.com>
…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 <reverett@uber.com>
…tracegraph-and-tracediffgraph
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
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 <vvvprabhakar@gmail.com>
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.