Deduplicate tags for spans

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.css

@@ -17,6 +17,7 @@ limitations under the License.
 .AccordianLogs {
   border: 1px solid #d8d8d8;
   position: relative;
+  margin-bottom: 0.25rem;
 }
 
 .AccordianLogs--header {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.css

@@ -0,0 +1,27 @@
+/*
+Copyright (c) 2019 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.AccordianText--header {
+  cursor: pointer;
+  overflow: hidden;
+  padding: 0.25em 0.1em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.AccordianText--header:hover {
+  background: #e8e8e8;
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js

@@ -0,0 +1,55 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import AccordianText from './AccordianText';
+import TextList from './TextList';
+
+const warnings = ['Duplicated tag', 'Duplicated spanId'];
+
+describe('<AccordianText>', () => {
+  let wrapper;
+
+  const props = {
+    compact: false,
+    data: warnings,
+    highContrast: false,
+    isOpen: false,
+    label: 'le-label',
+    onToggle: jest.fn(),
+  };
+
+  beforeEach(() => {
+    wrapper = shallow(<AccordianText {...props} />);
+  });
+
+  it('renders without exploding', () => {
+    expect(wrapper).toBeDefined();
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders the label', () => {
+    const header = wrapper.find(`.AccordianText--header > strong`);
+    expect(header.length).toBe(1);
+    expect(header.text()).toBe(props.label);
+  });
+
+  it('renders the content when it is expanded', () => {
+    wrapper.setProps({ isOpen: true });
+    const content = wrapper.find(TextList);
+    expect(content.length).toBe(1);
+    expect(content.prop('data')).toBe(warnings);
+  });
+});

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import cx from 'classnames';
+import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
+import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
+import TextList from './TextList';
+import { TNil } from '../../../../types';
+
+import './AccordianText.css';
+
+type AccordianTextProps = {
+  className?: string | TNil;
+  data: string[];
+  headerClassName?: string | TNil;
+  highContrast?: boolean;
+  interactive?: boolean;
+  isOpen: boolean;
+  label: React.ReactNode;
+  onToggle?: null | (() => void);
+};
+
+export default function AccordianText(props: AccordianTextProps) {
+  const { className, data, headerClassName, highContrast, interactive, isOpen, label, onToggle } = props;
+  const isEmpty = !Array.isArray(data) || !data.length;
+  const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
+  let arrow: React.ReactNode | null = null;
+  let headerProps: Object | null = null;
+  if (interactive) {
+    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+    headerProps = {
+      'aria-checked': isOpen,
+      onClick: isEmpty ? null : onToggle,
+      role: 'switch',
+    };
+  }
+  return (
+    <div className={className || ''}>
+      <div
+        className={cx('AccordianText--header', headerClassName, {
+          'is-empty': isEmpty,
+          'is-high-contrast': highContrast,
+          'is-open': isOpen,
+        })}
+        {...headerProps}
+      >
+        {arrow} <strong>{label}</strong> ({data.length})
+      </div>
+      {isOpen && <TextList data={data} />}
+    </div>
+  );
+}
+
+AccordianText.defaultProps = {
+  className: null,
+  highContrast: false,
+  interactive: true,
+  onToggle: null,
+};

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/DetailState.tsx

@@ -21,11 +21,14 @@ export default class DetailState {
   isTagsOpen: boolean;
   isProcessOpen: boolean;
   logs: { isOpen: boolean; openedItems: Set<Log> };
+  isWarningsOpen: boolean;
 
   constructor(oldState?: DetailState) {
-    const { isTagsOpen, isProcessOpen, logs }: DetailState | Record<string, undefined> = oldState || {};
+    const { isTagsOpen, isProcessOpen, isWarningsOpen, logs }: DetailState | Record<string, undefined> =
+      oldState || {};
     this.isTagsOpen = Boolean(isTagsOpen);
     this.isProcessOpen = Boolean(isProcessOpen);
+    this.isWarningsOpen = Boolean(isWarningsOpen);
     this.logs = {
       isOpen: Boolean(logs && logs.isOpen),
       openedItems: logs && logs.openedItems ? new Set(logs.openedItems) : new Set(),
@@ -44,6 +47,12 @@ export default class DetailState {
     return next;
   }
 
+  toggleWarnings() {
+    const next = new DetailState(this);
+    next.isWarningsOpen = !this.isWarningsOpen;
+    return next;
+  }
+
   toggleLogs() {
     const next = new DetailState(this);
     next.logs.isOpen = !this.logs.isOpen;

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.css

@@ -0,0 +1,36 @@
+/*
+Copyright (c) 2019 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.TextList {
+  max-height: 450px;
+  overflow: auto;
+}
+
+.TextList--List {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.TextList--List > li:nth-child(2n) {
+  background: #f5f5f5;
+}
+
+.TextList--List > li {
+  padding: 0.25rem 0.5rem;
+  vertical-align: top;
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.test.js

@@ -0,0 +1,37 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import TextList from './TextList';
+
+describe('<TextList>', () => {
+  let wrapper;
+
+  const data = [{ key: 'span.kind', value: 'client' }, { key: 'omg', value: 'mos-def' }];
+
+  beforeEach(() => {
+    wrapper = shallow(<TextList data={data} />);
+  });
+
+  it('renders without exploding', () => {
+    expect(wrapper).toBeDefined();
+    expect(wrapper.find('.TextList').length).toBe(1);
+  });
+
+  it('renders a table row for each data element', () => {
+    const trs = wrapper.find('li');
+    expect(trs.length).toBe(data.length);
+  });
+});

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+
+import './TextList.css';
+
+type TextListProps = {
+  data: string[];
+};
+
+export default function TextList(props: TextListProps) {
+  const { data } = props;
+  return (
+    <div className="TextList u-simple-scrollbars">
+      <ul className="TextList--List ">
+        {data.map((row, i) => {
+          return (
+            // `i` is necessary in the key because row.key can repeat
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={`${i}`}>{row}</li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css

@@ -40,3 +40,24 @@ limitations under the License.
 .SpanDetail--debugValue:hover {
   color: #333;
 }
+.AccordianWarnings {
+  background: #fafafa;
+  border: 1px solid #e4e4e4;
+  margin-bottom: 0.25rem;
+}
+.AccordianWarnings--header {
+  background: #fff7e6;
+  padding: 0.25rem 0.5rem;
+}
+
+.AccordianWarnings--header:hover {
+  background: #ffe7ba;
+}
+
+.AccordianWarnings--header.is-open {
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.AccordianWarnings--label {
+  color: #d36c08;
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.test.js

@@ -46,6 +46,7 @@ describe('<SpanDetail>', () => {
     logsToggle: jest.fn(),
     processToggle: jest.fn(),
     tagsToggle: jest.fn(),
+    warningsToggle: jest.fn(),
   };
   span.logs = [
     {
@@ -58,6 +59,8 @@ describe('<SpanDetail>', () => {
     },
   ];
 
+  span.warnings = ['Warning 1', 'Warning 2'];
+
   beforeEach(() => {
     formatDuration.mockReset();
     props.tagsToggle.mockReset();
@@ -120,6 +123,13 @@ describe('<SpanDetail>', () => {
     expect(props.logItemToggle).toHaveBeenLastCalledWith(span.spanID, somethingUniq);
   });
 
+  it('renders the warnings', () => {
+    const warningElm = wrapper.find({ data: span.warnings });
+    expect(warningElm.length).toBe(1);
+    warningElm.simulate('toggle');
+    expect(props.warningsToggle).toHaveBeenLastCalledWith(span.spanID);
+  });
+
   it('renders CopyIcon with deep link URL', () => {
     expect(
       wrapper