feat: connect logs and traces

src/components/grafana/dashboards/logs-and-traces.ts

@@ -3,8 +3,12 @@ import { GrafanaDashboardBuilder } from './builder';
 import { createStatusCodeVariable } from '../variables/status-code';
 import { createLimitVariable } from '../variables/limit';
 import { createLogLevelVariable } from '../variables/log-level';
-import { createLogsViewPanel } from '../panels/logs';
 import { createSearchTextVariable } from '../variables/search-text';
+import { createTraceIdVariable } from '../variables/trace-id';
+import {
+  createLogsViewPanel,
+  createTracesViewPanel,
+} from '../panels/logs-traces';
 
 export namespace LogsAndTracesDashboard {
   export type Args = {
@@ -28,7 +32,8 @@ export function createLogsAndTracesDashboard(
   config: LogsAndTracesDashboard.Args,
 ): GrafanaDashboardBuilder.CreateDashboard {
   const argsWithDefaults = mergeWithDefaults(defaults, config);
-  const { title, logsDataSourceName, logGroupName } = argsWithDefaults;
+  const { title, logsDataSourceName, logGroupName, tracesDataSourceName } =
+    argsWithDefaults;
 
   return new GrafanaDashboardBuilder(config.name)
     .withConfig(argsWithDefaults.dashboardConfig)
@@ -37,11 +42,17 @@ export function createLogsAndTracesDashboard(
     .addVariable(createStatusCodeVariable())
     .addVariable(createLogLevelVariable())
     .addVariable(createLimitVariable())
+    .addVariable(createTraceIdVariable())
     .addPanel(
       createLogsViewPanel({
         logGroupName,
         dataSourceName: logsDataSourceName,
       }),
     )
+    .addPanel(
+      createTracesViewPanel({
+        dataSourceName: tracesDataSourceName,
+      }),
+    )
     .build();
 }

src/components/grafana/panels/helpers.ts

@@ -1,4 +1,4 @@
-import { Panel, Metric, Transformation } from './types';
+import { Panel, Metric, Target, Transformation } from './types';
 
 const percentageFieldConfig = {
   unit: 'percent',
@@ -141,25 +141,20 @@ export function createTablePanel(
   title: string,
   position: Panel.Position,
   dataSource: string,
-  logGroupName: string,
-  expression: string,
-  transformations: Transformation[],
+  targets: Target[],
+  transformations?: Transformation[],
+  overrides?: any,
 ): Panel {
   return {
     type: 'table',
     title,
     gridPos: position,
     datasource: dataSource,
-    targets: [
-      {
-        expression,
-        logGroups: [{ name: logGroupName }],
-        queryMode: 'Logs',
-      },
-    ],
+    targets,
     transformations,
     fieldConfig: {
       defaults: {},
+      overrides,
     },
   };
 }

src/components/grafana/panels/logs-traces.ts

@@ -0,0 +1,107 @@
+import { Panel } from './types';
+import { createTablePanel } from './helpers';
+
+export function createLogsViewPanel(config: {
+  logGroupName: string;
+  dataSourceName: string;
+}): Panel {
+  return createTablePanel(
+    'Logs',
+    { x: 0, y: 0, w: 24, h: 12 },
+    config.dataSourceName,
+    [
+      {
+        expression: `fields @Timestamp, trace_id as traceId
+          | parse @message '"body":"*"' as body
+          | parse @message '"res":{"statusCode":*}' as statusCode
+          | parse @message '"severity_text":"*"' as logLevel
+          | filter body like /\${search_text}/
+          | filter \${status_code}
+          | filter \${log_level}
+          | sort @timestamp desc
+          | limit \${limit}`,
+        logGroups: [{ name: config.logGroupName }],
+        queryMode: 'Logs',
+      },
+    ],
+    [
+      {
+        id: 'organize',
+        options: {
+          renameByName: {
+            statusCode: 'Status Code',
+            logLevel: 'Log Level',
+            body: 'Body',
+            '@timestamp': 'Timestamp',
+            traceId: 'Trace Id',
+          },
+          indexByName: {
+            '@timestamp': 0,
+            statusCode: 1,
+            logLevel: 2,
+            body: 3,
+          },
+          excludeByName: {
+            Value: true,
+          },
+        },
+      },
+      {
+        id: 'sortBy',
+        options: {
+          sort: [
+            {
+              field: 'Time',
+              desc: true,
+            },
+          ],
+        },
+      },
+    ],
+    [
+      {
+        matcher: {
+          id: 'byName',
+          options: 'traceId',
+        },
+        properties: [
+          {
+            id: 'displayName',
+            value: 'Traces',
+          },
+          {
+            id: 'links',
+            value: [
+              {
+                title: 'Open traces',
+                url: `/d/\${__dashboard.uid}/\${__dashboard}?var-traceId=\${__data.fields.traceId}`,
+              },
+            ],
+          },
+          {
+            id: 'custom.cellOptions',
+            value: {
+              type: 'data-links',
+            },
+          },
+        ],
+      },
+    ],
+  );
+}
+
+export function createTracesViewPanel(config: {
+  dataSourceName: string;
+}): Panel {
+  return createTablePanel(
+    'Traces',
+    { x: 0, y: 0, w: 24, h: 12 },
+    config.dataSourceName,
+    [
+      {
+        query: '$traceId',
+        queryType: 'getTrace',
+      },
+    ],
+  );
+}

src/components/grafana/panels/types.ts

@@ -3,14 +3,7 @@ export type Panel = {
   gridPos: Panel.Position;
   type: string;
   datasource: string;
-  targets: {
-    expr?: string;
-    expression?: string;
-    legendFormat?: string;
-    logGroups?: { name: string }[];
-    queryMode?: string;
-    queryType?: string;
-  }[];
+  targets: Target[];
   fieldConfig: {
     defaults: {
       unit?: string;
@@ -28,6 +21,16 @@ export type Panel = {
         spanNulls: boolean;
       };
     };
+    overrides?: {
+      matcher: {
+        id: string;
+        options: string;
+      };
+      properties: {
+        id: string;
+        value: string | { title: string; url: string }[] | { type: string };
+      }[];
+    };
   };
   transformations?: Transformation[];
   options?: {
@@ -52,6 +55,16 @@ export namespace Panel {
   };
 }
 
+export type Target = {
+  expr?: string;
+  expression?: string;
+  legendFormat?: string;
+  logGroups?: { name: string }[];
+  queryMode?: string;
+  queryType?: string;
+  query?: string;
+};
+
 export type Metric = {
   label: string;
   query: string;

src/components/grafana/variables/helpers.ts

@@ -26,10 +26,12 @@ export function createCustomVariable(
 export function createTextBoxVariable(
   name: string,
   label: string,
+  hide?: string,
 ): TextBoxVariable {
   return {
     type: 'textbox',
     name,
     label,
+    hide,
   };
 }

src/components/grafana/variables/trace-id.ts

@@ -0,0 +1,5 @@
+import { createTextBoxVariable } from './helpers';
+
+export function createTraceIdVariable() {
+  return createTextBoxVariable('traceId', 'Trace Id', 'hideVariable');
+}

src/components/grafana/variables/types.ts

@@ -16,6 +16,7 @@ export type TextBoxVariable = {
   type: 'textbox';
   name: string;
   label: string;
+  hide?: string;
 };
 
 export type Variable = CustomVariable | TextBoxVariable;