From b03d9ab20ef2410a1f627dcc7a1c258e1a4e2e4d Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Tue, 17 Jan 2023 20:04:17 -0800
Subject: [PATCH 1/5] resolve one failing test and remove tests of unreleased
 visualizations

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 .../integration/1_event_analytics.spec.js     | 130 +-----------------
 1 file changed, 2 insertions(+), 128 deletions(-)

diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
index 39b207ff9..a0b70f94e 100644
--- a/.cypress/integration/1_event_analytics.spec.js
+++ b/.cypress/integration/1_event_analytics.spec.js
@@ -281,7 +281,7 @@ describe('Saves a query on explorer page', () => {
       .focus()
       .type(SAVE_QUERY2, { force: true });
 
-    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
     cy.wait(delay * 2);
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
 
@@ -778,7 +778,7 @@ describe.skip('Renders chart and verify Toast message if X-axis and Y-axis value
   });
 });
 
-describe.skip('Render Table View', () => {
+describe.only('Render Table View', () => {
   before(() => {
     landOnEventVisualizations();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
@@ -893,129 +893,3 @@ describe.skip('Renders Data Configurations section for Pie chart', () => {
     cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist');
   });
 });
-
-describe.skip('Renders Histogram chart', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
-  });
-
-  it('Renders Histogram chart and save visualization', () => {
-    renderHistogramChart();
-    cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
-    cy.wait(delay);
-    saveVisualizationAndVerify();
-  });
-
-  it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () => {
-    deleteVisualization();
-  });
-
-  it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => {
-    renderHistogramChart();
-    cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
-  });
-});
-
-describe.skip('Render Gauge Chart and verify if data gets render', () => {
-  it('Render gauge chart and verify by default no data gets render', () => {
-    renderGaugeChart();
-    cy.get('.main-svg').contains('BeatsWest').should('not.exist');
-  });
-
-  it('Render gauge chart and verify data gets render after click on update chart', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('.main-svg').contains('BeatsWest').should('exist');
-  });
-});
-
-describe.skip('Render Gauge Chart and work with chart styles', () => {
-  it('Render gauge chart and change orientation to vertical', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('.euiButton__text').contains('Vertical').click();
-    cy.get('.euiButton__text').contains('Preview').click();
-  });
-
-  it('Render gauge chart and change title size then verify the update on chart', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
-    cy.get('.euiButton__text').contains('Preview').click();
-  });
-
-  it('Render gauge chart and change value size then verify the update on chart', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
-    cy.get('.euiButton__text').contains('Preview').click();
-  });
-});
-
-describe.skip('Render Gauge Chart and work with threshold', () => {
-  it('Render gauge chart and add threshold then verify by default the threshold is not seen', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('.euiButton__text').contains('+ Add threshold').click();
-    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
-    cy.get('.euiButton__text').contains('Preview').click();
-    cy.get('[data-unformatted="Gauge Threshold"]').should('not.be.visible');
-  });
-
-  it('Render gauge chart and add threshold then verify the threshold label are seen after show threshold button enabled ', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('.euiButton__text').contains('+ Add threshold').click();
-    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
-    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
-    cy.get('.euiButton__text').contains('Preview').click();
-    cy.get('[data-unformatted="Gauge Threshold"]').should('be.visible');
-  });
-
-  it('Render gauge chart and add threshold then verify the threshold marker are seen after show threshold button enabled ', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('.euiButton__text').contains('+ Add threshold').click();
-    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
-    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
-    cy.get('.euiButton__text').contains('Preview').click();
-    cy.get('path[style*="rgb(252, 5, 5)"]').eq(1).should('exist');
-    cy.get('.bg-arc').find('path[style*="rgb(252, 5, 5)"]').should('have.length', 4);
-  });
-});
-
-describe.skip('Render gauge chart and verify if reset works properly', () => {
-  it('Render gauge chart with all feild data then click on reset and verify reset works properly', () => {
-    renderGaugeChart();
-    cy.get('.euiButton__text').contains('Update chart').click();
-    cy.get('input[placeholder="Title"]').type('Gauge Chart');
-    cy.get('textarea[placeholder="Description"]').type('Description For Gauge Chart');
-    cy.get('.euiButton__text').contains('Vertical').click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
-    cy.get('.euiButton__text').contains('+ Add threshold').click();
-    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
-    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
-    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
-    cy.get('.euiButton__text').contains('Preview').click();
-    cy.get('.euiButtonEmpty__text').contains('Reset').click();
-    cy.get('input[placeholder="Title"]').should('not.have.value', 'Gauge Chart');
-    cy.get('textarea[placeholder="Description"]').should(
-      'not.have.value',
-      'Description For Gauge Chart'
-    );
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', '');
-    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).should('have.value', '');
-    cy.get('button.euiSwitch__button[aria-checked="false"]')
-      .should('exist')
-      .should('have.length', 3);
-  });
-});

From a77307935794d5bfb8083476c31702f7b261fb00 Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Tue, 17 Jan 2023 22:15:47 -0800
Subject: [PATCH 2/5] fix failing table view tests and remove/modify metric
 switcher

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 .../integration/1_event_analytics.spec.js     | 115 +-----------------
 .cypress/utils/event_analytics/constants.js   |   1 -
 public/components/common/search/search.tsx    |  37 +++---
 .../event_analytics/explorer/explorer.tsx     |  48 ++++----
 .../explorer/save_panel/save_panel.tsx        |  78 ++++--------
 5 files changed, 65 insertions(+), 214 deletions(-)

diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
index a0b70f94e..d26e7fdde 100644
--- a/.cypress/integration/1_event_analytics.spec.js
+++ b/.cypress/integration/1_event_analytics.spec.js
@@ -22,68 +22,11 @@ import {
   renderLineChartForDataConfig,
   renderDataConfig,
   aggregationValues,
-  DataConfigLineChart,
-  renderGaugeChart,
+  DataConfigLineChart
 } from '../utils/event_analytics/constants';
 import { supressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
 import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
 
-const renderHistogramChart = () => {
-  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
-  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
-    .type('Histogram')
-    .type('{enter}');
-  cy.wait(delay);
-  cy.get('g.draglayer.cursor-crosshair').should('exist');
-  cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart');
-  cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
-    .click()
-    .type('This is the description for Histogram chart');
-  cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist');
-  cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size');
-  cy.get('.euiFieldNumber').eq(0).type('4');
-  cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset');
-  cy.get('.euiFieldNumber').eq(0).type('6');
-};
-
-const vis_name_sub_string = Math.floor(Math.random() * 100);
-
-const saveVisualizationAndVerify = () => {
-  cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
-  cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
-  cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
-  cy.get(
-    '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
-  )
-    .eq(0)
-    .click();
-  cy.get('.euiPopover__panel input')
-    .eq(1)
-    .type(`Test visualization` + vis_name_sub_string);
-  cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
-  cy.wait(delay);
-  cy.get('.euiHeaderBreadcrumbs a').eq(1).click();
-  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
-    .eq(0)
-    .type(`Test visualization` + vis_name_sub_string)
-    .type('{enter}');
-  cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click();
-};
-
-const deleteVisualization = () => {
-  cy.get('a[href = "#/event_analytics"]').click();
-  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
-    .eq(0)
-    .type(`Test visualization`)
-    .type('{enter}');
-  cy.get('input[data-test-subj = "checkboxSelectAll"]').click();
-  cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click();
-  cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click();
-  cy.get('input[placeholder = "delete"]').clear().type('delete');
-  cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click();
-  cy.get('.euiToastHeader').should('exist');
-};
-
 describe('Adding sample data and visualization', () => {
   it('Adds sample flights data for event analytics', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
@@ -407,7 +350,7 @@ describe('Search fields in sidebar', () => {
 });
 
 describe('Delete saved objects', () => {
-  it('Delete visualizations/querys from event analytics', () => {
+  it('Delete visualizations/queries from event analytics', () => {
     landOnEventHome();
     cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
     cy.get('.euiContextMenuItem__text').contains('50 rows').click();
@@ -778,7 +721,7 @@ describe.skip('Renders chart and verify Toast message if X-axis and Y-axis value
   });
 });
 
-describe.only('Render Table View', () => {
+describe('Table View', () => {
   before(() => {
     landOnEventVisualizations();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
@@ -786,61 +729,11 @@ describe.only('Render Table View', () => {
     cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
   });
 
-  it('Switch visualization for table view and verify table data', () => {
-    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist');
-    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
-    cy.get('.ag-header-cell-text').contains('DestCityName').should('exist');
-    cy.get('.ag-header-cell-text').contains('Carrier').should('exist');
-  });
-
-  it('Switch visualization for table view and change data table density', () => {
-    cy.get('.euiButtonEmpty__text').contains('Density').click();
-    cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(1).click();
-    cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(2).click();
-  });
-
-  it('Switch visualization for table view and show and hide column', () => {
-    cy.get('.euiButtonEmpty__text').contains('Columns').click();
-    cy.get('.euiSwitch__label').contains('DestCountry').click();
-    cy.get('.ag-header-cell-text').contains('DestCountry').should('not.exist');
-    cy.get('.euiSwitch__label').contains('Carrier').click();
-    cy.get('.ag-header-cell-text').contains('Carrier').should('not.exist');
-    cy.get('.euiSwitch__label').contains('DestCountry').click();
-    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
-  });
-
-  it('Switch visualization for table view and see data in full screen', () => {
+  it('Switch to table view', () => {
     cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist');
     cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
     cy.get('.ag-header-cell-text').contains('DestCityName').should('exist');
     cy.get('.ag-header-cell-text').contains('Carrier').should('exist');
-    cy.get('.euiButtonEmpty__text').contains('Full screen').click();
-    cy.wait(delay);
-    cy.get('body').type('{esc}');
-    cy.wait(delay);
-  });
-
-  it('Switch visualization for table view and sort the column data', () => {
-    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click();
-    cy.get('.ag-cell-value').contains('125.49737').should('exist');
-    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click();
-    cy.get('.ag-cell-value').contains('1199.729').should('exist');
-    cy.get('.ag-header-cell-text').contains('DestCountry').click();
-    cy.get('.ag-cell-value').contains('AE').should('exist');
-  });
-
-  it('Switch visualization for table view and verify pagination link', () => {
-    cy.get('[aria-label="Next page"]').click();
-    cy.get('.ag-cell-value').contains('Vienna').should('exist');
-    cy.get('[aria-label="Previous page"]').click();
-    cy.get('.ag-cell-value').contains('Dubai').should('exist');
-    cy.get('[aria-label="Page 4"]').contains('4').click();
-    cy.get('.ag-cell-value').contains('Edmonton').should('exist');
-  });
-
-  it('Switch visualization for table view and rows per page data', () => {
-    cy.get('.euiButtonEmpty__text').eq('6').click();
-    cy.get('.euiContextMenuItem__text').eq(1).click();
   });
 });
 
diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js
index 8a996fd12..47bad13d2 100644
--- a/.cypress/utils/event_analytics/constants.js
+++ b/.cypress/utils/event_analytics/constants.js
@@ -78,7 +78,6 @@ export const querySearch = (query, rangeSelected) => {
     .type(query, { delay: 50 });
   cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
   cy.get(rangeSelected).click();
-  cy.wait(delay * 2);
   cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
 };
 
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index f6d30725a..7767898f2 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -6,6 +6,7 @@
 import './search.scss';
 
 import React, { useState } from 'react';
+import { isEqual } from 'lodash';
 import {
   EuiFlexGroup,
   EuiButton,
@@ -16,7 +17,7 @@ import {
   EuiBadge,
   EuiContextMenuPanel,
   EuiToolTip,
-  EuiCallOut
+  EuiCallOut,
 } from '@elastic/eui';
 import { DatePicker } from './date_picker';
 import '@algolia/autocomplete-theme-classic';
@@ -26,6 +27,7 @@ import { PPLReferenceFlyout } from '../helpers';
 import { uiSettingsService } from '../../../../common/utils';
 import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
 import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
+import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -68,7 +70,6 @@ export const Search = (props: any) => {
     showSavePanelOptionsList,
     showSaveButton = true,
     handleTimeRangePickerRefresh,
-    liveTailButton,
     isLiveTailPopoverOpen,
     closeLiveTailPopover,
     popoverItems,
@@ -84,14 +85,9 @@ export const Search = (props: any) => {
     liveTailName,
     searchError = null,
     curVisId,
-    spanValue,
     setSubType,
-    metricMeasure,
-    setMetricMeasure,
-    setMetricLabel,
-    metricChecked,
   } = props;
-  
+
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -221,15 +217,12 @@ export const Search = (props: any) => {
                   showOptionList={
                     showSavePanelOptionsList &&
                     searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
-                    
                   }
                   curVisId={curVisId}
-                  spanValue={spanValue}
                   setSubType={setSubType}
-                  metricMeasure={metricMeasure}
-                  setMetricMeasure={setMetricMeasure}
-                  setMetricLabel={setMetricLabel}
-                  metricChecked={metricChecked}
+                  isSaveAsMetricEnabled={
+                    isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null
+                  }
                 />
                 <EuiPopoverFooter>
                   <EuiFlexGroup justifyContent="flexEnd">
@@ -262,17 +255,19 @@ export const Search = (props: any) => {
           </>
         )}
       </EuiFlexGroup>
-      { searchError && searchError.error && (
+      {searchError && searchError.error && (
         <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
           <EuiFlexItem>
-            <EuiCallOut title={JSON.parse(searchError.message).error.reason} color="danger" iconType="alert">
-              <p>
-                {JSON.parse(searchError.message).error.details}
-              </p>
+            <EuiCallOut
+              title={JSON.parse(searchError.message).error.reason}
+              color="danger"
+              iconType="alert"
+            >
+              <p>{JSON.parse(searchError.message).error.details}</p>
             </EuiCallOut>
           </EuiFlexItem>
-        </EuiFlexGroup>)
-      }
+        </EuiFlexGroup>
+      )}
       {flyout}
     </div>
   );
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index f151e6750..169f3f0e5 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -187,10 +187,8 @@ export const Explorer = ({
     value: string;
   }>();
   const [viewLogPatterns, setViewLogPatterns] = useState(false);
-  const [spanValue, setSpanValue] = useState(false);
   const [subType, setSubType] = useState('visualization');
   const [metricMeasure, setMetricMeasure] = useState('');
-  const [metricLabel, setMetricLabel] = useState([]);
   const [metricChecked, setMetricChecked] = useState(false);
   const queryRef = useRef();
   const appBasedRef = useRef('');
@@ -570,7 +568,10 @@ export const Explorer = ({
       await updateQueryInStore(patternSelectQuery);
       // Passing in empty string will remove pattern query
       const patternErrorHandler = getErrorHandler('Error fetching patterns');
-      getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', patternErrorHandler);
+      getPatterns(
+        selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
+        patternErrorHandler
+      );
     }
   };
 
@@ -645,7 +646,10 @@ export const Explorer = ({
       getErrorHandler('Error overriding default pattern')
     );
     setIsOverridingPattern(false);
-    await getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', getErrorHandler('Error fetching patterns'));
+    await getPatterns(
+      selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
+      getErrorHandler('Error fetching patterns')
+    );
   };
 
   const totalHits: number = useMemo(() => {
@@ -850,7 +854,10 @@ export const Explorer = ({
                                               })
                                             );
                                             await getPatterns(
-                                              selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
+                                              selectedIntervalRef.current?.value.replace(
+                                                /^auto_/,
+                                                ''
+                                              ) || 'y',
                                               getErrorHandler('Error fetching patterns')
                                             );
                                           }}
@@ -1253,7 +1260,7 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
-            subType: subType,
+            subType,
           })
           .then((res: any) => {
             setToast(
@@ -1288,7 +1295,7 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
-            subType: subType,
+            subType,
           })
           .then((res: any) => {
             batch(() => {
@@ -1430,25 +1437,17 @@ export const Explorer = ({
     [tempQuery]
   );
 
-  const generateViewQuery = (query: string) => {
-    if (query.includes(appBaseQuery)) {
-      if (query.includes('|')) {
+  const generateViewQuery = (queryString: string) => {
+    if (queryString.includes(appBaseQuery)) {
+      if (queryString.includes('|')) {
         // Some scenarios have ' | ' after base query and some have '| '
-        return query.replace(' | ', '| ').replace(appBaseQuery + '| ', '');
+        return queryString.replace(' | ', '| ').replace(appBaseQuery + '| ', '');
       }
       return '';
     }
-    return query;
+    return queryString;
   };
 
-  useEffect(() => {
-    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]);
-
   return (
     <TabContext.Provider
       value={{
@@ -1469,7 +1468,9 @@ export const Explorer = ({
         query,
       }}
     >
-      <div className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}>
+      <div
+        className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}
+      >
         <Search
           key="search-component"
           query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}
@@ -1504,12 +1505,7 @@ export const Explorer = ({
           liveTailName={liveTailNameRef.current}
           searchError={explorerVisualizations}
           curVisId={curVisId}
-          spanValue={spanValue}
           setSubType={setSubType}
-          metricMeasure={metricMeasure}
-          setMetricMeasure={setMetricMeasure}
-          setMetricLabel={setMetricLabel}
-          metricChecked={metricChecked}
         />
         <EuiTabbedContent
           className="mainContentTabs"
diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
index 277d194ec..3f4d01cd1 100644
--- a/public/components/event_analytics/explorer/save_panel/save_panel.tsx
+++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -4,21 +4,17 @@
  */
 
 import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   EuiTitle,
   EuiComboBox,
   EuiFormRow,
-  EuiSpacer,
   EuiFieldText,
   EuiSwitch,
   EuiToolTip,
-  EuiSelect,
 } from '@elastic/eui';
 import { useEffect } from 'react';
-import { isEmpty, isEqual } from 'lodash';
+import { isEmpty } from 'lodash';
 import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
-import { UNITS_OF_MEASURE } from '../../../../../common/constants/explorer';
 
 interface ISavedPanelProps {
   selectedOptions: any;
@@ -28,12 +24,8 @@ interface ISavedPanelProps {
   savePanelName: string;
   showOptionList: boolean;
   curVisId: string;
-  spanValue: boolean;
   setSubType: any;
-  metricMeasure: string;
-  setMetricMeasure: any;
-  setMetricLabel: any;
-  metricChecked: boolean;
+  isSaveAsMetricEnabled: boolean;
 }
 
 interface CustomPanelOptions {
@@ -50,59 +42,36 @@ export const SavePanel = ({
   savedObjects,
   savePanelName,
   showOptionList,
-  curVisId,
-  spanValue,
   setSubType,
-  metricMeasure,
-  setMetricMeasure,
-  setMetricLabel,
-  metricChecked,
+  isSaveAsMetricEnabled,
 }: ISavedPanelProps) => {
   const [options, setOptions] = useState([]);
   const [checked, setChecked] = useState(false);
-  const [measure, setMeasure] = useState('');
-  const [label, setLabel] = useState([]);
+  const [svpnlError, setSvpnlError] = useState(null);
 
-  const getCustomPabnelList = async (savedObjects: SavedObjects) => {
-    const optionRes = await savedObjects
+  const getCustomPabnelList = async (svobj: SavedObjects) => {
+    const optionRes = await svobj
       .fetchCustomPanels()
       .then((res: any) => {
         return res;
       })
-      .catch((error: any) => console.error(error));
+      .catch((error: any) => setSvpnlError(error));
     setOptions(optionRes?.panels || []);
   };
 
   useEffect(() => {
     getCustomPabnelList(savedObjects);
-  }, []);
+  });
 
   const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
     setChecked(e.target.checked);
     if (e.target.checked) {
-      setSubType("metric")
+      setSubType('metric');
     } else {
-      setSubType("visualization")
+      setSubType('visualization');
     }
   };
 
-  const onMeasureChange = (selectedMeasures: string) => {
-    setMeasure(selectedMeasures);
-    setMetricMeasure(selectedMeasures);
-  };
-
-  const onLabelChange = (selectedLabels: React.SetStateAction<never[]>) => {
-    setLabel(selectedLabels);
-    setMetricLabel(selectedLabels);
-  };
-
-  useEffect(() => {
-    if (metricChecked) {
-      setChecked(true);
-      setMeasure(metricMeasure);
-    }
-  }, [])
-  
   return (
     <>
       {showOptionList && (
@@ -113,8 +82,8 @@ export const SavePanel = ({
           <EuiFormRow helpText="Search existing dashboards or applications by name">
             <EuiComboBox
               placeholder="Select dashboards/applications"
-              onChange={(options) => {
-                handleOptionChange(options);
+              onChange={(daOptions) => {
+                handleOptionChange(daOptions);
               }}
               selectedOptions={selectedOptions}
               options={options.map((option: CustomPanelOptions) => {
@@ -146,18 +115,17 @@ export const SavePanel = ({
       {showOptionList && (
         <>
           <EuiFormRow display="columnCompressedSwitch">
-          <EuiToolTip
-          content="Only Time Series visualization and a query including stats/span can be saved as Metric" >
-            <EuiSwitch
-              showLabel={true}
-              label="Save as Metric"
-              checked={checked}
-              onChange={onToggleChange}
-              compressed
-              disabled = {!((isEqual(curVisId, 'line')) && spanValue)}
-            />
-          </EuiToolTip>
-          </EuiFormRow>        
+            <EuiToolTip content="Only Time Series visualization and a query including stats/span can be saved as Metric">
+              <EuiSwitch
+                showLabel={true}
+                label="Save as Metric"
+                checked={checked}
+                onChange={onToggleChange}
+                compressed
+                disabled={!isSaveAsMetricEnabled}
+              />
+            </EuiToolTip>
+          </EuiFormRow>
         </>
       )}
     </>

From 512a0ef7f38f98450e60e77f96238eb04ba1f82c Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Mon, 23 Jan 2023 21:18:21 -0800
Subject: [PATCH 3/5] update events tests and added vis tests

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 .../integration/1_event_analytics.spec.js     | 481 ++++++------------
 .cypress/utils/event_analytics/constants.js   |  26 +-
 .../data_config_panel_fields.tsx              |  36 +-
 .../data_configurations_panel.tsx             |  35 +-
 .../explorer/visualizations/index.tsx         |   7 +-
 .../hooks/use_render_visualizations.ts        |  18 +-
 6 files changed, 222 insertions(+), 381 deletions(-)

diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
index d26e7fdde..8056c3299 100644
--- a/.cypress/integration/1_event_analytics.spec.js
+++ b/.cypress/integration/1_event_analytics.spec.js
@@ -18,11 +18,22 @@ import {
   landOnEventExplorer,
   landOnEventVisualizations,
   landOnPanels,
-  renderPieChart,
-  renderLineChartForDataConfig,
-  renderDataConfig,
-  aggregationValues,
-  DataConfigLineChart
+  HOST_TEXT_1,
+  HOST_TEXT_2,
+  HOST_TEXT_3,
+  HOST_TEXT_4,
+  AGENT_TEXT_1,
+  AGENT_TEXT_2,
+  AGENT_TEXT_3,
+  BAR_LEG_TEXT_1,
+  BAR_LEG_TEXT_2,
+  BAR_LEG_TEXT_3,
+  VIS_TYPE_PIE,
+  VIS_TYPE_HBAR,
+  VIS_TYPE_VBAR,
+  VIS_TYPE_HEATMAP,
+  FIELD_HOST,
+  FIELD_AGENT
 } from '../utils/event_analytics/constants';
 import { supressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
 import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
@@ -33,7 +44,6 @@ describe('Adding sample data and visualization', () => {
     cy.get('div[data-test-subj="sampleDataSetCardflights"]')
       .contains(/(Add|View) data/)
       .click();
-    cy.wait(delay);
   });
 });
 
@@ -93,7 +103,7 @@ describe('Open flyout for a data row to see details', () => {
       .should('be.visible');
   });
 
-  it('Should be able to see srrounding docs', () => {
+  it('Should be able to see surrounding docs', () => {
     cy.get('.observability-flyout span.euiButton__text')
       .contains('View surrounding events')
       .should('be.visible')
@@ -107,6 +117,7 @@ describe('Open flyout for a data row to see details', () => {
 describe('Add/delete/switch explorer top level tabs', () => {
   before(() => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
   });
 
   it('Add a new tab', () => {
@@ -127,7 +138,6 @@ describe('Add/delete/switch explorer top level tabs', () => {
       .find('button.euiTab')
       .first()
       .click();
-    cy.wait(delay);
     supressResizeObserverIssue();
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
@@ -188,18 +198,15 @@ describe('Click actions', () => {
 
   it('Actions - click event explorer', () => {
     cy.get('[data-test-subj="eventHomeAction"]').click();
-    cy.wait(delay);
     cy.get('[data-test-subj="eventHomeAction__explorer"]').click();
     cy.url().should('contain', '#/event_analytics/explorer');
   });
 
   it('Actions - add sample data', () => {
     cy.get('[data-test-subj="eventHomeAction"]').click();
-    cy.wait(delay);
     cy.get('[data-test-subj="eventHomeAction__addSamples"]').click();
     cy.get('[data-test-subj="confirmModalConfirmButton"]').click();
-    cy.wait(delay * 4);
-    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
   });
 
   it('Actions - delete saved queries', () => {
@@ -208,7 +215,6 @@ describe('Click actions', () => {
     cy.get('[data-test-subj="eventHomeAction__delete"]').click();
     cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
     cy.get('[data-test-subj="popoverModal__deleteButton"').click();
-    cy.wait(delay);
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
   });
 });
@@ -223,19 +229,14 @@ describe('Saves a query on explorer page', () => {
     cy.get('[data-test-subj="eventExplorer__querySaveName"]')
       .focus()
       .type(SAVE_QUERY2, { force: true });
-
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
-    cy.wait(delay * 2);
-    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
-
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
     landOnEventHome();
-
     cy.get('[data-test-subj="eventHome__savedQueryTableName"]').first().contains(SAVE_QUERY2);
   });
 
   it('Saves a visualization to an existing panel', () => {
     landOnPanels();
-
     cy.get('[data-test-subj="customPanels__createNewPanels"]').click();
     cy.get('input.euiFieldText').type(TESTING_PANEL);
     cy.get('.euiButton__text')
@@ -255,12 +256,12 @@ describe('Saves a query on explorer page', () => {
     cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TESTING_PANEL);
     cy.get(`input[value="${TESTING_PANEL}"]`).click();
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
-    cy.wait(delay);
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
   });
 
   it('Saves a query on event tab of explorer page', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
 
     cy.get('.tab-title').contains('Events').click();
@@ -280,6 +281,7 @@ describe('Saves a query on explorer page', () => {
 
   it('Click on a saved query from event analytics home', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
 
     cy.get('.tab-title').contains('Events').click();
@@ -308,6 +310,7 @@ describe('Saves a query on explorer page', () => {
 describe('Override timestamp for an index', () => {
   it('Click override button to override default timestamp', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[2].query);
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
@@ -327,6 +330,7 @@ describe('Override timestamp for an index', () => {
 describe('Toggle sidebar fields', () => {
   it('Toggle fields between available and selected section', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
     cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click();
     cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
@@ -340,6 +344,7 @@ describe('Toggle sidebar fields', () => {
 describe('Search fields in sidebar', () => {
   it('Search a field', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
     cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').type('A');
     cy.get('[data-test-subj="field-Cancelled"]').should('not.exist');
@@ -368,69 +373,58 @@ describe('Delete saved objects', () => {
 describe('Click to view field insights', () => {
   beforeEach(() => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID);
   });
 
   it('Click a numerical field to view field insights', () => {
     cy.get('[data-test-subj="field-bytes-showDetails"]').click();
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Top values')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Rare values')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Average overtime')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Maximum overtime')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Minimum overtime')
-      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should('contain', 'Top values');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should(
+      'contain',
+      'Rare values'
+    );
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should(
+      'contain',
+      'Average overtime'
+    );
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should(
+      'contain',
+      'Maximum overtime'
+    );
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should(
+      'contain',
+      'Minimum overtime'
+    );
   });
 
   it('Click a non-numerical field to view insights', () => {
     cy.get('[data-test-subj="field-host-showDetails"]').click();
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Top values')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Rare values')
-      .should('exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Average overtime')
-      .should('not.exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Maximum overtime')
-      .should('not.exist');
-    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
-      .contains('Minimum overtime')
-      .should('not.exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should('contain', 'Top values');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should(
+      'contain',
+      'Rare values'
+    );
   });
 });
 
 describe('Switch on and off livetail', () => {
   it('Switch on and off in live tail', () => {
     landOnEventExplorer();
-    cy.wait(delay);
-
+    supressResizeObserverIssue();
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
-
     cy.get('[data-test-subj=eventLiveTail]').click();
     cy.get('[data-test-subj=eventLiveTail__delay10s]').click();
-    cy.wait(delay * 2);
-    cy.get('.euiToastHeader__title').contains('On').should('exist');
-
+    cy.get('.euiToastHeader__title').should('contain', 'On');
     cy.get('[data-test-subj=eventLiveTail__off').click();
-    cy.wait(delay * 2);
-    cy.get('.euiToastHeader__title').contains('Off').should('exist');
+    cy.get('.euiToastHeader__title').should('contain', 'Off');
   });
 });
 
 describe('Live tail stop automatically', () => {
   it('Moving to other tab should stop live tail automatically', () => {
     landOnEventExplorer();
+    supressResizeObserverIssue();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
     cy.get('[data-test-subj=eventLiveTail]').click();
@@ -439,6 +433,7 @@ describe('Live tail stop automatically', () => {
   });
 
   it('Add a new tab', () => {
+    supressResizeObserverIssue();
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
       .then((lists) => {
@@ -491,298 +486,106 @@ describe('Live tail stop automatically', () => {
   });
 });
 
-describe.skip('Renders bar charts', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
-  });
-
-  it('Renders vertical bar chart', () => {
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains('Bar').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
-    cy.wait(delay);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
-    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click();
-    cy.wait(delay);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Vertical').click();
-    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').last().click();
-    cy.wait(delay);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click();
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.wait(delay * 2);
-    cy.get(
-      'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]'
-    ).should('exist');
-  });
-
-  it('Renders horiztontal bar chart', () => {
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Bar').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
-    cy.wait(delay);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
-    cy.wait(delay);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
-    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Horizontal').click();
-    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').eq(1).click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click();
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.wait(delay * 2);
-    cy.get(
-      'g.yaxislayer-above > g.ytick text[data-unformatted|="artifacts.opensearch.org"]'
-    ).should('exist');
-  });
-});
-
-describe.skip('Renders line charts', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
-  });
-
-  it('Renders line chart with threshold', () => {
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Line').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
-    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Lines').click();
-    cy.get('#configPanel__Thresholds span').contains('+ Add threadshold').click();
-    cy.get('[data-test-subj="nameFieldText"]').type('Max');
-    cy.get('[data-test-subj="valueFieldNumber"]').type(3800);
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.wait(delay * 2);
-    cy.get('g.text > g.textpoint text[data-unformatted|="Max"]').should('exist');
-    cy.get(
-      'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]'
-    ).should('exist');
-  });
-});
-
-describe.skip('Renders pie charts', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
-  });
-
-  it('Renders pie chart', () => {
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click();
-    cy.wait(delay);
-    cy.get('g.pielayer').should('exist');
-  });
-});
-
-describe.skip('Renders heatmap chart', () => {
-  beforeEach(() => {
+describe('Visualizing data', () => {
+  before(() => {
     landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID);
   });
 
-  it('Renders heatmap chart with different z-axes', () => {
-    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click();
-    cy.wait(delay * 2);
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.get('g.g-gtitle text[data-unformatted|="count()"]').should('exist');
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('avg(bytes)').click();
+  it('Visualize pie chart', () => {
+    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_PIE).click();
+    cy.get('[data-test-subj="vizConfigSection-series"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
+    cy.get('[data-test-subj="vizConfigSection-dimensions"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+      .find('[data-test-subj="comboBoxInput"]')
+      .click()
+      .type(FIELD_HOST);
+    cy.get(`input[value="${FIELD_HOST}"]`).click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
     cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.wait(delay * 2);
-    cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist');
-  });
-});
-
-describe.skip('Renders markdown chart', () => {
-  it('Renders markdown chart with test title', () => {
-    landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get(
-      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
-    ).click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Text').click();
-    cy.get('[data-test-subj="workspace__viz_markdown"] h2').contains('Text').should('exist');
-    cy.get('textarea.euiMarkdownEditorTextArea').type('## testing title');
+    cy.get('.infolayer .legendtext').as('legandTxt');
+    cy.get('@legandTxt').should('contain', HOST_TEXT_1);
+    cy.get('@legandTxt').should('contain', HOST_TEXT_2);
+    cy.get('@legandTxt').should('contain', HOST_TEXT_3);
+    cy.get('@legandTxt').should('contain', HOST_TEXT_4);
+  });
+
+  it('Visualize vertical bar chart', () => {
+    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_VBAR).click();
+    cy.get('[data-test-subj="vizConfigSection-series"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
+    cy.get('[data-test-subj="vizConfigSection-dimensions"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+      .find('[data-test-subj="comboBoxInput"]')
+      .click()
+      .type(FIELD_HOST);
+    cy.get(`input[value="${FIELD_HOST}"]`).click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
+    cy.get('[data-test-subj="vizConfigSection-breakdowns"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+      .find('[data-test-subj="comboBoxInput"]')
+      .click()
+      .type(FIELD_AGENT);
+    cy.get(`input[value="${FIELD_AGENT}"]`).click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
     cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.wait(delay * 2);
-    cy.get('[data-test-subj="workspace__viz_markdown"] h2')
-      .contains('testing title')
-      .should('exist');
-  });
-});
-
-describe.skip('Renders data view', () => {
-  it('Switch views between data table and visualization workspace', () => {
-    landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
-    cy.get('[data-test-subj="workspace__dataTable"]').should('exist');
-    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
-    cy.get('[data-test-subj="workspace__dataTable"]').should('not.exist');
-  });
-});
+    supressResizeObserverIssue();
 
-describe.skip('Renders chart and verify Toast message if X-axis and Y-axis values are empty', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
-  });
-  it('Renders chart, clear X-axis and Y-axis value and click on Apply button, Toast message should display with error message', () => {
-    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
-    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
-      .type('Bar')
-      .type('{enter}');
-    cy.wait(delay);
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]')
-      .eq(0)
-      .click({ force: true });
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
-    cy.wait(delay);
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({
-      multiple: true,
-    });
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(1).click();
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
-      .eq(0)
-      .should('have.value', '');
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
-      .eq(1)
-      .should('have.value', '');
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    cy.get('[data-test-subj="euiToastHeader"]')
-      .contains('Invalid value options configuration selected.')
-      .should('exist');
+    cy.get('.infolayer .legendtext').as('legandTxt');
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1);
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2);
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3);
   });
 
-  it('Renders chart, clear X-axis and Y-axis value and try to save visulization, Toast message should display with error message', () => {
-    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
-    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
-      .type('Bar')
-      .type('{enter}');
-    cy.wait(delay);
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]')
-      .eq(0)
-      .click({ force: true });
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
-    cy.wait(delay);
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({
-      multiple: true,
-    });
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
-      .eq(0)
-      .should('have.value', '');
-    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
+  it('Visualize horizontal bar chart', () => {
+    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HBAR).click();
+    cy.get('[data-test-subj="vizConfigSection-dimensions"]')
+      .find('[data-test-subj="viz-config-section"]')
       .eq(1)
-      .should('have.value', '');
-    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
-    cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
-    cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
-    cy.get(
-      '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
-    )
-      .eq(0)
+      .find('[data-test-subj="viz-config-delete-btn"]')
       .click();
-    cy.get('.euiPopover__panel input').eq(1).type(`Test visulization_`);
-    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
-    cy.get('[data-test-subj="euiToastHeader"]')
-      .contains('Invalid value options configuration selected.')
-      .should('exist');
-  });
-});
-
-describe('Table View', () => {
-  before(() => {
-    landOnEventVisualizations();
-    clearQuerySearchBoxText('searchAutocompleteTextArea');
-    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
-    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
-  });
-
-  it('Switch to table view', () => {
-    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist');
-    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
-    cy.get('.ag-header-cell-text').contains('DestCityName').should('exist');
-    cy.get('.ag-header-cell-text').contains('Carrier').should('exist');
-  });
-});
-
-describe.skip('Render Time series chart/Line chart and verify Data configurations UI ', () => {
-  it('Render line chart and verify Data Configuration Panel', () => {
-    renderLineChartForDataConfig();
-    DataConfigLineChart();
-  });
-});
-
-describe.skip('Renders Data Configurations section for Pie chart', () => {
-  beforeEach(() => {
-    landOnEventVisualizations();
+    cy.get('[data-test-subj="vizConfigSection-breakdowns"]')
+      .find('[data-test-subj="viz-config-add-btn"]')
+      .click();
+    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+      .find('[data-test-subj="comboBoxInput"]')
+      .click()
+      .type(FIELD_AGENT);
+    cy.get(`input[value="${FIELD_AGENT}"]`).click();
+    cy.get('[data-test-subj="panelCloseBtn"]').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('.infolayer .legendtext').as('legandTxt');
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1);
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2);
+    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3);
   });
 
-  it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => {
-    renderPieChart();
-    renderDataConfig();
-  });
-
-  it('Validate "Add" and "X" buttons', () => {
-    renderPieChart();
-    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
-    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click();
-    cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(3).click();
-    cy.get('.euiComboBoxOption__content').eq(2).click();
-    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click();
-    cy.get('.euiComboBoxOption__content').eq(1).click();
-    cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field');
-    cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click();
-    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist');
-  });
-
-  it('Verify drop down values for Aggregation', () => {
-    renderPieChart();
-    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
-    cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist');
-    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
-    cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click();
-    aggregationValues.forEach(function (value) {
-      cy.get('.euiComboBoxOption__content').contains(value);
-    });
-  });
-
-  it('Collapsible mode for Data Configuration panel', () => {
-    renderPieChart();
-    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
-    cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click();
-    cy.get('[data-test-subj="panel-1-toggle"]').click();
-    cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist');
+  it('Visualize heatmap chart', () => {
+    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HEATMAP).click();
+    supressResizeObserverIssue();
+    cy.get('g.cartesianlayer g.xy g.xaxislayer-above g.xtick text').as('legandXTxt');
+    cy.get('@legandXTxt').should('contain', HOST_TEXT_1);
+    cy.get('@legandXTxt').should('contain', HOST_TEXT_3);
+    cy.get('@legandXTxt').should('contain', HOST_TEXT_4);
+    cy.get('@legandXTxt').should('contain', HOST_TEXT_2);
+    cy.get('g.cartesianlayer g.xy g.yaxislayer-above g.ytick text').as('legandYTxt');
+    cy.get('@legandYTxt').should('contain', AGENT_TEXT_1);
+    cy.get('@legandYTxt').should('contain', AGENT_TEXT_2);
+    cy.get('@legandYTxt').should('contain', AGENT_TEXT_3);
   });
 });
diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js
index 47bad13d2..4168fa74a 100644
--- a/.cypress/utils/event_analytics/constants.js
+++ b/.cypress/utils/event_analytics/constants.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue, TIMEOUT_DELAY } from '../constants';
+import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue } from '../constants';
 
 export const delay = 1000;
 export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]';
@@ -20,6 +20,7 @@ export const TEST_QUERIES = [
   },
   {
     query: 'source = opensearch_dashboards_sample_data_logs',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
   },
   {
     query:
@@ -83,24 +84,20 @@ export const querySearch = (query, rangeSelected) => {
 
 export const landOnEventHome = () => {
   cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
-  cy.wait(delay);
 };
 
 export const landOnEventExplorer = () => {
   cy.visit(
     `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
   );
-  supressResizeObserverIssue();
-  cy.wait(delay);
 };
 
 export const landOnEventVisualizations = () => {
   cy.visit(
     `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
   );
+  supressResizeObserverIssue(); // have to add
   cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
-  supressResizeObserverIssue();
-  cy.wait(delay);
 };
 
 export const landOnPanels = () => {
@@ -251,3 +248,20 @@ export const renderGaugeChart = () => {
     .type('Gauge')
     .type('{enter}');
 };
+
+export const HOST_TEXT_1 = "artifacts.opensearch.org";
+export const HOST_TEXT_2 = "www.opensearch.org";
+export const HOST_TEXT_3 = "cdn.opensearch-opensearch-opensearch.org";
+export const HOST_TEXT_4 = "opensearch-opensearch-opensearch.org";
+export const AGENT_TEXT_1 = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)";
+export const AGENT_TEXT_2 = "Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24";
+export const AGENT_TEXT_3 = "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1";
+export const BAR_LEG_TEXT_1 = `${AGENT_TEXT_1},count()`;
+export const BAR_LEG_TEXT_2 = `${AGENT_TEXT_2},count()`;
+export const BAR_LEG_TEXT_3 = `${AGENT_TEXT_3},count()`;
+export const VIS_TYPE_PIE = 'Pie';
+export const VIS_TYPE_VBAR = 'Vertical bar';
+export const VIS_TYPE_HBAR = 'Horizontal bar';
+export const VIS_TYPE_HEATMAP = 'Heatmap';
+export const FIELD_HOST = 'host';
+export const FIELD_AGENT = 'agent';
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
index d7d13710c..4c7f666c5 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -13,26 +13,26 @@ import {
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
-import { isArray, isEmpty } from 'lodash';
+import { isArray, isEmpty, lowerCase } from 'lodash';
 import {
   AGGREGATIONS,
   CUSTOM_LABEL,
   GROUPBY,
   SPAN,
-  DATA_CONFIG_HINTS_INFO
+  DATA_CONFIG_HINTS_INFO,
 } from '../../../../../../../../common/constants/explorer';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import {
   ConfigListEntry,
   DataConfigPanelFieldProps,
 } from '../../../../../../../../common/types/explorer';
-import { removeBacktick } from '../../../../../../../../common/utils'
+import { removeBacktick } from '../../../../../../../../common/utils';
 
 const HIDE_ADD_BUTTON_VIZ_TYPES = [
   VIS_CHART_TYPES.HeatMap,
   VIS_CHART_TYPES.Line,
   VIS_CHART_TYPES.Scatter,
-  VIS_CHART_TYPES.Pie
+  VIS_CHART_TYPES.Pie,
 ];
 
 export const DataConfigPanelFields = ({
@@ -55,10 +55,10 @@ export const DataConfigPanelFields = ({
     if (visType === VIS_CHART_TYPES.HeatMap)
       return name === AGGREGATIONS ? list.length >= 1 : list.length >= 2;
     // condition for line and scatter for dimensions section.
-    return name === GROUPBY && (list.length >= 1 || !isEmpty(time_field));
+    return name === GROUPBY && (list.length >= 1 || !isEmpty(timeField));
   };
 
-  const { time_field, unit, interval } = dimensionSpan;
+  const { time_field: timeField, unit, interval } = dimensionSpan;
 
   const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
   const crossIcon = (index: number, configName: string) => (
@@ -68,6 +68,7 @@ export const DataConfigPanelFields = ({
       aria-label="clear-field"
       iconSize="s"
       onClick={() => handleServiceRemove(index, configName)}
+      data-test-subj="viz-config-delete-btn"
     />
   );
 
@@ -83,7 +84,7 @@ export const DataConfigPanelFields = ({
   );
 
   return (
-    <div className="panel_section">
+    <div className="panel_section" data-test-subj={`vizConfigSection-${lowerCase(sectionName)}`}>
       <div style={{ display: 'flex' }}>
         <EuiTitle size="xxs" className="panel_title">
           <h3>{sectionName}</h3>
@@ -91,15 +92,16 @@ export const DataConfigPanelFields = ({
         {infoToolTip(tooltipIcon, DATA_CONFIG_HINTS_INFO[`${sectionName}`])}
       </div>
       <EuiSpacer size="s" />
-      {sectionName === GROUPBY && dimensionSpan && !isEmpty(time_field) && (
-        <EuiPanel paddingSize="s" className="panelItem_button">
+      {sectionName === GROUPBY && dimensionSpan && !isEmpty(timeField) && (
+        <EuiPanel paddingSize="s" className="panelItem_button" data-test-subj="viz-config-section">
           <EuiText size="s" className="field_text">
             <EuiLink
               role="button"
               tabIndex={0}
               onClick={() => handleServiceEdit(list.length - 1, GROUPBY, true)}
+              data-test-subj="viz-config-add-btn"
             >
-              {`${SPAN}(${time_field[0]?.name}, ${interval} ${unit[0]?.value})`}
+              {`${SPAN}(${timeField[0]?.name}, ${interval} ${unit[0]?.value})`}
             </EuiLink>
           </EuiText>
           {crossIcon(-1, SPAN)}
@@ -109,14 +111,21 @@ export const DataConfigPanelFields = ({
       {isArray(list) &&
         list.map((obj: ConfigListEntry, index: number) => (
           <Fragment key={index}>
-            <EuiPanel paddingSize="s" className="panelItem_button">
+            <EuiPanel
+              paddingSize="s"
+              className="panelItem_button"
+              data-test-subj="viz-config-section"
+            >
               <EuiText size="s" className="field_text">
                 <EuiLink
                   role="button"
                   tabIndex={0}
                   onClick={() => handleServiceEdit(index, sectionName, false)}
+                  data-test-subj="viz-config-add-btn"
                 >
-                  {removeBacktick(obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`)}
+                  {removeBacktick(
+                    obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`
+                  )}
                 </EuiLink>
               </EuiText>
               {isAggregation
@@ -127,7 +136,7 @@ export const DataConfigPanelFields = ({
           </Fragment>
         ))}
       {!hideClickToAddButton(sectionName) && (
-        <EuiPanel className="panelItem_button" grow>
+        <EuiPanel className="panelItem_button" data-test-subj="viz-config-section" grow>
           <EuiText size="s">{addButtonText}</EuiText>
           <EuiButtonIcon
             iconType="plusInCircle"
@@ -135,6 +144,7 @@ export const DataConfigPanelFields = ({
             iconSize="s"
             color="primary"
             onClick={() => handleServiceAdd(sectionName)}
+            data-test-subj="viz-config-add-btn"
           />
         </EuiPanel>
       )}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index 2241f435a..203fa5269 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -214,7 +214,8 @@ export const DataConfigPanelItem = ({
    * @param query PPL query string.
    * @returns stats information of a parsed query.
    */
-  const getStatsTokens = (query: string) => queryManager!.queryParser().parse(query).getStats();
+  const getStatsTokens = (queryString: string) =>
+    queryManager!.queryParser().parse(queryString).getStats();
 
   /**
    * Builds new query based on existing query stats and new configurations.
@@ -247,7 +248,7 @@ export const DataConfigPanelItem = ({
         prevQuery[SELECTED_DATE_RANGE][1] || 'now',
         !isEmpty(visConfig.span?.time_field)
           ? visConfig.span?.time_field[0].name
-          : prevQuery['selectedTimestamp'],
+          : prevQuery.selectedTimestamp,
         false,
         ''
       ),
@@ -260,34 +261,34 @@ export const DataConfigPanelItem = ({
    * @returns next visualization state.
    */
   const prepareNextVisState = ({
-    query,
+    queryState,
     visConfig,
   }: {
-    query: Query;
+    queryState: Query;
     visConfig: ConfigList;
   }): Array<string | Query> => {
     const newQuery: string = getNewQueryString(
-      query[RAW_QUERY],
+      queryState[RAW_QUERY],
       visConfig,
-      getStatsTokens(query[RAW_QUERY])
+      getStatsTokens(queryState[RAW_QUERY])
     );
-    return [newQuery, getNextQueryState(query, newQuery, visConfig)];
+    return [newQuery, getNextQueryState(queryState, newQuery, visConfig)];
   };
 
   const updateChart = useCallback(() => {
     const [newQueryString, nextQueryState] = prepareNextVisState({
-      query,
+      queryState,
       visConfig: {
         ...configList,
       },
     });
     handleQueryChange(newQueryString);
     getVisualizations({
-      query: nextQueryState[FINAL_QUERY],
+      queryState: nextQueryState[FINAL_QUERY],
       callback: (res) => {
         updateVisUIState({
           visData: res,
-          query: nextQueryState,
+          queryState: nextQueryState,
           visConfMetadata: {
             ...configList,
           },
@@ -297,10 +298,15 @@ export const DataConfigPanelItem = ({
         });
       },
     });
-  }, [configList, query, visualizations]);
+  }, [configList, queryState, visualizations]);
 
-  const updateVisUIState = ({ visData, query, visConfMetadata, visMeta }: VisualizationState) => {
-    fillVisDataInStore({ visData: visData, query, visConfMetadata, visMeta });
+  const updateVisUIState = ({
+    visData,
+    queryState,
+    visConfMetadata,
+    visMeta,
+  }: VisualizationState) => {
+    fillVisDataInStore({ visData, queryState, visConfMetadata, visMeta });
   };
 
   const isPositionButtonVisible = (sectionName: string) =>
@@ -318,7 +324,7 @@ export const DataConfigPanelItem = ({
       isEqual(sectionName, GROUPBY)
     )
       return filter(fieldOptionList, (i) => i.type === TIMESTAMP);
-    
+
     if (
       sectionName === AGGREGATIONS ||
       sectionName === BREAKDOWNS ||
@@ -501,6 +507,7 @@ export const DataConfigPanelItem = ({
                     });
                   }}
                   aria-label="interval field"
+                  data-test-subj="valueFieldNumber"
                 />
               </EuiFormRow>
               <EuiFormRow label="Unit">
diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx
index e4207dfbf..26710cf02 100644
--- a/public/components/event_analytics/explorer/visualizations/index.tsx
+++ b/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -120,7 +120,12 @@ export const ExplorerVisualizations = ({
                     }
                   />
                 </div>
-                <div className="explorer__vizDataConfig">{renderDataConfigContainer()}</div>
+                <div
+                  className="explorer__vizDataConfig"
+                  data-test-subj="explorer__vizDataConfig-panel"
+                >
+                  {renderDataConfigContainer()}
+                </div>
               </div>
             </EuiResizablePanel>
             <EuiResizableButton />
diff --git a/public/components/event_analytics/hooks/use_render_visualizations.ts b/public/components/event_analytics/hooks/use_render_visualizations.ts
index 2ebbc9996..09aec4146 100644
--- a/public/components/event_analytics/hooks/use_render_visualizations.ts
+++ b/public/components/event_analytics/hooks/use_render_visualizations.ts
@@ -4,16 +4,13 @@
  */
 
 import { batch, useDispatch } from 'react-redux';
+import { VisualizationState } from 'common/types/explorer';
 import { updateFields, sortFields } from '../redux/slices/field_slice';
 import { render as renderExplorerVis } from '../redux/slices/visualization_slice';
 import { fetchSuccess } from '../redux/slices/query_result_slice';
-import {
-  QUERIED_FIELDS,
-  SELECTED_FIELDS,
-} from '../../../../common/constants/explorer';
+import { QUERIED_FIELDS, SELECTED_FIELDS } from '../../../../common/constants/explorer';
 import { change as changeVizConfig } from '../redux/slices/viualization_config_slice';
 import { changeQuery } from '../redux/slices/query_slice';
-import { VisualizationState } from 'common/types/explorer';
 
 export interface IVisualizationParams {
   query: string;
@@ -52,7 +49,7 @@ export const useRenderVisualization = ({ pplService, requestParams }) => {
       },
       'viz',
       (res: any) => {
-        callback && callback(res);
+        if (callback) callback(res);
       },
       (error: any) => {
         dispatch(
@@ -65,13 +62,18 @@ export const useRenderVisualization = ({ pplService, requestParams }) => {
     );
   };
 
-  const fillVisDataInStore = ({ visData, query, visConfMetadata, visMeta }: VisualizationState) => {
+  const fillVisDataInStore = ({
+    visData,
+    queryState,
+    visConfMetadata,
+    visMeta,
+  }: VisualizationState) => {
     batch(() => {
       // query
       dispatch(
         changeQuery({
           tabId: requestParams.tabId,
-          query,
+          query: queryState,
         })
       );
 

From 7fc31aeb7a792125b0bfec67ae88d64b216c1285 Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Mon, 23 Jan 2023 21:33:51 -0800
Subject: [PATCH 4/5] added fixes for linting

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 common/types/explorer.ts                                      | 4 ++--
 .../config_controls/data_configurations_panel.tsx             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/common/types/explorer.ts b/common/types/explorer.ts
index cf4ade2f6..ab378016f 100644
--- a/common/types/explorer.ts
+++ b/common/types/explorer.ts
@@ -290,7 +290,7 @@ export interface PatternTableData {
   pattern: string;
   sampleLog: string;
   anomalyCount?: number;
-};
+}
 
 export interface ConfigListEntry {
   label: string;
@@ -380,7 +380,7 @@ export interface VisMeta {
 }
 
 export interface VisualizationState {
-  query: Query;
+  queryState: Query;
   visData: any;
   visConfMetadata: ConfigList;
   visMeta: VisMeta;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index 203fa5269..971484b7d 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -277,7 +277,7 @@ export const DataConfigPanelItem = ({
 
   const updateChart = useCallback(() => {
     const [newQueryString, nextQueryState] = prepareNextVisState({
-      queryState,
+      queryState: query,
       visConfig: {
         ...configList,
       },
@@ -298,7 +298,7 @@ export const DataConfigPanelItem = ({
         });
       },
     });
-  }, [configList, queryState, visualizations]);
+  }, [configList, query, visualizations]);
 
   const updateVisUIState = ({
     visData,

From 91d1eee66850df3c3b966761ae73f7ceea3817e0 Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Mon, 23 Jan 2023 21:56:32 -0800
Subject: [PATCH 5/5] update one snapshot

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 .../__tests__/__snapshots__/save_panel.test.tsx.snap          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
index b94209851..dce6acd73 100644
--- a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -738,7 +738,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
             onMouseOver={[Function]}
           >
             <EuiSwitch
-              checked={true}
+              checked={false}
               compressed={true}
               disabled={true}
               label="Save as Metric"
@@ -751,7 +751,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 className="euiSwitch euiSwitch--compressed"
               >
                 <button
-                  aria-checked={true}
+                  aria-checked={false}
                   aria-labelledby="random_html_id"
                   className="euiSwitch__button"
                   disabled={true}