[Refactoring] Explorer sidebar refactoring (opensearch-project#326)

* move fields toggle from explorer to under sidebar Signed-off-by: Eric Wei <[email protected]> * fix the bug when switching index seeing fields from old index Signed-off-by: Eric Wei <[email protected]> * update tests/snapshots Signed-off-by: Eric Wei <[email protected]> --------- Signed-off-by: Eric Wei <[email protected]>
amsiglan · Mar 15, 2023 · 13eccbb · 13eccbb
1 parent 8de4b3e
commit 13eccbb
Show file tree

Hide file tree

Showing 6 changed files with 7,384 additions and 7,336 deletions.
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -20,11 +20,10 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import classNames from 'classnames';
-import { cloneDeep, has, isEmpty, isEqual, reduce } from 'lodash';
+import { has, isEmpty, isEqual, reduce } from 'lodash';
 import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import {
-  AVAILABLE_FIELDS,
   DATE_PICKER_FORMAT,
   DEFAULT_AVAILABILITY_QUERY,
   EVENT_ANALYTICS_DOCUMENTATION_URL,
@@ -33,7 +32,6 @@ import {
   PATTERNS_EXTRACTOR_REGEX,
   PATTERNS_REGEX,
   PATTERN_REGEX,
-  PPL_DEFAULT_PATTERN_REGEX_FILETER,
   RAW_QUERY,
   SAVED_OBJECT_ID,
   SAVED_OBJECT_TYPE,
@@ -74,8 +72,7 @@ import { Search } from '../../common/search/search';
 import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
 import { selectCountDistribution } from '../redux/slices/count_distribution_slice';
-import { selectFields, sortFields, updateFields } from '../redux/slices/field_slice';
-import { selectPatterns } from '../redux/slices/patterns_slice';
+import { selectFields, updateFields } from '../redux/slices/field_slice';
 import { selectQueryResult } from '../redux/slices/query_result_slice';
 import { changeDateRange, changeQuery, selectQueries } from '../redux/slices/query_slice';
 import { updateTabName } from '../redux/slices/query_tab_slice';
@@ -129,11 +126,11 @@ export const Explorer = ({
 }: IExplorerProps) => {
   const dispatch = useDispatch();
   const requestParams = { tabId };
-  const { getLiveTail, getEvents, getAvailableFields, isEventsLoading } = useFetchEvents({
+  const { getLiveTail, getEvents } = useFetchEvents({
     pplService,
     requestParams,
   });
-  const { getVisualizations, getCountVisualizations, isVisLoading } = useFetchVisualizations({
+  const { getCountVisualizations } = useFetchVisualizations({
     pplService,
     requestParams,
   });
@@ -506,11 +503,6 @@ export const Explorer = ({
     }
   }, [savedObjectId]);
 
-  const handleAddField = (field: IField) => toggleFields(field, AVAILABLE_FIELDS, SELECTED_FIELDS);
-
-  const handleRemoveField = (field: IField) =>
-    toggleFields(field, SELECTED_FIELDS, AVAILABLE_FIELDS);
-
   const handleTimePickerChange = async (timeRange: string[]) => {
     if (appLogEvents) {
       setStartTime(timeRange[0]);
@@ -558,36 +550,6 @@ export const Explorer = ({
     }
   };
 
-  /**
-   * Toggle fields between selected and unselected sets
-   * @param field field to be toggled
-   * @param FieldSetToRemove set where this field to be removed from
-   * @param FieldSetToAdd set where this field to be added
-   */
-  const toggleFields = (field: IField, FieldSetToRemove: string, FieldSetToAdd: string) => {
-    const nextFields = cloneDeep(explorerFields);
-    const thisFieldSet = nextFields[FieldSetToRemove];
-    const nextFieldSet = thisFieldSet.filter((fd: IField) => fd.name !== field.name);
-    nextFields[FieldSetToRemove] = nextFieldSet;
-    nextFields[FieldSetToAdd].push(field);
-    batch(() => {
-      dispatch(
-        updateFields({
-          tabId,
-          data: {
-            ...nextFields,
-          },
-        })
-      );
-      dispatch(
-        sortFields({
-          tabId,
-          data: [FieldSetToAdd],
-        })
-      );
-    });
-  };
-
   const sidebarClassName = classNames({
     closed: isSidebarClosed,
   });
@@ -686,8 +648,6 @@ export const Explorer = ({
                   selectedPattern={query[SELECTED_PATTERN_FIELD]}
                   handleOverrideTimestamp={handleOverrideTimestamp}
                   handleOverridePattern={handleOverridePattern}
-                  handleAddField={(field: IField) => handleAddField(field)}
-                  handleRemoveField={(field: IField) => handleRemoveField(field)}
                   isOverridingTimestamp={isOverridingTimestamp}
                   isOverridingPattern={isOverridingPattern}
                   isFieldToggleButtonDisabled={
@@ -891,8 +851,6 @@ export const Explorer = ({
         explorerFields={explorerFields}
         explorerVis={explorerVisualizations}
         explorerData={explorerData}
-        handleAddField={handleAddField}
-        handleRemoveField={handleRemoveField}
         visualizations={visualizations}
         handleOverrideTimestamp={handleOverrideTimestamp}
         callback={callbackForConfig}