Add warning accordian in span details

jaegertracing · May 4, 2019 · 28d047f · 28d047f
1 parent dcfa684
commit 28d047f
Show file tree

Hide file tree

Showing 14 changed files with 250 additions and 23 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.css b/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 {

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/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>

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.css b/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;
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/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,
+};
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/DetailState.tsx b/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;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.css b/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.
+*/
+
+.TextListTable {
+  background: #fff;
+  border: 1px solid #ddd;
+  margin-bottom: 0.7em;
+  max-height: 450px;
+  overflow: auto;
+}
+
+.TextListTable--body {
+  vertical-align: baseline;
+}
+
+.TextListTable--row > td {
+  padding: 0.25rem 0.5rem;
+}
+
+.TextListTable--row:nth-child(2n) > td {
+  background: #f5f5f5;
+}
+
+.TextListTable--row > td {
+  padding: 0.25rem 0.5rem;
+  vertical-align: top;
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.tsx b/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="TextListTable u-simple-scrollbars">
+      <table className="u-width-100">
+        <tbody className="TextListTable--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="TextListTable--row" key={`${i}`}>
+                <td>{row}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </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
@@ -44,9 +44,6 @@ limitations under the License.
 .SpanDetail--warnIcon {
   background: transparent;
   color: #ffa500;
-  font-size: 1.3em;
-  margin-right: 0.25rem;
-  padding: 1px;
-  display: block;
-  float: right;
+  font-size: 1em;
+  margin-right: 0.2rem;
 }
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx
@@ -13,11 +13,12 @@
 // limitations under the License.
 
 import React from 'react';
-import { Divider, Tooltip } from 'antd';
+import { Divider } from 'antd';
 import IoIosWarning from 'react-icons/lib/io/android-warning';
 
 import AccordianKeyValues from './AccordianKeyValues';
 import AccordianLogs from './AccordianLogs';
+import AccordianText from './AccordianText';
 import DetailState from './DetailState';
 import { formatDuration } from '../utils';
 import CopyIcon from '../../../common/CopyIcon';
@@ -37,6 +38,7 @@ type SpanDetailProps = {
   span: Span;
   tagsToggle: (spanID: string) => void;
   traceStartTime: number;
+  warningsToggle: (spanID: string) => void;
 };
 
 export default function SpanDetail(props: SpanDetailProps) {
@@ -49,9 +51,10 @@ export default function SpanDetail(props: SpanDetailProps) {
     span,
     tagsToggle,
     traceStartTime,
+    warningsToggle,
   } = props;
-  const { isTagsOpen, isProcessOpen, logs: logsState } = detailState;
-  const { operationName, process, duration, relativeStartTime, spanID, logs, tags } = span;
+  const { isTagsOpen, isProcessOpen, logs: logsState, isWarningsOpen } = detailState;
+  const { operationName, process, duration, relativeStartTime, spanID, logs, tags, warnings } = span;
   const overviewItems = [
     {
       key: 'svc',
@@ -70,11 +73,12 @@ export default function SpanDetail(props: SpanDetailProps) {
     },
   ];
   const deepLinkCopyText = `${window.location.origin}${window.location.pathname}?uiFind=${spanID}`;
-  const duplicatedTagsIcon = span.hasDuplicatedTags ? (
+  /* const duplicatedTagsIcon = span.hasDuplicatedTags ? (
     <Tooltip placement="left" title="Duplicated tags found">
       <IoIosWarning className="SpanDetail--warnIcon" />
     </Tooltip>
   ) : null;
+*/
 
   return (
     <div>
@@ -95,7 +99,6 @@ export default function SpanDetail(props: SpanDetailProps) {
             linksGetter={linksGetter}
             isOpen={isTagsOpen}
             onToggle={() => tagsToggle(spanID)}
-            rightIcon={duplicatedTagsIcon}
           />
           {process.tags && (
             <AccordianKeyValues
@@ -120,6 +123,17 @@ export default function SpanDetail(props: SpanDetailProps) {
               timestamp={traceStartTime}
             />
           )}
+        {warnings &&
+          warnings.length > 0 && (
+            <AccordianText
+              className="AccordianWarnings ub-mb1"
+              label={`Warnings (${warnings.length})`}
+              data={warnings}
+              isOpen={isWarningsOpen}
+              onToggle={() => warningsToggle(spanID)}
+              prefixIcon={<IoIosWarning className="SpanDetail--warnIcon" />}
+            />
+          )}
         <small className="SpanDetail--debugInfo">
           <span className="SpanDetail--debugLabel" data-label="SpanID:" /> {spanID}
           <CopyIcon

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx
@@ -32,6 +32,7 @@ type SpanDetailRowProps = {
   logItemToggle: (spanID: string, log: Log) => void;
   logsToggle: (spanID: string) => void;
   processToggle: (spanID: string) => void;
+  warningsToggle: (spanID: string) => void;
   span: Span;
   tagsToggle: (spanID: string) => void;
   traceStartTime: number;
@@ -55,6 +56,7 @@ export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProp
       logItemToggle,
       logsToggle,
       processToggle,
+      warningsToggle,
       span,
       tagsToggle,
       traceStartTime,
@@ -81,6 +83,7 @@ export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProp
               logItemToggle={logItemToggle}
               logsToggle={logsToggle}
               processToggle={processToggle}
+              warningsToggle={warningsToggle}
               span={span}
               tagsToggle={tagsToggle}
               traceStartTime={traceStartTime}

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -61,6 +61,7 @@ type TDispatchProps = {
   clearShouldScrollToFirstUiFindMatch: () => void;
   detailLogItemToggle: (spanID: string, log: Log) => void;
   detailLogsToggle: (spanID: string) => void;
+  detailWarningsToggle: (spanID: string) => void;
   detailProcessToggle: (spanID: string) => void;
   detailTagsToggle: (spanID: string) => void;
   detailToggle: (spanID: string) => void;
@@ -371,6 +372,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
       detailLogItemToggle,
       detailLogsToggle,
       detailProcessToggle,
+      detailWarningsToggle,
       detailStates,
       detailTagsToggle,
       detailToggle,
@@ -393,6 +395,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
           logItemToggle={detailLogItemToggle}
           logsToggle={detailLogsToggle}
           processToggle={detailProcessToggle}
+          warningsToggle={detailWarningsToggle}
           span={span}
           tagsToggle={detailTagsToggle}
           traceStartTime={trace.startTime}