Add insights to the span details and customize the error pages

packages/jaeger-ui/index.html

@@ -42,6 +42,7 @@
       window.apiBaseUrl;
       window.initialRoutePath;
       window.embeddedMode;
+      window.isUserDefinedJaegerQueryURL;
       window.staticPath;
     </script>
   </head>

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

@@ -1,5 +1,6 @@
 export const actions = {
-  GO_TO_SPAN: "GO_TO_SPAN",
-  GET_SPANS_WITH_RESOLVED_LOCATION: "GET_SPANS_WITH_RESOLVED_LOCATION",
-  SET_SPANS_WITH_RESOLVED_LOCATION:"SET_SPANS_WITH_RESOLVED_LOCATION"
-}
+  GO_TO_SPAN: 'GO_TO_SPAN',
+  GET_SPANS_DATA: 'GET_SPANS_DATA',
+  SET_SPANS_DATA: 'SET_SPANS_DATA',
+  CLEAR: 'CLEAR',
+};

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

@@ -1,24 +1,27 @@
-import { actions } from "./actions";
-import { SetSpansWithResolvedLocationsData } from "./types";
+import { actions } from './actions';
+import { SetSpansDataPayload } from './types';
 
 export const state: {
-  pendingOperationsCount: number,
-  spansWithResolvedLocation: SetSpansWithResolvedLocationsData
+  pendingOperationsCount: number;
+  spans: SetSpansDataPayload;
 } = {
   pendingOperationsCount: 0,
-  spansWithResolvedLocation: {}
+  spans: {},
 };
 
 export const updateState = (action: string, payload: any) => {
-  switch(action) {
-    case (actions.GET_SPANS_WITH_RESOLVED_LOCATION):
+  switch (action) {
+    case actions.GET_SPANS_DATA:
       state.pendingOperationsCount++;
       break;
-    case (actions.SET_SPANS_WITH_RESOLVED_LOCATION):
-      state.spansWithResolvedLocation = payload;
+    case actions.SET_SPANS_DATA:
+      state.spans = payload;
+      state.pendingOperationsCount--;
+      break;
+    case actions.CLEAR:
+      state.spans = {};
       state.pendingOperationsCount--;
       break;
     default:
   }
-}
-
+};

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

@@ -1,7 +1,9 @@
+import { InsightType } from '../../components/common/InsightIcon/types';
+
 export type ActionListener = (data: unknown) => void;
 
 export interface IDigmaIncomingMessageData {
-  type: "digma";
+  type: 'digma';
   action: string;
   payload?: unknown;
 }
@@ -13,8 +15,14 @@ export interface IDigmaOutgoingMessageData {
 
 export type DigmaMessageEvent = MessageEvent<IDigmaIncomingMessageData>;
 
+export interface ISpanInsight {
+  type: InsightType;
+  importance: number;
+}
+
 interface ISpanInfo {
-  importance?: number
+  hasCodeLocation: boolean;
+  insights: ISpanInsight[];
 }
 
-export type SetSpansWithResolvedLocationsData = Record<string, ISpanInfo>
+export type SetSpansDataPayload = Record<string, ISpanInfo>;

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css

@@ -81,9 +81,10 @@ limitations under the License.
   outline: none;
   overflow: hidden;
   padding-left: 4px;
-  padding-right: 40px;
+  padding-right: 0.25em;
   position: relative;
   text-overflow: ellipsis;
+  display: flex;
 }
 
 .span-name::before {
@@ -109,6 +110,7 @@ limitations under the License.
   position: absolute;
   top: 0;
   width: 1000px;
+  pointer-events: none;
 }
 
 .span-name:focus {
@@ -117,23 +119,37 @@ limitations under the License.
 
 .endpoint-name {
   color: #808080;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0.25em;
 }
 
 .span-name:hover > .endpoint-name {
   color: #000;
 }
 
-.importance-marker {
-  position: absolute;
-  top: 5%;
-  right: 25px;
+.span-name .icons-container {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+  align-items: center;
 }
 
-.code-location-icon {
-  position: absolute;
-  height: 70%;
-  top: 15%;
-  right: 5px;
+.span-name .icon {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background: #f5f5f5;
+  border: 1px solid #d3d3d3;
+}
+
+.span-name .code-location-icon {
+  background: #3538cd;
+  border: none;
 }
 
 .span-svc-name {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx

@@ -17,6 +17,7 @@ import IoAlert from 'react-icons/lib/io/alert';
 import IoArrowRightA from 'react-icons/lib/io/arrow-right-a';
 import IoNetwork from 'react-icons/lib/io/network';
 import MdFileUpload from 'react-icons/lib/md/file-upload';
+import { Tooltip } from 'antd';
 import ReferencesButton from './ReferencesButton';
 import TimelineRow from './TimelineRow';
 import { formatDuration, ViewedBoundsFunctionType } from './utils';
@@ -26,14 +27,14 @@ import Ticks from './Ticks';
 import { dispatcher } from '../../../api/digma/dispatcher';
 import { actions } from '../../../api/digma/actions';
 import { state as globalState } from '../../../api/digma/state';
-import { getStaticAssetPath } from '../../../utils/getStaticAssetPath';
+import { ISpanInsight, SetSpansDataPayload } from '../../../api/digma/types';
+import { LightBulbIcon } from '../../common/icons/LightBulbIcon';
+import { CrosshairIcon } from '../../common/icons/CrosshairIcon';
+
 import { TNil } from '../../../types';
 import { Span } from '../../../types/trace';
 
-import codeIcon from '../../../img/code.svg';
-
 import './SpanBarRow.css';
-import { SetSpansWithResolvedLocationsData } from '../../../api/digma/types';
 
 type SpanBarRowProps = {
   className?: string;
@@ -68,11 +69,9 @@ type SpanBarRowProps = {
 };
 
 type SpanBarRowState = {
-  hasResolvedLocation: boolean;
-  importance?: number;
-}
-
-const codeIconUrl = getStaticAssetPath(codeIcon);
+  hasCodeLocation: boolean;
+  insights: ISpanInsight[];
+};
 
 /**
  * This was originally a stateless function, but changing to a PureComponent
@@ -85,11 +84,11 @@ const codeIconUrl = getStaticAssetPath(codeIcon);
 export default class SpanBarRow extends React.PureComponent<SpanBarRowProps, SpanBarRowState> {
   constructor(props: SpanBarRowProps) {
     super(props);
-    const span = globalState.spansWithResolvedLocation[props.span.spanID];
+    const span = globalState.spans[props.span.spanID];
     this.state = {
-      hasResolvedLocation: Boolean(span),
-      importance: span && span.importance,
-    }
+      hasCodeLocation: Boolean(span && span.hasCodeLocation),
+      insights: span ? span.insights : [],
+    };
   }
 
   static defaultProps = {
@@ -106,30 +105,19 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps, Spa
   };
 
   updateSpanInfo = (data: unknown) => {
-      const span = (data as SetSpansWithResolvedLocationsData)[this.props.span.spanID];
-      this.setState({
-        hasResolvedLocation: Boolean(span),
-        importance: span && span.importance
-      });
-  }
+    const span = (data as SetSpansDataPayload)[this.props.span.spanID];
+    this.setState({
+      hasCodeLocation: Boolean(span && span.hasCodeLocation),
+      insights: span ? span.insights : [],
+    });
+  };
 
   componentDidMount(): void {
-    dispatcher.addActionListener(actions.SET_SPANS_WITH_RESOLVED_LOCATION, this.updateSpanInfo);
+    dispatcher.addActionListener(actions.SET_SPANS_DATA, this.updateSpanInfo);
   }
 
   componentWillUnmount(): void {
-    dispatcher.removeActionListener(actions.SET_SPANS_WITH_RESOLVED_LOCATION, this.updateSpanInfo);
-  }
-
-  getImportanceAltText(importance?: number): string {
-    switch (importance) {
-      case 1:
-        return "Showstopper";
-      case 2:
-        return "Critical";
-      default:
-        return "";
-    }
+    dispatcher.removeActionListener(actions.SET_SPANS_DATA, this.updateSpanInfo);
   }
 
   render() {
@@ -171,7 +159,6 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps, Spa
       hintSide = 'right';
     }
 
-
     return (
       <TimelineRow
         className={`
@@ -220,11 +207,22 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps, Spa
                 )}
               </span>
               <small className="endpoint-name">{rpc ? rpc.operationName : operationName}</small>
-              {
-                typeof this.state.importance === "number" && [1,2].includes(this.state.importance) && this.state.hasResolvedLocation &&
-                <span title={this.getImportanceAltText(this.state.importance)} className="importance-marker">❗️</span>
-              }
-              {this.state.hasResolvedLocation && <img alt="Code location available" className="code-location-icon" src={codeIconUrl} />}
+              <span className="icons-container">
+                {this.state.insights.length > 0 && (
+                  <Tooltip title="Insights available">
+                    <span className="icon">
+                      <LightBulbIcon size={12} color="#56b5bc" />
+                    </span>
+                  </Tooltip>
+                )}
+                {this.state.hasCodeLocation && (
+                  <Tooltip title="Code link available">
+                    <span className="icon code-location-icon">
+                      <CrosshairIcon size={16} color="#fff" />
+                    </span>
+                  </Tooltip>
+                )}
+              </span>
             </a>
             {span.references && span.references.length > 1 && (
               <ReferencesButton

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

@@ -14,10 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.SpanDetail--header {
+  display: flex;
+  flex-direction: column;
+}
+
+.SpanDetail--operationNameTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .SpanDetail--operationNameLink {
   font-weight: 500;
   display: block;
   font-size: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.SpanDetail--insights {
+  display: flex;
+  gap: 4px;
+}
+
+.SpanDetail--insightIconContainer {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #dadada;
 }
 
 .SpanDetail--divider {