From 9931959d8ef032d4b95c39231f2dee127c84f673 Mon Sep 17 00:00:00 2001 From: David Yeghshatyan <6davidy@gmail.com> Date: Mon, 1 Oct 2018 11:27:25 -0400 Subject: [PATCH] Span Search - Highlight search results (#238) * Add result count, navigation and clear buttons Signed-off-by: Davit Yeghshatyan * Correct imports Signed-off-by: Davit Yeghshatyan * Move and delete files Signed-off-by: Davit Yeghshatyan * Review fixes Signed-off-by: Davit Yeghshatyan * Fix TracePageHeader test Signed-off-by: Davit Yeghshatyan * Lighten buttons when disabled Signed-off-by: Davit Yeghshatyan * Review fixes Signed-off-by: Davit Yeghshatyan * Fix tests Signed-off-by: Davit Yeghshatyan * Add shortcuts Signed-off-by: Davit Yeghshatyan * Fix merge changes Signed-off-by: Davit Yeghshatyan * Fix TracePageHeader and TracePageSearchBar tests Signed-off-by: Davit Yeghshatyan * Delay TracePageHeader testing until release of Enzyme v3.5.0 Signed-off-by: Davit Yeghshatyan * Highlight matching spans Signed-off-by: Davit Yeghshatyan * Highlight span-name-wrapper Signed-off-by: Davit Yeghshatyan Signed-off-by: vvvprabhakar --- .../TraceTimelineViewer/SpanBarRow.css | 30 +++++++++++++++++-- .../TraceTimelineViewer/SpanBarRow.js | 8 ++--- .../TraceTimelineViewer/SpanDetailRow.css | 4 --- .../TraceTimelineViewer/SpanDetailRow.js | 4 +-- .../VirtualizedTraceView.js | 7 ++--- .../VirtualizedTraceView.test.js | 3 +- 6 files changed, 36 insertions(+), 20 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css index 8e21e60328..e67045c64e 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -.span-row.is-filtered-out { - opacity: 0.2; +.span-row.is-matching-filter { + background-color: #fffce4; } .span-name-column { @@ -45,6 +45,10 @@ limitations under the License. display: flex; } +.span-name-wrapper.is-matching-filter { + background-color: #fffce4; +} + .span-name-wrapper:hover { border-right: 1px solid #bbb; float: left; @@ -57,11 +61,19 @@ limitations under the License. background: linear-gradient(90deg, #fafafa, #f8f8f8 75%, #eee); } +.span-row.is-matching-filter:hover .span-name-wrapper { + background: linear-gradient(90deg, #fff5e1, #fff5e1 75%, #ffe6c9); +} + .span-row.is-expanded .span-name-wrapper { background: #f0f0f0; outline: 1px solid #ddd; } +.span-row.is-expanded .span-name-wrapper.is-matching-filter { + background: #fff3d7; +} + .span-name { color: #000; cursor: pointer; @@ -130,15 +142,29 @@ limitations under the License. outline: 1px solid #ddd; } +.span-row.is-matching-filter:hover .span-view { + background-color: #fff3d7; + outline: 1px solid #ddd; +} + .span-row.is-expanded .span-view { background: #f8f8f8; outline: 1px solid #ddd; } +.span-row.is-expanded.is-matching-filter .span-view { + background: #fff3d7; + outline: 1px solid #ddd; +} + .span-row.is-expanded:hover .span-view { background: #eee; } +.span-row.is-expanded.is-matching-filter:hover .span-view { + background: #ffeccf; +} + .span-row.clipping-right .span-view::before { content: ' '; height: 100%; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js index 55adc52ef3..6157853821 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js @@ -32,7 +32,7 @@ type SpanBarRowProps = { depth: number, isChildrenExpanded: boolean, isDetailExpanded: boolean, - isFilteredOut: boolean, + isMatchingFilter: boolean, isParent: boolean, label: string, onDetailToggled: string => void, @@ -85,7 +85,7 @@ export default class SpanBarRow extends React.PureComponent { depth, isChildrenExpanded, isDetailExpanded, - isFilteredOut, + isMatchingFilter, isParent, label, numTicks, @@ -113,11 +113,11 @@ export default class SpanBarRow extends React.PureComponent { span-row ${className || ''} ${isDetailExpanded ? 'is-expanded' : ''} - ${isFilteredOut ? 'is-filtered-out' : ''} + ${isMatchingFilter ? 'is-matching-filter' : ''} `} > -
+
void, - isFilteredOut: boolean, linksGetter: ?(Span, KeyValuePair[], number) => Link[], logItemToggle: (string, Log) => void, logsToggle: string => void, @@ -56,7 +55,6 @@ export default class SpanDetailRow extends React.PureComponent + diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js index d74df04ad4..026b7f3706 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js @@ -276,7 +276,7 @@ export class VirtualizedTraceViewImpl extends React.PureComponent ', () => { depth={span.depth} isChildrenExpanded isDetailExpanded={false} - isFilteredOut={false} + isMatchingFilter={false} isParent={span.hasChildren} numTicks={5} onDetailToggled={props.detailToggle} @@ -335,7 +335,6 @@ describe('', () => { columnDivision={props.spanNameColumnWidth} onDetailToggled={props.detailToggle} detailState={detailState} - isFilteredOut={false} logItemToggle={props.detailLogItemToggle} logsToggle={props.detailLogsToggle} processToggle={props.detailProcessToggle}