removes listing dupe tags from UI (only if both key & value are the s…

…ame (#1867)

* removes listing dupe tags from UI (only if both key and value are the same)

zipkin-ui/js/component_ui/spanPanel.js

@@ -17,6 +17,15 @@ function escapeHtml(string) {
   return String(string).replace(/[&<>"'`=\/]/g, s => entityMap[s]);
 }
 
+export function isDupeBinaryAnnotation(tagMap, anno) {
+  if (!tagMap[anno.key]) {
+    tagMap[anno.key] = anno.value; // eslint-disable-line no-param-reassign
+  } else if (tagMap[anno.key] === anno.value) {
+    return true;
+  }
+  return false;
+}
+
 // Annotation values that contain the word "error" hint of a transient error.
 // This adds a class when that's the case.
 export function maybeMarkTransientError(row, anno) {
@@ -62,6 +71,7 @@ export default component(function spanPanel() {
 
   this.show = function(e, span) {
     const self = this;
+    const tagMap = {};
 
     this.$node.find('.modal-title').text(
       `${span.serviceName}.${span.spanName}: ${span.durationStr}`);
@@ -91,6 +101,7 @@ export default component(function spanPanel() {
 
     const $binAnnoBody = this.$node.find('#binaryAnnotations tbody').text('');
     $.each((span.binaryAnnotations || []), (i, anno) => {
+      if (isDupeBinaryAnnotation(tagMap, anno)) return;
       const $row = self.$binaryAnnotationTemplate.clone();
       if (anno.key === Constants.ERROR) {
         $row.addClass('anno-error-critical');

zipkin-ui/test/component_ui/spanPanel.test.js

@@ -2,7 +2,8 @@ import {Constants} from '../../js/component_ui/traceConstants';
 import {
   maybeMarkTransientError,
   formatAnnotationValue,
-  formatBinaryAnnotationValue
+  formatBinaryAnnotationValue,
+  isDupeBinaryAnnotation
 } from '../../js/component_ui/spanPanel';
 import {endpoint, annotation} from './traceTestHelpers';
 
@@ -121,3 +122,19 @@ describe('formatBinaryAnnotationValue', () => {
     );
   });
 });
+
+describe('isDupeBinaryAnnotation', () => {
+  const tagMap = {};
+
+  it('should return false on new key', () => {
+    isDupeBinaryAnnotation(tagMap, {key: 'key-1', value: 'value-1'}).should.equal(false);
+  });
+
+  it('should return true on dupe key with exact matched value', () => {
+    isDupeBinaryAnnotation(tagMap, {key: 'key-1', value: 'value-1'}).should.equal(true);
+  });
+
+  it('should return false on dupe key with different value', () => {
+    isDupeBinaryAnnotation(tagMap, {key: 'key-1', value: 'value-2'}).should.equal(false);
+  });
+});