[ML] support helper text for aggs item

elastic · Jun 4, 2020 · 7cf1833 · 7cf1833
1 parent e2ce842
commit 7cf1833
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 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
@@ -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/...sform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx b/...sform/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,13 +39,26 @@ 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">
         <span className="eui-textTruncate" data-test-subj="transformAggregationEntryLabel">
           {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/...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
@@ -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/...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
@@ -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 */