[Log Explorer] Remove top level tabs (#970)

* remove unused files Signed-off-by: Eric Wei <menwe@amazon.com> * missing snapshots Signed-off-by: Eric Wei <menwe@amazon.com> * minimal changes to remove log explorer tab Signed-off-by: Eric <menwe@amazon.com> * skip tab related tests Signed-off-by: Eric <menwe@amazon.com> * update snapshots Signed-off-by: Eric <menwe@amazon.com> * remove missed logging Signed-off-by: Eric <menwe@amazon.com> * add path to constant Signed-off-by: Eric <menwe@amazon.com> --------- Signed-off-by: Eric Wei <menwe@amazon.com> Signed-off-by: Eric <menwe@amazon.com>
opensearch-project · Sep 7, 2023 · dd50d8b · dd50d8b
1 parent 2544618
commit dd50d8b
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 261 deletions.
diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
@@ -108,7 +108,8 @@ describe('Open flyout for a data row to see details', () => {
   });
 });
 
-describe('Add/delete/switch explorer top level tabs', () => {
+// skip for now due to tab removals
+describe.skip('Add/delete/switch explorer top level tabs', () => {
   beforeEach(() => {
     landOnEventExplorer();
   });
@@ -406,15 +407,15 @@ describe('Live tail stop automatically', () => {
     landOnEventExplorer();
   });
 
-  it('Moving to other tab should stop live tail automatically', () => {
+  it.skip('Moving to other tab should stop live tail automatically', () => {
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     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.get('.euiToastHeader__title').contains('On').should('exist');
   });
 
-  it('Add a new tab', () => {
+  it.skip('Add a new tab', () => {
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
       .then((lists) => {
@@ -426,7 +427,7 @@ describe('Live tail stop automatically', () => {
       });
   });
 
-  it('Click to switch to another tab', () => {
+  it.skip('Click to switch to another tab', () => {
     cy.get('[data-test-subj="eventExplorer__addNewTab"]', {
       timeout: COMMAND_TIMEOUT_LONG,
     }).click();
@@ -441,7 +442,7 @@ describe('Live tail stop automatically', () => {
       .should('have.class', 'euiTab-isSelected');
   });
 
-  it('Close current selected tab', () => {
+  it.skip('Close current selected tab', () => {
     cy.get('[data-test-subj="eventExplorer__addNewTab"]', {
       timeout: COMMAND_TIMEOUT_LONG,
     }).click();

diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -7,10 +7,13 @@ import { htmlIdGenerator } from '@elastic/eui';
 import { ThresholdUnitType } from '../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
 import { VIS_CHART_TYPES } from './shared';
 
+// URLs
 export const EVENT_ANALYTICS_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/observability-plugin/event-analytics/';
 export const OPEN_TELEMETRY_LOG_CORRELATION_LINK =
   'https://opentelemetry.io/docs/reference/specification/logs/overview/#log-correlation';
+export const LOG_EXPLORER_BASE_PATH = 'observability-logs#/explorer/';
+
 export const RAW_QUERY = 'rawQuery';
 export const FINAL_QUERY = 'finalQuery';
 export const SELECTED_DATE_RANGE = 'selectedDateRange';

diff --git a/common/types/explorer.ts b/common/types/explorer.ts
@@ -92,9 +92,7 @@ export interface IExplorerFields {
 }
 
 export interface EmptyTabParams {
-  tabIds: string[] | undefined;
-  queries: any | undefined;
-  explorerData: any | undefined;
+  tabIds: string[];
 }
 
 export interface ILogExplorerProps {

diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
@@ -17,7 +17,6 @@ import {
   EuiBadge,
   EuiContextMenuPanel,
   EuiToolTip,
-  EuiCallOut,
 } from '@elastic/eui';
 import { DatePicker } from './date_picker';
 import '@algolia/autocomplete-theme-classic';

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -38,7 +38,6 @@ import {
   DATE_PICKER_FORMAT,
   DEFAULT_AVAILABILITY_QUERY,
   EVENT_ANALYTICS_DOCUMENTATION_URL,
-  NEW_TAB,
   PATTERNS_EXTRACTOR_REGEX,
   PATTERNS_REGEX,
   RAW_QUERY,
@@ -52,7 +51,6 @@ import {
   SELECTED_TIMESTAMP,
   TAB_CHART_ID,
   TAB_CHART_TITLE,
-  TAB_CREATED_TYPE,
   TAB_EVENT_ID,
   TAB_EVENT_TITLE,
   TIME_INTERVAL_OPTIONS,
@@ -347,17 +345,6 @@ export const Explorer = ({
   }, [appBasedRef.current]);
 
   useEffect(() => {
-    let objectId;
-    if (queryRef.current![TAB_CREATED_TYPE] === NEW_TAB || appLogEvents) {
-      objectId = queryRef.current!.savedObjectId || '';
-    } else {
-      objectId = queryRef.current!.savedObjectId || savedObjectId;
-    }
-    if (objectId) {
-      updateTabData(objectId);
-    } else {
-      fetchData(startTime, endTime);
-    }
     if (
       routerContext &&
       routerContext.searchParams.get(CREATE_TAB_PARAM_KEY) === CREATE_TAB_PARAM[TAB_CHART_ID]
@@ -367,10 +354,8 @@ export const Explorer = ({
   }, []);
 
   useEffect(() => {
-    if (appLogEvents) {
-      if (savedObjectId) {
-        updateTabData(savedObjectId);
-      }
+    if (savedObjectId) {
+      updateTabData(savedObjectId);
     }
   }, [savedObjectId]);
 
@@ -642,7 +627,7 @@ export const Explorer = ({
     isOverridingTimestamp,
     query,
     isLiveTailOnRef.current,
-    isOverridingPattern
+    isOverridingPattern,
   ]);
 
   const visualizations: IVisualizationContainerProps = useMemo(() => {

diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -3,36 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-
-import {
-  EuiIcon,
-  EuiTabbedContent,
-  EuiTabbedContentTab,
-  EuiText,
-  htmlIdGenerator,
-} from '@elastic/eui';
-import $ from 'jquery';
-import { isEmpty, map } from 'lodash';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { LogExplorerRouterContext } from '..';
 import {
   APP_ANALYTICS_TAB_ID_REGEX,
   CREATE_TAB_PARAM_KEY,
-  NEW_TAB,
-  REDIRECT_TAB,
-  SAVED_OBJECT_ID,
   TAB_CHART_ID,
   TAB_EVENT_ID,
-  TAB_ID_TXT_PFX,
-  TAB_TITLE,
 } from '../../../../common/constants/explorer';
 import { ILogExplorerProps } from '../../../../common/types/explorer';
-import { initializeTabData, removeTabData } from '../../application_analytics/helpers/utils';
 import { selectQueryResult } from '../redux/slices/query_result_slice';
 import { selectQueries } from '../redux/slices/query_slice';
-import { selectQueryTabs, setSelectedQueryTab } from '../redux/slices/query_tab_slice';
+import { selectQueryTabs } from '../redux/slices/query_tab_slice';
 import { Explorer } from './explorer';
 
 const searchBarConfigs = {
@@ -60,11 +45,9 @@ export const LogExplorer = ({
 }: ILogExplorerProps) => {
   const history = useHistory();
   const routerContext = useContext(LogExplorerRouterContext);
-  const dispatch = useDispatch();
   const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
     (tabid: string) => !tabid.match(APP_ANALYTICS_TAB_ID_REGEX)
   );
-  const tabNames = useSelector(selectQueryTabs).tabNames;
   const queries = useSelector(selectQueries);
   const curSelectedTabId = useSelector(selectQueryTabs).selectedQueryTab;
   const explorerData = useSelector(selectQueryResult);
@@ -79,68 +62,12 @@ export const LogExplorer = ({
 
   const [tabCreatedTypes, setTabCreatedTypes] = useState({});
 
-  // Append add-new-tab link to the end of the tab list, and remove it once tabs state changes
-  useEffect(() => {
-    const newLink = $(
-      '<a class="linkNewTag" data-test-subj="eventExplorer__addNewTab">+ Add new</a>'
-    ).on('click', () => {
-      addNewTab(NEW_TAB);
-    });
-    $('.queryTabs > .euiTabs').append(newLink);
-    return () => {
-      $('.queryTabs > .euiTabs .linkNewTag').remove();
-    };
-  }, [tabIds]);
-
-  const handleTabClick = (selectedTab: EuiTabbedContentTab) => {
-    history.replace(`/explorer/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`);
-    dispatch(setSelectedQueryTab({ tabId: selectedTab.id }));
-  };
-
-  const handleTabClose = (TabIdToBeClosed: string) => {
-    if (tabIds.length === 1) {
-      setToast('Cannot close last tab.', 'danger');
-      return;
-    }
-
-    const index: number = tabIds.indexOf(TabIdToBeClosed);
-    const curSelectedTab = curSelectedTabIdRef.current;
-    let newIdToFocus = '';
-    if (TabIdToBeClosed === curSelectedTab) {
-      if (index === 0) {
-        newIdToFocus = tabIds[index + 1];
-      } else if (index > 0) {
-        newIdToFocus = tabIds[index - 1];
-      }
-    }
-    removeTabData(dispatch, TabIdToBeClosed, newIdToFocus);
-  };
-
-  const addNewTab = async (where: string) => {
-    // get a new tabId
-    const tabId = htmlIdGenerator(TAB_ID_TXT_PFX)();
-
-    // create a new tab
-    await initializeTabData(dispatch, tabId, where);
-
-    setTabCreatedTypes((staleState) => {
-      return {
-        ...staleState,
-        [tabId]: where,
-      };
-    });
-
-    return tabId;
-  };
-
   const dispatchSavedObjectId = async () => {
-    const emptyTabId = getExistingEmptyTab({
+    return getExistingEmptyTab({
       tabIds: tabIdsRef.current,
       queries: queryRef.current,
       explorerData: explorerDataRef.current,
     });
-    const newTabId = emptyTabId ? emptyTabId : await addNewTab(REDIRECT_TAB);
-    return newTabId;
   };
 
   useEffect(() => {
@@ -150,7 +77,6 @@ export const LogExplorer = ({
     if (routerContext && routerContext.searchParams.has(CREATE_TAB_PARAM_KEY)) {
       // need to wait for current redux event loop to finish
       setImmediate(() => {
-        addNewTab(NEW_TAB);
         routerContext.searchParams.delete(CREATE_TAB_PARAM_KEY);
         routerContext.routerProps.history.replace({
           search: routerContext.searchParams.toString(),
@@ -159,78 +85,24 @@ export const LogExplorer = ({
     }
   }, []);
 
-  function getQueryTab({
-    tabTitle,
-    tabId,
-    handlesTabClose,
-  }: {
-    tabTitle: string;
-    tabId: string;
-    handlesTabClose: (TabIdToBeClosed: string) => void;
-  }) {
-    return {
-      id: tabId,
-      name: (
-        <>
-          <EuiText size="s" textAlign="left" color="default">
-            <span className="tab-title">{tabTitle}</span>
-            <EuiIcon
-              type="cross"
-              onClick={(e) => {
-                e.stopPropagation();
-                handlesTabClose(tabId);
-              }}
-              data-test-subj="eventExplorer__tabClose"
-            />
-          </EuiText>
-        </>
-      ),
-      content: (
-        <>
-          <Explorer
-            key={`explorer_${tabId}`}
-            pplService={pplService}
-            dslService={dslService}
-            tabId={tabId}
-            savedObjects={savedObjects}
-            timestampUtils={timestampUtils}
-            setToast={setToast}
-            history={history}
-            notifications={notifications}
-            savedObjectId={savedObjectId}
-            tabCreatedTypes={tabCreatedTypes}
-            curSelectedTabId={curSelectedTabIdRef}
-            http={http}
-            searchBarConfigs={searchBarConfigs}
-            queryManager={queryManager}
-          />
-        </>
-      ),
-    };
-  }
-
-  const memorizedTabs = useMemo(() => {
-    const res = map(tabIds, (tabId) => {
-      return getQueryTab({
-        tabTitle: tabNames[tabId] || TAB_TITLE,
-        tabId,
-        handlesTabClose: handleTabClose,
-      });
-    });
-
-    return res;
-  }, [tabIds, tabNames, tabCreatedTypes]);
-
   return (
     <>
-      <EuiTabbedContent
-        id="queryTabs"
-        className="queryTabs"
-        tabs={memorizedTabs}
-        selectedTab={memorizedTabs.find((tab) => tab.id === curSelectedTabId)}
-        onTabClick={(selectedTab: EuiTabbedContentTab) => handleTabClick(selectedTab)}
-        data-test-subj="eventExplorer__topLevelTabbing"
-        size="s"
+      <Explorer
+        key={`explorer_${tabIds[0]}`}
+        pplService={pplService}
+        dslService={dslService}
+        tabId={tabIds[0]}
+        savedObjects={savedObjects}
+        timestampUtils={timestampUtils}
+        setToast={setToast}
+        history={history}
+        notifications={notifications}
+        savedObjectId={savedObjectId}
+        tabCreatedTypes={tabCreatedTypes}
+        curSelectedTabId={curSelectedTabIdRef}
+        http={http}
+        searchBarConfigs={searchBarConfigs}
+        queryManager={queryManager}
       />
     </>
   );