Feature query regex

common/utils/index.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+export { getIndexPatternFromRawQuery } from './query_utils';

common/utils/query_utils.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+export const getIndexPatternFromRawQuery = (query: string) : string => {
+  const matches = query.match(/(source|index)\s*=\s*([^|\s]+)/i);
+  if (matches) {
+    return matches[2];
+  }
+  return '';
+};

public/components/app.tsx

@@ -22,8 +22,8 @@ import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 import { Home as CustomPanelsHome } from './custom_panels/home';
 import { CustomPanelView } from './custom_panels/custom_panel_view';
 import { Home as EventExplorerHome } from './explorer/home';
-import { LogExplorer } from './explorer/logExplorer';
-import { observabilityTitle } from '../../common';
+import { LogExplorer } from './explorer/log_explorer';
+import { observabilityTitle } from '../../common/constants/shared';
 
 interface ObservabilityAppDeps {
   CoreStart: CoreStart;

public/components/explorer/dataGrid.tsx → public/components/explorer/data_grid.tsx

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import './dataGrid.scss';
+import './data_grid.scss';
 
 import React, { useMemo } from 'react';
 import _ from 'lodash';

public/components/explorer/explorer.tsx

@@ -25,17 +25,17 @@ import {
 } from '@elastic/eui';
 import classNames from 'classnames';
 import { Search } from '../common/seach/search';
-import { CountDistribution } from './visualizations/countDistribution';
-import { DataGrid } from './dataGrid';
+import { CountDistribution } from './visualizations/count_distribution';
+import { DataGrid } from './data_grid';
 import { Sidebar } from './sidebar';
-import { NoResults } from './noResults';
+import { NoResults } from './no_results';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import {
   IField,
   IQueryTab
-} from '../../common/types/explorer';
+} from '../../../common/types/explorer';
 import {
   TAB_CHART_TITLE,
   TAB_EVENT_TITLE,
@@ -44,19 +44,20 @@ import {
   RAW_QUERY,
   SELECTED_FIELDS,
   UNSELECTED_FIELDS
-} from '../../common/constants/explorer';
+} from '../../../common/constants/explorer';
+import { getIndexPatternFromRawQuery } from '../../../common/utils';
 import { 
   useFetchEvents,
   useFetchVisualizations
 } from './hooks';
 import { 
   changeQuery,
   selectQueries
-} from './slices/querySlice';
-import { selectQueryResult } from './slices/queryResultSlice';
-import { selectFields, updateFields } from './slices/fieldSlice';
-import { selectCountDistribution } from './slices/countDistributionSlice';
-import { selectExplorerVisualization } from './slices/visualizationSlice';
+} from './slices/query_slice';
+import { selectQueryResult } from './slices/query_result_slice';
+import { selectFields, updateFields } from './slices/field_slice';
+import { selectCountDistribution } from './slices/count_distribution_slice';
+import { selectExplorerVisualization } from './slices/visualization_slice';
 
 const TAB_EVENT_ID = _.uniqueId(TAB_EVENT_ID_TXT_PFX);
 const TAB_CHART_ID = _.uniqueId(TAB_CHART_ID_TXT_PFX);
@@ -113,18 +114,21 @@ export const Explorer = ({
     [setFixedScrollEl]
   );
 
-  const getIndexFromRawQuery = (rawQuery: string) => rawQuery.split('=')[1].split(' ')[0];
-
-  useEffect(() => {
+  const fetchData = () => {
     if (!query) return;
-    if (query.includes('stats')) {
-      const index = getIndexFromRawQuery(query);
+    if (query.match(/\|\s*stats/i)) {
+      const index = getIndexPatternFromRawQuery(query);
+      if (!index) return;
       getAvailableFields(`search source=${index}`);
       getVisualizations();
     } else {
       getEvents();
-      getCountVisualizations('m');
+      getCountVisualizations('h');
     }
+  };
+
+  useEffect(() => {
+    fetchData();
   }, []);
 
   const handleAddField = (field: IField) => toggleFields(field, UNSELECTED_FIELDS, SELECTED_FIELDS);
@@ -415,18 +419,11 @@ export const Explorer = ({
 
   const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedContentTab(selectedTab.id);
 
-  const handleQuerySearch = (tabId: string) => {
-    if (query.includes('stats')) {
-      const index = getIndexFromRawQuery(query); // index
-      getAvailableFields(`search source=${index}`);
-      getVisualizations();
-      return;
-    } 
-    getEvents();
-    getCountVisualizations('m');
+  const handleQuerySearch = () => {
+    fetchData();
   }
 
-  const handleQueryChange = (query, tabId) => {
+  const handleQueryChange = (query: string, tabId: string) => {
     dispatch(changeQuery({
       tabId,
       query: {

public/components/explorer/home.tsx

@@ -12,10 +12,10 @@
 import React from 'react';
 import { uniqueId } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { changeQuery } from './slices/querySlice';
-import { initialTabId } from '../../framework/redux/store/sharedState';
+import { changeQuery } from './slices/query_slice';
+import { initialTabId } from '../../framework/redux/store/shared_state';
 import { useHistory } from 'react-router-dom';
-import { selectQueries } from './slices/querySlice';
+import { selectQueries } from './slices/query_slice';
 import {
   EuiPage,
   EuiPageBody,
@@ -30,7 +30,7 @@ import {
   EuiFlexItem
 } from '@elastic/eui';
 import { Search } from '../common/seach/search';
-import { RAW_QUERY } from '../../common/constants/explorer';
+import { RAW_QUERY } from '../../../common/constants/explorer';
 
 export const Home = (props: any) => {
 
@@ -40,18 +40,14 @@ export const Home = (props: any) => {
 
   const queryHistories = [
     {
-      query: "source=opensearch_dashboards_sample_data_flights | where timestamp > timestamp('2021-07-01 00:00:00') and timestamp < timestamp('2021-07-02 00:00:00')",
-      iconType: "tokenEnum"
-    },
-    {
-      query: "source=opensearch_dashboards_sample_data_flights",
+      query: "search source=opensearch_dashboards_sample_data_logs | where utc_time > timestamp('2021-07-01 00:00:00') and utc_time < timestamp('2021-07-02 00:00:00')",
       iconType: "tokenEnum"
     }
   ];
 
   const visHistories = [
     {
-      query: "source=opensearch_dashboards_sample_data_flights | where timestamp > timestamp('2021-07-01 00:00:00') and timestamp < timestamp('2021-07-08 00:00:00') | stats count(Origin) by span(timestamp, '2h')",
+      query: "search source=opensearch_dashboards_sample_data_logs | where utc_time > timestamp('2021-07-01 00:00:00') and utc_time < timestamp('2021-07-02 00:00:00') | stats count() by span(utc_time, '15m')",
       iconType: "tokenHistogram"
     }
   ];

public/components/explorer/hooks/index.ts

@@ -9,5 +9,5 @@
  * GitHub history for details.
  */
 
-export { useFetchEvents } from './useFetchEvents';
-export { useFetchVisualizations } from './useFetchVisualizations';
+export { useFetchEvents } from './use_fetch_events';
+export { useFetchVisualizations } from './use_fetch_visualizations';

public/components/explorer/hooks/useFetchEvents.ts → public/components/explorer/hooks/use_fetch_events.ts

@@ -19,12 +19,12 @@ import {
   RAW_QUERY,
   SELECTED_FIELDS,
   UNSELECTED_FIELDS
-} from '../../../common/constants/explorer';
-import { fetchSuccess, reset as queryResultReset } from '../slices/queryResultSlice';
-import { selectQueries } from '../slices/querySlice';
+} from '../../../../common/constants/explorer';
+import { fetchSuccess, reset as queryResultReset } from '../slices/query_result_slice';
+import { selectQueries } from '../slices/query_slice';
 import {
   updateFields,
-} from '../slices/fieldSlice';
+} from '../slices/field_slice';
 
 export const useFetchEvents = ({
   pplService,

public/components/explorer/hooks/useFetchVisualizations.ts → public/components/explorer/hooks/use_fetch_visualizations.ts

@@ -16,10 +16,10 @@ import {
 } from 'react-redux';
 import { 
   RAW_QUERY
-} from '../../../common/constants/explorer';
-import { render as renderCountDis } from '../slices/countDistributionSlice';
-import { selectQueries } from '../slices/querySlice';
-import { render as renderExplorerVis } from '../slices/visualizationSlice';
+} from '../../../../common/constants/explorer';
+import { render as renderCountDis } from '../slices/count_distribution_slice';
+import { selectQueries } from '../slices/query_slice';
+import { render as renderExplorerVis } from '../slices/visualization_slice';
 
 export const useFetchVisualizations = ({
   pplService,

public/components/explorer/logExplorer.tsx → public/components/explorer/log_explorer.tsx

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import './logExplorer.scss';
+import './log_explorer.scss';
 import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector, batch } from 'react-redux';
 import { 
@@ -24,29 +24,29 @@ import {
   EuiTabbedContent
 } from '@elastic/eui';
 import { Explorer } from './explorer';
-import { ILogExplorerProps } from '../../common/types/explorer';
+import { ILogExplorerProps } from '../../../common/types/explorer';
 import {
   TAB_TITLE,
   TAB_ID_TXT_PFX
-} from '../../common/constants/explorer';
+} from '../../../common/constants/explorer';
 import { 
   selectQueryTabs,
   addTab,
   setSelectedQueryTab,
   removeTab
-} from './slices/queryTabSlice';
+} from './slices/query_tab_slice';
 import { 
   init as initFields,
   remove as removefields
-} from './slices/fieldSlice';
+} from './slices/field_slice';
 import {
   init as initQuery,
   remove as removeQuery
-} from './slices/querySlice';
+} from './slices/query_slice';
 import { 
   init as initQueryResult,
   remove as removeQueryResult,
-} from './slices/queryResultSlice';
+} from './slices/query_result_slice';
 
 export const LogExplorer = ({
   pplService,

public/components/explorer/reducers/index.ts

@@ -9,4 +9,4 @@
  * GitHub history for details.
  */
 
-export { fetchSuccess } from './fetchReducers';
+export { fetchSuccess } from './fetch_reducers';

public/components/explorer/slices/countDistributionSlice.ts → public/components/explorer/slices/count_distribution_slice.ts

@@ -12,8 +12,8 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/sharedState';
-import { REDUX_EXPL_SLICE_COUNT_DISTRIBUTION } from '../../../common/constants/explorer';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_COUNT_DISTRIBUTION } from '../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {}

public/components/explorer/slices/fieldSlice.ts → public/components/explorer/slices/field_slice.ts

@@ -12,12 +12,12 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/sharedState';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
 import {
   SELECTED_FIELDS,
   UNSELECTED_FIELDS,
   REDUX_EXPL_SLICE_FIELDS
-} from '../../../common/constants/explorer';
+} from '../../../../common/constants/explorer';
 
 const initialFields = {
   [SELECTED_FIELDS]: [],

public/components/explorer/slices/queryResultSlice.ts → public/components/explorer/slices/query_result_slice.ts

@@ -13,10 +13,10 @@ import {
   createSlice
 } from '@reduxjs/toolkit';
 import { fetchSuccess as fetchSuccessReducer } from '../reducers'
-import { initialTabId } from '../../../framework/redux/store/sharedState';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
 import { 
   REDUX_EXPL_SLICE_QUERY_RESULT
-} from '../../../common/constants/explorer';
+} from '../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {}

public/components/explorer/slices/querySlice.ts → public/components/explorer/slices/query_slice.ts

@@ -12,11 +12,11 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/sharedState';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
 import { 
   RAW_QUERY,
   REDUX_EXPL_SLICE_QUERIES
-} from '../../../common/constants/explorer';
+} from '../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {

public/components/explorer/slices/queryTabSlice.ts → public/components/explorer/slices/query_tab_slice.ts

@@ -12,13 +12,13 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/sharedState';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
 import { 
   SELECTED_QUERY_TAB,
   QUERY_TAB_IDS,
   NEW_SELECTED_QUERY_TAB,
   REDUX_EXPL_SLICE_QUERY_TABS
-} from '../../../common/constants/explorer';
+} from '../../../../common/constants/explorer';
 
 const initialState = {
   queryTabIds: [initialTabId],

public/components/explorer/slices/visualizationSlice.ts → public/components/explorer/slices/visualization_slice.ts

@@ -12,8 +12,8 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/sharedState';
-import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../common/constants/explorer';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {}

public/components/explorer/visualizations/countDistribution/index.ts → public/components/explorer/visualizations/count_distribution/index.ts

@@ -9,4 +9,4 @@
  * GitHub history for details.
  */
 
-export * from './countDistribution';
+export * from './count_distribution';

public/components/explorer/visualizations/frameLayout.tsx → public/components/explorer/visualizations/frame_layout.tsx

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import './frameLayout.scss';
+import './frame_layout.scss';
 
 import React from 'react';
 import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui';

public/components/explorer/visualizations/index.tsx

@@ -14,7 +14,7 @@ import './app.scss';
 import _ from 'lodash';
 
 import React from 'react';
-import { FrameLayout } from './frameLayout';
+import { FrameLayout } from './frame_layout';
 import { DataPanel } from './datapanel';
 import { WorkspacePanel } from './workspace_panel';
 import { ConfigPanelWrapper } from './config_panel';