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

Directed graph React component #224

Merged
merged 1 commit into from
Jul 11, 2018
Merged

Conversation

tiffon
Copy link
Member

@tiffon tiffon commented Jul 9, 2018

@simonrobb – Can you stamp this?

Fix DCO issue from #222

This diff is identical to #222 but has been squashed to avert merging being blocked due to the DCO not being in compliance.


Directed graph component as an npm package.

These changes have been reviewed in #212.

I'll issue a separate PR with unit tests and better docs.

I'd like to get this merged into master as I'm currently working on trace diffs.

screen shot 2018-06-28 at 8 54 17 am

Signed-off-by: Joe Farro <joef@uber.com>
@tiffon tiffon requested a review from yurishkuro July 9, 2018 23:21
@ghost ghost assigned tiffon Jul 9, 2018
@ghost ghost added the review label Jul 9, 2018
@codecov
Copy link

codecov bot commented Jul 9, 2018

Codecov Report

Merging #224 into master will increase coverage by 0.09%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #224      +/-   ##
==========================================
+ Coverage   89.94%   90.03%   +0.09%     
==========================================
  Files         107      107              
  Lines        2366     2368       +2     
  Branches      481      481              
==========================================
+ Hits         2128     2132       +4     
+ Misses        200      198       -2     
  Partials       38       38
Impacted Files Coverage Δ
packages/jaeger-ui/src/components/App/TopNav.js 77.77% <100%> (+2.77%) ⬆️
...neViewer/TimelineHeaderRow/TimelineViewingLayer.js 90.74% <0%> (+3.7%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 378616f...ee5cbeb. Read the comment docs.

@yurishkuro
Copy link
Member

This diff is identical to #222 but has been squashed to avert merging being blocked due to the DCO not being in compliance.

In the future you can simply force-push the branch after squashing commits, and the PR will remain the same.

Copy link

@simonrobb simonrobb left a comment

Choose a reason for hiding this comment

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

💯

@tiffon
Copy link
Member Author

tiffon commented Jul 10, 2018

@yurishkuro Can you stamp this? Simon signed off but can't be added as a reviewer.

@tiffon tiffon merged commit 7896416 into master Jul 11, 2018
@ghost ghost removed the review label Jul 11, 2018
tiffon added a commit that referenced this pull request Jul 31, 2018
* Prep the repo for separately developed components
* Fix uberinternal yarn.lock issues
* Upgrade react to 16.3.2
* Update readme to account for on Lerna changes

Signed-off-by: Joe Farro <joef@uber.com>

Directed graph layout and presentation (#212)

* Prep the repo for separately developed components

Signed-off-by: Joe Farro <joef@uber.com>

* WIP - Very rough graph layout functionality

Signed-off-by: Joe Farro <joef@uber.com>

* Graph layout functionality is in solid shape

Outstanding:
* tests
* calculate edges via several workers when there are many edges

Signed-off-by: Joe Farro <joef@uber.com>

* Fix minor misc issues with plexus layout

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade react to 16.3.2

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade flow to 0.71.0

Signed-off-by: Joe Farro <joef@uber.com>

* Very rough React graph component

Signed-off-by: Joe Farro <joef@uber.com>

* Enable custom props for graph elements

Signed-off-by: Joe Farro <joef@uber.com>

* The graph refreshes when it gets new data

Signed-off-by: Joe Farro <joef@uber.com>

* Make the jaeger-ui package private

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup for plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Fix issues with plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Don't output a CSS file for plexus

Signed-off-by: Joe Farro <joef@uber.com>

* Increase plexus node spacing for neato layouts

Signed-off-by: Joe Farro <joef@uber.com>

* Update plexus to 0.0.1-dev.2

Signed-off-by: Joe Farro <joef@uber.com>

* Adding new issue and pull request template (#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

* plexus readme, remove `LayoutManager.dispose()`

Signed-off-by: Joe Farro <joef@uber.com>

* remove unecessary package

Signed-off-by: Joe Farro <joef@uber.com>

* Add more complex graphs to plexus demo

Signed-off-by: Joe Farro <joef@uber.com>

* Start the worker ID at 0

Signed-off-by: Joe Farro <joef@uber.com>

Search page functionality for trace diffs

Signed-off-by: Joe Farro <joef@uber.com>

Stub for trace diff page, update redux state shape

- Better redux state shape for trace diff
  - Refer to traces selected for comparison as trace diff cohort
- Better redux state shape for fetched trace data
  - Before: One loading prop to keep track of all search and individual
    trace fetching
  - After: Loading is tracked separately for serach and for each
    individual trace being fetched
  - This is better all around and lays the ground-work for fetching
    multiple individual traces which will be necessary for trace diff
    page when hit directly via URL (will need to fetch two or more
    traces)

Signed-off-by: Joe Farro <joef@uber.com>

Optimization for trace mini-map rendering

On a trace with ~16k spans reduced minimap rendering from ~250ms to
~20ms. For context, the initial render of the trace was around 1.22s.

Signed-off-by: Joe Farro <joef@uber.com>

Redux cleanup, hydrate diff cohort on search page

- Merge TraceSummary into Trace
- Redux action to fetch multiple traces by ID
- Create a small-sized variation of the loading indicator
- SearchTracePage loads trace data for traces in the diff cohort
  - Show loading indicator when trace data is being loaded
  - Show inline error when trace loading fails
  - Strip failed traces from diff cohort when linking to diff page
- Diff page forces redux state based on URL params

Signed-off-by: Joe Farro <joef@uber.com>

Trace diff page header functionality

- Fetch traces that need to be loaded
- Keep the URL and redux state in sync after changes to A or B
- Allow entering traces by ID
- Allow selecting other traces in the cohort
- Indicate when loading a trace failed

Signed-off-by: Joe Farro <joef@uber.com>

Convert trace to a DAG

Apply three transforms to spans when converting to DAG:

- Adopt peer.service for service name when a client span is missing
  the corresponding server span
- Ignore client spans when the only child is a reasonable server span
- Try to figure out a better operation name when operation === the
  http.method tag

The conversion can be optimized; it takes about 230ms on a trace with
~35k spans. A trace with ~9k spans takes about 50ms.

Signed-off-by: Joe Farro <joef@uber.com>

Add useDotEdges and totalMemory options to plexus

- Option in plexus to set the totalMemory viz.js uses
  - Sometimes viz.js runs out of memory on large graphs, especially
    when using the neato engine, increasing the total memeory can help
- Option in plexus to use dot edges in plexus graphs
  - Useful for trees (neato and plexus are very similar) or large
    graphs (neato is too slow)

Signed-off-by: Joe Farro <joef@uber.com>

Initial trace diff graph

- Ability to create diff of two TraceDag instances
- Additional transforms to trim superfluous nodes
  - skipAnnotationSpans
  - skipClientSpans

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom and pan to plexus

- Zoom and pan
- Add graph state as param to setOn* props
- Enable scaling edge stroke based on zoom level

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom to trace diff and increase color contrast

- Add zoom pan to trace diff
- On node hover show node @ 1x zoom (useful when zoomed out)
- Higher contrast colors for trace diff DAG
- Allowing scrolling for errors
- Fix issue with node sizing during measurement phase

Signed-off-by: Joe Farro <joef@uber.com>

Add a minimap to plexus to help zoom and pan

Also added to trace-diffs

Signed-off-by: Joe Farro <joef@uber.com>

Guard plexus zoom functionality with a flag

Signed-off-by: Joe Farro <joef@uber.com>

Fixes and optimizations to plexus and trace diffs

- Bug fix: Each graph should have a unique edge arrow def IRI

- Keep strokes from scaling into invisibility when zooming

  - Remove redundant root node

  - Apply zoom transforms to the node and edge containers

  - Scale the arrow def based on the current zoom (when zoom is
    enabled) by scaling the coords in the marker and path definitions

- Add a convenience prop-factory that toggles a class, "is-small",
  based on the current zoom level

  - Use "is-small" to toggle the visibility of node text and edge
    stroke width based on the current zoom level

- Change prop factories to be grouped by feature instead of context

  - In many cases the prop factory can be applied to multiple contexts,
    e.g. to both the edges container and an edge path

- Make Node and EdgePath components PureComponents

- Wrap rendering the nodes and edges in a PureComponent to prevent
  unnecessary renders

- Remove DirectedGraphState from the edge and node factory prop
  functions to prevent rendering with every transform change

Signed-off-by: Joe Farro <joef@uber.com>

Add additional layout options to plexus

Signed-off-by: Joe Farro <joef@uber.com>

Lighten trace diff color scheme

Signed-off-by: Joe Farro <joef@uber.com>

Use green instead of blue in trace diff coloring

Green is more commonly used to show additions

Signed-off-by: Joe Farro <joef@uber.com>

Add "Compare" to the top nav and other small fixes

Signed-off-by: Joe Farro <joef@uber.com>

Adding new issue and pull request template (#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

Integrate Google Analytics into Search Page (#220)

* Integrate GA into search page

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove tracking of actual values

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Timeline Expand and Collapse Features (#221)

* Add expansion and collapsing features

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use Icon component

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use spans upstream

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Improve css

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Rotate collapse buttons

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove debug logging

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove spans from TimelineHeaderRow

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add unit test for TimelineCollapser

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use popover

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add TimelineCollapser test

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Revert "Use popover"

This reverts commit 6152402

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for index.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add keyboard shortcuts

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Update changelog

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Make review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Squashed commits from develop-directed-graph (#224)

Signed-off-by: Joe Farro <joef@uber.com>

Lazily initialize the first worker in plexus

Signed-off-by: Joe Farro <joef@uber.com>

Fix issue with trace diff URL from auth redirects

The trace diff url was of the form:

    /trace/<trace-a-id>:diff?b=<trace-b-id>

But, during OneLogin / SAML auth redirects it would get URL encoded
and then not URL decoded resulting in it being interpreted as a trace
ID.

Move to the following form with three literal periods between the IDs:

    /trace/<trace-a-id>...<trace-b-id>

Other misc fixes and tweaks:

- Fix an issue where selecting a cohort of traces and then clicking the
  "Compare" button in the top nav cleared the cohort

- Fix an issue where removing a trace from the cohort on the search
  page would not clear the trace from A or B, effectively preventing
  traces set as A or B from ever being removed

- Clean up route definitions

Signed-off-by: Joe Farro <joef@uber.com>

Fix trace detail tracking for revised redux shape

Signed-off-by: Joe Farro <joef@uber.com>
yurishkuro pushed a commit that referenced this pull request Aug 14, 2018
* Use Lerna (#209)

* Prep the repo for separately developed components
* Fix uberinternal yarn.lock issues
* Upgrade react to 16.3.2
* Update readme to account for on Lerna changes

Signed-off-by: Joe Farro <joef@uber.com>

Directed graph layout and presentation (#212)

* Prep the repo for separately developed components

Signed-off-by: Joe Farro <joef@uber.com>

* WIP - Very rough graph layout functionality

Signed-off-by: Joe Farro <joef@uber.com>

* Graph layout functionality is in solid shape

Outstanding:
* tests
* calculate edges via several workers when there are many edges

Signed-off-by: Joe Farro <joef@uber.com>

* Fix minor misc issues with plexus layout

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade react to 16.3.2

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade flow to 0.71.0

Signed-off-by: Joe Farro <joef@uber.com>

* Very rough React graph component

Signed-off-by: Joe Farro <joef@uber.com>

* Enable custom props for graph elements

Signed-off-by: Joe Farro <joef@uber.com>

* The graph refreshes when it gets new data

Signed-off-by: Joe Farro <joef@uber.com>

* Make the jaeger-ui package private

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup for plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Fix issues with plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Don't output a CSS file for plexus

Signed-off-by: Joe Farro <joef@uber.com>

* Increase plexus node spacing for neato layouts

Signed-off-by: Joe Farro <joef@uber.com>

* Update plexus to 0.0.1-dev.2

Signed-off-by: Joe Farro <joef@uber.com>

* Adding new issue and pull request template (#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

* plexus readme, remove `LayoutManager.dispose()`

Signed-off-by: Joe Farro <joef@uber.com>

* remove unecessary package

Signed-off-by: Joe Farro <joef@uber.com>

* Add more complex graphs to plexus demo

Signed-off-by: Joe Farro <joef@uber.com>

* Start the worker ID at 0

Signed-off-by: Joe Farro <joef@uber.com>

Search page functionality for trace diffs

Signed-off-by: Joe Farro <joef@uber.com>

Stub for trace diff page, update redux state shape

- Better redux state shape for trace diff
  - Refer to traces selected for comparison as trace diff cohort
- Better redux state shape for fetched trace data
  - Before: One loading prop to keep track of all search and individual
    trace fetching
  - After: Loading is tracked separately for serach and for each
    individual trace being fetched
  - This is better all around and lays the ground-work for fetching
    multiple individual traces which will be necessary for trace diff
    page when hit directly via URL (will need to fetch two or more
    traces)

Signed-off-by: Joe Farro <joef@uber.com>

Optimization for trace mini-map rendering

On a trace with ~16k spans reduced minimap rendering from ~250ms to
~20ms. For context, the initial render of the trace was around 1.22s.

Signed-off-by: Joe Farro <joef@uber.com>

Redux cleanup, hydrate diff cohort on search page

- Merge TraceSummary into Trace
- Redux action to fetch multiple traces by ID
- Create a small-sized variation of the loading indicator
- SearchTracePage loads trace data for traces in the diff cohort
  - Show loading indicator when trace data is being loaded
  - Show inline error when trace loading fails
  - Strip failed traces from diff cohort when linking to diff page
- Diff page forces redux state based on URL params

Signed-off-by: Joe Farro <joef@uber.com>

Trace diff page header functionality

- Fetch traces that need to be loaded
- Keep the URL and redux state in sync after changes to A or B
- Allow entering traces by ID
- Allow selecting other traces in the cohort
- Indicate when loading a trace failed

Signed-off-by: Joe Farro <joef@uber.com>

Convert trace to a DAG

Apply three transforms to spans when converting to DAG:

- Adopt peer.service for service name when a client span is missing
  the corresponding server span
- Ignore client spans when the only child is a reasonable server span
- Try to figure out a better operation name when operation === the
  http.method tag

The conversion can be optimized; it takes about 230ms on a trace with
~35k spans. A trace with ~9k spans takes about 50ms.

Signed-off-by: Joe Farro <joef@uber.com>

Add useDotEdges and totalMemory options to plexus

- Option in plexus to set the totalMemory viz.js uses
  - Sometimes viz.js runs out of memory on large graphs, especially
    when using the neato engine, increasing the total memeory can help
- Option in plexus to use dot edges in plexus graphs
  - Useful for trees (neato and plexus are very similar) or large
    graphs (neato is too slow)

Signed-off-by: Joe Farro <joef@uber.com>

Initial trace diff graph

- Ability to create diff of two TraceDag instances
- Additional transforms to trim superfluous nodes
  - skipAnnotationSpans
  - skipClientSpans

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom and pan to plexus

- Zoom and pan
- Add graph state as param to setOn* props
- Enable scaling edge stroke based on zoom level

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom to trace diff and increase color contrast

- Add zoom pan to trace diff
- On node hover show node @ 1x zoom (useful when zoomed out)
- Higher contrast colors for trace diff DAG
- Allowing scrolling for errors
- Fix issue with node sizing during measurement phase

Signed-off-by: Joe Farro <joef@uber.com>

Add a minimap to plexus to help zoom and pan

Also added to trace-diffs

Signed-off-by: Joe Farro <joef@uber.com>

Guard plexus zoom functionality with a flag

Signed-off-by: Joe Farro <joef@uber.com>

Fixes and optimizations to plexus and trace diffs

- Bug fix: Each graph should have a unique edge arrow def IRI

- Keep strokes from scaling into invisibility when zooming

  - Remove redundant root node

  - Apply zoom transforms to the node and edge containers

  - Scale the arrow def based on the current zoom (when zoom is
    enabled) by scaling the coords in the marker and path definitions

- Add a convenience prop-factory that toggles a class, "is-small",
  based on the current zoom level

  - Use "is-small" to toggle the visibility of node text and edge
    stroke width based on the current zoom level

- Change prop factories to be grouped by feature instead of context

  - In many cases the prop factory can be applied to multiple contexts,
    e.g. to both the edges container and an edge path

- Make Node and EdgePath components PureComponents

- Wrap rendering the nodes and edges in a PureComponent to prevent
  unnecessary renders

- Remove DirectedGraphState from the edge and node factory prop
  functions to prevent rendering with every transform change

Signed-off-by: Joe Farro <joef@uber.com>

Add additional layout options to plexus

Signed-off-by: Joe Farro <joef@uber.com>

Lighten trace diff color scheme

Signed-off-by: Joe Farro <joef@uber.com>

Use green instead of blue in trace diff coloring

Green is more commonly used to show additions

Signed-off-by: Joe Farro <joef@uber.com>

Add "Compare" to the top nav and other small fixes

Signed-off-by: Joe Farro <joef@uber.com>

Adding new issue and pull request template (#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

Integrate Google Analytics into Search Page (#220)

* Integrate GA into search page

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove tracking of actual values

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Timeline Expand and Collapse Features (#221)

* Add expansion and collapsing features

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use Icon component

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use spans upstream

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Improve css

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Rotate collapse buttons

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove debug logging

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove spans from TimelineHeaderRow

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add unit test for TimelineCollapser

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use popover

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add TimelineCollapser test

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Revert "Use popover"

This reverts commit 6152402

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for index.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add keyboard shortcuts

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Update changelog

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Make review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Squashed commits from develop-directed-graph (#224)

Signed-off-by: Joe Farro <joef@uber.com>

Lazily initialize the first worker in plexus

Signed-off-by: Joe Farro <joef@uber.com>

Fix issue with trace diff URL from auth redirects

The trace diff url was of the form:

    /trace/<trace-a-id>:diff?b=<trace-b-id>

But, during OneLogin / SAML auth redirects it would get URL encoded
and then not URL decoded resulting in it being interpreted as a trace
ID.

Move to the following form with three literal periods between the IDs:

    /trace/<trace-a-id>...<trace-b-id>

Other misc fixes and tweaks:

- Fix an issue where selecting a cohort of traces and then clicking the
  "Compare" button in the top nav cleared the cohort

- Fix an issue where removing a trace from the cohort on the search
  page would not clear the trace from A or B, effectively preventing
  traces set as A or B from ever being removed

- Clean up route definitions

Signed-off-by: Joe Farro <joef@uber.com>

Fix trace detail tracking for revised redux shape

Signed-off-by: Joe Farro <joef@uber.com>

* Typo

Signed-off-by: Joe Farro <joef@uber.com>

* Fix #232 Split leaf from parent nodes in the tree

Signed-off-by: Joe Farro <joef@uber.com>

* plexus - Fix chart style issues and bump version

Also tweak the demo a bit.

Signed-off-by: Joe Farro <joef@uber.com>

* Fix yarn workspace based install

Signed-off-by: Joe Farro <joef@uber.com>

* In CI, fail if an update to yarn.lock is needed

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup

Signed-off-by: Joe Farro <joef@uber.com>

* Use stable yarn in CI

Signed-off-by: Joe Farro <joef@uber.com>

* Use yarn in package.json scripts

Signed-off-by: Joe Farro <joef@uber.com>

* Use newly downloaded yarn in CI

Signed-off-by: Joe Farro <joef@uber.com>
@yurishkuro yurishkuro deleted the develop-directed-graph--fix-author branch January 29, 2020 15:09
vvvprabhakar pushed a commit to vvvprabhakar/jaeger-ui that referenced this pull request Jul 5, 2021
Signed-off-by: Joe Farro <joef@uber.com>
Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar pushed a commit to vvvprabhakar/jaeger-ui that referenced this pull request Jul 5, 2021
* Use Lerna (jaegertracing#209)

* Prep the repo for separately developed components
* Fix uberinternal yarn.lock issues
* Upgrade react to 16.3.2
* Update readme to account for on Lerna changes

Signed-off-by: Joe Farro <joef@uber.com>

Directed graph layout and presentation (jaegertracing#212)

* Prep the repo for separately developed components

Signed-off-by: Joe Farro <joef@uber.com>

* WIP - Very rough graph layout functionality

Signed-off-by: Joe Farro <joef@uber.com>

* Graph layout functionality is in solid shape

Outstanding:
* tests
* calculate edges via several workers when there are many edges

Signed-off-by: Joe Farro <joef@uber.com>

* Fix minor misc issues with plexus layout

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade react to 16.3.2

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade flow to 0.71.0

Signed-off-by: Joe Farro <joef@uber.com>

* Very rough React graph component

Signed-off-by: Joe Farro <joef@uber.com>

* Enable custom props for graph elements

Signed-off-by: Joe Farro <joef@uber.com>

* The graph refreshes when it gets new data

Signed-off-by: Joe Farro <joef@uber.com>

* Make the jaeger-ui package private

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup for plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Fix issues with plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Don't output a CSS file for plexus

Signed-off-by: Joe Farro <joef@uber.com>

* Increase plexus node spacing for neato layouts

Signed-off-by: Joe Farro <joef@uber.com>

* Update plexus to 0.0.1-dev.2

Signed-off-by: Joe Farro <joef@uber.com>

* Adding new issue and pull request template (jaegertracing#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

* plexus readme, remove `LayoutManager.dispose()`

Signed-off-by: Joe Farro <joef@uber.com>

* remove unecessary package

Signed-off-by: Joe Farro <joef@uber.com>

* Add more complex graphs to plexus demo

Signed-off-by: Joe Farro <joef@uber.com>

* Start the worker ID at 0

Signed-off-by: Joe Farro <joef@uber.com>

Search page functionality for trace diffs

Signed-off-by: Joe Farro <joef@uber.com>

Stub for trace diff page, update redux state shape

- Better redux state shape for trace diff
  - Refer to traces selected for comparison as trace diff cohort
- Better redux state shape for fetched trace data
  - Before: One loading prop to keep track of all search and individual
    trace fetching
  - After: Loading is tracked separately for serach and for each
    individual trace being fetched
  - This is better all around and lays the ground-work for fetching
    multiple individual traces which will be necessary for trace diff
    page when hit directly via URL (will need to fetch two or more
    traces)

Signed-off-by: Joe Farro <joef@uber.com>

Optimization for trace mini-map rendering

On a trace with ~16k spans reduced minimap rendering from ~250ms to
~20ms. For context, the initial render of the trace was around 1.22s.

Signed-off-by: Joe Farro <joef@uber.com>

Redux cleanup, hydrate diff cohort on search page

- Merge TraceSummary into Trace
- Redux action to fetch multiple traces by ID
- Create a small-sized variation of the loading indicator
- SearchTracePage loads trace data for traces in the diff cohort
  - Show loading indicator when trace data is being loaded
  - Show inline error when trace loading fails
  - Strip failed traces from diff cohort when linking to diff page
- Diff page forces redux state based on URL params

Signed-off-by: Joe Farro <joef@uber.com>

Trace diff page header functionality

- Fetch traces that need to be loaded
- Keep the URL and redux state in sync after changes to A or B
- Allow entering traces by ID
- Allow selecting other traces in the cohort
- Indicate when loading a trace failed

Signed-off-by: Joe Farro <joef@uber.com>

Convert trace to a DAG

Apply three transforms to spans when converting to DAG:

- Adopt peer.service for service name when a client span is missing
  the corresponding server span
- Ignore client spans when the only child is a reasonable server span
- Try to figure out a better operation name when operation === the
  http.method tag

The conversion can be optimized; it takes about 230ms on a trace with
~35k spans. A trace with ~9k spans takes about 50ms.

Signed-off-by: Joe Farro <joef@uber.com>

Add useDotEdges and totalMemory options to plexus

- Option in plexus to set the totalMemory viz.js uses
  - Sometimes viz.js runs out of memory on large graphs, especially
    when using the neato engine, increasing the total memeory can help
- Option in plexus to use dot edges in plexus graphs
  - Useful for trees (neato and plexus are very similar) or large
    graphs (neato is too slow)

Signed-off-by: Joe Farro <joef@uber.com>

Initial trace diff graph

- Ability to create diff of two TraceDag instances
- Additional transforms to trim superfluous nodes
  - skipAnnotationSpans
  - skipClientSpans

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom and pan to plexus

- Zoom and pan
- Add graph state as param to setOn* props
- Enable scaling edge stroke based on zoom level

Signed-off-by: Joe Farro <joef@uber.com>

Add zoom to trace diff and increase color contrast

- Add zoom pan to trace diff
- On node hover show node @ 1x zoom (useful when zoomed out)
- Higher contrast colors for trace diff DAG
- Allowing scrolling for errors
- Fix issue with node sizing during measurement phase

Signed-off-by: Joe Farro <joef@uber.com>

Add a minimap to plexus to help zoom and pan

Also added to trace-diffs

Signed-off-by: Joe Farro <joef@uber.com>

Guard plexus zoom functionality with a flag

Signed-off-by: Joe Farro <joef@uber.com>

Fixes and optimizations to plexus and trace diffs

- Bug fix: Each graph should have a unique edge arrow def IRI

- Keep strokes from scaling into invisibility when zooming

  - Remove redundant root node

  - Apply zoom transforms to the node and edge containers

  - Scale the arrow def based on the current zoom (when zoom is
    enabled) by scaling the coords in the marker and path definitions

- Add a convenience prop-factory that toggles a class, "is-small",
  based on the current zoom level

  - Use "is-small" to toggle the visibility of node text and edge
    stroke width based on the current zoom level

- Change prop factories to be grouped by feature instead of context

  - In many cases the prop factory can be applied to multiple contexts,
    e.g. to both the edges container and an edge path

- Make Node and EdgePath components PureComponents

- Wrap rendering the nodes and edges in a PureComponent to prevent
  unnecessary renders

- Remove DirectedGraphState from the edge and node factory prop
  functions to prevent rendering with every transform change

Signed-off-by: Joe Farro <joef@uber.com>

Add additional layout options to plexus

Signed-off-by: Joe Farro <joef@uber.com>

Lighten trace diff color scheme

Signed-off-by: Joe Farro <joef@uber.com>

Use green instead of blue in trace diff coloring

Green is more commonly used to show additions

Signed-off-by: Joe Farro <joef@uber.com>

Add "Compare" to the top nav and other small fixes

Signed-off-by: Joe Farro <joef@uber.com>

Adding new issue and pull request template (jaegertracing#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

Integrate Google Analytics into Search Page (jaegertracing#220)

* Integrate GA into search page

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove tracking of actual values

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Timeline Expand and Collapse Features (jaegertracing#221)

* Add expansion and collapsing features

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use Icon component

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use spans upstream

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Improve css

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Rotate collapse buttons

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove debug logging

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Remove spans from TimelineHeaderRow

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add unit test for TimelineCollapser

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Use popover

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add TimelineCollapser test

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Revert "Use popover"

This reverts commit 6152402

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for duck.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add more tests for index.js

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Add keyboard shortcuts

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Update changelog

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

* Make review changes

Signed-off-by: Davit Yeghshatyan <davo@uber.com>

Squashed commits from develop-directed-graph (jaegertracing#224)

Signed-off-by: Joe Farro <joef@uber.com>

Lazily initialize the first worker in plexus

Signed-off-by: Joe Farro <joef@uber.com>

Fix issue with trace diff URL from auth redirects

The trace diff url was of the form:

    /trace/<trace-a-id>:diff?b=<trace-b-id>

But, during OneLogin / SAML auth redirects it would get URL encoded
and then not URL decoded resulting in it being interpreted as a trace
ID.

Move to the following form with three literal periods between the IDs:

    /trace/<trace-a-id>...<trace-b-id>

Other misc fixes and tweaks:

- Fix an issue where selecting a cohort of traces and then clicking the
  "Compare" button in the top nav cleared the cohort

- Fix an issue where removing a trace from the cohort on the search
  page would not clear the trace from A or B, effectively preventing
  traces set as A or B from ever being removed

- Clean up route definitions

Signed-off-by: Joe Farro <joef@uber.com>

Fix trace detail tracking for revised redux shape

Signed-off-by: Joe Farro <joef@uber.com>

* Typo

Signed-off-by: Joe Farro <joef@uber.com>

* Fix jaegertracing#232 Split leaf from parent nodes in the tree

Signed-off-by: Joe Farro <joef@uber.com>

* plexus - Fix chart style issues and bump version

Also tweak the demo a bit.

Signed-off-by: Joe Farro <joef@uber.com>

* Fix yarn workspace based install

Signed-off-by: Joe Farro <joef@uber.com>

* In CI, fail if an update to yarn.lock is needed

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup

Signed-off-by: Joe Farro <joef@uber.com>

* Use stable yarn in CI

Signed-off-by: Joe Farro <joef@uber.com>

* Use yarn in package.json scripts

Signed-off-by: Joe Farro <joef@uber.com>

* Use newly downloaded yarn in CI

Signed-off-by: Joe Farro <joef@uber.com>

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants