[ML] basic range number support

elastic · Jun 1, 2020 · a47d189 · a47d189
1 parent f4f441c
commit a47d189
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 23 deletions.
diff --git a/...reate_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx b/...reate_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 (
-    <EuiFormRow
-      label={
-        <FormattedMessage
-          id="xpack.transform.agg.popoverForm.filerAgg.term.valueLabel"
-          defaultMessage="Value"
-        />
-      }
-    >
-      <EuiComboBox
-        fullWidth
-        singleSelection={{ asPlainText: true }}
-        options={[]}
-        selectedOptions={[]}
-        isClearable={false}
-        data-test-subj="filterRangeValueSelection"
-      />
-    </EuiFormRow>
+    <>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.transform.agg.popoverForm.filerAgg.range.greaterThanLabel"
+                defaultMessage="Greater than"
+              />
+            }
+          >
+            <EuiFieldNumber
+              value={greaterThan}
+              onChange={(e) => {
+                onChange({
+                  config: {
+                    ...config,
+                    gt: e.target.value === '' ? undefined : Number(e.target.value),
+                  },
+                });
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.transform.agg.popoverForm.filerAgg.range.lessThanLabel"
+                defaultMessage="Less than"
+              />
+            }
+          >
+            <EuiFieldNumber
+              value={lessThan}
+              onChange={(e) => {
+                onChange({
+                  config: {
+                    ...config,
+                    lt: e.target.value === '' ? undefined : Number(e.target.value),
+                  },
+                });
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
   );
 };
diff --git a/...m/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts b/...m/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts
@@ -92,8 +92,19 @@ export function getFilterAggTypeConfig(
     case FILTERS.RANGE:
       return {
         FilterAggFormComponent: FilterRangeForm,
-        getEsAggConfig() {
-          return {};
+        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/...rm/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts b/...rm/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;