Add support for DetectorState on Dashboard. Issue: opendistro-for-ela…

…sticsearch#25 (opendistro-for-elasticsearch#28) * Add support for DetectorState on Dashboard. Issue: opendistro-for-elasticsearch#25
yizheliu-amazon · Apr 16, 2020 · 66bc75a · 66bc75a
1 parent a54387a
commit 66bc75a
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 47 deletions.
diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -13,8 +13,7 @@
  * permissions and limitations under the License.
  */
 
-import { DATA_TYPES } from '../utils/constants';
-import { DETECTOR_STATE } from 'public/pages/utils/constants';
+import { DATA_TYPES, DETECTOR_STATE } from '../utils/constants';
 
 export type FieldInfo = {
   label: string;

diff --git a/public/pages/Dashboard/Container/DashboardOverview.tsx b/public/pages/Dashboard/Container/DashboardOverview.tsx
@@ -39,13 +39,13 @@ import {
 } from '../utils/constants';
 import { AppState } from '../../../redux/reducers';
 import { CatIndex, IndexAlias } from '../../../../server/models/types';
-// import { getVisibleOptions } from '../../../pages/createDetector/containers/DataSource/utils/helpers';
 import { getVisibleOptions } from '../../utils/helpers';
 import {
   DETECTOR_STATE,
   PLUGIN_NAME,
   APP_PATH,
 } from '../../../utils/constants';
+import { getDetectorStateOptions } from '../../DetectorsList/utils/helpers';
 
 export function DashboardOverview() {
   const dispatch = useDispatch();
@@ -89,27 +89,20 @@ export function DashboardOverview() {
     setAllDetectorsSelected(isEmpty(selectedNames));
   };
 
-  const allDetectorStates = Object.values(DETECTOR_STATE);
-
   const [selectedDetectorStates, setSelectedDetectorStates] = useState(
-    [] as string[]
+    [] as DETECTOR_STATE[]
   );
-  // TODO: DetectorStates is placeholder for now until backend profile API is ready
-  // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/25
+
   const [allDetectorStatesSelected, setAllDetectorStatesSelected] = useState(
     true
   );
 
-  const getDetectorStateOptions = (states: string[]) => {
-    return states.map(state => {
-      return { label: state };
-    });
-  };
-
   const handleDetectorStateFilterChange = (
     options: EuiComboBoxOptionProps[]
   ): void => {
-    const selectedStates = options.map(option => option.label);
+    const selectedStates = options.map(
+      option => option.label as DETECTOR_STATE
+    );
     setSelectedDetectorStates(selectedStates);
     setAllDetectorStatesSelected(isEmpty(selectedStates));
   };
@@ -134,9 +127,7 @@ export function DashboardOverview() {
 
   const filterSelectedDetectors = async (
     selectedNameList: string[],
-    // TODO: DetectorStates is placeholder for now until backend profile API is ready
-    // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/25
-    selectedStateList: string[],
+    selectedStateList: DETECTOR_STATE[],
     selectedIndexList: string[]
   ) => {
     let detectorsToFilter: DetectorListItem[];
@@ -156,7 +147,14 @@ export function DashboardOverview() {
       );
     }
 
-    setCurrentDetectors(filteredDetectorItemsByNamesAndIndex);
+    let finalFilteredDetectors = filteredDetectorItemsByNamesAndIndex;
+    if (!allDetectorStatesSelected) {
+      finalFilteredDetectors = filteredDetectorItemsByNamesAndIndex.filter(
+        detectorItem => selectedStateList.includes(detectorItem.curState)
+      );
+    }
+
+    setCurrentDetectors(finalFilteredDetectors);
   };
 
   const intializeDetectors = () => {
@@ -215,7 +213,7 @@ export function DashboardOverview() {
           <EuiComboBox
             id="detectorStateFilter"
             placeholder={ALL_DETECTOR_STATES_MESSAGE}
-            options={getDetectorStateOptions(allDetectorStates)}
+            options={getDetectorStateOptions()}
             onChange={handleDetectorStateFilterChange}
             selectedOptions={selectedDetectorStates.map(buildItemOption)}
             isClearable={true}

diff --git a/public/pages/DetectorsList/Components/ListControls/ListControls.tsx b/public/pages/DetectorsList/Components/ListControls/ListControls.tsx
@@ -23,7 +23,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import { getDetectorStateOptions } from '../../utils/helpers';
-import { DETECTOR_STATE } from 'public/pages/utils/constants';
+import { DETECTOR_STATE } from '../../../../utils/constants';
 
 interface ListControlsProps {
   activePage: number;

diff --git a/public/pages/DetectorsList/Components/ListControls/__tests__/ListControls.test.tsx b/public/pages/DetectorsList/Components/ListControls/__tests__/ListControls.test.tsx
@@ -16,12 +16,9 @@
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import {
-  ALL_DETECTOR_STATES,
-  ALL_INDICES,
-  DETECTOR_STATE,
-} from '../../../../utils/constants';
+import { ALL_DETECTOR_STATES, ALL_INDICES } from '../../../../utils/constants';
 import { ListControls } from '../ListControls';
+import { DETECTOR_STATE } from '../../../../../utils/constants';
 
 describe('<ListControls /> spec', () => {
   const defaultProps = {

diff --git a/public/pages/DetectorsList/List/List.tsx b/public/pages/DetectorsList/List/List.tsx
@@ -42,7 +42,11 @@ import {
   getIndices,
   getPrioritizedIndices,
 } from '../../../redux/reducers/elasticsearch';
-import { APP_PATH, PLUGIN_NAME } from '../../../utils/constants';
+import {
+  APP_PATH,
+  PLUGIN_NAME,
+  DETECTOR_STATE,
+} from '../../../utils/constants';
 import { getVisibleOptions, sanitizeSearchText } from '../../utils/helpers';
 import { EmptyDetectorMessage } from '../Components/EmptyMessage/EmptyMessage';
 import { ListControls } from '../Components/ListControls/ListControls';
@@ -52,7 +56,6 @@ import {
   GET_ALL_DETECTORS_QUERY_PARAMS,
   ALL_DETECTOR_STATES,
   ALL_INDICES,
-  DETECTOR_STATE,
 } from '../../utils/constants';
 import { getURLQueryParams } from '../utils/helpers';
 import {

diff --git a/public/pages/DetectorsList/List/__tests__/List.test.tsx b/public/pages/DetectorsList/List/__tests__/List.test.tsx
@@ -32,7 +32,7 @@ import {
   initialDetectorsState,
 } from '../../../../redux/reducers/ad';
 import { DetectorList, ListRouterParams } from '../List';
-import { DETECTOR_STATE } from '../../../utils/constants';
+import { DETECTOR_STATE } from '../../../../utils/constants';
 
 const renderWithRouter = (
   initialAdState: Detectors = initialDetectorsState

diff --git a/public/pages/DetectorsList/utils/helpers.ts b/public/pages/DetectorsList/utils/helpers.ts
@@ -16,7 +16,8 @@
 import queryString from 'query-string';
 import { GetDetectorsQueryParams } from '../../../../server/models/types';
 import { SORT_DIRECTION } from '../../../../server/utils/constants';
-import { DEFAULT_QUERY_PARAMS, DETECTOR_STATE } from '../../utils/constants';
+import { DEFAULT_QUERY_PARAMS } from '../../utils/constants';
+import { DETECTOR_STATE } from '../../../utils/constants';
 
 export const getURLQueryParams = (location: {
   search: string;

diff --git a/public/pages/DetectorsList/utils/tableUtils.tsx b/public/pages/DetectorsList/utils/tableUtils.tsx
@@ -19,8 +19,8 @@ import moment from 'moment';
 import get from 'lodash/get';
 import React from 'react';
 import { Detector } from '../../../../server/models/types';
-import { PLUGIN_NAME } from '../../../utils/constants';
-import { DETECTOR_STATE, stateToColorMap } from '../../utils/constants';
+import { PLUGIN_NAME, DETECTOR_STATE } from '../../../utils/constants';
+import { stateToColorMap } from '../../utils/constants';
 
 export const DEFAULT_EMPTY_DATA = '-';
 

diff --git a/public/pages/utils/constants.ts b/public/pages/utils/constants.ts
@@ -14,14 +14,7 @@
  */
 
 import { SORT_DIRECTION } from '../../../server/utils/constants';
-
-export enum DETECTOR_STATE {
-  DISABLED = 'Disabled',
-  INIT = 'Initializing',
-  RUNNING = 'Running',
-  INIT_FAILURE = 'Initialization failure',
-  UNEXPECTED_FAILURE = 'Unexpected failure',
-}
+import { DETECTOR_STATE } from '../../utils/constants';
 
 export enum DETECTOR_STATE_COLOR {
   DISABLED = 'subdued',

diff --git a/public/pages/utils/helpers.ts b/public/pages/utils/helpers.ts
@@ -17,7 +17,8 @@ import { CatIndex, IndexAlias } from '../../../server/models/types';
 import sortBy from 'lodash/sortBy';
 import { DetectorListItem } from '../../models/interfaces';
 import { SORT_DIRECTION } from '../../../server/utils/constants';
-import { ALL_INDICES, ALL_DETECTOR_STATES, DETECTOR_STATE } from './constants';
+import { ALL_INDICES, ALL_DETECTOR_STATES } from './constants';
+import { DETECTOR_STATE } from '../../utils/constants';
 
 export function sanitizeSearchText(searchValue: string): string {
   if (!searchValue || searchValue == '*') {

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -47,8 +47,10 @@ export const MAX_DETECTORS = 1000;
 
 export const MAX_ANOMALIES = 10000;
 
-export const DETECTOR_STATE = Object.freeze({
-  DISABLED: 'Disabled',
-  INIT: 'Initializing',
-  RUNNING: 'Running',
-});
+export enum DETECTOR_STATE {
+  DISABLED = 'Disabled',
+  INIT = 'Initializing',
+  RUNNING = 'Running',
+  INIT_FAILURE = 'Initialization failure',
+  UNEXPECTED_FAILURE = 'Unexpected failure',
+}
diff --git a/server/routes/ad.ts b/server/routes/ad.ts
@@ -37,7 +37,7 @@ import {
   convertDetectorKeysToSnakeCase,
   getResultAggregationQuery,
 } from './utils/adHelpers';
-import { DETECTOR_STATE } from '../../public/pages/utils/constants';
+import { DETECTOR_STATE } from '../../public/utils/constants';
 
 type PutDetectorParams = {
   detectorId: string;