Update detector list page & add profile API

public/components/ContentPanel/ContentPanel.tsx

@@ -25,8 +25,9 @@ import {
 } from '@elastic/eui';
 
 type ContentPanelProps = {
-  title: string;
+  title: string | React.ReactNode | React.ReactNode[];
   titleSize?: EuiTitleSize;
+  subTitle?: React.ReactNode | React.ReactNode[];
   bodyStyles?: React.CSSProperties;
   panelStyles?: React.CSSProperties;
   horizontalRuleClassName?: string;
@@ -46,13 +47,43 @@ const ContentPanel = (props: ContentPanelProps) => (
       alignItems="center"
     >
       <EuiFlexItem>
-        <EuiTitle
-          size={props.titleSize || 'l'}
-          className={props.titleClassName || ''}
-        >
-          <h3>{props.title}</h3>
-        </EuiTitle>
+        {typeof props.title === 'string' ? (
+          <EuiTitle
+            size={props.titleSize || 'l'}
+            className={props.titleClassName || 'content-panel-title'}
+          >
+            <h3>{props.title}</h3>
+          </EuiTitle>
+        ) : (
+          <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+            {Array.isArray(props.title) ? (
+              props.title.map(
+                (titleComponent: React.ReactNode, idx: number) => (
+                  <EuiFlexItem grow={false} key={idx}>
+                    {titleComponent}
+                  </EuiFlexItem>
+                )
+              )
+            ) : (
+              <EuiFlexItem>{props.title}</EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
+        <EuiFlexGroup>
+          {Array.isArray(props.subTitle) ? (
+            props.subTitle.map(
+              (subTitleComponent: React.ReactNode, idx: number) => (
+                <EuiFlexItem grow={false} key={idx}>
+                  {subTitleComponent}
+                </EuiFlexItem>
+              )
+            )
+          ) : (
+            <EuiFlexItem>{props.subTitle}</EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </EuiFlexItem>
+
       <EuiFlexItem grow={false}>
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
           {Array.isArray(props.actions) ? (

public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap

@@ -13,10 +13,17 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
       class="euiFlexItem"
     >
       <h3
-        class="euiTitle euiTitle--large"
+        class="euiTitle euiTitle--large content-panel-title"
       >
         Testing
       </h3>
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+        />
+      </div>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"

public/models/interfaces.ts

@@ -14,6 +14,7 @@
  */
 
 import { DATA_TYPES } from '../utils/constants';
+import { DETECTOR_STATE } from 'public/pages/utils/constants';
 
 export type FieldInfo = {
   label: string;
@@ -107,8 +108,11 @@ export type Detector = {
 export type DetectorListItem = {
   id: string;
   name: string;
+  indices: string[];
+  curState: DETECTOR_STATE;
   totalAnomalies: number;
   lastActiveAnomaly: number;
+  lastUpdateTime: number;
 };
 
 export type AnomalyData = {

public/pages/Dashboard/Container/Dashboard.tsx

@@ -27,7 +27,7 @@ import {
   EuiPageBody,
   EuiLoadingSpinner,
 } from '@elastic/eui';
-import { SideBar } from '../Components/utils/SideBar';
+import { SideBar } from '../../utils/SideBar';
 import { DashboardHeader } from '../Components/utils/DashboardHeader';
 
 export const Dashboard = () => {

public/pages/DetectorsList/Components/ListControls/ListControls.tsx

@@ -14,31 +14,72 @@
  */
 
 import {
+  EuiComboBox,
+  EuiComboBoxOptionProps,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPagination,
 } from '@elastic/eui';
 import React from 'react';
+import { getDetectorStateOptions } from '../../utils/helpers';
+import { DETECTOR_STATE } from 'public/pages/utils/constants';
 
 interface ListControlsProps {
   activePage: number;
   pageCount: number;
   search: string;
-  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  selectedDetectorStates: DETECTOR_STATE[];
+  selectedIndices: string[];
+  indexOptions: EuiComboBoxOptionProps[];
+  onDetectorStateChange: (options: EuiComboBoxOptionProps[]) => void;
+  onIndexChange: (options: EuiComboBoxOptionProps[]) => void;
+  onSearchDetectorChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSearchIndexChange: (searchValue: string) => void;
   onPageClick: (pageNumber: number) => void;
 }
 export const ListControls = (props: ListControlsProps) => (
   <EuiFlexGroup>
-    <EuiFlexItem>
+    <EuiFlexItem grow={false} style={{ width: '40%' }}>
       <EuiFieldSearch
         fullWidth={true}
         value={props.search}
         placeholder="Search"
-        onChange={props.onSearchChange}
+        onChange={props.onSearchDetectorChange}
         data-test-subj="detectorListSearch"
       />
     </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiComboBox
+        id="selectedDetectorStates"
+        placeholder="All detector states"
+        isClearable={true}
+        singleSelection={false}
+        options={getDetectorStateOptions()}
+        onChange={props.onDetectorStateChange}
+        selectedOptions={
+          props.selectedDetectorStates.length > 0
+            ? props.selectedDetectorStates.map(index => ({ label: index }))
+            : []
+        }
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiComboBox
+        id="selectedIndices"
+        placeholder="All indices"
+        isClearable={true}
+        singleSelection={false}
+        options={props.indexOptions}
+        onChange={props.onIndexChange}
+        onSearchChange={props.onSearchIndexChange}
+        selectedOptions={
+          props.selectedIndices.length > 0
+            ? props.selectedIndices.map(index => ({ label: index }))
+            : []
+        }
+      />
+    </EuiFlexItem>
     {props.pageCount > 1 ? (
       <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
         <EuiPagination

public/pages/DetectorsList/Components/ListControls/__tests__/ListControls.test.tsx

@@ -13,17 +13,29 @@
  * permissions and limitations under the License.
  */
 
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import {
+  ALL_DETECTOR_STATES,
+  ALL_INDICES,
+  DETECTOR_STATE,
+} from '../../../../utils/constants';
 import { ListControls } from '../ListControls';
-import userEvent from '@testing-library/user-event';
 
 describe('<ListControls /> spec', () => {
   const defaultProps = {
     activePage: 1,
     pageCount: 10,
     search: '',
-    onSearchChange: jest.fn(),
+    selectedDetectorStates: ALL_DETECTOR_STATES,
+    selectedIndices: ALL_INDICES,
+    detectorStateOptions: [],
+    indexOptions: [],
+    onDetectorStateChange: jest.fn(),
+    onIndexChange: jest.fn(),
+    onSearchDetectorChange: jest.fn(),
+    onSearchIndexChange: jest.fn(),
     onPageClick: jest.fn(),
   };
   beforeEach(() => {
@@ -34,12 +46,12 @@ describe('<ListControls /> spec', () => {
       const { container } = render(<ListControls {...defaultProps} />);
       expect(container.firstChild).toMatchSnapshot();
     });
-    test('should call onSearchChange callback when user inputs text', () => {
+    test('should call onSearchDetectorChange callback when user inputs text', () => {
       const { getByPlaceholderText } = render(
         <ListControls {...defaultProps} />
       );
       userEvent.type(getByPlaceholderText('Search'), 'Testing');
-      expect(defaultProps.onSearchChange).toHaveBeenCalledTimes(7);
+      expect(defaultProps.onSearchDetectorChange).toHaveBeenCalledTimes(7);
     });
     test('pagination should be hidden if pages count is 1', async () => {
       const { queryByTestId } = render(
@@ -58,5 +70,25 @@ describe('<ListControls /> spec', () => {
       fireEvent.click(getByTestId('pagination-button-3'));
       expect(defaultProps.onPageClick).toHaveBeenCalledTimes(1);
     });
+    test('should display default detector state and index options', () => {
+      const { getByText } = render(<ListControls {...defaultProps} />);
+      expect(getByText('All detector states')).toBeInTheDocument();
+      expect(getByText('All indices')).toBeInTheDocument();
+    });
+    test('should display selected detector state and index options', () => {
+      const updatedProps = {
+        ...defaultProps,
+        selectedDetectorStates: [DETECTOR_STATE.DISABLED],
+        selectedIndices: ['test_index'],
+      };
+      const { getByText } = render(<ListControls {...updatedProps} />);
+      expect(getByText(DETECTOR_STATE.DISABLED)).toBeInTheDocument();
+      expect(getByText('test_index')).toBeInTheDocument();
+    });
+    test('should call onIndexSearchChange when searching in index filter', () => {
+      const { getAllByTestId } = render(<ListControls {...defaultProps} />);
+      userEvent.type(getAllByTestId('comboBoxSearchInput')[1], 'Testing');
+      expect(defaultProps.onSearchIndexChange).toHaveBeenCalledTimes(7);
+    });
   });
 });