diff --git a/BUILD.md b/BUILD.md index dd7197e6ee..51624edea3 100644 --- a/BUILD.md +++ b/BUILD.md @@ -36,11 +36,11 @@ This applies ESLint to the repo, as a whole. The TypeScript linting has a distin This is an amalgamation of linting scripts that run to make sure things are all-good. It's run in CI (travis) and as part of a pre-commit hook. -- `prettier-lint` -- `tsc-lint` -- `eslint` -- `flow` -- `check-license` +* `prettier-lint` +* `tsc-lint` +* `eslint` +* `flow` +* `check-license` #### `prepare` @@ -90,15 +90,15 @@ Used to configure the `tsc-lint` script and, in theory, the IDE (such as VS Code A few notable [compiler settings](http://www.typescriptlang.org/docs/handbook/compiler-options.html): -- `lib` - - [es2017](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es2017.d.ts) - - [dom](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) - - [dom.iterable](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.iterable.d.ts) - - [webworker](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.webworker.d.ts) -- `skipLibCheck` - Maybe worth reevaluating in the future -- `strict` - Very important -- `noEmit` - We're using this for linting, after all -- `include` - We've included `./typgings` here because it turned out to be a lot simpler than configuring `types`, `typeRoots` and `paths` +* `lib` + * [es2017](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es2017.d.ts) + * [dom](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) + * [dom.iterable](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.iterable.d.ts) + * [webworker](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.webworker.d.ts) +* `skipLibCheck` - Maybe worth reevaluating in the future +* `strict` - Very important +* `noEmit` - We're using this for linting, after all +* `include` - We've included `./typgings` here because it turned out to be a lot simpler than configuring `types`, `typeRoots` and `paths` ## `typings/{custom.d.ts, index.d.ts}` diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b12bc0c8f..9aed7032c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,72 +4,72 @@ ### Chores & Maintenance -- **Jaeger UI codebase:** `plexus` package changed to use TypeScript instead of Flow (Partially addresses [#306](https://github.com/jaegertracing/jaeger-ui/issues/306)) ([@tiffon](https://github.com/tiffon) in [#331](https://github.com/jaegertracing/jaeger-ui/pull/331)) +* **Jaeger UI codebase:** `plexus` package changed to use TypeScript instead of Flow (Partially addresses [#306](https://github.com/jaegertracing/jaeger-ui/issues/306)) ([@tiffon](https://github.com/tiffon) in [#331](https://github.com/jaegertracing/jaeger-ui/pull/331)) ## v1.1.0 (March 3, 2019) ### Enhancements -- **Trace detail:** Log Markers on spans ([Fix #119](https://github.com/jaegertracing/jaeger-ui/issues/119)) ([@sfriberg](https://github.com/sfriberg) in [#309](https://github.com/jaegertracing/jaeger-ui/pull/309)) +* **Trace detail:** Log Markers on spans ([Fix #119](https://github.com/jaegertracing/jaeger-ui/issues/119)) ([@sfriberg](https://github.com/sfriberg) in [#309](https://github.com/jaegertracing/jaeger-ui/pull/309)) -- **Search:** Load trace(s) from a JSON file ([Fix #214](https://github.com/jaegertracing/jaeger-ui/issues/214)) ([@yuribit](https://github.com/yuribit) in [#327](https://github.com/jaegertracing/jaeger-ui/pull/327)) +* **Search:** Load trace(s) from a JSON file ([Fix #214](https://github.com/jaegertracing/jaeger-ui/issues/214)) ([@yuribit](https://github.com/yuribit) in [#327](https://github.com/jaegertracing/jaeger-ui/pull/327)) ### Fixes -- **Trace detail:** Hide child status icon on SpanTreeOffset used in SpanDetailRow component ([Fix #328](https://github.com/jaegertracing/jaeger-ui/issues/328)) ([@rubenvp8510](https://github.com/rubenvp8510) in [#334](https://github.com/jaegertracing/jaeger-ui/pull/334)) +* **Trace detail:** Hide child status icon on SpanTreeOffset used in SpanDetailRow component ([Fix #328](https://github.com/jaegertracing/jaeger-ui/issues/328)) ([@rubenvp8510](https://github.com/rubenvp8510) in [#334](https://github.com/jaegertracing/jaeger-ui/pull/334)) -- **Data munging:** Optimize tree walk to avoid excessive function call depth ([Fix #320](https://github.com/jaegertracing/jaeger-ui/issues/320)) ([@rubenvp8510](https://github.com/rubenvp8510) in [#326](https://github.com/jaegertracing/jaeger-ui/pull/326)) +* **Data munging:** Optimize tree walk to avoid excessive function call depth ([Fix #320](https://github.com/jaegertracing/jaeger-ui/issues/320)) ([@rubenvp8510](https://github.com/rubenvp8510) in [#326](https://github.com/jaegertracing/jaeger-ui/pull/326)) ### Chores & Maintenance -- **Code quality:** Fix a typo in transform-trace-data.js ([@bhavin192](https://github.com/bhavin192) in [#332](https://github.com/jaegertracing/jaeger-ui/pull/332)) +* **Code quality:** Fix a typo in transform-trace-data.js ([@bhavin192](https://github.com/bhavin192) in [#332](https://github.com/jaegertracing/jaeger-ui/pull/332)) ## v1.0.1 (February 15, 2019) ### Fixes -- **Trace detail:** Fix [#323](https://github.com/jaegertracing/jaeger-ui/issues/323) - Browser back button of trace page not working if plot is clicked ([@tacigar](https://github.com/tacigar) in [#324](https://github.com/jaegertracing/jaeger-ui/pull/324)) +* **Trace detail:** Fix [#323](https://github.com/jaegertracing/jaeger-ui/issues/323) - Browser back button of trace page not working if plot is clicked ([@tacigar](https://github.com/tacigar) in [#324](https://github.com/jaegertracing/jaeger-ui/pull/324)) -- **Search:** Fix [#325](https://github.com/jaegertracing/jaeger-ui/issues/325) - JS errors on search form dropdowns ([@tiffon](https://github.com/tiffon) in [#329](https://github.com/jaegertracing/jaeger-ui/pull/329)) +* **Search:** Fix [#325](https://github.com/jaegertracing/jaeger-ui/issues/325) - JS errors on search form dropdowns ([@tiffon](https://github.com/tiffon) in [#329](https://github.com/jaegertracing/jaeger-ui/pull/329)) ## v1.0.0 (January 18, 2019) ### Enhancements -- **Embedded mode:** Revisions to search and trace detail embed mode ([@tiffon](https://github.com/tiffon) in [#286](https://github.com/jaegertracing/jaeger-ui/pull/286)) +* **Embedded mode:** Revisions to search and trace detail embed mode ([@tiffon](https://github.com/tiffon) in [#286](https://github.com/jaegertracing/jaeger-ui/pull/286)) - - This release establishes our commitment to the `uiEmbed=v0` API - - A big thanks to [@aljesusg](https://github.com/aljesusg) for getting this off the ground in [#263](https://github.com/jaegertracing/jaeger-ui/pull/263)! :tada: + * This release establishes our commitment to the `uiEmbed=v0` API + * A big thanks to [@aljesusg](https://github.com/aljesusg) for getting this off the ground in [#263](https://github.com/jaegertracing/jaeger-ui/pull/263)! :tada: -- **Trace detail:** Add a tree view (aka Trace Graph) to the TracePage ([@copa2](https://github.com/copa2) in [#276](https://github.com/jaegertracing/jaeger-ui/pull/276)) +* **Trace detail:** Add a tree view (aka Trace Graph) to the TracePage ([@copa2](https://github.com/copa2) in [#276](https://github.com/jaegertracing/jaeger-ui/pull/276)) - - Stability: Experimental – See [#293](https://github.com/jaegertracing/jaeger-ui/issues/293) for discussion. - - Big thanks to [@copa2](https://github.com/copa2) for the contribution! :tada: - - **We would love to hear feedback!** + * Stability: Experimental – See [#293](https://github.com/jaegertracing/jaeger-ui/issues/293) for discussion. + * Big thanks to [@copa2](https://github.com/copa2) for the contribution! :tada: + * **We would love to hear feedback!** -- **Trace detail:** Add a copy icon to entries in KeyValuesTable ([#204](https://github.com/jaegertracing/jaeger-ui/issues/204)) ([@everett980](https://github.com/everett980) in [#292](https://github.com/jaegertracing/jaeger-ui/pull/292)) +* **Trace detail:** Add a copy icon to entries in KeyValuesTable ([#204](https://github.com/jaegertracing/jaeger-ui/issues/204)) ([@everett980](https://github.com/everett980) in [#292](https://github.com/jaegertracing/jaeger-ui/pull/292)) -- **Trace detail:** Add a Button to Reset Viewing Layer Zoom ([#215](https://github.com/jaegertracing/jaeger-ui/issues/215)) ([@everett980](https://github.com/everett980) in [#290](https://github.com/jaegertracing/jaeger-ui/pull/290)) +* **Trace detail:** Add a Button to Reset Viewing Layer Zoom ([#215](https://github.com/jaegertracing/jaeger-ui/issues/215)) ([@everett980](https://github.com/everett980) in [#290](https://github.com/jaegertracing/jaeger-ui/pull/290)) -- **Trace detail:** Add indent guides to trace timeline view ([#172](https://github.com/jaegertracing/jaeger-ui/issues/172)) ([@everett980](https://github.com/everett980) in [#297](https://github.com/jaegertracing/jaeger-ui/pull/297)) +* **Trace detail:** Add indent guides to trace timeline view ([#172](https://github.com/jaegertracing/jaeger-ui/issues/172)) ([@everett980](https://github.com/everett980) in [#297](https://github.com/jaegertracing/jaeger-ui/pull/297)) -- **Search:** Add popover and prevent submit if duration params are invalid ([#244](https://github.com/jaegertracing/jaeger-ui/issues/244)) ([@everett980](https://github.com/everett980) in [#291](https://github.com/jaegertracing/jaeger-ui/pull/291)) +* **Search:** Add popover and prevent submit if duration params are invalid ([#244](https://github.com/jaegertracing/jaeger-ui/issues/244)) ([@everett980](https://github.com/everett980) in [#291](https://github.com/jaegertracing/jaeger-ui/pull/291)) -- **Trace comparison:** Add link to timeline view from comparison view and selection ([@everett980](https://github.com/everett980) in [#313](https://github.com/jaegertracing/jaeger-ui/pull/313)) +* **Trace comparison:** Add link to timeline view from comparison view and selection ([@everett980](https://github.com/everett980) in [#313](https://github.com/jaegertracing/jaeger-ui/pull/313)) -- **Trace DAGs:** Add the ability to copy node data in the Trace Graph and Trace Comparison views ([@everett980](https://github.com/everett980) in [#312](https://github.com/jaegertracing/jaeger-ui/pull/312)) +* **Trace DAGs:** Add the ability to copy node data in the Trace Graph and Trace Comparison views ([@everett980](https://github.com/everett980) in [#312](https://github.com/jaegertracing/jaeger-ui/pull/312)) -- **Menu configuration:** Ability to open additional menu links in same tab (Resolves [#275](https://github.com/jaegertracing/jaeger-ui/issues/275)) ([@zablvit](https://github.com/zablvit) in [#278](https://github.com/jaegertracing/jaeger-ui/pull/278)) +* **Menu configuration:** Ability to open additional menu links in same tab (Resolves [#275](https://github.com/jaegertracing/jaeger-ui/issues/275)) ([@zablvit](https://github.com/zablvit) in [#278](https://github.com/jaegertracing/jaeger-ui/pull/278)) ### Fixes -- **Trace detail:** Fix [#269](https://github.com/jaegertracing/jaeger-ui/issues/269) - Fix column resizer overlays trace header ([@tiffon](https://github.com/tiffon) in [#280](https://github.com/jaegertracing/jaeger-ui/pull/280)) +* **Trace detail:** Fix [#269](https://github.com/jaegertracing/jaeger-ui/issues/269) - Fix column resizer overlays trace header ([@tiffon](https://github.com/tiffon) in [#280](https://github.com/jaegertracing/jaeger-ui/pull/280)) ### Chores & Maintenance -- **Dev docs:** Update a few links to the new website ([@ledor473](https://github.com/ledor473) in [#287](https://github.com/jaegertracing/jaeger-ui/pull/287)) +* **Dev docs:** Update a few links to the new website ([@ledor473](https://github.com/ledor473) in [#287](https://github.com/jaegertracing/jaeger-ui/pull/287)) -- **Jaeger UI codebase:** Update create-react-app to 2.1.2 ([@tiffon](https://github.com/tiffon) in [#302](https://github.com/jaegertracing/jaeger-ui/pull/302)) +* **Jaeger UI codebase:** Update create-react-app to 2.1.2 ([@tiffon](https://github.com/tiffon) in [#302](https://github.com/jaegertracing/jaeger-ui/pull/302)) ## Changes released in Jaeger 1.8.2 and earlier @@ -103,79 +103,79 @@ These changes are listed in chronological order by the date they were merged int ### [#221](https://github.com/jaegertracing/jaeger-ui/pull/221) Timeline Expand and Collapse Features -- Partially addresses [#160](https://github.com/jaegertracing/jaeger-ui/issues/160) - Heuristics for collapsing spans +* Partially addresses [#160](https://github.com/jaegertracing/jaeger-ui/issues/160) - Heuristics for collapsing spans ### [#191](https://github.com/jaegertracing/jaeger-ui/pull/191) Add GA event tracking for actions in trace view -- Partially addresses [#157](https://github.com/jaegertracing/jaeger-ui/issues/157) - Enhanced Google Analytics integration +* Partially addresses [#157](https://github.com/jaegertracing/jaeger-ui/issues/157) - Enhanced Google Analytics integration ### [#198](https://github.com/jaegertracing/jaeger-ui/pull/198) Use `` and config webpack at runtime to allow path prefix -- Fix [#42](https://github.com/jaegertracing/jaeger-ui/issues/42) - No support for Jaeger behind a reverse proxy +* Fix [#42](https://github.com/jaegertracing/jaeger-ui/issues/42) - No support for Jaeger behind a reverse proxy ### [#195](https://github.com/jaegertracing/jaeger-ui/pull/195) Handle Error stored in redux trace.traces -- Fix [#166](https://github.com/jaegertracing/jaeger-ui/issues/166) - JS error on search page after viewing 404 trace +* Fix [#166](https://github.com/jaegertracing/jaeger-ui/issues/166) - JS error on search page after viewing 404 trace ### [#192](https://github.com/jaegertracing/jaeger-ui/pull/192) Change fallback trace name to be more informative -- Fix [#190](https://github.com/jaegertracing/jaeger-ui/issues/190) - Change `cannot-find-trace-name` to `trace-without-root-span` +* Fix [#190](https://github.com/jaegertracing/jaeger-ui/issues/190) - Change `cannot-find-trace-name` to `trace-without-root-span` ### [#189](https://github.com/jaegertracing/jaeger-ui/pull/189) Track JS errors in GA -- Fix [#39](https://github.com/jaegertracing/jaeger-ui/issues/39) - Log js client side errors in our server side logs +* Fix [#39](https://github.com/jaegertracing/jaeger-ui/issues/39) - Log js client side errors in our server side logs ### [#179](https://github.com/jaegertracing/jaeger-ui/pull/179) Resolve perf issues on the search page -- Fix [#178](https://github.com/jaegertracing/jaeger-ui/issues/178) - Performance regression - Search page +* Fix [#178](https://github.com/jaegertracing/jaeger-ui/issues/178) - Performance regression - Search page ### [#169](https://github.com/jaegertracing/jaeger-ui/pull/169) Use Ant Design instead of Semantic UI -- Fix [#164](https://github.com/jaegertracing/jaeger-ui/issues/164) - Use Ant Design instead of Semantic UI -- Fix [#165](https://github.com/jaegertracing/jaeger-ui/issues/165) - Search results are shown without a date -- Fix [#69](https://github.com/jaegertracing/jaeger-ui/issues/69) - Missing endpoints in jaeger ui dropdown +* Fix [#164](https://github.com/jaegertracing/jaeger-ui/issues/164) - Use Ant Design instead of Semantic UI +* Fix [#165](https://github.com/jaegertracing/jaeger-ui/issues/165) - Search results are shown without a date +* Fix [#69](https://github.com/jaegertracing/jaeger-ui/issues/69) - Missing endpoints in jaeger ui dropdown ### [#168](https://github.com/jaegertracing/jaeger-ui/pull/168) Fix 2 digit lookback (12h, 24h) parsing -- Fix [#167](https://github.com/jaegertracing/jaeger-ui/issues/167) - 12 and 24 hour search lookbacks not converted to start timestamp correctly +* Fix [#167](https://github.com/jaegertracing/jaeger-ui/issues/167) - 12 and 24 hour search lookbacks not converted to start timestamp correctly ### [#162](https://github.com/jaegertracing/jaeger-ui/pull/162) Only JSON.parse JSON strings in tags/logs values -- Fix [#146](https://github.com/jaegertracing/jaeger-ui/issues/146) - Tags with string type displayed as integers in UI, bigint js problem +* Fix [#146](https://github.com/jaegertracing/jaeger-ui/issues/146) - Tags with string type displayed as integers in UI, bigint js problem ### [#161](https://github.com/jaegertracing/jaeger-ui/pull/161) Add timezone tooltip to custom lookback form-field -- Fix [#154](https://github.com/jaegertracing/jaeger-ui/issues/154) - Explain time zone of the lookback parameter +* Fix [#154](https://github.com/jaegertracing/jaeger-ui/issues/154) - Explain time zone of the lookback parameter ### [#153](https://github.com/jaegertracing/jaeger-ui/pull/153) Add View Option for raw/unadjusted trace -- Fix [#152](https://github.com/jaegertracing/jaeger-ui/issues/152) - Add View Option for raw/unadjusted trace +* Fix [#152](https://github.com/jaegertracing/jaeger-ui/issues/152) - Add View Option for raw/unadjusted trace ### [#147](https://github.com/jaegertracing/jaeger-ui/pull/147) Use logfmt for search tag input format -- Fix [#145](https://github.com/jaegertracing/jaeger-ui/issues/145) - Support logfmt for tags text input in the search form -- Fix [#11](https://github.com/jaegertracing/jaeger-ui/issues/11) - Document allowed operators on tag search +* Fix [#145](https://github.com/jaegertracing/jaeger-ui/issues/145) - Support logfmt for tags text input in the search form +* Fix [#11](https://github.com/jaegertracing/jaeger-ui/issues/11) - Document allowed operators on tag search ### [#143](https://github.com/jaegertracing/jaeger-ui/pull/143) Add a config value for the DAG cutoff -- Fix [#130](https://github.com/jaegertracing/jaeger-ui/issues/130) - Why maximum dependency length is set to 100 in DAG? +* Fix [#130](https://github.com/jaegertracing/jaeger-ui/issues/130) - Why maximum dependency length is set to 100 in DAG? ### [#141](https://github.com/jaegertracing/jaeger-ui/pull/141) `package.json#proxy` should proxy all `/api` requests -- Fix [#139](https://github.com/jaegertracing/jaeger-ui/issues/139) - Anyone konw how to open 16686 port? +* Fix [#139](https://github.com/jaegertracing/jaeger-ui/issues/139) - Anyone konw how to open 16686 port? ### [#140](https://github.com/jaegertracing/jaeger-ui/pull/140) Encode service names in API calls -- Fix [#138](https://github.com/jaegertracing/jaeger-ui/issues/138) - Cannot find operations if there is '/' char in serviceName +* Fix [#138](https://github.com/jaegertracing/jaeger-ui/issues/138) - Cannot find operations if there is '/' char in serviceName ### [#136](https://github.com/jaegertracing/jaeger-ui/pull/136) Fix endless trace HTTP requests -- Fix [#128](https://github.com/jaegertracing/jaeger-ui/issues/128) - When trace id is invalid, Jaeger UI send this request forever +* Fix [#128](https://github.com/jaegertracing/jaeger-ui/issues/128) - When trace id is invalid, Jaeger UI send this request forever ### [#134](https://github.com/jaegertracing/jaeger-ui/pull/134) Fix trace name resolution -- Fix [#117](https://github.com/jaegertracing/jaeger-ui/issues/117) - traceName relies on traceID to equal spanID -- Fix [#129](https://github.com/jaegertracing/jaeger-ui/issues/129) - ¯*( ツ )*/¯ is not very clear +* Fix [#117](https://github.com/jaegertracing/jaeger-ui/issues/117) - traceName relies on traceID to equal spanID +* Fix [#129](https://github.com/jaegertracing/jaeger-ui/issues/129) - ¯*( ツ )*/¯ is not very clear ### [#133](https://github.com/jaegertracing/jaeger-ui/pull/133) Better HTTP error messages @@ -185,11 +185,11 @@ These changes are listed in chronological order by the date they were merged int ### [#118](https://github.com/jaegertracing/jaeger-ui/pull/118) Handle `FOLLOWS_FROM` reference type -- Fix [#115](https://github.com/jaegertracing/jaeger-ui/issues/115) - Rendering traces with spans containing a 'FOLLOWS_FROM' reference seems broken +* Fix [#115](https://github.com/jaegertracing/jaeger-ui/issues/115) - Rendering traces with spans containing a 'FOLLOWS_FROM' reference seems broken ### [#110](https://github.com/jaegertracing/jaeger-ui/pull/110) Fix browser back button not working correctly -- Fix [#94](https://github.com/jaegertracing/jaeger-ui/issues/94) - Browser back button not working correctly +* Fix [#94](https://github.com/jaegertracing/jaeger-ui/issues/94) - Browser back button not working correctly ### [#107](https://github.com/jaegertracing/jaeger-ui/pull/107) Embed UI config @@ -199,20 +199,20 @@ The query service can embed custom UI configuration into `index.html`, speeding ### [#93](https://github.com/jaegertracing/jaeger-ui/pull/93) Keyboard shortcuts and minimap UX -- Fix [#89](https://github.com/uber/jaeger-ui/issues/89) - [trace view] Drag and release on timeline header row zooms into respective range -- Fix [#23](https://github.com/uber/jaeger-ui/issues/23) - [trace view] Navigate and zoom via minimap -- Fix [#22](https://github.com/uber/jaeger-ui/issues/22) - [trace view] Pan and zoom via keyboard shortcuts +* Fix [#89](https://github.com/uber/jaeger-ui/issues/89) - [trace view] Drag and release on timeline header row zooms into respective range +* Fix [#23](https://github.com/uber/jaeger-ui/issues/23) - [trace view] Navigate and zoom via minimap +* Fix [#22](https://github.com/uber/jaeger-ui/issues/22) - [trace view] Pan and zoom via keyboard shortcuts ### [#84](https://github.com/jaegertracing/jaeger-ui/pull/84) Improve search dropdowns -- Fix [#79](https://github.com/uber/jaeger-ui/issues/79) - Sort services and operations operations (case insensitive) -- Fix [#31](https://github.com/uber/jaeger-ui/issues/31) - Filter options based on contains instead of starts with -- Fix [#30](https://github.com/uber/jaeger-ui/issues/30) - Filter options based on case insensitive match +* Fix [#79](https://github.com/uber/jaeger-ui/issues/79) - Sort services and operations operations (case insensitive) +* Fix [#31](https://github.com/uber/jaeger-ui/issues/31) - Filter options based on contains instead of starts with +* Fix [#30](https://github.com/uber/jaeger-ui/issues/30) - Filter options based on case insensitive match ### [#78](https://github.com/jaegertracing/jaeger-ui/pull/78) Custom menu via /api/config with project links as defaults -- Fix [#44](https://github.com/uber/jaeger-ui/issues/44) - Add configurable, persistent links to the header -- **Support for this is WIP in query service** +* Fix [#44](https://github.com/uber/jaeger-ui/issues/44) - Add configurable, persistent links to the header +* **Support for this is WIP in query service** ### [#81](https://github.com/jaegertracing/jaeger-ui/pull/81) Fix Google Analytics tracking @@ -224,23 +224,23 @@ The query service can embed custom UI configuration into `index.html`, speeding ### [#68](https://github.com/jaegertracing/jaeger-ui/pull/68) Virtualized scrolling for trace detail view -- Performance improved for initial loading, expanding span details, text search and scrolling +* Performance improved for initial loading, expanding span details, text search and scrolling ### [#53](https://github.com/jaegertracing/jaeger-ui/pull/53) Refactor trace detail -- Partial fix for [#42](https://github.com/uber/jaeger-ui/issues/42) - Support URL prefix via homepage in package.json -- Scatterplot dots are sized based on number of spans -- Scatterplot dots mouseover shows trace name -- Clicking span detail left column collapses detail -- Clicking anywhere left of parent span name toggles children visibility -- Clip or hide span bars when zoomed in (instead of flush left) -- Label on span bars no longer off-screen -- Full width of the header is clickable for tags, process, and logs headers (instead of header text, only) -- Horizontal scrolling for wide content (e.g. long log values) (Fix [#58](https://github.com/uber/jaeger-ui/issues/58)) -- Tall content scrolls via entire table instead of single table cell -- Fix [#55](https://github.com/uber/jaeger-ui/issues/55) - Some tags were not being rendered due to clashing keys (observed in a log message) -- Fix [jaegertracing/jaeger#326](https://github.com/jaegertracing/jaeger/issues/326) - extraneous scrollbars in trace views -- Ticks in span graph made to match trace detail (in number and formatting) -- Fix [#49](https://github.com/uber/jaeger-ui/issues/42) - Span position in graph doesn't not match its position in the detail +* Partial fix for [#42](https://github.com/uber/jaeger-ui/issues/42) - Support URL prefix via homepage in package.json +* Scatterplot dots are sized based on number of spans +* Scatterplot dots mouseover shows trace name +* Clicking span detail left column collapses detail +* Clicking anywhere left of parent span name toggles children visibility +* Clip or hide span bars when zoomed in (instead of flush left) +* Label on span bars no longer off-screen +* Full width of the header is clickable for tags, process, and logs headers (instead of header text, only) +* Horizontal scrolling for wide content (e.g. long log values) (Fix [#58](https://github.com/uber/jaeger-ui/issues/58)) +* Tall content scrolls via entire table instead of single table cell +* Fix [#55](https://github.com/uber/jaeger-ui/issues/55) - Some tags were not being rendered due to clashing keys (observed in a log message) +* Fix [jaegertracing/jaeger#326](https://github.com/jaegertracing/jaeger/issues/326) - extraneous scrollbars in trace views +* Ticks in span graph made to match trace detail (in number and formatting) +* Fix [#49](https://github.com/uber/jaeger-ui/issues/42) - Span position in graph doesn't not match its position in the detail ### [Changes from before 2017-08-23 are not logged here](https://www.youtube.com/watch?v=NoAzpa1x7jU&feature=youtu.be&t=107) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8ffb8c0358..75cb3682cd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,17 +16,17 @@ _Before making any significant changes, please [open an issue](https://github.co Once we've discussed your changes and you've got your code ready, make sure that tests are passing and open your pull request. Your PR is most likely to be accepted if it: -- Includes tests for new functionality. -- References the original issue in description, e.g. "Resolves #123". -- Has a [good commit message](https://chris.beams.io/posts/git-commit/): - - Separate subject from body with a blank line - - Limit the subject line to 50 characters - - Capitalize the subject line - - Do not end the subject line with a period - - Use the imperative mood in the subject line - - Wrap the body at 72 characters - - Use the body to explain _what_ and _why_ instead of _how_ -- Each commit must be signed by the author ([see below](#sign-your-work)). +* Includes tests for new functionality. +* References the original issue in description, e.g. "Resolves #123". +* Has a [good commit message](https://chris.beams.io/posts/git-commit/): + * Separate subject from body with a blank line + * Limit the subject line to 50 characters + * Capitalize the subject line + * Do not end the subject line with a period + * Use the imperative mood in the subject line + * Wrap the body at 72 characters + * Use the body to explain _what_ and _why_ instead of _how_ +* Each commit must be signed by the author ([see below](#sign-your-work)). ## License @@ -121,18 +121,18 @@ Finally, we generally adhere to the [Airbnb Style Guide](https://github.com/airb # Cutting a Jaeger UI release 1. Determine the version for the release. - - Follow [semver.org](https://semver.org) to determine the new version for Jaeger UI. - - Review all changes since the last release to determine how, if at all, any externally facing APIs are impacted. This includes, but is not limited to, the UI config and URL routes such as deep-linking and configuring the embedded mode. - - Preface the version with a "v", e.g. `v1.0.0`. + * Follow [semver.org](https://semver.org) to determine the new version for Jaeger UI. + * Review all changes since the last release to determine how, if at all, any externally facing APIs are impacted. This includes, but is not limited to, the UI config and URL routes such as deep-linking and configuring the embedded mode. + * Preface the version with a "v", e.g. `v1.0.0`. 1. Create and merge, per approval, a PR which preps the release. 1. The PR title should match the format "Preparing release vX.Y.Z". 1. CHANGELOG.md - - Change the version of the current release from "Next (unreleased)" to "vX.Y.Z (Month D, YYYY)" where "vX.Y.Z" is the semver for this release. - - Make sure all relevant changes made since the last release are present and listed under the current release. [`scripts/get-changelog.js`](https://github.com/jaegertracing/jaeger-ui/blob/52780c897f21131472de9b81c96ebd63853917ee/scripts/get-changelog.js) might be useful. - - If necessary, add a note detailing any impact to externally facing APIs. + * Change the version of the current release from "Next (unreleased)" to "vX.Y.Z (Month D, YYYY)" where "vX.Y.Z" is the semver for this release. + * Make sure all relevant changes made since the last release are present and listed under the current release. [`scripts/get-changelog.js`](https://github.com/jaegertracing/jaeger-ui/blob/52780c897f21131472de9b81c96ebd63853917ee/scripts/get-changelog.js) might be useful. + * If necessary, add a note detailing any impact to externally facing APIs. 1. Update `packages/jaeger-ui/package.json#version` to refer to the version being released. 1. Create a GitHub release. - - The tag and release must refer to the commit created when the PR from the previous step was merged. - - The tag name for the GitHub release should be the version for the release. It should include the "v", e.g. `v1.0.0`. - - The title of the release match the format "Jaeger UI vX.Y.Z". - - Copy the new CHANGELOG.md section into the release notes. + * The tag and release must refer to the commit created when the PR from the previous step was merged. + * The tag name for the GitHub release should be the version for the release. It should include the "v", e.g. `v1.0.0`. + * The title of the release match the format "Jaeger UI vX.Y.Z". + * Copy the new CHANGELOG.md section into the release notes. diff --git a/package.json b/package.json index c857b7edaf..132f2bfac1 100644 --- a/package.json +++ b/package.json @@ -31,9 +31,7 @@ "**/lodash": "4.17.11" }, "workspaces": { - "packages": [ - "packages/*" - ], + "packages": ["packages/*"], "nohoist": [ "**/customize-cra", "**/customize-cra/**", @@ -49,11 +47,14 @@ "coverage": "lerna run coverage", "eslint": "eslint 'scripts/*.{js,ts,tsx}' 'packages/*/src/**/*.{js,ts,tsx}' 'packages/*/*.{js,ts,tsx}'", "flow": "glow", - "lint": "yarn run prettier-lint && yarn run tsc-lint && yarn run eslint && yarn run flow && yarn run check-license", + "lint": + "yarn run prettier-lint && yarn run tsc-lint && yarn run eslint && yarn run flow && yarn run check-license", "prepare": "lerna run --stream --sort prepublishOnly", "prettier-comment": "https://github.com/yarnpkg/yarn/issues/6300", - "prettier": "./node_modules/prettier/bin-prettier.js --write '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'", - "prettier-lint": "./node_modules/prettier/bin-prettier.js --list-different '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'", + "prettier": + "./node_modules/prettier/bin-prettier.js --write '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'", + "prettier-lint": + "./node_modules/prettier/bin-prettier.js --list-different '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'", "test": "lerna run test", "tsc-lint": "tsc", "tsc-lint-debug": "tsc --listFiles", diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json index 682893623f..f59ffe728c 100644 --- a/packages/jaeger-ui/package.json +++ b/packages/jaeger-ui/package.json @@ -59,7 +59,7 @@ "logfmt": "^1.2.0", "moment": "^2.18.1", "prop-types": "^15.5.10", - "query-string": "^5.0.0", + "query-string": "^6.3.0", "raven-js": "^3.22.1", "react": "^16.3.2", "react-copy-to-clipboard": "^5.0.1", @@ -70,7 +70,7 @@ "react-icons": "2.2.7", "react-metrics": "^2.3.2", "react-redux": "^5.0.6", - "react-router-dom": "^4.1.2", + "react-router-dom": "^4.3.1", "react-router-redux": "5.0.0-alpha.6", "react-virtualized-select": "^3.1.0", "react-vis": "^1.7.2", @@ -91,7 +91,8 @@ "analyze": "source-map-explorer build/static/js/main.*", "build": "REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired build", "coverage": "yarn run test -- --coverage", - "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired start", + "start:ga-debug": + "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired start", "start": "react-app-rewired start", "test-dev": "react-app-rewired test --env=jsdom", "test": "CI=1 react-app-rewired test --env=jsdom --color" @@ -105,10 +106,5 @@ "!src/demo/**/*.js" ] }, - "browserslist": [ - ">0.5%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] + "browserslist": [">0.5%", "not dead", "not ie <= 11", "not op_mini all"] } diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.js b/packages/jaeger-ui/src/components/DependencyGraph/index.js index 3866a2e361..0d2427ca3f 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/index.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/index.js @@ -131,7 +131,4 @@ export function mapDispatchToProps(dispatch) { return { fetchDependencies }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(DependencyGraphPageImpl); +export default connect(mapStateToProps, mapDispatchToProps)(DependencyGraphPageImpl); diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js index 57057fbf94..57657f48a6 100644 --- a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js +++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js @@ -524,10 +524,7 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)( +export default connect(mapStateToProps, mapDispatchToProps)( reduxForm({ form: 'searchSideBar', })(SearchFormImpl) diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js index 4c42b8278f..95d12f64f3 100644 --- a/packages/jaeger-ui/src/components/SearchTracePage/index.js +++ b/packages/jaeger-ui/src/components/SearchTracePage/index.js @@ -115,9 +115,7 @@ export class SearchTracePageImpl extends Component { {showErrors && (

There was an error querying for traces:

- {errors.map(err => ( - - ))} + {errors.map(err => )}
)} {!showErrors && ( @@ -284,7 +282,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(SearchTracePageImpl); +export default connect(mapStateToProps, mapDispatchToProps)(SearchTracePageImpl); diff --git a/packages/jaeger-ui/src/components/SearchTracePage/url.js b/packages/jaeger-ui/src/components/SearchTracePage/url.ts similarity index 86% rename from packages/jaeger-ui/src/components/SearchTracePage/url.js rename to packages/jaeger-ui/src/components/SearchTracePage/url.ts index 44b2193778..f13264cb09 100644 --- a/packages/jaeger-ui/src/components/SearchTracePage/url.js +++ b/packages/jaeger-ui/src/components/SearchTracePage/url.ts @@ -1,5 +1,3 @@ -// @flow - // Copyright (c) 2018 Uber Technologies, Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -19,9 +17,9 @@ import { matchPath } from 'react-router-dom'; import prefixUrl from '../../utils/prefix-url'; -import type { SearchQuery } from '../../types/search'; +import { SearchQuery } from '../../types/search'; // eslint-disable-line no-unused-vars -function eqEq(a: ?(string | number), b: ?(string | number)) { +function eqEq(a: string | number | null | undefined, b: string | number | null | undefined) { return (a == null && b == null) || String(a) === String(b); } @@ -33,7 +31,7 @@ export function matches(path: string) { return Boolean(matchPath(path, ROUTE_MATCHER)); } -export function getUrl(query?: ?Object) { +export function getUrl(query?: Object | null | undefined) { const search = query ? `?${queryString.stringify(query)}` : ''; return prefixUrl(`/search${search}`); } diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js index 12b0aa0b73..569877873c 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js @@ -182,7 +182,4 @@ export function mapDispatchToProps(dispatch: Function) { return { fetchMultipleTraces, forceState }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(TraceDiffImpl); +export default connect(mapStateToProps, mapDispatchToProps)(TraceDiffImpl); diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.test.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.test.js index 5b7310e42a..2f216c6797 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.test.js +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.test.js @@ -314,10 +314,10 @@ describe('TraceDiff', () => { // This test may false negative if previous tests are failing it('builds tracesData Map from cohort and state.trace.traces', () => { - const { - tracesData, - cohort: { length: expectedSize }, - } = mapStateToProps(makeTestReduxState(), getOwnProps()); + const { tracesData, cohort: { length: expectedSize } } = mapStateToProps( + makeTestReduxState(), + getOwnProps() + ); defaultCohortIds.forEach(id => { expect(tracesData.get(id)).toEqual({ id, diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js index e6b82fa4ce..fc33671812 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js @@ -70,7 +70,7 @@ export class DiffNode extends React.PureComponent { {isSame ? null : ( {chgSign} - {a === 0 || b === 0 ? 100 : abs(((a - b) / max(a, b)) * 100).toFixed(0)} + {a === 0 || b === 0 ? 100 : abs((a - b) / max(a, b) * 100).toFixed(0)} % )} diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js index 9fd11c18b8..0a7d03b9e9 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js @@ -148,12 +148,7 @@ describe('CohortTable', () => { it('renders TraceName fragment when given complete data', () => { const traceNameColumnRenderer = getRowRenderer('traceName'); const testTrace = cohort[0]; - const { - id, - error, - state, - data: { traceName }, - } = testTrace; + const { id, error, state, data: { traceName } } = testTrace; const renderedTraceNameColumn = shallow( // traceNameRenderer returns a React Fragment, wrapper div helps enzyme
{traceNameColumnRenderer('unused argument', testTrace)}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.js b/packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.js index 1b1205945f..6b35ad12df 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.js @@ -106,9 +106,9 @@ export function calculateTraceDag(trace: Trace): TraceDag { count: n.members.length, errors: numErrors, time: ntime, - percent: (100 / trace.duration) * ntime, + percent: 100 / trace.duration * ntime, selfTime: stime, - percentSelfTime: (100 / ntime) * stime, + percentSelfTime: 100 / ntime * stime, }; // eslint-disable-next-line no-param-reassign n.data = nd; diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js index f0787effb6..ae76af7e17 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.js @@ -27,7 +27,7 @@ export default function GraphTicks(props: GraphTicksProps) { const ticks = []; // i starts at 1, limit is `i < numTicks` so the first and last ticks aren't drawn for (let i = 1; i < numTicks; i++) { - const x = `${(i / numTicks) * 100}%`; + const x = `${i / numTicks * 100}%`; ticks.push(); } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js index 91e38796c9..a1b0e5a944 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.js @@ -44,8 +44,8 @@ export default function renderIntoCanvas( ctx.fillRect(0, 0, cWidth, cHeight); for (let i = 0; i < items.length; i++) { const { valueWidth, valueOffset, serviceName } = items[i]; - const x = (valueOffset / totalValueWidth) * cWidth; - let width = (valueWidth / totalValueWidth) * cWidth; + const x = valueOffset / totalValueWidth * cWidth; + let width = valueWidth / totalValueWidth * cWidth; if (width < MIN_ITEM_WIDTH) { width = MIN_ITEM_WIDTH; } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js index b30fae90aa..2ad060db5e 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js @@ -131,8 +131,8 @@ describe('renderIntoCanvas()', () => { const color = expectedColors[i].output; const fillStyle = `rgba(${color.concat(ITEM_ALPHA).join()})`; const height = MIN_TOTAL_HEIGHT / items.length; - const width = (valueWidth / totalValueWidth) * getCanvasWidth(); - const x = (valueOffset / totalValueWidth) * getCanvasWidth(); + const width = valueWidth / totalValueWidth * getCanvasWidth(); + const x = valueOffset / totalValueWidth * getCanvasWidth(); const y = height * i; return { fillStyle, height, width, x, y }; }), @@ -177,9 +177,9 @@ describe('renderIntoCanvas()', () => { const color = expectedColors[i].output; const fillStyle = `rgba(${color.concat(ITEM_ALPHA).join()})`; const height = MIN_ITEM_HEIGHT; - const width = Math.max(MIN_ITEM_WIDTH, (valueWidth / totalValueWidth) * getCanvasWidth()); - const x = (valueOffset / totalValueWidth) * getCanvasWidth(); - const y = (MAX_TOTAL_HEIGHT / items.length) * i; + const width = Math.max(MIN_ITEM_WIDTH, valueWidth / totalValueWidth * getCanvasWidth()); + const x = valueOffset / totalValueWidth * getCanvasWidth(); + const y = MAX_TOTAL_HEIGHT / items.length * i; return { fillStyle, height, width, x, y }; }), ]; diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js index 0a03fb754a..27261aed0c 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.js @@ -202,14 +202,15 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps) { )} {summaryItems && } - {!hideMap && !slimView && ( - - )} + {!hideMap && + !slimView && ( + + )} ); } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/Positions.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/Positions.js index 5bd9417cb0..f931b5ec81 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/Positions.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/Positions.js @@ -192,6 +192,6 @@ export default class Positions { return known | 0; } // eslint-disable-next-line no-bitwise - return ((known / (this.lastI + 1)) * this.heights.length) | 0; + return (known / (this.lastI + 1) * this.heights.length) | 0; } } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js index 850a9dc6f0..d4629b9600 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js @@ -91,12 +91,7 @@ export default class SpanBarRow extends React.PureComponent { traceStartTime, span, } = this.props; - const { - duration, - hasChildren: isParent, - operationName, - process: { serviceName }, - } = span; + const { duration, hasChildren: isParent, operationName, process: { serviceName } } = span; const label = formatDuration(duration); const viewBounds = getViewedBounds(span.startTime, span.startTime + span.duration); const viewStart = viewBounds.start; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.js index a81a49fb29..7ccc0c4538 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.js @@ -102,17 +102,18 @@ export default function SpanDetail(props: SpanDetailProps) { /> )} - {logs && logs.length > 0 && ( - logsToggle(spanID)} - onItemToggle={logItem => logItemToggle(spanID, logItem)} - timestamp={traceStartTime} - /> - )} + {logs && + logs.length > 0 && ( + logsToggle(spanID)} + onItemToggle={logItem => logItemToggle(spanID, logItem)} + timestamp={traceStartTime} + /> + )} diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js index c2cb919991..ae36d754a4 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js @@ -141,7 +141,4 @@ export function mapDispatchToProps(dispatch: Function) { return { addHoverIndentGuideId, removeHoverIndentGuideId }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(UnconnectedSpanTreeOffset); +export default connect(mapStateToProps, mapDispatchToProps)(UnconnectedSpanTreeOffset); diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.js index d7f0587e8d..230530c52e 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.js @@ -35,7 +35,7 @@ export default function Ticks(props: TicksProps) { labels = []; const viewingDuration = (endTime || 0) - (startTime || 0); for (let i = 0; i < numTicks; i++) { - const durationAtTick = startTime + (i / (numTicks - 1)) * viewingDuration; + const durationAtTick = startTime + i / (numTicks - 1) * viewingDuration; labels.push(formatDuration(durationAtTick)); } } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js index 986fc76111..236497e520 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js @@ -414,9 +414,4 @@ function mapDispatchToProps(dispatch) { return bindActionCreators(actions, dispatch); } -export default withRouter( - connect( - mapStateToProps, - mapDispatchToProps - )(VirtualizedTraceViewImpl) -); +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(VirtualizedTraceViewImpl)); diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js index f3a7c091ea..b16cd8e90d 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js @@ -124,7 +124,4 @@ function mapDispatchToProps(dispatch) { return { setSpanNameColumnWidth, expandAll, expandOne, collapseAll, collapseOne }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(TraceTimelineViewerImpl); +export default connect(mapStateToProps, mapDispatchToProps)(TraceTimelineViewerImpl); diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js index 545e46614b..30446bc87d 100644 --- a/packages/jaeger-ui/src/components/TracePage/index.js +++ b/packages/jaeger-ui/src/components/TracePage/index.js @@ -400,7 +400,4 @@ export function mapDispatchToProps(dispatch: Function) { return { acknowledgeArchive, archiveTrace, fetchTrace }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(TracePageImpl); +export default connect(mapStateToProps, mapDispatchToProps)(TracePageImpl); diff --git a/packages/jaeger-ui/src/selectors/span.js b/packages/jaeger-ui/src/selectors/span.js index a3c3b1dc1c..f96b912d36 100644 --- a/packages/jaeger-ui/src/selectors/span.js +++ b/packages/jaeger-ui/src/selectors/span.js @@ -24,10 +24,7 @@ export const getSpanTimestamp = span => span.startTime; export const getSpanProcessId = span => span.processID; export const getSpanReferences = span => span.references || []; export const getSpanReferenceByType = createSelector( - createSelector( - ({ span }) => span, - getSpanReferences - ), + createSelector(({ span }) => span, getSpanReferences), ({ type }) => type, (references, type) => references.find(ref => ref.refType === type) ); @@ -49,10 +46,7 @@ export const getSpanProcess = span => { return span.process; }; -export const getSpanServiceName = createSelector( - getSpanProcess, - getProcessServiceName -); +export const getSpanServiceName = createSelector(getSpanProcess, getProcessServiceName); export const filterSpansForTimestamps = createSelector( ({ spans }) => spans, @@ -73,16 +67,14 @@ export const filterSpansForText = createSelector( .map(({ original }) => original) ); -const getTextFilterdSpansAsMap = createSelector( - filterSpansForText, - matchingSpans => - matchingSpans.reduce( - (obj, span) => ({ - ...obj, - [getSpanId(span)]: span, - }), - {} - ) +const getTextFilterdSpansAsMap = createSelector(filterSpansForText, matchingSpans => + matchingSpans.reduce( + (obj, span) => ({ + ...obj, + [getSpanId(span)]: span, + }), + {} + ) ); export const highlightSpansForTextFilter = createSelector( diff --git a/packages/jaeger-ui/src/selectors/trace.js b/packages/jaeger-ui/src/selectors/trace.js index 0c092f06da..e916d9be53 100644 --- a/packages/jaeger-ui/src/selectors/trace.js +++ b/packages/jaeger-ui/src/selectors/trace.js @@ -42,9 +42,8 @@ const getSpanWithProcess = createSelector( }) ); -export const getTraceSpansAsMap = createSelector( - getTraceSpans, - spans => spans.reduce((map, span) => map.set(getSpanId(span), span), new Map()) +export const getTraceSpansAsMap = createSelector(getTraceSpans, spans => + spans.reduce((map, span) => map.set(getSpanId(span), span), new Map()) ); export const TREE_ROOT_ID = '__root__'; @@ -107,32 +106,24 @@ export const hydrateSpansWithProcesses = trace => { }; }; -export const getTraceSpanCount = createSelector( - getTraceSpans, - spans => spans.length -); +export const getTraceSpanCount = createSelector(getTraceSpans, spans => spans.length); -export const getTraceTimestamp = createSelector( - getTraceSpans, - spans => - spans.reduce( - (prevTimestamp, span) => - prevTimestamp ? Math.min(prevTimestamp, getSpanTimestamp(span)) : getSpanTimestamp(span), - null - ) +export const getTraceTimestamp = createSelector(getTraceSpans, spans => + spans.reduce( + (prevTimestamp, span) => + prevTimestamp ? Math.min(prevTimestamp, getSpanTimestamp(span)) : getSpanTimestamp(span), + null + ) ); -export const getTraceDuration = createSelector( - getTraceSpans, - getTraceTimestamp, - (spans, timestamp) => - spans.reduce( - (prevDuration, span) => - prevDuration - ? Math.max(getSpanTimestamp(span) - timestamp + getSpanDuration(span), prevDuration) - : getSpanDuration(span), - null - ) +export const getTraceDuration = createSelector(getTraceSpans, getTraceTimestamp, (spans, timestamp) => + spans.reduce( + (prevDuration, span) => + prevDuration + ? Math.max(getSpanTimestamp(span) - timestamp + getSpanDuration(span), prevDuration) + : getSpanDuration(span), + null + ) ); export const getTraceEndTimestamp = createSelector( @@ -150,36 +141,22 @@ export const getParentSpan = createSelector( .sort((spanA, spanB) => numberSortComparator(getSpanTimestamp(spanA), getSpanTimestamp(spanB)))[0] ); -export const getTraceDepth = createSelector( - getTraceSpanIdsAsTree, - spanTree => spanTree.depth - 1 -); +export const getTraceDepth = createSelector(getTraceSpanIdsAsTree, spanTree => spanTree.depth - 1); export const getSpanDepthForTrace = createSelector( - createSelector( - state => state.trace, - getTraceSpanIdsAsTree - ), - createSelector( - state => state.span, - getSpanId - ), + createSelector(state => state.trace, getTraceSpanIdsAsTree), + createSelector(state => state.span, getSpanId), (node, spanID) => node.getPath(spanID).length - 1 ); -export const getTraceServices = createSelector( - getTraceProcesses, - processes => - Object.keys(processes).reduce( - (services, processID) => services.add(getProcessServiceName(processes[processID])), - new Set() - ) +export const getTraceServices = createSelector(getTraceProcesses, processes => + Object.keys(processes).reduce( + (services, processID) => services.add(getProcessServiceName(processes[processID])), + new Set() + ) ); -export const getTraceServiceCount = createSelector( - getTraceServices, - services => services.size -); +export const getTraceServiceCount = createSelector(getTraceServices, services => services.size); // establish constants to determine how math should be handled // for nanosecond-to-millisecond conversions. @@ -201,10 +178,7 @@ export const formatDurationForUnit = createSelector( export const formatDurationForTrace = createSelector( ({ duration }) => duration, - createSelector( - ({ trace }) => trace, - getDurationFormatterForTrace - ), + createSelector(({ trace }) => trace, getDurationFormatterForTrace), (duration, formatter) => formatter(duration) ); @@ -216,25 +190,16 @@ export const getSortedSpans = createSelector( [...spans].sort((spanA, spanB) => dir * comparator(selector(spanA, trace), selector(spanB, trace))) ); -const getTraceSpansByHierarchyPosition = createSelector( - getTraceSpanIdsAsTree, - tree => { - const hierarchyPositionMap = new Map(); - let i = 0; - tree.walk(spanID => hierarchyPositionMap.set(spanID, i++)); - return hierarchyPositionMap; - } -); +const getTraceSpansByHierarchyPosition = createSelector(getTraceSpanIdsAsTree, tree => { + const hierarchyPositionMap = new Map(); + let i = 0; + tree.walk(spanID => hierarchyPositionMap.set(spanID, i++)); + return hierarchyPositionMap; +}); export const getTreeSizeForTraceSpan = createSelector( - createSelector( - state => state.trace, - getTraceSpanIdsAsTree - ), - createSelector( - state => state.span, - getSpanId - ), + createSelector(state => state.trace, getTraceSpanIdsAsTree), + createSelector(state => state.span, getSpanId), (tree, spanID) => { const node = tree.find(spanID); if (!node) { @@ -245,20 +210,14 @@ export const getTreeSizeForTraceSpan = createSelector( ); export const getSpanHierarchySortPositionForTrace = createSelector( - createSelector( - ({ trace }) => trace, - getTraceSpansByHierarchyPosition - ), + createSelector(({ trace }) => trace, getTraceSpansByHierarchyPosition), ({ span }) => span, (hierarchyPositionMap, span) => hierarchyPositionMap.get(getSpanId(span)) ); export const getTraceName = createSelector( createSelector( - createSelector( - hydrateSpansWithProcesses, - getParentSpan - ), + createSelector(hydrateSpansWithProcesses, getParentSpan), createStructuredSelector({ name: getSpanName, serviceName: getSpanServiceName, @@ -269,10 +228,7 @@ export const getTraceName = createSelector( export const omitCollapsedSpans = createSelector( ({ spans }) => spans, - createSelector( - ({ trace }) => trace, - getTraceSpanIdsAsTree - ), + createSelector(({ trace }) => trace, getTraceSpanIdsAsTree), ({ collapsed }) => collapsed, (spans, tree, collapse) => { const hiddenSpanIds = collapse.reduce((result, collapsedSpanId) => { diff --git a/packages/jaeger-ui/src/types/search.js b/packages/jaeger-ui/src/types/search.ts similarity index 65% rename from packages/jaeger-ui/src/types/search.js rename to packages/jaeger-ui/src/types/search.ts index cd1a625024..6419c92538 100644 --- a/packages/jaeger-ui/src/types/search.js +++ b/packages/jaeger-ui/src/types/search.ts @@ -1,5 +1,3 @@ -// @flow - // Copyright (c) 2017 Uber Technologies, Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -15,15 +13,15 @@ // limitations under the License. export type SearchQuery = { - end: number | string, - limit: number | string, - lookback: string, - maxDuration: null | string, - minDuration: null | string, - operation: ?string, - service: string, - start: number | string, - tags: ?string, + end: number | string; + limit: number | string; + lookback: string; + maxDuration: null | string; + minDuration: null | string; + operation: string | null | undefined; + service: string; + start: number | string; + tags: string | null | undefined; }; /** @@ -33,22 +31,22 @@ export type TraceSummary = { /** * Duration of trace in milliseconds. */ - duration: number, + duration: number; /** * Start time of trace in milliseconds. */ - timestamp: number, - traceName: string, - traceID: string, - numberOfErredSpans: number, - numberOfSpans: number, - services: { name: string, numberOfSpans: number }[], + timestamp: number; + traceName: string; + traceID: string; + numberOfErredSpans: number; + numberOfSpans: number; + services: { name: string; numberOfSpans: number }[]; }; export type TraceSummaries = { /** * Duration of longest trace in `traces` in milliseconds. */ - maxDuration: number, - traces: TraceSummary[], + maxDuration: number; + traces: TraceSummary[]; }; diff --git a/packages/jaeger-ui/src/utils/DraggableManager/README.md b/packages/jaeger-ui/src/utils/DraggableManager/README.md index e21236f56f..3a27a23ccd 100644 --- a/packages/jaeger-ui/src/utils/DraggableManager/README.md +++ b/packages/jaeger-ui/src/utils/DraggableManager/README.md @@ -4,8 +4,8 @@ In the `src/utils/DraggableManager/demo` folder there is a small project that de The demo contains two components: -- `DividerDemo`, which occupies the top half of the web page -- `RegionDemo`, which occupies the bottom half of the web page, as shown in the GIF, below +* `DividerDemo`, which occupies the top half of the web page +* `RegionDemo`, which occupies the bottom half of the web page, as shown in the GIF, below ![GIF of Demo](demo/demo-ux.gif) @@ -19,16 +19,16 @@ What we do with that information is up to us. This is mentioned because you need DraggableManager instances provide three (and a half) conveniences: -- Handle mouse events related to dragging. -- Maps `MouseEvent.clientX` from the [client area](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX) to the local context (yielding `x` (pixels) and `value` (0 -> 1, e.g, `x/width`)). -- Maintains a sense of state in terms of whether or not the subject DOM element is being dragged. For example, it fires `onMouseMove` callbacks when not being dragged and `onDragMove` when being dragged. -- Two other minor conveniences (relating to window events) +* Handle mouse events related to dragging. +* Maps `MouseEvent.clientX` from the [client area](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX) to the local context (yielding `x` (pixels) and `value` (0 -> 1, e.g, `x/width`)). +* Maintains a sense of state in terms of whether or not the subject DOM element is being dragged. For example, it fires `onMouseMove` callbacks when not being dragged and `onDragMove` when being dragged. +* Two other minor conveniences (relating to window events) And, DraggableManager instances have two (or three) primary requirements: -- Mouse events need to be piped into it -- The `getBounds()` constructor parameter must be provided -- At least some of the callbacks need to be handled +* Mouse events need to be piped into it +* The `getBounds()` constructor parameter must be provided +* At least some of the callbacks need to be handled ## Conveniences @@ -36,10 +36,10 @@ And, DraggableManager instances have two (or three) primary requirements: For the purposes of handling mouse events related to the intended dragging functionality, DraggableManager instances expose the following methods (among others): -- `handleMouseEnter` -- `handleMouseMove` -- `handleMouseLeave` -- `handleMouseDown` +* `handleMouseEnter` +* `handleMouseMove` +* `handleMouseLeave` +* `handleMouseDown` To use a DraggableManager instance, relevant mouse events should be piped to the above handlers: @@ -77,12 +77,12 @@ In other words, DraggableManager instances convert the data to the relevant cont The callbacks for DraggableManager instances are: -- onMouseEnter -- onMouseLeave -- onMouseMove -- onDragStart -- onDragMove -- onDragEnd +* onMouseEnter +* onMouseLeave +* onMouseMove +* onDragStart +* onDragMove +* onDragEnd Implicit in the breakdown of the callbacks is the notion that `onDrag*` callbacks are fired when dragging and `onMouse*` callbacks are issued, otherwise. @@ -173,8 +173,8 @@ In the other scenario, `RegionDemo`, we care about showing the red vertical line The `RegionDemo` is a bit more involved, so, to break down how we handle the callbacks... First, we store the following state (in the parent element, incidentally): -- `regionCursor` is where we draw the cursor indicator (a red vertical line, in the demo). -- `regionDragging` represents the start (at index `0`) and current position (at index `1`) of the region currently being dragged. +* `regionCursor` is where we draw the cursor indicator (a red vertical line, in the demo). +* `regionDragging` represents the start (at index `0`) and current position (at index `1`) of the region currently being dragged. ``` { @@ -185,21 +185,21 @@ The `RegionDemo` is a bit more involved, so, to break down how we handle the cal Then, we handle the callbacks as follows: -- `onMouseMove` - - Set `regionCursor` to `value` - - This allows us to draw the red vertical line at the cursor -- `onMouseLeave` - - Set `regionCursor` to `null` - - So we know not to draw the red vertical line -- `onDragStart` - - Set `regionDragging` to `[value, value]` - - This allows us to draw the dragging region -- `onDragMove` - - Set `regionDragging` to `[regionDragging[0], value]` - - Again, for drawing the dragging region. We keep `regionDragging[0]` as-is so we always know where the drag started -- `onDragEnd` - - Set `regionDragging` to `null`, set `regionCursor` to `value` - - Setting `regionDragging` to `null` lets us know not to draw the region, and setting `regionCursor` lets us know to draw the cursor right where the user left off +* `onMouseMove` + * Set `regionCursor` to `value` + * This allows us to draw the red vertical line at the cursor +* `onMouseLeave` + * Set `regionCursor` to `null` + * So we know not to draw the red vertical line +* `onDragStart` + * Set `regionDragging` to `[value, value]` + * This allows us to draw the dragging region +* `onDragMove` + * Set `regionDragging` to `[regionDragging[0], value]` + * Again, for drawing the dragging region. We keep `regionDragging[0]` as-is so we always know where the drag started +* `onDragEnd` + * Set `regionDragging` to `null`, set `regionCursor` to `value` + * Setting `regionDragging` to `null` lets us know not to draw the region, and setting `regionCursor` lets us know to draw the cursor right where the user left off This is a contrived demo, so `onDragEnd` is kind of boring... Usually we would do something more interesting with the final `x` or `value`. diff --git a/packages/jaeger-ui/src/utils/date.ts b/packages/jaeger-ui/src/utils/date.ts index 0a98a69436..51846e2749 100644 --- a/packages/jaeger-ui/src/utils/date.ts +++ b/packages/jaeger-ui/src/utils/date.ts @@ -34,7 +34,7 @@ export const DEFAULT_MS_PRECISION = Math.log10(ONE_MILLISECOND); * @return {number} 0-100 percentage */ export function getPercentageOfDuration(duration: number, totalDuration: number) { - return (duration / totalDuration) * 100; + return duration / totalDuration * 100; } const quantizeDuration = (duration: number, floatPrecision: number, conversionFactor: number) => diff --git a/packages/jaeger-ui/src/utils/plexus/set-on-graph.test.js b/packages/jaeger-ui/src/utils/plexus/set-on-graph.test.js index b2ebc8901f..4c2c43aea2 100644 --- a/packages/jaeger-ui/src/utils/plexus/set-on-graph.test.js +++ b/packages/jaeger-ui/src/utils/plexus/set-on-graph.test.js @@ -33,11 +33,11 @@ describe('Set on graph utils', () => { }); it('calculates style object with outline width one third larger if zoomTransform.k is .5', () => { - expect(getComputedWidth(0.5)).toBe((4 / 3) * SIZE_IDENTITY); + expect(getComputedWidth(0.5)).toBe(4 / 3 * SIZE_IDENTITY); }); it('calculates style object with outline width two thirds larger if zoomTransform.k is .33', () => { - expect(getComputedWidth(0.33)).toBe((5 / 3) * SIZE_IDENTITY); + expect(getComputedWidth(0.33)).toBe(5 / 3 * SIZE_IDENTITY); }); it('calculates style object with outline width twice as large if zoomTransform.k is .25', () => { diff --git a/packages/jaeger-ui/src/utils/redux-form-field-adapter.js b/packages/jaeger-ui/src/utils/redux-form-field-adapter.js index 43252c1e4d..34eab670b1 100644 --- a/packages/jaeger-ui/src/utils/redux-form-field-adapter.js +++ b/packages/jaeger-ui/src/utils/redux-form-field-adapter.js @@ -32,11 +32,7 @@ export default function reduxFormFieldAdapter({ isValidatedInput: boolean, }) { return function _reduxFormFieldAdapter(props: any) { - const { - input: { onBlur, onChange, onFocus, value }, - children, - ...rest - } = props; + const { input: { onBlur, onChange, onFocus, value }, children, ...rest } = props; const isInvalid = !rest.meta.active && Boolean(rest.meta.error); const content = ( | | | | ` - - Truncated to 96 characters - - **version** - `package.json#version` - - **git remote** - `git remote get-url --push origin`, normalized - - **short SHA** - `git branch --points-at HEAD --format="%(objectname:short)"` - - **diff shortstat** - A compacted `git diff-index --shortstat HEAD` - - E.g. `2f +3 -4 5?` - - 2 modified files, having - - 3 insertions and - - 4 deletions - - 5 untracked files - - **branch name** - `$ git branch --points-at HEAD --format="%(refname:short)"` - - `(detached)` is used when HEAD is detached because the SHA is already noted +* [Application Name](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#appName) + * Set to `Jaeger UI` +* [Application ID](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#appId) + * Set to `github.com/jaegertracing/jaeger-ui` +* [Application Version](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#appVersion) + * Example: `0.0.1 | github.com/jaegertracing/jaeger-ui | 8c50c6c | 2f +2 -12 | master` + * A dynamic value set to: ` | | | | ` + * Truncated to 96 characters + * **version** - `package.json#version` + * **git remote** - `git remote get-url --push origin`, normalized + * **short SHA** - `git branch --points-at HEAD --format="%(objectname:short)"` + * **diff shortstat** - A compacted `git diff-index --shortstat HEAD` + * E.g. `2f +3 -4 5?` + * 2 modified files, having + * 3 insertions and + * 4 deletions + * 5 untracked files + * **branch name** - `$ git branch --points-at HEAD --format="%(refname:short)"` + * `(detached)` is used when HEAD is detached because the SHA is already noted ## Error Tracking @@ -36,33 +36,33 @@ Raven.js is used to capture error data ([GitHub](https://github.com/getsentry/ra For every error we learn of, two GA calls are issued: -- An [exception](https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions) -- An [event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) +* An [exception](https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions) +* An [event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) GA exception tracking is pretty minimal, allowing just a [150 byte string](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#exDescription). So, in addition to the exception, an event with additional data is also issued. -- [Category](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventCategory) - The page type the error occurred on -- [Action](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventAction) - Error information with a compacted stack trace (sans sourcemaps, at this time) -- [Label](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventLabel) - A compact form of the breadcrumbs -- [Value](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventValue) - The duration of the session when the error occurred (in seconds) +* [Category](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventCategory) - The page type the error occurred on +* [Action](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventAction) - Error information with a compacted stack trace (sans sourcemaps, at this time) +* [Label](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventLabel) - A compact form of the breadcrumbs +* [Value](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#eventValue) - The duration of the session when the error occurred (in seconds) #### Event: Category - Which Page The category indicates which type of page the error occurred on, and will be one of the following: -- `jaeger/home/error` - The site root -- `jaeger/search/error` - The search page -- `jaeger/trace/error` - The trace page -- `jaeger/dependencies/error` - The Dependencies page +* `jaeger/home/error` - The site root +* `jaeger/search/error` - The search page +* `jaeger/trace/error` - The trace page +* `jaeger/dependencies/error` - The Dependencies page #### Event: Action - Error Info The action contains: -- The error message (truncated to 149 characters) -- A compact form of the git status (SHA and diff shortstat) -- The page URL with the origin and path-prefix removed (truncated to 50 characters) -- A compact form of the stack trace (without the benefit of sourcemaps, at this time) +* The error message (truncated to 149 characters) +* A compact form of the git status (SHA and diff shortstat) +* The page URL with the origin and path-prefix removed (truncated to 50 characters) +* A compact form of the stack trace (without the benefit of sourcemaps, at this time) For example, the following error: @@ -103,11 +103,11 @@ Note: The git status is determined when the build is generated or when `yarn sta The label contains: -- The error message (truncated to 149 characters) -- The type of page the error occurred on -- The duration, in seconds, of the session when the error occurred -- A compact form of the git status (SHA and diff shortstat) -- A compact form of breadcrumbs, with older entries preceding newer entries +* The error message (truncated to 149 characters) +* The type of page the error occurred on +* The duration, in seconds, of the session when the error occurred +* A compact form of the git status (SHA and diff shortstat) +* A compact form of breadcrumbs, with older entries preceding newer entries For example, the following label: @@ -132,56 +132,56 @@ cc{.SpanTreeOffset.is-parent >.SpanTreeOffset--iconWrapper} Indicates: -- `! Houston...` - The error message is `Error: Houston we have a problem` -- `trace` - The error occurred on the trace page -- `18` - The error occurred 18 seconds into the session -- `8c50c6c 2f +34 -56 1?` - The build was generated from commit `8c50c6c` with two modified files and one untracked file -- The sequence of events indicated by the breadcrumbs is (oldest to most recent): - - On the first page of the session - - `[tr|404]` - A HTTP call to fetch a trace returned a `404` status code - - `sr` - Next, on the search page - - `[svc]` - The services were fetched with a `200` status code - - `[op]` - The operations for a service were fetched with a `200` status code - - `c` - 1 click - - `i` - 1 text input - - `c` - 1 click - - `sd` - Next, on a search page showing results - - `[sr]` - A HTTP call to execute a search returned a `200` status code - - `c3` - 3 click UI interactions - - `tr` - Next, on a trace page - - `cc` - 2 clicks - - `c{.SpanTree...}` - The second click is the last UI breadcrumb, so it is shown with a CSS selector related to the click event target. The CSS selector is "related" instead of "identifying" because it's been simplified. - - `! test-sentry` - An error with the message `Error: test-sentry` - - The error being tracked occurred — implicit as the next event +* `! Houston...` - The error message is `Error: Houston we have a problem` +* `trace` - The error occurred on the trace page +* `18` - The error occurred 18 seconds into the session +* `8c50c6c 2f +34 -56 1?` - The build was generated from commit `8c50c6c` with two modified files and one untracked file +* The sequence of events indicated by the breadcrumbs is (oldest to most recent): + * On the first page of the session + * `[tr|404]` - A HTTP call to fetch a trace returned a `404` status code + * `sr` - Next, on the search page + * `[svc]` - The services were fetched with a `200` status code + * `[op]` - The operations for a service were fetched with a `200` status code + * `c` - 1 click + * `i` - 1 text input + * `c` - 1 click + * `sd` - Next, on a search page showing results + * `[sr]` - A HTTP call to execute a search returned a `200` status code + * `c3` - 3 click UI interactions + * `tr` - Next, on a trace page + * `cc` - 2 clicks + * `c{.SpanTree...}` - The second click is the last UI breadcrumb, so it is shown with a CSS selector related to the click event target. The CSS selector is "related" instead of "identifying" because it's been simplified. + * `! test-sentry` - An error with the message `Error: test-sentry` + * The error being tracked occurred — implicit as the next event The cryptic encoding for the breadcrumbs is used to fit as much of the event history into the 500 characters as possible. It might turn out that fewer events with more details is preferable. In which case, the payload will be adjusted. For now, the encoding is: -- `[sym]` - A fetch to `sym` resulted in a `200` status code, possible values for `sym` are: - - `svc` - Fetch the services for the search page - - `op` - Fetch the operations for a service - - `sr` - Execute a search - - `tr` - Fetch a trace - - `dp` - Fetch the dependency data - - `??` - Unknown fetch (should not happen) -- `[sym|NNN]` - The status code was `NNN`, omitted for `200` status codes -- `\n\nsym\n` - Navigation to `sym` - - Page navigation tokens are on their own line and have an empty line above them, e.g. empty lines separate events that occurred on different pages - - `sym` indicates the type of page, valid values are: - - `dp` - Dependencies page - - `tr` - Trace page - - `sd` - Search page with search results - - `sr` - Search page - - `rt` - The root page - - `??` - Uknown page (should not happen) -- `c` or `i` - Indicates a user interaction - - `c` is click - - `i` is input - - `cN` - Indicates `c` occurred `N` consecutive times, e.g. 3 clicks would be `c3` and `i2` is two input breadcrumbs - - `c{selector}` - Indicates `c` was the last UI breadcrumb, and the CSS selector `selector` describes the event target - - Takes for the form `i{selector}` for input events -- `! ` - A previous error that was tracked, truncated to 58 characters - - The first occurrence of `/error/i` is removed - - The first `:` is replaced with `!` +* `[sym]` - A fetch to `sym` resulted in a `200` status code, possible values for `sym` are: + * `svc` - Fetch the services for the search page + * `op` - Fetch the operations for a service + * `sr` - Execute a search + * `tr` - Fetch a trace + * `dp` - Fetch the dependency data + * `??` - Unknown fetch (should not happen) +* `[sym|NNN]` - The status code was `NNN`, omitted for `200` status codes +* `\n\nsym\n` - Navigation to `sym` + * Page navigation tokens are on their own line and have an empty line above them, e.g. empty lines separate events that occurred on different pages + * `sym` indicates the type of page, valid values are: + * `dp` - Dependencies page + * `tr` - Trace page + * `sd` - Search page with search results + * `sr` - Search page + * `rt` - The root page + * `??` - Uknown page (should not happen) +* `c` or `i` - Indicates a user interaction + * `c` is click + * `i` is input + * `cN` - Indicates `c` occurred `N` consecutive times, e.g. 3 clicks would be `c3` and `i2` is two input breadcrumbs + * `c{selector}` - Indicates `c` was the last UI breadcrumb, and the CSS selector `selector` describes the event target + * Takes for the form `i{selector}` for input events +* `! ` - A previous error that was tracked, truncated to 58 characters + * The first occurrence of `/error/i` is removed + * The first `:` is replaced with `!` ### [Sentry](https://github.com/getsentry) Is Not Being Used @@ -191,12 +191,12 @@ Using Sentry is currently under consideration. In the meantime, errors can be tr You get a lot for free when using Raven.js: -- [Breadcrumbs](https://docs.sentry.io/learn/breadcrumbs/), which include: - - [`fetch`](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L1242) HTTP requests - - [Previous errors](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L1872) - - Some [UI events](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L870) (click and input) - - [URL changes](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L945) -- Stack traces are [normalized](https://github.com/getsentry/raven-js/blob/f8eec063c95f70d8978f895284946bd278748d97/vendor/TraceKit/tracekit.js) -- Some global handlers are added +* [Breadcrumbs](https://docs.sentry.io/learn/breadcrumbs/), which include: + * [`fetch`](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L1242) HTTP requests + * [Previous errors](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L1872) + * Some [UI events](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L870) (click and input) + * [URL changes](https://github.com/getsentry/raven-js/blob/master/src/raven.js#L945) +* Stack traces are [normalized](https://github.com/getsentry/raven-js/blob/f8eec063c95f70d8978f895284946bd278748d97/vendor/TraceKit/tracekit.js) +* Some global handlers are added Implementing the above from scratch would require substantial effort. Meanwhile, Raven.js is well tested. diff --git a/packages/plexus/package.json b/packages/plexus/package.json index 0f58ae702d..7a5c5016e8 100644 --- a/packages/plexus/package.json +++ b/packages/plexus/package.json @@ -4,9 +4,7 @@ "version": "0.0.1-dev.4", "description": "Direct Graph React component", "main": "build/index.js", - "files": [ - "build" - ], + "files": ["build"], "devDependencies": { "@babel/preset-react": "7.0.0", "@babel/preset-typescript": "7.1.0", diff --git a/packages/plexus/src/DirectedGraph/DirectedGraph.tsx b/packages/plexus/src/DirectedGraph/DirectedGraph.tsx index 142635263f..5ce30ed5e3 100644 --- a/packages/plexus/src/DirectedGraph/DirectedGraph.tsx +++ b/packages/plexus/src/DirectedGraph/DirectedGraph.tsx @@ -305,29 +305,33 @@ export default class DirectedGraph extends React.PureComponent - {layoutGraph && haveEdges && ( - - - {this._renderEdges()} - - )} + {layoutGraph && + haveEdges && ( + + + {this._renderEdges()} + + )}
{this._renderVertices()}
- {zoomEnabled && minimapEnabled && layoutGraph && rootElm && ( - - )} + {zoomEnabled && + minimapEnabled && + layoutGraph && + rootElm && ( + + )} ); } diff --git a/packages/plexus/src/DirectedGraph/MiniMap.tsx b/packages/plexus/src/DirectedGraph/MiniMap.tsx index d42520cd7b..905e992458 100644 --- a/packages/plexus/src/DirectedGraph/MiniMap.tsx +++ b/packages/plexus/src/DirectedGraph/MiniMap.tsx @@ -36,9 +36,9 @@ const LENGTH_TARGET_PX = 80; function getMapSize(props: TProps) { const { contentHeight: ch, contentWidth: cw } = props; if (ch > cw) { - return { height: LENGTH_TARGET_PX, width: (LENGTH_TARGET_PX * cw) / ch }; + return { height: LENGTH_TARGET_PX, width: LENGTH_TARGET_PX * cw / ch }; } - return { height: (LENGTH_TARGET_PX * ch) / cw, width: LENGTH_TARGET_PX }; + return { height: LENGTH_TARGET_PX * ch / cw, width: LENGTH_TARGET_PX }; } function getViewTransform(props: TProps, displaySize: { width: number; height: number }) { diff --git a/packages/plexus/src/DirectedGraph/prop-factories/scaledStrokeWidth.tsx b/packages/plexus/src/DirectedGraph/prop-factories/scaledStrokeWidth.tsx index 8deec66192..fa0c45e0a6 100644 --- a/packages/plexus/src/DirectedGraph/prop-factories/scaledStrokeWidth.tsx +++ b/packages/plexus/src/DirectedGraph/prop-factories/scaledStrokeWidth.tsx @@ -39,7 +39,7 @@ export default function scaledStrokeWidth(graphState: TDirectedGraphState) { } else if (k < THRESHOLD_MAX) { props = PROPS_MAX; } else { - const strokeWidth = (STROKE_MIN + (STROKE_SPREAD * (THRESHOLD_MIN - k)) / THRESHOLD_SPREAD).toFixed(1); + const strokeWidth = (STROKE_MIN + STROKE_SPREAD * (THRESHOLD_MIN - k) / THRESHOLD_SPREAD).toFixed(1); props = cache[strokeWidth] || (cache[strokeWidth] = { style: { strokeWidth } }); } lastK = k; diff --git a/packages/plexus/src/DirectedGraph/transform-utils.tsx b/packages/plexus/src/DirectedGraph/transform-utils.tsx index 420ff987cd..befdf9d181 100644 --- a/packages/plexus/src/DirectedGraph/transform-utils.tsx +++ b/packages/plexus/src/DirectedGraph/transform-utils.tsx @@ -32,7 +32,7 @@ function boundValue(min: number, max: number, value: number) { function getFittedScale(width: number, height: number, viewWidth: number, viewHeight: number) { return Math.max( SCALE_MIN, - Math.min(((1 - SCALE_MARGIN) * viewWidth) / width, ((1 - SCALE_MARGIN) * viewHeight) / height, SCALE_MAX) + Math.min((1 - SCALE_MARGIN) * viewWidth / width, (1 - SCALE_MARGIN) * viewHeight / height, SCALE_MAX) ); } diff --git a/packages/plexus/src/LayoutManager/dot/convPlain.tsx b/packages/plexus/src/LayoutManager/dot/convPlain.tsx index cb67196e72..ae4779e8fd 100644 --- a/packages/plexus/src/LayoutManager/dot/convPlain.tsx +++ b/packages/plexus/src/LayoutManager/dot/convPlain.tsx @@ -70,10 +70,7 @@ function parseNumbers( function parseGraph(str: string, startIndex: number): { end: number; graph: TLayoutGraph } { // skip "graph " const i = startIndex + 6; - const { - values: [scale, width], - end: widthEnd, - } = parseNumbers(2, str, i); + const { values: [scale, width], end: widthEnd } = parseNumbers(2, str, i); const { value: height, end } = parseNumber(str, widthEnd + 1, '\n'); return { end, diff --git a/packages/plexus/src/LayoutManager/getLayout.tsx b/packages/plexus/src/LayoutManager/getLayout.tsx index b0f5e8b73b..06721347cf 100644 --- a/packages/plexus/src/LayoutManager/getLayout.tsx +++ b/packages/plexus/src/LayoutManager/getLayout.tsx @@ -61,13 +61,7 @@ function getVerticesValidity( let warn: TVerticesValidity | void; for (let i = 0; i < output.length; i++) { - const { - vertex: { key }, - height, - left, - top, - width, - } = output[i]; + const { vertex: { key }, height, left, top, width } = output[i]; const src = inputHash[String(key)]; if (!src) { return { validity: EValidity.Error, message: `Extra vertex found: ${key}` }; diff --git a/yarn.lock b/yarn.lock index 96c2e4b731..d88e2193b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7879,16 +7879,11 @@ lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -lodash@4.x, "lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1: +lodash@4.17.11, lodash@4.x, "lodash@>=3.5 <5", lodash@^3.10.0, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1: version "4.17.11" resolved "https://unpm.uberinternal.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== -lodash@^3.10.0: - version "3.10.1" - resolved "https://unpm.uberinternal.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" - integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y= - logfmt@^1.2.0: version "1.2.1" resolved "https://registry.yarnpkg.com/logfmt/-/logfmt-1.2.1.tgz#0e99838eb3a87fb6272d6d2b4fc327b95a29abee" @@ -9994,13 +9989,13 @@ qs@6.5.2, qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" -query-string@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb" +query-string@^6.3.0: + version "6.3.0" + resolved "https://unpm.uberinternal.com/query-string/-/query-string-6.3.0.tgz#41ae8a61e1213c80b182d5db6cf129e05af89fc5" + integrity sha512-jkpCkoHiAA2BYZvni5GieU3x860QDfkh2+M6bPnrYUywqOWbGwPq5VzntTS06ixX4GVHEiq2ZhlmGy/e9LQ3zA== dependencies: decode-uri-component "^0.2.0" - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" + strict-uri-encode "^2.0.0" querystring-es3@^0.2.0: version "0.2.1" @@ -10610,9 +10605,10 @@ react-redux@^5.0.6: react-is "^16.6.0" react-lifecycles-compat "^3.0.0" -react-router-dom@^4.1.2: +react-router-dom@^4.3.1: version "4.3.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6" + resolved "https://unpm.uberinternal.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6" + integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA== dependencies: history "^4.7.2" invariant "^2.2.4" @@ -11951,9 +11947,10 @@ stream-shift@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" -strict-uri-encode@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://unpm.uberinternal.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= string-convert@^0.2.0: version "0.2.1"