Adds window size as advanced setting in model configuration.

opendistro-for-elasticsearch · Sep 2, 2020 · c9d70c5 · c9d70c5
1 parent b061bc2
commit c9d70c5
Show file tree

Hide file tree

Showing 16 changed files with 167 additions and 47 deletions.
diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -103,6 +103,7 @@ export type Detector = {
   featureAttributes: FeatureAttributes[];
   windowDelay: { period: Schedule };
   detectionInterval: { period: Schedule };
+  shingleSize: number;
   uiMetadata: UiMetaData;
   lastUpdateTime: number;
   enabled?: boolean;

diff --git a/public/pages/DetectorConfig/DetectorConfig.scss b/public/pages/DetectorConfig/DetectorConfig.scss
@@ -82,3 +82,14 @@
   line-height: 24px;
   text-align: center;
 }
+
+.header-single-value-euiBasicTable {
+    .euiTableHeaderCell, .euiTableRowCell {
+      border: 0;
+      .euiTableCellContent {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+}
diff --git a/public/pages/DetectorConfig/containers/Features.tsx b/public/pages/DetectorConfig/containers/Features.tsx
@@ -20,14 +20,15 @@ import {
   EuiIcon,
   EuiButton,
   EuiEmptyPrompt,
+  EuiSpacer,
 } from '@elastic/eui';
 import {
   Detector,
   FEATURE_TYPE,
   FeatureAttributes,
 } from '../../../models/interfaces';
 import { get, sortBy } from 'lodash';
-import { PLUGIN_NAME } from '../../../utils/constants';
+import { PLUGIN_NAME, SHINGLE_SIZE } from '../../../utils/constants';
 import ContentPanel from '../../../components/ContentPanel/ContentPanel';
 import { CodeModal } from '../components/CodeModal/CodeModal';
 import { getTitleWithCount } from '../../../utils/utils';
@@ -93,6 +94,7 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
 
   public render() {
     const featureAttributes = get(this.props.detector, 'featureAttributes', []);
+    const shingleSize = get(this.props.detector, 'shingleSize', SHINGLE_SIZE);
 
     const sorting = {
       sort: {
@@ -170,7 +172,7 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
       },
       {
         field: 'state',
-        name: 'State',
+        name: 'Feature state',
       },
     ];
 
@@ -182,17 +184,21 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
 
     const featureNum = Object.keys(featureAttributes).length;
 
+    const setParamsText = `Set the index fields that you want to find anomalies for by defining
+                           the model features. You can also set other model parameters such as
+                           window size.`
+
+    const previewText = `After you set the model features and other optional parameters, you can
+                         preview your anomalies from a sample feature output.`
+
     return (
       <ContentPanel
-        title={getTitleWithCount('Features', featureNum)}
+        title="Model configuration"
         titleSize="s"
         subTitle={
           <EuiText className="anomaly-distribution-subtitle">
             <p>
-              Specify index fields that you want to find anomalies for by
-              defining features. A detector can discover anomalies for up to 5
-              features. Once you define the features, you can preview your
-              anomalies from a sample feature output.{' '}
+              {`${setParamsText} ${previewText} `}
               <EuiLink
                 href="https://opendistro.github.io/for-elasticsearch-docs/docs/ad/"
                 target="_blank"
@@ -211,14 +217,15 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
           <EuiEmptyPrompt
             title={
               <span className="emptyFeatureTitle">
-                Features are required to run a detector
+                Model parameters are required to run a detector
               </span>
             }
             body={
               <EuiText className="emptyFeatureBody">
-                Specify index fields that you want to find anomalies for by
-                defining features. Once you define the features, you can preview
-                your anomalies from a sample feature output.
+                {setParamsText}
+                <br/>
+                <br/>
+                {previewText}
               </EuiText>
             }
             actions={[
@@ -227,18 +234,37 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
                 href={`${PLUGIN_NAME}#/detectors/${this.props.detectorId}/features`}
                 fill
               >
-                Add feature
+                Configure model
               </EuiButton>,
             ]}
           />
         ) : (
-          <EuiBasicTable
-            items={sortedItems}
-            columns={columns}
-            cellProps={getCellProps}
-            sorting={sorting}
-            onChange={this.handleTableChange}
-          />
+          <div>
+            <ContentPanel
+              title={getTitleWithCount('Features', featureNum)}
+              titleSize="s"
+            >
+              <EuiBasicTable
+                items={sortedItems}
+                columns={columns}
+                cellProps={getCellProps}
+                sorting={sorting}
+                onChange={this.handleTableChange}
+              />
+            </ContentPanel>
+            <EuiSpacer size="m"/>
+            <ContentPanel
+              title="Additional settings"
+              titleSize="s"
+            >
+              <EuiBasicTable
+                className="header-single-value-euiBasicTable"
+                items={[{ windowSize: shingleSize }]}
+                columns={[{ field: 'windowSize', name: 'Window size'}]}
+                cellProps={getCellProps}
+              />
+            </ContentPanel>
+          </div>
         )}
       </ContentPanel>
     );

diff --git a/public/pages/DetectorConfig/containers/MetaData.tsx b/public/pages/DetectorConfig/containers/MetaData.tsx
@@ -24,11 +24,8 @@ import {
   EuiButton,
   EuiFormRowProps,
 } from '@elastic/eui';
-import { PLUGIN_NAME } from '../../../utils/constants';
 import {
   Detector,
-  Schedule,
-  UiMetaData,
   FILTER_TYPES,
   UIFilter,
 } from '../../../models/interfaces';

diff --git a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
@@ -25,7 +25,6 @@ import {
   render,
   fireEvent,
   wait,
-  waitForElement,
 } from '@testing-library/react';
 // @ts-ignore
 import { toastNotifications } from 'ui/notify';
@@ -41,7 +40,6 @@ import {
 } from '../../../../models/interfaces';
 import {
   getRandomDetector,
-  getRandomFeature,
 } from '../../../../redux/reducers/__tests__/utils';
 import configureStore from '../../../../redux/configureStore';
 import { httpClientMock } from '../../../../../test/mocks';
@@ -161,14 +159,15 @@ describe('<DetectorConfig /> spec', () => {
       ...getRandomDetector(true),
       uiMetadata: {} as UiMetaData,
       featureAttributes: [],
+      shingleSize: 8,
     };
-    const { getByText } = renderWithRouter(randomDetector);
+    const { getByText, queryByText } = renderWithRouter(randomDetector);
     await wait(() => {
-      getByText('Features are required to run a detector');
-      getByText(
-        'Specify index fields that you want to find anomalies for by defining features. Once you define the features, you can preview your anomalies from a sample feature output.'
+      getByText('Model parameters are required to run a detector');
+      queryByText(
+        'Set the index fields'
       );
-      getByText('Features');
+      getByText('Model configuration');
       getByText(randomDetector.name);
       getByText(randomDetector.indices[0]);
       getByText(toString(randomDetector.detectionInterval));
@@ -178,8 +177,8 @@ describe('<DetectorConfig /> spec', () => {
       getByText(randomDetector.description);
       // filter should be -
       getByText('-');
-      getByText(
-        'Specify index fields that you want to find anomalies for by defining features. A detector can discover anomalies for up to 5 features. Once you define the features, you can preview your anomalies from a sample feature output.'
+      queryByText(
+        'Set the index fields'
       );
     });
   });

diff --git a/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx b/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx
@@ -68,7 +68,7 @@ export const DetectorControls = (props: DetectorControls) => {
               data-test-subj="editFeature"
               onClick={props.onEditFeatures}
             >
-              Edit features
+              Edit model configuration
             </EuiContextMenuItem>
 
             <EuiContextMenuItem

diff --git a/public/pages/DetectorResults/utils/utils.ts b/public/pages/DetectorResults/utils/utils.ts
@@ -20,6 +20,7 @@ import {
 } from './constants';
 import { DETECTOR_STATE, SHINGLE_SIZE } from '../../../utils/constants';
 import moment, { Moment } from 'moment';
+import { get } from 'lodash';
 import { DETECTOR_INIT_FAILURES } from '../../../pages/DetectorDetail/utils/constants';
 
 export const IS_INIT_OVERTIME_FIELD = 'isInitOvertime';
@@ -50,7 +51,7 @@ const isDetectorInitOverTime = (currentTime: Moment, detector: Detector) => {
     //@ts-ignore
     currentTime
       .subtract(
-        SHINGLE_SIZE * detector.detectionInterval.period.interval,
+        get(detector, 'shingleSize', SHINGLE_SIZE) * detector.detectionInterval.period.interval,
         detector.detectionInterval.period.unit.toLowerCase()
       )
       //@ts-ignore