-
-
-
- {props.children}
- { dragHandle }
-
-
+
+
+
+
+
+ {props.children}
+
+ {dragHandle}
+
+
+
);
}
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 91e3c9478b154..f447104cf591f 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -80,7 +80,7 @@ function filterByPanelType(panelType) {
}
function AggSelect(props) {
- const { siblings, panelType, value } = props;
+ const { siblings, panelType, value, onChange, ...rest } = props;
const selectedOption = allAggOptions.find(option => {
return value === option.value;
@@ -120,18 +120,19 @@ function AggSelect(props) {
const handleChange = selectedOptions => {
if (!selectedOptions || selectedOptions.length <= 0) return;
- props.onChange(selectedOptions);
+ onChange(selectedOptions);
};
return (
-
+
);
diff --git a/src/core_plugins/metrics/public/components/aggs/calculation.js b/src/core_plugins/metrics/public/components/aggs/calculation.js
index 77bdb2aa25125..9a22596915b66 100644
--- a/src/core_plugins/metrics/public/components/aggs/calculation.js
+++ b/src/core_plugins/metrics/public/components/aggs/calculation.js
@@ -29,7 +29,15 @@ import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import Vars from './vars';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiTextArea,
+ EuiFormRow,
+ EuiCode,
+} from '@elastic/eui';
class CalculationAgg extends Component {
@@ -61,40 +69,49 @@ class CalculationAgg extends Component {
onDelete={this.props.onDelete}
siblings={this.props.siblings}
>
-
-
-
Aggregation
+
+
+ Aggregation
-
- Painless Script - Variables are keys on the params
- object, i.e. params.<name>.
- To access the bucket interval (in milliseconds) use params._interval.
-
-
+
+
+ Variables
+
+
+
+
+ Variables are keys on the params object, i.e. params.<name> .
+ To access the bucket interval (in milliseconds) use params._interval .
+
-
-
+
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
index 3ab487c3b6d96..5bb10f6982c56 100644
--- a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
+++ b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
@@ -24,9 +24,11 @@ import AggSelect from './agg_select';
import MetricSelect from './metric_select';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
function CumulativeSumAgg(props) {
const { model, siblings } = props;
+ const htmlId = htmlIdGenerator();
const handleChange = createChangeHandler(props.onChange, model);
const handleSelectChange = createSelectHandler(handleChange);
return (
@@ -37,24 +39,31 @@ function CumulativeSumAgg(props) {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
+
+
+ Aggregation
+
+
+
+
+
+
);
diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js
index 73ce9a244aa22..65213afe36ac0 100644
--- a/src/core_plugins/metrics/public/components/aggs/derivative.js
+++ b/src/core_plugins/metrics/public/components/aggs/derivative.js
@@ -25,7 +25,14 @@ import AggRow from './agg_row';
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,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiFieldText,
+ EuiFormRow,
+} from '@elastic/eui';
export const DerivativeAgg = props => {
const { siblings } = props;
@@ -47,36 +54,47 @@ export const DerivativeAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
-
- Units (1s, 1m, etc)
-
-
+
+
+ Aggregation
+
+
+
+
+
+
+
+
+
+
);
};
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 175ae7126bc6a..9eef8f3f4e74f 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -25,12 +25,12 @@ import {
import generateByTypeFilter from '../lib/generate_by_type_filter';
function FieldSelect(props) {
- const { type, fields, indexPattern, value, onChange, disabled } = props;
+ const { type, fields, indexPattern, value, onChange, disabled, restrict, ...rest } = props;
if (type === 'count') {
return null;
}
const options = (fields[indexPattern] || [])
- .filter(generateByTypeFilter(props.restrict))
+ .filter(generateByTypeFilter(restrict))
.map(field => {
return { label: field.name, value: field.name };
});
@@ -47,7 +47,8 @@ function FieldSelect(props) {
options={options}
selectedOptions={selectedOptions}
onChange={onChange}
- singleSelection={true}
+ singleSelection={{ asPlainText: true }}
+ {...rest}
/>
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
index 6db2d61af9134..d0291ca958442 100644
--- a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
+++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
@@ -25,7 +25,15 @@ import AggRow from './agg_row';
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,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiFieldText,
+ EuiSpacer,
+ EuiFormRow,
+} from '@elastic/eui';
export const FilterRatioAgg = props => {
const {
@@ -58,59 +66,58 @@ export const FilterRatioAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
-
-
- Numerator
-
-
+
+
+ Aggregation
+
+
+
+
+
-
-
- Denominator
-
-
+
+
-
-
-
- { model.metric_agg !== 'count' ? (
-
-
- Field
-
+
+
+
+
+
+
+
+
+
+
+ Metric Aggregation
+
+
+ { model.metric_agg !== 'count' ? (
+
+
{
value={model.field}
onChange={handleSelectChange('field')}
/>
- ) : null }
-
-
+
+ ) : null }
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/math.js b/src/core_plugins/metrics/public/components/aggs/math.js
index d70617d1148d5..77b33b9a14069 100644
--- a/src/core_plugins/metrics/public/components/aggs/math.js
+++ b/src/core_plugins/metrics/public/components/aggs/math.js
@@ -28,6 +28,16 @@ import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import Vars from './vars';
+import {
+ htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiTextArea,
+ EuiLink,
+ EuiFormRow,
+ EuiCode,
+} from '@elastic/eui';
class MathAgg extends Component {
componentWillMount() {
@@ -42,6 +52,7 @@ class MathAgg extends Component {
render() {
const { siblings } = this.props;
+ const htmlId = htmlIdGenerator();
const defaults = { script: '' };
const model = { ...defaults, ...this.props.model };
@@ -58,60 +69,63 @@ class MathAgg extends Component {
onDelete={this.props.onDelete}
siblings={this.props.siblings}
>
-
-
-
Aggregation
+
+
+ Aggregation
-
- Expression
-
-
-
- This field uses basic math expressions (see{' '}
-
- TinyMath
- ) - Variables are keys on the
params object,
- i.e.
params.<name> To access all the data use
-
params._all.<name>.values for an array of the
- values and
params._all.<name>.timestamps
- for an array of the timestamps.
params._timestamp
- is available for the current bucket's timestamp,
-
params._index is available for the current
- bucket's index, and
params._intervals
- available for the interval in milliseconds.
-
-
-
+ fullWidth
+ value={model.script}
+ />
+
+
+
);
}
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 fb12f085a6254..7bd7f42d3d4c8 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -59,11 +59,11 @@ export function filterRows(includeSiblings) {
}
function MetricSelect(props) {
- const { restrict, metric, onChange, value, exclude, includeSiblings } = props;
+ const { additionalOptions, restrict, metric, metrics, onChange, value, exclude, includeSiblings, clearable, ...rest } = props;
- const metrics = props.metrics.filter(createTypeFilter(restrict, exclude));
+ const calculatedMetrics = metrics.filter(createTypeFilter(restrict, exclude));
- const siblings = calculateSiblings(metrics, metric);
+ const siblings = calculateSiblings(calculatedMetrics, metric);
// Percentiles need to be handled differently because one percentile aggregation
// could have multiple percentiles associated with it. So the user needs a way
@@ -71,7 +71,7 @@ function MetricSelect(props) {
const percentileOptions = siblings
.filter(row => /^percentile/.test(row.type))
.reduce((acc, row) => {
- const label = calculateLabel(row, metrics);
+ const label = calculateLabel(row, calculatedMetrics);
row.percentiles.forEach(p => {
if (p.value) {
const value = /\./.test(p.value) ? p.value : `${p.value}.0`;
@@ -85,10 +85,10 @@ function MetricSelect(props) {
}, []);
const options = siblings.filter(filterRows(includeSiblings)).map(row => {
- const label = calculateLabel(row, metrics);
+ const label = calculateLabel(row, calculatedMetrics);
return { value: row.id, label };
});
- const allOptions = [...options, ...props.additionalOptions, ...percentileOptions];
+ const allOptions = [...options, ...additionalOptions, ...percentileOptions];
const selectedOption = allOptions.find(option => {
return value === option.value;
@@ -101,7 +101,9 @@ function MetricSelect(props) {
options={allOptions}
selectedOptions={selectedOptions}
onChange={onChange}
- singleSelection={true}
+ singleSelection={{ asPlainText: true }}
+ isClearable={clearable}
+ {...rest}
/>
);
}
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 245037c8959f9..391f48a658a75 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -28,7 +28,14 @@ import createTextHandler from '../lib/create_text_handler';
import createNumberHandler from '../lib/create_number_handler';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
EuiComboBox,
+ EuiSpacer,
+ EuiFormRow,
+ EuiCode,
+ EuiTextArea,
} from '@elastic/eui';
export const MovingAverageAgg = props => {
@@ -71,91 +78,109 @@ export const MovingAverageAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
-
-
Metric
+
+
+ Aggregation
+
+
+
-
-
-
- Model
+
+
+
+
+
+
+
-
-
- Window Size
-
+
+
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ Should it be text or number?
+ */}
-
- Minimize
+
+
+
+
-
-
- Predict
-
+
+
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ Should it be text or number?
+ */}
-
-
-
-
- Settings (Key=Value space-delimited)
-
-
-
-
+
+
+
+
+
+
+
+ Key=Value space-delimited
+ }
+ >
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index c9744a8c69340..7a1e89db80830 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -30,8 +30,15 @@ import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import {
htmlIdGenerator,
+ EuiSpacer,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
EuiComboBox,
+ EuiFieldNumber,
+ EuiFormRow,
} from '@elastic/eui';
+
const newPercentile = (opts) => {
return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
};
@@ -65,64 +72,74 @@ class Percentiles extends Component {
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 (
-
-
-
-
Mode
-
+
+
+
+
+
+
+ Mode:
+
+
-
- Fill To
-
-
-
- Shade (0 to 1)
-
-
-
-
-
+
+
+
+ Fill to:
+
+
+
+
+
+ Shade (0 to 1):
+
+
+
+
+
+
+
+
+
);
}
@@ -132,9 +149,9 @@ class Percentiles extends Component {
const rows = model[name].map(this.renderRow);
return (
-
+
{ rows }
-
+
);
}
}
@@ -166,6 +183,7 @@ class PercentileAgg extends Component { // eslint-disable-line react/no-multi-co
const handleChange = createChangeHandler(this.props.onChange, model);
const handleSelectChange = createSelectHandler(handleChange);
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+ const htmlId = htmlIdGenerator();
return (
-
-
-
-
-
Field
+
+
+ Aggregation
+
+
+
-
-
-
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
index 626f6105d5497..5dfefa6c37426 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
@@ -25,7 +25,14 @@ import AggRow from './agg_row';
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,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiFieldText,
+ EuiFormRow,
+} from '@elastic/eui';
export const PercentileRankAgg = props => {
const { series, panel, fields } = props;
@@ -47,36 +54,38 @@ export const PercentileRankAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
- Field
-
-
- Value
-
+
+
+ Aggregation
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/positive_only.js b/src/core_plugins/metrics/public/components/aggs/positive_only.js
index cf04e6549cb0b..dedef18b71251 100644
--- a/src/core_plugins/metrics/public/components/aggs/positive_only.js
+++ b/src/core_plugins/metrics/public/components/aggs/positive_only.js
@@ -24,6 +24,7 @@ import MetricSelect from './metric_select';
import AggRow from './agg_row';
import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
export const PositiveOnlyAgg = props => {
const { siblings } = props;
@@ -31,6 +32,7 @@ export const PositiveOnlyAgg = props => {
const defaults = { unit: '' };
const model = { ...defaults, ...props.model };
+ const htmlId = htmlIdGenerator();
const handleChange = createChangeHandler(props.onChange, model);
const handleSelectChange = createSelectHandler(handleChange);
@@ -42,24 +44,31 @@ export const PositiveOnlyAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
+
+
+ Aggregation
+
+
+
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/serial_diff.js b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
index b4d2871b731a3..c1d86ce9e30de 100644
--- a/src/core_plugins/metrics/public/components/aggs/serial_diff.js
+++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
@@ -25,7 +25,7 @@ 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 } from '@elastic/eui';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
export const SerialDiffAgg = props => {
const { siblings } = props;
@@ -46,34 +46,45 @@ export const SerialDiffAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
- Lag
-
+
+
+ Aggregation
+
+
+
+
+
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ Should it be text or number?
+ */}
+
+
+
);
};
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 ebcde12d33c57..6fd85372bf921 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -25,7 +25,12 @@ import createChangeHandler from '../lib/create_change_handler';
import createSelectHandler from '../lib/create_select_handler';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
EuiComboBox,
+ EuiTitle,
+ EuiFormRow,
} from '@elastic/eui';
function SeriesAgg(props) {
@@ -60,11 +65,9 @@ function SeriesAgg(props) {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
- Series Agg is not compatible with the table visualization.
-
-
+
+ Series Agg is not compatible with the table visualization.
+
);
}
@@ -77,25 +80,28 @@ function SeriesAgg(props) {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
- Function
-
+
+
+ Aggregation
+
+
+
+
+
+
);
diff --git a/src/core_plugins/metrics/public/components/aggs/static.js b/src/core_plugins/metrics/public/components/aggs/static.js
index bedcbd75a0b29..aa431685c229e 100644
--- a/src/core_plugins/metrics/public/components/aggs/static.js
+++ b/src/core_plugins/metrics/public/components/aggs/static.js
@@ -24,7 +24,14 @@ import AggRow from './agg_row';
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,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiFieldNumber,
+ EuiFormRow,
+} from '@elastic/eui';
export const Static = props => {
const handleChange = createChangeHandler(props.onChange, props.model);
@@ -48,32 +55,27 @@ export const Static = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
-
-
- Static Value
-
-
+
+ Aggregation
+
+
+
+
-
-
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/std_agg.js b/src/core_plugins/metrics/public/components/aggs/std_agg.js
index 1e97dca5e8d4d..f61cea24b04f2 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_agg.js
@@ -24,7 +24,7 @@ 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 { htmlIdGenerator } from '@elastic/eui';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFormLabel } from '@elastic/eui';
function StandardAgg(props) {
const { model, panel, series, fields } = props;
@@ -47,32 +47,39 @@ function StandardAgg(props) {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
- {
- model.type !== 'count'
- ? (
-
- Field
-
- ) : null
- }
+
+
+ Aggregation
+
+
+ {
+ model.type !== 'count'
+ ? (
+
+
+
+
+ ) : null
+ }
+
+
);
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 d8e4e96720c24..f7608c875d12e 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -27,7 +27,12 @@ import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
EuiComboBox,
+ EuiFieldText,
+ EuiFormRow,
} from '@elastic/eui';
export const StandardDeviationAgg = props => {
@@ -63,46 +68,48 @@ export const StandardDeviationAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
- Field
-
-
- Sigma
-
-
- Mode
-
+
+
+ Aggregation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
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 4e4fe2e9e9406..30232933ffc71 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -27,7 +27,12 @@ import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFieldText,
EuiComboBox,
+ EuiFormLabel,
+ EuiFormRow,
} from '@elastic/eui';
export const StandardSiblingAgg = props => {
@@ -43,15 +48,14 @@ export const StandardSiblingAgg = props => {
const stdDev = {};
if (model.type === 'std_deviation_bucket') {
stdDev.sigma = (
-
- Sigma
-
+
+
+
+
);
const modeOptions = [
@@ -65,16 +69,16 @@ export const StandardSiblingAgg = props => {
});
stdDev.mode = (
-
- Mode
-
+
+
+
+
);
}
@@ -86,27 +90,34 @@ export const StandardSiblingAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
- { stdDev.sigma }
- { stdDev.mode }
+
+
+ Aggregation
+
+
+
+
+
+ { stdDev.sigma }
+ { stdDev.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 bfda4f9780c72..06abcfad6039f 100644
--- a/src/core_plugins/metrics/public/components/aggs/top_hit.js
+++ b/src/core_plugins/metrics/public/components/aggs/top_hit.js
@@ -26,7 +26,12 @@ import createSelectHandler from '../lib/create_select_handler';
import createTextHandler from '../lib/create_text_handler';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
EuiComboBox,
+ EuiSpacer,
+ EuiFormRow,
} from '@elastic/eui';
export const TopHitAgg = props => {
@@ -72,23 +77,20 @@ export const TopHitAgg = props => {
onDelete={props.onDelete}
siblings={props.siblings}
>
-
-
-
-
-
- Field
-
+
+
+ Aggregation
+
+
+
{
value={model.field}
onChange={handleSelectChange('field')}
/>
-
-
-
-
-
- Size
-
+
+
+
+
+
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ Should it be text or number?
+ */}
-
-
- Aggregate with
-
+
+
+
+
-
-
- Order by
-
+
+
+
+
-
-
- Order
-
+
+
+
+
-
-
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/aggs/unsupported_agg.js b/src/core_plugins/metrics/public/components/aggs/unsupported_agg.js
index 15276f0d64ad9..3c24bc1b5266f 100644
--- a/src/core_plugins/metrics/public/components/aggs/unsupported_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/unsupported_agg.js
@@ -19,6 +19,8 @@
import AggRow from './agg_row';
import React from 'react';
+import { EuiCode, EuiTitle } from '@elastic/eui';
+
export function UnsupportedAgg(props) {
return (
-
-
- The {props.model.type} aggregation is no longer
- supported.
-
-
+ The {props.model.type} aggregation is no longer supported.
+
);
}
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
index f80537ebd2048..1ace6b717aee8 100644
--- a/src/core_plugins/metrics/public/components/aggs/vars.js
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -23,6 +23,7 @@ import _ from 'lodash';
import AddDeleteButtons from '../add_delete_buttons';
import * as collectionActions from '../lib/collection_actions';
import MetricSelect from './metric_select';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldText } from '@elastic/eui';
class CalculationVars extends Component {
@@ -44,34 +45,36 @@ class CalculationVars extends Component {
const handleAdd = collectionActions.handleAdd.bind(null, this.props);
const handleDelete = collectionActions.handleDelete.bind(null, this.props, row);
return (
-
+
+
+
+
+
+
+
+
+
+
);
}
@@ -80,9 +83,9 @@ class CalculationVars extends Component {
if (!model[name]) return (
);
const rows = model[name].map(this.renderRow);
return (
-
+
{ rows }
-
+
);
}
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index b7c97455c7b76..88c8f2062121b 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -30,6 +30,15 @@ import YesNo from './yes_no';
import {
htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiButton,
+ EuiCode,
EuiText,
} from '@elastic/eui';
@@ -74,118 +83,133 @@ class AnnotationsEditor extends Component {
const handleDelete = collectionActions.handleDelete
.bind(null, this.props, model);
return (
-
-
-
-
-
-
-
- Index Pattern (required)
-
-
-
-
- Time Field (required)
-
-
-
-
-
-
- Query String
-
-
-
- Ignore Global Filters
-
-
- Ignore Panel Filters
-
-
-
-
-
Icon (required)
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ignore global filters?
+
-
-
-
- Fields (required - comma separated paths)
-
-
-
-
- Row Template (required - eg.{'{{field}}'})
-
-
-
-
-
+
+
+ Ignore panel filters?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ eg. {'{{field}}'}
+ }
+ fullWidth
+ >
+
+
+
+
+
+
+
+
+
);
}
@@ -197,36 +221,26 @@ class AnnotationsEditor extends Component {
const handleAdd = collectionActions.handleAdd
.bind(null, this.props, newAnnotation);
content = (
-
-
- Click the button below to create an annotation data source.
- Add Data Source
-
-
-
+
+ Click the button below to create an annotation data source.
+ Add data source
+
);
} else {
const annotations = model.annotations.map(this.renderRow);
content = (
-
-
-
- Data Sources
-
-
+
+
+ Data sources
+
+
);
}
return(
-
+
{ content }
);
diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 841b716e5cec2..3458556300079 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -22,7 +22,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { EuiToolTip, } from '@elastic/eui';
+import { EuiIconTip, } from '@elastic/eui';
import Picker from './custom_color_picker';
class ColorPicker extends Component {
@@ -66,7 +66,7 @@ class ColorPicker extends Component {
return (
);
@@ -75,7 +75,7 @@ class ColorPicker extends Component {
);
@@ -87,23 +87,21 @@ class ColorPicker extends Component {
let clear;
if (!this.props.disableTrash) {
clear = (
-
-
-
+
+
);
}
return (
-
+
{ swatch }
{ clear }
{
this.state.displayPicker
? (
-
+
- and {this.props.secondaryName} to
-
+
+
+ and {this.props.secondaryName} to
+
+
+
+
);
}
return (
-
-
Set {this.props.primaryName} to
-
+
+
+ Set {this.props.primaryName} to
+
+
+
+
{ secondary }
-
- if metric is
-
-
+
+
+ if metric is
+
+
+
+
+
-
+
+
);
}
@@ -123,7 +144,7 @@ class ColorRules extends Component {
if (!model[name]) return (
);
const rows = model[name].map(this.renderRow);
return (
-
+
{ rows }
);
diff --git a/src/core_plugins/metrics/public/components/custom_color_picker.js b/src/core_plugins/metrics/public/components/custom_color_picker.js
index 64fa0df8c8be0..9a5775876e864 100644
--- a/src/core_plugins/metrics/public/components/custom_color_picker.js
+++ b/src/core_plugins/metrics/public/components/custom_color_picker.js
@@ -82,8 +82,8 @@ export class CustomColorPicker extends Component {
});
return (
-
-
+
+
-
-
-
-
-
+
+
+
-
-
+
+
-
+
-
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
index 9dbfa1438637b..460f52920be05 100644
--- a/src/core_plugins/metrics/public/components/data_format_picker.js
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import _ from 'lodash';
import {
- EuiComboBox,
+ htmlIdGenerator, EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldText, EuiLink,
} from '@elastic/eui';
import { durationOutputOptions, durationInputOptions } from './lib/durations';
const durationFormatTest = /[pnumshdwMY]+,[pnumshdwMY]+/;
@@ -91,6 +91,7 @@ class DataFormatPicker extends Component {
}
render() {
+ const htmlId = htmlIdGenerator();
const value = this.props.value || '';
let defaultValue = value;
if (!_.includes(['bytes', 'number', 'percent'], value)) {
@@ -120,84 +121,85 @@ class DataFormatPicker extends Component {
return to === option.value;
});
return (
-
-
- {this.props.label}
-
-
-
-
From
-
-
-
To
-
-
-
Decimal Places
-
this.decimals = el}
- onChange={this.handleDurationChange('decimals')}
- type="text"
- />
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.decimals = el}
+ onChange={this.handleDurationChange('decimals')}
+ />
+
+
+
);
}
if (defaultValue === 'custom') {
custom = (
-
-
-
this.custom = el}
- onChange={this.handleCustomChange}
- type="text"
- />
-
+
+ See Numeral.js
+ }
+ >
+ this.custom = el}
+ onChange={this.handleCustomChange}
+ />
+
+
);
}
return (
-
-
- {this.props.label}
-
-
-
+
+
+
+
+
{custom}
-
+
);
}
diff --git a/src/core_plugins/metrics/public/components/error.js b/src/core_plugins/metrics/public/components/error.js
index b34e82809c3b3..eddcdf9d47c4b 100644
--- a/src/core_plugins/metrics/public/components/error.js
+++ b/src/core_plugins/metrics/public/components/error.js
@@ -36,22 +36,22 @@ function ErrorComponent(props) {
const scriptStack = _.get(error, 'error.caused_by.script_stack');
reason = _.get(error, 'error.caused_by.caused_by.reason');
additionalInfo = (
-
-
{reason}
-
{scriptStack.join('\n')}
+
+
{reason}
+
{scriptStack.join('\n')}
);
} else if (reason) {
additionalInfo = (
-
-
{reason}
+
);
}
return (
-
-
{title || 'The request for this panel failed.'}
+
+
{title || 'The request for this panel failed'}
{additionalInfo}
);
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index d56657dba6824..576f62d2ad5dc 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -27,15 +27,10 @@ function renderOption(option) {
const icon = option.value;
const label = option.label;
return (
-
-
-
-
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js
index a76672897bf01..15712513f416b 100644
--- a/src/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -23,7 +23,15 @@ import FieldSelect from './aggs/field_select';
import createSelectHandler from './lib/create_select_handler';
import createTextHandler from './lib/create_text_handler';
import YesNo from './yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiFieldText,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+} from '@elastic/eui';
export const IndexPattern = props => {
const { fields, prefix } = props;
@@ -45,48 +53,63 @@ export const IndexPattern = props => {
const model = { ...defaults, ...props.model };
return (
-
- Index Pattern
-
-
-
- Time Field
-
-
-
-
- Interval (auto, 1m, 1d, 7d, 1y, >=1m)
-
-
-
Drop Last Bucket
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Drop last bucket?
+
+
);
};
@@ -94,7 +117,6 @@ export const IndexPattern = props => {
IndexPattern.defaultProps = {
prefix: '',
disabled: false,
- className: 'vis_editor__row'
};
IndexPattern.propTypes = {
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index 706548b32af3c..649514512ef74 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -34,6 +34,8 @@ import 'brace/theme/github';
import {
EuiText,
EuiCodeBlock,
+ EuiSpacer,
+ EuiTitle,
} from '@elastic/eui';
class MarkdownEditor extends Component {
@@ -114,8 +116,8 @@ class MarkdownEditor extends Component {
walk(variables);
return (
-
-
+
+
-
+
- The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '}
-
- Click here for documentation
- {' '}
- on the available expressions.
+
+ The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '}
+
+ Click here for documentation
+ {' '}
+ on the available expressions.
+
@@ -145,25 +149,30 @@ class MarkdownEditor extends Component {
{rows}
+
{rows.length === 0 && (
-
No variables available for the selected data metrics.
+
+ No variables available for the selected data metrics.
+
)}
-
-
-
- There is also a special variable named _all which you can use to access the entire tree. This is useful for
- creating lists with data from a group by...
-
-
-
+
+
+
+
+ There is also a special variable named _all which you can use to access the entire tree. This is useful for
+ creating lists with data from a group by...
+
+
+
+
{`# All servers:
- {{#each _all}}
- - {{ label }} {{ last.formatted }}
- {{/each}}`}
+ {{#each _all}}
+ - {{ label }} {{ last.formatted }}
+ {{/each}}`}
diff --git a/src/core_plugins/metrics/public/components/no_data.js b/src/core_plugins/metrics/public/components/no_data.js
index 331d3f3a5c36d..579d87076fe05 100644
--- a/src/core_plugins/metrics/public/components/no_data.js
+++ b/src/core_plugins/metrics/public/components/no_data.js
@@ -21,8 +21,8 @@ import React from 'react';
function NoDataComponent() {
return (
-
-
No data to display for the selected metrics .
+
+
No data to display for the selected metrics
);
}
diff --git a/src/core_plugins/metrics/public/components/panel_config/_index.scss b/src/core_plugins/metrics/public/components/panel_config/_index.scss
new file mode 100644
index 0000000000000..b2c1b560dcdb1
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/_index.scss
@@ -0,0 +1 @@
+@import './panel_config';
diff --git a/src/core_plugins/metrics/public/components/panel_config/_panel_config.scss b/src/core_plugins/metrics/public/components/panel_config/_panel_config.scss
new file mode 100644
index 0000000000000..886b64f6fe647
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/_panel_config.scss
@@ -0,0 +1,4 @@
+.tvbPanelConfig__container {
+ padding: $euiSize;
+ background-color: $euiColorLightestShade;
+}
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 043133992663d..4d436754cc129 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -30,6 +30,18 @@ import YesNo from '../yes_no';
import {
htmlIdGenerator,
EuiComboBox,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiFieldNumber,
+ EuiTitle,
+ EuiHorizontalRule,
} from '@elastic/eui';
class GaugePanelConfig extends Component {
@@ -90,92 +102,137 @@ class GaugePanelConfig extends Component {
);
} else {
view = (
-
-
-
-
- Panel Filter
-
-
-
Ignore Global Filter
-
-
-
-
Background Color
-
-
- Gauge Max (empty for auto)
-
-
-
- Gauge Style
-
-
+
+
+ Data
-
-
Inner Color
-
-
- Inner Line Width
-
-
-
- Gauge Line Width
-
-
-
-
-
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
+
+
+ Style
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ It accepts a null value, but is passed a empty string.
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Background color:
+
+
+
+
+ Inner color:
+
+
+
+
+
+ Color rules
+
);
}
return (
-
-
+ this.switchTab('data')}
- >Data
-
-
+ Data
+
+ this.switchTab('options')}
- >Panel Options
-
-
+ >
+ Panel options
+
+
{view}
);
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 29d419b596696..f3725a1cef0ef 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -32,6 +32,17 @@ import { KuiCodeEditor } from '@kbn/ui-framework/components';
import {
htmlIdGenerator,
EuiComboBox,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiHorizontalRule,
} from '@elastic/eui';
const lessC = less(window, { env: 'production' });
@@ -93,61 +104,91 @@ class MarkdownPanelConfig extends Component {
);
} else {
view = (
-
-
-
-
Background Color
-
-
- Panel Filter
-
-
-
Ignore Global Filter
-
-
-
-
Show Scrollbars
-
+
+ Data
- Vertical Alignment
-
-
-
-
-
-
Custom CSS (supports Less)
-
-
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
+
+
+ Style
+
+ Background color:
+
+
+
+
+ Show scrollbars?
+
+
+
+
+ Vertical alignment:
+
+
+
+
+
+ Custom CSS (supports Less)
+
);
}
return (
-
-
+ this.switchTab('markdown')}
- >Markdown
-
-
+ Markdown
+
+ this.switchTab('data')}
- >Data
-
-
+ Data
+
+ this.switchTab('options')}
- >Panel Options
-
-
+ >
+ Panel options
+
+
{view}
);
diff --git a/src/core_plugins/metrics/public/components/panel_config/metric.js b/src/core_plugins/metrics/public/components/panel_config/metric.js
index 173cfc404a2ab..9285e5af31542 100644
--- a/src/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/core_plugins/metrics/public/components/panel_config/metric.js
@@ -25,7 +25,20 @@ import createTextHandler from '../lib/create_text_handler';
import ColorRules from '../color_rules';
import YesNo from '../yes_no';
import uuid from 'uuid';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiHorizontalRule,
+} from '@elastic/eui';
class MetricPanelConfig extends Component {
@@ -67,62 +80,77 @@ class MetricPanelConfig extends Component {
);
} else {
view = (
-
-
-
-
- Panel Filter
-
-
-
Ignore Global Filter
-
+
+ Data
-
-
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
+
+
+ Color rules
+
);
}
return (
-
-
+ this.switchTab('data')}
- >Data
-
-
+ Data
+
+ this.switchTab('options')}
data-test-subj="metricEditorPanelOptionsBtn"
- >Panel Options
-
-
+ >
+ Panel options
+
+
{view}
);
diff --git a/src/core_plugins/metrics/public/components/panel_config/table.js b/src/core_plugins/metrics/public/components/panel_config/table.js
index 58fcf43c7aaad..c247418494351 100644
--- a/src/core_plugins/metrics/public/components/panel_config/table.js
+++ b/src/core_plugins/metrics/public/components/panel_config/table.js
@@ -26,7 +26,22 @@ import createTextHandler from '../lib/create_text_handler';
import createSelectHandler from '../lib/create_select_handler';
import uuid from 'uuid';
import YesNo from '../yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiHorizontalRule,
+ EuiCode,
+ EuiText,
+} from '@elastic/eui';
class TablePanelConfig extends Component {
@@ -59,45 +74,63 @@ class TablePanelConfig extends Component {
if (selectedTab === 'data') {
view = (
-
-
-
+
+
+
For the table visualization you need to define a field to
group by using a terms aggregation.
-
-
-
Group By Field
-
-
-
Column Label
-
-
Rows
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+ EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+ Should it be number or string?
+ */}
+
+
+
+
+
-
-
Item Url (This supports mustache templating.
- {'{{key}}'} is set to the term)
-
-
+
+ Data
- Panel Filter
- Ignore Global Filter
-
+ This supports mustache templating.
+ {'{{key}}'} is set to the term.
+
+ }
+ >
+
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
);
}
return (
-
-
+ this.switchTab('data')}
>
Columns
-
-
+ this.switchTab('options')}
>
- Panel Options
-
-
+ Panel options
+
+
{view}
);
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 85b09047b7d9f..cc7805a3370be 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -29,6 +29,17 @@ import YesNo from '../yes_no';
import {
htmlIdGenerator,
EuiComboBox,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiHorizontalRule,
} from '@elastic/eui';
class TimeseriesPanelConfig extends Component {
@@ -99,127 +110,165 @@ class TimeseriesPanelConfig extends Component {
);
} else {
view = (
-
-
-
-
Axis Min
-
-
Axis Max
-
-
Axis Position
-
-
-
Axis Scale
-
-
-
-
-
Background Color
-
-
Show Legend
-
-
Legend Position
-
-
-
Display Grid
-
-
-
-
Panel Filter
-
-
Ignore Global Filter
-
+
+ Data
+
+
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
+
+
+
+
+ Style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Background color:
+
+
+
+
+ Show legend?
+
+
+
+
+ Legend position
+
+
+
+
+ Display grid
+
+
+
+
+
);
}
return (
-
-
+ this.switchTab('data')}
- >Data
-
-
+ Data
+
+ this.switchTab('options')}
- >Panel Options
-
-
+ Panel options
+
+ this.switchTab('annotations')}
- >Annotations
-
-
+ >
+ Annotations
+
+
{view}
);
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js
index 98b5155e2c0b5..163120d18e94e 100644
--- a/src/core_plugins/metrics/public/components/panel_config/top_n.js
+++ b/src/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -26,7 +26,21 @@ 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,
+ EuiTabs,
+ EuiTab,
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiFieldText,
+ EuiTitle,
+ EuiHorizontalRule,
+ EuiCode,
+} from '@elastic/eui';
class TopNPanelConfig extends Component {
@@ -67,52 +81,85 @@ class TopNPanelConfig extends Component {
);
} else {
view = (
-
-
-
- Item Url (This supports mustache templating.
- {'{{key}}'} is set to the term)
-
-
+
+ Data
-
-
-
Background Color
-
-
- Panel Filter
-
-
-
Ignore Global Filter
-
+ This supports mustache templating.
+ {'{{key}}'} is set to the term.
+
+ }
+ >
+
-
-
+
+
+
+
+
+
+
+ Ignore global filter?
+
+
+
+
+
+ Style
+
+ Background color:
+
+
+
+
+
+ Color rules
+
);
}
return (
-
-
+ this.switchTab('data')}
- >Data
-
-
+ Data
+
+ this.switchTab('options')}
- >Panel Options
-
-
+ >
+ Panel options
+
+
{view}
);
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
index 3f734aae65ace..ba46b589f1a04 100644
--- a/src/core_plugins/metrics/public/components/series_config.js
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -24,7 +24,17 @@ import createSelectHandler from './lib/create_select_handler';
import createTextHandler from './lib/create_text_handler';
import YesNo from './yes_no';
import { IndexPattern } from './index_pattern';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFieldText,
+ EuiFormRow,
+ EuiCode,
+ EuiHorizontalRule,
+ EuiFormLabel,
+ EuiSpacer,
+} from '@elastic/eui';
export const SeriesConfig = props => {
const defaults = { offset_time: '', value_template: '' };
@@ -34,65 +44,81 @@ export const SeriesConfig = props => {
const htmlId = htmlIdGenerator();
return (
-
-
-
-
-
- Template (eg.{'{{value}}/s'})
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- Offset series time by (1m, 1h, 1w, 1d)
-
- {'{{value}}/s'} }
+ fullWidth
+ >
+
+
+
-
-
Override Index Pattern
+ label="Offset series time by (1m, 1h, 1w, 1d)"
+ >
+
+
+
+
+
+
+
+
+
+ Override Index Pattern?
+
+
-
-
- Filter
-
-
-
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/series_editor.js b/src/core_plugins/metrics/public/components/series_editor.js
index 69aaadc3b343e..c48efffb4f7ec 100644
--- a/src/core_plugins/metrics/public/components/series_editor.js
+++ b/src/core_plugins/metrics/public/components/series_editor.js
@@ -61,6 +61,7 @@ class SeriesEditor extends Component {
const { fields, model, name, limit, colorPicker } = props;
return (
= limit}
disableDelete={model[name].length < 2}
@@ -88,12 +89,12 @@ class SeriesEditor extends Component {
this.props.onChange({ series });
};
return (
-
+
{ series }
diff --git a/src/core_plugins/metrics/public/components/splits/everything.js b/src/core_plugins/metrics/public/components/splits/everything.js
index 73fc8cc185ae2..4eb7c5e031323 100644
--- a/src/core_plugins/metrics/public/components/splits/everything.js
+++ b/src/core_plugins/metrics/public/components/splits/everything.js
@@ -21,20 +21,23 @@ import createSelectHandler from '../lib/create_select_handler';
import GroupBySelect from './group_by_select';
import PropTypes from 'prop-types';
import React from 'react';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
function SplitByEverything(props) {
const { onChange, model } = props;
+ const htmlId = htmlIdGenerator();
const handleSelectChange = createSelectHandler(onChange);
return (
-
+
+
+
+
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/splits/filter.js b/src/core_plugins/metrics/public/components/splits/filter.js
index ab50c8f1ff1ac..05248577c758f 100644
--- a/src/core_plugins/metrics/public/components/splits/filter.js
+++ b/src/core_plugins/metrics/public/components/splits/filter.js
@@ -22,29 +22,34 @@ import createSelectHandler from '../lib/create_select_handler';
import GroupBySelect from './group_by_select';
import PropTypes from 'prop-types';
import React from 'react';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldText } from '@elastic/eui';
export const SplitByFilter = props => {
const { onChange } = props;
const defaults = { filter: '' };
const model = { ...defaults, ...props.model };
+ const htmlId = htmlIdGenerator();
const handleTextChange = createTextHandler(onChange);
const handleSelectChange = createSelectHandler(onChange);
return (
-
-
Group By
-
-
-
Query String
-
-
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/splits/filter_items.js b/src/core_plugins/metrics/public/components/splits/filter_items.js
index 9e439411cc705..c00b29897f8ab 100644
--- a/src/core_plugins/metrics/public/components/splits/filter_items.js
+++ b/src/core_plugins/metrics/public/components/splits/filter_items.js
@@ -24,6 +24,7 @@ import * as collectionActions from '../lib/collection_actions';
import AddDeleteButtons from '../add_delete_buttons';
import ColorPicker from '../color_picker';
import uuid from 'uuid';
+import { EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
class FilterItems extends Component {
constructor(props) {
@@ -53,41 +54,42 @@ class FilterItems extends Component {
const handleDelete = collectionActions.handleDelete
.bind(null, this.props, model);
return (
-
-
+
+
-
-
+
-
-
+
-
-
+
+
);
}
@@ -96,7 +98,7 @@ class FilterItems extends Component {
if (!model[name]) return (
);
const rows = model[name].map(this.renderRow);
return (
-
+
{ rows }
);
diff --git a/src/core_plugins/metrics/public/components/splits/filters.js b/src/core_plugins/metrics/public/components/splits/filters.js
index 9f3d72b1c51df..9e86b232402d2 100644
--- a/src/core_plugins/metrics/public/components/splits/filters.js
+++ b/src/core_plugins/metrics/public/components/splits/filters.js
@@ -22,29 +22,30 @@ import GroupBySelect from './group_by_select';
import FilterItems from './filter_items';
import PropTypes from 'prop-types';
import React from 'react';
+import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+
function SplitByFilters(props) {
const { onChange, model } = props;
+ const htmlId = htmlIdGenerator();
const handleSelectChange = createSelectHandler(onChange);
return(
-
-
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js
index 8f377f03fe82b..e0436a7047f2d 100644
--- a/src/core_plugins/metrics/public/components/splits/group_by_select.js
+++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js
@@ -35,6 +35,7 @@ function GroupBySelect(props) {
});
return (
{
+ const htmlId = htmlIdGenerator();
const handleTextChange = createTextHandler(props.onChange);
const handleSelectChange = createSelectHandler(props.onChange);
const { indexPattern } = props;
@@ -47,52 +46,64 @@ export const SplitByTerms = props => {
});
return (
-
-
Group By
-
-
-
By
-
-
-
Top
-
-
Order By
-
-
-
Direction
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index 057a4fb071021..91cb776d7b5b7 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -139,8 +139,8 @@ class VisEditor extends Component {
if (model && this.props.visData) {
return (
-
-
+
+
-
+
-
- Auto Apply
-
-
-
+
+
-
-
-
-
-
- {applyMessage}
-
-
+
+
+
+
+
+ {applyMessage}
+
+
+
+
+ {!autoApply &&
+
+ Apply changes
+
+ }
+
);
return (
-
+
{applyButton}
props.onClick(type)}
data-test-subj={`${type}TsvbTypeBtn`}
>
-
-
-
- { label }
-
-
+ { label }
+
);
}
VisPickerItem.propTypes = {
- icon: PropTypes.string,
label: PropTypes.string,
onClick: PropTypes.func,
type: PropTypes.string,
@@ -61,13 +50,13 @@ function VisPicker(props) {
};
const { model } = props;
- const icons = [
- { type: 'timeseries', icon: 'fa-line-chart', label: 'Time Series' },
- { type: 'metric', icon: 'fa-superscript', label: 'Metric' },
- { type: 'top_n', icon: 'fa-bar-chart fa-rotate-90', label: 'Top N' },
- { type: 'gauge', icon: 'fa-circle-o-notch', label: 'Gauge' },
- { type: 'markdown', icon: 'fa-paragraph', label: 'Markdown' },
- { type: 'table', icon: 'fa-paragraph', label: 'Table' }
+ const tabs = [
+ { type: 'timeseries', label: 'Time Series' },
+ { type: 'metric', label: 'Metric' },
+ { type: 'top_n', label: 'Top N' },
+ { type: 'gauge', label: 'Gauge' },
+ { type: 'markdown', label: 'Markdown' },
+ { type: 'table', label: 'Table' }
].map(item => {
return (
- { icons }
-
+
+ { tabs }
+
);
}
diff --git a/src/core_plugins/metrics/public/components/vis_types/_index.scss b/src/core_plugins/metrics/public/components/vis_types/_index.scss
new file mode 100644
index 0000000000000..a2918916c4c4a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/_index.scss
@@ -0,0 +1,3 @@
+@import './vis_types';
+
+@import './markdown/markdown';
diff --git a/src/core_plugins/metrics/public/components/vis_types/_vis_types.scss b/src/core_plugins/metrics/public/components/vis_types/_vis_types.scss
new file mode 100644
index 0000000000000..f4f9230b32dc2
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/_vis_types.scss
@@ -0,0 +1,6 @@
+.tvbVis {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 100%;
+ padding: $euiSizeS;
+}
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
index b2b702304699c..6c95520995fd3 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
@@ -24,7 +24,7 @@ import AddDeleteButtons from '../../add_delete_buttons';
import { SeriesConfig } from '../../series_config';
import Sortable from 'react-anything-sortable';
import Split from '../../split';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
import createAggRowRender from '../../lib/create_agg_row_render';
import createTextHandler from '../../lib/create_text_handler';
import { createUpDownHandler } from '../../lib/sort_keyhandler';
@@ -48,15 +48,11 @@ function GaugeSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -70,19 +66,17 @@ function GaugeSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
-
);
@@ -96,24 +90,22 @@ function GaugeSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
- >Metrics
-
-
+ Metrics
+
+ props.switchTab('options')}
- >Options
-
-
+ >
+ Options
+
+
{seriesBody}
);
@@ -131,45 +123,54 @@ function GaugeSeries(props) {
let dragHandle;
if (!props.disableDelete) {
dragHandle = (
-
-
-
-
+
+
+
+
);
}
return (
-
-
-
+
+
-
-
+ />
+
+
+
{ colorPicker }
-
-
- { dragHandle }
+
+
+
+
+
+ { dragHandle }
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
index 1330737a6111f..55c861e1fcee4 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
@@ -83,7 +83,7 @@ function GaugeVisualization(props) {
const style = { backgroundColor: panelBackgroundColor };
return (
-
+
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/_markdown.scss b/src/core_plugins/metrics/public/components/vis_types/markdown/_markdown.scss
new file mode 100644
index 0000000000000..d6dc376911ef9
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/_markdown.scss
@@ -0,0 +1,30 @@
+.tvbMarkdown {
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+ position: relative;
+}
+
+.tvbMarkdown__content {
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+
+ &.middle {
+ justify-content: center;
+ }
+ &.bottom {
+ justify-content: flex-end;
+ }
+ &.scrolling {
+ overflow: auto;
+ }
+}
+
+
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
index 738dddc84f768..7889f433a8d4a 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
@@ -25,6 +25,7 @@ import Sortable from 'react-anything-sortable';
import Split from '../../split';
import createAggRowRender from '../../lib/create_agg_row_render';
import createTextHandler from '../../lib/create_text_handler';
+import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
function MarkdownSeries(props) {
const {
@@ -45,15 +46,11 @@ function MarkdownSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -67,19 +64,17 @@ function MarkdownSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
-
);
@@ -93,24 +88,22 @@ function MarkdownSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
- >Metrics
-
-
+ Metrics
+
+ props.switchTab('options')}
- >Options
-
-
+ >
+ Options
+
+
{seriesBody}
);
@@ -118,47 +111,55 @@ function MarkdownSeries(props) {
return (
-
-
-
+
+
-
-
-
-
+ />
+
+
+
+
+
+
+
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
index b4ceb0313e5a8..1ebf9e0b9649a 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
@@ -47,8 +47,8 @@ function MarkdownVisualization(props) {
...variables
}
);
- let className = 'thorMarkdown';
- let contentClassName = `thorMarkdown__content ${model.markdown_vertical_align}`;
+ let className = 'tvbMarkdown';
+ let contentClassName = `tvbMarkdown__content ${model.markdown_vertical_align}`;
if (model.markdown_scrollbars) contentClassName += ' scrolling';
if (reversed) className += ' reversed';
const markdownError = markdownSource instanceof Error ? markdownSource : null;
@@ -63,7 +63,7 @@ function MarkdownVisualization(props) {
);
}
return (
-
+
{markdown}
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/series.js b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
index ae72cfc2d1ba5..77b39ca3c9390 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
@@ -24,7 +24,7 @@ import AddDeleteButtons from '../../add_delete_buttons';
import { SeriesConfig } from '../../series_config';
import Sortable from 'react-anything-sortable';
import Split from '../../split';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
import createAggRowRender from '../../lib/create_agg_row_render';
import createTextHandler from '../../lib/create_text_handler';
import { createUpDownHandler } from '../../lib/sort_keyhandler';
@@ -48,15 +48,11 @@ function MetricSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -70,19 +66,17 @@ function MetricSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
-
);
@@ -96,24 +90,22 @@ function MetricSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
- >Metrics
-
-
+ Metrics
+
+ props.switchTab('options')}
- >Options
-
-
+ >
+ Options
+
+
{seriesBody}
);
@@ -122,57 +114,65 @@ function MetricSeries(props) {
let colorPicker;
if (props.colorPicker) {
colorPicker = (
-
+
+
);
}
let dragHandle;
if (!props.disableDelete) {
dragHandle = (
-
-
-
-
+
+
+
+
);
}
return (
-
-
-
+
+
-
-
- { colorPicker }
-
-
- { dragHandle }
+ />
+
+
+ { colorPicker }
+
+
+
+
+ { dragHandle }
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
index a81f7c4ecb107..f7d2607e6ce15 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
@@ -74,8 +74,10 @@ function MetricVisualization(props) {
params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
}
const style = { backgroundColor: panelBackgroundColor };
+ params.backgroundColor = panelBackgroundColor;
+
return (
-
+
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/config.js b/src/core_plugins/metrics/public/components/vis_types/table/config.js
index 67ed6e00205bf..324bc89d4dc86 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -29,6 +29,15 @@ import ColorRules from '../../color_rules';
import {
htmlIdGenerator,
EuiComboBox,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFieldText,
+ EuiFormRow,
+ EuiCode,
+ EuiHorizontalRule,
+ EuiFormLabel,
+ EuiSpacer,
+ EuiTitle,
} from '@elastic/eui';
class TableSeriesConfig extends Component {
@@ -65,67 +74,102 @@ class TableSeriesConfig extends Component {
});
return (
-
-
-
+
+
+
+
Template (eg.{'{{value}}/s'})
-
-
- Filter
-
+ eg.{'{{value}}/s'} }
+ fullWidth
+ >
+
+
+
+
+
+
+ Show Trend Arrows
+ label="Filter"
+ fullWidth
+ >
+
+
+ Show trend arrows?
+
-
-
+
+
+
+
+
+
-
Aggregate Function
-
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
Color rules
+
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/series.js b/src/core_plugins/metrics/public/components/vis_types/table/series.js
index f44df0306f9f5..8802f1436d960 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/series.js
@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
import AddDeleteButtons from '../../add_delete_buttons';
import SeriesConfig from './config';
import Sortable from 'react-anything-sortable';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
import createTextHandler from '../../lib/create_text_handler';
import createAggRowRender from '../../lib/create_agg_row_render';
import { createUpDownHandler } from '../../lib/sort_keyhandler';
@@ -42,15 +42,11 @@ function TopNSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -64,7 +60,7 @@ function TopNSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
@@ -81,22 +77,22 @@ function TopNSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
>
Metrics
-
-
+ props.switchTab('options')}
>
Options
-
-
+
+
{seriesBody}
);
@@ -105,40 +101,50 @@ function TopNSeries(props) {
let dragHandle;
if (!props.disableDelete) {
dragHandle = (
-
-
-
-
+
+
+
+
);
}
return (
-
-
-
-
-
-
-
- { dragHandle }
+
+
+
+
+
+
+
+ { dragHandle }
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/vis.js b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
index f65d738db43de..223bb7193bc17 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
import tickFormatter from '../../lib/tick_formatter';
import calculateLabel from '../../../../common/calculate_label';
import { isSortable } from './is_sortable';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiIcon } from '@elastic/eui';
import replaceVars from '../../lib/replace_vars';
function getColor(rules, colorKey, value) {
@@ -62,24 +62,24 @@ class TableVis extends Component {
const value = formatter(item.last);
let trend;
if (column.trend_arrows) {
- const trendClass = item.slope > 0 ? 'fa-long-arrow-up' : 'fa-long-arrow-down';
+ const trendIcon = item.slope > 0 ? 'sortUp' : 'sortDown';
trend = (
-
-
+
);
}
const style = { color: getColor(column.color_rules, 'text', item.last) };
return (
-
- { value }
+
+ { value }
{trend}
);
});
return (
- {rowDisplay}
+ {rowDisplay}
{columns}
);
@@ -109,12 +109,12 @@ class TableVis extends Component {
if (isSortable(metric)) {
let sortIcon;
if (sort.column === item.id) {
- sortIcon = sort.order === 'asc' ? 'sort-asc' : 'sort-desc';
+ sortIcon = sort.order === 'asc' ? 'sortUp' : 'sortDown';
} else {
- sortIcon = 'sort';
+ sortIcon = 'empty';
}
sortComponent = (
-
+
);
}
let headerContent = (
@@ -122,13 +122,12 @@ class TableVis extends Component {
);
if (!isSortable(metric)) {
headerContent = (
-
{headerContent}
+
{headerContent}
);
}
return (
+
);
const handleSortClick = () => {
let order;
@@ -158,7 +157,7 @@ class TableVis extends Component {
};
return (
- {label} {sortComponent}
+ {label} {sortComponent}
{ columns }
);
@@ -184,7 +183,6 @@ class TableVis extends Component {
rows = (
{message}
@@ -193,7 +191,7 @@ class TableVis extends Component {
);
}
return(
-
+
{header}
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index da8b2e5b55a17..b615bfae2e3cc 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -27,6 +27,15 @@ import { IndexPattern } from '../../index_pattern';
import {
htmlIdGenerator,
EuiComboBox,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFieldText,
+ EuiFormRow,
+ EuiCode,
+ EuiHorizontalRule,
+ EuiFieldNumber,
+ EuiFormLabel,
+ EuiSpacer,
} from '@elastic/eui';
function TimeseriesConfig(props) {
@@ -84,252 +93,311 @@ function TimeseriesConfig(props) {
let type;
if (model.chart_type === 'line') {
type = (
-
-
- Chart Type
-
-
-
+
+
-
- Stacked
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Steps
+
-
- Fill (0 to 1)
-
-
-
- Line Width
-
-
-
- Point Size
-
-
-
Steps
-
-
-
- Chart Type
-
-
-
+
+
-
- Stacked
-
-
-
+
+
-
- Fill (0 to 1)
-
-
-
- Line Width
-
-
-
+
+
+
+
+
+
+
+
);
}
const disableSeparateYaxis = model.separate_axis ? false : true;
return (
-
-
-
+
+
+
+
- Template (eg.{'{{value}}/s'})
-
-
+
- { type }
-
-
- Offset series time by (1m, 1h, 1w, 1d)
-
-
eg.
{'{{value}}/s'} }
+ fullWidth
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ { type }
+
+
+
+
+
+ Hide in Legend
+ label="Offset series time by (1m, 1h, 1w, 1d)"
+ >
+
+
+ Hide in legend
+
- Split Color Theme
-
-
+
+
+
-
-
-
-
Override Index Pattern
+
+
+
+
+
+
+
+
+ Override Index Pattern?
+
+
-
-
- Filter
-
-
-
+
+
+
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
index b82f8dace2b70..23a349aaac39e 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
@@ -23,7 +23,7 @@ import ColorPicker from '../../color_picker';
import AddDeleteButtons from '../../add_delete_buttons';
import SeriesConfig from './config';
import Sortable from 'react-anything-sortable';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
import Split from '../../split';
import createAggRowRender from '../../lib/create_agg_row_render';
import createTextHandler from '../../lib/create_text_handler';
@@ -48,15 +48,11 @@ function TimeseriesSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -70,19 +66,17 @@ function TimeseriesSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
-
);
@@ -96,24 +90,22 @@ function TimeseriesSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
- >Metrics
-
-
+ Metrics
+
+ props.switchTab('options')}
- >Options
-
-
+ >
+ Options
+
+
{seriesBody}
);
@@ -131,45 +123,53 @@ function TimeseriesSeries(props) {
let dragHandle;
if (!props.disableDelete) {
dragHandle = (
-
-
-
-
+
+
+
+
);
}
return (
-
-
-
+
+
-
-
+ />
+
+
+
{ colorPicker }
-
-
- { dragHandle }
+
+
+
+
+
+ { dragHandle }
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
index 7e40d1fe5b2c5..1550522f4bf60 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
@@ -201,7 +201,7 @@ class TimeseriesVisualization extends Component {
params.reversed = color(panelBackgroundColor || backgroundColor).luminosity() < 0.45;
}
return (
-
+
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
index 5daa0d442eb53..fa112a41e39c8 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -24,7 +24,7 @@ import AddDeleteButtons from '../../add_delete_buttons';
import { SeriesConfig } from '../../series_config';
import Sortable from 'react-anything-sortable';
import Split from '../../split';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic/eui';
import createTextHandler from '../../lib/create_text_handler';
import createAggRowRender from '../../lib/create_agg_row_render';
import { createUpDownHandler } from '../../lib/sort_keyhandler';
@@ -46,15 +46,11 @@ function TopNSeries(props) {
const handleChange = createTextHandler(onChange);
const aggs = model.metrics.map(createAggRowRender(props));
- let caretClassName = 'fa fa-caret-down';
- if (!visible) caretClassName = 'fa fa-caret-right';
+ let caretIcon = 'arrowDown';
+ if (!visible) caretIcon = 'arrowRight';
let body = null;
if (visible) {
- let metricsClassName = 'kbnTabs__tab';
- let optionsClassname = 'kbnTabs__tab';
- if (selectedTab === 'metrics') metricsClassName += '-active';
- if (selectedTab === 'options') optionsClassname += '-active';
let seriesBody;
if (selectedTab === 'metrics') {
const handleSort = (data) => {
@@ -68,19 +64,17 @@ function TopNSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
- sortHandle="vis_editor__agg_sort"
+ sortHandle="tvbAggRow__sortHandle"
>
{ aggs }
-
);
@@ -94,24 +88,22 @@ function TopNSeries(props) {
);
}
body = (
-
-
-
+
+ props.switchTab('metrics')}
- >Metrics
-
-
+ Metrics
+
+ props.switchTab('options')}
- >Options
-
-
+ >
+ Options
+
+
{seriesBody}
);
@@ -129,45 +121,53 @@ function TopNSeries(props) {
let dragHandle;
if (!props.disableDelete) {
dragHandle = (
-
-
-
-
+
+
+
+
);
}
return (
-
-
-
+
+
-
-
+ />
+
+
+
{ colorPicker }
-
-
- { dragHandle }
+
+
+
+
+
+ { dragHandle }
+
+
-
+
+
+
{ body }
);
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
index 2023b884e3bb1..b2a4db7307200 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
@@ -93,7 +93,7 @@ function TopNVisualization(props) {
}
const style = { backgroundColor: panelBackgroundColor };
return (
-
+
);
diff --git a/src/core_plugins/metrics/public/components/vis_with_splits.js b/src/core_plugins/metrics/public/components/vis_with_splits.js
index 18b0bca7c8869..8dcf56dba4207 100644
--- a/src/core_plugins/metrics/public/components/vis_with_splits.js
+++ b/src/core_plugins/metrics/public/components/vis_with_splits.js
@@ -65,22 +65,20 @@ export function visWithSplits(WrappedComponent) {
}
};
return (
-
-
-
+
+
);
});
return (
-
{rows}
+
{rows}
);
}
SplitVisComponent.displayName = `SplitVisComponent(${getDisplayName(WrappedComponent)})`;
diff --git a/src/core_plugins/metrics/public/components/visualization.js b/src/core_plugins/metrics/public/components/visualization.js
index fc2536f9432bb..b72e1b047558c 100644
--- a/src/core_plugins/metrics/public/components/visualization.js
+++ b/src/core_plugins/metrics/public/components/visualization.js
@@ -79,10 +79,6 @@ function Visualization(props) {
return
;
}
-Visualization.defaultProps = {
- className: 'thor__visualization'
-};
-
Visualization.propTypes = {
backgroundColor: PropTypes.string,
className: PropTypes.string,
@@ -97,4 +93,8 @@ Visualization.propTypes = {
getConfig: PropTypes.func
};
+Visualization.defaultProps = {
+ className: 'tvbVis'
+};
+
export default Visualization;
diff --git a/src/core_plugins/metrics/public/components/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.js
index f76d7b96b4223..7a79ac6ca988c 100644
--- a/src/core_plugins/metrics/public/components/yes_no.js
+++ b/src/core_plugins/metrics/public/components/yes_no.js
@@ -20,6 +20,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash';
+import { EuiRadio, htmlIdGenerator } from '@elastic/eui';
function YesNo(props) {
const { name, value } = props;
@@ -30,29 +31,31 @@ function YesNo(props) {
props.onChange(parts);
};
};
+ const htmlId = htmlIdGenerator();
const inputName = name + _.uniqueId();
return (
-
-
-
-
-
+
+
);
}
diff --git a/src/core_plugins/metrics/public/components/yes_no.test.js b/src/core_plugins/metrics/public/components/yes_no.test.js
index 38ab90b61de07..e931ba5ce0775 100644
--- a/src/core_plugins/metrics/public/components/yes_no.test.js
+++ b/src/core_plugins/metrics/public/components/yes_no.test.js
@@ -29,7 +29,7 @@ describe('YesNo', () => {
const wrapper = shallow(
);
- wrapper.find('input').first().simulate('change');
+ wrapper.find('EuiRadio').first().simulate('change');
expect(handleChange.calledOnce).to.equal(true);
expect(handleChange.firstCall.args[0]).to.eql({
test: 1
@@ -41,7 +41,7 @@ describe('YesNo', () => {
const wrapper = shallow(
);
- wrapper.find('input').last().simulate('change');
+ wrapper.find('EuiRadio').last().simulate('change');
expect(handleChange.calledOnce).to.equal(true);
expect(handleChange.firstCall.args[0]).to.eql({
test: 0
diff --git a/src/core_plugins/metrics/public/index.scss b/src/core_plugins/metrics/public/index.scss
new file mode 100644
index 0000000000000..e989e05913813
--- /dev/null
+++ b/src/core_plugins/metrics/public/index.scss
@@ -0,0 +1,23 @@
+@import 'src/ui/public/styles/styling_constants';
+
+// Prefix all styles with "tvb" to avoid conflicts.
+// Examples
+// tvbChart
+// tvbChart__legend
+// tvbChart__legend--small
+// tvbChart__legend-isLoading
+
+@import './variables';
+@import './mixins';
+
+// Hacks (mostly todo's)
+@import './hacks';
+
+// Library overrides
+@import './ui_sortable';
+
+// Components
+@import './components/index';
+
+// Visualizations
+@import './visualizations/components/index';
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/index.js b/src/core_plugins/metrics/public/kbn_vis_types/index.js
index 5f2e340fefad3..a975875835708 100644
--- a/src/core_plugins/metrics/public/kbn_vis_types/index.js
+++ b/src/core_plugins/metrics/public/kbn_vis_types/index.js
@@ -17,8 +17,6 @@
* under the License.
*/
-import '../visualizations/less/main.less';
-import '../less/main.less';
import { MetricsRequestHandlerProvider } from './request_handler';
import { ReactEditorControllerProvider } from './editor_controller';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
diff --git a/src/core_plugins/metrics/public/less/color_picker.less b/src/core_plugins/metrics/public/less/color_picker.less
deleted file mode 100644
index ee715d9597a46..0000000000000
--- a/src/core_plugins/metrics/public/less/color_picker.less
+++ /dev/null
@@ -1,89 +0,0 @@
-.color_picker {
- background-color: #fff;
- border-radius: 2px;
- box-shadow: 0 0 2px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
- box-sizing: initial;
- width: 275px;
- font-family: 'Menlo';
-}
-
-.color_picker__saturation {
- width: 100%;
- padding-bottom: 55%;
- position: relative;
- border-radius: 2px 2px 0 0;
- overflow: hidden;
-}
-
-.color_picker__body {
- padding: 16px 16px 12px;
-}
-
-.color_picker__controls {
- display: flex;
-}
-
-.color_picker__color {
- width: 32px;
-}
-
-.color_picker__color-disable_alpha {
- width: 22px;
-}
-
-.color_picker__swatch {
- margin-top: 6px;
- width: 16px;
- height: 16px;
- border-radius: 8px;
- position: relative;
- overflow: hidden;
-}
-
-.color_picker__swatch-disable_alpha {
- width: 10px;
- height: 10px;
- margin: 0px;
-}
-
-.color_picker__active {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- border-radius: 8px;
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
- z-index: 2;
-}
-
-.color_picker__toggles {
- flex: 1
-}
-
-.color_picker__hue {
- height: 10px;
- position: relative;
- margin-bottom: 8px;
-}
-
-.color_picker__hue-disable_alpha {
- margin-bottom: 0px;
-}
-
-.color_picker__alpha {
- height: 10px;
- position: relative;
-}
-
-.color_picker__alpha-disable_alpha {
- display: none;
-}
-
-.color_picker__swatches {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- margin-top: 10px;
-}
-
diff --git a/src/core_plugins/metrics/public/less/color_rules.less b/src/core_plugins/metrics/public/less/color_rules.less
deleted file mode 100644
index efe34ca3c1424..0000000000000
--- a/src/core_plugins/metrics/public/less/color_rules.less
+++ /dev/null
@@ -1,35 +0,0 @@
-.color_rules {
- flex: 1 0 auto;
-}
-
-.color_rules__rule {
- background-color: @grayLightest;
- padding: 10px;
- margin-bottom: 5px;
- display: flex;
- align-items: center;
- flex: 1 0 auto;
-}
-
-.color_rules__item {
- flex: 1 0 auto;
- margin-right: 10px;
-}
-
-.color_rules__label {
- font-weight: normal;
- margin: 0 10px;
-}
-
-.color_rules__input {
- padding: 6px 10px;
- border-radius: 4px;
- border: 1px solid @grayLight;
- flex: 1 0 auto;
- margin-right: 10px;
-}
-
-.color_rules__secondary {
- display: flex;
- align-items: center;
-}
diff --git a/src/core_plugins/metrics/public/less/editor.less b/src/core_plugins/metrics/public/less/editor.less
deleted file mode 100644
index 91ed752b23bd9..0000000000000
--- a/src/core_plugins/metrics/public/less/editor.less
+++ /dev/null
@@ -1,607 +0,0 @@
-@borderRadius: 4px;
-
-.vis_editor {
- flex: 1;
-}
-.vis_editor_container {
- background: @pageColor;
-}
-
-// general styles
-.vis_editor__title {
- display: flex;
- flex-grow: 1;
- align-items: center;
- font-size: 20px;
- margin-bottom: 20px;
-
- i.fa {
- color: @grayLighter;
- margin: 0 10px;
- }
-
- i.fa-pencil {
- &:hover {
- color: @gray;
- }
- }
-
- i.fa-check-square {
- color: @esGreen;
- &:hover {
- color: darken(@esGreen, 10%);
- }
- }
-
- input {
- padding: 0 10px;
- border-radius: 4px;
- border: 1px solid @grayLighter;
- flex-grow: 1;
- }
-}
-.vis_editor__container {
- padding: 10px;
- background-color: @white;
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
-}
-.vis_editor__label {
- display: block;
- font-size: 1em;
- font-weight: normal;
- color: @gray;
- margin: 0 10px;
- flex-shrink: 0;
- &:first-child {
- margin: 0 10px 0 0;
- }
-}
-
-.vis_editor__note {
- .vis_editor__label;
- font-style: italic;
-}
-.vis_editor__input {
- padding: 8px 10px;
- border-radius: @borderRadius;
- border: 1px solid @grayLight;
- font-size: 1.1em;
-}
-.vis_editor__input-grows {
- .vis_editor__input;
- flex-grow: 1;
-}
-.vis_editor__input-grows-100 {
- .vis_editor__input-grows;
- width: 100%;
-}
-.vis_editor__input-number {
- .vis_editor__input;
- width: 60px;
-}
-.vis_editor__row {
- display: flex;
- align-items: center;
-}
-.vis_editor__item {
- flex-grow: 1;
-}
-.vis_editor__row_item {
- flex-grow: 1;
- margin-right: 10px;
-}
-.vis_editor__subhead {
- font-size: 12px;
- color: @gray;
- margin: 5px 0;
-}
-.vis_editor__subhead-main {
- font-size: 18px;
- color: @gray;
- margin: 10px 10px 5px;
-}
-.vis_editor__note {
- font-size: 14px;
- color: @gray;
- margin: 5px 0 10px 0;
-}
-
-// color_picker.js
-.vis_editor__color_picker {
- display: flex;
- align-items: center;
- position: relative;
-}
-.vis_editor__color_picker-swatch {
- border: 1px solid @grayDark;
- width: 20px;
- height: 20px;
- border-radius: 4px;
-}
-.vis_editor__color_picker-swatch-empty {
- .vis_editor__color_picker-swatch;
- background-color: transparent;
- background-size: 20px 20px;
- background-image: repeating-linear-gradient(
- -45deg,
- #c00,
- #c00 2px,
- transparent 2px,
- transparent 16px
- );
-}
-.vis_editor__color_picker-clear {
- margin-left: 5px;
- color: #c00;
-}
-.vis_editor__color_picker-popover {
- position: absolute;
- top: 20px;
- z-index: 2;
-}
-.vis_editor__color_picker-cover {
- position: fixed;
- top: 0px;
- right: 0px;
- left: 0px;
- bottom: 0px;
-}
-
-// data_format_picker
-.vis_editor__data_format_picker-container {
- display: flex;
- align-items: center;
- flex-grow: 1;
-}
-.vis_editor__data_format_picker-custom_row {
- display: flex;
- align-items: center;
- > .vis_editor__label {
- margin-left: 10px;
- }
-}
-
-// index_pattern.js
-.vis_editor__index_pattern-fields {
- margin-right: 10px;
- flex-grow: 1;
-}
-
-// series.js
-// mainRow == .vis_editor__container
-.vis_editor__series {
- background-color: @white;
- padding: 10px;
- border-top: 2px solid @lineColor;
- &:first-child {
- border-top: none;
- }
-}
-.vis_editor__series-row {
- .vis_editor__container;
- padding: 0 10px 10px;
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
-}
-.vis_editor__series-details {
- .vis_editor__row;
- flex-grow: 1;
- > * {
- margin-right: 10px;
- }
- > .vis_editor__sort {
- cursor: move;
- margin-right: 0px;
- }
-}
-
-.vis_editor__series-visibility-toggle {
- appearance: none;
- background: none;
- border: none;
-}
-
-// series_config.js
-.vis_editor__series_config-subhead {
- .vis_editor__subhead;
- margin: 10px 0 5px;
-}
-
-// series_editor.js
-.vis_editor__series_editor-container {
- margin-bottom: 20px;
-}
-
-//split.js
-.vis_editor__split-container {
- .vis_editor__row;
- flex-grow: 1;
-}
-.vis_editor__split-filter {
- .vis_editor__input;
- flex-grow: 1;
-}
-.vis_editor__split-selects {
- .vis_editor__item;
-}
-.vis_editor__split-aggs {
- flex-grow: 1;
-}
-.vis_editor__split-term_count {
- .vis_editor__input;
- width: 60px;
-}
-
-// vis_picker.js
-.vis_editor__vis_picker-container {
- display: flex;
- align-items: center;
-}
-
-.vis_editor__vis_picker-item {
- appearance: none;
- background: none;
- border: none;
- justify-content: center;
- display: flex;
- align-items: center;
- font-size: 18px;
- padding: 5px 0;
- margin: 0 10px;
- &:hover {
- border-bottom: 2px solid @grayDarker;
- }
- &.selected {
- border-bottom: 2px solid @grayDarker;
- }
-}
-.vis_editor__vis_picker-icon {
- display: none;
- margin-right: 5px;
- color: @grayDark;
- &:hover,
- &.selected {
- color: @grayDarker;
- }
-}
-.vis_editor__vis_picker-label {
- font-size: 18px;
- color: @grayDark;
- &:hover,
- &.selected {
- color: @grayDarker;
- }
-}
-
-.vis_editor__vis_picker-controls {
- flex: 1 0 auto;
- text-align: right;
- margin-right: 10px;
-}
-
-// visualization.js
-.vis_editor__visualization {
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- width: 100%;
- height: 250px;
- line-height: normal;
- background-color: @white;
- overflow: auto;
-}
-
-.vis_editor__visualization-draghandle {
- text-align: center;
- color: @grayLight;
- cursor: row-resize;
- width: 100%;
- display: block;
- appearance: none;
- background: none;
- border: none;
- &:hover {
- color: @gray;
- }
- &:focus {
- color: @esBlue;
- box-shadow: none;
- }
-}
-
-.vis_editor__visualization-title {
- color: @gray;
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- font-size: 16px;
- margin-bottom: 10px;
-}
-
-// aggs/agg_row
-.vis_editor__agg_row-icon {
- margin-right: 10px;
- color: @gray;
- &.last {
- color: @grayDark;
- }
-}
-
-.vis_editor__series_row {
- display: flex;
- background-color: @grayLightest;
- margin-bottom: 2px;
- padding: 10px;
- align-items: center;
- .vis_editor__note,
- .vis_editor__label {
- margin-bottom: 5px;
- font-size: 12px;
- }
-}
-
-.vis_editor__agg_row {
- .vis_editor__series_row;
-}
-
-.vis_editor__series_row-item {
- display: flex;
- flex-grow: 1;
-}
-
-.vis_editor__agg_row-item {
- .vis_editor__series_row-item;
- margin-bottom: 10px;
-}
-
-// aggs/std_deviation.js
-.vis_editor__std_deviation-field {
- .vis_editor__row_item;
- flex-grow: 2;
-}
-.vis_editor__std_deviation-sigma_item {
- margin-right: 10px;
-}
-.vis_editor__std_deviation-sigma {
- .vis_editor__input;
- width: 50px;
-}
-
-.vis_editor__percentile_rank_value {
- margin-right: 10px;
-}
-
-// aggs/std_sibling.js
-.vis_editor__std_sibling-metric {
- .vis_editor__row_item;
- flex-grow: 2;
-}
-
-// aggs/vis_config
-.vis_editor__vis_config-row {
- .vis_editor__row;
- margin: 10px 0;
-}
-
-// aggs/series_config
-.vis_editor__series_config-container {
- background-color: @grayLightest;
- padding: 10px;
-}
-
-.vis_editor__series_config-row {
- .vis_editor__row;
- padding: 5px 0;
- font-size: 12px;
-}
-
-.vis_editor__percentiles,
-.vis_editor__variables {
- .vis_editor__row_item;
- margin: 10px 0;
-}
-.vis_editor__calc_vars {
- // background-color: @white;
- // padding: 10px;
- margin-right: 10px;
- margin-bottom: 2px;
-}
-
-.vis_editor__percentiles-row,
-.vis_editor__calc_vars-row {
- display: flex;
- margin-bottom: 10px;
- align-items: center;
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.vis_editor__calc_vars-name {
- margin-right: 10px;
-}
-
-.vis_editor__calc_vars-var {
- flex-grow: 1;
- margin-right: 10px;
-}
-
-.vis_editor__percentiles-content {
- display: flex;
- align-items: center;
- flex-grow: 1;
- margin-right: 10px;
-}
-
-.vis_editor__markdown {
- display: flex;
- background-color: @white;
- min-height: 500px;
-}
-
-.vis_editor__markdown-editor {
- border: 2px solid @lineColor;
- width: 50%;
- flex: 1 0 auto;
-}
-
-.vis_editor__markdown-variables {
- padding: 10px;
- flex: 1 0 auto;
- max-height: 500px;
- overflow: auto;
- width: 50%;
- .table a {
- text-decoration: none;
- }
- pre {
- border-radius: 0;
- border: none;
- }
-}
-
-.vis_editor__no-markdown-variables {
- margin-top: 60px;
- margin-bottom: 10px;
- padding-bottom: 60px;
- text-align: center;
- font-weight: bold;
- border-bottom: 1px solid #d9d9d9;
-}
-
-.vis_editor__markdown-code-desc {
- margin-bottom: 10px;
-}
-
-.vis_editor__ace-editor {
- border: 2px solid @lineColor;
-}
-
-.vis_editor__split-filters {
- flex-grow: 1;
- display: flex;
- padding: 10px 20px;
- flex-direction: column;
-}
-
-.vis_editor__split-filter-row {
- display: flex;
- flex-grow: 1;
- margin-bottom: 10px;
- align-items: center;
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.vis_editor__split-filter-item {
- flex-grow: 1;
- margin-right: 10px;
-}
-
-.vis_editor__split-filter-color {
- margin-right: 10px;
-}
-
-.vis_editor__annotations-color,
-.vis_editor__annotations-controls {
- flex-shrink: 0;
-}
-
-.vis_editor__annotations-row {
- display: flex;
- padding: 10px;
- background-color: @lineColor;
- margin-bottom: 2px;
-}
-
-.vis_editor__annotations-missing {
- padding: 30px 10px;
- font-size: 16px;
- p {
- font-size: 16px;
- }
- text-align: center;
-}
-
-.vis_editor__annotations-content {
- margin: 0 10px;
- flex-grow: 1;
- .vis_editor__row {
- margin-bottom: 10px;
- }
- .vis_editor__row-item {
- flex-grow: 1;
- margin-left: 10px;
- &:first-child {
- margin-left: 0;
- }
- .vis_editor__label {
- margin-bottom: 4px;
- }
- }
- .vis_editor__row-item-small {
- .vis_editor__row-item;
- flex-grow: 0;
- }
-}
-
-.vis_editor__icon_select-option {
- margin: 0 5px;
-}
-.vis_editor__icon_select-value {
- margin: 0 5px 0 0;
-}
-
-.vis_editor__agg_select-heading {
- color: @black;
- cursor: default;
-}
-
-.vis_editor__agg_select-note {
- margin-left: 10px;
- color: @gray;
- font-size: 0.9em;
-}
-
-.vis_editor__dirty_controls {
- padding: 8px 6px;
- background-color: @grayLightest;
- display: flex;
- align-content: center;
-}
-
-.vis_editor__dirty_controls-button {
- flex: 0 0 auto;
-}
-
-.vis_editor__dirty_controls-message {
- flex: 1 0 auto;
- color: @grayLight;
- padding: 4px 10px 0;
-}
-
-.vis_editor__dirty_controls-message-dirty {
- flex: 1 0 auto;
- color: @gray;
- padding: 4px 10px 0;
-}
-
-.vis_editor__dirty_controls-toggle-label {
- padding: 4px 10px 0;
- flex: 0 0 auto;
- color: @gray;
- font-weight: normal;
-}
-
-.vis_editor__dirty_controls-toggle {
- flex: 0 0 auto;
-}
-
-.vis_editor__table-pivot-fields {
- border-bottom: 2px solid @lineColor;
-}
diff --git a/src/core_plugins/metrics/public/less/error.less b/src/core_plugins/metrics/public/less/error.less
deleted file mode 100644
index e47fe0778947f..0000000000000
--- a/src/core_plugins/metrics/public/less/error.less
+++ /dev/null
@@ -1,52 +0,0 @@
-.metrics_issue {
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- background-color: #b3ccd5;
- color: #0079a5;
- justify-content: center;
- padding: 20px;
-}
-
-.metrics_issue__title {
- text-align: center;
- font-size: 18px;
- font-weight: bold;
-}
-
-.metrics_error {
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- background-color: #ffd9d9;
- color: #c00;
- justify-content: center;
- padding: 20px;
- height: 100%;
- width: 100%;
-}
-
-.metrics_error__title {
- text-align: center;
- font-size: 18px;
- font-weight: bold;
-}
-
-.metrics_error__additional {
- margin-top: 10px;
- padding: 0 20px;
-}
-
-.metrics_error__reason {
- text-align: center;
-}
-
-.metrics_error__stack {
- margin-top: 10px;
- color: #fff;
- border: 10px solid #fff;
- background-color: #000;
- font-family: "Courier New", Courier, monospace;
- white-space: pre;
- padding: 10px;
-}
diff --git a/src/core_plugins/metrics/public/less/kbn_tabs.less b/src/core_plugins/metrics/public/less/kbn_tabs.less
deleted file mode 100644
index fed92633c3a3f..0000000000000
--- a/src/core_plugins/metrics/public/less/kbn_tabs.less
+++ /dev/null
@@ -1,31 +0,0 @@
-.kbnTabs {
- display: flex;
-}
-
-.kbnTabs__tab {
- appearance: none;
- background: none;
- border: none;
- margin: 0px 10px;
- padding: 5px 0px;
- color: @grayDark;
- font-size: 18px;
-}
-
-.kbnTabs__tab-active {
- .kbnTabs__tab;
- color: @grayDarker;
- border-bottom: 2px solid @grayDarker;
-}
-
-.kbnTabs__tab:hover {
- .kbnTabs__tab-active;
-}
-
-.kbnTabs.sm {
- .kbnTabs__tab-active,
- .kbnTabs__tab {
- font-size: 14px;
- padding: 2px 0;
- }
-}
diff --git a/src/core_plugins/metrics/public/less/main.less b/src/core_plugins/metrics/public/less/main.less
deleted file mode 100644
index 913d307c4d00e..0000000000000
--- a/src/core_plugins/metrics/public/less/main.less
+++ /dev/null
@@ -1,41 +0,0 @@
-@black: black;
-@grayDarkest: #222;
-@grayDarker: #333;
-@grayDark: #666;
-@gray: #999;
-@grayLight: #CCC;
-@grayLighter: #DDD;
-@grayLightest: #EEE;
-@white: white;
-
-@background: #FFF;
-@navBarBackground: #DDD;
-@lineColor: #EEE;
-@textColor: #999;
-@disabledColor: #CCC;
-@valueColor: #666;
-@topNavColor: #E4E4E4;
-@pageColor: #F6F6F6;
-
-@kibanaGray: #95a5a6;
-@esBlue: #0079a5;
-@esRed: #d76051;
-@esYellow: #fbce47;
-@esGreen: #80c383;
-@esPink: #e8488b;
-@esPurple: #9980b2;
-
-@esAltGreen: #8ac336;
-@esCyan: #59c6c5;
-
-@import './misc.less';
-@import './editor.less';
-@import './kbn_tabs.less';
-@import './color_rules.less';
-@import './markdown.less';
-@import './sortable.less';
-@import './color_picker.less';
-@import './error.less';
-@import './split_vis.less';
-
-
diff --git a/src/core_plugins/metrics/public/less/markdown.less b/src/core_plugins/metrics/public/less/markdown.less
deleted file mode 100644
index b995f2a177477..0000000000000
--- a/src/core_plugins/metrics/public/less/markdown.less
+++ /dev/null
@@ -1,60 +0,0 @@
-.thorMarkdown {
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- position: relative;
-}
-
-.thorMarkdown__content {
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- @import './type.less';
- color: rgba(0,0,0,1);
- pre, code, tt {
- background-color: rgba(0,0,0,0.1);
- color: red;
- code {
- color: rgba(0,0,0,1);
- background-color: transparent;
- }
- border: none;
- }
- &.middle {
- justify-content: center;
- }
- &.bottom {
- justify-content: flex-end;
- }
- &.scrolling {
- overflow: auto;
- }
-}
-
-.thorMarkdown.reversed {
- .thorMarkdown__content {
- .table > thead > tr > th {
- color: rgba(255,255,255,0.5);
- border-bottom: 2px solid rgba(255,255,255,0.2);
- }
- .table > tbody > tr > td {
- border-top: 1px solid rgba(255,255,255,0.2);
- }
- color: rgba(255,255,255,1);
- pre, code, tt {
- background-color: rgba(255,255,255,0.2);
- color: #ffa5a8;
- code {
- color: rgba(255,255,255,1);
- background-color: transparent;
- }
- border: none;
- }
- }
-}
diff --git a/src/core_plugins/metrics/public/less/misc.less b/src/core_plugins/metrics/public/less/misc.less
deleted file mode 100644
index e2e6d9d1ad01d..0000000000000
--- a/src/core_plugins/metrics/public/less/misc.less
+++ /dev/null
@@ -1,122 +0,0 @@
-.thor__visualization {
- width: 100%;
- height: 100%;
-}
-.thor__input {
- padding: 7px 10px;
- border-radius: 4px;
- border: 1px solid @grayLighter;
- &:focus {
- outline: none;
- box-shadow: 0 0 2px @grayLight;
- }
-}
-
-.thor__yes_no {
- label {
- font-weight: normal;
- margin-right: 10px;
- input { margin-right: 5px; }
- }
-}
-
-.thor__button {
- display: inline-block;
- vertical-align: middle;
- text-align: center;
- cursor: pointer;
- white-space: nowrap;
- border: 1px solid transparent;
- background-color: transparent;
- padding: 4px 8px;
- border-radius: 4px;
- margin: 0 0 0 10px;
- &.sm {
- padding: 2px 6px;
- font-size: 0.8em;
- margin-left: 5px;
- }
- &.md {
- padding: 3px 7px;
- font-size: 0.9em;
- margin-left: 5px;
- }
-}
-
-.create-buttons(@name; @color) {
- .thor__button-outlined-@{name} {
- .thor__button;
- border-color: @color;
- color: @color !important;
- &:hover {
- border-color: darken(@color, 10%);
- color: darken(@color, 10%) !important;
- }
- }
- .thor__button-solid-@{name} {
- .thor__button;
- background-color: @color;
- color: @white !important;
- &:hover {
- background-color: darken(@color, 10%);
- color: @white !important;
- }
- }
-}
-
-
-.create-buttons(gray, @kibanaGray);
-.create-buttons(grayLight, @grayLight);
-.create-buttons(default, @esBlue);
-.create-buttons(primary, @esGreen);
-.create-buttons(danger, @esRed);
-
-.pui-tooltip { font-size: 12px !important; }
-
-.add_delete__buttons {
- > * {
- margin-left: 5px;
- }
- .disabled {
- color: @gray;
- border-color: @gray;
- }
-}
-
-/**
- * 1. The absolute positioning broke reports and was fighting with display: flex,
- * setting the flex-basis to 100% fixed the issue the abs positioning was trying to fix
- */
-.dashboard__visualization {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%; /* 1 */
- padding: 10px;
-}
-
-.dashboard__visualization-title {
- color: rgba(0,0,0,0.6);
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- font-size: 16px;
- margin-bottom: 10px;
- flex: 0 0 auto;
- &.reversed {
- color: rgba(255,255,255,0.8);
- }
-}
-
-.tsvb-table__value {
- font-size: 1.1em;
- text-align: right;
-}
-
-.tsvb-table__trend {
- margin-left: 5px;
-}
-
-.tsvb-table__columnName {
- text-align: right;
-}
-
diff --git a/src/core_plugins/metrics/public/less/sortable.less b/src/core_plugins/metrics/public/less/sortable.less
deleted file mode 100644
index b1b043ca0207f..0000000000000
--- a/src/core_plugins/metrics/public/less/sortable.less
+++ /dev/null
@@ -1,38 +0,0 @@
-.ui-sortable {
- display: block;
- position: relative;
- overflow: visible;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
-}
-
-.ui-sortable:before,
-.ui-sortable:after{
- content: " ";
- display: table;
-}
-
-.ui-sortable:after{
- clear: both;
-}
-
-.ui-sortable .ui-sortable-item {
-}
-
-.ui-sortable .ui-sortable-item.ui-sortable-dragging {
- position: absolute;
- z-index: 1688;
-}
-
-.ui-sortable .ui-sortable-placeholder {
- display: none;
-}
-
-.ui-sortable .ui-sortable-placeholder.visible {
- display: block;
- opacity: 0.5;
- z-index: -1;
-}
-
-
diff --git a/src/core_plugins/metrics/public/less/type.less b/src/core_plugins/metrics/public/less/type.less
deleted file mode 100644
index 0dc3da0a3e429..0000000000000
--- a/src/core_plugins/metrics/public/less/type.less
+++ /dev/null
@@ -1,94 +0,0 @@
-pre, code, tt {
- border-radius: 0;
- font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
-}
-h1 { font-size: 30px; }
-h2 { font-size: 26px; }
-h3 { font-size: 22px; }
-h4 { font-size: 18px; }
-h5 { font-size: 16px; }
-h6 { font-size: 16px; }
-
-h1, h2, h3, h4, h5, h6, b, strong {
- margin:0 0 15px 0;
- font-weight: bold;
-}
-em, i, dfn {
- font-style: italic;
-}
-dfn {
- font-weight:bold;
-}
-p, code, pre, kbd {
- margin:0 0 15px 0;
-}
-blockquote {
- margin:0 15px 15px 15px;
-}
-cite {
- font-style: italic;
-}
-li ul, li ol {
- margin:0 15px;
-}
-ul, ol {
- margin:0 15px 15px 15px;
-}
-ul {
- list-style-type:disc;
-}
-ol {
- list-style-type:decimal;
-}
-ol ol {
- list-style: upper-alpha;
-}
-ol ol ol {
- list-style: lower-roman;
-}
-ol ol ol ol {
- list-style: lower-alpha;
-}
-dl {
- margin:0 0 15px 0;
-}
-dl dt {
- font-weight:bold;
-}
-dd {
- margin-left:1.5em;
-}
-table {
- margin-bottom:1.4em;
- width:100%;
-}
-th {
- font-weight:bold;
-}
-th, td, caption {
- padding:4px 15px 4px 5px;
-}
-tfoot {
- font-style:italic;
-}
-sup, sub {
- line-height:0;
-}
-abbr, acronym {
- border-bottom: 1px dotted;
-}
-address {
- margin:0 0 15px;
- font-style:italic;
-}
-del {
- text-decoration: line-through;
-}
-pre {
- margin: 15px 0;
- white-space: pre;
-}
-img {
- max-width: 100%;
-}
-
diff --git a/src/core_plugins/metrics/public/visualizations/components/_annotation.scss b/src/core_plugins/metrics/public/visualizations/components/_annotation.scss
new file mode 100644
index 0000000000000..bc502035a0d78
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_annotation.scss
@@ -0,0 +1,30 @@
+.tvbVisAnnotation {
+ position: absolute;
+ z-index: 90; // Specific to not overlap chart tooltip
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.tvbVisAnnotation__line {
+ flex: 1 0 auto;
+ width: 2px;
+}
+
+.tvbVisAnnotation__icon {
+ flex: 0 0 auto;
+ width: $euiSizeM;
+ text-align: center;
+}
+
+.tvbVisAnnotation__tooltip {
+ @include euiBottomShadow($color: $euiColorFullShade);
+ @include euiFontSizeXS;
+ padding: $euiSizeS;
+ animation-duration: .0s;
+ animation-delay: .0;
+}
+
+.tvbVisAnnotation__timestamp {
+ color: $euiColorLightShade;
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/_gauge.scss b/src/core_plugins/metrics/public/visualizations/components/_gauge.scss
new file mode 100644
index 0000000000000..08ce3f991acf2
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_gauge.scss
@@ -0,0 +1,74 @@
+/**
+ * 1. Text is scaled using a matrix so all font sizes and related metrics
+ * are being calcuated from a percentage of the base font size of 100% (14px).
+ */
+
+.tvbVisHalfGauge,
+.tvbVisCircleGauge {
+ font-size: 100%; /* 1 */
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+}
+
+.tvbVisHalfGauge__metrics,
+.tvbVisCircleGauge__metrics {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ text-align: center;
+ padding: $euiSizeS;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.tvbVisHalfGauge__metrics {
+ height: 70px;
+ padding: 0px $euiSizeM $euiSizeS;
+ justify-content: flex-end;
+}
+
+.tvbVisGauge__label {
+ color: $tvbTextColor;
+ font-size: 0.5em; /* 1 */
+ line-height: 1em; /* 1 */
+ text-align: center;
+ padding: 0 $euiSizeS $euiSizeXS;
+
+ .tvbVisGauge--reversed & {
+ color: $tvbTextColorReversed;
+ }
+}
+
+.tvbVisGauge__value {
+ color: $tvbValueColor;
+ font-size: .9em; /* 1 */
+ line-height: 1em; /* 1 */
+ text-align: center;
+
+ .tvbVisGauge--reversed & {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbVisGauge__additionalLabel {
+ @include euiTextTruncate;
+ font-size: 0.4em; /* 1 */
+ line-height: 1.2em; /* 1 */
+ width: 100%;
+ padding: 2px $euiSizeXS;
+ color: $tvbValueColor;
+
+ .tvbVisGauge--reversed & {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbVisGauge__resize {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/_index.scss b/src/core_plugins/metrics/public/visualizations/components/_index.scss
new file mode 100644
index 0000000000000..c5ce0ff8c8513
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_index.scss
@@ -0,0 +1,6 @@
+@import './annotation';
+@import './gauge';
+@import './metric';
+@import './legend';
+@import './timeseries_chart';
+@import './top_n';
diff --git a/src/core_plugins/metrics/public/visualizations/components/_legend.scss b/src/core_plugins/metrics/public/visualizations/components/_legend.scss
new file mode 100644
index 0000000000000..e6a18e7c9ac11
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_legend.scss
@@ -0,0 +1,91 @@
+// LEGEND
+
+.tvbLegend {
+ @include euiFontSizeXS;
+ display: flex;
+ width: 200px;
+ padding: $euiSizeXS 0;
+ overflow: auto;
+}
+
+.tvbLegend__toggle {
+ align-self: flex-start;
+ color: $tvbValueColor;
+
+ .tvbVisTimeSeries--reversed & {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbLegend__series {
+ flex-grow: 1;
+}
+
+.tvbLegend__item {
+ cursor: pointer;
+ padding: $euiSizeXS;
+ border-bottom: 1px solid $tvbLineColor;
+ display: flex;
+ max-width: 170px;
+
+ &.disabled {
+ opacity: 0.5;
+ }
+
+ &:first-child {
+ border-top: 1px solid $tvbLineColor;
+ }
+
+ .tvbVisTimeSeries--reversed & {
+ border-color: $tvbLineColorReversed;
+ }
+}
+
+.tvbLegend__button {
+ text-align: left;
+ display: flex;
+ width: 100%;
+}
+
+.tvbLegend__itemLabel {
+ flex-grow: 1;
+ @include euiTextTruncate;
+
+ span {
+ color: $euiTextColor;
+ margin-left: $euiSizeXS;
+
+ .tvbVisTimeSeries--reversed & {
+ color: $tvbTextColorReversed;
+ }
+ }
+}
+
+.tvbLegend__itemValue {
+ color: $tvbValueColor;
+ margin-left: $euiSizeXS;
+
+ .tvbVisTimeSeries--reversed & {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbLegend--horizontal {
+ width: auto;
+ display: flex;
+
+ .tvbLegend__series {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .tvbLegend__item {
+ max-width: inherit;
+ margin-right: $euiSizeM;
+ border: none;
+ }
+
+ .tvbLegend__itemLabel {
+ flex: 0 1 auto;
+ }
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/_metric.scss b/src/core_plugins/metrics/public/visualizations/components/_metric.scss
new file mode 100644
index 0000000000000..839f97243151c
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_metric.scss
@@ -0,0 +1,103 @@
+@mixin tvbVisMetricReversedColor {
+ // Some hacking in the CSS to provide the correct text color
+ // depending on dark/light theme and/or background color provided
+ // An easier way would be to provide if the theme is dark in the JS,
+ // but it wasn't passed down.
+ .tab-dashboard.theme-dark .tvbVisMetric--noBackground &,
+ .tvbVisMetric--reversed & {
+ @content;
+ }
+}
+
+/**
+ * 1. Text is scaled using a matrix so all font sizes and related metrics
+ * are being calcuated from a percentage of the base font size of 100% (14px).
+ */
+
+.tvbVisMetric {
+ font-size: 100%; /* 1 */
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+}
+
+.tvbVisMetric__resize {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+ display: flex;
+}
+
+.tvbVisMetric__label--primary {
+ color: $tvbTextColor;
+ text-align: center;
+ font-size: 0.5em; /* 1 */
+ margin-bottom: 0.25em; /* 1 */
+ line-height: 1em; /* 1 */
+
+ @include tvbVisMetricReversedColor {
+ color: $tvbTextColorReversed;
+ }
+}
+
+.tvbVisMetric__value--primary {
+ color: $tvbValueColor;
+ text-align: center;
+ font-size: 1em; /* 1 */
+ font-weight: $euiFontWeightBold;
+ line-height: 1em; /* 1 */
+
+ @include tvbVisMetricReversedColor {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbVisMetric__secondary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 0.05em; /* 1 */
+}
+
+.tvbVisMetric__label--secondary {
+ font-size: 0.35em; /* 1 */
+ margin-right: 0.3em; /* 1 */
+ color: $tvbTextColor;
+ line-height: 1em; /* 1 */
+
+ @include tvbVisMetricReversedColor {
+ color: $tvbTextColorReversed;
+ }
+}
+
+.tvbVisMetric__value--secondary {
+ font-size: 0.35em; /* 1 */
+ color: $tvbValueColor;
+ line-height: 1em; /* 1 */
+
+ @include tvbVisMetricReversedColor {
+ color: $tvbValueColorReversed;
+ }
+}
+
+.tvbVisMetric__inner {
+ position: absolute;
+ padding: $euiSizeXS $euiSizeS $euiSizeS;
+}
+
+.tvbVisMetric__label--additional {
+ @include euiTextTruncate;
+ font-size: 0.25em; /* 1 */
+ padding: $euiSizeXS/2 0 0 0;
+ text-align: center;
+ color: $tvbValueColor;
+ line-height: 1.2; // Ensure the descenders don't get cut off
+
+ @include tvbVisMetricReversedColor {
+ color: $tvbValueColorReversed;
+ }
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss b/src/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss
new file mode 100644
index 0000000000000..6f644eb88bdfb
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss
@@ -0,0 +1,116 @@
+.tvbVisTimeSeries {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+}
+
+.tvbVisTimeSeries__content {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ flex: 1 0 auto;
+ // TODO: Remove once tooltips are portaled
+ overflow: hidden; // Ensures the tooltip doesn't cause scrollbars
+}
+
+.tvbVisTimeSeries__visualization {
+ cursor: crosshair;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+ position: relative;
+
+ > .tvbVisTimeSeries__container {
+ min-width: 1px;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.tvbVisTimeSeries__container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+}
+
+.tvbVisTimeSeries__axisLabel {
+ @include euiFontSizeXS;
+ color: $tvbTextColor;
+ text-align: center;
+ min-height: 1.2em;
+
+ &.tvbVisTimeSeries__axisLabel--reversed {
+ color: $tvbTextColorReversed;
+ }
+}
+
+// TOOLTIP
+
+// EUITODO: Use EuiTooltip or somehow portal the current one
+.tvbTooltip__container {
+ pointer-events: none;
+ position: absolute;
+ z-index: $euiZLevel9;
+ display: flex;
+ align-items: center;
+ padding: 0 $euiSizeS;
+ transform: translate(0, -50%);
+}
+
+.tvbTooltip__container--right {
+ flex-direction: row-reverse;
+}
+
+.tvbTooltip {
+ background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+ @include euiBottomShadow($color: $euiColorFullShade);
+ @include euiFontSizeXS;
+ padding: $euiSizeS;
+ border-radius: $euiBorderRadius;
+ color: $euiColorGhost;
+ max-width: 320px;
+}
+
+.tvbTooltip__caret {
+ $temp-arrowSize: $euiSizeM;
+ width: $temp-arrowSize;
+ height: $temp-arrowSize;
+ color: tintOrShade($euiColorFullShade, 25%, 90%);
+ border-radius: 2px;
+ background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+ transform-origin: center;
+ transform: rotateZ(45deg);
+
+ .tvbTooltip__container--left & {
+ margin-right: (($temp-arrowSize/2) + 1px) * -1;
+ }
+
+ .tvbTooltip__container--right & {
+ margin-left: (($temp-arrowSize/2) + 1px) * -1;
+ }
+}
+
+.tvbTooltip__item {
+ display: flex;
+}
+
+.tvbTooltip__label {
+ flex-grow: 1;
+ margin-left: $euiSizeXS;
+ margin-right: $euiSizeXS;
+}
+
+.tvbTooltip__icon,
+.tvbTooltip__value {
+ flex-shrink: 0;
+}
+
+.tvbTooltip__timestamp {
+ color: $euiColorLightShade;
+ white-space: nowrap;
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/_top_n.scss b/src/core_plugins/metrics/public/visualizations/components/_top_n.scss
new file mode 100644
index 0000000000000..bdfe2955da042
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/_top_n.scss
@@ -0,0 +1,50 @@
+
+
+.tvbVisTopN {
+ position: relative;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+
+ tr:hover td {
+ background-color: $tvbHoverBackgroundColor;
+ }
+}
+
+.tvbVisTopN__value {
+ text-align: right;
+ white-space: nowrap;
+ line-height: 0;
+ vertical-align: middle;
+ color: $tvbValueColor;
+ padding: $euiSizeXS;
+ padding-bottom: 0;
+}
+
+.tvbVisTopN__label {
+ color: $tvbTextColor;
+ padding: $euiSizeXS 0;
+}
+
+.tvbVisTopN__bar {
+ padding: $euiSizeXS $euiSizeM;
+ vertical-align: middle;
+}
+
+.tvbVisTopN__innerBar {
+ min-height: $euiSize;
+}
+
+.tvbVisTopN--reversed {
+ tr:hover td {
+ background-color: $tvbHoverBackgroundColorReversed;
+ }
+
+ .tvbVisTopN__label {
+ color: $tvbTextColorReversed;
+ }
+
+ .tvbVisTopN__value {
+ color: $tvbValueColorReversed;
+ }
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/annotation.js b/src/core_plugins/metrics/public/visualizations/components/annotation.js
index 777f62297ba29..aa36f5a89263a 100644
--- a/src/core_plugins/metrics/public/visualizations/components/annotation.js
+++ b/src/core_plugins/metrics/public/visualizations/components/annotation.js
@@ -21,50 +21,33 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import moment from 'moment';
import reactcss from 'reactcss';
+import { EuiToolTip } from '@elastic/eui';
class Annotation extends Component {
constructor(props) {
super(props);
- this.state = {
- showTooltip: false
- };
- this.handleMouseOut = this.handleMouseOut.bind(this);
- this.handleMouseOver = this.handleMouseOver.bind(this);
}
renderTooltip() {
- if (!this.state.showTooltip) return null;
const [ timestamp, messageSource ] = this.props.series;
- const reversed = this.props.reversed ? '-reversed' : '';
const messages = messageSource.map((message, i) => {
console.log(message);
return (
{ message }
);
});
return (
-
-
-
{ moment(timestamp).format('lll') }
- { messages }
-
-
+
+
{ moment(timestamp).format('lll') }
+ { messages }
);
}
- handleMouseOver() {
- this.setState({ showTooltip: true });
- }
-
- handleMouseOut() {
- this.setState({ showTooltip: false });
- }
-
render() {
const { color, plot, icon, series } = this.props;
const offset = plot.pointOffset({ x: series[0], y: 0 });
@@ -83,18 +66,11 @@ class Annotation extends Component {
}
});
return(
-
-
-
-
+
);
}
diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
index dfbc2f473af90..8e1ea8c9ae2a4 100644
--- a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -297,11 +297,11 @@ class FlotChart extends Component {
this.resize = el}
- className="rhythm_chart__timeseries-container"
+ className="tvbVisTimeSeries__container"
>
this.target = el}
- className="rhythm_chart__timeseries-container"
+ className="tvbVisTimeSeries__container"
/>
);
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
index 0fab821bb698e..bf90fe7897df6 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -110,7 +110,7 @@ class Gauge extends Component {
let additionalLabel;
if (this.props.additionalLabel) {
additionalLabel = (
-
+
{this.props.additionalLabel}
);
@@ -118,17 +118,17 @@ class Gauge extends Component {
if (type === 'half') {
metrics = (
this.inner = el}
style={styles.inner}
>
{ title }
{ formatter(value) }
@@ -139,18 +139,18 @@ class Gauge extends Component {
} else {
metrics = (
this.inner = el}
style={styles.inner}
>
{ formatter(value) }
{ title }
@@ -158,13 +158,13 @@ class Gauge extends Component {
);
}
- let className = type === 'half' ? 'thorHalfGauge' : 'thorCircleGauge';
- if (this.props.reversed) className = `reversed ${className}`;
+ let className = type === 'half' ? 'tvbVisHalfGauge' : 'tvbVisCircleGauge';
+ if (this.props.reversed) className = `${className} tvbVisGauge--reversed`;
return (
this.resize = el}
- className={`${className}__resize`}
+ className={`tvbVisGauge__resize`}
>
{ metrics }
diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
index 2a76c928d0073..8f9dccadbe60d 100644
--- a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -21,34 +21,36 @@ import PropTypes from 'prop-types';
import React from 'react';
import createLegendSeries from '../lib/create_legend_series';
import reactcss from 'reactcss';
-import { htmlIdGenerator } from '@elastic/eui';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
function HorizontalLegend(props) {
const rows = props.series.map(createLegendSeries(props));
const htmlId = htmlIdGenerator();
const styles = reactcss({
- hideLegned: {
+ hideLegend: {
legend: {
display: 'none'
}
}
- }, { hideLegned: !props.showLegend });
- let legendControlClass = 'fa fa-chevron-down';
+ }, { hideLegend: !props.showLegend });
+
+ let legendToggleIcon = 'arrowDown';
if (!props.showLegend) {
- legendControlClass = 'fa fa-chevron-up';
+ legendToggleIcon = 'arrowUp';
}
return (
-
-
-
-
+
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
index f4876fab4dbb9..f21de4e69e547 100644
--- a/src/core_plugins/metrics/public/visualizations/components/metric.js
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -82,41 +82,21 @@ class Metric extends Component {
left: this.state.left || 0,
transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
},
- primary_text: {
- color: 'rgba(0,0,0,0.5)'
- },
- primary_value: {
- color: '#000'
- },
- secondary_text: {
- color: 'rgba(0,0,0,0.5)'
- },
- secondary_value: {
- color: '#000'
- }
+ primary_value: {},
+ secondary_value: {}
},
reversed: {
- primary_text: {
- color: 'rgba(255,255,255,0.7)'
- },
- primary_value: {
- color: '#FFF'
- },
- secondary_text: {
- color: 'rgba(255,255,255,0.7)'
- },
- secondary_value: {
- color: '#FFF'
- }
-
+ primary_value: {},
+ secondary_value: {}
}
}, this.props);
if (this.props.backgroundColor) styles.container.backgroundColor = this.props.backgroundColor;
if (metric && metric.color) styles.primary_value.color = metric.color;
+
let primaryLabel;
if (metric && metric.label) {
- primaryLabel = (
{ metric.label }
);
+ primaryLabel = (
{ metric.label }
);
}
let secondarySnippet;
@@ -126,12 +106,12 @@ class Metric extends Component {
if (secondary.color) styles.secondary_value.color = secondary.color;
let secondaryLabel;
if (secondary.label) {
- secondaryLabel = (
{ secondary.label }
);
+ secondaryLabel = (
{ secondary.label }
);
}
secondarySnippet = (
-
+
{ secondaryLabel }
-
{ secondaryValue }
+
{ secondaryValue }
);
}
@@ -139,25 +119,33 @@ class Metric extends Component {
let additionalLabel;
if (this.props.additionalLabel) {
additionalLabel = (
-
+
{this.props.additionalLabel}
);
}
+ let className = 'tvbVisMetric';
+ if (!styles.container.backgroundColor) {
+ className += ' tvbVisMetric--noBackground';
+ }
+ if (this.props.reversed) {
+ className += ' tvbVisMetric--reversed';
+ }
+
return (
-
+
this.resize = el}
- className="rhythm_metric__resize"
+ className="tvbVisMetric__resize"
>
-
this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
-
+
this.inner = el} className="tvbVisMetric__inner" style={styles.inner}>
+
{ primaryLabel }
{ primaryValue }
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
index 03fb9414e4045..aaad5bd158a19 100644
--- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -125,9 +125,9 @@ class Timeseries extends Component {
}
render() {
- let className = 'rhythm_chart';
+ let className = 'tvbVisTimeSeries';
if (this.props.reversed) {
- className += ' reversed';
+ className += ' tvbVisTimeSeries--reversed';
}
const styles = reactcss({
bottomLegend: {
@@ -138,8 +138,8 @@ class Timeseries extends Component {
}, { bottomLegend: this.props.legendPosition === 'bottom' });
return (
-
-
+
+
v);
const value = item.datapoint[2] ? item.datapoint[1] - item.datapoint[2] : item.datapoint[1];
tooltip = (
-
-
-
-
-
-
-
{ item.series.label }
-
{ formatter(value) }
+
+
+
+
+
+
{ item.series.label }
+
{ formatter(value) }
-
{ moment(item.datapoint[0]).format(this.props.dateFormat) }
+
{ moment(item.datapoint[0]).format(this.props.dateFormat) }
-
);
}
@@ -228,13 +181,13 @@ class TimeseriesChart extends Component {
};
const annotations = this.state.annotations.map(this.renderAnnotations);
- let axisLabelClass = 'rhythm_chart__axis-label';
+ let axisLabelClass = 'tvbVisTimeSeries__axisLabel';
if (this.props.reversed) {
- axisLabelClass += ' reversed';
+ axisLabelClass += ' tvbVisTimeSeries__axisLabel--reversed';
}
return (
-
this.container = el} className="rhythm_chart__timeseries-container">
+
this.container = el} className="tvbVisTimeSeries__container">
{ tooltip }
{ annotations }
diff --git a/src/core_plugins/metrics/public/visualizations/components/top_n.js b/src/core_plugins/metrics/public/visualizations/components/top_n.js
index 88dd043a07f97..f0c6745051ab4 100644
--- a/src/core_plugins/metrics/public/visualizations/components/top_n.js
+++ b/src/core_plugins/metrics/public/visualizations/components/top_n.js
@@ -59,14 +59,14 @@ class TopN extends Component {
onClick={this.handleClick({ lastValue, ...item })}
style={styles.row}
>
-
{ item.label }
-
+ { item.label }
+
-
{ value }
+
{ value }
);
};
@@ -80,14 +80,14 @@ class TopN extends Component {
}, 0);
const rows = this.props.series.map(this.renderRow(maxValue));
- let className = 'rhythm_top_n';
+ let className = 'tvbVisTopN';
if (this.props.reversed) {
- className += ' reversed';
+ className += ' tvbVisTopN--reversed';
}
return (
-
+
{ rows }
diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
index 6b527c132f397..d2183bfbca34f 100644
--- a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import createLegendSeries from '../lib/create_legend_series';
import reactcss from 'reactcss';
-import { htmlIdGenerator } from '@elastic/eui';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
function VerticalLegend(props) {
const rows = props.series.map(createLegendSeries(props));
@@ -38,27 +38,30 @@ function VerticalLegend(props) {
control: { order: '2' }
},
hideLegend: {
- legend: { width: 12 },
+ legend: { width: 24 },
series: { display: 'none' },
}
}, { hideLegend, leftLegend });
- const openClass = leftLegend ? 'fa-chevron-right' : 'fa-chevron-left';
- const closeClass = leftLegend ? 'fa-chevron-left' : 'fa-chevron-right';
- const legendControlClass = hideLegend ? `fa ${openClass}` : `fa ${closeClass}`;
+ const openIcon = leftLegend ? 'arrowRight' : 'arrowLeft';
+ const closeIcon = leftLegend ? 'arrowLeft' : 'arrowRight';
+ const legendToggleIcon = hideLegend ? `${openIcon}` : `${closeIcon}`;
return (
-
-
-
-
+
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/bar.less b/src/core_plugins/metrics/public/visualizations/less/includes/bar.less
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less
deleted file mode 100644
index 2c270e315a54c..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less
+++ /dev/null
@@ -1,215 +0,0 @@
-.rhythm_chart {
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
-}
-
-.rhythm_chart__title {
- color: @textColor;
- margin: 0 0 10px;
-}
-
-.rhythm_chart__content {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: flex;
- flex: 1 0 auto;
-}
-
-.rhythm_chart__visualization {
- cursor: crosshair;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- position: relative;
- & > div {
- min-width: 1px;
- width: 100%;
- height: 100%;
- }
-}
-
-.rhythm_chart__legend-control {
- padding: 6px 2px 0 0;
- color: @textColor;
- font-size: 12px;
-
- button {
- background: none;
- border: none;
- appearance: none;
- padding: 0;
- }
-}
-
-.rhythm_chart__legend-series {
- flex-grow: 1;
-}
-
-.rhythm_chart__legend {
- display: flex;
- font-size: 11px;
- width: 200px;
- padding: 5px 0;
- overflow: auto;
-}
-
-.rhythm_chart__legend_button {
- text-align: left;
- appearance: none;
- background: none;
- border: none;
- display: flex;
- width: 100%;
- max-width: 170px;
-}
-
-.rhythm_chart__legend_item {
- text-align: left;
- cursor: pointer;
- &.disabled {
- opacity: 0.5;
- }
- padding: 5px;
- border-bottom: 1px solid @lineColor;
- &:first-child {
- border-top: 1px solid @lineColor;
- }
- display: flex;
- max-width: 170px;
-}
-
-.rhythm_chart__legend_label {
- flex-grow: 1;
- overflow: hidden;
- white-space: nowrap;
- span {
- color: @textColor;
- margin-left: 5px;
- }
-}
-
-.rhythm_chart__legend_value {
- color: @valueColor;
- margin-left: 3px;
-}
-
-.rhythm_chart.reversed {
- .rhythm_chart__title { color: @textColorReversed; }
- .rhythm_chart__legend-control { color: @textColorReversed; }
- .rhythm_chart__legend_item {
- border-bottom: 1px solid @lineColorReversed;
- &:first-child { border-top: 1px solid @lineColorReversed; }
- }
- .rhythm_chart__legend_label { span { color: @textColorReversed; } }
- .rhythm_chart__legend_value { color: @valueColorReversed; }
-}
-
-.rhythm_chart__legend-horizontal,
-.rhythm_chart.reversed .rhythm_chart__legend-horizontal {
- width: auto;
- display: flex;
- .rhythm_chart__legend-control {
- padding: 5px 5px 0 0;
- }
- .rhythm_chart__legend-series {
- display: flex;
- flex-wrap: wrap;
- }
- .rhythm_chart__legend_label {
- flex: 0 1 auto;
- }
- .rhythm_chart__legend_item {
- max-width: inherit;
- font-size: 12px;
- display: flex;
- margin-right: 10px;
- border-bottom: none;
- &:first-child { border-top: none; }
- }
-}
-
-.rhythm_chart__timeseries-container {
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
-}
-
-.rhythm_chart__axis-label {
- font-size: 0.8em;
- color: rgba(0,0,0,0.4);
- text-align: center;
- min-height: 1.2em;
- &.reversed {
- color: rgba(255,255,255,0.6);
- }
-}
-
-.annotation {
- position: absolute;
- display: flex;
- flex-direction: column;
- z-index: 90;
- align-items: center;
-}
-.annotation__line {
- flex: 1 0 auto;
- width: 2px;
-}
-.annotation__icon {
- position: relative;
- flex: 0 0 auto;
- width: 12px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-.annotation__tooltip {
- position: absolute;
- bottom: 20px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-.annotation__message,
-.annotation__timestamp {
- font-size: 12px;
-}
-.annotation__caret {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid rgba(0,0,0,0.7);
-}
-.annotation__caret-reversed {
- .annotation__caret;
- border-top: none;
- border-bottom: 5px solid rgba(0,0,0,0.7);
-}
-.annotation__tooltip-body {
- border-radius: 4px;
- padding: 4px;
- white-space: nowrap;
- color: white;
- background-color: rgba(0,0,0,0.7);
-}
-.annotation__tooltip-body-reversed {
- .annotation__tooltip-body;
- color: black;
- background-color: rgba(255,255,255,0.7);
-}
-.annotation__timestamp {
- color: rgba(255,255,255,0.7);
-
-}
-.annotation__timestamp-reversed {
- color: rgba(0,0,0,0.7);
-}
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/colors.less b/src/core_plugins/metrics/public/visualizations/less/includes/colors.less
deleted file mode 100644
index 3c0c04b60a608..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/includes/colors.less
+++ /dev/null
@@ -1,32 +0,0 @@
-@black: black;
-@grayDarkest: #222;
-@grayDarker: #333;
-@grayDark: #666;
-@gray: #999;
-@grayLight: #CCC;
-@grayLighter: #DDD;
-@grayLightest: #EEE;
-@white: white;
-
-@background: @white;
-@navBarBackground: @grayLighter;
-@inputBorder: @grayLighter;
-@lineColor: rgba(0,0,0,0.2);
-@lineColorReversed: rgba(255,255,255,0.4);
-@textColor: rgba(0,0,0,0.4);
-@textColorReversed: rgba(255,255,255,0.6);
-@disabledColor: @grayLight;
-@valueColor: rgba(0,0,0,0.7);
-@valueColorReversed: rgba(255,255,255,0.8);
-
-@esBlue: #0079a5;
-@esRed: #d76051;
-@esYellow: #fbce47;
-@esGreen: #80c383;
-@esPink: #e8488b;
-@esPurple: #9980b2;
-@esAltGreen: #8ac336;
-@esCyan: #59c6c5;
-
-
-
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less b/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less
deleted file mode 100644
index 8db61e6b84dd2..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less
+++ /dev/null
@@ -1,122 +0,0 @@
-.thorCircleGauge {
- font-size: 100%;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- circle {
- opacity: 1;
- stroke-opacity: 1;
- &:hover {
- opacity: 1;
- stroke-opacity: 1;
- }
- }
-}
-
-.thorCircleGauge__metrics {
- position: absolute;
- width: 100px;
- height: 100px;
- text-align: center;
- display: flex;
- padding: 10px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-
-.thorCircleGauge__label {
- font-size: 8px;
- line-height: 1;
- text-align: center;
- color: rgba(0,0,0,0.4);
- padding: 0 8px 4px;
-}
-.thorCircleGauge__value {
- font-size: 12px;
- line-height: 1;
- text-align: center;
- color: @black;
-}
-
-.thorGauge_additionalLabel {
- font-size: 8px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- width: 100%;
- padding: 0 5px;
-}
-
-.thorCircleGauge__resize {
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
-}
-
-.thorCircleGauge.reversed {
- .thorCircleGauge__label {
- color: rgba(255,255,255,0.6);
- }
- .thorCircleGauge__value {
- color: @white;
- }
-}
-
-.thorHalfGauge {
- font-size: 100%;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- circle {
- opacity: 1;
- stroke-opacity: 1;
- &:hover {
- opacity: 1;
- stroke-opacity: 1;
- }
- }
-}
-
-.thorHalfGauge__metrics {
- position: absolute;
- width: 100px;
- height: 70px;
- text-align: center;
- display: flex;
- padding: 0px 11px 10px;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
-}
-
-.thorHalfGauge__label {
- font-size: 8px;
- line-height: 1;
- text-align: center;
- color: rgba(0,0,0,0.4);
- padding: 0 8px 4px;
-}
-.thorHalfGauge__value {
- font-size: 13px;
- line-height: 1;
- text-align: center;
- color: @black;
-}
-
-.thorHalfGauge__resize {
- position: relative;
- display: flex;
- rowDirection: column;
- flex: 1 0 auto;
-}
-
-.thorHalfGauge.reversed {
- .thorHalfGauge__label {
- color: rgba(255,255,255,0.6);
- }
- .thorHalfGauge__value {
- color: @white;
- }
-}
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
deleted file mode 100644
index 41457614b443f..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
+++ /dev/null
@@ -1,70 +0,0 @@
-.rhythm_metric {
- font-size: 100%;
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
-}
-
-.rhythm_metric__resize {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- overflow: hidden;
- display: flex;
-}
-
-.rhythm_metric__primary {
-}
-
-.rhythm_metric__primary-label {
- text-align: center;
- color: @textColor;
- font-size: 0.5em;
- margin-bottom: 0.25em;
- line-height: 1em;
-}
-
-.rhythm_metric__primary-value {
- text-align: center;
- color: @valueColor;
- font-size: 1em;
- font-weight: bold;
- line-height: 1em;
-}
-
-.rhythm_metric__secondary {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 0.05em;
-}
-
-.rhythm_metric__secondary-label {
- font-size: 0.35em;
- margin-right: 0.3em;
- color: @textColor;
- line-height: 1em;
-}
-
-.rhythm_metric__secondary-value {
- font-size: 0.35em;
- color: @valueColor;
- line-height: 1em;
-}
-
-.rhythm_metric__inner {
- position: absolute;
- padding: 0.25em 0.5em 0.5em;
-}
-
-.rhythm_metric__additionalLabel {
- font-size: 0.25em;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 2px 0 0 0;
- white-space: nowrap;
- text-align: center;
-}
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less b/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less
deleted file mode 100644
index b64ac07c78f16..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less
+++ /dev/null
@@ -1,41 +0,0 @@
-.rhythm_top_n {
- position: relative;
- overflow: auto;
- display: flex;
- flex-direction: column;
-
- tr:hover { td { background-color: rgba(0,0,0,0.1) } }
-}
-
-.rhythm_top_n__labels,
-.rhythm_top_n__value {
- text-align: right;
- white-space: nowrap;
- line-height: 0;
- vertical-align: middle;
-}
-
-.rhythm_top_n__label {
- color: @textColor;
- padding: 4px 0;
-}
-
-.rhythm_top_n__value {
- color: @valueColor;
- padding: 4px 4px 4px 0;
-}
-
-.rhythm_top_n__bar {
- padding: 4px 10px;
- vertical-align: middle;
-}
-
-.rhythm_top_n__inner-bar {
- min-height: 16px;
-}
-
-.rhythm_top_n.reversed {
- tr:hover { td { background-color: rgba(255,255,255,0.1) } }
- .rhythm_top_n__label { color: @textColorReversed; }
- .rhythm_top_n__value { color: @valueColorReversed; }
-}
diff --git a/src/core_plugins/metrics/public/visualizations/less/main.less b/src/core_plugins/metrics/public/visualizations/less/main.less
deleted file mode 100644
index b04b21908d8fc..0000000000000
--- a/src/core_plugins/metrics/public/visualizations/less/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './includes/colors.less';
-@import './includes/chart.less';
-@import './includes/metric.less';
-@import './includes/top_n.less';
-@import './includes/gauge.less';
diff --git a/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js b/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
index eb4a9aab38b0d..59025a7a306f2 100644
--- a/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
+++ b/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
@@ -19,7 +19,9 @@
import React from 'react';
import _ from 'lodash';
-export default props => (row, i) => {
+import { EuiIcon } from '@elastic/eui';
+
+export default props => (row) => {
function tickFormatter(value) {
if (_.isFunction(props.tickFormatter)) return props.tickFormatter(value);
@@ -28,7 +30,7 @@ export default props => (row, i) => {
const formatter = row.tickFormatter || tickFormatter;
const value = formatter(props.seriesValues[row.id]);
- const classes = ['rhythm_chart__legend_item'];
+ const classes = ['tvbLegend__item'];
const key = row.id;
if (!_.includes(props.seriesFilter, row.id)) classes.push('disabled');
if (row.label == null || row.legend === false) return (
);
@@ -40,13 +42,13 @@ export default props => (row, i) => {
>
props.onToggle(event, row.id)}
- className="rhythm_chart__legend_button"
+ className="tvbLegend__button"
>
-
-
+
+ { row.label }
-
{ value }
+
{ value }
-
+
{
- const tableCells = await find.allByCssSelector('.tsvb-table__value');
+ const tableCells = await testSubjects.findAll('tvbTableVis__value');
expect(tableCells.length).to.be(expectedCount);
});
}
diff --git a/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css b/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
index dea086e4e6bfa..b449300a7079e 100644
--- a/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
+++ b/x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
@@ -60,11 +60,11 @@ visualization-editor .visEditor--default > :not(.visEditor__canvas) {
}
/** THIS IS FOR TSVB UNTIL REFACTOR **/
-.vis_editor__visualization {
+.tvbEditorVisualization {
position: static !important;
}
-.visualize .rhythm_chart__legend-control,
-.vis-editor-hide-for-reporting {
+.visualize .tvbVisTimeSeries__legendToggle,
+.tvbEditor--hideForReporting {
/* all non-content rows in interface */
display: none;
}
diff --git a/x-pack/plugins/reporting/export_types/common/layouts/print.css b/x-pack/plugins/reporting/export_types/common/layouts/print.css
index 038682744371e..e8b2410260bf0 100644
--- a/x-pack/plugins/reporting/export_types/common/layouts/print.css
+++ b/x-pack/plugins/reporting/export_types/common/layouts/print.css
@@ -58,11 +58,11 @@ visualization-editor .visEditor--default > :not(.visEditor__canvas) {
display: none;
}
/** THIS IS FOR TSVB UNTIL REFACTOR **/
-.vis_editor__visualization {
+.tvbEditorVisualization {
position: static !important;
}
-.visualize .rhythm_chart__legend-control,
-.vis-editor-hide-for-reporting {
+.visualize .tvbVisTimeSeries__legendToggle,
+.tvbEditor--hideForReporting {
/* all non-content rows in interface */
display: none;
}