mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
* Upgrade eslint-config to 0.10.0. * Fix linting violations with popover and typography stuff in UI Framework.
This commit is contained in:
parent
239a5dc7ab
commit
69a96ca70a
160 changed files with 1021 additions and 1106 deletions
|
@ -204,7 +204,7 @@
|
|||
"yauzl": "2.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@elastic/eslint-config-kibana": "0.9.0",
|
||||
"@elastic/eslint-config-kibana": "0.10.0",
|
||||
"@elastic/eslint-import-resolver-kibana": "0.8.1",
|
||||
"@elastic/eslint-plugin-kibana-custom": "1.0.3",
|
||||
"angular-mocks": "1.4.7",
|
||||
|
|
|
@ -42,7 +42,7 @@ export class DashboardCloneModal extends React.Component {
|
|||
data-tests-subj="dashboardCloneModal"
|
||||
aria-label="Clone a dashboard"
|
||||
className="dashboardCloneModal"
|
||||
onKeyDown={ this.onKeyDown }
|
||||
onKeyDown={this.onKeyDown}
|
||||
>
|
||||
<KuiModalHeader>
|
||||
<KuiModalHeaderTitle>
|
||||
|
@ -58,8 +58,8 @@ export class DashboardCloneModal extends React.Component {
|
|||
autoFocus
|
||||
data-test-subj="clonedDashboardTitle"
|
||||
className="kuiTextInput kuiTextInput--large"
|
||||
value={ this.state.newDashboardName }
|
||||
onChange={ this.onInputChange }
|
||||
value={this.state.newDashboardName}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
</KuiModalBodyText>
|
||||
</KuiModalBody>
|
||||
|
@ -68,14 +68,14 @@ export class DashboardCloneModal extends React.Component {
|
|||
<KuiButton
|
||||
buttonType="hollow"
|
||||
data-test-subj="cloneCancelButton"
|
||||
onClick={ this.props.onClose }
|
||||
onClick={this.props.onClose}
|
||||
>
|
||||
Cancel
|
||||
</KuiButton>
|
||||
<KuiButton
|
||||
buttonType="primary"
|
||||
data-test-subj="cloneConfirmButton"
|
||||
onClick={ this.cloneDashboard }
|
||||
onClick={this.cloneDashboard}
|
||||
>
|
||||
Confirm Clone
|
||||
</KuiButton>
|
||||
|
|
|
@ -8,7 +8,7 @@ function AddDeleteButtons(props) {
|
|||
}
|
||||
return (
|
||||
<Tooltip text={props.deleteTooltip}>
|
||||
<a className="thor__button-outlined-danger sm" onClick={ props.onDelete }>
|
||||
<a className="thor__button-outlined-danger sm" onClick={props.onDelete}>
|
||||
<i className="fa fa-trash-o" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
@ -20,7 +20,7 @@ function AddDeleteButtons(props) {
|
|||
}
|
||||
return (
|
||||
<Tooltip text={props.addTooltip}>
|
||||
<a className="thor__button-outlined-default sm" onClick={ props.onAdd }>
|
||||
<a className="thor__button-outlined-default sm" onClick={props.onAdd}>
|
||||
<i className="fa fa-plus" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
@ -32,7 +32,7 @@ function AddDeleteButtons(props) {
|
|||
if (props.onClone && !props.disableAdd) {
|
||||
clone = (
|
||||
<Tooltip text={props.cloneTooltip}>
|
||||
<a className="thor__button-outlined-default sm" onClick={ props.onClone }>
|
||||
<a className="thor__button-outlined-default sm" onClick={props.onClone}>
|
||||
<i className="fa fa-files-o" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import MetricSelect from './metric_select';
|
||||
import AggRow from './agg_row';
|
||||
|
@ -6,57 +6,53 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
||||
class DerivativeAgg extends Component {
|
||||
export const DerivativeAgg = props => {
|
||||
const { siblings } = props;
|
||||
|
||||
render() {
|
||||
const { siblings } = this.props;
|
||||
const defaults = { unit: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
const defaults = { unit: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="vis_editor__label">Units (1s, 1m, etc)</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
onChange={handleTextChange('unit')}
|
||||
value={model.unit}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="vis_editor__label">Units (1s, 1m, etc)</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
onChange={handleTextChange('unit')}
|
||||
value={model.unit}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
DerivativeAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -69,5 +65,3 @@ DerivativeAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default DerivativeAgg;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import FieldSelect from './field_select';
|
||||
import AggRow from './agg_row';
|
||||
|
@ -6,94 +6,90 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
||||
class FilterRatioAgg extends Component {
|
||||
export const FilterRatioAgg = props => {
|
||||
const {
|
||||
series,
|
||||
fields,
|
||||
panel
|
||||
} = props;
|
||||
|
||||
render() {
|
||||
const {
|
||||
series,
|
||||
fields,
|
||||
panel
|
||||
} = this.props;
|
||||
const handleChange = createChangeHandler(props.onChange, props.model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, this.props.model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
const defaults = {
|
||||
numerator: '*',
|
||||
denominator: '*',
|
||||
metric_agg: 'count'
|
||||
};
|
||||
|
||||
const defaults = {
|
||||
numerator: '*',
|
||||
denominator: '*',
|
||||
metric_agg: 'count'
|
||||
};
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div style={{ flex: '1 0 auto' }}>
|
||||
<div style={{ flex: '1 0 auto', display: 'flex' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Numerator</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('numerator')}
|
||||
value={model.numerator}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Denominator</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('denominator')}
|
||||
value={model.denominator}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div style={{ flex: '1 0 auto' }}>
|
||||
<div style={{ flex: '1 0 auto', display: 'flex' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '1 0 auto', display: 'flex', marginTop: '10px' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
panelType="metrics"
|
||||
value={model.metric_agg}
|
||||
onChange={handleSelectChange('metric_agg')}
|
||||
/>
|
||||
</div>
|
||||
{ model.metric_agg !== 'count' ? (
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.metric_agg}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>) : null }
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Numerator</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('numerator')}
|
||||
value={model.numerator}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Denominator</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('denominator')}
|
||||
value={model.denominator}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
<div style={{ flex: '1 0 auto', display: 'flex', marginTop: '10px' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
panelType="metrics"
|
||||
value={model.metric_agg}
|
||||
onChange={handleSelectChange('metric_agg')}
|
||||
/>
|
||||
</div>
|
||||
{ model.metric_agg !== 'count' ? (
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.metric_agg}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>) : null }
|
||||
</div>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
FilterRatioAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -106,5 +102,3 @@ FilterRatioAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default FilterRatioAgg;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggRow from './agg_row';
|
||||
import AggSelect from './agg_select';
|
||||
import MetricSelect from './metric_select';
|
||||
|
@ -8,106 +8,103 @@ import createSelectHandler from '../lib/create_select_handler';
|
|||
import createTextHandler from '../lib/create_text_handler';
|
||||
import createNumberHandler from '../lib/create_number_handler';
|
||||
|
||||
class MovingAverageAgg extends Component {
|
||||
render() {
|
||||
const { siblings } = this.props;
|
||||
const defaults = {
|
||||
settings: '',
|
||||
minimize: 0,
|
||||
window: '',
|
||||
model: 'simple'
|
||||
};
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const handleNumberChange = createNumberHandler(handleChange);
|
||||
const modelOptions = [
|
||||
{ label: 'Simple', value: 'simple' },
|
||||
{ label: 'Linear', value: 'linear' },
|
||||
{ label: 'Exponentially Weighted', value: 'ewma' },
|
||||
{ label: 'Holt-Linear', value: 'holt' },
|
||||
{ label: 'Holt-Winters', value: 'holt_winters' }
|
||||
];
|
||||
const minimizeOptions = [
|
||||
{ label: 'True', value: 1 },
|
||||
{ label: 'False', value: 0 }
|
||||
];
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
export const MovingAverageAgg = props => {
|
||||
const { siblings } = props;
|
||||
const defaults = {
|
||||
settings: '',
|
||||
minimize: 0,
|
||||
window: '',
|
||||
model: 'simple'
|
||||
};
|
||||
const model = { ...defaults, ...props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const handleNumberChange = createNumberHandler(handleChange);
|
||||
const modelOptions = [
|
||||
{ label: 'Simple', value: 'simple' },
|
||||
{ label: 'Linear', value: 'linear' },
|
||||
{ label: 'Exponentially Weighted', value: 'ewma' },
|
||||
{ label: 'Holt-Linear', value: 'holt' },
|
||||
{ label: 'Holt-Winters', value: 'holt_winters' }
|
||||
];
|
||||
const minimizeOptions = [
|
||||
{ label: 'True', value: 1 },
|
||||
{ label: 'False', value: 0 }
|
||||
];
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Model</div>
|
||||
<Select
|
||||
clearable={false}
|
||||
placeholder="Select..."
|
||||
onChange={ handleSelectChange('model') }
|
||||
value={this.props.model.model}
|
||||
options={ modelOptions }
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Window Size</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
type="text"
|
||||
onChange={handleNumberChange('window')}
|
||||
value={model.window}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Minimize</div>
|
||||
<Select
|
||||
placeholder="Select..."
|
||||
onChange={ handleSelectChange('minimize') }
|
||||
value={model.minimize}
|
||||
options={ minimizeOptions }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Settings (<code>Key=Value</code> space-delimited)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
type="text"
|
||||
onChange={handleTextChange('settings')}
|
||||
value={model.settings}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Model</div>
|
||||
<Select
|
||||
clearable={false}
|
||||
placeholder="Select..."
|
||||
onChange={handleSelectChange('model')}
|
||||
value={props.model.model}
|
||||
options={modelOptions}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Window Size</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
type="text"
|
||||
onChange={handleNumberChange('window')}
|
||||
value={model.window}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Minimize</div>
|
||||
<Select
|
||||
placeholder="Select..."
|
||||
onChange={handleSelectChange('minimize')}
|
||||
value={model.minimize}
|
||||
options={minimizeOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vis_editor__agg_row-item">
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Settings (<code>Key=Value</code> space-delimited)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
type="text"
|
||||
onChange={handleTextChange('settings')}
|
||||
value={model.settings}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
MovingAverageAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -120,5 +117,3 @@ MovingAverageAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default MovingAverageAgg;
|
||||
|
|
|
@ -114,7 +114,7 @@ Percentiles.propTypes = {
|
|||
};
|
||||
|
||||
|
||||
class PercentileAgg extends Component {
|
||||
class PercentileAgg extends Component { // eslint-disable-line react/no-multi-comp
|
||||
|
||||
componentWillMount() {
|
||||
if (!this.props.model.percentiles) {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import FieldSelect from './field_select';
|
||||
import AggRow from './agg_row';
|
||||
|
@ -6,60 +6,55 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
||||
class PercentileRankAgg extends Component {
|
||||
export const PercentileRankAgg = props => {
|
||||
const { series, panel, fields } = props;
|
||||
const defaults = { value: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
render() {
|
||||
const { series, panel, fields } = this.props;
|
||||
const defaults = { value: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.type}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__percentile_rank_value">
|
||||
<div className="vis_editor__label">Value</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
value={model.value}
|
||||
onChange={handleTextChange('value')}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.type}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__percentile_rank_value">
|
||||
<div className="vis_editor__label">Value</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
value={model.value}
|
||||
onChange={handleTextChange('value')}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
PercentileRankAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -72,6 +67,3 @@ PercentileRankAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default PercentileRankAgg;
|
||||
|
||||
|
|
|
@ -1,51 +1,47 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import MetricSelect from './metric_select';
|
||||
import AggRow from './agg_row';
|
||||
import createChangeHandler from '../lib/create_change_handler';
|
||||
import createSelectHandler from '../lib/create_select_handler';
|
||||
|
||||
class PositiveOnlyAgg extends Component {
|
||||
export const PositiveOnlyAgg = props => {
|
||||
const { siblings } = props;
|
||||
|
||||
render() {
|
||||
const { siblings } = this.props;
|
||||
const defaults = { unit: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
const defaults = { unit: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
PositiveOnlyAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -58,5 +54,3 @@ PositiveOnlyAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default PositiveOnlyAgg;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import MetricSelect from './metric_select';
|
||||
import AggRow from './agg_row';
|
||||
|
@ -6,56 +6,52 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createNumberHandler from '../lib/create_number_handler';
|
||||
|
||||
class SerialDiffAgg extends Component {
|
||||
export const SerialDiffAgg = props => {
|
||||
const { siblings } = props;
|
||||
const defaults = { lag: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
render() {
|
||||
const { siblings } = this.props;
|
||||
const defaults = { lag: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleNumberChange = createNumberHandler(handleChange);
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleNumberChange = createNumberHandler(handleChange);
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="vis_editor__label">Lag</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
onChange={handleNumberChange('lag')}
|
||||
value={model.lag}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="vis_editor__label">Lag</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
onChange={handleNumberChange('lag')}
|
||||
value={model.lag}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
SerialDiffAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -68,6 +64,3 @@ SerialDiffAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default SerialDiffAgg;
|
||||
|
||||
|
|
|
@ -1,62 +1,58 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
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';
|
||||
|
||||
class FilterRatioAgg extends Component {
|
||||
export const Static = props => {
|
||||
const handleChange = createChangeHandler(props.onChange, props.model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
render() {
|
||||
const handleChange = createChangeHandler(this.props.onChange, this.props.model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const defaults = {
|
||||
numerator: '*',
|
||||
denominator: '*',
|
||||
metric_agg: 'count'
|
||||
};
|
||||
|
||||
const defaults = {
|
||||
numerator: '*',
|
||||
denominator: '*',
|
||||
metric_agg: 'count'
|
||||
};
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div style={{ flex: '1 0 auto' }}>
|
||||
<div style={{ flex: '1 0 auto', display: 'flex' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Static Value</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('value')}
|
||||
value={model.value}
|
||||
steps="0.1"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div style={{ flex: '1 0 auto' }}>
|
||||
<div style={{ flex: '1 0 auto', display: 'flex' }}>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Static Value</div>
|
||||
<input
|
||||
className="vis_editor__input-grows-100"
|
||||
onChange={handleTextChange('value')}
|
||||
value={model.value}
|
||||
steps="0.1"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
FilterRatioAgg.propTypes = {
|
||||
Static.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
fields: PropTypes.object,
|
||||
model: PropTypes.object,
|
||||
|
@ -67,6 +63,3 @@ FilterRatioAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default FilterRatioAgg;
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggSelect from './agg_select';
|
||||
import FieldSelect from './field_select';
|
||||
import AggRow from './agg_row';
|
||||
|
@ -7,74 +7,70 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
||||
class StandardDeviationAgg extends Component {
|
||||
export const StandardDeviationAgg = props => {
|
||||
const { series, panel, fields } = props;
|
||||
const defaults = { sigma: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
render() {
|
||||
const { series, panel, fields } = this.props;
|
||||
const defaults = { sigma: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const modeOptions = [
|
||||
{ label: 'Raw', value: 'raw' },
|
||||
{ label: 'Upper Bound', value: 'upper' },
|
||||
{ label: 'Lower Bound', value: 'lower' },
|
||||
{ label: 'Bounds Band', value: 'band' }
|
||||
];
|
||||
|
||||
const modeOptions = [
|
||||
{ label: 'Raw', value: 'raw' },
|
||||
{ label: 'Upper Bound', value: 'upper' },
|
||||
{ label: 'Lower Bound', value: 'lower' },
|
||||
{ label: 'Bounds Band', value: 'band' }
|
||||
];
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
|
||||
const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_deviation-field">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.type}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_deviation-sigma_item">
|
||||
<div className="vis_editor__label">Sigma</div>
|
||||
<input
|
||||
className="vis_editor__std_deviation-sigma"
|
||||
value={model.sigma}
|
||||
onChange={handleTextChange('sigma')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Mode</div>
|
||||
<Select
|
||||
options={modeOptions}
|
||||
onChange={handleSelectChange('mode')}
|
||||
value={model.mode}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_deviation-field">
|
||||
<div className="vis_editor__label">Field</div>
|
||||
<FieldSelect
|
||||
fields={fields}
|
||||
type={model.type}
|
||||
restrict="numeric"
|
||||
indexPattern={indexPattern}
|
||||
value={model.field}
|
||||
onChange={handleSelectChange('field')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_deviation-sigma_item">
|
||||
<div className="vis_editor__label">Sigma</div>
|
||||
<input
|
||||
className="vis_editor__std_deviation-sigma"
|
||||
value={model.sigma}
|
||||
onChange={handleTextChange('sigma')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Mode</div>
|
||||
<Select
|
||||
options={modeOptions}
|
||||
onChange={handleSelectChange('mode')}
|
||||
value={model.mode}
|
||||
/>
|
||||
</div>
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
StandardDeviationAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -87,5 +83,3 @@ StandardDeviationAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default StandardDeviationAgg;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import AggRow from './agg_row';
|
||||
import MetricSelect from './metric_select';
|
||||
import AggSelect from './agg_select';
|
||||
|
@ -7,82 +7,78 @@ import createChangeHandler from '../lib/create_change_handler';
|
|||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
||||
class StandardSiblingAgg extends Component {
|
||||
export const StandardSiblingAgg = props => {
|
||||
const { siblings } = props;
|
||||
const defaults = { sigma: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
|
||||
render() {
|
||||
const { siblings } = this.props;
|
||||
const defaults = { sigma: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleChange = createChangeHandler(props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
|
||||
const handleChange = createChangeHandler(this.props.onChange, model);
|
||||
const handleSelectChange = createSelectHandler(handleChange);
|
||||
const handleTextChange = createTextHandler(handleChange);
|
||||
const stdDev = {};
|
||||
if (model.type === 'std_deviation_bucket') {
|
||||
stdDev.sigma = (
|
||||
<div className="vis_editor__std_deviation-sigma_item">
|
||||
<div className="vis_editor__label">Sigma</div>
|
||||
<input
|
||||
className="vis_editor__std_deviation-sigma"
|
||||
value={model.sigma}
|
||||
onChange={handleTextChange('sigma')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const stdDev = {};
|
||||
if (model.type === 'std_deviation_bucket') {
|
||||
stdDev.sigma = (
|
||||
<div className="vis_editor__std_deviation-sigma_item">
|
||||
<div className="vis_editor__label">Sigma</div>
|
||||
<input
|
||||
className="vis_editor__std_deviation-sigma"
|
||||
value={model.sigma}
|
||||
onChange={handleTextChange('sigma')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const modeOptions = [
|
||||
{ label: 'Raw', value: 'raw' },
|
||||
{ label: 'Upper Bound', value: 'upper' },
|
||||
{ label: 'Lower Bound', value: 'lower' },
|
||||
{ label: 'Bounds Band', value: 'band' }
|
||||
];
|
||||
|
||||
const modeOptions = [
|
||||
{ label: 'Raw', value: 'raw' },
|
||||
{ label: 'Upper Bound', value: 'upper' },
|
||||
{ label: 'Lower Bound', value: 'lower' },
|
||||
{ label: 'Bounds Band', value: 'band' }
|
||||
];
|
||||
|
||||
stdDev.mode = (
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Mode</div>
|
||||
<Select
|
||||
options={modeOptions}
|
||||
onChange={handleSelectChange('mode')}
|
||||
value={model.mode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={this.props.disableDelete}
|
||||
model={this.props.model}
|
||||
onAdd={this.props.onAdd}
|
||||
onDelete={this.props.onDelete}
|
||||
siblings={this.props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={this.props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_sibling-metric">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
exclude={['percentile']}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
{ stdDev.sigma }
|
||||
{ stdDev.mode }
|
||||
</AggRow>
|
||||
stdDev.mode = (
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Mode</div>
|
||||
<Select
|
||||
options={modeOptions}
|
||||
onChange={handleSelectChange('mode')}
|
||||
value={model.mode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return (
|
||||
<AggRow
|
||||
disableDelete={props.disableDelete}
|
||||
model={props.model}
|
||||
onAdd={props.onAdd}
|
||||
onDelete={props.onDelete}
|
||||
siblings={props.siblings}
|
||||
>
|
||||
<div className="vis_editor__row_item">
|
||||
<div className="vis_editor__label">Aggregation</div>
|
||||
<AggSelect
|
||||
siblings={props.siblings}
|
||||
value={model.type}
|
||||
onChange={handleSelectChange('type')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__std_sibling-metric">
|
||||
<div className="vis_editor__label">Metric</div>
|
||||
<MetricSelect
|
||||
onChange={handleSelectChange('field')}
|
||||
exclude={['percentile']}
|
||||
metrics={siblings}
|
||||
metric={model}
|
||||
value={model.field}
|
||||
/>
|
||||
</div>
|
||||
{ stdDev.sigma }
|
||||
{ stdDev.mode }
|
||||
</AggRow>
|
||||
);
|
||||
};
|
||||
|
||||
StandardSiblingAgg.propTypes = {
|
||||
disableDelete: PropTypes.bool,
|
||||
|
@ -95,5 +91,3 @@ StandardSiblingAgg.propTypes = {
|
|||
series: PropTypes.object,
|
||||
siblings: PropTypes.array,
|
||||
};
|
||||
|
||||
export default StandardSiblingAgg;
|
||||
|
|
|
@ -82,7 +82,7 @@ class ColorPicker extends Component {
|
|||
onClick={this.handleClose}
|
||||
/>
|
||||
<Picker
|
||||
color={ value }
|
||||
color={value}
|
||||
onChangeComplete={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -66,21 +66,21 @@ export class CustomColorPicker extends Component {
|
|||
<div className="color_picker__saturation">
|
||||
<Saturation
|
||||
style={styles.Saturation}
|
||||
{ ...this.props }
|
||||
{...this.props}
|
||||
pointer={ChromePointerCircle}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="color_picker__body">
|
||||
<div className="color_picker__controls flexbox-fix">
|
||||
<div className={ this.props.disableAlpha ? 'color_picker__color-disable_alpha' : 'color_picker__color' }>
|
||||
<div className={ this.props.disableAlpha ? 'color_picker__swatch-disable_alpha' : 'color_picker__swatch' }>
|
||||
<div className={this.props.disableAlpha ? 'color_picker__color-disable_alpha' : 'color_picker__color'}>
|
||||
<div className={this.props.disableAlpha ? 'color_picker__swatch-disable_alpha' : 'color_picker__swatch'}>
|
||||
<div className="color_picker__active" />
|
||||
<Checkboard />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color_picker__toggles">
|
||||
<div className={ this.props.disableAlpha ? 'color_picker__hue-disable_alpha' : 'color_picker__hue' }>
|
||||
<div className={this.props.disableAlpha ? 'color_picker__hue-disable_alpha' : 'color_picker__hue'}>
|
||||
<Hue
|
||||
style={styles.Hue}
|
||||
{...this.props}
|
||||
|
@ -88,7 +88,7 @@ export class CustomColorPicker extends Component {
|
|||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className={ this.props.disableAlpha ? 'color_picker__alpha-disable_alpha' : 'color_picker__alpha'}>
|
||||
<div className={this.props.disableAlpha ? 'color_picker__alpha-disable_alpha' : 'color_picker__alpha'}>
|
||||
<Alpha
|
||||
style={styles.Alpha}
|
||||
{...this.props}
|
||||
|
|
|
@ -1,63 +1,61 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
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';
|
||||
|
||||
class IndexPattern extends Component {
|
||||
render() {
|
||||
const { fields, prefix } = this.props;
|
||||
const handleSelectChange = createSelectHandler(this.props.onChange);
|
||||
const handleTextChange = createTextHandler(this.props.onChange);
|
||||
const timeFieldName = `${prefix}time_field`;
|
||||
const indexPatternName = `${prefix}index_pattern`;
|
||||
const intervalName = `${prefix}interval`;
|
||||
const dropBucketName = `${prefix}drop_last_bucket`;
|
||||
export const IndexPattern = props => {
|
||||
const { fields, prefix } = props;
|
||||
const handleSelectChange = createSelectHandler(props.onChange);
|
||||
const handleTextChange = createTextHandler(props.onChange);
|
||||
const timeFieldName = `${prefix}time_field`;
|
||||
const indexPatternName = `${prefix}index_pattern`;
|
||||
const intervalName = `${prefix}interval`;
|
||||
const dropBucketName = `${prefix}drop_last_bucket`;
|
||||
|
||||
const defaults = {
|
||||
[indexPatternName]: '*',
|
||||
[intervalName]: 'auto',
|
||||
[dropBucketName]: 1
|
||||
};
|
||||
const defaults = {
|
||||
[indexPatternName]: '*',
|
||||
[intervalName]: 'auto',
|
||||
[dropBucketName]: 1
|
||||
};
|
||||
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
return (
|
||||
<div className={this.props.className}>
|
||||
<div className="vis_editor__label">Index Pattern</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
disabled={this.props.disabled}
|
||||
onChange={handleTextChange(indexPatternName, '*')}
|
||||
value={model[indexPatternName]}
|
||||
/>
|
||||
<div className="vis_editor__label">Time Field</div>
|
||||
<div className="vis_editor__index_pattern-fields">
|
||||
<FieldSelect
|
||||
restrict="date"
|
||||
value={model[timeFieldName]}
|
||||
disabled={this.props.disabled}
|
||||
onChange={handleSelectChange(timeFieldName)}
|
||||
indexPattern={model[indexPatternName]}
|
||||
fields={fields}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__label">Interval (auto, 1m, 1d, 1w, 1y)</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
disabled={this.props.disabled}
|
||||
onChange={handleTextChange(intervalName, 'auto')}
|
||||
value={model[intervalName]}
|
||||
/>
|
||||
<div className="vis_editor__label">Drop Last Bucket</div>
|
||||
<YesNo
|
||||
value={model[dropBucketName]}
|
||||
name={dropBucketName}
|
||||
onChange={this.props.onChange}
|
||||
const model = { ...defaults, ...props.model };
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="vis_editor__label">Index Pattern</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
disabled={props.disabled}
|
||||
onChange={handleTextChange(indexPatternName, '*')}
|
||||
value={model[indexPatternName]}
|
||||
/>
|
||||
<div className="vis_editor__label">Time Field</div>
|
||||
<div className="vis_editor__index_pattern-fields">
|
||||
<FieldSelect
|
||||
restrict="date"
|
||||
value={model[timeFieldName]}
|
||||
disabled={props.disabled}
|
||||
onChange={handleSelectChange(timeFieldName)}
|
||||
indexPattern={model[indexPatternName]}
|
||||
fields={fields}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="vis_editor__label">Interval (auto, 1m, 1d, 1w, 1y)</div>
|
||||
<input
|
||||
className="vis_editor__input"
|
||||
disabled={props.disabled}
|
||||
onChange={handleTextChange(intervalName, 'auto')}
|
||||
value={model[intervalName]}
|
||||
/>
|
||||
<div className="vis_editor__label">Drop Last Bucket</div>
|
||||
<YesNo
|
||||
value={model[dropBucketName]}
|
||||
name={dropBucketName}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
IndexPattern.defaultProps = {
|
||||
prefix: '',
|
||||
|
@ -73,5 +71,3 @@ IndexPattern.propTypes = {
|
|||
disabled: PropTypes.bool,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
export default IndexPattern;
|
||||
|
|
|
@ -1,45 +1,45 @@
|
|||
import MovingAverage from '../aggs/moving_average';
|
||||
import Derivative from '../aggs/derivative';
|
||||
import { MovingAverageAgg } from '../aggs/moving_average';
|
||||
import { DerivativeAgg } from '../aggs/derivative';
|
||||
import Calculation from '../aggs/calculation';
|
||||
import StdAgg from '../aggs/std_agg';
|
||||
import Percentile from '../aggs/percentile';
|
||||
import CumulativeSum from '../aggs/cumulative_sum';
|
||||
import StdDeviation from '../aggs/std_deviation';
|
||||
import StdSibling from '../aggs/std_sibling';
|
||||
import { StandardDeviationAgg } from '../aggs/std_deviation';
|
||||
import { StandardSiblingAgg } from '../aggs/std_sibling';
|
||||
import SeriesAgg from '../aggs/series_agg';
|
||||
import SerialDiff from '../aggs/serial_diff';
|
||||
import PositiveOnly from '../aggs/positive_only';
|
||||
import FilterRatio from '../aggs/filter_ratio';
|
||||
import PercentileRank from '../aggs/percentile_rank';
|
||||
import Static from '../aggs/static';
|
||||
import { SerialDiffAgg } from '../aggs/serial_diff';
|
||||
import { PositiveOnlyAgg } from '../aggs/positive_only';
|
||||
import { FilterRatioAgg } from '../aggs/filter_ratio';
|
||||
import { PercentileRankAgg } from '../aggs/percentile_rank';
|
||||
import { Static } from '../aggs/static';
|
||||
export default {
|
||||
count: StdAgg,
|
||||
avg: StdAgg,
|
||||
max: StdAgg,
|
||||
min: StdAgg,
|
||||
sum: StdAgg,
|
||||
std_deviation: StdDeviation,
|
||||
std_deviation: StandardDeviationAgg,
|
||||
sum_of_squares: StdAgg,
|
||||
variance: StdAgg,
|
||||
avg_bucket: StdSibling,
|
||||
max_bucket: StdSibling,
|
||||
min_bucket: StdSibling,
|
||||
sum_bucket: StdSibling,
|
||||
variance_bucket: StdSibling,
|
||||
sum_of_squares_bucket: StdSibling,
|
||||
std_deviation_bucket: StdSibling,
|
||||
avg_bucket: StandardSiblingAgg,
|
||||
max_bucket: StandardSiblingAgg,
|
||||
min_bucket: StandardSiblingAgg,
|
||||
sum_bucket: StandardSiblingAgg,
|
||||
variance_bucket: StandardSiblingAgg,
|
||||
sum_of_squares_bucket: StandardSiblingAgg,
|
||||
std_deviation_bucket: StandardSiblingAgg,
|
||||
percentile: Percentile,
|
||||
percentile_rank: PercentileRank,
|
||||
percentile_rank: PercentileRankAgg,
|
||||
cardinality: StdAgg,
|
||||
value_count: StdAgg,
|
||||
calculation: Calculation,
|
||||
cumulative_sum: CumulativeSum,
|
||||
moving_average: MovingAverage,
|
||||
derivative: Derivative,
|
||||
moving_average: MovingAverageAgg,
|
||||
derivative: DerivativeAgg,
|
||||
series_agg: SeriesAgg,
|
||||
serial_diff: SerialDiff,
|
||||
filter_ratio: FilterRatio,
|
||||
positive_only: PositiveOnly,
|
||||
serial_diff: SerialDiffAgg,
|
||||
filter_ratio: FilterRatioAgg,
|
||||
positive_only: PositiveOnlyAgg,
|
||||
static: Static
|
||||
};
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@ class MarkdownEditor extends Component {
|
|||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<code>"{ value }"</code>
|
||||
<code>“{ value }”</code>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
@ -67,7 +67,7 @@ class MarkdownEditor extends Component {
|
|||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<code>[ [ "{date}", "{value}" ], ... ]</code>
|
||||
<code>[ [ “{date}”, “{value}” ], ... ]</code>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
|
|
@ -19,7 +19,7 @@ function PanelConfig(props) {
|
|||
if (component) {
|
||||
return React.createElement(component, props);
|
||||
}
|
||||
return (<div>Missing panel config for "{model.type}"</div>);
|
||||
return (<div>Missing panel config for “{model.type}”</div>);
|
||||
}
|
||||
|
||||
PanelConfig.propTypes = {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import SeriesEditor from '../series_editor';
|
||||
import IndexPattern from '../index_pattern';
|
||||
import { IndexPattern } from '../index_pattern';
|
||||
import Select from 'react-select';
|
||||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import SeriesEditor from '../series_editor';
|
||||
import IndexPattern from '../index_pattern';
|
||||
import { IndexPattern } from '../index_pattern';
|
||||
import AceEditor from 'react-ace';
|
||||
import 'brace/mode/less';
|
||||
import Select from 'react-select';
|
||||
|
@ -120,7 +120,7 @@ class MarkdownPanelConfig extends Component {
|
|||
width="100%"
|
||||
name={`ace-css-${model.id}`}
|
||||
setOptions={{ fontSize: '14px' }}
|
||||
value={ model.markdown_less}
|
||||
value={model.markdown_less}
|
||||
onChange={this.handleCSSChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import SeriesEditor from '../series_editor';
|
||||
import IndexPattern from '../index_pattern';
|
||||
import { IndexPattern } from '../index_pattern';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
import ColorRules from '../color_rules';
|
||||
import YesNo from '../yes_no';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import SeriesEditor from '../series_editor';
|
||||
import AnnotationsEditor from '../annotations_editor';
|
||||
import IndexPattern from '../index_pattern';
|
||||
import { IndexPattern } from '../index_pattern';
|
||||
import Select from 'react-select';
|
||||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import SeriesEditor from '../series_editor';
|
||||
import IndexPattern from '../index_pattern';
|
||||
import { IndexPattern } from '../index_pattern';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
import ColorRules from '../color_rules';
|
||||
import ColorPicker from '../color_picker';
|
||||
|
|
|
@ -1,61 +1,58 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import DataFormatPicker from './data_format_picker';
|
||||
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 { IndexPattern } from './index_pattern';
|
||||
|
||||
class SeriesConfig extends Component {
|
||||
render() {
|
||||
const defaults = { offset_time: '', value_template: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleSelectChange = createSelectHandler(this.props.onChange);
|
||||
const handleTextChange = createTextHandler(this.props.onChange);
|
||||
export const SeriesConfig = props => {
|
||||
const defaults = { offset_time: '', value_template: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
const handleSelectChange = createSelectHandler(props.onChange);
|
||||
const handleTextChange = createTextHandler(props.onChange);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="vis_editor__series_config-container">
|
||||
<div className="vis_editor__series_config-row">
|
||||
<DataFormatPicker
|
||||
onChange={handleSelectChange('formatter')}
|
||||
value={model.formatter}
|
||||
/>
|
||||
<div className="vis_editor__label">Template (eg.<code>{'{{value}}/s'}</code>)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleTextChange('value_template')}
|
||||
value={model.value_template}
|
||||
/>
|
||||
<div className="vis_editor__label">Offset series time by (1m, 1h, 1w, 1d)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
type="text"
|
||||
onChange={handleTextChange('offset_time')}
|
||||
value={model.offset_time}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__series_config-row">
|
||||
<div className="vis_editor__label">Override Index Pattern</div>
|
||||
<YesNo
|
||||
value={model.override_index_pattern}
|
||||
name="override_index_pattern"
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
<IndexPattern
|
||||
onChange={this.props.onChange}
|
||||
model={this.props.model}
|
||||
fields={this.props.fields}
|
||||
prefix="series_"
|
||||
className="vis_editor__row_item vis_editor__row"
|
||||
disabled={!model.override_index_pattern}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<div className="vis_editor__series_config-container">
|
||||
<div className="vis_editor__series_config-row">
|
||||
<DataFormatPicker
|
||||
onChange={handleSelectChange('formatter')}
|
||||
value={model.formatter}
|
||||
/>
|
||||
<div className="vis_editor__label">Template (eg.<code>{'{{value}}/s'}</code>)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleTextChange('value_template')}
|
||||
value={model.value_template}
|
||||
/>
|
||||
<div className="vis_editor__label">Offset series time by (1m, 1h, 1w, 1d)</div>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
type="text"
|
||||
onChange={handleTextChange('offset_time')}
|
||||
value={model.offset_time}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__series_config-row">
|
||||
<div className="vis_editor__label">Override Index Pattern</div>
|
||||
<YesNo
|
||||
value={model.override_index_pattern}
|
||||
name="override_index_pattern"
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<IndexPattern
|
||||
onChange={props.onChange}
|
||||
model={props.model}
|
||||
fields={props.fields}
|
||||
prefix="series_"
|
||||
className="vis_editor__row_item vis_editor__row"
|
||||
disabled={!model.override_index_pattern}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SeriesConfig.propTypes = {
|
||||
fields: PropTypes.object,
|
||||
|
@ -63,5 +60,3 @@ SeriesConfig.propTypes = {
|
|||
onChange: PropTypes.func
|
||||
};
|
||||
|
||||
export default SeriesConfig;
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import uuid from 'uuid';
|
||||
|
||||
import SplitByTerms from './splits/terms';
|
||||
import SplitByFilter from './splits/filter';
|
||||
import { SplitByTerms } from './splits/terms';
|
||||
import { SplitByFilter } from './splits/filter';
|
||||
import SplitByFilters from './splits/filters';
|
||||
import SplitByEverything from './splits/everything';
|
||||
|
||||
|
|
|
@ -1,40 +1,34 @@
|
|||
import createTextHandler from '../lib/create_text_handler';
|
||||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import GroupBySelect from './group_by_select';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
class SplitByFilter extends Component {
|
||||
|
||||
render() {
|
||||
const { onChange } = this.props;
|
||||
const defaults = { filter: '' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const handleTextChange = createTextHandler(onChange);
|
||||
const handleSelectChange = createSelectHandler(onChange);
|
||||
return (
|
||||
<div className="vis_editor__split-container">
|
||||
<div className="vis_editor__label">Group By</div>
|
||||
<div className="vis_editor__split-selects">
|
||||
<GroupBySelect
|
||||
value={model.split_mode}
|
||||
onChange={handleSelectChange('split_mode')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__label">Query String</div>
|
||||
<input
|
||||
className="vis_editor__split-filter"
|
||||
value={model.filter}
|
||||
onChange={handleTextChange('filter')}
|
||||
export const SplitByFilter = props => {
|
||||
const { onChange } = props;
|
||||
const defaults = { filter: '' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
const handleTextChange = createTextHandler(onChange);
|
||||
const handleSelectChange = createSelectHandler(onChange);
|
||||
return (
|
||||
<div className="vis_editor__split-container">
|
||||
<div className="vis_editor__label">Group By</div>
|
||||
<div className="vis_editor__split-selects">
|
||||
<GroupBySelect
|
||||
value={model.split_mode}
|
||||
onChange={handleSelectChange('split_mode')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
<div className="vis_editor__label">Query String</div>
|
||||
<input
|
||||
className="vis_editor__split-filter"
|
||||
value={model.filter}
|
||||
onChange={handleTextChange('filter')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SplitByFilter.propTypes = {
|
||||
model: PropTypes.object,
|
||||
onChange: PropTypes.func
|
||||
};
|
||||
|
||||
export default SplitByFilter;
|
||||
|
|
|
@ -10,9 +10,9 @@ function GroupBySelect(props) {
|
|||
return (
|
||||
<Select
|
||||
clearable={false}
|
||||
value={ props.value || 'everything' }
|
||||
value={props.value || 'everything'}
|
||||
onChange={props.onChange}
|
||||
options={ modeOptions }
|
||||
options={modeOptions}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,63 +1,59 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import GroupBySelect from './group_by_select';
|
||||
import createTextHandler from '../lib/create_text_handler';
|
||||
import createSelectHandler from '../lib/create_select_handler';
|
||||
import FieldSelect from '../aggs/field_select';
|
||||
import MetricSelect from '../aggs/metric_select';
|
||||
|
||||
class SplitByTerms extends Component {
|
||||
export const SplitByTerms = props => {
|
||||
const handleTextChange = createTextHandler(props.onChange);
|
||||
const handleSelectChange = createSelectHandler(props.onChange);
|
||||
const { indexPattern } = props;
|
||||
const defaults = { terms_size: 10, terms_order_by: '_count' };
|
||||
const model = { ...defaults, ...props.model };
|
||||
const { metrics } = model;
|
||||
const defaultCount = { value: '_count', label: 'Doc Count (default)' };
|
||||
|
||||
render() {
|
||||
const handleTextChange = createTextHandler(this.props.onChange);
|
||||
const handleSelectChange = createSelectHandler(this.props.onChange);
|
||||
const { indexPattern } = this.props;
|
||||
const defaults = { terms_size: 10, terms_order_by: '_count' };
|
||||
const model = { ...defaults, ...this.props.model };
|
||||
const { metrics } = model;
|
||||
const defaultCount = { value: '_count', label: 'Doc Count (default)' };
|
||||
|
||||
return (
|
||||
<div className="vis_editor__split-container">
|
||||
<div className="vis_editor__label">Group By</div>
|
||||
<div className="vis_editor__split-selects">
|
||||
<GroupBySelect
|
||||
value={model.split_mode}
|
||||
onChange={handleSelectChange('split_mode')}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__label">By</div>
|
||||
<div className="vis_editor__item">
|
||||
<FieldSelect
|
||||
indexPattern={indexPattern}
|
||||
onChange={handleSelectChange('terms_field')}
|
||||
value={model.terms_field}
|
||||
fields={this.props.fields}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__label">Top</div>
|
||||
<input
|
||||
placeholder="Size..."
|
||||
type="number"
|
||||
value={model.terms_size}
|
||||
className="vis_editor__split-term_count"
|
||||
onChange={handleTextChange('terms_size')}
|
||||
return (
|
||||
<div className="vis_editor__split-container">
|
||||
<div className="vis_editor__label">Group By</div>
|
||||
<div className="vis_editor__split-selects">
|
||||
<GroupBySelect
|
||||
value={model.split_mode}
|
||||
onChange={handleSelectChange('split_mode')}
|
||||
/>
|
||||
<div className="vis_editor__label">Order By</div>
|
||||
<div className="vis_editor__split-aggs">
|
||||
<MetricSelect
|
||||
metrics={metrics}
|
||||
clearable={false}
|
||||
additionalOptions={[defaultCount]}
|
||||
onChange={handleSelectChange('terms_order_by')}
|
||||
restrict="basic"
|
||||
value={model.terms_order_by}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
<div className="vis_editor__label">By</div>
|
||||
<div className="vis_editor__item">
|
||||
<FieldSelect
|
||||
indexPattern={indexPattern}
|
||||
onChange={handleSelectChange('terms_field')}
|
||||
value={model.terms_field}
|
||||
fields={props.fields}
|
||||
/>
|
||||
</div>
|
||||
<div className="vis_editor__label">Top</div>
|
||||
<input
|
||||
placeholder="Size..."
|
||||
type="number"
|
||||
value={model.terms_size}
|
||||
className="vis_editor__split-term_count"
|
||||
onChange={handleTextChange('terms_size')}
|
||||
/>
|
||||
<div className="vis_editor__label">Order By</div>
|
||||
<div className="vis_editor__split-aggs">
|
||||
<MetricSelect
|
||||
metrics={metrics}
|
||||
clearable={false}
|
||||
additionalOptions={[defaultCount]}
|
||||
onChange={handleSelectChange('terms_order_by')}
|
||||
restrict="basic"
|
||||
value={model.terms_order_by}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SplitByTerms.propTypes = {
|
||||
model: PropTypes.object,
|
||||
|
@ -65,5 +61,3 @@ SplitByTerms.propTypes = {
|
|||
indexPattern: PropTypes.string,
|
||||
fields: PropTypes.object
|
||||
};
|
||||
|
||||
export default SplitByTerms;
|
||||
|
|
|
@ -47,7 +47,7 @@ function VisPicker(props) {
|
|||
<VisPickerItem
|
||||
key={item.type}
|
||||
onClick={handleChange}
|
||||
selected={ item.type === model.type }
|
||||
selected={item.type === model.type}
|
||||
{...item}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import ColorPicker from '../../color_picker';
|
||||
import AddDeleteButtons from '../../add_delete_buttons';
|
||||
import SeriesConfig from '../../series_config';
|
||||
import { SeriesConfig } from '../../series_config';
|
||||
import Sortable from 'react-anything-sortable';
|
||||
import Split from '../../split';
|
||||
import Tooltip from '../../tooltip';
|
||||
|
@ -125,13 +125,13 @@ function GaugeSeries(props) {
|
|||
>
|
||||
<div className="vis_editor__container">
|
||||
<div className="vis_editor__series-details">
|
||||
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
|
||||
<div onClick={props.toggleVisible}><i className={caretClassName}/></div>
|
||||
{ colorPicker }
|
||||
<div className="vis_editor__row vis_editor__row_item">
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleChange('label')}
|
||||
placeholder='Label'
|
||||
placeholder="Label"
|
||||
value={model.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import AddDeleteButtons from '../../add_delete_buttons';
|
||||
import SeriesConfig from '../../series_config';
|
||||
import { SeriesConfig } from '../../series_config';
|
||||
import Sortable from 'react-anything-sortable';
|
||||
import Split from '../../split';
|
||||
import createAggRowRender from '../../lib/create_agg_row_render';
|
||||
|
@ -100,18 +100,18 @@ function MarkdownSeries(props) {
|
|||
>
|
||||
<div className="vis_editor__container">
|
||||
<div className="vis_editor__series-details">
|
||||
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
|
||||
<div onClick={props.toggleVisible}><i className={caretClassName}/></div>
|
||||
<div className="vis_editor__row vis_editor__row_item">
|
||||
<input
|
||||
className="vis_editor__input-grows vis_editor__row_item"
|
||||
onChange={handleChange('label')}
|
||||
placeholder='Label'
|
||||
placeholder="Label"
|
||||
value={model.label}
|
||||
/>
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleChange('var_name')}
|
||||
placeholder='Variable Name'
|
||||
placeholder="Variable Name"
|
||||
value={model.var_name}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import ColorPicker from '../../color_picker';
|
||||
import AddDeleteButtons from '../../add_delete_buttons';
|
||||
import SeriesConfig from '../../series_config';
|
||||
import { SeriesConfig } from '../../series_config';
|
||||
import Sortable from 'react-anything-sortable';
|
||||
import Split from '../../split';
|
||||
import Tooltip from '../../tooltip';
|
||||
|
@ -125,13 +125,13 @@ function MetricSeries(props) {
|
|||
>
|
||||
<div className="vis_editor__container">
|
||||
<div className="vis_editor__series-details">
|
||||
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
|
||||
<div onClick={props.toggleVisible}><i className={caretClassName}/></div>
|
||||
{ colorPicker }
|
||||
<div className="vis_editor__row vis_editor__row_item">
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleChange('label')}
|
||||
placeholder='Label'
|
||||
placeholder="Label"
|
||||
value={model.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@ import DataFormatPicker from '../../data_format_picker';
|
|||
import createSelectHandler from '../../lib/create_select_handler';
|
||||
import YesNo from '../../yes_no';
|
||||
import createTextHandler from '../../lib/create_text_handler';
|
||||
import IndexPattern from '../../index_pattern';
|
||||
import { IndexPattern } from '../../index_pattern';
|
||||
|
||||
function TimeseriesConfig(props) {
|
||||
const handleSelectChange = createSelectHandler(props.onChange);
|
||||
|
|
|
@ -125,13 +125,13 @@ function TimeseriesSeries(props) {
|
|||
>
|
||||
<div className="vis_editor__container">
|
||||
<div className="vis_editor__series-details">
|
||||
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
|
||||
<div onClick={props.toggleVisible}><i className={caretClassName}/></div>
|
||||
{ colorPicker }
|
||||
<div className="vis_editor__row vis_editor__row_item">
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleChange('label')}
|
||||
placeholder='Label'
|
||||
placeholder="Label"
|
||||
value={model.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import ColorPicker from '../../color_picker';
|
||||
import AddDeleteButtons from '../../add_delete_buttons';
|
||||
import SeriesConfig from '../../series_config';
|
||||
import { SeriesConfig } from '../../series_config';
|
||||
import Sortable from 'react-anything-sortable';
|
||||
import Split from '../../split';
|
||||
import Tooltip from '../../tooltip';
|
||||
|
@ -120,13 +120,13 @@ function TopNSeries(props) {
|
|||
>
|
||||
<div className="vis_editor__container">
|
||||
<div className="vis_editor__series-details">
|
||||
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
|
||||
<div onClick={props.toggleVisible}><i className={caretClassName}/></div>
|
||||
{ colorPicker }
|
||||
<div className="vis_editor__row vis_editor__row_item">
|
||||
<input
|
||||
className="vis_editor__input-grows"
|
||||
onChange={handleChange('label')}
|
||||
placeholder='Label'
|
||||
placeholder="Label"
|
||||
value={model.label}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -29,7 +29,7 @@ class Resize extends Component {
|
|||
const el = findDOMNode(this.el);
|
||||
const currentWidth = el.parentNode.clientWidth;
|
||||
const currentHeight = el.parentNode.clientHeight;
|
||||
this.setState({ currentHeight, currentWidth });
|
||||
this.setState({ currentHeight, currentWidth }); // eslint-disable-line react/no-did-mount-set-state
|
||||
this.checkSize();
|
||||
}
|
||||
|
||||
|
|
|
@ -123,12 +123,12 @@ class Timeseries extends Component {
|
|||
<TimeseriesChart
|
||||
crosshair={this.props.crosshair}
|
||||
onBrush={this.props.onBrush}
|
||||
plothover={ this.plothover}
|
||||
plothover={this.plothover}
|
||||
reversed={this.props.reversed}
|
||||
series={this.props.series}
|
||||
annotations={this.props.annotations}
|
||||
show={ this.state.show }
|
||||
showGrid={ this.props.showGrid }
|
||||
show={this.state.show}
|
||||
showGrid={this.props.showGrid}
|
||||
tickFormatter={this.props.tickFormatter}
|
||||
options={this.props.options}
|
||||
xaxisLabel={this.props.xaxisLabel}
|
||||
|
|
|
@ -12,12 +12,12 @@ export default props => (row, i) => {
|
|||
const classes = ['rhythm_chart__legend_item'];
|
||||
const key = row.id;
|
||||
if (!_.includes(props.seriesFilter, row.id)) classes.push('disabled');
|
||||
if (row.label == null || row.legend === false) return (<div key={ key } style={{ display: 'none' }}/>);
|
||||
if (row.label == null || row.legend === false) return (<div key={key} style={{ display: 'none' }}/>);
|
||||
return (
|
||||
<div
|
||||
className={ classes.join(' ') }
|
||||
onClick={ event => props.onToggle(event, row.id) }
|
||||
key={ key }
|
||||
className={classes.join(' ')}
|
||||
onClick={event => props.onToggle(event, row.id)}
|
||||
key={key}
|
||||
>
|
||||
<div className="rhythm_chart__legend_label">
|
||||
<i className="fa fa-circle" style={{ color: row.color }} />
|
||||
|
|
|
@ -1,29 +1,20 @@
|
|||
import React, {
|
||||
Component,
|
||||
PropTypes,
|
||||
} from 'react';
|
||||
|
||||
export class GuidePageSideNav extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="guidePageSideNav">
|
||||
<div className="guidePageSideNav__title">
|
||||
{this.props.title}
|
||||
</div>
|
||||
|
||||
<div className="guidePageSideNavMenu">
|
||||
{this.props.children}
|
||||
</div>
|
||||
export const GuidePageSideNav = props => {
|
||||
return (
|
||||
<div className="guidePageSideNav">
|
||||
<div className="guidePageSideNav__title">
|
||||
{props.title}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
<div className="guidePageSideNavMenu">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
GuidePageSideNav.propTypes = {
|
||||
title: PropTypes.string,
|
||||
|
|
|
@ -56,13 +56,13 @@ export default props => (
|
|||
>
|
||||
<GuideText>
|
||||
This class can be useful to add accessibility to older designs that are
|
||||
still in use, but it shouldn't be a permanent solution. See <GuideLink
|
||||
href='http://webaim.org/techniques/css/invisiblecontent/'
|
||||
>
|
||||
http://webaim.org/techniques/css/invisiblecontent/
|
||||
{
|
||||
// eslint-disable-next-line react/jsx-closing-tag-location
|
||||
}</GuideLink> for more information.
|
||||
still in use, but it shouldn’t be a permanent solution. See {(
|
||||
<GuideLink
|
||||
href="http://webaim.org/techniques/css/invisiblecontent/"
|
||||
>
|
||||
http://webaim.org/techniques/css/invisiblecontent/
|
||||
</GuideLink>
|
||||
)} for more information.
|
||||
</GuideText>
|
||||
|
||||
<GuideText>
|
||||
|
|
|
@ -60,7 +60,7 @@ export default props => (
|
|||
>
|
||||
<GuideText>
|
||||
A Bar with one section will align it to the right, by default. To align it to the left,
|
||||
just add another section and leave it empty, or don't use a Bar at all.
|
||||
just add another section and leave it empty, or don’t use a Bar at all.
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
@ -79,7 +79,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Technically the Bar can contain three or more sections, but there's no established use-case
|
||||
Technically the Bar can contain three or more sections, but there’s no established use-case
|
||||
for this.
|
||||
</GuideText>
|
||||
|
||||
|
|
|
@ -92,7 +92,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Use the hollow Button when presenting a neutral action, e.g. a "Cancel" button.
|
||||
Use the hollow Button when presenting a neutral action, e.g. a “Cancel” button.
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
@ -111,7 +111,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Use the primary Button to represent the most common action. Generally, there won't be a
|
||||
Use the primary Button to represent the most common action. Generally, there won’t be a
|
||||
need to present more than one of these at a time.
|
||||
</GuideText>
|
||||
|
||||
|
@ -131,7 +131,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Secondary buttons are usually used for actions ("do this") that are optional actions on a page.
|
||||
Secondary buttons are usually used for actions (“do this”) that are optional actions on a page.
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
@ -263,7 +263,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
You can create a Button using a button element, link, or input[type="submit"].
|
||||
You can create a Button using a button element, link, or input[type=“submit”].
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
|
|
@ -40,7 +40,7 @@ export default () => (
|
|||
<KuiButton
|
||||
buttonType="basic"
|
||||
icon={<KuiButtonIcon type="next" />}
|
||||
iconPosition='right'
|
||||
iconPosition="right"
|
||||
>
|
||||
Next
|
||||
</KuiButton>
|
||||
|
|
|
@ -31,7 +31,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Cards expand to fill their container. To restrict a card's width, define the width of its
|
||||
Cards expand to fill their container. To restrict a card’s width, define the width of its
|
||||
container.
|
||||
</GuideText>
|
||||
|
||||
|
|
|
@ -6,9 +6,9 @@ import {
|
|||
|
||||
export default () => (
|
||||
<div>
|
||||
<KuiCollapseButton direction='down'/>
|
||||
<KuiCollapseButton direction='up'/>
|
||||
<KuiCollapseButton direction='left'/>
|
||||
<KuiCollapseButton direction='right'/>
|
||||
<KuiCollapseButton direction="down"/>
|
||||
<KuiCollapseButton direction="up"/>
|
||||
<KuiCollapseButton direction="left"/>
|
||||
<KuiCollapseButton direction="right"/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -15,6 +15,6 @@ export class ColorPicker extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
return <KuiColorPicker onChange={ this.handleChange } color={ this.state.color }/>;
|
||||
return <KuiColorPicker onChange={this.handleChange} color={this.state.color}/>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -34,15 +34,15 @@ export class ColorPickerLabelAndClear extends React.Component {
|
|||
|
||||
<KuiFieldGroupSection>
|
||||
<KuiColorPicker
|
||||
onChange={ this.handleChange }
|
||||
color={ this.state.color }
|
||||
onChange={this.handleChange}
|
||||
color={this.state.color}
|
||||
/>
|
||||
</KuiFieldGroupSection>
|
||||
|
||||
<KuiFieldGroupSection>
|
||||
<p className="kuiText">
|
||||
<KuiKeyboardAccessible>
|
||||
<a className="kuiLink" onClick={ this.resetColor }>
|
||||
<a className="kuiLink" onClick={this.resetColor}>
|
||||
Reset
|
||||
</a>
|
||||
</KuiKeyboardAccessible>
|
||||
|
|
|
@ -29,9 +29,9 @@ export class ColorPickerNoColorLabel extends React.Component {
|
|||
|
||||
<KuiFieldGroupSection>
|
||||
<KuiColorPicker
|
||||
onChange={ this.handleChange }
|
||||
color={ this.state.color }
|
||||
showColorLabel={ false }
|
||||
onChange={this.handleChange}
|
||||
color={this.state.color}
|
||||
showColorLabel={false}
|
||||
/>
|
||||
</KuiFieldGroupSection>
|
||||
</KuiFieldGroup>
|
||||
|
|
|
@ -21,7 +21,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
<strong>Note:</strong> Don't use this. It's subject to change as we evolve our grid system.
|
||||
<strong>Note:</strong> Don’t use this. It’s subject to change as we evolve our grid system.
|
||||
</GuideText>
|
||||
|
||||
<GuideText>
|
||||
|
|
|
@ -27,7 +27,7 @@ export default props => (
|
|||
>
|
||||
<GuideText>
|
||||
Use GalleryButton to show a gallery item.
|
||||
It's an anchor and accepts all anchor properties.
|
||||
It’s an anchor and accepts all anchor properties.
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
|
|
@ -20,7 +20,7 @@ export const HomeView = () => (
|
|||
</h1>
|
||||
|
||||
<p className="guideText">
|
||||
The Kibana team uses the UI Framework to build Kibana's user interface. Please see
|
||||
The Kibana team uses the UI Framework to build Kibana’s user interface. Please see
|
||||
the <a href="https://www.elastic.co/guide/en/kibana/current/index.html" className="guideLink">general Kibana docs</a> for information on how to use Kibana, and
|
||||
the <a href="https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html" className="guideLink">plugin-specific section</a> for
|
||||
help developing Kibana plugins.
|
||||
|
@ -32,7 +32,7 @@ export const HomeView = () => (
|
|||
</p>
|
||||
|
||||
<p className="guideText">
|
||||
If you're just getting started with the UI Framework for the first time, you may
|
||||
If you’re just getting started with the UI Framework for the first time, you may
|
||||
be interested in some of the more commonly-used components:
|
||||
</p>
|
||||
|
||||
|
|
|
@ -62,7 +62,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
Use this Icon when you don't want to communicate any particular meaning with the icon's
|
||||
Use this Icon when you don’t want to communicate any particular meaning with the icon’s
|
||||
color.
|
||||
</GuideText>
|
||||
|
||||
|
|
|
@ -45,12 +45,12 @@ export function LocalNavWithDropdown() {
|
|||
|
||||
{/* Help text */}
|
||||
<div className="kuiLocalDropdownHelpText">
|
||||
Here's some help text to explain the purpose of the dropdown.
|
||||
Here’s some help text to explain the purpose of the dropdown.
|
||||
</div>
|
||||
|
||||
{/* Warning */}
|
||||
<div className="kuiLocalDropdownWarning">
|
||||
Here's some warning text in case the user has something misconfigured.
|
||||
Here’s some warning text in case the user has something misconfigured.
|
||||
</div>
|
||||
|
||||
<div className="kuiLocalDropdownSection">
|
||||
|
|
|
@ -48,7 +48,7 @@ export function LocalNavWithDropdownPanels() {
|
|||
|
||||
{/* Help text */}
|
||||
<div className="kuiLocalDropdownHelpText">
|
||||
Here's some help text to explain the purpose of the dropdown.
|
||||
Here’s some help text to explain the purpose of the dropdown.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -59,7 +59,7 @@ export function LocalNavWithDropdownPanels() {
|
|||
|
||||
{/* Help text */}
|
||||
<div className="kuiLocalDropdownHelpText">
|
||||
Here's some help text to explain the purpose of the dropdown.
|
||||
Here’s some help text to explain the purpose of the dropdown.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -61,7 +61,7 @@ export default props => (
|
|||
]}
|
||||
>
|
||||
<GuideText>
|
||||
Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.
|
||||
Here’s a simple LocalNav with a Title in the top left corner and Menu in the top right.
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo>
|
||||
|
|
|
@ -89,7 +89,7 @@ export default props => (
|
|||
}]}
|
||||
>
|
||||
<GuideText>
|
||||
You can create a MenuButton using a button element, link, or input[type="submit"].
|
||||
You can create a MenuButton using a button element, link, or input[type=“submit”].
|
||||
</GuideText>
|
||||
|
||||
<GuideDemo
|
||||
|
|
|
@ -12,15 +12,17 @@ export const NotFoundView = () => (
|
|||
</h1>
|
||||
|
||||
<p className="guideText">
|
||||
You visited a page which doesn't exist, causing <em>this</em> page to exist. This page thanks
|
||||
You visited a page which doesn’t exist, causing <em>this</em> page to exist. This page thanks
|
||||
you for summoning it into existence from the raw fabric of reality, but it thinks you may
|
||||
find another page more interesting. Might it suggest
|
||||
the <Link
|
||||
className="guideLink"
|
||||
to="/"
|
||||
>
|
||||
home page
|
||||
</Link>?
|
||||
the {(
|
||||
<Link
|
||||
className="guideLink"
|
||||
to="/"
|
||||
>
|
||||
home page
|
||||
</Link>
|
||||
)}?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,9 +17,9 @@ export class PagerButtons extends React.Component {
|
|||
getPage() {
|
||||
switch (this.state.item) {
|
||||
case 1:
|
||||
return <div>I'm Page 1!</div>;
|
||||
return <div>I’m Page 1!</div>;
|
||||
case 2:
|
||||
return <KuiButton>I'm a button</KuiButton>;
|
||||
return <KuiButton>I’m a button</KuiButton>;
|
||||
case 3:
|
||||
return <div>You are at the end</div>;
|
||||
}
|
||||
|
|
|
@ -41,7 +41,7 @@ export default class extends Component {
|
|||
isOpen={this.state.isPopoverOpen}
|
||||
closePopover={this.closePopover.bind(this)}
|
||||
>
|
||||
<div style={{ width: '300px' }}>Popover content that's wider than the default width</div>
|
||||
<div style={{ width: '300px' }}>Popover content that’s wider than the default width</div>
|
||||
</KuiPopover>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@ export default class extends Component {
|
|||
<div>
|
||||
<KuiPopover
|
||||
button={(
|
||||
<KuiButton buttonType="basic" onClick={ this.onButtonClick1.bind(this) }>
|
||||
<KuiButton buttonType="basic" onClick={this.onButtonClick1.bind(this)}>
|
||||
Popover anchored to the right.
|
||||
</KuiButton>
|
||||
)}
|
||||
|
@ -61,7 +61,7 @@ export default class extends Component {
|
|||
|
||||
<KuiPopover
|
||||
button={(
|
||||
<KuiButton buttonType="basic" onClick={ this.onButtonClick2.bind(this) }>
|
||||
<KuiButton buttonType="basic" onClick={this.onButtonClick2.bind(this)}>
|
||||
Popover anchored to the right.
|
||||
</KuiButton>
|
||||
)}
|
||||
|
|
|
@ -31,16 +31,16 @@ export default class extends Component {
|
|||
render() {
|
||||
return (
|
||||
<KuiPopover
|
||||
button={ (
|
||||
<KuiButton buttonType="basic" onClick={ this.onButtonClick.bind(this) }>
|
||||
button={(
|
||||
<KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
|
||||
Custom class
|
||||
</KuiButton>
|
||||
) }
|
||||
isOpen={ this.state.isPopoverOpen }
|
||||
closePopover={ this.closePopover.bind(this) }
|
||||
)}
|
||||
isOpen={this.state.isPopoverOpen}
|
||||
closePopover={this.closePopover.bind(this)}
|
||||
bodyClassName="yourClassNameHere"
|
||||
>
|
||||
It's hard to tell but there's a custom class on this element
|
||||
It’s hard to tell but there’s a custom class on this element
|
||||
</KuiPopover>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -64,13 +64,13 @@ export class ControlledTable extends React.Component {
|
|||
renderPager() {
|
||||
return (
|
||||
<KuiPager
|
||||
startNumber={ 1 }
|
||||
hasNextPage={ true }
|
||||
hasPreviousPage={ false }
|
||||
endNumber={ 10 }
|
||||
totalItems={ 100 }
|
||||
onNextPage={ () => {} }
|
||||
onPreviousPage={ () => {} }
|
||||
startNumber={1}
|
||||
hasNextPage={true}
|
||||
hasPreviousPage={false}
|
||||
endNumber={10}
|
||||
totalItems={100}
|
||||
onNextPage={() => {}}
|
||||
onPreviousPage={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -92,14 +92,14 @@ export class ControlledTable extends React.Component {
|
|||
return (
|
||||
<KuiTableRow>
|
||||
<KuiTableRowCheckBoxCell
|
||||
isChecked={ this.isItemChecked(rowData) }
|
||||
onChange={ () => this.toggleItem(rowData) }
|
||||
isChecked={this.isItemChecked(rowData)}
|
||||
onChange={() => this.toggleItem(rowData)}
|
||||
/>
|
||||
{
|
||||
rowData.map((cellData, index) => {
|
||||
const align = index === rowData.length - 1 ? RIGHT_ALIGNMENT : LEFT_ALIGNMENT;
|
||||
return (
|
||||
<KuiTableRowCell align={ align }>
|
||||
<KuiTableRowCell align={align}>
|
||||
{ cellData }
|
||||
</KuiTableRowCell>
|
||||
);
|
||||
|
@ -114,7 +114,7 @@ export class ControlledTable extends React.Component {
|
|||
return (
|
||||
<KuiControlledTable>
|
||||
<KuiToolBar>
|
||||
<KuiToolBarSearchBox onFilter={ () => {} } />
|
||||
<KuiToolBarSearchBox onFilter={() => {}} />
|
||||
|
||||
<KuiToolBarSection>
|
||||
<KuiButton buttonType="primary">
|
||||
|
@ -140,8 +140,8 @@ export class ControlledTable extends React.Component {
|
|||
<KuiTable>
|
||||
<KuiTableHeader>
|
||||
<KuiTableHeaderCheckBoxCell
|
||||
isChecked={ this.isItemChecked('header') }
|
||||
onChange={ () => this.toggleItem('header') }
|
||||
isChecked={this.isItemChecked('header')}
|
||||
onChange={() => this.toggleItem('header')}
|
||||
/>
|
||||
<KuiTableHeaderCell>
|
||||
Title
|
||||
|
|
|
@ -19,13 +19,13 @@ export class ControlledTableLoadingItems extends React.Component {
|
|||
getPager() {
|
||||
return (
|
||||
<KuiPager
|
||||
startNumber={ 1 }
|
||||
hasNextPage={ true }
|
||||
hasPreviousPage={ false }
|
||||
endNumber={ 10 }
|
||||
totalItems={ 100 }
|
||||
onNextPage={ () => {} }
|
||||
onPreviousPage={ () => {} }
|
||||
startNumber={1}
|
||||
hasNextPage={true}
|
||||
hasPreviousPage={false}
|
||||
endNumber={10}
|
||||
totalItems={100}
|
||||
onNextPage={() => {}}
|
||||
onPreviousPage={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -34,7 +34,7 @@ export class ControlledTableLoadingItems extends React.Component {
|
|||
return (
|
||||
<KuiControlledTable>
|
||||
<KuiToolBar>
|
||||
<KuiToolBarSearchBox onFilter={ () => {} } />
|
||||
<KuiToolBarSearchBox onFilter={() => {}} />
|
||||
|
||||
<KuiToolBarSection>
|
||||
<KuiButton buttonType="primary">
|
||||
|
|
|
@ -19,13 +19,13 @@ export class ControlledTableWithEmptyPrompt extends React.Component {
|
|||
getPager() {
|
||||
return (
|
||||
<KuiPager
|
||||
startNumber={ 1 }
|
||||
hasNextPage={ true }
|
||||
hasPreviousPage={ false }
|
||||
endNumber={ 10 }
|
||||
totalItems={ 100 }
|
||||
onNextPage={ () => {} }
|
||||
onPreviousPage={ () => {} }
|
||||
startNumber={1}
|
||||
hasNextPage={true}
|
||||
hasPreviousPage={false}
|
||||
endNumber={10}
|
||||
totalItems={100}
|
||||
onNextPage={() => {}}
|
||||
onPreviousPage={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -34,7 +34,7 @@ export class ControlledTableWithEmptyPrompt extends React.Component {
|
|||
return (
|
||||
<KuiControlledTable>
|
||||
<KuiToolBar>
|
||||
<KuiToolBarSearchBox onFilter={ () => {} } />
|
||||
<KuiToolBarSearchBox onFilter={() => {}} />
|
||||
|
||||
<KuiToolBarSection>
|
||||
<KuiButton buttonType="primary">
|
||||
|
@ -59,7 +59,7 @@ export class ControlledTableWithEmptyPrompt extends React.Component {
|
|||
|
||||
<KuiEmptyTablePromptPanel>
|
||||
<KuiEmptyTablePrompt
|
||||
actions={ <KuiButton buttonType="primary">Add Items</KuiButton> }
|
||||
actions={<KuiButton buttonType="primary">Add Items</KuiButton>}
|
||||
message="Uh oh you have no items!"
|
||||
/>
|
||||
</KuiEmptyTablePromptPanel>
|
||||
|
|
|
@ -19,13 +19,13 @@ export class ControlledTableWithNoItems extends React.Component {
|
|||
getPager() {
|
||||
return (
|
||||
<KuiPager
|
||||
startNumber={ 1 }
|
||||
hasNextPage={ true }
|
||||
hasPreviousPage={ false }
|
||||
endNumber={ 10 }
|
||||
totalItems={ 100 }
|
||||
onNextPage={ () => {} }
|
||||
onPreviousPage={ () => {} }
|
||||
startNumber={1}
|
||||
hasNextPage={true}
|
||||
hasPreviousPage={false}
|
||||
endNumber={10}
|
||||
totalItems={100}
|
||||
onNextPage={() => {}}
|
||||
onPreviousPage={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -34,7 +34,7 @@ export class ControlledTableWithNoItems extends React.Component {
|
|||
return (
|
||||
<KuiControlledTable>
|
||||
<KuiToolBar>
|
||||
<KuiToolBarSearchBox onFilter={ () => {} } />
|
||||
<KuiToolBarSearchBox onFilter={() => {}} />
|
||||
|
||||
<KuiToolBarSection>
|
||||
<KuiButton buttonType="primary">
|
||||
|
|
|
@ -11,7 +11,7 @@ import {
|
|||
|
||||
export function FluidTable() {
|
||||
return (
|
||||
<KuiTable shrinkToContent={ true }>
|
||||
<KuiTable shrinkToContent={true}>
|
||||
<KuiTableHeader>
|
||||
<KuiTableHeaderCell>
|
||||
System
|
||||
|
|
|
@ -48,7 +48,7 @@ export function TableWithMenuButtons() {
|
|||
<KuiTableRowCell>
|
||||
C
|
||||
</KuiTableRowCell>
|
||||
<KuiTableRowCell align={ RIGHT_ALIGNMENT }>
|
||||
<KuiTableRowCell align={RIGHT_ALIGNMENT}>
|
||||
<div className="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
|
||||
<button className="kuiMenuButton kuiMenuButton--basic">
|
||||
Acknowledge
|
||||
|
@ -76,7 +76,7 @@ export function TableWithMenuButtons() {
|
|||
<KuiTableRowCell>
|
||||
C
|
||||
</KuiTableRowCell>
|
||||
<KuiTableRowCell align={ RIGHT_ALIGNMENT }>
|
||||
<KuiTableRowCell align={RIGHT_ALIGNMENT}>
|
||||
<div className="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
|
||||
<button className="kuiMenuButton kuiMenuButton--basic">
|
||||
Acknowledge
|
||||
|
|
|
@ -21,7 +21,7 @@ describe('KuiScreenReaderOnly', () => {
|
|||
test('and combines other classNames (foo, bar) given as props on the child', () => {
|
||||
const $paragraph = render(
|
||||
<KuiScreenReaderOnly>
|
||||
<p className='foo bar'>
|
||||
<p className="foo bar">
|
||||
This paragraph is not visibile to sighted users but will be read by
|
||||
screenreaders.
|
||||
</p>
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './action_item';
|
||||
|
||||
test('renders KuiActionItem', () => {
|
||||
const component = <KuiActionItem { ...requiredProps }>children</KuiActionItem>;
|
||||
const component = <KuiActionItem {...requiredProps}>children</KuiActionItem>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './bar';
|
||||
|
||||
test('renders KuiBar', () => {
|
||||
const component = <KuiBar { ...requiredProps }>children</KuiBar>;
|
||||
const component = <KuiBar {...requiredProps}>children</KuiBar>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './bar_section';
|
||||
|
||||
test('renders KuiBarSection', () => {
|
||||
const component = <KuiBarSection { ...requiredProps }>children</KuiBarSection>;
|
||||
const component = <KuiBarSection {...requiredProps}>children</KuiBarSection>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -25,7 +25,7 @@ describe('KuiButtonIcon', () => {
|
|||
ICON_TYPES.forEach(type => {
|
||||
describe(type, () => {
|
||||
test(`renders the ${type} class`, () => {
|
||||
const $buttonIcon = render(<KuiButtonIcon type={ type } />);
|
||||
const $buttonIcon = render(<KuiButtonIcon type={type} />);
|
||||
expect($buttonIcon).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './card';
|
||||
|
||||
test('renders KuiCard', () => {
|
||||
const component = <KuiCard { ...requiredProps }>children</KuiCard>;
|
||||
const component = <KuiCard {...requiredProps}>children</KuiCard>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './card_description';
|
||||
|
||||
test('renders KuiCardDescription', () => {
|
||||
const component = <KuiCardDescription { ...requiredProps }>children</KuiCardDescription>;
|
||||
const component = <KuiCardDescription {...requiredProps}>children</KuiCardDescription>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './card_description_text';
|
||||
|
||||
test('renders KuiCardDescriptionText', () => {
|
||||
const component = <KuiCardDescriptionText { ...requiredProps }>children</KuiCardDescriptionText>;
|
||||
const component = <KuiCardDescriptionText {...requiredProps}>children</KuiCardDescriptionText>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './card_description_title';
|
||||
|
||||
test('renders KuiCardDescriptionTitle', () => {
|
||||
const component = <KuiCardDescriptionTitle { ...requiredProps }>children</KuiCardDescriptionTitle>;
|
||||
const component = <KuiCardDescriptionTitle {...requiredProps}>children</KuiCardDescriptionTitle>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './card_footer';
|
||||
|
||||
test('renders KuiCardFooter', () => {
|
||||
const component = <KuiCardFooter { ...requiredProps }>children</KuiCardFooter>;
|
||||
const component = <KuiCardFooter {...requiredProps}>children</KuiCardFooter>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,11 +7,11 @@ import {
|
|||
} from './card_group';
|
||||
|
||||
test('renders KuiCardGroup', () => {
|
||||
const component = <KuiCardGroup { ...requiredProps }>children</KuiCardGroup>;
|
||||
const component = <KuiCardGroup {...requiredProps}>children</KuiCardGroup>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('renders KuiCardGroup isUnited', () => {
|
||||
const component = <KuiCardGroup isUnited { ...requiredProps }>children</KuiCardGroup>;
|
||||
const component = <KuiCardGroup isUnited {...requiredProps}>children</KuiCardGroup>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('KuiCollapseButton', () => {
|
|||
DIRECTIONS.forEach(direction => {
|
||||
describe(direction, () => {
|
||||
test(`renders the ${direction} class`, () => {
|
||||
const component = <KuiCollapseButton direction={direction} { ...requiredProps }/>;
|
||||
const component = <KuiCollapseButton direction={direction} {...requiredProps}/>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
@ -26,7 +26,7 @@ describe('KuiCollapseButton', () => {
|
|||
const onClickHandler = sinon.stub();
|
||||
|
||||
shallow(
|
||||
<KuiCollapseButton direction='left' onClick={onClickHandler} />
|
||||
<KuiCollapseButton direction="left" onClick={onClickHandler} />
|
||||
);
|
||||
|
||||
sinon.assert.notCalled(onClickHandler);
|
||||
|
@ -36,7 +36,7 @@ describe('KuiCollapseButton', () => {
|
|||
const onClickHandler = sinon.stub();
|
||||
|
||||
const $button = shallow(
|
||||
<KuiCollapseButton direction='left' onClick={onClickHandler} />
|
||||
<KuiCollapseButton direction="left" onClick={onClickHandler} />
|
||||
);
|
||||
|
||||
$button.simulate('click');
|
||||
|
|
|
@ -66,24 +66,24 @@ export class KuiColorPicker extends React.Component {
|
|||
const classes = classNames('kuiColorPicker', className);
|
||||
return (
|
||||
<div
|
||||
className={ classes }
|
||||
data-test-subj={ this.props['data-test-subj'] }
|
||||
onClick={ this.onClickRootElement }
|
||||
className={classes}
|
||||
data-test-subj={this.props['data-test-subj']}
|
||||
onClick={this.onClickRootElement}
|
||||
>
|
||||
<div
|
||||
className="kuiColorPicker__preview"
|
||||
onClick={ this.toggleColorSelector }
|
||||
onClick={this.toggleColorSelector}
|
||||
>
|
||||
<KuiColorPickerSwatch color={ color } aria-label={ this.props['aria-label'] } />
|
||||
<KuiColorPickerSwatch color={color} aria-label={this.props['aria-label']} />
|
||||
{ showColorLabel ? this.getColorLabel() : null }
|
||||
</div>
|
||||
{
|
||||
this.state.showColorSelector ?
|
||||
<div className="kuiColorPickerPopUp" data-test-subj="colorPickerPopup">
|
||||
<ChromePicker
|
||||
color={ color ? color : '#ffffff' }
|
||||
disableAlpha={ true }
|
||||
onChange={ this.handleColorSelection }
|
||||
color={color ? color : '#ffffff'}
|
||||
disableAlpha={true}
|
||||
onChange={this.handleColorSelection}
|
||||
/>
|
||||
</div>
|
||||
: null
|
||||
|
|
|
@ -16,9 +16,9 @@ beforeEach(() => {
|
|||
test('renders KuiColorPicker', () => {
|
||||
const colorPicker = render(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
onChange={onChange}
|
||||
color="#ffeedd"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
expect(colorPicker).toMatchSnapshot();
|
||||
|
@ -27,9 +27,9 @@ test('renders KuiColorPicker', () => {
|
|||
test('renders KuiColorPicker with an empty swatch when color is null', () => {
|
||||
const colorPicker = render(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
color={ null }
|
||||
{ ...requiredProps }
|
||||
onChange={onChange}
|
||||
color={null}
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
expect(colorPicker).toMatchSnapshot();
|
||||
|
@ -38,10 +38,10 @@ test('renders KuiColorPicker with an empty swatch when color is null', () => {
|
|||
test('renders KuiColorPicker without a color label when showColorLabel is false', () => {
|
||||
const colorPicker = render(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
color={ '#ffffff' }
|
||||
showColorLabel={ false }
|
||||
{ ...requiredProps }
|
||||
onChange={onChange}
|
||||
color={'#ffffff'}
|
||||
showColorLabel={false}
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
expect(colorPicker).toMatchSnapshot();
|
||||
|
@ -50,9 +50,9 @@ test('renders KuiColorPicker without a color label when showColorLabel is false'
|
|||
test('pop up color selector is not shown by default', () => {
|
||||
const colorPicker = mount(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
onChange={onChange}
|
||||
color="#ffeedd"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -63,9 +63,9 @@ test('pop up color selector is not shown by default', () => {
|
|||
test('pop up color selector is shown when the color swatch is clicked', () => {
|
||||
const colorPicker = mount(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
onChange={onChange}
|
||||
color="#ffeedd"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -77,9 +77,9 @@ test('pop up color selector is shown when the color swatch is clicked', () => {
|
|||
test('pop up color selector is hidden when the color swatch is clicked twice', () => {
|
||||
const colorPicker = mount(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
onChange={onChange}
|
||||
color="#ffeedd"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -92,9 +92,9 @@ test('pop up color selector is hidden when the color swatch is clicked twice', (
|
|||
test('Setting a new color calls onChange', () => {
|
||||
const colorPicker = mount(
|
||||
<KuiColorPicker
|
||||
onChange={ onChange }
|
||||
onChange={onChange}
|
||||
color="#ffeedd"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
@ -18,8 +18,8 @@ export function KuiColorPickerSwatch(props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={ classes }
|
||||
aria-label={ props['aria-label'] }
|
||||
className={classes}
|
||||
aria-label={props['aria-label']}
|
||||
data-test-subj="colorSwatch"
|
||||
style={{ background: color ? color : '' }}
|
||||
>
|
||||
|
|
|
@ -25,7 +25,7 @@ test('renders KuiEmptyTablePrompt', () => {
|
|||
</KuiLinkButton>
|
||||
}
|
||||
message="Uh oh, You have no items!"
|
||||
{ ...requiredProps }
|
||||
{...requiredProps}
|
||||
/>);
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './empty_table_prompt_actions';
|
||||
|
||||
test('renders KuiEmptyTablePromptActions', () => {
|
||||
const component = <KuiEmptyTablePromptActions { ...requiredProps }>children</KuiEmptyTablePromptActions>;
|
||||
const component = <KuiEmptyTablePromptActions {...requiredProps}>children</KuiEmptyTablePromptActions>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './empty_table_prompt_message';
|
||||
|
||||
test('renders KuiEmptyTablePromptMessage', () => {
|
||||
const component = <KuiEmptyTablePromptMessage { ...requiredProps }>children</KuiEmptyTablePromptMessage>;
|
||||
const component = <KuiEmptyTablePromptMessage {...requiredProps}>children</KuiEmptyTablePromptMessage>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './empty_table_prompt_panel';
|
||||
|
||||
test('renders KuiEmptyTablePromptPanel', () => {
|
||||
const component = <KuiEmptyTablePromptPanel { ...requiredProps }>children</KuiEmptyTablePromptPanel>;
|
||||
const component = <KuiEmptyTablePromptPanel {...requiredProps}>children</KuiEmptyTablePromptPanel>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './event';
|
||||
|
||||
test('renders KuiEvent', () => {
|
||||
const component = <KuiEvent { ...requiredProps }>children</KuiEvent>;
|
||||
const component = <KuiEvent {...requiredProps}>children</KuiEvent>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './event_body';
|
||||
|
||||
test('renders KuiEventBody', () => {
|
||||
const component = <KuiEventBody { ...requiredProps }>children</KuiEventBody>;
|
||||
const component = <KuiEventBody {...requiredProps}>children</KuiEventBody>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './event_body_message';
|
||||
|
||||
test('renders KuiEventBodyMessage', () => {
|
||||
const component = <KuiEventBodyMessage { ...requiredProps }>children</KuiEventBodyMessage>;
|
||||
const component = <KuiEventBodyMessage {...requiredProps}>children</KuiEventBodyMessage>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './event_body_metadata';
|
||||
|
||||
test('renders KuiEventBodyMetadata', () => {
|
||||
const component = <KuiEventBodyMetadata { ...requiredProps }>children</KuiEventBodyMetadata>;
|
||||
const component = <KuiEventBodyMetadata {...requiredProps}>children</KuiEventBodyMetadata>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './event_symbol';
|
||||
|
||||
test('renders KuiEventSymbol', () => {
|
||||
const component = <KuiEventSymbol { ...requiredProps }>children</KuiEventSymbol>;
|
||||
const component = <KuiEventSymbol {...requiredProps}>children</KuiEventSymbol>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,11 +7,11 @@ import {
|
|||
} from './field_group';
|
||||
|
||||
test('renders KuiFieldGroup', () => {
|
||||
const component = <KuiFieldGroup { ...requiredProps }>children</KuiFieldGroup>;
|
||||
const component = <KuiFieldGroup {...requiredProps}>children</KuiFieldGroup>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('renders KuiFieldGroup isAlignedTop', () => {
|
||||
const component = <KuiFieldGroup isAlignedTop { ...requiredProps }>children</KuiFieldGroup>;
|
||||
const component = <KuiFieldGroup isAlignedTop {...requiredProps}>children</KuiFieldGroup>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,11 +7,11 @@ import {
|
|||
} from './field_group_section';
|
||||
|
||||
test('renders KuiFieldGroupSection', () => {
|
||||
const component = <KuiFieldGroupSection { ...requiredProps }>children</KuiFieldGroupSection>;
|
||||
const component = <KuiFieldGroupSection {...requiredProps}>children</KuiFieldGroupSection>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('renders KuiFieldGroupSection isWide', () => {
|
||||
const component = <KuiFieldGroupSection isWide { ...requiredProps }>children</KuiFieldGroupSection>;
|
||||
const component = <KuiFieldGroupSection isWide {...requiredProps}>children</KuiFieldGroupSection>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './gallery';
|
||||
|
||||
test('renders KuiGallery', () => {
|
||||
const component = <KuiGallery { ...requiredProps }>children</KuiGallery>;
|
||||
const component = <KuiGallery {...requiredProps}>children</KuiGallery>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './gallery_button';
|
||||
|
||||
test('renders KuiGalleryButton href', () => {
|
||||
const component = <KuiGalleryButton href="#" { ...requiredProps }>children</KuiGalleryButton>;
|
||||
const component = <KuiGalleryButton href="#" {...requiredProps}>children</KuiGalleryButton>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './gallery_button_icon';
|
||||
|
||||
test('renders KuiGalleryButtonIcon', () => {
|
||||
const component = <KuiGalleryButtonIcon { ...requiredProps }>children</KuiGalleryButtonIcon>;
|
||||
const component = <KuiGalleryButtonIcon {...requiredProps}>children</KuiGalleryButtonIcon>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './gallery_button_image';
|
||||
|
||||
test('renders KuiGalleryButtonImage', () => {
|
||||
const component = <KuiGalleryButtonImage { ...requiredProps }>children</KuiGalleryButtonImage>;
|
||||
const component = <KuiGalleryButtonImage {...requiredProps}>children</KuiGalleryButtonImage>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './gallery_button_label';
|
||||
|
||||
test('renders KuiGalleryButtonLabel', () => {
|
||||
const component = <KuiGalleryButtonLabel { ...requiredProps }>children</KuiGalleryButtonLabel>;
|
||||
const component = <KuiGalleryButtonLabel {...requiredProps}>children</KuiGalleryButtonLabel>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -7,6 +7,6 @@ import {
|
|||
} from './header_bar';
|
||||
|
||||
test('renders KuiHeaderBar', () => {
|
||||
const component = <KuiHeaderBar { ...requiredProps }>children</KuiHeaderBar>;
|
||||
const component = <KuiHeaderBar {...requiredProps}>children</KuiHeaderBar>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue