digma-ai · kshmidt-digma · Dec 13, 2022 · Dec 10, 2022 · Dec 13, 2022 · Dec 13, 2022
diff --git a/packages/jaeger-ui/public/index.html b/packages/jaeger-ui/public/index.html
@@ -35,6 +35,26 @@
         return JAEGER_VERSION;
       }
     </script>
+    <script>
+      // Variables for injection by VS Code extension
+      var VS_CODE_SETTINGS = {
+        apiBaseUrl: "",
+        startPath: "",
+        staticPath: "",
+        embeddedMode: false,
+      };
+
+      // Store list of trace spans with resolved location globally
+      var spansWithResolvedLocation = {};
+
+      window.addEventListener("message", (e) => {
+        const message = e.data;
+        switch (message.command) {
+          case "setSpansWithResolvedLocation":
+            spansWithResolvedLocation = message.data;
+        }
+      });
+    </script>
   </head>
   <body>
     <div id="jaeger-ui-root"></div>

diff --git a/packages/jaeger-ui/src/api/jaeger.js b/packages/jaeger-ui/src/api/jaeger.js
@@ -76,7 +76,7 @@ function getJSON(url, options = {}) {
   });
 }
 
-export const DEFAULT_API_ROOT = prefixUrl('/api/');
+export const DEFAULT_API_ROOT = window.VS_CODE_SETTINGS.apiBaseUrl ? `${window.VS_CODE_SETTINGS.apiBaseUrl}/api/` : prefixUrl('/api/');
 export const ANALYTICS_ROOT = prefixUrl('/analytics/');
 export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMilliseconds();
 

diff --git a/packages/jaeger-ui/src/components/App/index.js b/packages/jaeger-ui/src/components/App/index.js
@@ -54,6 +54,13 @@ export default class JaegerUIApp extends Component {
   }
 
   render() {
+    // Navigate to URL provided by VS Code
+    if (window.VS_CODE_SETTINGS.startPath) {
+      const urlToNavigate = window.VS_CODE_SETTINGS.startPath;
+      window.VS_CODE_SETTINGS.startPath = "";
+      history.push(urlToNavigate);
+    }
+
     return (
       <Provider store={this.store}>
         <ConnectedRouter history={history}>

diff --git a/packages/jaeger-ui/src/components/Monitor/EmptyState/index.tsx b/packages/jaeger-ui/src/components/Monitor/EmptyState/index.tsx
@@ -29,14 +29,16 @@ export default class MonitorATMEmptyState extends React.PureComponent {
   }
 
   render() {
+    const monitorImgUrl = window.VS_CODE_SETTINGS.staticPath ? new URL(monitorImg, window.VS_CODE_SETTINGS.staticPath).href : monitorImg;
+
     return (
       <Col>
         <Row justify="center">
           <Col span={8} offset={8}>
             <img
               className="monitor-preview-image-empty-state"
               alt="jaeger-monitor-tab-preview"
-              src={monitorImg}
+              src={monitorImgUrl}
             />
           </Col>
         </Row>

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js
@@ -41,6 +41,29 @@ import JaegerLogo from '../../img/jaeger-logo.svg';
 
 const TabPane = Tabs.TabPane;
 
+// Sanitize query params to filter out ones provided by VS Code
+const sanitizeQueryParams = (params) => {
+  const VS_CODE_PARAMS = [
+    "id",
+    "origin",
+    "swVersion",
+    "extensionId",
+    "platform",
+    "vscode-resource-base-authority",
+    "parentOrigin"
+  ];
+
+  const filteredParams = {};
+
+  Object.keys(params).forEach((key) => {
+    if (!VS_CODE_PARAMS.includes(key)) {
+      filteredParams[key] = params[key]
+    }
+  })
+
+  return filteredParams;
+};
+
 // export for tests
 export class SearchTracePageImpl extends Component {
   componentDidMount() {
@@ -97,6 +120,7 @@ export class SearchTracePageImpl extends Component {
     const hasTraceResults = traceResults && traceResults.length > 0;
     const showErrors = errors && !loadingTraces;
     const showLogo = isHomepage && !hasTraceResults && !loadingTraces && !errors;
+    const logoUrl = window.VS_CODE_SETTINGS.staticPath ? new URL(JaegerLogo, window.VS_CODE_SETTINGS.staticPath).href : JaegerLogo;
     return (
       <Row className="SearchTracePage--row">
         {!embedded && (
@@ -147,7 +171,7 @@ export class SearchTracePageImpl extends Component {
             <img
               className="SearchTracePage--logo js-test-logo"
               alt="presentation"
-              src={JaegerLogo}
+              src={logoUrl}
               width="400"
             />
           )}
@@ -241,6 +265,7 @@ const stateServicesXformer = memoizeOne(stateServices => {
 export function mapStateToProps(state) {
   const { embedded, router, services: stServices, traceDiff } = state;
   const query = getUrlState(router.location.search);
+  const sanitizedQuery = sanitizeQueryParams(query);
   const isHomepage = !Object.keys(query).length;
   const { query: queryOfResults, traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(
     state.trace
@@ -268,7 +293,7 @@ export function mapStateToProps(state) {
     errors: errors.length ? errors : null,
     maxTraceDuration: maxDuration,
     sortTracesBy: sortBy,
-    urlQueryParams: Object.keys(query).length > 0 ? query : null,
+    urlQueryParams: Object.keys(sanitizedQuery).length > 0 ? sanitizedQuery : null,
   };
 }
 

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
@@ -81,7 +81,7 @@ limitations under the License.
   outline: none;
   overflow: hidden;
   padding-left: 4px;
-  padding-right: 0.25em;
+  padding-right: 40px;
   position: relative;
   text-overflow: ellipsis;
 }
@@ -123,6 +123,20 @@ limitations under the License.
   color: #000;
 }
 
+.importance-icon {
+  position: absolute;
+  height: 60%;
+  top: 20%;
+  right: 25px;
+}
+
+.code-location-icon {
+  position: absolute;
+  height: 70%;
+  top: 15%;
+  right: 5px;
+}
+
 .span-svc-name {
   padding: 0 0.25rem 0 0.5rem;
   font-size: 1.05em;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx
@@ -27,8 +27,16 @@ import Ticks from './Ticks';
 import { TNil } from '../../../types';
 import { Span } from '../../../types/trace';
 
+import codeIcon from '../../../img/code.svg';
+import exclamationMarkIcon from '../../../img/exclamation-mark.svg';
+
 import './SpanBarRow.css';
 
+type SpanInfo = {
+  hasResolvedLocation: boolean,
+  importance?: number
+}
+
 type SpanBarRowProps = {
   className?: string;
   color: string;
@@ -61,6 +69,11 @@ type SpanBarRowProps = {
   focusSpan: (spanID: string) => void;
 };
 
+type SpanBarRowState = {
+  hasResolvedLocation: boolean;
+  importance?: number;
+}
+
 /**
  * This was originally a stateless function, but changing to a PureComponent
  * reduced the render time of expanding a span row detail by ~50%. This is
@@ -69,7 +82,16 @@ type SpanBarRowProps = {
  * handlers to the onClick props. E.g. for now, the PureComponent is more
  * performance than the stateless function.
  */
-export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
+export default class SpanBarRow extends React.PureComponent<SpanBarRowProps, SpanBarRowState> {
+  constructor(props: SpanBarRowProps) {
+    super(props);
+    const span = window.spansWithResolvedLocation[props.span.spanID]
+    this.state = {
+      hasResolvedLocation: Boolean(span) && span.hasResolvedLocation,
+      importance: span && span.importance,
+    }
+  }
+
   static defaultProps = {
     className: '',
     rpc: null,
@@ -83,6 +105,36 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
     this.props.onChildrenToggled(this.props.span.spanID);
   };
 
+  updateResolvedLocation = (e:{ data: { command: string, data: Record<string, SpanInfo> }}) => {
+    const message = e.data;
+    if (message.command === "setSpansWithResolvedLocation") {
+      const span = message.data[this.props.span.spanID];
+      this.setState({
+        hasResolvedLocation: span.hasResolvedLocation,
+        importance: span.importance
+      });
+    }
+  }
+
+  componentDidMount(): void {
+    window.addEventListener('message', this.updateResolvedLocation);
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('message', this.updateResolvedLocation);
+  }
+
+  getImportanceAltText(importance?: number): string {
+    switch (importance) {
+      case 1:
+        return "Showstopper";
+      case 2:
+        return "Critical";
+      default:
+        return "";
+    }
+  }
+
   render() {
     const {
       className,
@@ -122,6 +174,9 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
       hintSide = 'right';
     }
 
+    const codeIconUrl = window.VS_CODE_SETTINGS.staticPath ? new URL(codeIcon, window.VS_CODE_SETTINGS.staticPath).href : codeIcon;
+    const exclamationMarkIconUrl = window.VS_CODE_SETTINGS.staticPath ? new URL(exclamationMarkIcon, window.VS_CODE_SETTINGS.staticPath).href : exclamationMarkIcon;
+
     return (
       <TimelineRow
         className={`
@@ -170,6 +225,11 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
                 )}
               </span>
               <small className="endpoint-name">{rpc ? rpc.operationName : operationName}</small>
+              {
+                typeof this.state.importance === "number" && [1,2].includes(this.state.importance) && this.state.hasResolvedLocation &&
+                <img alt={this.getImportanceAltText(this.state.importance)} className="importance-icon" src={exclamationMarkIconUrl} />
+              }
+              {this.state.hasResolvedLocation && <img className="code-location-icon" src={codeIconUrl} />}
             </a>
             {span.references && span.references.length > 1 && (
               <ReferencesButton

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.css
@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.SpanDetail--operationNameLink {
+  font-weight: 500;
+  display: block;
+  font-size: 1.5em;
+}
+
 .SpanDetail--divider {
   background: #ddd;
 }