Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

Update detector list page & add profile API #16

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions public/components/ContentPanel/ContentPanel.tsx
Original file line number Diff line number Diff line change
@@ -25,8 +25,9 @@ import {
} from '@elastic/eui';

type ContentPanelProps = {
title: string;
title: string | React.ReactNode | React.ReactNode[];
ohltyler marked this conversation as resolved.
Show resolved Hide resolved
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) ? (
Original file line number Diff line number Diff line change
@@ -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"
4 changes: 4 additions & 0 deletions public/models/interfaces.ts
Original file line number Diff line number Diff line change
@@ -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 = {
2 changes: 1 addition & 1 deletion public/pages/Dashboard/Container/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => {
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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,37 @@ 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);
});
test('should display multiple selected detector state and index options', () => {
const updatedProps = {
...defaultProps,
selectedDetectorStates: [DETECTOR_STATE.DISABLED, DETECTOR_STATE.INIT],
selectedIndices: ['test_index_1', 'test_index_2'],
};
const { getByText } = render(<ListControls {...updatedProps} />);
expect(getByText(DETECTOR_STATE.DISABLED)).toBeInTheDocument();
expect(getByText(DETECTOR_STATE.INIT)).toBeInTheDocument();
expect(getByText('test_index_1')).toBeInTheDocument();
expect(getByText('test_index_2')).toBeInTheDocument();
});
});
});
Loading