[Vis: Default editor] EUIficate Percentile Ranks and Percentiles

src/legacy/ui/public/agg_types/controls/percentile_ranks.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, { useState } from 'react';
+
+import { EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from '../../vis/editors/default';
+import { NumberList } from '../number_list';
+
+function PercentileRanksEditor({
+  agg,
+  showValidation,
+  value,
+  setTouched,
+  setValidity,
+  setValue,
+}: AggParamEditorProps<Array<number | undefined>>) {
+  const label = i18n.translate('common.ui.aggTypes.percentileRanks.valuesLabel', {
+    defaultMessage: 'Values',
+  });
+  const [isValid, setIsValid] = useState(true);
+
+  const setModelValidy = (isListValid: boolean) => {
+    setIsValid(isListValid);
+    setValidity(isListValid);
+  };
+
+  return (
+    <EuiFormRow
+      label={label}
+      labelType="legend"
+      fullWidth={true}
+      id={`visEditorPercentileRanksLabel${agg.id}`}
+      isInvalid={showValidation ? !isValid : false}
+      className="visEditorSidebar__aggParamFormRow"
+    >
+      <NumberList
+        labelledbyId={`visEditorPercentileRanksLabel${agg.id}-legend`}
+        numberArray={value}
+        range="[-Infinity,Infinity]"
+        unitName={i18n.translate('common.ui.aggTypes.percentileRanks.valueUnitNameText', {
+          defaultMessage: 'value',
+        })}
+        showValidation={showValidation}
+        onChange={setValue}
+        setTouched={setTouched}
+        setValidity={setModelValidy}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { PercentileRanksEditor };

src/legacy/ui/public/agg_types/controls/percentiles.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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, { useState } from 'react';
+
+import { EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from '../../vis/editors/default';
+import { NumberList } from '../number_list';
+
+function PercentilesEditor({
+  agg,
+  showValidation,
+  value,
+  setTouched,
+  setValidity,
+  setValue,
+}: AggParamEditorProps<Array<number | undefined>>) {
+  const label = i18n.translate('common.ui.aggTypes.percentiles.percentsLabel', {
+    defaultMessage: 'Percents',
+  });
+  const [isValid, setIsValid] = useState(true);
+
+  const setModelValidy = (isListValid: boolean) => {
+    setIsValid(isListValid);
+    setValidity(isListValid);
+  };
+
+  return (
+    <EuiFormRow
+      label={label}
+      labelType="legend"
+      fullWidth={true}
+      id={`visEditorPercentileLabel${agg.id}`}
+      isInvalid={showValidation ? !isValid : false}
+      className="visEditorSidebar__aggParamFormRow"
+    >
+      <NumberList
+        labelledbyId={`visEditorPercentileLabel${agg.id}-legend`}
+        numberArray={value}
+        range="[0,100]"
+        validateAscendingOrder={false}
+        unitName={i18n.translate('common.ui.aggTypes.percentileRanks.percentUnitNameText', {
+          defaultMessage: 'percent',
+        })}
+        showValidation={showValidation}
+        onChange={setValue}
+        setTouched={setTouched}
+        setValidity={setModelValidy}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { PercentilesEditor };

src/legacy/ui/public/agg_types/metrics/percentile_ranks.js

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import valuesEditor from '../controls/percentile_ranks.html';
-import '../number_list';
+import { PercentileRanksEditor } from '../controls/percentile_ranks';
 import { MetricAggType } from './metric_agg_type';
 import { getResponseAggConfigClass } from './get_response_agg_config_class';
 import { fieldFormats } from '../../registry/field_formats';
@@ -60,7 +59,7 @@ export const percentileRanksMetricAgg = new MetricAggType({
     },
     {
       name: 'values',
-      editor: valuesEditor,
+      editorComponent: PercentileRanksEditor,
       default: []
     },
     {

src/legacy/ui/public/agg_types/metrics/percentiles.js

@@ -18,8 +18,7 @@
  */
 
 import { ordinalSuffix } from '../../utils/ordinal_suffix';
-import percentsEditor from '../controls/percentiles.html';
-import '../number_list';
+import { PercentilesEditor } from '../controls/percentiles';
 import { MetricAggType } from './metric_agg_type';
 import { getResponseAggConfigClass } from './get_response_agg_config_class';
 import { getPercentileValue } from './percentiles_get_value';
@@ -54,7 +53,7 @@ export const percentilesMetricAgg = new MetricAggType({
     },
     {
       name: 'percents',
-      editor: percentsEditor,
+      editorComponent: PercentilesEditor,
       default: [1, 5, 25, 50, 75, 95, 99]
     },
     {

src/legacy/ui/public/agg_types/number_list/index.js → src/legacy/ui/public/agg_types/number_list/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-import './number_list';
+export { NumberList } from './number_list';