diff --git a/package.json b/package.json
index adc34d19005b..09fa30bb9d02 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,6 @@
"react-markdown": "^3.1.4",
"react-redux": "^5.0.6",
"react-router-dom": "4.2.2",
- "react-select": "^1.2.0",
"react-sizeme": "^2.3.6",
"react-toggle": "4.0.2",
"reactcss": "1.2.3",
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
index 34697ed6e998..6815a423a13d 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/index.less
+++ b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -247,7 +247,6 @@ dashboard-viewport-provider {
/**
* 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
* not have enough room.
- * 2. react-select used in input control vis needs `visible` overflow to avoid clipping selection list
*/
.dashboard-panel {
z-index: auto;
@@ -259,7 +258,7 @@ dashboard-viewport-provider {
background: @dashboard-panel-bg;
color: @dashboard-panel-color;
padding: 0;
- overflow: visible; /* 1, 2 */
+ overflow: visible; /* 1 */
position: relative;
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
index 595bed2e0dd3..91e3c9478b15 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -18,8 +18,10 @@
*/
import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Select from 'react-select';
+import React from 'react';
+import {
+ EuiComboBox,
+} from '@elastic/eui';
const metricAggs = [
{ label: 'Average', value: 'avg' },
@@ -63,89 +65,12 @@ const specialAggs = [
{ label: 'Math', value: 'math' },
];
-class AggSelectOption extends Component {
- constructor(props) {
- super(props);
- this.handleMouseMove = this.handleMouseMove.bind(this);
- this.handleMouseEnter = this.handleMouseEnter.bind(this);
- this.handleMouseDown = this.handleMouseDown.bind(this);
- }
-
- handleMouseDown(event) {
- event.preventDefault();
- event.stopPropagation();
- this.props.onSelect(this.props.option, event);
- }
-
- handleMouseEnter(event) {
- this.props.onFocus(this.props.option, event);
- }
-
- handleMouseMove(event) {
- if (this.props.isFocused) return;
- this.props.onFocus(this.props.option, event);
- }
-
- render() {
- const { label, heading, pipeline } = this.props.option;
- const style = {
- paddingLeft: heading ? 0 : 10,
- };
- // We can ignore that the
does not have keyboard handlers even though
- // it has mouse handlers, since react-select still takes care, that this works
- // well with keyboard.
- /* eslint-disable jsx-a11y/no-static-element-interactions */
- if (heading) {
- let note;
- if (pipeline) {
- note = (
-
- (requires child aggregation)
-
- );
- }
- return (
-
-
- {label}
- {note}
-
-
- );
- }
- return (
-
-
- {this.props.children}
-
-
- );
- /* eslint-enable jsx-a11y/no-static-element-interactions */
- }
-}
-
-AggSelectOption.props = {
- children: PropTypes.node,
- className: PropTypes.string,
- isDisabled: PropTypes.bool,
- isFocused: PropTypes.bool,
- isSelected: PropTypes.bool,
- onFocus: PropTypes.func,
- onSelect: PropTypes.func,
- option: PropTypes.object.isRequired,
-};
+const allAggOptions = [
+ ...metricAggs,
+ ...pipelineAggs,
+ ...siblingAggs,
+ ...specialAggs
+];
function filterByPanelType(panelType) {
return agg => {
@@ -155,7 +80,12 @@ function filterByPanelType(panelType) {
}
function AggSelect(props) {
- const { siblings, panelType } = props;
+ const { siblings, panelType, value } = props;
+
+ const selectedOption = allAggOptions.find(option => {
+ return value === option.value;
+ });
+ const selectedOptions = selectedOption ? [selectedOption] : [];
let enablePipelines = siblings.some(
s => !!metricAggs.find(m => m.value === s.type)
@@ -169,55 +99,39 @@ function AggSelect(props) {
options = [
{
label: 'Metric Aggregations',
- value: null,
- heading: true,
- disabled: true,
+ options: metricAggs,
},
- ...metricAggs,
{
label: 'Parent Pipeline Aggregations',
- value: null,
- pipeline: true,
- heading: true,
- disabled: true,
+ options: pipelineAggs
+ .filter(filterByPanelType(panelType))
+ .map(agg => ({ ...agg, disabled: !enablePipelines }))
},
- ...pipelineAggs
- .filter(filterByPanelType(panelType))
- .map(agg => ({ ...agg, disabled: !enablePipelines })),
{
label: 'Sibling Pipeline Aggregations',
- value: null,
- pipeline: true,
- heading: true,
- disabled: true,
+ options: siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
},
- ...siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
{
label: 'Special Aggregations',
- value: null,
- pipeline: true,
- heading: true,
- disabled: true,
+ options: specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
},
- ...specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
];
}
- const handleChange = value => {
- if (!value) return;
- if (value.disabled) return;
- if (value.value) props.onChange(value);
+ const handleChange = selectedOptions => {
+ if (!selectedOptions || selectedOptions.length <= 0) return;
+ props.onChange(selectedOptions);
};
return (
-
);
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
index 8d5d8f7d1cad..175ae7126bc6 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -19,11 +19,13 @@
import PropTypes from 'prop-types';
import React from 'react';
-import Select from 'react-select';
+import {
+ EuiComboBox,
+} from '@elastic/eui';
import generateByTypeFilter from '../lib/generate_by_type_filter';
function FieldSelect(props) {
- const { type, fields, indexPattern } = props;
+ const { type, fields, indexPattern, value, onChange, disabled } = props;
if (type === 'count') {
return null;
}
@@ -33,14 +35,19 @@ function FieldSelect(props) {
return { label: field.name, value: field.name };
});
+ const selectedOption = options.find(option => {
+ return value === option.value;
+ });
+ const selectedOptions = selectedOption ? [selectedOption] : [];
+
return (
-
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index 8247a12b96a8..fb12f085a625 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -20,7 +20,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash';
-import Select from 'react-select';
+import {
+ EuiComboBox,
+} from '@elastic/eui';
import calculateSiblings from '../lib/calculate_siblings';
import calculateLabel from '../../../common/calculate_label';
import basicAggs from '../../../common/basic_aggs';
@@ -86,14 +88,20 @@ function MetricSelect(props) {
const label = calculateLabel(row, metrics);
return { value: row.id, label };
});
+ const allOptions = [...options, ...props.additionalOptions, ...percentileOptions];
+
+ const selectedOption = allOptions.find(option => {
+ return value === option.value;
+ });
+ const selectedOptions = selectedOption ? [selectedOption] : [];
return (
-
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js
index 780b529dc6f8..245037c8959f 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -22,12 +22,14 @@ import React from 'react';
import AggRow from './agg_row';
import AggSelect from './agg_select';
import MetricSelect from './metric_select';
-import Select from 'react-select';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import createNumberHandler from '../lib/create_number_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
export const MovingAverageAgg = props => {
const { siblings } = props;
@@ -54,6 +56,13 @@ export const MovingAverageAgg = props => {
{ label: 'False', value: 0 }
];
const htmlId = htmlIdGenerator();
+ const selectedModelOption = modelOptions.find(option => {
+ return model.model === option.value;
+ });
+ const selectedMinimizeOption = minimizeOptions.find(option => {
+ return model.minimize === option.value;
+ });
+
return (
{
Model
-
@@ -109,12 +119,13 @@ export const MovingAverageAgg = props => {
Minimize
-
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index cef3e0a8af83..c9744a8c6934 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -25,11 +25,13 @@ import FieldSelect from './field_select';
import AggRow from './agg_row';
import * as collectionActions from '../lib/collection_actions';
import AddDeleteButtons from '../add_delete_buttons';
-import Select from 'react-select';
import uuid from 'uuid';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
const newPercentile = (opts) => {
return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
};
@@ -45,7 +47,7 @@ class Percentiles extends Component {
return (e) => {
const handleChange = collectionActions.handleChange.bind(null, this.props);
const part = {};
- part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+ part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
handleChange(_.assign({}, item, part));
};
}
@@ -64,6 +66,9 @@ class Percentiles extends Component {
optionsStyle.display = 'none';
}
const htmlId = htmlIdGenerator(model.id);
+ const selectedModeOption = modeOptions.find(option => {
+ return model.mode === option.value;
+ });
return (
@@ -78,12 +83,13 @@ class Percentiles extends Component {
/>
Mode
-
diff --git a/src/core_plugins/metrics/public/components/aggs/series_agg.js b/src/core_plugins/metrics/public/components/aggs/series_agg.js
index f4dc56fa5cc3..89d708dfd520 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -20,11 +20,13 @@
import PropTypes from 'prop-types';
import React from 'react';
import AggSelect from './agg_select';
-import Select from 'react-select';
import AggRow from './agg_row';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
function SeriesAgg(props) {
const { panel, model } = props;
@@ -45,6 +47,9 @@ function SeriesAgg(props) {
{ label: 'Overall Avg', value: 'overall_avg' },
{ label: 'Cumlative Sum', value: 'cumlative_sum' },
];
+ const selectedFunctionOption = functionOptions.find(option => {
+ return model.function === option.value;
+ });
if (panel.type === 'table') {
return (
@@ -83,11 +88,12 @@ function SeriesAgg(props) {
Function
-
diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
index e714532d415b..d8e4e96720c2 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -22,11 +22,13 @@ import React from 'react';
import AggSelect from './agg_select';
import FieldSelect from './field_select';
import AggRow from './agg_row';
-import Select from 'react-select';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
export const StandardDeviationAgg = props => {
const { series, panel, fields } = props;
@@ -49,6 +51,9 @@ export const StandardDeviationAgg = props => {
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
const htmlId = htmlIdGenerator();
+ const selectedModeOption = modeOptions.find(option => {
+ return model.mode === option.value;
+ });
return (
{
Mode
-
diff --git a/src/core_plugins/metrics/public/components/aggs/std_sibling.js b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
index 69fdaeb49a0e..4e4fe2e9e940 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -22,11 +22,13 @@ import React from 'react';
import AggRow from './agg_row';
import MetricSelect from './metric_select';
import AggSelect from './agg_select';
-import Select from 'react-select';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
export const StandardSiblingAgg = props => {
const { siblings } = props;
@@ -58,15 +60,19 @@ export const StandardSiblingAgg = props => {
{ label: 'Lower Bound', value: 'lower' },
{ label: 'Bounds Band', value: 'band' }
];
+ const selectedModeOption = modeOptions.find(option => {
+ return model.mode === option.value;
+ });
stdDev.mode = (
Mode
-
);
diff --git a/src/core_plugins/metrics/public/components/aggs/top_hit.js b/src/core_plugins/metrics/public/components/aggs/top_hit.js
index 9204c5560e6d..bfda4f9780c7 100644
--- a/src/core_plugins/metrics/public/components/aggs/top_hit.js
+++ b/src/core_plugins/metrics/public/components/aggs/top_hit.js
@@ -21,11 +21,13 @@ import React from 'react';
import AggRow from './agg_row';
import AggSelect from './agg_select';
import FieldSelect from './field_select';
-import Select from 'react-select';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
export const TopHitAgg = props => {
const { fields, series, panel } = props;
@@ -56,6 +58,12 @@ export const TopHitAgg = props => {
];
const htmlId = htmlIdGenerator();
+ const selectedAggWithOption = aggWithOptions.find(option => {
+ return model.agg_with === option.value;
+ });
+ const selectedOrderOption = orderOptions.find(option => {
+ return model.order === option.value;
+ });
return (
{
Aggregate with
-
@@ -132,13 +141,14 @@ export const TopHitAgg = props => {
Order
-
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
index 9caf1ed82fc8..f80537ebd204 100644
--- a/src/core_plugins/metrics/public/components/aggs/vars.js
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -35,7 +35,7 @@ class CalculationVars extends Component {
return (e) => {
const handleChange = collectionActions.handleChange.bind(null, this.props);
const part = {};
- part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+ part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
handleChange(_.assign({}, item, part));
};
}
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index c6b1de0e74de..b7c97455c7b7 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -56,7 +56,7 @@ class AnnotationsEditor extends Component {
return (e) => {
const handleChange = collectionActions.handleChange.bind(null, this.props);
const part = {};
- part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+ part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
handleChange(_.assign({}, item, part));
};
}
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index c507fb8f38a8..dfec571167eb 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -21,10 +21,12 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import _ from 'lodash';
import AddDeleteButtons from './add_delete_buttons';
-import Select from 'react-select';
import * as collectionActions from './lib/collection_actions';
import ColorPicker from './color_picker';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
class ColorRules extends Component {
@@ -37,7 +39,7 @@ class ColorRules extends Component {
return (e) => {
const handleChange = collectionActions.handleChange.bind(null, this.props);
const part = {};
- part[name] = cast(_.get(e, 'value', _.get(e, 'target.value')));
+ part[name] = cast(_.get(e, '[0].value', _.get(e, 'target.value')));
if (part[name] === 'undefined') part[name] = undefined;
if (part[name] === NaN) part[name] = undefined;
handleChange(_.assign({}, item, part));
@@ -60,6 +62,10 @@ class ColorRules extends Component {
handleChange(_.assign({}, model, part));
};
const htmlId = htmlIdGenerator(model.id);
+ const selectedOperatorOption = operatorOptions.find(option => {
+ return model.opperator === option.value;
+ });
+
let secondary;
if (!this.props.hideSecondary) {
secondary = (
@@ -86,11 +92,12 @@ class ColorRules extends Component {
if metric is
-
{
- if (name === 'decimals') {
- value = this.decimals;
+ return (selectedOptions) => {
+ if (selectedOptions.length < 1) {
+ return;
}
+
+ let newValue;
+ if (name === 'decimals') {
+ newValue = this.decimals.value;
+ } else {
+ newValue = selectedOptions[0].value;
+ }
+
this.setState({
- [name]: value.value
+ [name]: newValue
}, () => {
const { from, to, decimals } = this.state;
- this.props.onChange({
+ this.props.onChange([{
value: `${from},${to},${decimals}`
- });
+ }]);
});
};
}
@@ -92,39 +106,51 @@ class DataFormatPicker extends Component {
{ label: 'Duration', value: 'duration' },
{ label: 'Custom', value: 'custom' }
];
+ const selectedOption = options.find(option => {
+ return defaultValue === option.value;
+ });
let custom;
if (defaultValue === 'duration') {
const [from, to, decimals] = value.split(',');
+ const selectedFrom = durationInputOptions.find(option => {
+ return from === option.value;
+ });
+ const selectedTo = durationOutputOptions.find(option => {
+ return to === option.value;
+ });
return (
{this.props.label}
-
From
-
To
-
Decimal Places
@@ -162,11 +188,12 @@ class DataFormatPicker extends Component {
{this.props.label}
-
{custom}
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index f10504a67c88..d56657dba682 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -18,79 +18,14 @@
*/
import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Select from 'react-select';
+import React from 'react';
+import {
+ EuiComboBox,
+} from '@elastic/eui';
-class IconOption extends Component {
-
- constructor(props) {
- super(props);
- this.handleMouseMove = this.handleMouseMove.bind(this);
- this.handleMouseEnter = this.handleMouseEnter.bind(this);
- this.handleMouseDown = this.handleMouseDown.bind(this);
- }
-
- handleMouseDown(event) {
- event.preventDefault();
- event.stopPropagation();
- this.props.onSelect(this.props.option, event);
- }
-
- handleMouseEnter(event) {
- this.props.onFocus(this.props.option, event);
- }
-
- handleMouseMove(event) {
- if (this.props.isFocused) return;
- this.props.onFocus(this.props.option, event);
- }
-
- render() {
- const icon = this.props.option.value;
- const label = this.props.option.label;
- // We can ignore that the does not have keyboard handlers even though
- // it has mouse handlers, since react-select still takes care, that this works
- // well with keyboard.
- /* eslint-disable jsx-a11y/no-static-element-interactions */
- return (
-
-
-
- { this.props.children }
-
-
- );
- /* eslint-enable jsx-a11y/no-static-element-interactions */
- }
-
-}
-
-IconOption.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- isDisabled: PropTypes.bool,
- isFocused: PropTypes.bool,
- isSelected: PropTypes.bool,
- onFocus: PropTypes.func,
- onSelect: PropTypes.func,
- option: PropTypes.object.isRequired,
-};
-
-
-function IconValue(props) {
- const icon = props.value && props.value.value;
- const label = props.value && props.value.label;
+function renderOption(option) {
+ const icon = option.value;
+ const label = option.label;
return (
- { props.children }
+ { label }
);
}
-IconValue.propTypes = {
- children: PropTypes.node,
- placeholder: PropTypes.string,
- value: PropTypes.object.isRequired
-};
-
function IconSelect(props) {
+ const selectedIcon = props.icons.find(option => {
+ return props.value === option.value;
+ });
return (
-
);
}
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
index ddb0057be098..cfd74fcfffb7 100644
--- a/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
@@ -29,7 +29,7 @@ describe('createSelectHandler()', () => {
handleChange = sinon.spy();
changeHandler = createSelectHandler(handleChange);
const fn = changeHandler('test');
- fn({ value: 'foo' });
+ fn([{ value: 'foo' }]);
});
it('calls handleChange() funciton with partial', () => {
diff --git a/src/core_plugins/metrics/public/components/lib/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
index 49c1a900253b..944adccba870 100644
--- a/src/core_plugins/metrics/public/components/lib/create_select_handler.js
+++ b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
@@ -19,10 +19,10 @@
import _ from 'lodash';
export default (handleChange) => {
- return (name) => (value) => {
+ return (name) => (selectedOptions) => {
if (_.isFunction(handleChange)) {
return handleChange({
- [name]: value && value.value || null
+ [name]: _.get(selectedOptions, '[0].value', null)
});
}
};
diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js
index ab523807f2a3..043133992663 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -21,14 +21,16 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import SeriesEditor from '../series_editor';
import { IndexPattern } from '../index_pattern';
-import Select from 'react-select';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import ColorRules from '../color_rules';
import ColorPicker from '../color_picker';
import uuid from 'uuid';
import YesNo from '../yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
class GaugePanelConfig extends Component {
@@ -71,6 +73,9 @@ class GaugePanelConfig extends Component {
{ label: 'Half Circle', value: 'half' }
];
const htmlId = htmlIdGenerator();
+ const selectedGaugeStyleOption = styleOptions.find(option => {
+ return model.gauge_style === option.value;
+ });
let view;
if (selectedTab === 'data') {
view = (
@@ -129,13 +134,13 @@ class GaugePanelConfig extends Component {
Gauge Style
-
diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js
index 995f54a2c68e..29d419b59669 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -22,7 +22,6 @@ import React, { Component } from 'react';
import SeriesEditor from '../series_editor';
import { IndexPattern } from '../index_pattern';
import 'brace/mode/less';
-import Select from 'react-select';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import ColorPicker from '../color_picker';
@@ -30,7 +29,10 @@ import YesNo from '../yes_no';
import MarkdownEditor from '../markdown_editor';
import less from 'less/lib/less-browser';
import { KuiCodeEditor } from '@kbn/ui-framework/components';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
const lessC = less(window, { env: 'production' });
class MarkdownPanelConfig extends Component {
@@ -73,6 +75,9 @@ class MarkdownPanelConfig extends Component {
{ label: 'Middle', value: 'middle' },
{ label: 'Bottom', value: 'bottom' }
];
+ const selectedAlignOption = alignOptions.find(option => {
+ return model.markdown_vertical_align === option.value;
+ });
let view;
if (selectedTab === 'markdown') {
view = ( );
@@ -129,13 +134,13 @@ class MarkdownPanelConfig extends Component {
Vertical Alignment
-
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
index 374139e794f7..85b09047b7d9 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -22,12 +22,14 @@ import React, { Component } from 'react';
import SeriesEditor from '../series_editor';
import AnnotationsEditor from '../annotations_editor';
import { IndexPattern } from '../index_pattern';
-import Select from 'react-select';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import ColorPicker from '../color_picker';
import YesNo from '../yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiComboBox,
+} from '@elastic/eui';
class TimeseriesPanelConfig extends Component {
@@ -57,15 +59,25 @@ class TimeseriesPanelConfig extends Component {
{ label: 'Right', value: 'right' },
{ label: 'Left', value: 'left' }
];
+ const selectedPositionOption = positionOptions.find(option => {
+ return model.axis_position === option.value;
+ });
const scaleOptions = [
{ label: 'Normal', value: 'normal' },
{ label: 'Log', value: 'log' }
];
+ const selectedAxisScaleOption = scaleOptions.find(option => {
+ return model.axis_scale === option.value;
+ });
const legendPositionOptions = [
{ label: 'Right', value: 'right' },
{ label: 'Left', value: 'left' },
{ label: 'Bottom', value: 'bottom' }
];
+ const selectedLegendPosOption = legendPositionOptions.find(option => {
+ return model.legend_position === option.value;
+ });
+
let view;
if (selectedTab === 'data') {
view = (
@@ -112,24 +124,24 @@ class TimeseriesPanelConfig extends Component {
/>