Add functionality to select multiple indices

opendistro-for-elasticsearch · Apr 6, 2020 · 5bf4dc5 · 5bf4dc5
1 parent 9b706c8
commit 5bf4dc5
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 24 deletions.
diff --git a/public/pages/DetectorsList/Components/ListControls/ListControls.tsx b/public/pages/DetectorsList/Components/ListControls/ListControls.tsx
@@ -22,15 +22,15 @@ import {
   EuiPagination,
 } from '@elastic/eui';
 import React from 'react';
-import { ALL_DETECTOR_STATES, ALL_INDICES } from '../../utils/constants';
+import { ALL_DETECTOR_STATES } from '../../utils/constants';
 import { getDetectorStateOptions } from '../../utils/helpers';
 
 interface ListControlsProps {
   activePage: number;
   pageCount: number;
   search: string;
   selectedDetectorState: string;
-  selectedIndex: string;
+  selectedIndices: string[];
   indexOptions: EuiComboBoxOptionProps[];
   onDetectorStateChange: (options: EuiComboBoxOptionProps[]) => void;
   onIndexChange: (options: EuiComboBoxOptionProps[]) => void;
@@ -40,7 +40,7 @@ interface ListControlsProps {
 }
 export const ListControls = (props: ListControlsProps) => (
   <EuiFlexGroup>
-    <EuiFlexItem grow={false} style={{ width: '50%' }}>
+    <EuiFlexItem grow={false} style={{ width: '40%' }}>
       <EuiFieldSearch
         fullWidth={true}
         value={props.search}
@@ -69,15 +69,15 @@ export const ListControls = (props: ListControlsProps) => (
       <EuiComboBox
         id="selectedIndices"
         placeholder="All indices"
-        singleSelection={true}
+        singleSelection={false}
         async
         options={props.indexOptions}
         onChange={props.onIndexChange}
         onSearchChange={props.onSearchIndexChange}
         selectedOptions={
-          props.selectedIndex == ALL_INDICES
-            ? []
-            : [{ label: props.selectedIndex }]
+          props.selectedIndices.length > 0
+            ? props.selectedIndices.map(index => ({ label: index }))
+            : []
         }
       />
     </EuiFlexItem>

diff --git a/public/pages/DetectorsList/Components/ListControls/__tests__/ListControls.test.tsx b/public/pages/DetectorsList/Components/ListControls/__tests__/ListControls.test.tsx
@@ -16,7 +16,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { ALL_DETECTOR_STATES, ALL_INDICES } from '../../../utils/constants';
+import { ALL_DETECTOR_STATES } from '../../../utils/constants';
 import { ListControls } from '../ListControls';
 
 describe('<ListControls /> spec', () => {
@@ -25,7 +25,7 @@ describe('<ListControls /> spec', () => {
     pageCount: 10,
     search: '',
     selectedDetectorState: ALL_DETECTOR_STATES,
-    selectedIndex: ALL_INDICES,
+    selectedIndices: [],
     detectorStateOptions: [],
     indexOptions: [],
     onDetectorStateChange: jest.fn(),
@@ -75,7 +75,7 @@ describe('<ListControls /> spec', () => {
       const updatedProps = {
         ...defaultProps,
         selectedDetectorState: 'test_state',
-        selectedIndex: 'test_index',
+        selectedIndices: ['test_index'],
       };
       const { getByText } = render(<ListControls {...updatedProps} />);
       expect(getByText('test_state')).toBeInTheDocument();

diff --git a/.../DetectorsList/Components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap b/.../DetectorsList/Components/ListControls/__tests__/__snapshots__/ListControls.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
-    style="width: 50%;"
+    style="width: 40%;"
   >
     <div
       class="euiFormControlLayout euiFormControlLayout--fullWidth"
@@ -144,7 +144,7 @@ exports[`<ListControls /> spec Empty results renders component with empty messag
           class="euiFormControlLayout__childrenWrapper"
         >
           <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+            class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
             data-test-subj="comboBoxInput"
             tabindex="-1"
           >

diff --git a/public/pages/DetectorsList/List/List.tsx b/public/pages/DetectorsList/List/List.tsx
@@ -47,9 +47,9 @@ import { EmptyDetectorMessage } from '../Components/EmptyMessage/EmptyMessage';
 import { ListControls } from '../Components/ListControls/ListControls';
 import {
   ALL_DETECTOR_STATES,
-  ALL_INDICES,
   MAX_DETECTORS,
   MAX_DISPLAY_LEN,
+  MAX_SELECTED_INDICES,
 } from '../utils/constants';
 import { getURLQueryParams } from '../utils/helpers';
 import { staticColumn } from '../utils/tableUtils';
@@ -68,7 +68,7 @@ interface ListState {
   page: number;
   queryParams: GetDetectorsQueryParams;
   selectedDetectorState: string;
-  selectedIndex: string;
+  selectedIndices: string[];
 }
 
 export const DetectorList = (props: ListProps) => {
@@ -105,7 +105,7 @@ export const DetectorList = (props: ListProps) => {
     page: 0,
     queryParams: getURLQueryParams(props.location),
     selectedDetectorState: ALL_DETECTOR_STATES,
-    selectedIndex: ALL_INDICES,
+    selectedIndices: [],
   });
 
   // Remove breadcrumbs on page initialization
@@ -118,7 +118,7 @@ export const DetectorList = (props: ListProps) => {
     const { history, location } = props;
     const updatedParams = {
       ...state.queryParams,
-      indices: state.selectedIndex,
+      indices: state.selectedIndices.join(' '),
       from: state.page * state.queryParams.size,
     };
     dispatch(getDetectorList(updatedParams));
@@ -136,7 +136,7 @@ export const DetectorList = (props: ListProps) => {
     state.queryParams.sortDirection,
     state.queryParams.sortField,
     state.selectedDetectorState,
-    state.selectedIndex,
+    state.selectedIndices,
   ]);
 
   const handlePageChange = (pageNumber: number) => {
@@ -193,10 +193,15 @@ export const DetectorList = (props: ListProps) => {
 
   // Refresh data if user is selecting an index filter
   const handleIndexChange = (options: EuiComboBoxOptionProps[]): void => {
-    const newIndex = options.length > 0 ? options[0].label : ALL_INDICES;
+    let indices: string[];
+    indices = options.length > 0 ? [] : options.map(option => option.label);
+    if (options.length > 0) {
+      indices = options.map(option => option.label);
+    }
+
     setState({
       ...state,
-      selectedIndex: newIndex,
+      selectedIndices: indices.slice(0, MAX_SELECTED_INDICES),
     });
   };
 
@@ -206,10 +211,10 @@ export const DetectorList = (props: ListProps) => {
       queryParams: {
         ...state.queryParams,
         search: '',
-        indices: ALL_INDICES,
+        indices: '',
       },
       selectedDetectorState: ALL_DETECTOR_STATES,
-      selectedIndex: ALL_INDICES,
+      selectedIndices: [],
     }));
   };
 
@@ -247,7 +252,7 @@ export const DetectorList = (props: ListProps) => {
             pageCount={Math.ceil(totalDetectors / state.queryParams.size) || 1}
             search={state.queryParams.search}
             selectedDetectorState={state.selectedDetectorState}
-            selectedIndex={state.selectedIndex}
+            selectedIndices={state.selectedIndices}
             indexOptions={indexOptions}
             onDetectorStateChange={handleDetectorStateChange}
             onIndexChange={handleIndexChange}

diff --git a/public/pages/DetectorsList/utils/constants.ts b/public/pages/DetectorsList/utils/constants.ts
@@ -16,9 +16,9 @@
 import { SORT_DIRECTION } from '../../../../server/utils/constants';
 
 export const ALL_DETECTOR_STATES = '';
-export const ALL_INDICES = '';
 export const MAX_DETECTORS = 1000;
 export const MAX_DISPLAY_LEN = 20;
+export const MAX_SELECTED_INDICES = 10;
 
 // TODO: finish when we know all possible detector states
 export enum DETECTOR_STATES {

diff --git a/server/routes/ad.ts b/server/routes/ad.ts
@@ -290,7 +290,7 @@ const getDetectors = async (
       mustQueries.push({
         query_string: {
           fields: ['indices'],
-          default_operator: 'AND',
+          default_operator: 'OR',
           query: `*${indices
             .trim()
             .split(' ')