Add Enable Flattened custom result index checkbox (#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> (cherry picked from commit d220c73)
opensearch-project · Aug 7, 2024 · 58c0669 · 58c0669
1 parent eeba69a
commit 58c0669
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"
  >