Add Enable Flattened custom result index checkbox (opensearch-project…

…#830) * Add Enable Flattened custom result index checkbox Signed-off-by: Jackie Han <jkhanjob@gmail.com> * add hint text Signed-off-by: Jackie Han <jkhanjob@gmail.com> --------- Signed-off-by: Jackie Han <jkhanjob@gmail.com>
jackiehanyang · Aug 7, 2024 · d220c73 · d220c73
1 parent 7529afd
commit d220c73
Show file tree

Hide file tree

Showing 15 changed files with 300 additions and 14 deletions.
diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -190,6 +190,7 @@ export type Detector = {
   resultIndexMinAge?: number;
   resultIndexMinSize?: number;
   resultIndexTtl?: number;
+  flattenCustomResultIndex?: boolean;
   filterQuery: { [key: string]: any };
   featureAttributes: FeatureAttributes[];
   windowDelay: { period: Schedule };

diff --git a/public/pages/DefineDetector/components/CustomResultIndex/CustomResultIndex.tsx b/public/pages/DefineDetector/components/CustomResultIndex/CustomResultIndex.tsx
@@ -66,6 +66,16 @@ function CustomResultIndex(props: CustomResultIndexProps) {
     }
   },[customResultIndexConditionsEnabled])
 
+  const hintTextStyle = {
+    color: '#69707d',
+    fontSize: '12px',
+    lineHeight: '16px',
+    fontWeight: 'normal',
+    fontFamily: 'Helvetica, sans-serif',
+    textAlign: 'left',
+    width: '400px',
+};
+
   return (
     <ContentPanel
       title={
@@ -136,23 +146,46 @@ 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>
 
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          { enabled ? (
+            <Field
+              name="flattenCustomResultIndex">
+            {({ field, form }: FieldProps) => (
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiCheckbox
+                    id={'flattenCustomResultIndex'}
+                    label="Enable flattened custom result index"
+                    checked={field.value ? field.value : get(props.formikProps, 'values.flattenCustomResultIndex')}
+                    {...field}
+                  />
+                  <p style={hintTextStyle}>Flattening the custom result index will make it easier to query them on the dashboard. It also allows you to perform term aggregations on categorical fields.</p>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+          </Field>) : null}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          {enabled ? (
+            <EuiFlexItem>
+              <EuiCheckbox
+                id={'resultIndexConditionCheckbox'}
+                label="Enable custom result index lifecycle management"
+                checked={customResultIndexConditionsEnabled}
+                onChange={() => {
+                  setCustomResultIndexConditionsEnabled(!customResultIndexConditionsEnabled);
+                }}
+              />
+            </EuiFlexItem>
+          ) : null}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
       { (enabled && customResultIndexConditionsEnabled) ? (<Field 
         name="resultIndexMinAge" 
         validate={(enabled && customResultIndexConditionsEnabled) ? validateEmptyOrPositiveInteger : null}

diff --git a/public/pages/DefineDetector/containers/DefineDetector.tsx b/public/pages/DefineDetector/containers/DefineDetector.tsx
@@ -229,6 +229,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
       formikProps.setFieldTouched('resultIndexMinAge');
       formikProps.setFieldTouched('resultIndexMinSize');
       formikProps.setFieldTouched('resultIndexTtl');
+      formikProps.setFieldTouched('flattenCustomResultIndex');
       formikProps.validateForm().then((errors) => {
         if (isEmpty(errors)) {
           if (props.isEdit) {

diff --git a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
@@ -972,6 +972,16 @@ exports[`<DefineDetector /> Full creating detector definition renders the compon
               </div>
             </div>
           </div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            />
+            <div
+              class="euiFlexItem"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -1949,6 +1959,16 @@ exports[`<DefineDetector /> empty creating detector definition renders the compo
               </div>
             </div>
           </div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            />
+            <div
+              class="euiFlexItem"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -2959,6 +2979,16 @@ exports[`<DefineDetector /> empty editing detector definition renders the compon
               </div>
             </div>
           </div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            />
+            <div
+              class="euiFlexItem"
+            />
+          </div>
         </div>
       </div>
     </div>

diff --git a/public/pages/DefineDetector/models/interfaces.ts b/public/pages/DefineDetector/models/interfaces.ts
@@ -25,4 +25,5 @@ export interface DetectorDefinitionFormikValues {
   resultIndexMinAge?: number | string;
   resultIndexMinSize?: number | string;
   resultIndexTtl?:number | string;
+  flattenCustomResultIndex?: boolean;
 }
diff --git a/public/pages/DefineDetector/utils/__tests__/helpers.test.tsx b/public/pages/DefineDetector/utils/__tests__/helpers.test.tsx
@@ -44,6 +44,7 @@ describe('detectorDefinitionToFormik', () => {
       resultIndexMinAge: randomDetector.resultIndexMinAge,
       resultIndexMinSize: randomDetector.resultIndexMinSize,
       resultIndexTtl: randomDetector.resultIndexTtl,
+      flattenCustomResultIndex: randomDetector.flattenCustomResultIndex,
     });
   });
   test('should return if detector does not have metadata', () => {
@@ -64,6 +65,7 @@ describe('detectorDefinitionToFormik', () => {
       resultIndexMinAge: randomDetector.resultIndexMinAge,
       resultIndexMinSize: randomDetector.resultIndexMinSize,
       resultIndexTtl: randomDetector.resultIndexTtl,
+      flattenCustomResultIndex: randomDetector.flattenCustomResultIndex,
     });
   });
   test("upgrade old detector's filters to include filter type", () => {

diff --git a/public/pages/DefineDetector/utils/constants.tsx b/public/pages/DefineDetector/utils/constants.tsx
@@ -47,4 +47,5 @@ export const INITIAL_DETECTOR_DEFINITION_VALUES: DetectorDefinitionFormikValues
     resultIndexMinAge: 7,
     resultIndexMinSize: 51200,
     resultIndexTtl: 60,
+    flattenCustomResultIndex: false,
   };
diff --git a/public/pages/DefineDetector/utils/helpers.ts b/public/pages/DefineDetector/utils/helpers.ts
@@ -48,6 +48,7 @@ export function detectorDefinitionToFormik(
     resultIndexMinAge: get(ad, 'resultIndexMinAge', undefined),
     resultIndexMinSize:get(ad, 'resultIndexMinSize', undefined),
     resultIndexTtl: get(ad, 'resultIndexTtl', undefined),
+    flattenCustomResultIndex: get(ad, 'flattenCustomResultIndex', false),
   };
 }
 
@@ -125,6 +126,7 @@ export function formikToDetectorDefinition(
     resultIndexMinAge: values.resultIndexMinAge,
     resultIndexMinSize: values.resultIndexMinSize,
     resultIndexTtl: values.resultIndexTtl,
+    flattenCustomResultIndex: values.flattenCustomResultIndex,
   } as Detector;
 
   return detectorBody;

diff --git a/public/pages/DetectorConfig/containers/__tests__/__snapshots__/DetectorConfig.test.tsx.snap b/public/pages/DetectorConfig/containers/__tests__/__snapshots__/DetectorConfig.test.tsx.snap
@@ -430,6 +430,40 @@ exports[`<DetectorConfig /> spec renders the component 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="euiFlexItem"
+            >
+              <div
+                class="euiFormRow"
+                id="random_html_id-row"
+                style="width: 250px;"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Flatten custom result index
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiText euiText--medium"
+                    id="random_html_id"
+                  >
+                    <p
+                      class="enabled"
+                    >
+                      Yes
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div
               class="euiFlexItem"
             >
@@ -1706,6 +1740,40 @@ exports[`<DetectorConfig /> spec renders the component with 2 custom and 1 simpl
                 </div>
               </div>
             </div>
+            <div
+              class="euiFlexItem"
+            >
+              <div
+                class="euiFormRow"
+                id="random_html_id-row"
+                style="width: 250px;"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Flatten custom result index
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiText euiText--medium"
+                    id="random_html_id"
+                  >
+                    <p
+                      class="enabled"
+                    >
+                      Yes
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div
               class="euiFlexItem"
             >

diff --git a/...ic/pages/ReviewAndCreate/components/DetectorDefinitionFields/DetectorDefinitionFields.tsx b/...ic/pages/ReviewAndCreate/components/DetectorDefinitionFields/DetectorDefinitionFields.tsx
@@ -137,7 +137,8 @@ export const DetectorDefinitionFields = (
   const minSize = (minSizeValue === undefined) ? '-' : minSizeValue + " MB";
   const ttlValue = get(props, 'detector.resultIndexTtl', undefined);
   const ttl = (ttlValue === undefined) ? '-' : ttlValue + " Days";
-
+  const flattenCustomResultIndex = get(props, 'detector.flattenCustomResultIndex', undefined);
+  const flatten = (flattenCustomResultIndex === undefined) ? '-' : flattenCustomResultIndex ? 'Yes' : 'No';
 
   return (
     <ContentPanel
@@ -225,6 +226,12 @@ export const DetectorDefinitionFields = (
             description={get(props, 'detector.resultIndex', '-')}
           />
         </EuiFlexItem>
+        <EuiFlexItem>
+          <ConfigCell
+            title="Flatten custom result index"
+            description={flatten}
+          />
+        </EuiFlexItem>
         <EuiFlexItem>
           <ConfigCell
             title="Custom result index min age"

diff --git a/public/pages/ReviewAndCreate/components/__tests__/DetectorDefinitionFields.test.tsx b/public/pages/ReviewAndCreate/components/__tests__/DetectorDefinitionFields.test.tsx
@@ -58,6 +58,7 @@ const testDetector = {
   resultIndexMinAge: 7,
   resultIndexMinSize: 51200,
   resultIndexTtl: 60,
+  flattenCustomResultIndex: true,
 } as Detector;
 
 describe('<AdditionalSettings /> spec', () => {
@@ -85,6 +86,7 @@ describe('<AdditionalSettings /> spec', () => {
     getByText('test-timefield');
     getByText('1 Minutes');
     getByText('opensearch-ad-plugin-result-test');
+    getByText('Yes')
     getByText('7 Days');
     getByText('51200 MB');
     getByText('60 Days');

diff --git a/...ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap b/...ReviewAndCreate/components/__tests__/__snapshots__/DetectorDefinitionFields.test.tsx.snap
@@ -342,6 +342,40 @@ exports[`<AdditionalSettings /> spec renders the component in create mode (no ID
               </div>
             </div>
           </div>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiFormRow"
+              id="random_html_id-row"
+              style="width: 250px;"
+            >
+              <div
+                class="euiFormRow__labelWrapper"
+              >
+                <label
+                  class="euiFormLabel euiFormRow__label"
+                  for="random_html_id"
+                >
+                  Flatten custom result index
+                </label>
+              </div>
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiText euiText--medium"
+                  id="random_html_id"
+                >
+                  <p
+                    class="enabled"
+                  >
+                    Yes
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="euiFlexItem"
           >
@@ -862,6 +896,40 @@ exports[`<AdditionalSettings /> spec renders the component in edit mode (with ID
               </div>
             </div>
           </div>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiFormRow"
+              id="random_html_id-row"
+              style="width: 250px;"
+            >
+              <div
+                class="euiFormRow__labelWrapper"
+              >
+                <label
+                  class="euiFormLabel euiFormRow__label"
+                  for="random_html_id"
+                >
+                  Flatten custom result index
+                </label>
+              </div>
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiText euiText--medium"
+                  id="random_html_id"
+                >
+                  <p
+                    class="enabled"
+                  >
+                    Yes
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="euiFlexItem"
           >