From a47d189259bfb57b7e1235b9d600eed032b0253d Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Mon, 1 Jun 2020 14:27:22 +0200
Subject: [PATCH] [ML] basic range number support

---
 .../components/filter_range_form.tsx          | 78 ++++++++++++++-----
 .../step_define/common/filter_agg/config.ts   | 15 +++-
 .../step_define/common/filter_agg/types.ts    |  2 +-
 3 files changed, 72 insertions(+), 23 deletions(-)

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 bb702119a342cc3..6f13658e05c2a43 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 (
-    <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/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 78bdbae282b9008..51e17b6b2fbd620 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,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/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 9d21d4b167b839d..d3bf536e9eaa289 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;