From 7cf1833543ebed0d914a0501261c7952fa712340 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Thu, 4 Jun 2020 11:22:47 +0200
Subject: [PATCH] [ML] support helper text for aggs item

---
 .../transform/public/app/common/pivot_aggs.ts     |  2 ++
 .../aggregation_list/agg_label_form.tsx           | 15 ++++++++++++++-
 .../step_define/common/filter_agg/config.ts       | 13 +++++++++++++
 .../step_define/common/filter_agg/types.ts        |  2 ++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/transform/public/app/common/pivot_aggs.ts b/x-pack/plugins/transform/public/app/common/pivot_aggs.ts
index ef7c65933e9cec..d6b3fb974783d1 100644
--- a/x-pack/plugins/transform/public/app/common/pivot_aggs.ts
+++ b/x-pack/plugins/transform/public/app/common/pivot_aggs.ts
@@ -140,6 +140,8 @@ export interface PivotAggsConfigWithExtra<T> extends PivotAggsConfigWithUiBase {
   isValid: () => boolean;
   /** Provides aggregation name generated based on the configuration */
   getAggName?: () => string | undefined;
+  /** Helper text for the aggregation reflecting some configuration info */
+  helperText?: () => string | undefined;
 }
 
 interface PivotAggsConfigPercentiles extends PivotAggsConfigWithUiBase {
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx
index b9bf9c65ee91c6..a7ff943e0323f0 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx
@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiTextColor } from '@elastic/eui';
 
 import { AggName, PivotAggsConfig, PivotAggsConfigWithUiSupportDict } from '../../../../common';
 
@@ -39,6 +39,8 @@ export const AggLabelForm: React.FC<Props> = ({
     setPopoverVisibility(false);
   }
 
+  const helperText = isPivotAggsWithExtendedForm(item) && item.helperText && item.helperText();
+
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem className="transform__AggregationLabel--text">
@@ -46,6 +48,17 @@ export const AggLabelForm: React.FC<Props> = ({
           {item.aggName}
         </span>
       </EuiFlexItem>
+      {helperText && (
+        <EuiFlexItem grow={false}>
+          <EuiTextColor
+            color="subdued"
+            className="eui-textTruncate"
+            data-test-subj="transformAggHelperText"
+          >
+            {helperText}
+          </EuiTextColor>
+        </EuiFlexItem>
+      )}
       <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
         <EuiPopover
           id="transformFormPopover"
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 8345839a076d03..8602a82db8f2fe 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
@@ -66,6 +66,11 @@ export function getFilterAggConfig(
         ? this.aggConfig.aggTypeConfig.getAggName()
         : undefined;
     },
+    helperText() {
+      return this.aggConfig?.aggTypeConfig?.helperText
+        ? this.aggConfig.aggTypeConfig.helperText()
+        : undefined;
+    },
   };
 }
 
@@ -149,6 +154,14 @@ export function getFilterAggTypeConfig(
 
           return true;
         },
+        helperText() {
+          if (!this.isValid!()) return;
+          const { from, to, includeFrom, includeTo } = this.filterAggConfig!;
+
+          return `range: ${`${from !== undefined ? `${includeFrom ? '≥' : '>'} ${from}` : ''} ${
+            from !== undefined && to !== undefined ? '&' : ''
+          } ${to !== undefined ? `${includeTo ? '≤' : '<'} ${to}` : ''}`.trim()}`;
+        },
       } as FilterAggConfigRange['aggTypeConfig'];
     case FILTERS.EXISTS:
       return {
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 fc60b149564bb2..438fc135f8aa9e 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
@@ -29,6 +29,8 @@ interface FilterAggTypeConfig<U, R> {
   isValid?: () => boolean;
   /** Provides aggregation name generated based on the configuration */
   getAggName?: () => string | undefined;
+  /** Helper text for the aggregation reflecting some configuration info */
+  helperText?: () => string | undefined;
 }
 
 /** Filter agg type definition */