Display warning on duplicated tags

jaegertracing · May 3, 2019 · 3b4188d · 3b4188d
1 parent 7d6621a
commit 3b4188d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/.../jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/.../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 (
     <div className={cx(className, 'u-tx-ellipsis')}>
       <div
@@ -90,6 +104,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
           {isOpen || ':'}
         </strong>
         {!isOpen && <KeyValuesSummary data={data} />}
+        {rightIcon}
       </div>
       {isOpen && <KeyValuesTable data={data} linksGetter={linksGetter} />}
     </div>

diff --git 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
@@ -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 ? (
+    <Tooltip placement="left" title="Duplicated tags found">
+      <IoIosWarning className="SpanDetail--warnIcon" />
+    </Tooltip>
+  ) : null;
 
   return (
     <div>
@@ -89,6 +95,7 @@ export default function SpanDetail(props: SpanDetailProps) {
             linksGetter={linksGetter}
             isOpen={isTagsOpen}
             onToggle={() => tagsToggle(spanID)}
+            rightIcon={duplicatedTagsIcon}
           />
           {process.tags && (
             <AccordianKeyValues