[APM] Improve span links navigation (#147426)

Closes #146606 Before https://user-images.githubusercontent.com/31922082/207293168-58979a91-de57-4b04-8c96-5c9dd493fc99.mov After https://user-images.githubusercontent.com/31922082/207293215-63c07b94-7752-4e6e-a9b7-ba9e1095a42f.mov
elastic · Dec 19, 2022 · d1f26f5 · d1f26f5
1 parent 5d81fc5
commit d1f26f5
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 78 deletions.
diff --git a/...tion_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx b/...tion_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx
@@ -34,7 +34,10 @@ interface AccordionWaterfallProps {
   waterfallItemId?: string;
   waterfall: IWaterfall;
   timelineMargins: Margins;
-  onClickWaterfallItem: (item: IWaterfallSpanOrTransaction) => void;
+  onClickWaterfallItem: (
+    item: IWaterfallSpanOrTransaction,
+    flyoutDetailTab: string
+  ) => void;
   showCriticalPath: boolean;
   maxLevelOpen: number;
 }
@@ -159,8 +162,8 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
               isSelected={item.id === waterfallItemId}
               errorCount={errorCount}
               marginLeftLevel={marginLeftLevel}
-              onClick={() => {
-                onClickWaterfallItem(item);
+              onClick={(flyoutDetailTab: string) => {
+                onClickWaterfallItem(item, flyoutDetailTab);
               }}
               segments={criticalPathSegmentsById[item.id]
                 ?.filter((segment) => segment.self)

diff --git a/...n_details/waterfall_with_summary/waterfall_container/waterfall/badge/span_links_badge.tsx b/...n_details/waterfall_with_summary/waterfall_container/waterfall/badge/span_links_badge.tsx
@@ -9,13 +9,21 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { SpanLinksCount } from '../waterfall_helpers/waterfall_helpers';
 
-type Props = SpanLinksCount & { id: string };
+type Props = SpanLinksCount & {
+  id: string;
+  onClick: (flyoutDetailTab: string) => unknown;
+};
 
-export function SpanLinksBadge({ linkedParents, linkedChildren, id }: Props) {
+export function SpanLinksBadge({
+  linkedParents,
+  linkedChildren,
+  id,
+  onClick,
+}: Props) {
   if (!linkedParents && !linkedChildren) {
     return null;
   }
-
+  const spanLinksFlyoutTab = 'span_links';
   const total = linkedParents + linkedChildren;
   return (
     <EuiToolTip
@@ -47,7 +55,19 @@ export function SpanLinksBadge({ linkedParents, linkedChildren, id }: Props) {
         </EuiFlexGroup>
       }
     >
-      <EuiBadge data-test-subj={`spanLinksBadge_${id}`}>
+      <EuiBadge
+        data-test-subj={`spanLinksBadge_${id}`}
+        onClick={(e: any) => {
+          e.stopPropagation();
+          onClick(spanLinksFlyoutTab);
+        }}
+        onClickAriaLabel={i18n.translate(
+          'xpack.apm.waterfall.spanLinks.badgeAriaLabel',
+          {
+            defaultMessage: 'Open span links details',
+          }
+        )}
+      >
         {i18n.translate('xpack.apm.waterfall.spanLinks.badge', {
           defaultMessage:
             '{total} {total, plural, one {Span link} other {Span links}}',

diff --git a/...ts/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx b/...ts/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx
@@ -31,15 +31,17 @@ const Container = euiStyled.div`
 const toggleFlyout = ({
   history,
   item,
+  flyoutDetailTab,
 }: {
   history: History;
   item?: IWaterfallItem;
+  flyoutDetailTab?: string;
 }) => {
   history.replace({
     ...history.location,
     search: fromQuery({
       ...toQuery(location.search),
-      flyoutDetailTab: undefined,
+      flyoutDetailTab,
       waterfallItemId: item?.id,
     }),
   });
@@ -152,9 +154,10 @@ export function Waterfall({
               duration={duration}
               waterfall={waterfall}
               timelineMargins={timelineMargins}
-              onClickWaterfallItem={(item: IWaterfallItem) =>
-                toggleFlyout({ history, item })
-              }
+              onClickWaterfallItem={(
+                item: IWaterfallItem,
+                flyoutDetailTab: string
+              ) => toggleFlyout({ history, item, flyoutDetailTab })}
               showCriticalPath={showCriticalPath}
               maxLevelOpen={maxLevelOpen}
             />

diff --git a/...action_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx b/...action_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx
@@ -92,6 +92,7 @@ interface Props {
   traceId: string;
   totalDuration?: number;
   spanLinksCount: SpanLinksCount;
+  flyoutDetailTab?: string;
   onClose: () => void;
 }
 
@@ -107,6 +108,7 @@ export function SpanFlyout({
   totalDuration,
   onClose,
   spanLinksCount,
+  flyoutDetailTab,
 }: Props) {
   const { data = INITIAL_DATA, status } = useFetcher(
     (callApmApi) => {
@@ -171,6 +173,7 @@ export function SpanFlyout({
               parentTransaction={parentTransaction}
               totalDuration={totalDuration}
               spanLinksCount={spanLinksCount}
+              flyoutDetailTab={flyoutDetailTab}
             />
           )}
         </EuiFlyoutBody>
@@ -184,11 +187,13 @@ function SpanFlyoutBody({
   parentTransaction,
   totalDuration,
   spanLinksCount,
+  flyoutDetailTab,
 }: {
   span: Span;
   parentTransaction?: Transaction;
   totalDuration?: number;
   spanLinksCount: SpanLinksCount;
+  flyoutDetailTab?: string;
 }) {
   const stackframes = span.span.stacktrace;
   const codeLanguage = parentTransaction?.service.language?.name;
@@ -205,6 +210,46 @@ function SpanFlyoutBody({
     spanId: span.span.id,
     processorEvent: ProcessorEvent.span,
   });
+
+  const tabs = [
+    {
+      id: 'metadata',
+      name: i18n.translate('xpack.apm.propertiesTable.tabs.metadataLabel', {
+        defaultMessage: 'Metadata',
+      }),
+      content: (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <SpanMetadata spanId={span.span.id} />
+        </Fragment>
+      ),
+    },
+    ...(!isEmpty(stackframes)
+      ? [
+          {
+            id: 'stack-trace',
+            name: i18n.translate(
+              'xpack.apm.transactionDetails.spanFlyout.stackTraceTabLabel',
+              {
+                defaultMessage: 'Stack Trace',
+              }
+            ),
+            content: (
+              <Fragment>
+                <EuiSpacer size="l" />
+                <Stacktrace
+                  stackframes={stackframes}
+                  codeLanguage={codeLanguage}
+                />
+              </Fragment>
+            ),
+          },
+        ]
+      : []),
+    ...(spanLinksTabContent ? [spanLinksTabContent] : []),
+  ];
+
+  const initialTab = tabs.find(({ id }) => id === flyoutDetailTab) ?? tabs[0];
   return (
     <>
       <StickySpanProperties span={span} transaction={parentTransaction} />
@@ -270,48 +315,7 @@ function SpanFlyoutBody({
       />
       <EuiHorizontalRule />
       <SpanDatabase spanDb={spanDb} />
-      <EuiTabbedContent
-        tabs={[
-          {
-            id: 'metadata',
-            name: i18n.translate(
-              'xpack.apm.propertiesTable.tabs.metadataLabel',
-              {
-                defaultMessage: 'Metadata',
-              }
-            ),
-            content: (
-              <Fragment>
-                <EuiSpacer size="m" />
-                <SpanMetadata spanId={span.span.id} />
-              </Fragment>
-            ),
-          },
-          ...(!isEmpty(stackframes)
-            ? [
-                {
-                  id: 'stack-trace',
-                  name: i18n.translate(
-                    'xpack.apm.transactionDetails.spanFlyout.stackTraceTabLabel',
-                    {
-                      defaultMessage: 'Stack Trace',
-                    }
-                  ),
-                  content: (
-                    <Fragment>
-                      <EuiSpacer size="l" />
-                      <Stacktrace
-                        stackframes={stackframes}
-                        codeLanguage={codeLanguage}
-                      />
-                    </Fragment>
-                  ),
-                },
-              ]
-            : []),
-          ...(spanLinksTabContent ? [spanLinksTabContent] : []),
-        ]}
-      />
+      <EuiTabbedContent tabs={tabs} initialSelectedTab={initialTab} />
     </>
   );
 }
diff --git a/...details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx b/...details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx
@@ -38,6 +38,7 @@ interface Props {
   errorCount?: number;
   rootTransactionDuration?: number;
   spanLinksCount: SpanLinksCount;
+  flyoutDetailTab?: string;
 }
 
 export function TransactionFlyout({
@@ -47,6 +48,7 @@ export function TransactionFlyout({
   errorCount = 0,
   rootTransactionDuration,
   spanLinksCount,
+  flyoutDetailTab,
 }: Props) {
   const { data: transaction, status } = useFetcher(
     (callApmApi) => {
@@ -96,6 +98,7 @@ export function TransactionFlyout({
               errorCount={errorCount}
               rootTransactionDuration={rootTransactionDuration}
               spanLinksCount={spanLinksCount}
+              flyoutDetailTab={flyoutDetailTab}
             />
           )}
         </EuiFlyoutBody>
@@ -109,11 +112,13 @@ function TransactionFlyoutBody({
   errorCount,
   rootTransactionDuration,
   spanLinksCount,
+  flyoutDetailTab,
 }: {
   transaction: Transaction;
   errorCount: number;
   rootTransactionDuration?: number;
   spanLinksCount: SpanLinksCount;
+  flyoutDetailTab?: string;
 }) {
   const spanLinksTabContent = getSpanLinksTabContent({
     spanLinksCount,
@@ -122,6 +127,24 @@ function TransactionFlyoutBody({
     processorEvent: ProcessorEvent.transaction,
   });
 
+  const tabs = [
+    {
+      id: 'metadata',
+      name: i18n.translate('xpack.apm.propertiesTable.tabs.metadataLabel', {
+        defaultMessage: 'Metadata',
+      }),
+      content: (
+        <>
+          <EuiSpacer size="m" />
+          <TransactionMetadata transactionId={transaction.transaction.id} />
+        </>
+      ),
+    },
+    ...(spanLinksTabContent ? [spanLinksTabContent] : []),
+  ];
+
+  const initialTab = tabs.find(({ id }) => id === flyoutDetailTab) ?? tabs[0];
+
   return (
     <>
       <FlyoutTopLevelProperties transaction={transaction} />
@@ -134,28 +157,7 @@ function TransactionFlyoutBody({
       />
       <EuiHorizontalRule margin="m" />
       <DroppedSpansWarning transactionDoc={transaction} />
-      <EuiTabbedContent
-        tabs={[
-          {
-            id: 'metadata',
-            name: i18n.translate(
-              'xpack.apm.propertiesTable.tabs.metadataLabel',
-              {
-                defaultMessage: 'Metadata',
-              }
-            ),
-            content: (
-              <>
-                <EuiSpacer size="m" />
-                <TransactionMetadata
-                  transactionId={transaction.transaction.id}
-                />
-              </>
-            ),
-          },
-          ...(spanLinksTabContent ? [spanLinksTabContent] : []),
-        ]}
-      />
+      <EuiTabbedContent initialSelectedTab={initialTab} tabs={tabs} />
     </>
   );
 }
diff --git a/...saction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_flyout.tsx b/...saction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_flyout.tsx
@@ -8,14 +8,21 @@
 import { History } from 'history';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { useApmParams } from '../../../../../../hooks/use_apm_params';
 import { SpanFlyout } from './span_flyout';
 import { TransactionFlyout } from './transaction_flyout';
 import { IWaterfall } from './waterfall_helpers/waterfall_helpers';
 
 interface Props {
   waterfallItemId?: string;
   waterfall: IWaterfall;
-  toggleFlyout: ({ history }: { history: History }) => void;
+  toggleFlyout: ({
+    history,
+    flyoutDetailTab,
+  }: {
+    history: History;
+    flyoutDetailTab?: string;
+  }) => void;
 }
 
 export function WaterfallFlyout({
@@ -24,6 +31,9 @@ export function WaterfallFlyout({
   toggleFlyout,
 }: Props) {
   const history = useHistory();
+  const {
+    query: { flyoutDetailTab },
+  } = useApmParams('/services/{serviceName}/transactions/view');
   const currentItem = waterfall.items.find(
     (item) => item.id === waterfallItemId
   );
@@ -47,6 +57,7 @@ export function WaterfallFlyout({
           traceId={currentItem.doc.trace.id}
           onClose={() => toggleFlyout({ history })}
           spanLinksCount={currentItem.spanLinksCount}
+          flyoutDetailTab={flyoutDetailTab}
         />
       );
     case 'transaction':
@@ -58,6 +69,7 @@ export function WaterfallFlyout({
           rootTransactionDuration={waterfall.rootWaterfallTransaction?.duration}
           errorCount={waterfall.getErrorCount(currentItem.id)}
           spanLinksCount={currentItem.spanLinksCount}
+          flyoutDetailTab={flyoutDetailTab}
         />
       );
     default: