diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx index 76256f2a06..839958a640 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx @@ -33,6 +33,7 @@ type AccordianKeyValuesProps = { label: string; linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil; onToggle?: null | (() => void); + rightIcon?: null | React.ReactElement; }; // export for tests @@ -61,7 +62,17 @@ KeyValuesSummary.defaultProps = { }; export default function AccordianKeyValues(props: AccordianKeyValuesProps) { - const { className, data, highContrast, interactive, isOpen, label, linksGetter, onToggle } = props; + const { + className, + data, + highContrast, + interactive, + isOpen, + label, + linksGetter, + onToggle, + rightIcon: rightIconProp, + } = props; const isEmpty = !Array.isArray(data) || !data.length; const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty }); let arrow: React.ReactNode | null = null; @@ -74,7 +85,10 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) { role: 'switch', }; } - + let rightIcon = null; + if (rightIconProp && React.isValidElement(rightIconProp)) { + rightIcon = rightIconProp; + } return (
{!isOpen && } + {rightIcon}
{isOpen && }
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css index f7c0b19e57..7f28ddd27d 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css @@ -40,3 +40,13 @@ limitations under the License. .SpanDetail--debugValue:hover { color: #333; } + +.SpanDetail--warnIcon { + background: transparent; + color: #ffa500; + font-size: 1.3em; + margin-right: 0.25rem; + padding: 1px; + display: block; + float: right; +} diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx index 6ff2afb1cf..f36d45cb41 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx @@ -14,6 +14,7 @@ import React from 'react'; import { Divider, Tooltip } from 'antd'; +import IoIosWarning from 'react-icons/lib/io/android-warning'; import AccordianKeyValues from './AccordianKeyValues'; import AccordianLogs from './AccordianLogs'; @@ -22,7 +23,7 @@ import { formatDuration } from '../utils'; import LabeledList from '../../../common/LabeledList'; import { TNil } from '../../../../types'; -import { Log, Span, KeyValuePair, Link } from '../../../../types/trace'; +import { KeyValuePair, Link, Log, Span } from '../../../../types/trace'; import './index.css'; @@ -69,6 +70,11 @@ export default function SpanDetail(props: SpanDetailProps) { value: formatDuration(relativeStartTime), }, ]; + const duplicatedTagsIcon = span.hasDuplicatedTags ? ( + + + + ) : null; return (
@@ -89,6 +95,7 @@ export default function SpanDetail(props: SpanDetailProps) { linksGetter={linksGetter} isOpen={isTagsOpen} onToggle={() => tagsToggle(spanID)} + rightIcon={duplicatedTagsIcon} /> {process.tags && (