[Cypress Updates] Event explorer updates

.cypress/integration/event_analytics_test/event_analytics.spec.js

@@ -37,11 +37,15 @@
 } from '../../utils/event_analytics/helpers';
 
 describe('Adding sample data and visualization', () => {
-  it('Adds sample flights data for event analytics', () => {
+  it('Adds sample flights and logs data for event analytics', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
     cy.get('div[data-test-subj="sampleDataSetCardflights"]')
       .contains(/(Add|View) data/)
       .click();
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
+    cy.get('div[data-test-subj="sampleDataSetCardlogs"]')
+      .contains(/(Add|View) data/)
+      .click();
   });
 });
 
@@ -53,28 +57,6 @@
   });
 });
 
-describe('Search a query on event home', () => {
-  it('Search a query and redirect to explorer to display query output', () => {
-    landOnEventHome();
-
-    cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query);
-    cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
-    cy.get('[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]').click();
-    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
-    cy.window()
-      .its('store')
-      .invoke('getState')
-      .then((state) => {
-        expect(Object.values(state.queries)[0]['rawQuery'].trim()).equal(TEST_QUERIES[0].query);
-        expect(Object.values(state.queries)[0]['selectedDateRange'][0]).equal('now/y');
-        expect(Object.values(state.queries)[0]['selectedDateRange'][1]).equal('now');
-      });
-
-    cy.url().should('contain', '#/explorer');
-    cy.get('[data-test-subj="searchAutocompleteTextArea"]').contains(TEST_QUERIES[0].query);
-  });
-});
-
 describe('Open flyout for a data row to see details', () => {
   beforeEach(() => {
     landOnEventExplorer();
@@ -83,7 +65,7 @@
   });
 
   it('Should be able to open flyout and see data, json and traces', () => {
-    cy.get('[data-test-subj="eventExplorer__flyoutArrow"]').first().click();
+    cy.get('[data-test-subj="eventExplorer__flyout"]').first().click();
     cy.get('.observability-flyout').should('exist');
     cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content')
       .contains('Table')
@@ -97,7 +79,7 @@
   });
 
   it('Should be able to see surrounding docs', () => {
-    cy.get('[data-test-subj="eventExplorer__flyoutArrow"]').first().click();
+    cy.get('[data-test-subj="eventExplorer__flyout"]').first().click();
     cy.get('.observability-flyout span.euiButton__text')
       .contains('View surrounding events')
       .should('be.visible')
@@ -190,14 +172,12 @@
   });
 
   it('Actions - click event explorer', () => {
-    cy.get('[data-test-subj="eventHomeAction"]').click();
     cy.get('[data-test-subj="eventHomeAction__explorer"]').click();
     cy.url().should('contain', '#/explorer');
   });
 
   it('Actions - add sample data', () => {
-    cy.get('[data-test-subj="eventHomeAction"]').click();
-    cy.get('[data-test-subj="eventHomeAction__addSamples"]').click();
+    cy.get('[data-test-subj="actionAddSamples"]').click();
     cy.get('[data-test-subj="confirmModalConfirmButton"]').click();
     cy.get('.euiToastHeader__title').should('contain', 'successfully');
   });
@@ -218,10 +198,11 @@
     querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
     cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(2).click();
     cy.get('[data-test-subj="eventExplorer__querySaveName"]')
       .focus()
       .type(SAVE_QUERY2, { force: true });
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     landOnEventHome();
     cy.get('.euiFieldSearch').type(SAVE_QUERY2);
@@ -241,12 +222,12 @@
       .contains('Visualizations')
       .click();
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
     cy.get('[data-test-subj="eventExplorer__querySaveName"]')
       .focus()
       .type(SAVE_QUERY3, { force: true });
     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.get('.euiToastHeader__title').contains('successfully').should('exist');
   });
 
@@ -299,9 +280,9 @@
     landOnEventExplorer();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[2].query);
-    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.get('.tab-title').contains('Events').click();
     cy.get('[data-test-subj="eventExplorer__overrideDefaultTimestamp"]').click({ force: true });
 
     cy.get('[data-attr-field="utc_time"] [data-test-subj="eventFields__default-timestamp-mark"')
       .contains('Default Timestamp')
@@ -318,10 +299,10 @@
     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');
-    cy.get('[data-test-subj="docTable"]').find('th').contains('_source').should('not.exist');
+    cy.get('[data-test-subj="docTable"]').find('.euiDataGridHeaderCell').contains('Source').should('not.exist');
     cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click();
     cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
-    cy.get('[data-test-subj="docTable"]').find('th').contains('_source').should('exist');
+    cy.get('[data-test-subj="docTable"]').find('.euiDataGridHeaderCell').contains('Source').should('exist');
   });
 });
 
@@ -348,7 +329,7 @@
     cy.get('button.euiButton--danger').should('be.disabled');
     cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
     cy.get('button.euiButton--danger').should('not.be.disabled');
     cy.get('.euiButton__text').contains('Delete').click({ force: true });
     cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist');
   });
 });
@@ -473,7 +454,8 @@
   });
 
   it('Visualize pie chart', () => {
-    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).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"]')
@@ -482,7 +464,7 @@
     cy.get('[data-test-subj="vizConfigSection-dimensions"]')
       .find('[data-test-subj="viz-config-add-btn"]')
       .click();
-    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+    cy.get('.logExplorerVisConfig__section')
       .find('[data-test-subj="comboBoxInput"]')
       .click()
       .type(FIELD_HOST);
@@ -497,7 +479,7 @@
   });
 
   it('Visualize vertical bar chart', () => {
-    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).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"]')
@@ -506,7 +488,7 @@
     cy.get('[data-test-subj="vizConfigSection-dimensions"]')
       .find('[data-test-subj="viz-config-add-btn"]')
       .click();
-    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+    cy.get('.logExplorerVisConfig__section')
       .find('[data-test-subj="comboBoxInput"]')
       .click()
       .type(FIELD_HOST);
@@ -515,7 +497,7 @@
     cy.get('[data-test-subj="vizConfigSection-breakdowns"]')
       .find('[data-test-subj="viz-config-add-btn"]')
       .click();
-    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
+    cy.get('.logExplorerVisConfig__section')
       .find('[data-test-subj="comboBoxInput"]')
       .click()
       .type(FIELD_AGENT);

public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/flyout_button.test.tsx.snap

@@ -19,18 +19,21 @@ exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`]
 >
   <EuiSmallButtonIcon
     aria-label="inspect document details"
+    data-test-subj="eventExplorer__flyout"
     iconType="inspect"
     onClick={[Function]}
   >
     <EuiButtonIcon
       aria-label="inspect document details"
+      data-test-subj="eventExplorer__flyout"
       iconType="inspect"
       onClick={[Function]}
       size="s"
     >
       <button
         aria-label="inspect document details"
         className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+        data-test-subj="eventExplorer__flyout"
         disabled={false}
         onClick={[Function]}
         type="button"

public/components/event_analytics/explorer/events_views/docViewRow.tsx

@@ -38,10 +38,10 @@
   pplService: PPLService;
   rawQuery: string;
   onFlyoutOpen: (docId: string) => void;
   dataGridColumns: any;
   dataGridColumnVisibility: any;
   selectedIndex: any;
   sortingFields: any;
   rowHeightsOptions: any;
   rows: any;
 }
@@ -200,10 +200,6 @@
     return cols;
   };
 
-  const memorizedTds = useMemo(() => {
-    return getTds(doc, selectedCols, false);
-  }, [doc, selectedCols, detailsOpen, surroundingEventsOpen]);
-
   const memorizedDocFlyout = useMemo(() => {
     return (
       <DocFlyout
@@ -296,6 +292,7 @@
         onClick={() => toggleDetailOpen()}
         iconType={detailsOpen || surroundingEventsOpen ? 'minimize' : 'inspect'}
         aria-label="inspect document details"
+        data-test-subj="eventExplorer__flyout"
       />
       {flyout}
     </>

public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap

@@ -225,6 +225,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                     <EuiButtonIcon
                       aria-label="inspect"
                       className="dscSidebarField__actionButton"
+                      data-test-subj="field-agent-showDetails"
                       iconType="inspect"
                       isDisabled={true}
                       onClick={[Function]}
@@ -252,6 +253,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                       <EuiButtonIcon
                         aria-label="inspect"
                         className="dscSidebarField__actionButton"
+                        data-test-subj="field-agent-showDetails"
                         iconType="inspect"
                         isDisabled={true}
                         onClick={[Function]}
@@ -260,6 +262,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                         <button
                           aria-label="inspect"
                           className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                          data-test-subj="field-agent-showDetails"
                           disabled={true}
                           onClick={[Function]}
                           type="button"