Refactor navigation (#56)

* Refactor navigation

* Do not clear span data on span detail collapse

packages/jaeger-ui/src/api/digma/ActionDispatcher.ts

@@ -1,4 +1,4 @@
-import { ActionListener } from './types';
+import { ActionListener, DigmaMessageError } from './types';
 
 class ActionDispatcher {
   private actions: {
@@ -27,9 +27,14 @@ class ActionDispatcher {
     }
   }
 
-  public dispatch(timeStamp: number, type: string, data?: unknown): void {
+  public dispatch(
+    timeStamp: number,
+    type: string,
+    data: unknown,
+    error: DigmaMessageError | undefined
+  ): void {
     if (this.actions[type]) {
-      this.actions[type].forEach(fn => fn(data, timeStamp));
+      this.actions[type].forEach(fn => fn(data, timeStamp, error));
     }
   }
 }

packages/jaeger-ui/src/api/digma/actions.ts

@@ -2,7 +2,6 @@ import { addActionPrefix } from './addActionPrefix';
 
 export const actions = {
   GO_TO_SPAN: 'GO_TO_SPAN',
-  GO_TO_INSIGHTS: 'GO_TO_INSIGHTS',
   GET_SPANS_DATA: 'GET_SPANS_DATA',
   SET_SPANS_DATA: 'SET_SPANS_DATA',
   CLEAR: 'CLEAR',
@@ -11,5 +10,6 @@ export const actions = {
 const GLOBAL_ACTION_PREFIX = 'GLOBAL';
 
 export const globalActions = addActionPrefix(GLOBAL_ACTION_PREFIX, {
+  CHANGE_SCOPE: 'CHANGE_SCOPE',
   OPEN_URL_IN_DEFAULT_BROWSER: 'OPEN_URL_IN_DEFAULT_BROWSER',
 });

packages/jaeger-ui/src/api/digma/index.ts

@@ -37,7 +37,7 @@ export const initializeDigmaMessageListener = (dispatcher: ActionDispatcher) =>
 
 export const sendMessage = <T>(message: IDigmaOutgoingMessageData<T>): string | undefined => {
   logger.debug(
-    `Message to sent: ${message.action}
+    `Message to send: ${message.action}
 Raw message: %O`,
     message
   );

packages/jaeger-ui/src/api/digma/types.ts

@@ -1,11 +1,17 @@
 import { InsightType } from '../../components/common/InsightIcon/types';
+import { IDigmaSpanData } from '../../utils/getSpanDataForDigma';
 
-export type ActionListener = (data: unknown, timeStamp: number) => void;
+export type ActionListener = (data: unknown, timeStamp: number, error: DigmaMessageError | undefined) => void;
+
+export type DigmaMessageError = {
+  message: string;
+};
 
 export interface IDigmaIncomingMessageData {
   type: 'digma';
   action: string;
   payload?: unknown;
+  error?: DigmaMessageError;
 }
 
 export interface IDigmaOutgoingMessageData<T> {
@@ -25,4 +31,27 @@ interface ISpanInfo {
   insights: ISpanInsight[];
 }
 
+export type GoToSpanPayload = IDigmaSpanData;
+
+export type GoToInsightsPayload = IDigmaSpanData;
+
+export type GetSpansDataPayload = { spans: IDigmaSpanData[] };
+
 export type SetSpansDataPayload = Record<string, ISpanInfo>;
+
+export type ChangeScopePayload = {
+  span: {
+    spanCodeObjectId: string;
+  } | null;
+  forceNavigation?: boolean;
+  environmentId?: string;
+  context?: {
+    event: string;
+    payload?: Record<string, unknown>;
+  };
+};
+
+export type OpenURLInDefaultBrowserPayload = {
+  url: string;
+  title?: string;
+};

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -40,6 +40,7 @@ import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
 import ZoomControls from './ZoomControls';
 import { globalActions } from '../../../api/digma/actions';
+import { OpenURLInDefaultBrowserPayload } from '../../../api/digma/types';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -159,7 +160,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
 
   const handleStandaloneLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
-    window.sendMessageToDigma({
+    window.sendMessageToDigma<OpenURLInDefaultBrowserPayload>({
       action: globalActions.OPEN_URL_IN_DEFAULT_BROWSER,
       payload: {
         url: `${window.apiBaseUrl}${window.location.pathname}${window.location.search}`,

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

@@ -24,10 +24,15 @@ import DetailState from './DetailState';
 import { formatDuration } from '../utils';
 import CopyIcon from '../../../common/CopyIcon';
 import LabeledList from '../../../common/LabeledList';
-import { actions } from '../../../../api/digma/actions';
+import { actions, globalActions } from '../../../../api/digma/actions';
 import dispatcher from '../../../../api/digma/dispatcher';
 import { state as globalState } from '../../../../api/digma/state';
-import { ISpanInsight, SetSpansDataPayload } from '../../../../api/digma/types';
+import {
+  ChangeScopePayload,
+  GoToSpanPayload,
+  ISpanInsight,
+  SetSpansDataPayload,
+} from '../../../../api/digma/types';
 import { getInsightTypeInfo, getInsightTypeOrderPriority } from '../../../common/InsightIcon/utils';
 import { InsightIcon } from '../../../common/InsightIcon';
 import Button from '../../../common/Button';
@@ -77,9 +82,6 @@ export default class SpanDetail extends React.Component<SpanDetailProps, SpanDet
 
   componentWillUnmount() {
     dispatcher.removeActionListener(actions.SET_SPANS_DATA, this._updateSpanInfo);
-    window.sendMessageToDigma({
-      type: actions.CLEAR,
-    });
   }
 
   _sortInsightsByImportance(insights: ISpanInsight[]): ISpanInsight[] {
@@ -101,18 +103,30 @@ export default class SpanDetail extends React.Component<SpanDetailProps, SpanDet
   _handleCodeButtonClick() {
     const spanInfo = getSpanDataForDigma(this.props.span);
 
-    window.sendMessageToDigma({
+    window.sendMessageToDigma<GoToSpanPayload>({
       action: actions.GO_TO_SPAN,
       payload: spanInfo,
     });
   }
 
   _handleSpanNameLinkClick() {
-    const spanInfo = getSpanDataForDigma(this.props.span);
+    const spanInfo = getSpanDataForDigma(this.props.span, true);
 
-    window.sendMessageToDigma({
-      action: actions.GO_TO_INSIGHTS,
-      payload: spanInfo,
+    if (!spanInfo.spanCodeObjectId) {
+      return;
+    }
+
+    window.sendMessageToDigma<ChangeScopePayload>({
+      action: globalActions.CHANGE_SCOPE,
+      payload: {
+        span: {
+          spanCodeObjectId: spanInfo.spanCodeObjectId,
+        },
+        environmentId: spanInfo.environmentId,
+        context: {
+          event: 'JAEGER/SPAN_LINK_CLICKED',
+        },
+      },
     });
   }
 

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -61,6 +61,7 @@ import TraceFlamegraph from './TraceFlamegraph/index';
 import { TraceGraphConfig } from '../../types/config';
 import { actions } from '../../api/digma/actions';
 import getSpanDataForDigma from '../../utils/getSpanDataForDigma';
+import { GetSpansDataPayload } from '../../api/digma/types';
 
 import './index.css';
 
@@ -224,10 +225,10 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
 
   getSpansWithResolvedLocations(trace: Trace) {
     // Get all the trace spans and send it Digma IDE plugin
-    window.sendMessageToDigma({
+    window.sendMessageToDigma<GetSpansDataPayload>({
       action: actions.GET_SPANS_DATA,
       payload: {
-        spans: trace.spans.map(getSpanDataForDigma).filter(span => span.instrumentationLibrary),
+        spans: trace.spans.map(x => getSpanDataForDigma(x)).filter(span => span.instrumentationLibrary),
       },
     });
   }

packages/jaeger-ui/src/utils/getSpanDataForDigma.ts

@@ -1,6 +1,6 @@
 import { Span } from '../types/trace';
 
-interface IDigmaSpanData {
+export interface IDigmaSpanData {
   id: string;
   name: string;
   serviceName: string;
@@ -10,9 +10,10 @@ interface IDigmaSpanData {
   spanCodeObjectId?: string;
   methodCodeObjectId?: string;
   environment?: string;
+  environmentId?: string;
 }
 
-const getSpanDataForDigma = (span: Span): IDigmaSpanData => {
+const getSpanDataForDigma = (span: Span, withEnvironmentId: boolean | undefined = false): IDigmaSpanData => {
   const tagsToGet = {
     instrumentationLibrary: 'otel.library.name',
     function: 'code.function',
@@ -23,6 +24,7 @@ const getSpanDataForDigma = (span: Span): IDigmaSpanData => {
 
   const processTagsToGet = {
     environment: 'digma.environment',
+    ...(withEnvironmentId ? { environmentId: 'digma.environment.id' } : {}),
   };
 
   const tagsValues = Object.entries(tagsToGet).reduce((acc, [key, value]) => {

packages/jaeger-ui/typings/custom.d.ts

@@ -31,7 +31,9 @@ declare interface Window {
     onFailure: (error_code, error_message) => void;
   }) => string;
   cefQueryCancel?: (request_id: string) => void;
-  sendMessageToDigma: (message) => string | undefined;
+  sendMessageToDigma: <T>(
+    message: { action: string; payload?: T } /* IDigmaOutgoingMessageData */
+  ) => string | undefined;
   cancelMessageToDigma: (request_id: string) => void;
   platform?: unknown;
   apiBaseUrl?: unknown;
@@ -40,7 +42,7 @@ declare interface Window {
   isUserDefinedJaegerQueryURL?: unknown;
   staticPath?: unknown;
   enableZoomControls?: unknown;
-  isLoggingEnabled?: boolean;
+  isLoggingEnabled?: unknown;
 }
 
 declare const __REACT_APP_GA_DEBUG__: string | undefined;