CloudWatch: Track Logs Insights query language (#100254)

Co-authored-by: Kevin Yu <kevinwcyu@users.noreply.github.com>

public/app/plugins/datasource/cloudwatch/__mocks__/dashboardOnLoadedEvent.ts

@@ -2,6 +2,21 @@ import { DashboardLoadedEvent } from '@grafana/data';
 
 import { CloudWatchQuery } from '../types';
 
+const baseLogsQuery = {
+  datasource: {
+    type: 'cloudwatch',
+    uid: 'P7DC3E4760CFAC4AP',
+  },
+  expression: 'fields @timestamp, @message | sort @timestamp desc | limit 300     ',
+  id: '',
+  logGroupNames: ['/aws/lambda/hello-world', '/aws/sagemaker/Endpoints/test', '/aws/sagemaker/test'],
+  namespace: '',
+  queryMode: 'Logs',
+  refId: 'A',
+  region: 'default',
+  statsGroups: [],
+};
+
 export const CloudWatchDashboardLoadedEvent = new DashboardLoadedEvent({
   dashboardId: 'dashboard123',
   orgId: 1,
@@ -460,18 +475,23 @@ export const CloudWatchDashboardLoadedEvent = new DashboardLoadedEvent({
         statistic: 'Average',
       },
       {
-        datasource: {
+        ...baseLogsQuery,
-          type: 'cloudwatch',
-          uid: 'P7DC3E4760CFAC4AP',
       },
-        expression: 'fields @timestamp, @message | sort @timestamp desc | limit 300     ',
+      {
-        id: '',
+        ...baseLogsQuery,
-        logGroupNames: ['/aws/lambda/hello-world', '/aws/sagemaker/Endpoints/test', '/aws/sagemaker/test'],
+        queryLanguage: 'PPL',
-        namespace: '',
+      },
-        queryMode: 'Logs',
+      {
-        refId: 'A',
+        ...baseLogsQuery,
-        region: 'default',
+        queryLanguage: 'PPL',
-        statsGroups: [],
+      },
+      {
+        ...baseLogsQuery,
+        queryLanguage: 'SQL',
+      },
+      {
+        ...baseLogsQuery,
+        queryLanguage: 'CWLI',
       },
       {
         alias: '',

public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx

@@ -6,10 +6,12 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Collapse, useStyles2, Text } from '@grafana/ui';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 
+import { trackSampleQuerySelection } from '../../tracking';
 import { CloudWatchLogsQuery, CloudWatchQuery, LogsQueryLanguage } from '../../types';
 
 import * as sampleQueries from './sampleQueries';
 import { cwliTokenizer, pplTokenizer, sqlTokenizer } from './tokenizer';
+
 interface QueryExample {
   category: string;
   examples: sampleQueries.SampleQuery[];
@@ -89,11 +91,26 @@ type Props = {
   query: CloudWatchQuery;
 };
 const isLogsQuery = (query: CloudWatchQuery): query is CloudWatchLogsQuery => query.queryMode === 'Logs';
+
 const LogsCheatSheet = (props: Props) => {
   const styles = useStyles2(getStyles);
-  const queryLanugage: LogsQueryLanguage =
+  const queryLanguage: LogsQueryLanguage =
     (isLogsQuery(props.query) && props.query.queryLanguage) || LogsQueryLanguage.CWLI;
 
+  const onClickExample = (query: sampleQueries.SampleQuery, queryCategory: string) => {
+    props.onClickExample({
+      ...props.query,
+      refId: props.query.refId ?? 'A',
+      expression: query.expr[queryLanguage],
+      queryMode: 'Logs',
+      region: props.query.region,
+      id: props.query.refId ?? 'A',
+      logGroupNames: 'logGroupNames' in props.query ? props.query.logGroupNames : [],
+      logGroups: 'logGroups' in props.query ? props.query.logGroups : [],
+    });
+    trackSampleQuerySelection({ queryLanguage, queryCategory });
+  };
+
   return (
     <div>
       <div className={styles.heading}>
@@ -106,7 +123,7 @@ const LogsCheatSheet = (props: Props) => {
           <div key={`cat-${i}`}>
             {query.examples.map((item, j) => (
               <>
-                {item.expr[queryLanugage] && (
+                {item.expr[queryLanguage] && (
                   <>
                     <Text variant="h6" weight="bold">
                       {item.title}
@@ -114,21 +131,10 @@ const LogsCheatSheet = (props: Props) => {
                     <button
                       type="button"
                       className={styles.cheatSheetExample}
-                      key={item.expr[queryLanugage]}
+                      key={item.expr[queryLanguage]}
-                      onClick={() =>
+                      onClick={() => onClickExample(item, query.category)}
-                        props.onClickExample({
-                          ...props.query,
-                          refId: props.query.refId ?? 'A',
-                          expression: item.expr[queryLanugage],
-                          queryMode: 'Logs',
-                          region: props.query.region,
-                          id: props.query.refId ?? 'A',
-                          logGroupNames: 'logGroupNames' in props.query ? props.query.logGroupNames : [],
-                          logGroups: 'logGroups' in props.query ? props.query.logGroups : [],
-                        })
-                      }
                     >
-                      <pre>{renderHighlightedMarkup(item.expr[queryLanugage], `item-${j}`, queryLanugage)}</pre>
+                      <pre>{renderHighlightedMarkup(item.expr[queryLanguage], `item-${j}`, queryLanguage)}</pre>
                     </button>
                   </>
                 )}

public/app/plugins/datasource/cloudwatch/tracking.test.ts

@@ -27,7 +27,10 @@ describe('onDashboardLoadedHandler', () => {
       dashboard_id: 'dashboard123',
       grafana_version: 'v9.0.0',
       org_id: 1,
-      logs_queries_count: 1,
+      logs_queries_count: 5,
+      logs_cwli_queries_count: 2,
+      logs_sql_queries_count: 1,
+      logs_ppl_queries_count: 2,
       metrics_queries_count: 21,
       metrics_query_builder_count: 3,
       metrics_query_code_count: 4,

public/app/plugins/datasource/cloudwatch/tracking.ts

@@ -8,6 +8,7 @@ import {
   CloudWatchLogsQuery,
   CloudWatchMetricsQuery,
   CloudWatchQuery,
+  LogsQueryLanguage,
   MetricEditorMode,
   MetricQueryType,
 } from './types';
@@ -21,6 +22,15 @@ type CloudWatchOnDashboardLoadedTrackingEvent = {
   /* The number of CloudWatch logs queries present in the dashboard*/
   logs_queries_count: number;
 
+  /* The number of Logs queries that use Logs Insights query language */
+  logs_cwli_queries_count: number;
+
+  /* The number of Logs queries that use SQL language */
+  logs_sql_queries_count: number;
+
+  /* The number of Logs queries that use PPL language */
+  logs_ppl_queries_count: number;
+
   /* The number of CloudWatch metrics queries present in the dashboard*/
   metrics_queries_count: number;
 
@@ -88,6 +98,11 @@ export const onDashboardLoadedHandler = ({
       dashboard_id: dashboardId,
       org_id: orgId,
       logs_queries_count: logsQueries?.length,
+      logs_cwli_queries_count: logsQueries?.filter(
+        (q) => !q.queryLanguage || q.queryLanguage === LogsQueryLanguage.CWLI
+      ).length,
+      logs_sql_queries_count: logsQueries?.filter((q) => q.queryLanguage === LogsQueryLanguage.SQL).length,
+      logs_ppl_queries_count: logsQueries?.filter((q) => q.queryLanguage === LogsQueryLanguage.PPL).length,
       metrics_queries_count: metricsQueries?.length,
       metrics_search_count: 0,
       metrics_search_builder_count: 0,
@@ -124,5 +139,15 @@ export const onDashboardLoadedHandler = ({
   }
 };
 
+type SampleQueryTrackingEvent = {
+  queryLanguage: LogsQueryLanguage;
+  queryCategory: string;
+};
+
+export const trackSampleQuerySelection = (props: SampleQueryTrackingEvent) => {
+  const { queryLanguage, queryCategory } = props;
+  reportInteraction('cloudwatch-logs-cheat-sheet-query-clicked', { queryLanguage, queryCategory });
+};
+
 const isMetricSearchBuilder = (q: CloudWatchMetricsQuery) =>
   Boolean(q.metricQueryType === MetricQueryType.Search && q.metricEditorMode === MetricEditorMode.Builder);