[Rollups] Support date fields in Metrics step. (#26450) (#26580)

- Whitelist max, min, and value_count for date fields.
- Move metric types into flex items which will wrap on narrow screens.

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js

@@ -193,6 +193,7 @@ export class JobCreateUi extends Component {
 
       const formattedNumericFields = formatFields(numericFields, 'numeric');
       const formattedKeywordFields = formatFields(keywordFields, 'keyword');
+      const formattedDateFields = formatFields(indexPatternDateFields, 'date');
 
       function sortFields(a, b) {
         const nameA = a.name.toUpperCase();
@@ -215,7 +216,11 @@ export class JobCreateUi extends Component {
       ].sort(sortFields);
 
       const indexPatternHistogramFields = [ ...formattedNumericFields ].sort(sortFields);
-      const indexPatternMetricsFields = [ ...formattedNumericFields ].sort(sortFields);
+
+      const indexPatternMetricsFields = [
+        ...formattedNumericFields,
+        ...formattedDateFields,
+      ].sort(sortFields);
 
       this.setState({
         indexPatternAsyncErrors,

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js

@@ -31,6 +31,22 @@ import {
   StepError,
 } from './components';
 
+const whiteListedMetricByFieldType = {
+  numeric: {
+    avg: true,
+    max: true,
+    min: true,
+    sum: true,
+    value_count: true,
+  },
+
+  date: {
+    max: true,
+    min: true,
+    value_count: true,
+  },
+};
+
 export class StepMetricsUi extends Component {
   static propTypes = {
     fields: PropTypes.object.isRequired,
@@ -47,12 +63,18 @@ export class StepMetricsUi extends Component {
       field: 'name',
       name: 'Field',
       sortable: true,
+      width: '240px',
+    }, {
+      field: 'type',
+      name: 'Type',
+      truncateText: true,
+      sortable: true,
+      width: '100px',
     }];
 
     const metricTypesConfig = [
       {
         type: 'avg',
-        name: '',
         label: (
           <FormattedMessage
             id="xpack.rollupJobs.create.stepMetrics.checkboxAverageLabel"
@@ -61,7 +83,6 @@ export class StepMetricsUi extends Component {
         ),
       }, {
         type: 'max',
-        name: '',
         label: (
           <FormattedMessage
             id="xpack.rollupJobs.create.stepMetrics.checkboxMaxLabel"
@@ -70,7 +91,6 @@ export class StepMetricsUi extends Component {
         ),
       }, {
         type: 'min',
-        name: '',
         label: (
           <FormattedMessage
             id="xpack.rollupJobs.create.stepMetrics.checkboxMinLabel"
@@ -79,7 +99,6 @@ export class StepMetricsUi extends Component {
         ),
       }, {
         type: 'sum',
-        name: '',
         label: (
           <FormattedMessage
             id="xpack.rollupJobs.create.stepMetrics.checkboxSumLabel"
@@ -88,32 +107,50 @@ export class StepMetricsUi extends Component {
         ),
       }, {
         type: 'value_count',
-        name: '',
         label: (
           <FormattedMessage
             id="xpack.rollupJobs.create.stepMetrics.checkboxValueCountLabel"
             defaultMessage="Value count"
           />
         ),
-      }];
+      },
+    ];
 
-    const metricTypeColumns = metricTypesConfig.map(({ type, name, label }) => ({
-      name,
-      render: ({ name: fieldName, types }) => {
-        const isSelected = types.includes(type);
+    this.listColumns = this.chooserColumns.concat({
+      type: 'metrics',
+      name: 'Metrics',
+      render: ({ name: fieldName, type: fieldType, types }) => {
+        const checkboxes = metricTypesConfig.map(({ type, label }) => {
+          const isAllowed = whiteListedMetricByFieldType[fieldType][type];
+
+          if (!isAllowed) {
+            return;
+          }
+
+          const isSelected = types.includes(type);
+
+          return (
+            <EuiFlexItem
+              grow={false}
+              key={`${fieldName}-${type}-checkbox`}
+            >
+              <EuiCheckbox
+                id={`${fieldName}-${type}-checkbox`}
+                label={label}
+                checked={isSelected}
+                onChange={() => this.setMetric(fieldName, type, !isSelected)}
+              />
+            </EuiFlexItem>
+          );
+        }).filter(checkbox => checkbox !== undefined);
 
         return (
-          <EuiCheckbox
-            id={`${fieldName}-${type}-checkbox`}
-            label={label}
-            checked={isSelected}
-            onChange={() => this.setMetric(fieldName, type, !isSelected)}
-          />
+          <EuiFlexGroup wrap gutterSize="m">
+            {checkboxes}
+          </EuiFlexGroup>
         );
       },
-    }));
-
-    this.listColumns = this.chooserColumns.concat(metricTypeColumns);
+    });
   }
 
   onSelectField = (field) => {
@@ -123,7 +160,7 @@ export class StepMetricsUi extends Component {
     } = this.props;
 
     const newMetrics = metrics.concat({
-      name: field.name,
+      ...field,
       types: [],
     });