From a9eb80211afd44ccad3d49e5dd58656e4aeba8f4 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Fri, 16 Sep 2022 12:04:51 +0530 Subject: [PATCH 1/5] move qm: in progress Signed-off-by: Ramneet Chopra --- .../common/types/explorer.ts | 2 + .../public/components/app.tsx | 3 ++ .../event_analytics/explorer/explorer.tsx | 45 +++++++++---------- .../event_analytics/explorer/log_explorer.tsx | 2 + .../data_config_panel_item.tsx | 7 ++- .../treemap_config_panel_item.tsx | 17 ++++--- .../components/event_analytics/index.tsx | 2 + .../public/components/index.tsx | 4 +- dashboards-observability/public/plugin.ts | 6 ++- 9 files changed, 51 insertions(+), 37 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index a734d7150..b99d1a2b5 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -83,6 +83,7 @@ export interface ILogExplorerProps { ) => void; savedObjectId: string; getExistingEmptyTab: (params: EmptyTabParams) => string; + queryManager: any; } export interface IExplorerProps { @@ -113,6 +114,7 @@ export interface IExplorerProps { appBaseQuery?: string; callback?: any; callbackInApp?: any; + queryManager: any; } export interface SavedQuery { diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx index b4d164331..66efa8a2e 100644 --- a/dashboards-observability/public/components/app.tsx +++ b/dashboards-observability/public/components/app.tsx @@ -24,6 +24,7 @@ interface ObservabilityAppDeps { dslService: any; savedObjects: any; timestampUtils: any; + queryManagerInstance: any; } // for cypress to test redux store @@ -38,6 +39,7 @@ export const App = ({ dslService, savedObjects, timestampUtils, + queryManagerInstance, }: ObservabilityAppDeps) => { const { chrome, http, notifications } = CoreStartProp; const parentBreadcrumb = { @@ -130,6 +132,7 @@ export const App = ({ timestampUtils={timestampUtils} http={http} notifications={notifications} + queryManager={queryManagerInstance} {...props} /> ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index dca34b9d3..906e7a60f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/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, + queryManager, }: 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( + const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState( false ); @@ -631,7 +631,7 @@ export const Explorer = ({ 0 )} showResetButton={false} - onResetQuery={() => { }} + onResetQuery={() => {}} /> @@ -672,7 +672,7 @@ export const Explorer = ({ { }} + onResetQuery={() => {}} /> since {liveTimestamp} @@ -746,7 +746,7 @@ export const Explorer = ({ } }; - const changeIsValidConfigOptionState = (isValidConfig: Boolean) => + const changeIsValidConfigOptionState = (isValidConfig: boolean) => setIsValidDataConfigOptionSelected(isValidConfig); const getExplorerVis = () => { @@ -841,30 +841,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 statsTokens = queryManager.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/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx index 53bd15be4..9996b1948 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx @@ -49,6 +49,7 @@ export const LogExplorer = ({ history, notifications, http, + queryManager, }: ILogExplorerProps) => { const dispatch = useDispatch(); const tabIds = useSelector(selectQueryTabs).queryTabIds.filter( @@ -184,6 +185,7 @@ export const LogExplorer = ({ curSelectedTabId={curSelectedTabIdRef} http={http} searchBarConfigs={searchBarConfigs} + queryManager={queryManager} /> ), diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index adf8a6b51..70e8bd38b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -47,7 +47,7 @@ const initialMetricEntry = { aggregation: 'count', }; -export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => { +export const DataConfigPanelItem = ({ fieldOptionList, visualizations, queryManager }: any) => { const dispatch = useDispatch(); const { tabId, handleQuerySearch, handleQueryChange, setTempQuery, fetchData } = useContext( TabContext @@ -120,9 +120,8 @@ 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 + const statsTokens = queryManager.queryParser().parse(data.query.rawQuery).getStats(); + const newQuery = queryManager .queryBuilder() .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens)); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx index 895a1708a..45f325b46 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/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'; -export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => { +export const TreemapConfigPanelItem = ({ + fieldOptionList, + visualizations, + tabID, + queryManager, +}: any) => { 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,9 +72,8 @@ 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 + const statsTokens = queryManager.queryParser().parse(data.query.rawQuery).getStats(); + const newQuery = queryManager .queryBuilder() .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens)); @@ -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) { diff --git a/dashboards-observability/public/components/event_analytics/index.tsx b/dashboards-observability/public/components/event_analytics/index.tsx index edac5e494..a16970350 100644 --- a/dashboards-observability/public/components/event_analytics/index.tsx +++ b/dashboards-observability/public/components/event_analytics/index.tsx @@ -23,6 +23,7 @@ export const EventAnalytics = ({ timestampUtils, http, notifications, + queryManager, ...props }: any) => { const history = useHistory(); @@ -84,6 +85,7 @@ export const EventAnalytics = ({ getExistingEmptyTab={getExistingEmptyTab} history={history} notifications={notifications} + queryManager={queryManager} /> ); }} diff --git a/dashboards-observability/public/components/index.tsx b/dashboards-observability/public/components/index.tsx index 267cb6b5d..cba45a7ba 100644 --- a/dashboards-observability/public/components/index.tsx +++ b/dashboards-observability/public/components/index.tsx @@ -16,7 +16,8 @@ export const Observability = ( pplService: any, dslService: any, savedObjects: any, - timestampUtils: any + timestampUtils: any, + queryManagerInstance: any ) => { ReactDOM.render( , AppMountParametersProp.element ); diff --git a/dashboards-observability/public/plugin.ts b/dashboards-observability/public/plugin.ts index 4c3b7f7a2..5af5c6ded 100644 --- a/dashboards-observability/public/plugin.ts +++ b/dashboards-observability/public/plugin.ts @@ -17,7 +17,7 @@ import { AppPluginStartDependencies, ObservabilitySetup, ObservabilityStart } fr import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers'; import { convertLegacyTraceAnalyticsUrl } from './components/trace_analytics/components/common/legacy_route_helpers'; import { uiSettingsService } from '../common/utils'; - +import { QueryManager } from '../common/query_manager'; export class ObservabilityPlugin implements Plugin { public setup(core: CoreSetup): ObservabilitySetup { uiSettingsService.init(core.uiSettings, core.notifications); @@ -48,6 +48,7 @@ export class ObservabilityPlugin implements Plugin Date: Fri, 16 Sep 2022 09:04:19 +0000 Subject: [PATCH 2/5] qm instances prop adedd + yarn test Signed-off-by: Ramneet Chopra --- .../components/event_analytics/explorer/explorer.tsx | 1 + .../config_controls/data_config_panel_item.tsx | 1 - .../event_analytics/explorer/visualizations/index.tsx | 9 ++++++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 906e7a60f..58c72c6c8 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -764,6 +764,7 @@ export const Explorer = ({ handleOverrideTimestamp={handleOverrideTimestamp} callback={callbackForConfig} changeIsValidConfigOptionState={changeIsValidConfigOptionState} + queryManager={queryManager} /> ); }; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 70e8bd38b..e034ee6c4 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -32,7 +32,6 @@ import { ButtonGroupItem } from './config_button_group'; import { visChartTypes } from '../../../../../../../../common/constants/shared'; import { ConfigList } from '../../../../../../../../common/types/explorer'; import { TabContext } from '../../../../../hooks'; -import { QueryManager } from '../../../../../../../../common/query_manager'; import { composeAggregations } from '../../../../../../../../common/query_manager/utils'; const initialDimensionEntry = { diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index 2e51c1a7e..f9c701fd1 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -31,7 +31,8 @@ interface IExplorerVisualizationsProps { visualizations: IVisualizationContainerProps; handleOverrideTimestamp: (field: IField) => void; callback?: any; - changeIsValidConfigOptionState: (isValidConfigOptionSelected: Boolean) => void; + changeIsValidConfigOptionState: (isValidConfigOptionSelected: boolean) => void; + queryManager: any; } export const ExplorerVisualizations = ({ @@ -47,13 +48,13 @@ export const ExplorerVisualizations = ({ handleOverrideTimestamp, callback, changeIsValidConfigOptionState, + queryManager, }: IExplorerVisualizationsProps) => { const { tabId } = useContext(TabContext); const { data, vis } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; - const fieldOptionList = explorerFields.availableFields.map((field) => { - // const fieldOptionList = fields.map((field) => { + // const fieldOptionList = fields.map((field) => { return { ...field, label: field.name }; }); @@ -65,6 +66,7 @@ export const ExplorerVisualizations = ({ fieldOptionList={fieldOptionList} visualizations={visualizations} tabID={tabId} + queryManager={queryManager} /> ); case visChartTypes.LogsView: @@ -81,6 +83,7 @@ export const ExplorerVisualizations = ({ fieldOptionList={fieldOptionList} visualizations={visualizations} tabID={tabId} + queryManager={queryManager} /> ); } From facb48dbf5fcfc16c6583fdfb3bccbe7ed40f351 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Mon, 19 Sep 2022 12:52:59 +0530 Subject: [PATCH 3/5] main rebase Signed-off-by: Ramneet Chopra --- .../components/visualizations/charts/helpers/viz_types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts index 48124408d..e23968693 100644 --- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts +++ b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts @@ -44,12 +44,12 @@ const initialEntryTreemap = { label: '', name: '' }; const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => { if (isEmpty(vizFields)) return {}; - const vizFieldsWithLabel: { [key: string]: string }[] = vizFields.map((vizField) => ({ + const vizFieldsWithLabel: Array<{ [key: string]: string }> = vizFields.map((vizField) => ({ ...vizField, label: vizField.name, })); - const mapXaxis = (): { [key: string]: string }[] => { + const mapXaxis = (): Array<{ [key: string]: string }> => { const xaxis = vizFieldsWithLabel.filter((field) => field.type === 'timestamp'); return visName === visChartTypes.Line ? xaxis.length === 0 @@ -58,7 +58,7 @@ const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => { : [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]]; }; - const mapYaxis = (): { [key: string]: string }[] => + const mapYaxis = (): Array<{ [key: string]: string }> => visName === visChartTypes.Line ? vizFieldsWithLabel.filter((field) => field.type !== 'timestamp') : take( From d0603e766ae3777f78236b8adcd8578405028485 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Mon, 19 Sep 2022 10:14:44 +0000 Subject: [PATCH 4/5] explorereFields type fixed Signed-off-by: Ramneet Chopra --- .../common/types/explorer.ts | 7 +++++++ .../explorer/visualizations/index.tsx | 17 +++++++++++------ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index b99d1a2b5..e3365eb2c 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -34,6 +34,13 @@ export interface IField { label?: string; } +export interface ExplorerFields { + availableFields: IField[]; + queriedFields: IField[]; + selectedFields: IField[]; + unselectedFields: IField[]; +} + export interface ITabQueryResults { [tabId: string]: any; } diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index f9c701fd1..cecdbc465 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -10,7 +10,12 @@ import { isEmpty } from 'lodash'; import React, { useContext } from 'react'; import { EuiPanel, EuiResizableContainer, EuiSpacer } from '@elastic/eui'; import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer'; -import { IField, IQuery, IVisualizationContainerProps } from '../../../../../common/types/explorer'; +import { + IField, + IQuery, + IVisualizationContainerProps, + ExplorerFields, +} from '../../../../../common/types/explorer'; import { WorkspacePanel } from './workspace_panel'; import { ConfigPanel } from './config_panel'; import { Sidebar } from '../sidebar'; @@ -24,7 +29,7 @@ interface IExplorerVisualizationsProps { curVisId: string; setCurVisId: (visId: string) => void; explorerVis: any; - explorerFields: IField[]; + explorerFields: ExplorerFields; explorerData: any; handleAddField: (field: IField) => void; handleRemoveField: (field: IField) => void; @@ -53,10 +58,10 @@ export const ExplorerVisualizations = ({ const { tabId } = useContext(TabContext); const { data, vis } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; - const fieldOptionList = explorerFields.availableFields.map((field) => { - // const fieldOptionList = fields.map((field) => { - return { ...field, label: field.name }; - }); + const fieldOptionList = explorerFields.availableFields.map((field) => ({ + ...field, + label: field.name, + })); const renderDataConfigContainer = () => { switch (curVisId) { From 248e73dc0abf1f7b1ba47fc145738211f9bad6c4 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Tue, 20 Sep 2022 07:24:10 +0000 Subject: [PATCH 5/5] querymanager types added, renamed to qm Signed-off-by: Ramneet Chopra --- .../common/types/explorer.ts | 38 +++++++++++++++++-- .../public/components/app.tsx | 7 ++-- .../event_analytics/explorer/explorer.tsx | 6 +-- .../event_analytics/explorer/log_explorer.tsx | 4 +- .../data_config_panel_item.tsx | 12 ++++-- .../logs_view_config_panel_item.tsx | 15 ++++++-- .../treemap_config_panel_item.tsx | 10 ++--- .../explorer/visualizations/index.tsx | 13 +++---- .../components/event_analytics/index.tsx | 8 ++-- .../public/components/index.tsx | 5 ++- dashboards-observability/public/plugin.ts | 4 +- 11 files changed, 82 insertions(+), 40 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index e3365eb2c..dade11d67 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/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; @@ -90,7 +97,7 @@ export interface ILogExplorerProps { ) => void; savedObjectId: string; getExistingEmptyTab: (params: EmptyTabParams) => string; - queryManager: any; + qm: QueryManager; } export interface IExplorerProps { @@ -121,7 +128,7 @@ export interface IExplorerProps { appBaseQuery?: string; callback?: any; callbackInApp?: any; - queryManager: any; + qm: QueryManager; } export interface SavedQuery { @@ -292,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/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx index 66efa8a2e..6e69cd69d 100644 --- a/dashboards-observability/public/components/app.tsx +++ b/dashboards-observability/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,7 +25,7 @@ interface ObservabilityAppDeps { dslService: any; savedObjects: any; timestampUtils: any; - queryManagerInstance: any; + qm: QueryManager; } // for cypress to test redux store @@ -39,7 +40,7 @@ export const App = ({ dslService, savedObjects, timestampUtils, - queryManagerInstance, + qm, }: ObservabilityAppDeps) => { const { chrome, http, notifications } = CoreStartProp; const parentBreadcrumb = { @@ -132,7 +133,7 @@ export const App = ({ timestampUtils={timestampUtils} http={http} notifications={notifications} - queryManager={queryManagerInstance} + qm={qm} {...props} /> ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 58c72c6c8..dc2fe3b53 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -106,7 +106,7 @@ export const Explorer = ({ setEndTime, callback, callbackInApp, - queryManager, + qm, }: IExplorerProps) => { const dispatch = useDispatch(); const requestParams = { tabId }; @@ -764,7 +764,7 @@ export const Explorer = ({ handleOverrideTimestamp={handleOverrideTimestamp} callback={callbackForConfig} changeIsValidConfigOptionState={changeIsValidConfigOptionState} - queryManager={queryManager} + qm={qm} /> ); }; @@ -842,7 +842,7 @@ export const Explorer = ({ if (selectedContentTabId === TAB_CHART_ID) { // parse stats section on every search - const statsTokens = queryManager.queryParser().parse(tempQuery).getStats(); + 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; diff --git a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx index 9996b1948..1d84a5815 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx @@ -49,7 +49,7 @@ export const LogExplorer = ({ history, notifications, http, - queryManager, + qm, }: ILogExplorerProps) => { const dispatch = useDispatch(); const tabIds = useSelector(selectQueryTabs).queryTabIds.filter( @@ -185,7 +185,7 @@ export const LogExplorer = ({ curSelectedTabId={curSelectedTabIdRef} http={http} searchBarConfigs={searchBarConfigs} - queryManager={queryManager} + qm={qm} /> ), diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index e034ee6c4..53f16bff5 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -30,7 +30,7 @@ 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 { composeAggregations } from '../../../../../../../../common/query_manager/utils'; @@ -46,7 +46,11 @@ const initialMetricEntry = { aggregation: 'count', }; -export const DataConfigPanelItem = ({ fieldOptionList, visualizations, queryManager }: any) => { +export const DataConfigPanelItem = ({ + fieldOptionList, + visualizations, + qm, +}: DataConfigPanelProps) => { const dispatch = useDispatch(); const { tabId, handleQuerySearch, handleQueryChange, setTempQuery, fetchData } = useContext( TabContext @@ -119,8 +123,8 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, queryMana }; const updateChart = (updatedConfigList = configList) => { - const statsTokens = queryManager.queryParser().parse(data.query.rawQuery).getStats(); - const newQuery = queryManager + const statsTokens = qm.queryParser().parse(data.query.rawQuery).getStats(); + const newQuery = qm .queryBuilder() .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens)); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx index 6f9bb5388..d5ac25e73 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/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(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) => ( { + qm, +}: DataConfigPanelProps) => { const dispatch = useDispatch(); const { tabId, curVisId, changeVisualizationConfig, fetchData, handleQueryChange } = useContext< any @@ -72,8 +72,8 @@ export const TreemapConfigPanelItem = ({ }; const updateChart = (updatedConfigList = configList) => { - const statsTokens = queryManager.queryParser().parse(data.query.rawQuery).getStats(); - const newQuery = queryManager + const statsTokens = qm.queryParser().parse(data.query.rawQuery).getStats(); + const newQuery = qm .queryBuilder() .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens)); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index cecdbc465..17d817bc3 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -9,6 +9,7 @@ import { isEmpty } from 'lodash'; import React, { useContext } from 'react'; import { EuiPanel, EuiResizableContainer, EuiSpacer } from '@elastic/eui'; +import { QueryManager } from 'common/query_manager'; import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer'; import { IField, @@ -24,6 +25,7 @@ import { TabContext } from '../../hooks'; import { PPL_STATS_REGEX, visChartTypes } from '../../../../../common/constants/shared'; import { TreemapConfigPanelItem } from './config_panel/config_panes/config_controls/treemap_config_panel_item'; import { LogsViewConfigPanelItem } from './config_panel/config_panes/config_controls/logs_view_config_panel_item'; + interface IExplorerVisualizationsProps { query: IQuery; curVisId: string; @@ -37,7 +39,7 @@ interface IExplorerVisualizationsProps { handleOverrideTimestamp: (field: IField) => void; callback?: any; changeIsValidConfigOptionState: (isValidConfigOptionSelected: boolean) => void; - queryManager: any; + qm: QueryManager; } export const ExplorerVisualizations = ({ @@ -53,7 +55,7 @@ export const ExplorerVisualizations = ({ handleOverrideTimestamp, callback, changeIsValidConfigOptionState, - queryManager, + qm, }: IExplorerVisualizationsProps) => { const { tabId } = useContext(TabContext); const { data, vis } = visualizations; @@ -70,8 +72,7 @@ export const ExplorerVisualizations = ({ ); case visChartTypes.LogsView: @@ -79,7 +80,6 @@ export const ExplorerVisualizations = ({ ); default: @@ -87,8 +87,7 @@ export const ExplorerVisualizations = ({ ); } diff --git a/dashboards-observability/public/components/event_analytics/index.tsx b/dashboards-observability/public/components/event_analytics/index.tsx index a16970350..42265ba4f 100644 --- a/dashboards-observability/public/components/event_analytics/index.tsx +++ b/dashboards-observability/public/components/event_analytics/index.tsx @@ -5,7 +5,7 @@ import { EuiGlobalToastList } from '@elastic/eui'; import { Toast } from '@elastic/eui/src/components/toast/global_toast_list'; -import { EmptyTabParams } from 'common/types/explorer'; +import { EmptyTabParams, EventAnalyticsProps } from 'common/types/explorer'; import { isEmpty } from 'lodash'; import React, { ReactChild, useState } from 'react'; import { HashRouter, Route, Switch, useHistory } from 'react-router-dom'; @@ -23,9 +23,9 @@ export const EventAnalytics = ({ timestampUtils, http, notifications, - queryManager, + qm, ...props -}: any) => { +}: EventAnalyticsProps) => { const history = useHistory(); const [toasts, setToasts] = useState([]); @@ -85,7 +85,7 @@ export const EventAnalytics = ({ getExistingEmptyTab={getExistingEmptyTab} history={history} notifications={notifications} - queryManager={queryManager} + qm={qm} /> ); }} diff --git a/dashboards-observability/public/components/index.tsx b/dashboards-observability/public/components/index.tsx index cba45a7ba..be4f1a040 100644 --- a/dashboards-observability/public/components/index.tsx +++ b/dashboards-observability/public/components/index.tsx @@ -5,6 +5,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { QueryManager } from 'common/query_manager'; import { AppMountParameters, CoreStart } from '../../../../src/core/public'; import { AppPluginStartDependencies } from '../types'; import { App } from './app'; @@ -17,7 +18,7 @@ export const Observability = ( dslService: any, savedObjects: any, timestampUtils: any, - queryManagerInstance: any + qm: QueryManager ) => { ReactDOM.render( , AppMountParametersProp.element ); diff --git a/dashboards-observability/public/plugin.ts b/dashboards-observability/public/plugin.ts index 5af5c6ded..a14131546 100644 --- a/dashboards-observability/public/plugin.ts +++ b/dashboards-observability/public/plugin.ts @@ -48,7 +48,7 @@ export class ObservabilityPlugin implements Plugin