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}