From ba50e96544c8cbabd5f5e5bce7a0b6e9e4bbb2aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= Date: Wed, 22 Jul 2020 16:14:34 +0200 Subject: [PATCH] Jaeger: Add stack trace to span detail row (#26427) * Add stack trace to span detail row * Modify accordian text not to have a whitespace * Modify stackTrace to stackTraces * Modify AccordianText ti get text component as prop * Fix typecheck and test failure * Span details text area do not wrap line --- packages/grafana-data/src/types/trace.ts | 1 + packages/jaeger-ui-components/package.json | 2 + .../SpanDetail/AccordianText.test.js | 4 +- .../SpanDetail/AccordianText.tsx | 25 ++++++++-- .../SpanDetail/DetailState.tsx | 9 ++++ .../TraceTimelineViewer/SpanDetail/index.tsx | 47 ++++++++++++++++++- .../src/TraceTimelineViewer/SpanDetailRow.tsx | 3 ++ .../VirtualizedTraceView.tsx | 3 ++ .../src/TraceTimelineViewer/index.tsx | 1 + packages/jaeger-ui-components/tsconfig.json | 5 +- .../features/explore/TraceView/TraceView.tsx | 2 + .../explore/TraceView/useDetailState.ts | 7 ++- 12 files changed, 98 insertions(+), 11 deletions(-) diff --git a/packages/grafana-data/src/types/trace.ts b/packages/grafana-data/src/types/trace.ts index 1d5ca440394..af43724bc18 100644 --- a/packages/grafana-data/src/types/trace.ts +++ b/packages/grafana-data/src/types/trace.ts @@ -57,6 +57,7 @@ export type TraceSpanData = { tags?: TraceKeyValuePair[]; references?: TraceSpanReference[]; warnings?: string[] | null; + stackTraces?: string[]; flags: number; }; diff --git a/packages/jaeger-ui-components/package.json b/packages/jaeger-ui-components/package.json index 165583b495d..e60aad95178 100644 --- a/packages/jaeger-ui-components/package.json +++ b/packages/jaeger-ui-components/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@grafana/data": "7.2.0-pre.0", + "@grafana/ui": "7.2.0-pre.0", "@types/classnames": "^2.2.7", "@types/deep-freeze": "^0.1.1", "@types/hoist-non-react-statics": "^3.3.1", @@ -22,6 +23,7 @@ "@types/moment": "^2.13.0", "@types/react-icons": "2.2.7", "@types/recompose": "^0.30.7", + "@types/slate-react": "0.22.5", "chance": "^1.0.10", "classnames": "^2.2.5", "combokeys": "^3.0.0", diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js index fccb6c4988d..ce48a3ce162 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js @@ -13,7 +13,7 @@ // limitations under the License. import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import AccordianText from './AccordianText'; import TextList from './TextList'; @@ -32,7 +32,7 @@ describe('', () => { }; beforeEach(() => { - wrapper = shallow(); + wrapper = mount(); }); it('renders without exploding', () => { diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx index 07782cf85fa..5a8c381a25c 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx @@ -40,17 +40,31 @@ const getStyles = createStyle((theme: Theme) => { type AccordianTextProps = { className?: string | TNil; - data: string[]; headerClassName?: string | TNil; + data: string[]; highContrast?: boolean; interactive?: boolean; isOpen: boolean; - label: React.ReactNode; + label: React.ReactNode | string; onToggle?: null | (() => void); + TextComponent?: React.ElementType<{ data: string[] }>; }; +function DefaultTextComponent({ data }: { data: string[] }) { + return ; +} + export default function AccordianText(props: AccordianTextProps) { - const { className, data, headerClassName, interactive, isOpen, label, onToggle } = props; + const { + className, + data, + headerClassName, + interactive, + isOpen, + label, + onToggle, + TextComponent = DefaultTextComponent, + } = props; const isEmpty = !Array.isArray(data) || !data.length; const accordianKeyValuesStyles = getAccordianKeyValuesStyles(useTheme()); const iconCls = cx(uAlignIcon, { [accordianKeyValuesStyles.emptyIcon]: isEmpty }); @@ -68,9 +82,10 @@ export default function AccordianText(props: AccordianTextProps) { return (
- {arrow} {label} ({data.length}) + {arrow} + {label} ({data.length})
- {isOpen && } + {isOpen && }
); } diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/DetailState.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/DetailState.tsx index 055663bfb68..f56153a25c6 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/DetailState.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/DetailState.tsx @@ -22,6 +22,7 @@ export default class DetailState { isProcessOpen: boolean; logs: { isOpen: boolean; openedItems: Set }; isWarningsOpen: boolean; + isStackTracesOpen: boolean; isReferencesOpen: boolean; constructor(oldState?: DetailState) { @@ -30,12 +31,14 @@ export default class DetailState { isProcessOpen, isReferencesOpen, isWarningsOpen, + isStackTracesOpen, logs, }: DetailState | Record = oldState || {}; this.isTagsOpen = Boolean(isTagsOpen); this.isProcessOpen = Boolean(isProcessOpen); this.isReferencesOpen = Boolean(isReferencesOpen); this.isWarningsOpen = Boolean(isWarningsOpen); + this.isStackTracesOpen = Boolean(isStackTracesOpen); this.logs = { isOpen: Boolean(logs && logs.isOpen), openedItems: logs && logs.openedItems ? new Set(logs.openedItems) : new Set(), @@ -66,6 +69,12 @@ export default class DetailState { return next; } + toggleStackTraces() { + const next = new DetailState(this); + next.isStackTracesOpen = !this.isStackTracesOpen; + return next; + } + toggleLogs() { const next = new DetailState(this); next.logs.isOpen = !this.logs.isOpen; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx index 7ca049788cf..e24642fe8b2 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx @@ -30,6 +30,7 @@ import AccordianReferences from './AccordianReferences'; import { autoColor, createStyle, Theme, useTheme } from '../../Theme'; import { UIDivider } from '../../uiElementsContext'; import { ubFlex, ubFlexAuto, ubItemsCenter, ubM0, ubMb1, ubMy1, ubTxRightAlign } from '../../uberUtilityStyles'; +import { TextArea } from '@grafana/ui'; const getStyles = createStyle((theme: Theme) => { return { @@ -94,6 +95,10 @@ const getStyles = createStyle((theme: Theme) => { label: AccordianWarningsLabel; color: ${autoColor(theme, '#d36c08')}; `, + Textarea: css` + word-break: break-all; + white-space: pre; + `, }; }); @@ -107,6 +112,7 @@ type SpanDetailProps = { tagsToggle: (spanID: string) => void; traceStartTime: number; warningsToggle: (spanID: string) => void; + stackTracesToggle: (spanID: string) => void; referencesToggle: (spanID: string) => void; focusSpan: (uiFind: string) => void; }; @@ -122,11 +128,30 @@ export default function SpanDetail(props: SpanDetailProps) { tagsToggle, traceStartTime, warningsToggle, + stackTracesToggle, referencesToggle, focusSpan, } = props; - const { isTagsOpen, isProcessOpen, logs: logsState, isWarningsOpen, isReferencesOpen } = detailState; - const { operationName, process, duration, relativeStartTime, spanID, logs, tags, warnings, references } = span; + const { + isTagsOpen, + isProcessOpen, + logs: logsState, + isWarningsOpen, + isReferencesOpen, + isStackTracesOpen, + } = detailState; + const { + operationName, + process, + duration, + relativeStartTime, + spanID, + logs, + tags, + warnings, + references, + stackTraces, + } = span; const overviewItems = [ { key: 'svc', @@ -195,6 +220,24 @@ export default function SpanDetail(props: SpanDetailProps) { onToggle={() => warningsToggle(spanID)} /> )} + {stackTraces && stackTraces.length && ( + ( +