diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx
index bb702119a342cc..6f13658e05c2a4 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx
@@ -5,31 +5,69 @@
*/
import React from 'react';
-import { EuiComboBox, EuiFormRow } from '@elastic/eui';
+import { EuiFieldNumber, EuiFormRow, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { FilterAggConfigRange } from '../types';
/**
- * Form component for the range filter aggregation.
+ * Form component for the range filter aggregation for number type fields.
*/
-export const FilterRangeForm: FilterAggConfigRange['aggTypeConfig']['FilterAggFormComponent'] = () => {
+export const FilterRangeForm: FilterAggConfigRange['aggTypeConfig']['FilterAggFormComponent'] = ({
+ config,
+ onChange,
+}) => {
+ const greaterThan = config?.gt ?? config?.gte ?? '';
+ const lessThan = config?.lt ?? config?.lte ?? '';
+
return (
-
- }
- >
-
-
+ <>
+
+
+
+
+ }
+ >
+ {
+ onChange({
+ config: {
+ ...config,
+ gt: e.target.value === '' ? undefined : Number(e.target.value),
+ },
+ });
+ }}
+ />
+
+
+
+
+ }
+ >
+ {
+ onChange({
+ config: {
+ ...config,
+ lt: e.target.value === '' ? undefined : Number(e.target.value),
+ },
+ });
+ }}
+ />
+
+
+
+ >
);
};
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts
index 78bdbae282b900..ba175b9a73a7bc 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts
@@ -92,8 +92,20 @@ export function getFilterAggTypeConfig(
case FILTERS.RANGE:
return {
FilterAggFormComponent: FilterRangeForm,
- getEsAggConfig() {
- return {};
+ filterAggConfig: typeof config === 'object' ? Object.values(config)[0] : undefined,
+ getEsAggConfig(fieldName) {
+ if (fieldName === undefined || !this.filterAggConfig) {
+ throw new Error(`Config ${FILTERS.RANGE} is not completed`);
+ }
+ return {
+ [fieldName]: this.filterAggConfig,
+ };
+ },
+ isValid() {
+ return (
+ this.filterAggConfig &&
+ Object.values(this.filterAggConfig).filter((v) => v !== undefined).length > 0
+ );
},
} as FilterAggConfigRange['aggTypeConfig'];
case FILTERS.EXISTS:
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts
index 9d21d4b167b839..d3bf536e9eaa28 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts
@@ -42,7 +42,7 @@ export type FilterAggConfigTerm = FilterAggProps<'term', { value: string }>;
/** Filter range agg */
export type FilterAggConfigRange = FilterAggProps<
'range',
- { gt?: string; lt?: string; lte?: string; gte?: string }
+ { gt?: number; lt?: number; lte?: number; gte?: number }
>;
export type FilterAggConfigUnion = FilterAggConfigTerm | FilterAggConfigRange;