[eslint-config-kibana] Upgrade eslint-config to 0.10.0. (#13323) (#13481)

* Upgrade eslint-config to 0.10.0.
* Fix linting violations with popover and typography stuff in UI Framework.
This commit is contained in:
CJ Cenizal 2017-08-11 11:51:34 -07:00 committed by GitHub
parent 239a5dc7ab
commit 69a96ca70a
160 changed files with 1021 additions and 1106 deletions

View file

@ -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",

View file

@ -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>

View file

@ -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>

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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) {

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -82,7 +82,7 @@ class ColorPicker extends Component {
onClick={this.handleClose}
/>
<Picker
color={ value }
color={value}
onChangeComplete={this.handleChange}
/>
</div>

View file

@ -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}

View file

@ -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;

View file

@ -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
};

View file

@ -48,7 +48,7 @@ class MarkdownEditor extends Component {
</a>
</td>
<td>
<code>"{ value }"</code>
<code>&ldquo;{ value }&rdquo;</code>
</td>
</tr>
);
@ -67,7 +67,7 @@ class MarkdownEditor extends Component {
</a>
</td>
<td>
<code>[ [ "{date}", "{value}" ], ... ]</code>
<code>[ [ &ldquo;{date}&rdquo;, &ldquo;{value}&rdquo; ], ... ]</code>
</td>
</tr>
);

View file

@ -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 &ldquo;{model.type}&rdquo;</div>);
}
PanelConfig.propTypes = {

View file

@ -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';

View file

@ -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>

View file

@ -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';

View file

@ -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';

View file

@ -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';

View file

@ -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;

View file

@ -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';

View file

@ -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;

View file

@ -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}
/>
);

View file

@ -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;

View file

@ -47,7 +47,7 @@ function VisPicker(props) {
<VisPickerItem
key={item.type}
onClick={handleChange}
selected={ item.type === model.type }
selected={item.type === model.type}
{...item}
/>
);

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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);

View file

@ -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>

View file

@ -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>

View file

@ -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();
}

View file

@ -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}

View file

@ -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 }} />

View file

@ -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,

View file

@ -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&rsquo;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>

View file

@ -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&rsquo;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&rsquo;s no established use-case
for this.
</GuideText>

View file

@ -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 &ldquo;Cancel&rdquo; 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&rsquo;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 (&ldquo;do this&rdquo;) 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=&ldquo;submit&rdquo;].
</GuideText>
<GuideDemo>

View file

@ -40,7 +40,7 @@ export default () => (
<KuiButton
buttonType="basic"
icon={<KuiButtonIcon type="next" />}
iconPosition='right'
iconPosition="right"
>
Next
</KuiButton>

View file

@ -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&rsquo;s width, define the width of its
container.
</GuideText>

View file

@ -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>
);

View file

@ -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}/>;
}
}

View file

@ -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>

View file

@ -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>

View file

@ -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&rsquo;t use this. It&rsquo;s subject to change as we evolve our grid system.
</GuideText>
<GuideText>

View file

@ -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&rsquo;s an anchor and accepts all anchor properties.
</GuideText>
<GuideDemo>

View file

@ -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&rsquo;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&rsquo;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>

View file

@ -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&rsquo;t want to communicate any particular meaning with the icon&rsquo;s
color.
</GuideText>

View file

@ -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&rsquo;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&rsquo;s some warning text in case the user has something misconfigured.
</div>
<div className="kuiLocalDropdownSection">

View file

@ -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&rsquo;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&rsquo;s some help text to explain the purpose of the dropdown.
</div>
</div>
</div>

View file

@ -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&rsquo;s a simple LocalNav with a Title in the top left corner and Menu in the top right.
</GuideText>
<GuideDemo>

View file

@ -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=&ldquo;submit&rdquo;].
</GuideText>
<GuideDemo

View file

@ -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&rsquo;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>

View file

@ -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&rsquo;m Page 1!</div>;
case 2:
return <KuiButton>I'm a button</KuiButton>;
return <KuiButton>I&rsquo;m a button</KuiButton>;
case 3:
return <div>You are at the end</div>;
}

View file

@ -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&rsquo;s wider than the default width</div>
</KuiPopover>
);
}

View file

@ -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>
)}

View file

@ -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&rsquo;s hard to tell but there&rsquo;s a custom class on this element
</KuiPopover>
);
}

View file

@ -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

View file

@ -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">

View file

@ -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>

View file

@ -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">

View file

@ -11,7 +11,7 @@ import {
export function FluidTable() {
return (
<KuiTable shrinkToContent={ true }>
<KuiTable shrinkToContent={true}>
<KuiTableHeader>
<KuiTableHeaderCell>
System

View file

@ -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

View file

@ -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>

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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');

View file

@ -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

View file

@ -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}
/>
);

View file

@ -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 : '' }}
>

View file

@ -25,7 +25,7 @@ test('renders KuiEmptyTablePrompt', () => {
</KuiLinkButton>
}
message="Uh oh, You have no items!"
{ ...requiredProps }
{...requiredProps}
/>);
expect(render(component)).toMatchSnapshot();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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();
});

View file

@ -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