From af3b3d30e6588ecdc6b7623375fbaaf0b50a4e75 Mon Sep 17 00:00:00 2001 From: ramneet-persistent <105915936+ramneet-persistent@users.noreply.github.com> Date: Sat, 22 Oct 2022 01:38:45 +0530 Subject: [PATCH] [Bug] performance improvement (#1176) * upadtechart rerenders fixing: in progress Signed-off-by: Ramneet Chopra * logs/comments removed Signed-off-by: Ramneet Chopra Signed-off-by: Ramneet Chopra --- .../event_analytics/explorer/explorer.tsx | 96 ++++++++++++++++++- .../data_configurations_panel.tsx | 44 +++------ 2 files changed, 107 insertions(+), 33 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index feb10ae1d..3812800a4 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -325,6 +325,7 @@ export const Explorer = ({ const curQuery = queryRef.current; const rawQueryStr = buildQuery(appBasedRef.current, curQuery![RAW_QUERY]); const curIndex = getIndexPatternFromRawQuery(rawQueryStr); + if (isEmpty(rawQueryStr)) return; if (isEmpty(curIndex)) { @@ -333,7 +334,6 @@ export const Explorer = ({ } let curTimestamp: string = curQuery![SELECTED_TIMESTAMP]; - if (isEmpty(curTimestamp)) { const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex); if (isEmpty(defaultTimestamp.default_timestamp)) { @@ -420,6 +420,99 @@ export const Explorer = ({ } }; + // for testing purpose only: fix for multiple rerenders in case of update chart + const fetchDataUpdateChart = async ( + startingTime?: string | undefined, + endingTime?: string | undefined, + updatedQuery?: any + ) => { + const curQuery = updatedQuery.query; + const rawQueryStr = curQuery[RAW_QUERY]; + const curIndex = getIndexPatternFromRawQuery(rawQueryStr); + if (isEmpty(rawQueryStr)) return; + + if (isEmpty(curIndex)) { + setToast('Query does not include valid index.', 'danger'); + return; + } + + let curTimestamp: string = curQuery![SELECTED_TIMESTAMP]; + if (isEmpty(curTimestamp)) { + const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex); + if (isEmpty(defaultTimestamp.default_timestamp)) { + setToast(defaultTimestamp.message, 'danger'); + return; + } + curTimestamp = defaultTimestamp.default_timestamp; + if (defaultTimestamp.hasSchemaConflict) { + setToast(defaultTimestamp.message, 'danger'); + } + } + + if (isEqual(typeof startingTime, 'undefined') && isEqual(typeof endingTime, 'undefined')) { + startingTime = curQuery![SELECTED_DATE_RANGE][0]; + endingTime = curQuery![SELECTED_DATE_RANGE][1]; + } + + // compose final query + const finalQuery = composeFinalQuery( + curQuery, + startingTime!, + endingTime!, + curTimestamp, + isLiveTailOnRef.current + ); + + await dispatch( + changeQuery({ + tabId, + query: { + finalQuery, + [SELECTED_TIMESTAMP]: curTimestamp, + [RAW_QUERY]: rawQueryStr, + }, + }) + ); + + // search + if (finalQuery.match(PPL_STATS_REGEX)) { + getVisualizations(); + } else { + findAutoInterval(startTime, endTime); + if (isLiveTailOnRef.current) { + getLiveTail(undefined, (error) => { + const formattedError = formatError(error.name, error.message, error.body.message); + notifications.toasts.addError(formattedError, { + title: 'Error fetching events', + }); + }); + } else { + getEvents(undefined, (error) => { + const formattedError = formatError(error.name, error.message, error.body.message); + notifications.toasts.addError(formattedError, { + title: 'Error fetching events', + }); + }); + } + getCountVisualizations(minInterval); + } + + // for comparing usage if for the same tab, user changed index from one to another + if (!isLiveTailOnRef.current) { + setPrevIndex(curTimestamp); + if (!queryRef.current!.isLoaded) { + dispatch( + changeQuery({ + tabId, + query: { + isLoaded: true, + }, + }) + ); + } + } + }; + const isIndexPatternChanged = (currentQuery: string, prevTabQuery: string) => !isEqual(getIndexPatternFromRawQuery(currentQuery), getIndexPatternFromRawQuery(prevTabQuery)); @@ -1327,6 +1420,7 @@ export const Explorer = ({ handleQueryChange, setTempQuery, fetchData, + fetchDataUpdateChart, explorerFields, explorerData, http, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx index 5d6087cc9..f54fb4c63 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx @@ -69,7 +69,9 @@ export const DataConfigPanelItem = ({ queryManager, }: DataConfigPanelProps) => { const dispatch = useDispatch(); - const { tabId, handleQueryChange, fetchData, curVisId } = useContext(TabContext); + const { tabId, handleQueryChange, fetchData, fetchDataUpdateChart, curVisId } = useContext( + TabContext + ); const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; const { @@ -204,6 +206,7 @@ export const DataConfigPanelItem = ({ setIsAddConfigClicked(false); }; + // updateChart is fixed for multiple rerenders and this is only for testing const updateChart = (updatedConfigList = configList) => { if (visualizations.vis.name === VIS_CHART_TYPES.Histogram) { dispatch( @@ -226,37 +229,14 @@ export const DataConfigPanelItem = ({ .queryBuilder() .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens)); - batch(async () => { - await handleQueryChange(newQuery); - await dispatch( - changeQuery({ - tabId, - query: { - ...data.query, - [RAW_QUERY]: newQuery, - }, - }) - ); - await fetchData(); - await dispatch( - changeVizConfig({ - tabId, - vizId: visualizations.vis.name, - data: { - dataConfig: { - ...userConfigs.dataConfig, - [GROUPBY]: updatedConfigList[GROUPBY], - [AGGREGATIONS]: updatedConfigList[AGGREGATIONS], - [BREAKDOWNS]: updatedConfigList[BREAKDOWNS], - [SPAN]: - !isEmpty(updatedConfigList[GROUPBY]) && !isEmpty(updatedConfigList[AGGREGATIONS]) - ? updatedConfigList?.span - : undefined, - }, - }, - }) - ); - }); + const updatedQuery = { + tabId, + query: { + ...data.query, + [RAW_QUERY]: newQuery, + }, + }; + fetchDataUpdateChart(undefined, undefined, updatedQuery); } };