Fix percentiles for table in TSVB (#32084)

* Fix percentiles for table in TSVB * Disable add percentiles in table
elastic · Mar 1, 2019 · f2ab504 · f2ab504
1 parent c2f89f4
commit f2ab504
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 37 deletions.
diff --git a/src/legacy/core_plugins/metrics/public/components/aggs/percentile.js b/src/legacy/core_plugins/metrics/public/components/aggs/percentile.js
@@ -46,11 +46,6 @@ const newPercentile = (opts) => {
 
 class PercentilesUi extends Component {
 
-  constructor(props) {
-    super(props);
-    this.renderRow = this.renderRow.bind(this);
-  }
-
   handleTextChange(item, name) {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
@@ -60,12 +55,29 @@ class PercentilesUi extends Component {
     };
   }
 
-  renderRow(row, i, items) {
+  renderRow = (row, i, items) => {
     const defaults = { value: '', percentile: '', shade: '' };
     const model = { ...defaults, ...row };
+    const { intl, panel } = this.props;
+
+    const percentileFieldNumber = (
+      <EuiFlexItem grow={false}>
+        <EuiFieldNumber
+          aria-label={intl.formatMessage({ id: 'tsvb.percentile.percentileAriaLabel', defaultMessage: 'Percentile' })}
+          placeholder={intl.formatMessage({ id: 'tsvb.percentile.percentilePlaceholder', defaultMessage: 'Percentile' })}
+          step={1}
+          onChange={this.handleTextChange(model, 'value')}
+          value={Number(model.value)}
+        />
+      </EuiFlexItem>
+    );
+
+    if (panel.type === 'table') {
+      return percentileFieldNumber;
+    }
+
     const handleAdd = collectionActions.handleAdd.bind(null, this.props, newPercentile);
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
-    const { intl } = this.props;
     const modeOptions = [
       {
         label: intl.formatMessage({ id: 'tsvb.percentile.modeOptions.lineLabel', defaultMessage: 'Line' }),
@@ -88,15 +100,8 @@ class PercentilesUi extends Component {
     return  (
       <EuiFlexItem key={model.id}>
         <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
-          <EuiFlexItem grow={false}>
-            <EuiFieldNumber
-              aria-label={intl.formatMessage({ id: 'tsvb.percentile.percentileAriaLabel', defaultMessage: 'Percentile' })}
-              placeholder={intl.formatMessage({ id: 'tsvb.percentile.percentilePlaceholder', defaultMessage: 'Percentile' })}
-              step={1}
-              onChange={this.handleTextChange(model, 'value')}
-              value={Number(model.value)}
-            />
-          </EuiFlexItem>
+
+          { percentileFieldNumber }
 
           <EuiFlexItem grow={false}>
             <EuiFormLabel style={labelStyle} htmlFor={htmlId('mode')}>
@@ -167,10 +172,15 @@ class PercentilesUi extends Component {
   }
 
   render() {
-    const { model, name } = this.props;
+    const { model, name, panel } = this.props;
     if (!model[name]) return (<div/>);
+    let rows;
+    if (panel.type === 'table') {
+      rows = this.renderRow(_.last(model[name]));
+    } else {
+      rows = model[name].map(this.renderRow);
+    }
 
-    const rows = model[name].map(this.renderRow);
     return (
       <EuiFlexGroup direction="column" gutterSize="s">
         { rows }
@@ -186,6 +196,7 @@ PercentilesUi.defaultProps = {
 PercentilesUi.propTypes = {
   name: PropTypes.string,
   model: PropTypes.object,
+  panel: PropTypes.object,
   onChange: PropTypes.func
 };
 
@@ -259,6 +270,7 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
           onChange={handleChange}
           name="percentiles"
           model={model}
+          panel={panel}
         />
 
       </AggRow>

diff --git a/src/legacy/core_plugins/metrics/public/components/vis_types/table/series.js b/src/legacy/core_plugins/metrics/public/components/vis_types/table/series.js
@@ -28,7 +28,7 @@ import createAggRowRender from '../../lib/create_agg_row_render';
 import { createUpDownHandler } from '../../lib/sort_keyhandler';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-function TopNSeries(props) {
+function TableSeries(props) {
   const {
     model,
     onAdd,
@@ -177,7 +177,7 @@ function TopNSeries(props) {
   );
 }
 
-TopNSeries.propTypes = {
+TableSeries.propTypes = {
   className: PropTypes.string,
   disableAdd: PropTypes.bool,
   disableDelete: PropTypes.bool,
@@ -201,4 +201,4 @@ TopNSeries.propTypes = {
   visible: PropTypes.bool
 };
 
-export default injectI18n(TopNSeries);
+export default injectI18n(TableSeries);
diff --git a/src/legacy/core_plugins/metrics/public/components/vis_types/table/vis.js b/src/legacy/core_plugins/metrics/public/components/vis_types/table/vis.js
@@ -41,6 +41,12 @@ function getColor(rules, colorKey, value) {
   return color;
 }
 
+const getPercentileLabel = (metric, item) => {
+  const { value } = _.last(metric.percentiles);
+  const label = calculateLabel(metric, item.metrics);
+  return `${label}, ${value || 0}`;
+};
+
 class TableVis extends Component {
 
   constructor(props) {
@@ -95,7 +101,9 @@ class TableVis extends Component {
     });
     const columns  = model.series.map(item => {
       const metric = _.last(item.metrics);
-      const label = item.label || calculateLabel(metric, item.metrics);
+      const label = metric.type === 'percentile' ?
+        getPercentileLabel(metric, item) :
+        item.label || calculateLabel(metric, item.metrics);
       const handleClick = () => {
         if (!isSortable(metric)) return;
         let order;

diff --git a/src/legacy/core_plugins/metrics/server/lib/vis_data/response_processors/table/index.js b/src/legacy/core_plugins/metrics/server/lib/vis_data/response_processors/table/index.js
@@ -21,11 +21,12 @@
 import stdMetric from './std_metric';
 import stdSibling from './std_sibling';
 import seriesAgg from './series_agg';
+import percentile from './percentile';
 import { math } from './math';
 import { dropLastBucketFn } from './drop_last_bucket';
 
 export default [
-  // percentile,
+  percentile,
   stdMetric,
   stdSibling,
   math,

diff --git a/src/legacy/core_plugins/metrics/server/lib/vis_data/response_processors/table/percentile.js b/src/legacy/core_plugins/metrics/server/lib/vis_data/response_processors/table/percentile.js
@@ -16,28 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import _ from 'lodash';
-import getAggValue from '../../helpers/get_agg_value';
+import { last } from 'lodash';
 import getSplits from '../../helpers/get_splits';
 import getLastMetric from '../../helpers/get_last_metric';
-export default function percentile(resp, panel, series) {
+export default function percentile(bucket, panel, series) {
   return next => results => {
     const metric = getLastMetric(series);
     if (metric.type !== 'percentile') return next(results);
 
-    getSplits(resp, panel, series).forEach((split) => {
-      const label = (split.label) + ` (${series.value})`;
-      const data = split.timeseries.buckets.map(bucket => {
-        const m = _.assign({}, metric, { percent: series.value });
-        return [bucket.key, getAggValue(bucket, m)];
-      });
+    const fakeResp = { aggregations: bucket };
+
+    getSplits(fakeResp, panel, series).forEach(split => {
+
+      // table allows only one percentile in a series (the last one will be chosen in case of several)
+      const percentile = last(metric.percentiles);
+      let percentileKey = percentile.value;
+      if (!/\./.test(percentileKey)) {
+        percentileKey = `${percentileKey}.0`;
+      }
+
+      const data = split.timeseries.buckets.map(bucket => [bucket.key, bucket[metric.id].values[percentileKey]]);
+
       results.push({
-        id: `${percentile.id}:${split.id}`,
-        label,
-        data,
+        id: split.id,
+        data
       });
-
     });
     return next(results);
   };