[TSVB] Add support for histogram type (#68837)

* [TSVB] Add support for histogram type

* Merge branch 'master' of github.com:elastic/kibana into issue-52426-tsvb-support-for-histograms

* Adding support to filter ratio; updating test

* Limist aggs for filter_ratio and histogram fields; add test for AggSelect; Fixes #70984

* Ensure only compatible fields are displayed for filter ratio metric aggs

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/common/metric_types.js

@@ -27,6 +27,9 @@ export const METRIC_TYPES = {
   VARIANCE: 'variance',
   SUM_OF_SQUARES: 'sum_of_squares',
   CARDINALITY: 'cardinality',
+  VALUE_COUNT: 'value_count',
+  AVERAGE: 'avg',
+  SUM: 'sum',
 };
 
 export const EXTENDED_STATS_TYPES = [

src/plugins/vis_type_timeseries/public/application/components/aggs/agg_select.test.tsx

@@ -0,0 +1,184 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { AggSelect } from './agg_select';
+import { METRIC, SERIES } from '../../../test_utils';
+import { EuiComboBox } from '@elastic/eui';
+
+describe('TSVB AggSelect', () => {
+  const setup = (panelType: string, value: string) => {
+    const metric = {
+      ...METRIC,
+      type: 'filter_ratio',
+      field: 'histogram_value',
+    };
+    const series = { ...SERIES, metrics: [metric] };
+
+    const wrapper = mountWithIntl(
+      <div>
+        <AggSelect
+          id="test"
+          onChange={jest.fn()}
+          panelType={panelType}
+          value={value}
+          siblings={series.metrics}
+        />
+      </div>
+    );
+    return wrapper;
+  };
+
+  it('should only display filter ratio compattible aggs', () => {
+    const wrapper = setup('filter_ratio', 'avg');
+    expect(wrapper.find(EuiComboBox).props().options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "label": "Average",
+          "value": "avg",
+        },
+        Object {
+          "label": "Cardinality",
+          "value": "cardinality",
+        },
+        Object {
+          "label": "Count",
+          "value": "count",
+        },
+        Object {
+          "label": "Positive Rate",
+          "value": "positive_rate",
+        },
+        Object {
+          "label": "Max",
+          "value": "max",
+        },
+        Object {
+          "label": "Min",
+          "value": "min",
+        },
+        Object {
+          "label": "Sum",
+          "value": "sum",
+        },
+        Object {
+          "label": "Value Count",
+          "value": "value_count",
+        },
+      ]
+    `);
+  });
+
+  it('should only display histogram compattible aggs', () => {
+    const wrapper = setup('histogram', 'avg');
+    expect(wrapper.find(EuiComboBox).props().options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "label": "Average",
+          "value": "avg",
+        },
+        Object {
+          "label": "Count",
+          "value": "count",
+        },
+        Object {
+          "label": "Sum",
+          "value": "sum",
+        },
+        Object {
+          "label": "Value Count",
+          "value": "value_count",
+        },
+      ]
+    `);
+  });
+
+  it('should only display metrics compattible aggs', () => {
+    const wrapper = setup('metrics', 'avg');
+    expect(wrapper.find(EuiComboBox).props().options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "label": "Average",
+          "value": "avg",
+        },
+        Object {
+          "label": "Cardinality",
+          "value": "cardinality",
+        },
+        Object {
+          "label": "Count",
+          "value": "count",
+        },
+        Object {
+          "label": "Filter Ratio",
+          "value": "filter_ratio",
+        },
+        Object {
+          "label": "Positive Rate",
+          "value": "positive_rate",
+        },
+        Object {
+          "label": "Max",
+          "value": "max",
+        },
+        Object {
+          "label": "Min",
+          "value": "min",
+        },
+        Object {
+          "label": "Percentile",
+          "value": "percentile",
+        },
+        Object {
+          "label": "Percentile Rank",
+          "value": "percentile_rank",
+        },
+        Object {
+          "label": "Static Value",
+          "value": "static",
+        },
+        Object {
+          "label": "Std. Deviation",
+          "value": "std_deviation",
+        },
+        Object {
+          "label": "Sum",
+          "value": "sum",
+        },
+        Object {
+          "label": "Sum of Squares",
+          "value": "sum_of_squares",
+        },
+        Object {
+          "label": "Top Hit",
+          "value": "top_hit",
+        },
+        Object {
+          "label": "Value Count",
+          "value": "value_count",
+        },
+        Object {
+          "label": "Variance",
+          "value": "variance",
+        },
+      ]
+    `);
+  });
+});

src/plugins/vis_type_timeseries/public/application/components/aggs/agg_select.tsx

@@ -225,6 +225,19 @@ const specialAggs: AggSelectOption[] = [
   },
 ];
 
+const FILTER_RATIO_AGGS = [
+  'avg',
+  'cardinality',
+  'count',
+  'positive_rate',
+  'max',
+  'min',
+  'sum',
+  'value_count',
+];
+
+const HISTOGRAM_AGGS = ['avg', 'count', 'sum', 'value_count'];
+
 const allAggOptions = [...metricAggs, ...pipelineAggs, ...siblingAggs, ...specialAggs];
 
 function filterByPanelType(panelType: string) {
@@ -257,6 +270,10 @@ export function AggSelect(props: AggSelectUiProps) {
   let options: EuiComboBoxOptionOption[];
   if (panelType === 'metrics') {
     options = metricAggs;
+  } else if (panelType === 'filter_ratio') {
+    options = metricAggs.filter((m) => FILTER_RATIO_AGGS.includes(`${m.value}`));
+  } else if (panelType === 'histogram') {
+    options = metricAggs.filter((m) => HISTOGRAM_AGGS.includes(`${m.value}`));
   } else {
     const disableSiblingAggs = (agg: AggSelectOption) => ({
       ...agg,

src/plugins/vis_type_timeseries/public/application/components/aggs/filter_ratio.js

@@ -36,7 +36,15 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { KBN_FIELD_TYPES } from '../../../../../../plugins/data/public';
-import { METRIC_TYPES } from '../../../../../../plugins/vis_type_timeseries/common/metric_types';
+import { getSupportedFieldsByMetricType } from '../lib/get_supported_fields_by_metric_type';
+
+const isFieldHistogram = (fields, indexPattern, field) => {
+  const indexFields = fields[indexPattern];
+  if (!indexFields) return false;
+  const fieldObject = indexFields.find((f) => f.name === field);
+  if (!fieldObject) return false;
+  return fieldObject.type === KBN_FIELD_TYPES.HISTOGRAM;
+};
 
 export const FilterRatioAgg = (props) => {
   const { series, fields, panel } = props;
@@ -56,9 +64,6 @@ export const FilterRatioAgg = (props) => {
   const model = { ...defaults, ...props.model };
   const htmlId = htmlIdGenerator();
 
-  const restrictFields =
-    model.metric_agg === METRIC_TYPES.CARDINALITY ? [] : [KBN_FIELD_TYPES.NUMBER];
-
   return (
     <AggRow
       disableDelete={props.disableDelete}
@@ -129,7 +134,9 @@ export const FilterRatioAgg = (props) => {
           <AggSelect
             id={htmlId('metric')}
             siblings={props.siblings}
-            panelType="metrics"
+            panelType={
+              isFieldHistogram(fields, indexPattern, model.field) ? 'histogram' : 'filter_ratio'
+            }
             value={model.metric_agg}
             onChange={handleSelectChange('metric_agg')}
           />
@@ -149,7 +156,7 @@ export const FilterRatioAgg = (props) => {
               <FieldSelect
                 fields={fields}
                 type={model.metric_agg}
-                restrict={restrictFields}
+                restrict={getSupportedFieldsByMetricType(model.metric_agg)}
                 indexPattern={indexPattern}
                 value={model.field}
                 onChange={handleSelectChange('field')}