Add links to logs from trace

src/DataSource.ts

@@ -12,7 +12,7 @@ import {
 } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { mergeMap } from 'rxjs/operators';
 
 import {
   Group,
@@ -26,7 +26,7 @@ import {
 } from './types';
 import { parseGraphResponse, transformTraceResponse } from 'utils/transform';
 import { XRayLanguageProvider } from 'language_provider';
-import { makeLinks } from './utils/links';
+import { addTraceToLogsLinks, makeServiceMapLinks } from './utils/links';
 
 export class XrayDataSource extends DataSourceWithBackend<XrayQuery, XrayJsonData> {
   private instanceSettings: DataSourceInstanceSettings<XrayJsonData>;
@@ -43,13 +43,17 @@ export class XrayDataSource extends DataSourceWithBackend<XrayQuery, XrayJsonDat
     const processedRequest = processRequest(request, getTemplateSrv());
     let response = super.query(processedRequest);
     return response.pipe(
-      map((dataQueryResponse) => {
-        return {
-          ...dataQueryResponse,
-          data: dataQueryResponse.data.flatMap((frame) => {
+      mergeMap(async (dataQueryResponse) => {
+        const parsedData = await Promise.all(
+          dataQueryResponse.data.map((frame) => {
             const target = request.targets.find((t) => t.refId === frame.refId);
             return this.parseResponse(frame, target);
-          }),
+          })
+        );
+
+        return {
+          ...dataQueryResponse,
+          data: parsedData.flat(),
         };
       })
     );
@@ -142,11 +146,11 @@ export class XrayDataSource extends DataSourceWithBackend<XrayQuery, XrayJsonDat
     return `https://${region}.console.aws.amazon.com/xray/home?region=${region}`;
   }
 
-  private parseResponse(response: DataFrame, query?: XrayQuery): DataFrame[] {
+  private async parseResponse(response: DataFrame, query?: XrayQuery): Promise<DataFrame[]> {
     // TODO this would better be based on type but backend Go def does not have dataFrame.type
     switch (response.name) {
       case 'Traces':
-        return parseTraceResponse(response, query);
+        return parseTraceResponse(response, query, this.instanceSettings.jsonData.tracesToLogs?.datasourceUid);
       case 'TraceSummaries':
         return parseTracesListResponse(response, this.instanceSettings, query);
       case 'InsightSummaries':
@@ -203,7 +207,11 @@ function getDurationText(duration: DateTimeDuration) {
  The x-ray trace has a bit strange format where it comes as json and then some parts are string which also contains
  json, so some parts are escaped and we have to double parse that.
  */
-function parseTraceResponse(response: DataFrame, query?: XrayQuery): DataFrame[] {
+async function parseTraceResponse(
+  response: DataFrame,
+  query: XrayQuery | undefined,
+  logsDatasourceUid: string | undefined
+): Promise<DataFrame[]> {
   // Again assuming this will ge single field with single value which will be the trace data blob
   const traceData = response.fields[0].values.get(0);
   const traceParsed: XrayTraceDataRaw = JSON.parse(traceData);
@@ -220,6 +228,7 @@ function parseTraceResponse(response: DataFrame, query?: XrayQuery): DataFrame[]
   };
 
   const frame = transformTraceResponse(traceParsedForReal);
+  await addTraceToLogsLinks(frame, query?.region, logsDatasourceUid);
   frame.refId = query?.refId;
 
   return [frame];
@@ -262,12 +271,12 @@ function parseServiceMapResponse(
   const [servicesFrame, edgesFrame] = parseGraphResponse(response, query);
   const serviceQuery = 'service(id(name: "${__data.fields.title}", type: "${__data.fields.subTitle}"))';
   servicesFrame.fields[0].config = {
-    links: makeLinks(serviceQuery, instanceSettings, query),
+    links: makeServiceMapLinks(serviceQuery, instanceSettings, query),
   };
 
   const edgeQuery = 'edge("${__data.fields.sourceName}", "${__data.fields.targetName}")';
   edgesFrame.fields[0].config = {
-    links: makeLinks(edgeQuery, instanceSettings, query),
+    links: makeServiceMapLinks(edgeQuery, instanceSettings, query),
   };
   return [servicesFrame, edgesFrame];
 }

src/components/ConfigEditor/ConfigEditor.tsx

@@ -1,15 +1,25 @@
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, ConnectionConfig } from '@grafana/aws-sdk';
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { AwsAuthDataSourceSecureJsonData, ConnectionConfig } from '@grafana/aws-sdk';
+import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import React, { PureComponent } from 'react';
+import { TraceToLogs } from './TraceToLogs';
+import { XrayJsonData } from '../../types';
 
-export type Props = DataSourcePluginOptionsEditorProps<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;
+export type Props = DataSourcePluginOptionsEditorProps<XrayJsonData, AwsAuthDataSourceSecureJsonData>;
 
 export class ConfigEditor extends PureComponent<Props> {
   render() {
+    const { onOptionsChange, options } = this.props;
     return (
       <div>
         <ConnectionConfig {...this.props} />
-        {/* can add x-ray specific things here */}
+        <TraceToLogs
+          datasourceUid={options.jsonData.tracesToLogs?.datasourceUid}
+          onChange={(uid) =>
+            updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
+              datasourceUid: uid,
+            })
+          }
+        />
       </div>
     );
   }

src/components/ConfigEditor/TraceToLogs.tsx

@@ -0,0 +1,43 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme } from '@grafana/data';
+import { DataSourcePicker } from '@grafana/runtime';
+import { InlineField, InlineFieldRow, useStyles } from '@grafana/ui';
+import React from 'react';
+
+interface Props {
+  datasourceUid?: string;
+  onChange: (uid: string) => void;
+}
+
+export function TraceToLogs({ datasourceUid, onChange }: Props) {
+  const styles = useStyles(getStyles);
+
+  return (
+    <div className={css({ width: '100%' })}>
+      <h3 className="page-heading">Trace to logs</h3>
+
+      <div className={styles.infoText}>
+        Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log.
+      </div>
+
+      <InlineFieldRow>
+        <InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
+          <DataSourcePicker
+            pluginId="cloudwatch"
+            current={datasourceUid}
+            noDefault={true}
+            width={40}
+            onChange={(ds) => onChange(ds.uid)}
+          />
+        </InlineField>
+      </InlineFieldRow>
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme) => ({
+  infoText: css`
+    padding-bottom: ${theme.spacing.md};
+    color: ${theme.colors.textSemiWeak};
+  `,
+});

src/types.ts

@@ -53,7 +53,9 @@ export enum XrayQueryType {
 }
 
 export interface XrayJsonData extends AwsAuthDataSourceJsonData {
-  // Can add X-Ray specific values here
+  tracesToLogs?: {
+    datasourceUid: string;
+  };
 }
 
 export interface TSDBResponse<T = any> {

src/utils/links.ts

@@ -1,7 +1,19 @@
 import { XrayQuery, XrayQueryType } from '../types';
-import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataFrame, DataLink, DataSourceInstanceSettings } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 
-export function makeLinks(itemQuery: string, instanceSettings: DataSourceInstanceSettings, dataQuery?: XrayQuery) {
+/**
+ * Create links that will be shown when clicked on a service in service map. They target the same data source but
+ * queries for traces related to that particular service
+ * @param itemQuery String query part that should filter a particular service
+ * @param instanceSettings
+ * @param dataQuery Existing query to pass on any additional query data so they stay the same, like region.
+ */
+export function makeServiceMapLinks(
+  itemQuery: string,
+  instanceSettings: DataSourceInstanceSettings,
+  dataQuery?: XrayQuery
+) {
   const makeLink = linkFactory(itemQuery, instanceSettings, dataQuery);
   return [
     makeLink('Traces/All', XrayQueryType.getTraceSummaries),
@@ -15,8 +27,52 @@ export function makeLinks(itemQuery: string, instanceSettings: DataSourceInstanc
   ];
 }
 
+export async function addTraceToLogsLinks(frame: DataFrame, region?: string, datasourceUid?: string) {
+  if (!datasourceUid) {
+    return;
+  }
+  try {
+    const spanField = frame.fields.find((f) => f.name === 'spanID')!;
+    const requestIdField = frame.fields.find((f) => f.name === '__request_id')!;
+    const link = await makeTraceToLogsLink(datasourceUid, region, {
+      hasRequestId: Boolean(requestIdField.values.get(0)),
+    });
+    spanField.config.links = [link];
+  } catch (error) {
+    // There are some things that can go wrong like datasourceUID not existing anymore etc. Does not seem useful to
+    // error the whole query in that case so we will just skip the links.
+    console.error(error);
+  }
+}
+
+async function makeTraceToLogsLink(
+  datasourceUid: string,
+  region = 'default',
+  options: { hasRequestId: boolean }
+): Promise<DataLink> {
+  const logsDS = await getDataSourceSrv().get(datasourceUid);
+  const filter = options.hasRequestId
+    ? 'filter @requestId = "${__data.fields.__request_id}" or @message like "${__data.fields.traceID}"'
+    : 'filter @message like "${__data.fields.traceID}"';
+  return {
+    title: 'CloudWatch Logs',
+    url: '',
+    internal: {
+      query: {
+        region,
+        queryMode: 'Logs',
+        // Just use the data from the data frame. Needs to be filled in during transform.
+        logGroupNames: ['${__data.fields.__log_group}'],
+        expression: `fields @message | ${filter}`,
+      },
+      datasourceUid,
+      datasourceName: logsDS.name,
+    },
+  };
+}
+
 function linkFactory(itemQuery: string, instanceSettings: DataSourceInstanceSettings, dataQuery?: XrayQuery) {
-  return (title: string, queryType: XrayQueryType, queryFilter?: string) => {
+  return (title: string, queryType: XrayQueryType, queryFilter?: string): DataLink => {
     return {
       title,
       url: '',