Deduplicate tags for spans

Signed-off-by: Ruben Vargas <ruben.vp8510@gmail.com>

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

@@ -24,6 +24,7 @@ limitations under the License.
   color: inherit;
   display: block;
   padding: 0.25rem 0.5rem;
+  padding-left: 0;
 }
 
 .AccordianLogs--header:hover {

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

@@ -56,7 +56,7 @@ export default function AccordianLogs(props: AccordianLogsProps) {
   }
 
   return (
-    <div className="AccordianLogs">
+    <div className="AccordianLogs ub-mb1">
       <HeaderComponent className={cx('AccordianLogs--header', { 'is-open': isOpen })} {...headerProps}>
         {arrow} <strong>Logs</strong> ({logs.length})
       </HeaderComponent>

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

@@ -0,0 +1,40 @@
+/*
+Copyright (c) 2017 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;
+}
+
+.AccordianText--header.is-empty {
+  background: none;
+  cursor: initial;
+}
+
+.AccordianText--header.is-high-contrast:not(.is-empty):hover {
+  background: #ddd;
+}
+
+.AccordianText--emptyIcon {
+  color: #aaa;
+}

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

@@ -0,0 +1,63 @@
+// Copyright (c) 2017 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 IoIosWarning from 'react-icons/lib/io/android-warning';
+
+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 table instead of the summarywhen it is expanded', () => {
+    wrapper.setProps({ isOpen: true });
+    const table = wrapper.find(TextList);
+    expect(table.length).toBe(1);
+    expect(table.prop('data')).toBe(warnings);
+  });
+
+  it('renders prefix icon', () => {
+    const prefixIcon = <IoIosWarning />;
+    wrapper.setProps({ isOpen: true, prefixIcon });
+    expect(wrapper.find(IoIosWarning).length).toBe(1);
+  });
+});

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

@@ -0,0 +1,75 @@
+// Copyright (c) 2017 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[];
+  highContrast?: boolean;
+  interactive?: boolean;
+  isOpen: boolean;
+  label: string;
+  onToggle?: null | (() => void);
+  prefixIcon?: null | React.ReactElement;
+};
+
+export default function AccordianText(props: AccordianTextProps) {
+  const { className, data, highContrast, interactive, isOpen, label, onToggle, prefixIcon } = 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={cx(className, 'u-tx-ellipsis')}>
+      <div
+        className={cx('AccordianText--header', {
+          'is-empty': isEmpty,
+          'is-high-contrast': highContrast,
+        })}
+        {...headerProps}
+      >
+        {arrow}
+        {React.isValidElement(prefixIcon) && prefixIcon}
+        <strong>
+          {label}
+          {isOpen || ':'}
+        </strong>
+      </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,40 @@
+/*
+Copyright (c) 2017 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 {
+  background: #fff;
+  border: 1px solid #ddd;
+  margin-bottom: 0.7em;
+  max-height: 450px;
+  overflow: auto;
+}
+
+.TextList-body {
+  vertical-align: baseline;
+}
+
+.TextList--row > td {
+  padding: 0.25rem 0.5rem;
+}
+
+.TextList-row:nth-child(2n) > td {
+  background: #f5f5f5;
+}
+
+.TextList--row > td {
+  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) 2017 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('tr');
+    expect(trs.length).toBe(data.length);
+  });
+});

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

@@ -0,0 +1,42 @@
+// Copyright (c) 2017 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">
+      <table className="u-width-100">
+        <tbody className="TextList--body">
+          {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
+              <tr className="TextList--row" key={`${i}`}>
+                <td>{row}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -40,3 +40,10 @@ limitations under the License.
 .SpanDetail--debugValue:hover {
   color: #333;
 }
+
+.SpanDetail--warnIcon {
+  background: transparent;
+  color: #ffa500;
+  font-size: 1em;
+  margin-right: 0.2rem;
+}