add window delay field of anomaly detector

public/pages/PreviewDetector/containers/AdjustModel.tsx

@@ -44,6 +44,7 @@ import {
   isInvalid,
   getError,
   validatePositiveInteger,
+  validateNonNegativeInteger,
   getErrorMessage,
 } from '../../../utils/utils';
 import { Detector } from '../../../models/interfaces';
@@ -65,11 +66,13 @@ type AdjustModelProps = {
 export type AdjustModelFormikValues = {
   formikFeatures: FeaturesFormikValues[];
   detectionInterval: number;
+  windowDelay: number;
 };
 
 const getInitialValues = (detector: Detector) => ({
   formikFeatures: Object.values(featuresToFormik(detector)),
   detectionInterval: get(detector, 'detectionInterval.period.interval', 10),
+  windowDelay: get(detector, 'windowDelay.period.interval', 0),
 });
 
 export function AdjustModel(props: AdjustModelProps) {
@@ -177,6 +180,27 @@ export function AdjustModel(props: AdjustModelProps) {
                   </EuiFormRow>
                 )}
               </Field>
+              <Field
+                name="windowDelay"
+                validate={validateNonNegativeInteger}
+              >
+                {({ field, form }: FieldProps) => (
+                  <EuiFormRow
+                    label="Window delay"
+                    helpText="Specify data delay in minutes"
+                    isInvalid={isInvalid(field.name, form)}
+                    error={getError(field.name, form)}
+                  >
+                    <EuiFieldNumber
+                      name="windowDelay"
+                      id="windowDelay"
+                      placeholder="Window delay"
+                      data-test-subj="windowDelay"
+                      {...field}
+                    />
+                  </EuiFormRow>
+                )}
+              </Field>
             </EuiFlyoutBody>
             <EuiFlyoutFooter className="flyout">
               <EuiFlexGroup alignItems="center" justifyContent="flexEnd">

public/pages/PreviewDetector/containers/__tests__/ModelDefinition.test.tsx

@@ -362,13 +362,20 @@ describe('<ModelDefinition /> spec', () => {
                 unit: UNITS.MINUTES,
               },
             },
+            windowDelay: {
+              period: {
+                interval: 1,
+                unit: UNITS.MINUTES,
+              },
+            },
           },
         },
       });
       const { getByTestId } = renderWithRouter(randomDetector);
       fireEvent.click(getByTestId('adjustModel'));
       await wait();
       userEvent.type(getByTestId('detectionInterval'), '20');
+      userEvent.type(getByTestId('windowDelay'), '2');
       fireEvent.click(getByTestId('updateAdjustModel'));
       await wait();
       expect(httpClientMock.put).toHaveBeenCalledTimes(1);

public/pages/PreviewDetector/containers/utils/__tests__/formikToAdjustModel.test.ts

@@ -24,12 +24,16 @@ describe('prepareTunedDetector', () => {
     const randomDetector = getRandomDetector(false);
     const tuneValue: AdjustModelFormikValues = {
       detectionInterval: 20,
+      windowDelay: 3,
       formikFeatures: Object.values(featuresToFormik(randomDetector)),
     };
     const apiRequest = prepareTunedDetector(tuneValue, randomDetector);
     expect(apiRequest.detectionInterval).toEqual({
       period: { interval: 20, unit: UNITS.MINUTES },
     });
+    expect(apiRequest.windowDelay).toEqual({
+      period: { interval: 3, unit: UNITS.MINUTES },
+    });
   });
   test('should able to update state of a feature interval', () => {
     const randomDetector = getRandomDetector(false);
@@ -45,12 +49,16 @@ describe('prepareTunedDetector', () => {
     const formikFeatures = Object.values(updatedFeatures);
     const tuneValue: AdjustModelFormikValues = {
       detectionInterval: 20,
+      windowDelay: 3,
       formikFeatures: formikFeatures,
     };
     const apiRequest = prepareTunedDetector(tuneValue, randomDetector);
     expect(apiRequest.detectionInterval).toEqual({
       period: { interval: 20, unit: UNITS.MINUTES },
     });
+    expect(apiRequest.windowDelay).toEqual({
+      period: { interval: 3, unit: UNITS.MINUTES },
+    });
     expect(apiRequest.featureAttributes[0].featureEnabled).toBe(
       !formikFeaturesMap[editFeatureId].enabled
     );

public/pages/PreviewDetector/containers/utils/formikToAdjustModel.ts

@@ -29,6 +29,9 @@ export function prepareTunedDetector(
     detectionInterval: {
       period: { interval: values.detectionInterval, unit: UNITS.MINUTES },
     },
+    windowDelay: {
+      period: { interval: values.windowDelay, unit: UNITS.MINUTES },
+    },
     featureAttributes: featureAttributes,
   };
 }

public/utils/__tests__/utils.test.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import {validateNonNegativeInteger} from '../utils';
+
+describe('validateNonNegativeInteger', () => {
+
+  test('should pass for positive', () => {
+      expect(validateNonNegativeInteger(1)).toBeUndefined();
+  });
+
+  test('should pass for zero', () => {
+      expect(validateNonNegativeInteger(0)).toBeUndefined();
+  });
+
+  test('should raise for negative', () => {
+      expect(validateNonNegativeInteger(-1)).not.toBeUndefined();
+  });
+
+  test('should raise for floating-point', () => {
+      expect(validateNonNegativeInteger(1.1)).not.toBeUndefined();
+  });
+
+});

public/utils/utils.ts

@@ -34,6 +34,11 @@ export const validatePositiveInteger = (value: any) => {
     return 'Must be a positive integer';
 };
 
+export const validateNonNegativeInteger = (value: any) => {
+  if (!Number.isInteger(value) || value < 0)
+    return 'Must be a non-negative integer';
+};
+
 export const getErrorMessage = (err: any, defaultMessage: string) => {
   if (typeof err === 'string') return err;
   if (err && err.message) return err.message;