Skip to content

Commit d6311a3

Browse files
jackiehanyangjackiehanyang
committed
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>
1 parent 2acb94a commit d6311a3

File tree

15 files changed

+322
-21
lines changed

15 files changed

+322
-21
lines changed

‎public/models/interfaces.ts

+1
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ export type Detector = {
194194
resultIndexMinAge?: number;
195195
resultIndexMinSize?: number;
196196
resultIndexTtl?: number;
197+
flattenCustomResultIndex?: boolean;
197198
filterQuery: { [key: string]: any };
198199
featureAttributes: FeatureAttributes[];
199200
windowDelay: { period: Schedule };

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

+59-16
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface CustomResultIndexProps {
4848
function CustomResultIndex(props: CustomResultIndexProps) {
4949
const [enabled, setEnabled] = useState<boolean>(!!props.resultIndex);
5050
const [customResultIndexConditionsEnabled, setCustomResultIndexConditionsEnabled] = useState<boolean>(true);
51+
const [isDisabled, setIsDisabled] = useState(false);
5152
const customResultIndexMinAge = get(props.formikProps, 'values.resultIndexMinAge');
5253
const customResultIndexMinSize = get(props.formikProps, 'values.resultIndexMinSize');
5354
const customResultIndexTTL = get(props.formikProps, 'values.resultIndexTtl');
@@ -66,6 +67,24 @@ function CustomResultIndex(props: CustomResultIndexProps) {
6667
}
6768
},[customResultIndexConditionsEnabled])
6869

70+
useEffect(() => {
71+
if (props.isEdit && !get(props.formikProps, 'values.flattenCustomResultIndex')) {
72+
setIsDisabled(true);
73+
} else {
74+
setIsDisabled(false);
75+
}
76+
}, [props.isEdit]);
77+
78+
const hintTextStyle = {
79+
color: '#69707d',
80+
fontSize: '12px',
81+
lineHeight: '16px',
82+
fontWeight: 'normal',
83+
fontFamily: 'Helvetica, sans-serif',
84+
textAlign: 'left',
85+
width: '400px',
86+
};
87+
6988
return (
7089
<ContentPanel
7190
title={
@@ -136,25 +155,49 @@ function CustomResultIndex(props: CustomResultIndexProps) {
136155
</EuiCompressedFormRow>
137156
</EuiFlexItem>
138157
) : null}
139-
140-
{enabled ? (
141-
<EuiFlexItem>
142-
<EuiCompressedCheckbox
143-
id={'resultIndexConditionCheckbox'}
144-
label="Enable custom result index lifecycle management"
145-
checked={customResultIndexConditionsEnabled}
146-
onChange={() => {
147-
setCustomResultIndexConditionsEnabled(!customResultIndexConditionsEnabled);
148-
}}
149-
/>
150-
</EuiFlexItem>
151-
) : null}
152158
</EuiFlexGroup>
153159
)}
154160
</Field>
155161

156-
{ (enabled && customResultIndexConditionsEnabled) ? (<Field
157-
name="resultIndexMinAge"
162+
<EuiFlexGroup direction="column">
163+
<EuiFlexItem>
164+
{ enabled ? (
165+
<Field
166+
name="flattenCustomResultIndex">
167+
{({ field, form }: FieldProps) => (
168+
<EuiFlexGroup>
169+
<EuiFlexItem>
170+
<EuiCompressedCheckbox
171+
id={'flattenCustomResultIndex'}
172+
label="Enable flattened custom result index"
173+
checked={field.value ? field.value : get(props.formikProps, 'values.flattenCustomResultIndex')}
174+
disabled={isDisabled}
175+
{...field}
176+
/>
177+
<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>
178+
</EuiFlexItem>
179+
</EuiFlexGroup>
180+
)}
181+
</Field>) : null}
182+
</EuiFlexItem>
183+
<EuiFlexItem>
184+
{enabled ? (
185+
<EuiFlexItem>
186+
<EuiCompressedCheckbox
187+
id={'resultIndexConditionCheckbox'}
188+
label="Enable custom result index lifecycle management"
189+
checked={customResultIndexConditionsEnabled}
190+
onChange={() => {
191+
setCustomResultIndexConditionsEnabled(!customResultIndexConditionsEnabled);
192+
}}
193+
/>
194+
</EuiFlexItem>
195+
) : null}
196+
</EuiFlexItem>
197+
</EuiFlexGroup>
198+
199+
{ (enabled && customResultIndexConditionsEnabled) ? (<Field
200+
name="resultIndexMinAge"
158201
validate={(enabled && customResultIndexConditionsEnabled) ? validateEmptyOrPositiveInteger : null}
159202
>
160203
{({ field, form }: FieldProps) => (
@@ -285,4 +328,4 @@ function CustomResultIndex(props: CustomResultIndexProps) {
285328
);
286329
}
287330

288-
export default CustomResultIndex;
331+
export default CustomResultIndex;

‎public/pages/DefineDetector/containers/DefineDetector.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
229229
formikProps.setFieldTouched('resultIndexMinAge');
230230
formikProps.setFieldTouched('resultIndexMinSize');
231231
formikProps.setFieldTouched('resultIndexTtl');
232+
formikProps.setFieldTouched('flattenCustomResultIndex');
232233
formikProps.validateForm().then((errors) => {
233234
if (isEmpty(errors)) {
234235
if (props.isEdit) {

‎public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap

+30
Original file line numberDiff line numberDiff line change
@@ -1080,6 +1080,16 @@ exports[`<DefineDetector /> Full creating detector definition renders the compon
10801080
</div>
10811081
</div>
10821082
</div>
1083+
<div
1084+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
1085+
>
1086+
<div
1087+
class="euiFlexItem"
1088+
/>
1089+
<div
1090+
class="euiFlexItem"
1091+
/>
1092+
</div>
10831093
</div>
10841094
</div>
10851095
</div>
@@ -2166,6 +2176,16 @@ exports[`<DefineDetector /> empty creating detector definition renders the compo
21662176
</div>
21672177
</div>
21682178
</div>
2179+
<div
2180+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
2181+
>
2182+
<div
2183+
class="euiFlexItem"
2184+
/>
2185+
<div
2186+
class="euiFlexItem"
2187+
/>
2188+
</div>
21692189
</div>
21702190
</div>
21712191
</div>
@@ -3253,6 +3273,16 @@ exports[`<DefineDetector /> empty editing detector definition renders the compon
32533273
</div>
32543274
</div>
32553275
</div>
3276+
<div
3277+
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
3278+
>
3279+
<div
3280+
class="euiFlexItem"
3281+
/>
3282+
<div
3283+
class="euiFlexItem"
3284+
/>
3285+
</div>
32563286
</div>
32573287
</div>
32583288
</div>

‎public/pages/DefineDetector/models/interfaces.ts

+1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,6 @@ export interface DetectorDefinitionFormikValues {
2525
resultIndexMinAge?: number | string;
2626
resultIndexMinSize?: number | string;
2727
resultIndexTtl?:number | string;
28+
flattenCustomResultIndex?: boolean;
2829
clusters?: any[];
2930
}

‎public/pages/DefineDetector/utils/__tests__/helpers.test.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ describe('detectorDefinitionToFormik', () => {
4444
resultIndexMinAge: randomDetector.resultIndexMinAge,
4545
resultIndexMinSize: randomDetector.resultIndexMinSize,
4646
resultIndexTtl: randomDetector.resultIndexTtl,
47+
flattenCustomResultIndex: randomDetector.flattenCustomResultIndex,
4748
});
4849
});
4950
test('should return if detector does not have metadata', () => {
@@ -64,6 +65,7 @@ describe('detectorDefinitionToFormik', () => {
6465
resultIndexMinAge: randomDetector.resultIndexMinAge,
6566
resultIndexMinSize: randomDetector.resultIndexMinSize,
6667
resultIndexTtl: randomDetector.resultIndexTtl,
68+
flattenCustomResultIndex: randomDetector.flattenCustomResultIndex,
6769
});
6870
});
6971
test("upgrade old detector's filters to include filter type", () => {

‎public/pages/DefineDetector/utils/constants.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,6 @@ export const INITIAL_DETECTOR_DEFINITION_VALUES: DetectorDefinitionFormikValues
4646
resultIndex: undefined,
4747
resultIndexMinAge: 7,
4848
resultIndexMinSize: 51200,
49-
resultIndexTtl: 60
49+
resultIndexTtl: 60,
50+
flattenCustomResultIndex: false,
5051
};

‎public/pages/DefineDetector/utils/helpers.ts

+2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export function detectorDefinitionToFormik(
4848
resultIndexMinAge: get(ad, 'resultIndexMinAge', undefined),
4949
resultIndexMinSize:get(ad, 'resultIndexMinSize', undefined),
5050
resultIndexTtl: get(ad, 'resultIndexTtl', undefined),
51+
flattenCustomResultIndex: get(ad, 'flattenCustomResultIndex', false),
5152
};
5253
}
5354

@@ -125,6 +126,7 @@ export function formikToDetectorDefinition(
125126
resultIndexMinAge: values.resultIndexMinAge,
126127
resultIndexMinSize: values.resultIndexMinSize,
127128
resultIndexTtl: values.resultIndexTtl,
129+
flattenCustomResultIndex: values.flattenCustomResultIndex,
128130
} as Detector;
129131

130132
return detectorBody;

‎public/pages/DetectorConfig/containers/__tests__/__snapshots__/DetectorConfig.test.tsx.snap

+68
Original file line numberDiff line numberDiff line change
@@ -1936,6 +1936,40 @@ exports[`<DetectorConfig /> spec renders the component 1`] = `
19361936
class="euiFormRow euiFormRow--compressed"
19371937
id="random_html_id-row"
19381938
style="width: 250px;"
1939+
>
1940+
<div
1941+
class="euiFormRow__labelWrapper"
1942+
>
1943+
<label
1944+
class="euiFormLabel euiFormRow__label"
1945+
for="random_html_id"
1946+
>
1947+
Flatten custom result index
1948+
</label>
1949+
</div>
1950+
<div
1951+
class="euiFormRow__fieldWrapper"
1952+
>
1953+
<div
1954+
class="euiText euiText--medium"
1955+
id="random_html_id"
1956+
>
1957+
<p
1958+
class="enabled"
1959+
>
1960+
Yes
1961+
</p>
1962+
</div>
1963+
</div>
1964+
</div>
1965+
</div>
1966+
<div
1967+
class="euiFlexItem"
1968+
>
1969+
<div
1970+
class="euiFormRow"
1971+
id="random_html_id-row"
1972+
style="width: 250px;"
19391973
>
19401974
<div
19411975
class="euiFormRow__labelWrapper"
@@ -3345,6 +3379,40 @@ exports[`<DetectorConfig /> spec renders the component with 2 custom and 1 simpl
33453379
class="euiFormRow euiFormRow--compressed"
33463380
id="random_html_id-row"
33473381
style="width: 250px;"
3382+
>
3383+
<div
3384+
class="euiFormRow__labelWrapper"
3385+
>
3386+
<label
3387+
class="euiFormLabel euiFormRow__label"
3388+
for="random_html_id"
3389+
>
3390+
Flatten custom result index
3391+
</label>
3392+
</div>
3393+
<div
3394+
class="euiFormRow__fieldWrapper"
3395+
>
3396+
<div
3397+
class="euiText euiText--medium"
3398+
id="random_html_id"
3399+
>
3400+
<p
3401+
class="enabled"
3402+
>
3403+
Yes
3404+
</p>
3405+
</div>
3406+
</div>
3407+
</div>
3408+
</div>
3409+
<div
3410+
class="euiFlexItem"
3411+
>
3412+
<div
3413+
class="euiFormRow"
3414+
id="random_html_id-row"
3415+
style="width: 250px;"
33483416
>
33493417
<div
33503418
class="euiFormRow__labelWrapper"

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ export const DetectorDefinitionFields = (
157157
const minSize = minSizeValue === undefined ? '-' : minSizeValue + ' MB';
158158
const ttlValue = get(props, 'detector.resultIndexTtl', undefined);
159159
const ttl = (ttlValue === undefined) ? '-' : ttlValue + " Days";
160+
const flattenCustomResultIndex = get(props, 'detector.flattenCustomResultIndex', undefined);
161+
const flatten = (flattenCustomResultIndex === undefined) ? '-' : flattenCustomResultIndex ? 'Yes' : 'No';
160162

161163
const getDataConnectionsDisplay = (indices: string[]) => {
162164
if (indices.length === 0) return '-';
@@ -263,6 +265,12 @@ export const DetectorDefinitionFields = (
263265
description={get(props, 'detector.resultIndex', '-')}
264266
/>
265267
</EuiFlexItem>
268+
<EuiFlexItem>
269+
<ConfigCell
270+
title="Flatten custom result index"
271+
description={flatten}
272+
/>
273+
</EuiFlexItem>
266274
<EuiFlexItem>
267275
<ConfigCell
268276
title="Custom result index min age"
@@ -297,4 +305,4 @@ export const DetectorDefinitionFields = (
297305
) : null}
298306
</React.Fragment>
299307
);
300-
};
308+
};

‎public/pages/ReviewAndCreate/components/__tests__/DetectorDefinitionFields.test.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const getTestDetectorWithDifferentIndices = (indices: string[]) => {
7070
resultIndexMinAge: 7,
7171
resultIndexMinSize: 51200,
7272
resultIndexTtl: 60,
73+
flattenCustomResultIndex: true,
7374
} as Detector;
7475
}
7576
const onEditDetectorDefinition = jest.fn();
@@ -116,6 +117,7 @@ describe('<AdditionalSettings /> spec', () => {
116117
getByText('test-timefield');
117118
getByText('1 Minutes');
118119
getByText('opensearch-ad-plugin-result-test');
120+
getByText('Yes')
119121
getByText('7 Days');
120122
getByText('51200 MB');
121123
getByText('60 Days');
@@ -135,6 +137,7 @@ describe('<AdditionalSettings /> spec', () => {
135137
getByText('test-timefield');
136138
getByText('1 Minutes');
137139
getByText('opensearch-ad-plugin-result-test');
140+
getByText('Yes')
138141
getByText('7 Days');
139142
getByText('51200 MB');
140143
getByText('60 Days');
@@ -155,4 +158,4 @@ describe('<AdditionalSettings /> spec', () => {
155158
getByText('1 Minutes');
156159
expect(queryByText('test-id')).not.toBeNull();
157160
});
158-
});
161+
});

0 commit comments

Comments
 (0)