Support sql direct query visualizations

common/query_manager/query_parser/sql_query_parser.test.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getGroupBy } from './sql_query_parser';
+
+describe('sql parser', () => {
+  it('parses a single field', async () => {
+    const results = getGroupBy('select count(*), field from index group by field');
+    expect(results).toMatchInlineSnapshot(`
+      Object {
+        "aggregations": Array [
+          Object {
+            "function": Object {
+              "name": "count",
+              "percentile_agg_function": "",
+              "value_expression": "*",
+            },
+            "function_alias": "",
+          },
+        ],
+        "groupby": Object {
+          "group_fields": Array [
+            Object {
+              "name": "field",
+            },
+          ],
+          "span": null,
+        },
+      }
+    `);
+  });
+
+  it('removes backticks', async () => {
+    const results = getGroupBy('select count(*), `field` from index group by `field`');
+    expect(results).toMatchInlineSnapshot(`
+      Object {
+        "aggregations": Array [
+          Object {
+            "function": Object {
+              "name": "count",
+              "percentile_agg_function": "",
+              "value_expression": "*",
+            },
+            "function_alias": "",
+          },
+        ],
+        "groupby": Object {
+          "group_fields": Array [
+            Object {
+              "name": "field",
+            },
+          ],
+          "span": null,
+        },
+      }
+    `);
+  });
+
+  it('parses multiple fields', async () => {
+    const results = getGroupBy(
+      'select a, count(*) as b, avg(c) as d from index where 1 = 1 group by span(a, 1d) as e, f, g limit 10'
+    );
+    expect(results).toMatchInlineSnapshot(`
+      Object {
+        "aggregations": Array [
+          Object {
+            "function": Object {
+              "name": "count",
+              "percentile_agg_function": "",
+              "value_expression": "*",
+            },
+            "function_alias": "b",
+          },
+          Object {
+            "function": Object {
+              "name": "avg",
+              "percentile_agg_function": "",
+              "value_expression": "c",
+            },
+            "function_alias": "d",
+          },
+        ],
+        "groupby": Object {
+          "group_fields": Array [
+            Object {
+              "name": "f",
+            },
+            Object {
+              "name": "g",
+            },
+          ],
+          "span": Object {
+            "customLabel": "e",
+            "span_expression": Object {
+              "field": "a",
+              "literal_value": "1",
+              "time_unit": "d",
+              "type": "",
+            },
+          },
+        },
+      }
+    `);
+  });
+});

common/query_manager/query_parser/sql_query_parser.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { statsChunk } from '../ast/types/stats';
+
+/**
+ * This is a temporary solution before introducing SQL antlrs.
+ * @param query - sql query
+ */
+export const getGroupBy = (query: string): Pick<statsChunk, 'aggregations' | 'groupby'> => {
+  let match;
+  const regex = /(?:SELECT\s+)?(?:(\w+)\(([^\)]+)\))(?:\s+AS\s+(\S+))?\s*(?:,|\bFROM\b|$)|(?:GROUP\s+BY\s+)(?:SPAN\(([^,]+?)(?:\s*,\s*)(\d+)(\w+)\)(?:\s+AS\s+(\S+))?)?((?:(?:\s*,\s*)?(?:[^\s,]+))+)/gi;
+  const chunk: Pick<statsChunk, 'aggregations' | 'groupby'> = {
+    aggregations: [],
+    groupby: { group_fields: [], span: null },
+  };
+
+  while ((match = regex.exec(query)) !== null) {
+    for (let i = 0; i < match.length; i++) {
+      if (match[i] === undefined) match[i] = '';
+    }
+
+    const [
+      _,
+      aggFunc,
+      aggExpr,
+      aggAlias,
+      spanField,
+      spanAmount,
+      spanUnit,
+      spanAlias,
+      groupByFields,
+    ] = match;
+    if (aggFunc) {
+      chunk.aggregations.push({
+        function_alias: aggAlias,
+        function: {
+          name: aggFunc,
+          value_expression: aggExpr,
+          percentile_agg_function: '',
+        },
+      });
+    }
+    if (spanField && spanAmount && spanUnit) {
+      chunk.groupby.span = {
+        customLabel: spanAlias,
+        span_expression: {
+          field: spanField,
+          type: '',
+          literal_value: spanAmount,
+          time_unit: spanUnit,
+        },
+      };
+    }
+    if (groupByFields) {
+      chunk.groupby.group_fields.push(
+        ...groupByFields
+          .split(',')
+          .map((field) => ({ name: field.replace(/^\s*`?|`?\s*$/g, '') }))
+          .filter((field) => field.name)
+      );
+    }
+  }
+  return chunk;
+};

public/components/event_analytics/explorer/explorer.tsx

@@ -66,6 +66,7 @@
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
 import { QueryManager } from '../../../../common/query_manager';
+import { getGroupBy } from '../../../../common/query_manager/query_parser/sql_query_parser';
 import {
   IExplorerProps,
   IField,
@@ -128,7 +129,6 @@
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
-import { DirectQueryVisualization } from './visualizations/direct_query_vis';
 
 export const Explorer = ({
   pplService,
@@ -204,7 +204,7 @@
     return explorerSearchMeta.datasources?.[0]?.type
       ? dataSourcePluggables[explorerSearchMeta?.datasources[0]?.type]
       : dataSourcePluggables.DEFAULT_INDEX_PATTERNS;
   }, [explorerSearchMeta.datasources]);
   const { ui } =
     currentPluggable?.getComponentSetForVariation(
       'languages',
@@ -288,10 +288,10 @@
           setRefresh({});
         });
     }
   }, []);
 
   const getErrorHandler = (title: string) => {
     return (error: any) => {
       if (coreRefs.summarizeEnabled) return;
       const formattedError = formatError(error.name, error.message, error.body.message);
       notifications.toasts.addError(formattedError, {
@@ -406,7 +406,7 @@
         callbackInApp(() => prepareAvailability());
       }
     }
   }, [appBasedRef.current]);
 
   useEffect(() => {
     if (
@@ -415,14 +415,14 @@
     ) {
       setSelectedContentTab(TAB_CHART_ID);
     }
   }, []);
 
   useEffect(() => {
     if (savedObjectId && !isObjectIdUpdatedFromSave.current) {
       updateTabData(savedObjectId);
       isObjectIdUpdatedFromSave.current = false;
     }
   }, [savedObjectId]);
 
   const handleTimePickerChange = async (timeRange: string[]) => {
     if (appLogEvents) {
@@ -496,7 +496,7 @@
       return hits;
     }
     return 0;
   }, [countDistribution?.data]);
 
   const mainContent = useMemo(() => {
     return (
@@ -627,7 +627,7 @@
         )}
       </div>
     );
   }, [
     isPanelTextFieldInvalid,
     explorerData,
     explorerFields,
@@ -642,7 +642,11 @@
   const visualizationSettings = !isEmpty(userVizConfigs[curVisId])
     ? { ...userVizConfigs[curVisId] }
     : {
-        dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
+        dataConfig: getDefaultVisConfig(
+          explorerSearchMeta.lang === QUERY_LANGUAGE.SQL
+            ? getGroupBy(tempQuery)
+            : queryManager.queryParser().parse(tempQuery).getStats()
+        ),
       };
 
   const visualizations: IVisualizationContainerProps = useMemo(() => {
@@ -658,7 +662,7 @@
       appData: { fromApp: appLogEvents },
       explorer: { explorerData, explorerFields, query, http, pplService },
     });
   }, [curVisId, explorerVisualizations, explorerFields, query, userVizConfigs]);
 
   const callbackForConfig = (childFunc: () => void) => {
     if (childFunc && triggerAvailability) {
@@ -667,8 +671,8 @@
     }
   };
 
-  const explorerVis = useMemo(() => {
-    return isDefaultDataSourceType || appLogEvents ? (
+  const explorerVis = useMemo(
+    () => (
       <ExplorerVisualizations
         query={query}
         curVisId={curVisId}
@@ -680,23 +684,19 @@
         handleOverrideTimestamp={handleOverrideTimestamp}
         callback={callbackForConfig}
         queryManager={queryManager}
+        shouldShowConfigurationUI={isDefaultDataSourceType}
       />
-    ) : (
-      <DirectQueryVisualization
-        currentDataSource={
-          explorerSearchMeta.datasources ? explorerSearchMeta.datasources?.[0]?.label : ''
-        }
-      />
-    );
-  }, [
-    query,
-    curVisId,
-    explorerFields,
-    explorerVisualizations,
-    explorerData,
-    visualizations,
-    explorerSearchMeta.datasources,
-  ]);
+    ),
+    [
+      query,
+      curVisId,
+      explorerFields,
+      explorerVisualizations,
+      explorerData,
+      visualizations,
+      explorerSearchMeta.datasources,
+    ]
+  );
 
   const contentTabs = [
     {