From 9b53e99d41a95d33d213c6b07b6bc0f2ec04832c Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Thu, 3 Nov 2022 17:34:07 -0700 Subject: [PATCH 1/4] switch works Signed-off-by: Kavitha Conjeevaram Mohan --- .../components/common/search/search.tsx | 4 +++ .../event_analytics/explorer/explorer.tsx | 22 +++++++++++-- .../explorer/save_panel/save_panel.tsx | 33 ++++++++++++------- 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx index d726c9b80..f6d30725a 100644 --- a/dashboards-observability/public/components/common/search/search.tsx +++ b/dashboards-observability/public/components/common/search/search.tsx @@ -86,8 +86,10 @@ export const Search = (props: any) => { curVisId, spanValue, setSubType, + metricMeasure, setMetricMeasure, setMetricLabel, + metricChecked, } = props; const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX); @@ -224,8 +226,10 @@ export const Search = (props: any) => { curVisId={curVisId} spanValue={spanValue} setSubType={setSubType} + metricMeasure={metricMeasure} setMetricMeasure={setMetricMeasure} setMetricLabel={setMetricLabel} + metricChecked={metricChecked} /> diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 6d296ff5f..b576c57b8 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -72,7 +72,12 @@ import { LIVE_END_TIME, VIS_CHART_TYPES, } from '../../../../common/constants/shared'; -import { getIndexPatternFromRawQuery, preprocessQuery, buildQuery, composeFinalQuery } from '../../../../common/utils'; +import { + getIndexPatternFromRawQuery, + preprocessQuery, + buildQuery, + composeFinalQuery, +} from '../../../../common/utils'; import { useFetchEvents, useFetchVisualizations } from '../hooks'; import { changeQuery, changeDateRange, selectQueries } from '../redux/slices/query_slice'; import { selectQueryResult } from '../redux/slices/query_result_slice'; @@ -180,6 +185,7 @@ export const Explorer = ({ const [subType, setSubType] = useState('visualization'); const [metricMeasure, setMetricMeasure] = useState(''); const [metricLabel, setMetricLabel] = useState([]); + const [metricChecked, setMetricChecked] = useState(false); const queryRef = useRef(); const appBasedRef = useRef(''); appBasedRef.current = appBaseQuery; @@ -254,6 +260,7 @@ export const Explorer = ({ const isSavedQuery = has(savedData, SAVED_QUERY); const savedType = isSavedQuery ? SAVED_QUERY : SAVED_VISUALIZATION; const objectData = isSavedQuery ? savedData.savedQuery : savedData.savedVisualization; + const isSavedVisualization = savedData.savedVisualization; const currQuery = appLogEvents ? objectData?.query.replace(appBaseQuery + '| ', '') : objectData?.query || ''; @@ -314,6 +321,13 @@ export const Explorer = ({ setTempQuery((staleTempQuery: string) => { return appLogEvents ? currQuery : objectData?.query || staleTempQuery; }); + if (isSavedVisualization?.sub_type) { + if (isSavedVisualization?.sub_type === 'metric') { + setMetricChecked(true); + setMetricMeasure(isSavedVisualization?.measure) + } + setSubType(isSavedVisualization?.sub_type); + } const tabToBeFocused = isSavedQuery ? TYPE_TAB_MAPPING[SAVED_QUERY] : TYPE_TAB_MAPPING[SAVED_VISUALIZATION]; @@ -944,7 +958,7 @@ export const Explorer = ({ isLiveTailOnRef.current, patternsData, viewLogPatterns, - userVizConfigs + userVizConfigs, ]); const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedContentTab(selectedTab.id); @@ -1426,7 +1440,7 @@ export const Explorer = ({ const updatedDataConfig = getUpdatedDataConfig(statsTokens); setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined')); }, [tempQuery, query, selectedContentTabId]); - + return ( { const [options, setOptions] = useState([]); const [checked, setChecked] = useState(false); - const [measure, setMeasure] = useState([]); + const [measure, setMeasure] = useState(UNITS_OF_MEASURE[2]); const [label, setLabel] = useState([]); const getCustomPabnelList = async (savedObjects: SavedObjects) => { @@ -83,9 +88,11 @@ export const SavePanel = ({ } }; - const onMeasureChange = (selectedMeasures: React.SetStateAction) => { + const onMeasureChange = (selectedMeasures: any) => { setMeasure(selectedMeasures); - setMetricMeasure(selectedMeasures[0].label); + console.log('measure format: ', selectedMeasures); + setMetricMeasure(selectedMeasures); + // setMetricMeasure(selectedMeasures[0].label); }; const onLabelChange = (selectedLabels: React.SetStateAction) => { @@ -93,6 +100,13 @@ export const SavePanel = ({ setMetricLabel(selectedLabels); }; + useEffect(() => { + if (metricChecked) { + setChecked(true); + setMeasure(metricMeasure); + } + }, []) + return ( <> {showOptionList && ( @@ -155,17 +169,14 @@ export const SavePanel = ({

{'Units of Measure'}

- { - return { - label: i, - }; + return { value: i, text: i }; })} - isClearable={false} data-test-subj="eventExplorer__metricMeasureSaveComboBox" /> From c92961cbf206683df44ed3052ee1d247082c1d3d Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Thu, 3 Nov 2022 18:37:49 -0700 Subject: [PATCH 2/4] change to euiselect Signed-off-by: Kavitha Conjeevaram Mohan --- .../event_analytics/explorer/explorer.tsx | 28 +-- .../__snapshots__/save_panel.test.tsx.snap | 199 +++++++++++++++++- .../save_panel/__tests__/save_panel.test.tsx | 10 +- .../explorer/save_panel/save_panel.tsx | 31 +-- .../metrics/top_menu/metrics_export_panel.tsx | 1 - 5 files changed, 208 insertions(+), 61 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 26b4b5b85..b29ffb25b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -63,16 +63,6 @@ import { PPL_PATTERNS_DOCUMENTATION_URL, PPL_STATS_REGEX, } from '../../../../common/constants/shared'; -<<<<<<< HEAD -import { - getIndexPatternFromRawQuery, - preprocessQuery, - buildQuery, - composeFinalQuery, -} from '../../../../common/utils'; -import { useFetchEvents, useFetchVisualizations } from '../hooks'; -import { changeQuery, changeDateRange, selectQueries } from '../redux/slices/query_slice'; -======= import { GroupByChunk } from '../../../../common/query_manager/ast/types'; import { IDefaultTimestampState, @@ -94,7 +84,6 @@ import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } import { selectCountDistribution } from '../redux/slices/count_distribution_slice'; import { selectFields, sortFields, updateFields } from '../redux/slices/field_slice'; import { selectPatterns } from '../redux/slices/patterns_slice'; ->>>>>>> 03b62c2ab88a5105662a813727dc10a18e373b69 import { selectQueryResult } from '../redux/slices/query_result_slice'; import { changeDateRange, changeQuery, selectQueries } from '../redux/slices/query_slice'; import { updateTabName } from '../redux/slices/query_tab_slice'; @@ -345,7 +334,7 @@ export const Explorer = ({ if (isSavedVisualization?.sub_type) { if (isSavedVisualization?.sub_type === 'metric') { setMetricChecked(true); - setMetricMeasure(isSavedVisualization?.measure) + setMetricMeasure(isSavedVisualization?.units_of_measure); } setSubType(isSavedVisualization?.sub_type); } @@ -1079,14 +1068,8 @@ export const Explorer = ({ isLiveTailOnRef.current, patternsData, viewLogPatterns, -<<<<<<< HEAD -======= - isPatternConfigPopoverOpen, - patternRegexInput, ->>>>>>> 03b62c2ab88a5105662a813727dc10a18e373b69 userVizConfigs, ]); - const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedContentTab(selectedTab.id); const updateQueryInStore = async (updateQuery: string) => { @@ -1293,7 +1276,6 @@ export const Explorer = ({ description: vizDescription, subType: subType, unitsOfMeasure: metricMeasure, - // selectedLabels: metricLabel }) .then((res: any) => { setToast( @@ -1330,7 +1312,6 @@ export const Explorer = ({ description: vizDescription, subType: subType, unitsOfMeasure: metricMeasure, - // selectedLabels: metricLabel }) .then((res: any) => { batch(() => { @@ -1471,19 +1452,12 @@ export const Explorer = ({ ); useEffect(() => { -<<<<<<< HEAD - const statsTokens = queryManager.queryParser().parse(tempQuery).getStats(); - const updatedDataConfig = getUpdatedDataConfig(statsTokens); - setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined')); - }, [tempQuery, query, selectedContentTabId]); -======= if (isEqual(selectedContentTabId, TAB_CHART_ID)) { const statsTokens = queryManager.queryParser().parse(tempQuery).getStats(); const updatedDataConfig = getDefaultVisConfig(statsTokens); setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined')); } }, [tempQuery, selectedContentTabId, curVisId]); ->>>>>>> 03b62c2ab88a5105662a813727dc10a18e373b69 return (