make custom result index lifecycle management in AD optional

Signed-off-by: Jackie Han <jkhanjob@gmail.com>

Author: jackiehanyang

public/pages/DefineDetector/components/CustomResultIndex/CustomResultIndex.tsx

@@ -23,27 +23,48 @@ import {
   EuiIcon,
   EuiFieldNumber,
 } from '@elastic/eui';
-import { Field, FieldProps } from 'formik';
-import React, { useState } from 'react';
+import { Field, FieldProps, FormikProps, useFormikContext } from 'formik';
+import React, { useEffect, useState } from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';
 import { CUSTOM_AD_RESULT_INDEX_PREFIX } from '../../../../../server/utils/constants';
 import { BASE_DOCS_LINK } from '../../../../utils/constants';
 import {
   isInvalid,
   getError,
   validateCustomResultIndex,
-  validatePositiveInteger,
+  validateEmptyOrPositiveInteger,
 } from '../../../../utils/utils';
 import { FormattedFormRow } from '../../../../components/FormattedFormRow/FormattedFormRow';
+import { DetectorDefinitionFormikValues } from '../../models/interfaces';
+import { get } from 'lodash';
 
 interface CustomResultIndexProps {
   isEdit: boolean;
   useDefaultResultIndex?: boolean;
   resultIndex?: string;
+  formikProps: FormikProps<DetectorDefinitionFormikValues>;
 }
 
 function CustomResultIndex(props: CustomResultIndexProps) {
   const [enabled, setEnabled] = useState<boolean>(!!props.resultIndex);
+  const [customResultIndexConditionsEnabled, setCustomResultIndexConditionsEnabled] = useState<boolean>(true);
+  const customResultIndexMinAge = get(props.formikProps, 'values.resultIndexMinAge');
+  const customResultIndexMinSize = get(props.formikProps, 'values.resultIndexMinSize');
+  const customResultIndexTTL = get(props.formikProps, 'values.resultIndexTtl');
+  const { setFieldValue } = useFormikContext();
+
+  useEffect(() => {
+    if (props.isEdit) {
+      if (customResultIndexMinAge === undefined && customResultIndexMinSize === undefined && customResultIndexTTL === undefined) {
+        setCustomResultIndexConditionsEnabled(false);
+      }
+    } 
+    if (!customResultIndexConditionsEnabled) {
+      setFieldValue('resultIndexMinAge', '');
+      setFieldValue('resultIndexMinSize', '');
+      setFieldValue('resultIndexTtl', '');
+    }
+  },[customResultIndexConditionsEnabled])
 
   return (
     <ContentPanel
@@ -89,7 +110,7 @@ function CustomResultIndex(props: CustomResultIndexProps) {
               <EuiFlexItem>
                 <EuiCallOut
                   data-test-subj="cannotEditResultIndexCallout"
-                  title="You can't change the custom result index after creating the detector. You can manage the result index using the following three settings."
+                  title="You can't change the custom result index after creating the detector. You can manage the result index using the following three settings inside Anomaly Detection plugin or with the Index Management plugin."
                   color="warning"
                   iconType="alert"
                   size="s"
@@ -115,20 +136,37 @@ function CustomResultIndex(props: CustomResultIndexProps) {
                 </EuiFormRow>
               </EuiFlexItem>
             ) : null}
+
+            {enabled ? (
+              <EuiFlexItem>
+                <EuiCheckbox
+                  id={'resultIndexConditionCheckbox'}
+                  label="Enable custom result index lifecycle management"
+                  checked={customResultIndexConditionsEnabled}
+                  onChange={() => {
+                    setCustomResultIndexConditionsEnabled(!customResultIndexConditionsEnabled);
+                  }}
+                />
+              </EuiFlexItem>
+            ) : null}
           </EuiFlexGroup>
         )}
       </Field>
 
-      {enabled ? (<Field 
+      { (enabled && customResultIndexConditionsEnabled) ? (<Field 
         name="resultIndexMinAge" 
-        validate={enabled ? validatePositiveInteger : null}
+        validate={(enabled && customResultIndexConditionsEnabled) ? validateEmptyOrPositiveInteger : null}
         >
         {({ field, form }: FieldProps) => (
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: '70%' }}>
               <FormattedFormRow
                 fullWidth
-                title="Max Index Age"
+                formattedTitle={
+                  <p>
+                    Min Index Age <span className="optional">- optional</span>
+                  </p>
+                }
                 hint={[
                   `This setting would define a specific threshold for the age of an index. When this threshold is surpassed, a rollover will be triggered automatically.`,
                 ]}
@@ -141,6 +179,7 @@ function CustomResultIndex(props: CustomResultIndexProps) {
                       name="resultIndexMinAge"
                       id="resultIndexMinAge"
                       data-test-subj="resultIndexMinAge"
+                      placeholder="Min index age"
                       min={1}
                       {...field}
                     />
@@ -157,16 +196,20 @@ function CustomResultIndex(props: CustomResultIndexProps) {
         )}
       </Field>) : null}  
 
-      {enabled ? (<Field
+      {(enabled && customResultIndexConditionsEnabled) ? (<Field
         name="resultIndexMinSize"
-        validate={enabled ? validatePositiveInteger : null}
+        validate={(enabled && customResultIndexConditionsEnabled) ? validateEmptyOrPositiveInteger : null}
         >
         {({ field, form }: FieldProps) => (
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: '70%' }}>
               <FormattedFormRow
                 fullWidth
-                title="Max Index Size"
+                formattedTitle={
+                  <p>
+                    Min Index Size <span className="optional">- optional</span>
+                  </p>
+                }
                 hint={[
                   `This setting would define a specific threshold for the size of an index. When this threshold is surpassed, a rollover will be triggered automatically.`,
                 ]}
@@ -178,7 +221,7 @@ function CustomResultIndex(props: CustomResultIndexProps) {
                     <EuiFieldNumber
                       name="resultIndexMinSize"
                       id="resultIndexMinSize"
-                      placeholder="Max index size"
+                      placeholder="Min index size"
                       data-test-subj="resultIndexMinSize"
                       min={1000}
                       {...field}
@@ -196,16 +239,20 @@ function CustomResultIndex(props: CustomResultIndexProps) {
         )}
       </Field>) : null}
 
-      {enabled ? (<Field
+      {(enabled && customResultIndexConditionsEnabled) ? (<Field
         name="resultIndexTtl"
-        validate={enabled ? validatePositiveInteger : null}
+        validate={(enabled && customResultIndexConditionsEnabled) ? validateEmptyOrPositiveInteger : null}
         >
         {({ field, form }: FieldProps) => (
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: '70%' }}>
               <FormattedFormRow
                 fullWidth
-                title="Index TTL"
+                formattedTitle={
+                  <p>
+                    Index TTL <span className="optional">- optional</span>
+                  </p>
+                }
                 hint={[
                   `This setting would define the duration after which an index is considered expired and eligible for deletion.`,
                 ]}
@@ -218,6 +265,7 @@ function CustomResultIndex(props: CustomResultIndexProps) {
                       name="resultIndexTtl"
                       id="resultIndexTtl"
                       data-test-subj="resultIndexTtl"
+                      placeholder="Index TTL"
                       min={1}
                       {...field}
                     />

public/pages/DefineDetector/containers/DefineDetector.tsx

@@ -392,6 +392,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
                 <CustomResultIndex
                   isEdit={props.isEdit}
                   resultIndex={get(formikProps, 'values.resultIndex')}
+                  formikProps={formikProps}
                 />
               </Fragment>
             </EuiPageBody>

public/pages/DefineDetector/models/interfaces.ts

@@ -22,7 +22,7 @@ export interface DetectorDefinitionFormikValues {
   timeField: string;
   interval: number;
   windowDelay: number;
-  resultIndexMinAge?: number;
-  resultIndexMinSize?: number;
-  resultIndexTtl?:number;
+  resultIndexMinAge?: number | string;
+  resultIndexMinSize?: number | string;
+  resultIndexTtl?:number | string;
 }

public/pages/DefineDetector/utils/helpers.ts

@@ -45,9 +45,9 @@ export function detectorDefinitionToFormik(
     timeField: ad.timeField,
     interval: get(ad, 'detectionInterval.period.interval', 10),
     windowDelay: get(ad, 'windowDelay.period.interval', 0),
-    resultIndexMinAge: get(ad, 'resultIndexMinAge', 7),
-    resultIndexMinSize:get(ad, 'resultIndexMinSize', 51200),
-    resultIndexTtl: get(ad, 'resultIndexTtl', 60),
+    resultIndexMinAge: get(ad, 'resultIndexMinAge', undefined),
+    resultIndexMinSize:get(ad, 'resultIndexMinSize', undefined),
+    resultIndexTtl: get(ad, 'resultIndexTtl', undefined),
   };
 }
 

public/pages/ReviewAndCreate/components/DetectorDefinitionFields/DetectorDefinitionFields.tsx

@@ -131,9 +131,13 @@ export const DetectorDefinitionFields = (
     }
   };
 
-  const minAge = get(props, 'detector.resultIndexMinAge', '-');
-  const minSize = get(props, 'detector.resultIndexMinSize', '-');
-  const ttl = get(props, 'detector.resultIndexTtl', '-');
+  const minAgeValue = get(props, 'detector.resultIndexMinAge', undefined);
+  const minAge = (minAgeValue === undefined) ? '- Days' : minAgeValue + " Days";
+  const minSizeValue = get(props, 'detector.resultIndexMinSize', undefined);
+  const minSize = (minSizeValue === undefined) ? '- MB' : minSizeValue + " MB";
+  const ttlValue = get(props, 'detector.resultIndexTtl', undefined);
+  const ttl = (ttlValue === undefined) ? '- Days' : ttlValue + " Days";
+
 
   return (
     <ContentPanel
@@ -224,19 +228,19 @@ export const DetectorDefinitionFields = (
         <EuiFlexItem>
           <ConfigCell
             title="Custom result index min age"
-            description={minAge === '-' ? minAge : `${minAge} Days`}
+            description={minAge}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <ConfigCell
             title="Custom result index min size"
-            description={minSize == '-' ? minSize : `${minSize} MB`}
+            description={minSize}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <ConfigCell
             title="Custom result index TTL"
-            description={ttl == '-' ? ttl : `${ttl} Days`}
+            description={ttl}
           />
         </EuiFlexItem>
       </EuiFlexGrid>

public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap

@@ -424,7 +424,7 @@ exports[`<ReviewAndCreate /> spec renders the component, validation loading 1`]
                     <p
                       class="enabled"
                     >
-                      -
+                      - Days
                     </p>
                   </div>
                 </div>
@@ -458,7 +458,7 @@ exports[`<ReviewAndCreate /> spec renders the component, validation loading 1`]
                     <p
                       class="enabled"
                     >
-                      -
+                      - MB
                     </p>
                   </div>
                 </div>
@@ -492,7 +492,7 @@ exports[`<ReviewAndCreate /> spec renders the component, validation loading 1`]
                     <p
                       class="enabled"
                     >
-                      -
+                      - Days
                     </p>
                   </div>
                 </div>
@@ -1518,7 +1518,7 @@ exports[`issue in detector validation issues in feature query 1`] = `
                       <p
                         class="enabled"
                       >
-                        -
+                        - Days
                       </p>
                     </div>
                   </div>
@@ -1552,7 +1552,7 @@ exports[`issue in detector validation issues in feature query 1`] = `
                       <p
                         class="enabled"
                       >
-                        -
+                        - MB
                       </p>
                     </div>
                   </div>
@@ -1586,7 +1586,7 @@ exports[`issue in detector validation issues in feature query 1`] = `
                       <p
                         class="enabled"
                       >
-                        -
+                        - Days
                       </p>
                     </div>
                   </div>

public/utils/utils.tsx

@@ -110,6 +110,11 @@ export const validatePositiveInteger = (value: any) => {
     return 'Must be a positive integer';
 };
 
+export const validateEmptyOrPositiveInteger = (value: any) => {
+  if (Number.isInteger(value) && value < 1)
+    return 'Must be a positive integer';
+};
+
 export const validateNonNegativeInteger = (value: any) => {
   if (!Number.isInteger(value) || value < 0)
     return 'Must be a non-negative integer';