[BACKPORT] Backport/backport 220 to 2.x (opensearch-project#260)

* Cypress test update and related linting fixes (opensearch-project#220) * resolve one failing test and remove tests of unreleased visualizations Signed-off-by: Eric Wei <[email protected]> * fix failing table view tests and remove/modify metric switcher Signed-off-by: Eric Wei <[email protected]> * update events tests and added vis tests Signed-off-by: Eric Wei <[email protected]> * added fixes for linting Signed-off-by: Eric Wei <[email protected]> * update one snapshot Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Eric Wei <[email protected]> (cherry picked from commit 1fd72fc) * missed snapshots Signed-off-by: Eric Wei <[email protected]> * add one snapshot missing from worktree backport Signed-off-by: Eric Wei <[email protected]> --------- Signed-off-by: Eric Wei <[email protected]>
amsiglan · Feb 8, 2023 · 1dd19b5 · 1dd19b5
1 parent c3c1c50
commit 1dd19b5
Show file tree

Hide file tree

Showing 11 changed files with 289 additions and 722 deletions.
diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
diff --git 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:
@@ -78,30 +79,25 @@ 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();
 };
 
 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 = () => {
@@ -252,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/common/types/explorer.ts b/common/types/explorer.ts
@@ -289,7 +289,7 @@ export interface PatternTableData {
   pattern: string;
   sampleLog: string;
   anomalyCount?: number;
-};
+}
 
 export interface ConfigListEntry {
   label: string;
@@ -379,7 +379,7 @@ export interface VisMeta {
 }
 
 export interface VisualizationState {
-  query: Query;
+  queryState: Query;
   visData: any;
   visConfMetadata: ConfigList;
   visMeta: VisMeta;

diff --git 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);
@@ -222,15 +218,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">
@@ -263,17 +256,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
@@ -104,6 +104,7 @@ import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
 import { QueryManager } from '../../../../common/query_manager';
+import { uiSettingsService } from '../../../../common/utils';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -187,10 +188,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 +569,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 +647,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 +855,10 @@ export const Explorer = ({
                                               })
                                             );
                                             await getPatterns(
-                                              selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
+                                              selectedIntervalRef.current?.value.replace(
+                                                /^auto_/,
+                                                ''
+                                              ) || 'y',
                                               getErrorHandler('Error fetching patterns')
                                             );
                                           }}
@@ -1253,7 +1261,7 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
-            subType: subType,
+            subType,
           })
           .then((res: any) => {
             setToast(
@@ -1288,7 +1296,7 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
-            subType: subType,
+            subType,
           })
           .then((res: any) => {
             batch(() => {
@@ -1430,25 +1438,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 +1469,9 @@ export const Explorer = ({
         query,
       }}
     >
-      <div className="dscAppContainer">
+      <div
+        className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}
+      >
         <Search
           key="search-component"
           query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}
@@ -1504,12 +1506,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/...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/...ents/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}