Trace View: Show number of child spans in span details view (#44393)

* package(jaegar): show no of child spans in view

Signed-off-by: tharun <rajendrantharun@live.com>



Co-authored-by: Connor Lindsey <cblindsey3@gmail.com>

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx

@@ -29,20 +29,21 @@ import { SpanLinkFunc, TNil } from '../../types';
 import { TraceKeyValuePair, TraceLink, TraceLog, TraceSpan, TraceSpanReference } from '../../types/trace';
 import AccordianReferences from './AccordianReferences';
 import { autoColor } from '../../Theme';
+import { uAlignIcon, ubM0, ubMb1, ubMy1, ubTxRightAlign } from '../../uberUtilityStyles';
 import { Divider } from '../../common/Divider';
-import {
-  uAlignIcon,
-  ubFlex,
-  ubFlexAuto,
-  ubItemsCenter,
-  ubM0,
-  ubMb1,
-  ubMy1,
-  ubTxRightAlign,
-} from '../../uberUtilityStyles';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    header: css`
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0 1rem;
+      margin-bottom: 0.25rem;
+    `,
+    listWrapper: css`
+      overflow: hidden;
+    `,
     debugInfo: css`
       label: debugInfo;
       display: block;
@@ -173,6 +174,15 @@ export default function SpanDetail(props: SpanDetailProps) {
       label: 'Start Time:',
       value: formatDuration(relativeStartTime),
     },
+    ...(span.childSpanCount > 0
+      ? [
+          {
+            key: 'child_count',
+            label: 'Child Count:',
+            value: span.childSpanCount,
+          },
+        ]
+      : []),
   ];
   const styles = useStyles2(getStyles);
   const link = createSpanLink?.(span);
@@ -180,9 +190,11 @@ export default function SpanDetail(props: SpanDetailProps) {
 
   return (
     <div>
-      <div className={cx(ubFlex, ubItemsCenter, ubMb1)}>
-        <h2 className={cx(ubFlexAuto, ubM0)}>{operationName}</h2>
-        <LabeledList className={ubTxRightAlign} items={overviewItems} />
+      <div className={styles.header}>
+        <h2 className={cx(ubM0)}>{operationName}</h2>
+        <div className={styles.listWrapper}>
+          <LabeledList className={ubTxRightAlign} divider={true} items={overviewItems} />
+        </div>
       </div>
       {link ? (
         <DataLinkButton link={{ ...link, title: 'Logs for this span' } as any} buttonProps={{ icon: 'gf-logs' }} />

packages/jaeger-ui-components/src/TraceTimelineViewer/utils.test.js

@@ -20,6 +20,7 @@ import {
   isServerSpan,
   spanContainsErredSpan,
   spanHasTag,
+  formatNumber,
 } from './utils';
 
 import traceGenerator from '../demo/trace-generators';

packages/jaeger-ui-components/src/common/LabeledList.tsx

@@ -17,20 +17,31 @@ import { css } from '@emotion/css';
 import cx from 'classnames';
 import { useStyles2 } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
+import { autoColor } from '../Theme';
 
-import { Divider } from './Divider';
-
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (divider: boolean) => (theme: GrafanaTheme2) => {
   return {
     LabeledList: css`
       label: LabeledList;
       list-style: none;
       margin: 0;
       padding: 0;
+      ${divider === true &&
+      `
+        margin-right: -8px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+      `}
     `,
     LabeledListItem: css`
       label: LabeledListItem;
       display: inline-block;
+      ${divider === true &&
+      `
+        border-right: 1px solid ${autoColor(theme, '#ddd')};
+        padding: 0 8px;
+      `}
     `,
     LabeledListLabel: css`
       label: LabeledListLabel;
@@ -42,27 +53,23 @@ const getStyles = (theme: GrafanaTheme2) => {
 
 type LabeledListProps = {
   className?: string;
+  divider?: boolean;
   items: Array<{ key: string; label: React.ReactNode; value: React.ReactNode }>;
 };
 
 export default function LabeledList(props: LabeledListProps) {
-  const { className, items } = props;
-  const styles = useStyles2(getStyles);
+  const { className, divider = false, items } = props;
+  const styles = useStyles2(getStyles(divider));
+
   return (
     <ul className={cx(styles.LabeledList, className)}>
-      {items.map(({ key, label, value }, i) => {
-        const divider = i < items.length - 1 && (
-          <li className={styles.LabeledListItem} key={`${key}--divider`}>
-            <Divider />
-          </li>
-        );
-        return [
-          <li className={styles.LabeledListItem} key={key}>
+      {items.map(({ key, label, value }) => {
+        return (
+          <li className={styles.LabeledListItem} key={`${key}`}>
             <span className={styles.LabeledListLabel}>{label}</span>
             <strong>{value}</strong>
-          </li>,
-          divider,
-        ];
+          </li>
+        );
       })}
     </ul>
   );

packages/jaeger-ui-components/src/model/transform-trace-data.tsx

@@ -138,6 +138,7 @@ export default function transformTraceData(data: TraceResponse | undefined): Tra
     span.relativeStartTime = span.startTime - traceStartTime;
     span.depth = depth - 1;
     span.hasChildren = node.children.length > 0;
+    span.childSpanCount = node.children.length;
     span.warnings = span.warnings || [];
     span.tags = span.tags || [];
     span.references = span.references || [];

packages/jaeger-ui-components/src/types/trace.ts

@@ -68,6 +68,7 @@ export type TraceSpanData = {
 export type TraceSpan = TraceSpanData & {
   depth: number;
   hasChildren: boolean;
+  childSpanCount: number;
   process: TraceProcess;
   relativeStartTime: number;
   tags: NonNullable<TraceSpanData['tags']>;

packages/jaeger-ui-components/src/uberUtilityStyles.ts

@@ -34,6 +34,10 @@ export const ubItemsCenter = css`
   align-items: center;
 `;
 
+export const ubItemsStart = css`
+  align-items: start;
+`;
+
 export const ubFlexAuto = css`
   flex: 1 1 auto;
   min-width: 0; /* 1 */