Move qm to plugins #1023 (#1036)

* move qm: in progress Signed-off-by: Ramneet Chopra <[email protected]> * qm instances prop adedd + yarn test Signed-off-by: Ramneet Chopra <[email protected]> * main rebase Signed-off-by: Ramneet Chopra <[email protected]> * explorereFields type fixed Signed-off-by: Ramneet Chopra <[email protected]> * querymanager types added, renamed to qm Signed-off-by: Ramneet Chopra <[email protected]> Signed-off-by: Ramneet Chopra <[email protected]>
opensearch-project · Sep 20, 2022 · 6e973b5 · 6e973b5
1 parent 0aed5d2
commit 6e973b5
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 56 deletions.
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
@@ -5,6 +5,7 @@
 
 import { History } from 'history';
 import Plotly from 'plotly.js-dist';
+import { QueryManager } from 'common/query_manager';
 import {
   RAW_QUERY,
   SELECTED_FIELDS,
@@ -16,12 +17,18 @@ import {
   SELECTED_TIMESTAMP,
   SELECTED_DATE_RANGE,
 } from '../constants/explorer';
-import { CoreStart, HttpSetup, HttpStart, NotificationsStart } from '../../../../src/core/public';
+import {
+  CoreStart,
+  CoreSetup,
+  HttpSetup,
+  HttpStart,
+  NotificationsStart,
+} from '../../../../src/core/public';
 import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
 import TimestampUtils from '../../public/services/timestamp/timestamp';
 import PPLService from '../../public/services/requests/ppl';
 import DSLService from '../../public/services/requests/dsl';
-
+import { SavedObjectsStart } from '../../../../src/core/public/saved_objects';
 export interface IQueryTab {
   id: string;
   name: React.ReactNode | string;
@@ -34,6 +41,13 @@ export interface IField {
   label?: string;
 }
 
+export interface ExplorerFields {
+  availableFields: IField[];
+  queriedFields: IField[];
+  selectedFields: IField[];
+  unselectedFields: IField[];
+}
+
 export interface ITabQueryResults {
   [tabId: string]: any;
 }
@@ -83,6 +97,7 @@ export interface ILogExplorerProps {
   ) => void;
   savedObjectId: string;
   getExistingEmptyTab: (params: EmptyTabParams) => string;
+  qm: QueryManager;
 }
 
 export interface IExplorerProps {
@@ -113,6 +128,7 @@ export interface IExplorerProps {
   appBaseQuery?: string;
   callback?: any;
   callbackInApp?: any;
+  qm: QueryManager;
 }
 
 export interface SavedQuery {
@@ -283,3 +299,26 @@ export interface ConfigList {
   breakdowns?: ConfigListEntry[] | HistogramConfigList[];
   span?: DimensionSpan;
 }
+
+export interface Breadcrumbs {
+  text: string;
+  href: string;
+}
+
+export interface EventAnalyticsProps {
+  chrome: CoreSetup;
+  parentBreadcrumbs: Breadcrumbs[];
+  pplService: any;
+  dslService: any;
+  savedObjects: SavedObjectsStart;
+  timestampUtils: TimestampUtils;
+  http: HttpStart;
+  notifications: NotificationsStart;
+  qm: QueryManager;
+}
+
+export interface DataConfigPanelProps {
+  fieldOptionList: IField[];
+  visualizations: IVisualizationContainerProps;
+  qm?: QueryManager;
+}
diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -7,6 +7,7 @@ import { I18nProvider } from '@osd/i18n/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { QueryManager } from 'common/query_manager';
 import { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import store from '../framework/redux/store';
@@ -24,6 +25,7 @@ interface ObservabilityAppDeps {
   dslService: any;
   savedObjects: any;
   timestampUtils: any;
+  qm: QueryManager;
 }
 
 // for cypress to test redux store
@@ -38,6 +40,7 @@ export const App = ({
   dslService,
   savedObjects,
   timestampUtils,
+  qm,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications } = CoreStartProp;
   const parentBreadcrumb = {
@@ -130,6 +133,7 @@ export const App = ({
                       timestampUtils={timestampUtils}
                       http={http}
                       notifications={notifications}
+                      qm={qm}
                       {...props}
                     />
                   );

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -78,7 +78,6 @@ import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { parseGetSuggestions, onItemSelect } from '../../common/search/autocomplete_logic';
 import { formatError } from '../utils';
 import { sleep } from '../../common/live_tail/live_tail_button';
-import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -107,6 +106,7 @@ export const Explorer = ({
   setEndTime,
   callback,
   callbackInApp,
+  qm,
 }: IExplorerProps) => {
   const dispatch = useDispatch();
   const requestParams = { tabId };
@@ -143,7 +143,7 @@ export const Explorer = ({
   const [browserTabFocus, setBrowserTabFocus] = useState(true);
   const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT);
   const [triggerAvailability, setTriggerAvailability] = useState(false);
-  const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState<Boolean>(
+  const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState<boolean>(
     false
   );
 
@@ -631,7 +631,7 @@ export const Explorer = ({
                               0
                             )}
                             showResetButton={false}
-                            onResetQuery={() => { }}
+                            onResetQuery={() => {}}
                           />
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
@@ -672,7 +672,7 @@ export const Explorer = ({
                               <HitsCounter
                                 hits={totalHits}
                                 showResetButton={false}
-                                onResetQuery={() => { }}
+                                onResetQuery={() => {}}
                               />
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
@@ -746,7 +746,7 @@ export const Explorer = ({
     }
   };
 
-  const changeIsValidConfigOptionState = (isValidConfig: Boolean) =>
+  const changeIsValidConfigOptionState = (isValidConfig: boolean) =>
     setIsValidDataConfigOptionSelected(isValidConfig);
 
   const getExplorerVis = () => {
@@ -764,6 +764,7 @@ export const Explorer = ({
         handleOverrideTimestamp={handleOverrideTimestamp}
         callback={callbackForConfig}
         changeIsValidConfigOptionState={changeIsValidConfigOptionState}
+        qm={qm}
       />
     );
   };
@@ -841,30 +842,29 @@ export const Explorer = ({
 
       if (selectedContentTabId === TAB_CHART_ID) {
         // parse stats section on every search
-        const qm = new QueryManager();
         const statsTokens = qm.queryParser().parse(tempQuery).getStats();
         const timeUnitValue = TIME_INTERVAL_OPTIONS.find(
           (time_unit) => time_unit.value === statsTokens.groupby?.span.span_expression.time_unit
         )?.text;
         const span =
           statsTokens.groupby?.span !== null
             ? {
-              time_field: [
-                {
-                  name: statsTokens.groupby?.span.span_expression.field,
-                  type: 'timestamp',
-                  label: statsTokens.groupby?.span.span_expression.field,
-                },
-              ],
-              unit: [
-                {
-                  text: timeUnitValue,
-                  value: statsTokens.groupby?.span.span_expression.time_unit,
-                  label: timeUnitValue,
-                },
-              ],
-              interval: statsTokens.groupby?.span.span_expression.literal_value,
-            }
+                time_field: [
+                  {
+                    name: statsTokens.groupby?.span.span_expression.field,
+                    type: 'timestamp',
+                    label: statsTokens.groupby?.span.span_expression.field,
+                  },
+                ],
+                unit: [
+                  {
+                    text: timeUnitValue,
+                    value: statsTokens.groupby?.span.span_expression.time_unit,
+                    label: timeUnitValue,
+                  },
+                ],
+                interval: statsTokens.groupby?.span.span_expression.literal_value,
+              }
             : undefined;
 
         await dispatch(

diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -49,6 +49,7 @@ export const LogExplorer = ({
   history,
   notifications,
   http,
+  qm,
 }: ILogExplorerProps) => {
   const dispatch = useDispatch();
   const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
@@ -184,6 +185,7 @@ export const LogExplorer = ({
             curSelectedTabId={curSelectedTabIdRef}
             http={http}
             searchBarConfigs={searchBarConfigs}
+            qm={qm}
           />
         </>
       ),

diff --git a/...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
@@ -30,9 +30,8 @@ import {
 } from '../../../../../../../../common/constants/explorer';
 import { ButtonGroupItem } from './config_button_group';
 import { visChartTypes } from '../../../../../../../../common/constants/shared';
-import { ConfigList } from '../../../../../../../../common/types/explorer';
+import { ConfigList, DataConfigPanelProps } from '../../../../../../../../common/types/explorer';
 import { TabContext } from '../../../../../hooks';
-import { QueryManager } from '../../../../../../../../common/query_manager';
 import { composeAggregations } from '../../../../../../../../common/query_manager/utils';
 
 const initialDimensionEntry = {
@@ -47,7 +46,11 @@ const initialMetricEntry = {
   aggregation: 'count',
 };
 
-export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => {
+export const DataConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+  qm,
+}: DataConfigPanelProps) => {
   const dispatch = useDispatch();
   const { tabId, handleQuerySearch, handleQueryChange, setTempQuery, fetchData } = useContext<any>(
     TabContext
@@ -120,7 +123,6 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
   };
 
   const updateChart = (updatedConfigList = configList) => {
-    const qm = new QueryManager();
     const statsTokens = qm.queryParser().parse(data.query.rawQuery).getStats();
     const newQuery = qm
       .queryBuilder()

diff --git a/.../visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/.../visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
@@ -15,20 +15,27 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { batch, useDispatch, useSelector } from 'react-redux';
+import { cloneDeep } from 'lodash';
 import {
   AVAILABLE_FIELDS,
   SELECTED_FIELDS,
 } from '../../../../../../../../common/constants/explorer';
-import { ConfigList, ConfigListEntry } from '../../../../../../../../common/types/explorer';
+import {
+  ConfigList,
+  ConfigListEntry,
+  DataConfigPanelProps,
+} from '../../../../../../../../common/types/explorer';
 import { TabContext } from '../../../../../hooks';
 import {
   selectFields,
   sortFields,
   updateFields,
 } from '../../../../../../event_analytics/redux/slices/field_slice';
-import { cloneDeep } from 'lodash';
 
-export const LogsViewConfigPanelItem = ({ fieldOptionList, visualizations }: any) => {
+export const LogsViewConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+}: DataConfigPanelProps) => {
   const dispatch = useDispatch();
   const { tabId, curVisId, changeVisualizationConfig } = useContext<any>(TabContext);
   const explorerFields = useSelector(selectFields)[tabId];
@@ -159,7 +166,7 @@ export const LogsViewConfigPanelItem = ({ fieldOptionList, visualizations }: any
   };
 
   const getLogsViewUI = () => {
-    let list = configList.dimensions ? configList.dimensions : [];
+    const list = configList.dimensions ? configList.dimensions : [];
     const listUI = list.map((field, index) => (
       <EuiFormRow
         label="Field"

diff --git a/...er/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/...er/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
@@ -22,10 +22,14 @@ import {
 import { ConfigTreemapParentFields } from './config_treemap_parents';
 import { numericalTypes, RAW_QUERY } from '../../../../../../../../common/constants/explorer';
 import { TabContext } from '../../../../../hooks';
-import { QueryManager } from '../../../../../../../../common/query_manager';
 import { composeAggregations } from '../../../../../../../../common/query_manager/utils';
+import { DataConfigPanelProps } from '../../../../../../../../common/types/explorer';
 
-export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => {
+export const TreemapConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+  qm,
+}: DataConfigPanelProps) => {
   const dispatch = useDispatch();
   const { tabId, curVisId, changeVisualizationConfig, fetchData, handleQueryChange } = useContext<
     any
@@ -51,7 +55,7 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
   }, [userConfigs?.dataConfig, visualizations.vis.name]);
 
   const updateList = (configName: string, fieldName: string, value: string | any[]) => {
-    let list = { ...configList };
+    const list = { ...configList };
     let listItem = { ...list[configName][0] };
 
     const newField = {
@@ -68,7 +72,6 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
   };
 
   const updateChart = (updatedConfigList = configList) => {
-    const qm = new QueryManager();
     const statsTokens = qm.queryParser().parse(data.query.rawQuery).getStats();
     const newQuery = qm
       .queryBuilder()
@@ -103,7 +106,7 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
 
   const getOptionsAvailable = (sectionName: string) => {
     const { dimensions, metrics } = configList;
-    let selectedFields = {};
+    const selectedFields = {};
     let allSelectedFields = [];
 
     for (const key in configList) {