From 4516cb0ba111e946361d4581c9e59ec8c6658c14 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 23 Sep 2020 18:25:02 +0300
Subject: [PATCH 1/7] Add support for HDR percentiles in TSVB visualizations

Closes: #64238
---
 .../vis_type_timeseries/common/vis_schema.ts  |  1 +
 .../application/components/aggs/percentile.js | 32 +++++++++---
 .../components/aggs/percentile_hdr.tsx        | 52 +++++++++++++++++++
 .../aggs/percentile_rank/multi_value_row.tsx  | 25 ++-------
 .../aggs/percentile_rank/percentile_rank.tsx  | 51 +++++++++++++-----
 .../components/aggs/percentile_ui.js          |  2 +-
 .../server/lib/vis_data/get_series_data.js    |  2 +-
 .../lib/vis_data/helpers/bucket_transform.js  | 16 +++++-
 8 files changed, 137 insertions(+), 44 deletions(-)
 create mode 100644 src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx

diff --git a/src/plugins/vis_type_timeseries/common/vis_schema.ts b/src/plugins/vis_type_timeseries/common/vis_schema.ts
index d3d863df8617f..909c4c39025ea 100644
--- a/src/plugins/vis_type_timeseries/common/vis_schema.ts
+++ b/src/plugins/vis_type_timeseries/common/vis_schema.ts
@@ -104,6 +104,7 @@ export const metricsItems = schema.object({
       })
     )
   ),
+  numberOfSignificantValueDigits: numberOptional,
   percentiles: schema.maybe(
     schema.arrayOf(
       schema.object({
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile.js
index f12c0c8f6f465..a34b74d106492 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile.js
@@ -24,10 +24,11 @@ import { FieldSelect } from './field_select';
 import { AggRow } from './agg_row';
 import { createChangeHandler } from '../lib/create_change_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
+import { createNumberHandler } from '../lib/create_number_handler';
 import {
   htmlIdGenerator,
   EuiSpacer,
-  EuiFlexGroup,
+  EuiFlexGrid,
   EuiFlexItem,
   EuiFormLabel,
   EuiFormRow,
@@ -35,6 +36,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { KBN_FIELD_TYPES } from '../../../../../../plugins/data/public';
 import { Percentiles, newPercentile } from './percentile_ui';
+import { PercentileHdr } from './percentile_hdr';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.NUMBER, KBN_FIELD_TYPES.HISTOGRAM];
 
@@ -46,6 +48,8 @@ export function PercentileAgg(props) {
 
   const handleChange = createChangeHandler(props.onChange, model);
   const handleSelectChange = createSelectHandler(handleChange);
+  const handleNumberChange = createNumberHandler(handleChange);
+
   const indexPattern =
     (series.override_index_pattern && series.series_index_pattern) || panel.index_pattern;
 
@@ -66,7 +70,7 @@ export function PercentileAgg(props) {
       siblings={props.siblings}
       dragHandleProps={props.dragHandleProps}
     >
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGrid gutterSize="s" columns={2}>
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
             <FormattedMessage
@@ -103,11 +107,25 @@ export function PercentileAgg(props) {
             />
           </EuiFormRow>
         </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="m" />
-
-      <Percentiles onChange={handleChange} name="percentiles" model={model} panel={panel} />
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.percentile.percents"
+                defaultMessage="Percents"
+              />
+            }
+          >
+            <Percentiles onChange={handleChange} name="percentiles" model={model} panel={panel} />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <PercentileHdr
+            value={model.numberOfSignificantValueDigits}
+            onChange={handleNumberChange('numberOfSignificantValueDigits')}
+          />
+        </EuiFlexItem>
+      </EuiFlexGrid>
     </AggRow>
   );
 }
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx
new file mode 100644
index 0000000000000..8d821e4f2b8ef
--- /dev/null
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export interface PercentileHdrProps {
+  value: number | undefined;
+  onChange: () => void;
+}
+
+export const PercentileHdr = ({ value, onChange }: PercentileHdrProps) => (
+  <EuiFormRow
+    label={
+      <>
+        <FormattedMessage
+          id="visTypeTimeseries.percentileHdr.numberOfSignificantValueDigits"
+          defaultMessage="Number of significant value digits (HDR histogram)"
+        />{' '}
+        <EuiIconTip
+          position="right"
+          content={
+            <FormattedMessage
+              id="visTypeTimeseries.percentileHdr.numberOfSignificantValueDigits.hint"
+              defaultMessage="HDR Histogram (High Dynamic Range Histogram) is an alternative implementation that can be useful when calculating percentile ranks for latency measurements as it can be faster than the t-digest implementation with the trade-off of a larger memory footprint. Number of significant value digits parameter specifies the resolution of values for the histogram in number of significant digits"
+            />
+          }
+          type="questionInCircle"
+        />
+      </>
+    }
+  >
+    <EuiFieldNumber value={value || ''} onChange={onChange} />
+  </EuiFormRow>
+);
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
index ef8876a19b1a6..46d9f3a93e575 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
@@ -18,15 +18,7 @@
  */
 import React, { ChangeEvent } from 'react';
 import { get } from 'lodash';
-import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  htmlIdGenerator,
-  EuiFieldNumber,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormLabel,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { AddDeleteButtons } from '../../add_delete_buttons';
 
@@ -50,8 +42,6 @@ export const MultiValueRow = ({
   disableAdd,
   disableDelete,
 }: MultiValueRowProps) => {
-  const htmlId = htmlIdGenerator();
-
   const onFieldNumberChange = (event: ChangeEvent<HTMLInputElement>) =>
     onChange({
       ...model,
@@ -60,15 +50,7 @@ export const MultiValueRow = ({
 
   return (
     <div className="tvbAggRow__multiValueRow">
-      <EuiFlexGroup responsive={false} alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiFormLabel htmlFor={htmlId('value')}>
-            <FormattedMessage
-              id="visTypeTimeseries.multivalueRow.valueLabel"
-              defaultMessage="Value:"
-            />
-          </EuiFormLabel>
-        </EuiFlexItem>
+      <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiFieldNumber
             value={model.value === '' ? '' : Number(model.value)}
@@ -82,10 +64,11 @@ export const MultiValueRow = ({
             onDelete={() => onDelete(model)}
             disableDelete={disableDelete}
             disableAdd={disableAdd}
+            responsive={false}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer />
+      <EuiSpacer size={'s'} />
     </div>
   );
 };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
index d02a16ade2bba..9bea341bf9b2b 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
@@ -25,6 +25,9 @@ import {
   EuiFormLabel,
   EuiFormRow,
   EuiSpacer,
+  EuiFlexGrid,
+  EuiIconTip,
+  EuiFieldNumber,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AggSelect } from '../agg_select';
@@ -34,12 +37,16 @@ import { FieldSelect } from '../field_select';
 import { createChangeHandler } from '../../lib/create_change_handler';
 // @ts-ignore
 import { createSelectHandler } from '../../lib/create_select_handler';
+// @ts-ignore
+import { createNumberHandler } from '../../lib/create_number_handler';
+
 import { AggRow } from '../agg_row';
 import { PercentileRankValues } from './percentile_rank_values';
 
 import { IFieldType, KBN_FIELD_TYPES } from '../../../../../../../plugins/data/public';
 import { MetricsItemsSchema, PanelSchema, SeriesItemsSchema } from '../../../../../common/types';
 import { DragHandleProps } from '../../../../types';
+import { PercentileHdr } from '../percentile_hdr';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.NUMBER, KBN_FIELD_TYPES.HISTOGRAM];
 
@@ -67,6 +74,7 @@ export const PercentileRankAgg = (props: PercentileRankAggProps) => {
   const isTablePanel = panel.type === 'table';
   const handleChange = createChangeHandler(props.onChange, model);
   const handleSelectChange = createSelectHandler(handleChange);
+  const handleNumberChange = createNumberHandler(handleChange);
 
   const handlePercentileRankValuesChange = (values: MetricsItemsSchema['values']) => {
     handleChange({
@@ -84,7 +92,7 @@ export const PercentileRankAgg = (props: PercentileRankAggProps) => {
       siblings={props.siblings}
       dragHandleProps={props.dragHandleProps}
     >
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGrid gutterSize="s" columns={2}>
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
             <FormattedMessage
@@ -121,17 +129,36 @@ export const PercentileRankAgg = (props: PercentileRankAggProps) => {
             />
           </EuiFormRow>
         </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
-      {model.values && (
-        <PercentileRankValues
-          disableAdd={isTablePanel}
-          disableDelete={isTablePanel}
-          showOnlyLastRow={isTablePanel}
-          model={model.values}
-          onChange={handlePercentileRankValuesChange}
-        />
-      )}
+
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.percentileRank.values"
+                defaultMessage="Values"
+              />
+            }
+          >
+            <>
+              {model.values && (
+                <PercentileRankValues
+                  disableAdd={isTablePanel}
+                  disableDelete={isTablePanel}
+                  showOnlyLastRow={isTablePanel}
+                  model={model.values}
+                  onChange={handlePercentileRankValuesChange}
+                />
+              )}
+            </>
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <PercentileHdr
+            value={model.numberOfSignificantValueDigits}
+            onChange={handleNumberChange('numberOfSignificantValueDigits')}
+          />
+        </EuiFlexItem>
+      </EuiFlexGrid>
     </AggRow>
   );
 };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
index bd421248a3607..05dc1abfc12fd 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
@@ -161,7 +161,7 @@ class PercentilesUi extends Component {
             />
           </EuiFlexItem>
 
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <AddDeleteButtons
               onAdd={handleAdd}
               onDelete={handleDelete}
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
index 1eace13c2e336..9b063083df9d1 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
@@ -43,7 +43,7 @@ export async function getSeriesData(req, panel) {
       (acc, items) => acc.concat(items),
       []
     );
-
+    console.log(JSON.stringify(searches));
     const data = await searchStrategy.search(req, searches);
 
     const handleResponseBodyFn = handleResponseBody(panel);
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/bucket_transform.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/bucket_transform.js
index f033a43806312..dc2936072165e 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/bucket_transform.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/bucket_transform.js
@@ -64,6 +64,16 @@ function extendStatsBucket(bucket, metrics) {
   return body;
 }
 
+function getPercentileHdrParam(bucket) {
+  return bucket.numberOfSignificantValueDigits
+    ? {
+        hdr: {
+          number_of_significant_value_digits: bucket.numberOfSignificantValueDigits,
+        },
+      }
+    : undefined;
+}
+
 export const bucketTransform = {
   count: () => {
     return {
@@ -139,13 +149,14 @@ export const bucketTransform = {
         bucket.percentiles.filter((p) => p.percentile).map((p) => p.percentile)
       );
     }
-    const agg = {
+
+    return {
       percentiles: {
         field: bucket.field,
         percents,
+        ...getPercentileHdrParam(bucket),
       },
     };
-    return agg;
   },
 
   percentile_rank: (bucket) => {
@@ -155,6 +166,7 @@ export const bucketTransform = {
       percentile_ranks: {
         field: bucket.field,
         values: (bucket.values || []).map((value) => (isEmpty(value) ? 0 : value)),
+        ...getPercentileHdrParam(bucket),
       },
     };
   },

From 32ad8f863bb09f4650158008098394dc182fc90d Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 23 Sep 2020 18:35:31 +0300
Subject: [PATCH 2/7] remove extra console.log

---
 .../vis_type_timeseries/server/lib/vis_data/get_series_data.js   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
index 9b063083df9d1..232efc7514a5a 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
@@ -43,7 +43,6 @@ export async function getSeriesData(req, panel) {
       (acc, items) => acc.concat(items),
       []
     );
-    console.log(JSON.stringify(searches));
     const data = await searchStrategy.search(req, searches);
 
     const handleResponseBodyFn = handleResponseBody(panel);

From 1568a61974344101c439b8905f40ce6d89a1aaed Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 23 Sep 2020 20:04:11 +0300
Subject: [PATCH 3/7] fix CI

---
 .../components/aggs/percentile_rank/percentile_rank.tsx        | 3 ---
 x-pack/plugins/translations/translations/ja-JP.json            | 1 -
 x-pack/plugins/translations/translations/zh-CN.json            | 1 -
 3 files changed, 5 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
index 9bea341bf9b2b..747447d702ed7 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
@@ -20,14 +20,11 @@
 import React from 'react';
 import {
   htmlIdGenerator,
-  EuiFlexGroup,
   EuiFlexItem,
   EuiFormLabel,
   EuiFormRow,
   EuiSpacer,
   EuiFlexGrid,
-  EuiIconTip,
-  EuiFieldNumber,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AggSelect } from '../agg_select';
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 680f8933b0373..0b9dde6bd40b5 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -3854,7 +3854,6 @@
     "visTypeTimeseries.movingAverage.period": "期間",
     "visTypeTimeseries.movingAverage.windowSizeHint": "ウィンドウは、必ず、期間のサイズの 2 倍以上でなければなりません",
     "visTypeTimeseries.movingAverage.windowSizeLabel": "ウィンドウサイズ",
-    "visTypeTimeseries.multivalueRow.valueLabel": "値:",
     "visTypeTimeseries.noButtonLabel": "いいえ",
     "visTypeTimeseries.noDataDescription": "選択されたメトリックに表示するデータがありません",
     "visTypeTimeseries.percentile.aggregationLabel": "集約",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 6e11dabd9843c..aa4144d870f11 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -3855,7 +3855,6 @@
     "visTypeTimeseries.movingAverage.period": "期间",
     "visTypeTimeseries.movingAverage.windowSizeHint": "窗口必须始终至少是期间大小的两倍",
     "visTypeTimeseries.movingAverage.windowSizeLabel": "窗口大小",
-    "visTypeTimeseries.multivalueRow.valueLabel": "值：",
     "visTypeTimeseries.noButtonLabel": "否",
     "visTypeTimeseries.noDataDescription": "所选指标没有可显示的数据",
     "visTypeTimeseries.percentile.aggregationLabel": "聚合",

From adbb1d7793d135e85d074d861a94d5a02a6cceed Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 25 Sep 2020 14:23:15 +0300
Subject: [PATCH 4/7] fix PR comments

---
 .../components/aggs/percentile_hdr.tsx        |  2 +-
 .../aggs/percentile_rank/multi_value_row.tsx  |  5 +-
 .../aggs/percentile_rank/percentile_rank.tsx  | 18 ++--
 .../components/aggs/percentile_ui.js          | 97 +++++++++++--------
 .../series/percentile_rank.js                 |  4 +-
 5 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx
index 8d821e4f2b8ef..c0ba7d3c6765b 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx
@@ -47,6 +47,6 @@ export const PercentileHdr = ({ value, onChange }: PercentileHdrProps) => (
       </>
     }
   >
-    <EuiFieldNumber value={value || ''} onChange={onChange} />
+    <EuiFieldNumber min={1} value={value || ''} onChange={onChange} />
   </EuiFormRow>
 );
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
index 46d9f3a93e575..b0a62380b4370 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
@@ -18,6 +18,7 @@
  */
 import React, { ChangeEvent } from 'react';
 import { get } from 'lodash';
+
 import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { AddDeleteButtons } from '../../add_delete_buttons';
@@ -51,7 +52,7 @@ export const MultiValueRow = ({
   return (
     <div className="tvbAggRow__multiValueRow">
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <EuiFieldNumber
             value={model.value === '' ? '' : Number(model.value)}
             placeholder="0"
@@ -68,7 +69,7 @@ export const MultiValueRow = ({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size={'s'} />
+      <EuiSpacer size="s" />
     </div>
   );
 };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
index 747447d702ed7..f78df9b1ddef4 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx
@@ -136,17 +136,13 @@ export const PercentileRankAgg = (props: PercentileRankAggProps) => {
               />
             }
           >
-            <>
-              {model.values && (
-                <PercentileRankValues
-                  disableAdd={isTablePanel}
-                  disableDelete={isTablePanel}
-                  showOnlyLastRow={isTablePanel}
-                  model={model.values}
-                  onChange={handlePercentileRankValuesChange}
-                />
-              )}
-            </>
+            <PercentileRankValues
+              disableAdd={isTablePanel}
+              disableDelete={isTablePanel}
+              showOnlyLastRow={isTablePanel}
+              model={model.values!}
+              onChange={handlePercentileRankValuesChange}
+            />
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
index 05dc1abfc12fd..440c6b3b49fa5 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
@@ -30,6 +30,8 @@ import {
   EuiFormLabel,
   EuiComboBox,
   EuiFieldNumber,
+  EuiFormRow,
+  EuiPanel,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
@@ -91,10 +93,13 @@ class PercentilesUi extends Component {
         value: 'band',
       },
     ];
-    const optionsStyle = {};
+    const optionsStyle = {
+      minWidth: 300,
+    };
     if (model.mode === 'line') {
       optionsStyle.display = 'none';
     }
+
     const labelStyle = { marginBottom: 0 };
     const htmlId = htmlIdGenerator(model.id);
     const selectedModeOption = modeOptions.find((option) => {
@@ -102,7 +107,13 @@ class PercentilesUi extends Component {
     });
     return (
       <EuiFlexItem key={model.id}>
-        <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
+        <EuiFlexGroup
+          alignItems="center"
+          responsive={false}
+          justifyContent="spaceBetween"
+          gutterSize="s"
+          wrap
+        >
           {percentileFieldNumber}
 
           <EuiFlexItem grow={false}>
@@ -113,7 +124,7 @@ class PercentilesUi extends Component {
               />
             </EuiFormLabel>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={true}>
             <EuiComboBox
               isClearable={false}
               id={htmlId('mode')}
@@ -123,44 +134,6 @@ class PercentilesUi extends Component {
               singleSelection={{ asPlainText: true }}
             />
           </EuiFlexItem>
-
-          <EuiFlexItem style={optionsStyle} grow={false}>
-            <EuiFormLabel style={labelStyle} htmlFor={htmlId('fillTo')}>
-              <FormattedMessage
-                id="visTypeTimeseries.percentile.fillToLabel"
-                defaultMessage="Fill to:"
-              />
-            </EuiFormLabel>
-          </EuiFlexItem>
-          <EuiFlexItem style={optionsStyle} grow={false}>
-            <EuiFieldNumber
-              id={htmlId('fillTo')}
-              min={0}
-              max={100}
-              step={1}
-              onChange={this.handleTextChange(model, 'percentile')}
-              value={Number(model.percentile)}
-            />
-          </EuiFlexItem>
-
-          <EuiFlexItem style={optionsStyle} grow={false}>
-            <EuiFormLabel style={labelStyle} htmlFor={htmlId('shade')}>
-              <FormattedMessage
-                id="visTypeTimeseries.percentile.shadeLabel"
-                defaultMessage="Shade (0 to 1):"
-              />
-            </EuiFormLabel>
-          </EuiFlexItem>
-          <EuiFlexItem style={optionsStyle} grow={false}>
-            <EuiFieldNumber
-              id={htmlId('shade')}
-              style={optionsStyle}
-              step={0.1}
-              onChange={this.handleTextChange(model, 'shade')}
-              value={Number(model.shade)}
-            />
-          </EuiFlexItem>
-
           <EuiFlexItem grow={false}>
             <AddDeleteButtons
               onAdd={handleAdd}
@@ -169,6 +142,48 @@ class PercentilesUi extends Component {
               responsive={false}
             />
           </EuiFlexItem>
+          <EuiFlexItem grow={true} style={optionsStyle}>
+            <EuiPanel>
+              <EuiFlexGroup alignItems="center" gutterSize="s">
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={
+                      <FormattedMessage
+                        id="visTypeTimeseries.percentile.fillToLabel"
+                        defaultMessage="Fill to:"
+                      />
+                    }
+                  >
+                    <EuiFieldNumber
+                      id={htmlId('fillTo')}
+                      min={0}
+                      max={100}
+                      step={1}
+                      onChange={this.handleTextChange(model, 'percentile')}
+                      value={Number(model.percentile)}
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFormRow
+                    label={
+                      <FormattedMessage
+                        id="visTypeTimeseries.percentile.shadeLabel"
+                        defaultMessage="Shade (0 to 1):"
+                      />
+                    }
+                  >
+                    <EuiFieldNumber
+                      id={htmlId('shade')}
+                      step={0.1}
+                      onChange={this.handleTextChange(model, 'shade')}
+                      value={Number(model.shade)}
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
     );
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile_rank.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile_rank.js
index a11324f73e611..c163605af7ac5 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile_rank.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile_rank.js
@@ -32,7 +32,7 @@ export function percentileRank(resp, panel, series, meta) {
     }
 
     getSplits(resp, panel, series, meta).forEach((split) => {
-      (metric.values || []).forEach((percentileRank) => {
+      (metric.values || []).forEach((percentileRank, index) => {
         const data = split.timeseries.buckets.map((bucket) => [
           bucket.key,
           getAggValue(bucket, {
@@ -43,7 +43,7 @@ export function percentileRank(resp, panel, series, meta) {
 
         results.push({
           data,
-          id: `${split.id}:${percentileRank}`,
+          id: `${split.id}:${percentileRank}:${index}`,
           label: `${split.label} (${percentileRank || 0})`,
           color: split.color,
           ...getDefaultDecoration(series),

From c4ac59bcc2d5b21ebd86716fb00cf481d2adabc9 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 29 Sep 2020 20:13:32 +0300
Subject: [PATCH 5/7] fix layout

---
 .../aggs/percentile_rank/multi_value_row.tsx  |   9 +-
 .../percentile_rank_values.tsx                |  23 ++--
 .../components/aggs/percentile_ui.js          | 123 +++++++++---------
 3 files changed, 79 insertions(+), 76 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
index b0a62380b4370..4288544d02a20 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
@@ -19,7 +19,7 @@
 import React, { ChangeEvent } from 'react';
 import { get } from 'lodash';
 
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel } from '@elastic/eui';
 
 import { AddDeleteButtons } from '../../add_delete_buttons';
 
@@ -50,8 +50,8 @@ export const MultiValueRow = ({
     });
 
   return (
-    <div className="tvbAggRow__multiValueRow">
-      <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+    <EuiPanel paddingSize="s" className="tvbAggRow__multiValueRow">
+      <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem>
           <EuiFieldNumber
             value={model.value === '' ? '' : Number(model.value)}
@@ -69,8 +69,7 @@ export const MultiValueRow = ({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="s" />
-    </div>
+    </EuiPanel>
   );
 };
 
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank_values.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank_values.tsx
index b66d79d67f427..92ca4dfb706ac 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank_values.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank_values.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { last } from 'lodash';
 
-import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { MultiValueRow } from './multi_value_row';
 
 interface PercentileRankValuesProps {
@@ -52,19 +52,20 @@ export const PercentileRankValues = (props: PercentileRankValuesProps) => {
     disableDeleteRow: boolean;
     disableAddRow: boolean;
   }) => (
-    <MultiValueRow
-      key={`percentileRankValue__item${rowModel.id}`}
-      onAdd={onAddValue}
-      onChange={onChangeValue}
-      onDelete={onDeleteValue}
-      disableDelete={disableDeleteRow}
-      disableAdd={disableAddRow}
-      model={rowModel}
-    />
+    <EuiFlexItem key={`percentileRankValue__item${rowModel.id}`}>
+      <MultiValueRow
+        onAdd={onAddValue}
+        onChange={onChangeValue}
+        onDelete={onDeleteValue}
+        disableDelete={disableDeleteRow}
+        disableAdd={disableAddRow}
+        model={rowModel}
+      />
+    </EuiFlexItem>
   );
 
   return (
-    <EuiFlexGroup direction="column" responsive={false} gutterSize="xs">
+    <EuiFlexGroup direction="column" gutterSize="s">
       {showOnlyLastRow &&
         renderRow({
           rowModel: {
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
index 440c6b3b49fa5..17f271c3f1f0a 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
@@ -27,10 +27,10 @@ import {
   htmlIdGenerator,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormLabel,
   EuiComboBox,
   EuiFieldNumber,
   EuiFormRow,
+  EuiFlexGrid,
   EuiPanel,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
@@ -53,21 +53,31 @@ class PercentilesUi extends Component {
     const defaults = { value: '', percentile: '', shade: '' };
     const model = { ...defaults, ...row };
     const { intl, panel } = this.props;
+    const flexItemStyle = { minWidth: 100 };
 
     const percentileFieldNumber = (
-      <EuiFlexItem grow={false}>
-        <EuiFieldNumber
-          aria-label={intl.formatMessage({
-            id: 'visTypeTimeseries.percentile.percentileAriaLabel',
-            defaultMessage: 'Percentile',
-          })}
-          placeholder={0}
-          max={100}
-          min={0}
-          step={1}
-          onChange={this.handleTextChange(model, 'value')}
-          value={model.value === '' ? '' : Number(model.value)}
-        />
+      <EuiFlexItem style={flexItemStyle}>
+        <EuiFormRow
+          label={
+            <FormattedMessage
+              id="visTypeTimeseries.percentile.percentileAriaLabel"
+              defaultMessage="Percentile"
+            />
+          }
+        >
+          <EuiFieldNumber
+            aria-label={intl.formatMessage({
+              id: 'visTypeTimeseries.percentile.percentileAriaLabel',
+              defaultMessage: 'Percentile',
+            })}
+            placeholder={0}
+            max={100}
+            min={0}
+            step={1}
+            onChange={this.handleTextChange(model, 'value')}
+            value={model.value === '' ? '' : Number(model.value)}
+          />
+        </EuiFormRow>
       </EuiFlexItem>
     );
 
@@ -94,58 +104,43 @@ class PercentilesUi extends Component {
       },
     ];
     const optionsStyle = {
-      minWidth: 300,
+      ...flexItemStyle,
     };
     if (model.mode === 'line') {
       optionsStyle.display = 'none';
     }
 
-    const labelStyle = { marginBottom: 0 };
     const htmlId = htmlIdGenerator(model.id);
     const selectedModeOption = modeOptions.find((option) => {
       return model.mode === option.value;
     });
     return (
       <EuiFlexItem key={model.id}>
-        <EuiFlexGroup
-          alignItems="center"
-          responsive={false}
-          justifyContent="spaceBetween"
-          gutterSize="s"
-          wrap
-        >
-          {percentileFieldNumber}
-
-          <EuiFlexItem grow={false}>
-            <EuiFormLabel style={labelStyle} htmlFor={htmlId('mode')}>
-              <FormattedMessage
-                id="visTypeTimeseries.percentile.modeLabel"
-                defaultMessage="Mode:"
-              />
-            </EuiFormLabel>
-          </EuiFlexItem>
-          <EuiFlexItem grow={true}>
-            <EuiComboBox
-              isClearable={false}
-              id={htmlId('mode')}
-              options={modeOptions}
-              selectedOptions={selectedModeOption ? [selectedModeOption] : []}
-              onChange={this.handleTextChange(model, 'mode')}
-              singleSelection={{ asPlainText: true }}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <AddDeleteButtons
-              onAdd={handleAdd}
-              onDelete={handleDelete}
-              disableDelete={items.length < 2}
-              responsive={false}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={true} style={optionsStyle}>
-            <EuiPanel>
-              <EuiFlexGroup alignItems="center" gutterSize="s">
-                <EuiFlexItem>
+        <EuiPanel>
+          <EuiFlexGroup key={model.id} alignItems="center">
+            <EuiFlexItem>
+              <EuiFlexGrid columns={2}>
+                {percentileFieldNumber}
+                <EuiFlexItem style={flexItemStyle}>
+                  <EuiFormRow
+                    label={
+                      <FormattedMessage
+                        id="visTypeTimeseries.percentile.modeLabel"
+                        defaultMessage="Mode:"
+                      />
+                    }
+                  >
+                    <EuiComboBox
+                      isClearable={false}
+                      id={htmlId('mode')}
+                      options={modeOptions}
+                      selectedOptions={selectedModeOption ? [selectedModeOption] : []}
+                      onChange={this.handleTextChange(model, 'mode')}
+                      singleSelection={{ asPlainText: true }}
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem style={optionsStyle}>
                   <EuiFormRow
                     label={
                       <FormattedMessage
@@ -164,7 +159,7 @@ class PercentilesUi extends Component {
                     />
                   </EuiFormRow>
                 </EuiFlexItem>
-                <EuiFlexItem grow={false}>
+                <EuiFlexItem style={optionsStyle}>
                   <EuiFormRow
                     label={
                       <FormattedMessage
@@ -181,10 +176,18 @@ class PercentilesUi extends Component {
                     />
                   </EuiFormRow>
                 </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+              </EuiFlexGrid>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <AddDeleteButtons
+                onAdd={handleAdd}
+                onDelete={handleDelete}
+                disableDelete={items.length < 2}
+                responsive={false}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
       </EuiFlexItem>
     );
   };

From 41794d6ff57a5b3f0868da6139130d186a5fe197 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 29 Sep 2020 20:27:44 +0300
Subject: [PATCH 6/7] remove legacy injectI18n

---
 .../aggs/percentile_rank/multi_value_row.tsx  |  2 +-
 .../components/aggs/percentile_ui.js          | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
index 4288544d02a20..444e11d0d563d 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx
@@ -19,7 +19,7 @@
 import React, { ChangeEvent } from 'react';
 import { get } from 'lodash';
 
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel } from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 
 import { AddDeleteButtons } from '../../add_delete_buttons';
 
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
index 17f271c3f1f0a..014b11b901fd3 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
 import { collectionActions } from '../lib/collection_actions';
 import { AddDeleteButtons } from '../add_delete_buttons';
@@ -33,13 +34,13 @@ import {
   EuiFlexGrid,
   EuiPanel,
 } from '@elastic/eui';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export const newPercentile = (opts) => {
   return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
 };
 
-class PercentilesUi extends Component {
+export class Percentiles extends Component {
   handleTextChange(item, name) {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
@@ -52,7 +53,7 @@ class PercentilesUi extends Component {
   renderRow = (row, i, items) => {
     const defaults = { value: '', percentile: '', shade: '' };
     const model = { ...defaults, ...row };
-    const { intl, panel } = this.props;
+    const { panel } = this.props;
     const flexItemStyle = { minWidth: 100 };
 
     const percentileFieldNumber = (
@@ -66,8 +67,7 @@ class PercentilesUi extends Component {
           }
         >
           <EuiFieldNumber
-            aria-label={intl.formatMessage({
-              id: 'visTypeTimeseries.percentile.percentileAriaLabel',
+            aria-label={i18n.translate('visTypeTimeseries.percentile.modeOptions.lineLabel', {
               defaultMessage: 'Percentile',
             })}
             placeholder={0}
@@ -89,15 +89,13 @@ class PercentilesUi extends Component {
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
     const modeOptions = [
       {
-        label: intl.formatMessage({
-          id: 'visTypeTimeseries.percentile.modeOptions.lineLabel',
+        label: i18n.translate('visTypeTimeseries.percentile.modeOptions.lineLabel', {
           defaultMessage: 'Line',
         }),
         value: 'line',
       },
       {
-        label: intl.formatMessage({
-          id: 'visTypeTimeseries.percentile.modeOptions.bandLabel',
+        label: i18n.translate('visTypeTimeseries.percentile.modeOptions.bandLabel', {
           defaultMessage: 'Band',
         }),
         value: 'band',
@@ -210,15 +208,13 @@ class PercentilesUi extends Component {
   }
 }
 
-PercentilesUi.defaultProps = {
+Percentiles.defaultProps = {
   name: 'percentile',
 };
 
-PercentilesUi.propTypes = {
+Percentiles.propTypes = {
   name: PropTypes.string,
   model: PropTypes.object,
   panel: PropTypes.object,
   onChange: PropTypes.func,
 };
-
-export const Percentiles = injectI18n(PercentilesUi);

From d1a772fbefd9b4e89d40257324bde0641503b554 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 29 Sep 2020 21:04:25 +0300
Subject: [PATCH 7/7] fix localization issues

---
 .../public/application/components/aggs/percentile_ui.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
index 014b11b901fd3..fb556a053df3f 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js
@@ -61,13 +61,13 @@ export class Percentiles extends Component {
         <EuiFormRow
           label={
             <FormattedMessage
-              id="visTypeTimeseries.percentile.percentileAriaLabel"
+              id="visTypeTimeseries.percentile.percentile"
               defaultMessage="Percentile"
             />
           }
         >
           <EuiFieldNumber
-            aria-label={i18n.translate('visTypeTimeseries.percentile.modeOptions.lineLabel', {
+            aria-label={i18n.translate('visTypeTimeseries.percentile.percentileAriaLabel', {
               defaultMessage: 'Percentile',
             })}
             placeholder={0}