github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade eslint config to 0.8.1. (#13128) (#13155)

Browse source 
* Fix incorrect peerDependency and bump eslint config version to 0.8.1.
* Upgrade eslint config to 0.8.1. Fix JSX to adhere to new formatting rules.
This commit is contained in:
CJ Cenizal 2017-07-27 11:27:05 -07:00 • committed by GitHub
parent 9e1f88d3fe
commit 7bffcda1ae
114 changed files with 1039 additions and 669 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -203,7 +203,7 @@
"yauzl": "2.7.0"
},
"devDependencies": {
"@elastic/eslint-config-kibana": "0.6.1",
"@elastic/eslint-config-kibana": "0.8.1",
"@elastic/eslint-import-resolver-kibana": "0.8.1",
"@elastic/eslint-plugin-kibana-custom": "1.0.3",
"angular-mocks": "1.4.7",
@ -221,7 +221,7 @@
"eslint-plugin-import": "2.3.0",
"eslint-plugin-jest": "20.0.3",
"eslint-plugin-mocha": "4.9.0",
"eslint-plugin-react": "7.0.1",
"eslint-plugin-react": "7.1.0",
"event-stream": "3.3.2",
"expect.js": "0.3.1",
"faker": "1.1.0",

4
packages/eslint-config-kibana/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@elastic/eslint-config-kibana",
"version": "0.8.0",
"version": "0.8.1",
"description": "The eslint config used by the kibana team",
"main": ".eslintrc.js",
"scripts": {
@ -23,6 +23,6 @@
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-mocha": "^4.9.0",
"eslint-plugin-react": "^7.0.1"
"eslint-plugin-react": "^7.1.0"
}
}

3
src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js
View file

@ -59,7 +59,8 @@ export class DashboardCloneModal extends React.Component {
data-test-subj="clonedDashboardTitle"
className="kuiTextInput kuiTextInput--large"
value={ this.state.newDashboardName }
onChange={ this.onInputChange } />
onChange={ this.onInputChange }
/>
</KuiModalBodyText>
</KuiModalBody>

2
src/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
View file

@ -17,7 +17,7 @@ export function showCloneModal(onClone, title) {
};
document.body.appendChild(container);
const element = (
<DashboardCloneModal onClone={onCloneConfirmed} onClose={closeModal} title={title + ' Copy'}></DashboardCloneModal>
<DashboardCloneModal onClone={onCloneConfirmed} onClose={closeModal} title={title + ' Copy'} />
);
ReactDOM.render(element, container);
}

6
src/core_plugins/metrics/public/components/add_delete_buttons.js
View file

@ -9,7 +9,7 @@ function AddDeleteButtons(props) {
return (
<Tooltip text={props.deleteTooltip}>
<a className="thor__button-outlined-danger sm" onClick={ props.onDelete }>
<i className="fa fa-trash-o"></i>
<i className="fa fa-trash-o" />
</a>
</Tooltip>
);
@ -21,7 +21,7 @@ function AddDeleteButtons(props) {
return (
<Tooltip text={props.addTooltip}>
<a className="thor__button-outlined-default sm" onClick={ props.onAdd }>
<i className="fa fa-plus"></i>
<i className="fa fa-plus" />
</a>
</Tooltip>
);
@ -33,7 +33,7 @@ function AddDeleteButtons(props) {
clone = (
<Tooltip text={props.cloneTooltip}>
<a className="thor__button-outlined-default sm" onClick={ props.onClone }>
<i className="fa fa-files-o"></i>
<i className="fa fa-files-o" />
</a>
</Tooltip>
);

6
src/core_plugins/metrics/public/components/aggs/agg.js
View file

@ -15,7 +15,8 @@ function Agg(props) {
className={props.className}
style={style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<Component
fields={props.fields}
disableDelete={props.disableDelete}
@ -25,7 +26,8 @@ function Agg(props) {
onDelete={props.onDelete}
panel={props.panel}
series={props.series}
siblings={props.siblings}/>
siblings={props.siblings}
/>
</div>
);

7
src/core_plugins/metrics/public/components/aggs/agg_row.js
View file

@ -18,7 +18,7 @@ function AggRow(props) {
<div>
<Tooltip text="Sort">
<div className="vis_editor__agg_sort thor__button-outlined-default sm">
<i className="fa fa-sort"></i>
<i className="fa fa-sort" />
</div>
</Tooltip>
</div>
@ -29,7 +29,7 @@ function AggRow(props) {
<div className="vis_editor__agg_row">
<div className="vis_editor__agg_row-item">
<div className={iconRowClassName}>
<i className={iconClassName}></i>
<i className={iconClassName} />
</div>
{props.children}
{ dragHandle }
@ -38,7 +38,8 @@ function AggRow(props) {
deleteTooltip="Delete Metric"
onAdd={props.onAdd}
onDelete={props.onDelete}
disableDelete={props.disableDelete}/>
disableDelete={props.disableDelete}
/>
</div>
</div>
);

3
src/core_plugins/metrics/public/components/aggs/agg_select.js
View file

@ -147,7 +147,8 @@ function AggSelect(props) {
options={options}
value={props.value}
optionComponent={AggSelectOption}
onChange={handleChange}/>
onChange={handleChange}
/>
</div>
);
}

12
src/core_plugins/metrics/public/components/aggs/calculation.js
View file

@ -35,21 +35,24 @@ class CalculationAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
siblings={this.props.siblings}
>
<div className="vis_editor__row_item">
<div>
<div className="vis_editor__label">Aggregation</div>
<AggSelect
siblings={this.props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
<div className="vis_editor__variables">
<div className="vis_editor__label">Variables</div>
<Vars
metrics={siblings}
onChange={handleChange}
name="variables"
model={model}/>
model={model}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">
@ -60,7 +63,8 @@ class CalculationAgg extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={handleTextChange('script')}
value={model.script}/>
value={model.script}
/>
</div>
</div>
</div>

19
src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
View file

@ -10,18 +10,20 @@ function CumlativeSumAgg(props) {
const handleChange = createChangeHandler(props.onChange, model);
const handleSelectChange = createSelectHandler(handleChange);
return (
<AggRow
disableDelete={props.disableDelete}
model={props.model}
onAdd={props.onAdd}
onDelete={props.onDelete}
siblings={props.siblings}>
<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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Metric</div>
@ -29,7 +31,8 @@ function CumlativeSumAgg(props) {
onChange={handleSelectChange('field')}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
</AggRow>
);

12
src/core_plugins/metrics/public/components/aggs/derivative.js
View file

@ -24,13 +24,15 @@ class DerivativeAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Metric</div>
@ -38,7 +40,8 @@ class DerivativeAgg extends Component {
onChange={handleSelectChange('field')}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
<div>
<div className="vis_editor__label">Units (1s, 1m, etc)</div>
@ -46,7 +49,8 @@ class DerivativeAgg extends Component {
className="vis_editor__input"
onChange={handleTextChange('unit')}
value={model.unit}
type="text"/>
type="text"
/>
</div>
</AggRow>
);

3
src/core_plugins/metrics/public/components/aggs/field_select.js
View file

@ -19,7 +19,8 @@ function FieldSelect(props) {
disabled={props.disabled}
options={options}
value={props.value}
onChange={props.onChange}/>
onChange={props.onChange}
/>
);
}

86
src/core_plugins/metrics/public/components/aggs/filter_ratio.js
View file

@ -34,7 +34,8 @@ class FilterRatioAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
siblings={this.props.siblings}
>
<div style={{ flex: '1 0 auto' }}>
<div style={{ flex: '1 0 auto', display: 'flex' }}>
<div className="vis_editor__row_item">
@ -42,47 +43,52 @@ class FilterRatioAgg extends Component {
<AggSelect
siblings={this.props.siblings}
value={model.type}
onChange={handleSelectChange('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>
</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 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>
<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>
</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>
);
}

3
src/core_plugins/metrics/public/components/aggs/metric_select.js
View file

@ -41,7 +41,8 @@ function MetricSelect(props) {
placeholder="Select metric..."
options={options.concat(props.additionalOptions)}
value={value}
onChange={onChange}/>
onChange={onChange}
/>
);
}

21
src/core_plugins/metrics/public/components/aggs/moving_average.js
View file

@ -39,7 +39,8 @@ class MovingAverageAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
siblings={this.props.siblings}
>
<div className="vis_editor__row_item">
<div className="vis_editor__agg_row-item">
<div className="vis_editor__row_item">
@ -47,7 +48,8 @@ class MovingAverageAgg extends Component {
<AggSelect
siblings={this.props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Metric</div>
@ -55,7 +57,8 @@ class MovingAverageAgg extends Component {
onChange={handleSelectChange('field')}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
</div>
<div className="vis_editor__agg_row-item">
@ -66,7 +69,8 @@ class MovingAverageAgg extends Component {
placeholder="Select..."
onChange={ handleSelectChange('model') }
value={this.props.model.model}
options={ modelOptions }/>
options={ modelOptions }
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Window Size</div>
@ -74,7 +78,8 @@ class MovingAverageAgg extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={handleNumberChange('window')}
value={model.window}/>
value={model.window}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Minimize</div>
@ -82,7 +87,8 @@ class MovingAverageAgg extends Component {
placeholder="Select..."
onChange={ handleSelectChange('minimize') }
value={model.minimize}
options={ minimizeOptions }/>
options={ minimizeOptions }
/>
</div>
</div>
<div className="vis_editor__agg_row-item">
@ -92,7 +98,8 @@ class MovingAverageAgg extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={handleTextChange('settings')}
value={model.settings}/>
value={model.settings}
/>
</div>
</div>
</div>

27
src/core_plugins/metrics/public/components/aggs/percentile.js
View file

@ -51,14 +51,16 @@ class Percentiles extends Component {
type="number"
step="1"
onChange={this.handleTextChange(model, 'value')}
value={model.value}/>
value={model.value}
/>
<div className="vis_editor__label">Mode</div>
<div className="vis_editor__row_item">
<Select
clearable={false}
onChange={this.handleTextChange(model, 'mode')}
options={modeOptions}
value={model.mode}/>
value={model.mode}
/>
</div>
<div style={optionsStyle} className="vis_editor__label">Fill To</div>
<input
@ -67,7 +69,8 @@ class Percentiles extends Component {
type="number"
step="1"
onChange={this.handleTextChange(model, 'percentile')}
value={model.percentile}/>
value={model.percentile}
/>
<div style={optionsStyle} className="vis_editor__label">Shade (0 to 1)</div>
<input
style={optionsStyle}
@ -75,12 +78,14 @@ class Percentiles extends Component {
type="number"
step="0.1"
onChange={this.handleTextChange(model, 'shade')}
value={model.shade}/>
value={model.shade}
/>
</div>
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete}
disableDelete={items.length < 2}/>
disableDelete={items.length < 2}
/>
</div>
);
}
@ -132,7 +137,8 @@ class PercentileAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
siblings={this.props.siblings}
>
<div className="vis_editor__row_item">
<div className="vis_editor__agg_row-item">
<div className="vis_editor__row_item">
@ -140,7 +146,8 @@ class PercentileAgg extends Component {
<AggSelect
siblings={this.props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Field</div>
@ -150,13 +157,15 @@ class PercentileAgg extends Component {
restrict="numeric"
indexPattern={indexPattern}
value={model.field}
onChange={handleSelectChange('field')}/>
onChange={handleSelectChange('field')}
/>
</div>
</div>
<Percentiles
onChange={handleChange}
name="percentiles"
model={model}/>
model={model}
/>
</div>
</AggRow>
);

12
src/core_plugins/metrics/public/components/aggs/percentile_rank.js
View file

@ -26,13 +26,15 @@ class PercentileRankAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Field</div>
@ -42,14 +44,16 @@ class PercentileRankAgg extends Component {
restrict="numeric"
indexPattern={indexPattern}
value={model.field}
onChange={handleSelectChange('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')}/>
onChange={handleTextChange('value')}
/>
</div>
</AggRow>
);

9
src/core_plugins/metrics/public/components/aggs/positive_only.js
View file

@ -22,13 +22,15 @@ class PositiveOnlyAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Metric</div>
@ -36,7 +38,8 @@ class PositiveOnlyAgg extends Component {
onChange={handleSelectChange('field')}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
</AggRow>
);

12
src/core_plugins/metrics/public/components/aggs/serial_diff.js
View file

@ -23,13 +23,15 @@ class SerialDiffAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Metric</div>
@ -37,7 +39,8 @@ class SerialDiffAgg extends Component {
onChange={handleSelectChange('field')}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
<div>
<div className="vis_editor__label">Lag</div>
@ -45,7 +48,8 @@ class SerialDiffAgg extends Component {
className="vis_editor__input"
onChange={handleNumberChange('lag')}
value={model.lag}
type="text"/>
type="text"
/>
</div>
</AggRow>
);

19
src/core_plugins/metrics/public/components/aggs/series_agg.js
View file

@ -24,25 +24,28 @@ function SeriesAgg(props) {
];
return (
<AggRow
disableDelete={props.disableDelete}
model={props.model}
onAdd={props.onAdd}
onDelete={props.onDelete}
siblings={props.siblings}>
<AggRow
disableDelete={props.disableDelete}
model={props.model}
onAdd={props.onAdd}
onDelete={props.onDelete}
siblings={props.siblings}
>
<div className="vis_editor__item">
<div className="vis_editor__label">Aggregation</div>
<AggSelect
siblings={props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__item">
<div className="vis_editor__label">Function</div>
<Select
value={model.function}
options={functionOptions}
onChange={handleSelectChange('function')}/>
onChange={handleSelectChange('function')}
/>
</div>
</AggRow>
);

9
src/core_plugins/metrics/public/components/aggs/static.js
View file

@ -26,7 +26,8 @@ class FilterRatioAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
siblings={this.props.siblings}
>
<div style={{ flex: '1 0 auto' }}>
<div style={{ flex: '1 0 auto', display: 'flex' }}>
<div className="vis_editor__row_item">
@ -34,7 +35,8 @@ class FilterRatioAgg extends Component {
<AggSelect
siblings={this.props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__row_item">
<div className="vis_editor__label">Static Value</div>
@ -43,7 +45,8 @@ class FilterRatioAgg extends Component {
onChange={handleTextChange('value')}
value={model.value}
steps="0.1"
type="number"/>
type="number"
/>
</div>
</div>
</div>

32
src/core_plugins/metrics/public/components/aggs/std_agg.js
View file

@ -23,24 +23,32 @@ function StandardAgg(props) {
model={props.model}
onAdd={props.onAdd}
onDelete={props.onDelete}
siblings={props.siblings}>
siblings={props.siblings}
>
<div className="vis_editor__item">
<div className="vis_editor__label">Aggregation</div>
<AggSelect
siblings={props.siblings}
value={model.type}
onChange={handleSelectChange('type')}/>
onChange={handleSelectChange('type')}
/>
</div>
{ model.type !== 'count' ? (<div className="vis_editor__item">
<div className="vis_editor__label">Field</div>
<FieldSelect
fields={fields}
type={model.type}
restrict={restrict}
indexPattern={indexPattern}
value={model.field}
onChange={handleSelectChange('field')}/>
</div>) : null }
{
model.type !== 'count'
? (
<div className="vis_editor__item">
<div className="vis_editor__label">Field</div>
<FieldSelect
fields={fields}
type={model.type}
restrict={restrict}
indexPattern={indexPattern}
value={model.field}
onChange={handleSelectChange('field')}
/>
</div>
) : null
}
</AggRow>
);

15
src/core_plugins/metrics/public/components/aggs/std_deviation.js
View file

@ -33,13 +33,15 @@ class StandardDeviationAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__std_deviation-field">
<div className="vis_editor__label">Field</div>
@ -49,21 +51,24 @@ class StandardDeviationAgg extends Component {
restrict="numeric"
indexPattern={indexPattern}
value={model.field}
onChange={handleSelectChange('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')}/>
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}/>
value={model.mode}
/>
</div>
</AggRow>
);

15
src/core_plugins/metrics/public/components/aggs/std_sibling.js
View file

@ -26,7 +26,8 @@ class StandardSiblingAgg extends Component {
<input
className="vis_editor__std_deviation-sigma"
value={model.sigma}
onChange={handleTextChange('sigma')}/>
onChange={handleTextChange('sigma')}
/>
</div>
);
@ -43,7 +44,8 @@ class StandardSiblingAgg extends Component {
<Select
options={modeOptions}
onChange={handleSelectChange('mode')}
value={model.mode}/>
value={model.mode}
/>
</div>
);
}
@ -54,13 +56,15 @@ class StandardSiblingAgg extends Component {
model={this.props.model}
onAdd={this.props.onAdd}
onDelete={this.props.onDelete}
siblings={this.props.siblings}>
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')}/>
onChange={handleSelectChange('type')}
/>
</div>
<div className="vis_editor__std_sibling-metric">
<div className="vis_editor__label">Metric</div>
@ -69,7 +73,8 @@ class StandardSiblingAgg extends Component {
exclude={['percentile']}
metrics={siblings}
metric={model}
value={model.field}/>
value={model.field}
/>
</div>
{ stdDev.sigma }
{ stdDev.mode }

9
src/core_plugins/metrics/public/components/aggs/vars.js
View file

@ -31,7 +31,8 @@ class CalculationVars extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(row, 'name')}
value={row.name} />
value={row.name}
/>
</div>
<div className="vis_editor__calc_vars-var">
<MetricSelect
@ -39,13 +40,15 @@ class CalculationVars extends Component {
exclude={['percentile']}
metrics={this.props.metrics}
metric={this.props.model}
value={row.field}/>
value={row.field}
/>
</div>
<div className="vis_editor__calc_vars-control">
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete}
disableDelete={items.length < 2}/>
disableDelete={items.length < 2}
/>
</div>
</div>
);

37
src/core_plugins/metrics/public/components/annotations_editor.js
View file

@ -54,7 +54,8 @@ class AnnotationsEditor extends Component {
disableTrash={true}
onChange={handleChange}
name="color"
value={model.color}/>
value={model.color}
/>
</div>
<div className="vis_editor__annotations-content">
<div className="vis_editor__row">
@ -64,7 +65,8 @@ class AnnotationsEditor extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'index_pattern')}
value={model.index_pattern} />
value={model.index_pattern}
/>
</div>
<div className="vis_editor__row-item">
<div className="vis_editor__label">Time Field (required)</div>
@ -73,7 +75,8 @@ class AnnotationsEditor extends Component {
value={model.time_field}
onChange={this.handleChange(model, 'time_field')}
indexPattern={model.index_pattern}
fields={this.props.fields}/>
fields={this.props.fields}
/>
</div>
</div>
<div className="vis_editor__row">
@ -83,14 +86,16 @@ class AnnotationsEditor extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'query_string')}
value={model.query_string} />
value={model.query_string}
/>
</div>
<div className="vis_editor__row-item-small">
<div className="vis_editor__label">Ignore Global Filters</div>
<YesNo
value={model.ignore_global_filters}
name="ignore_global_filters"
onChange={handleChange}/>
onChange={handleChange}
/>
</div>
<div className="vis_editor__row-item-small">
@ -98,7 +103,8 @@ class AnnotationsEditor extends Component {
<YesNo
value={model.ignore_panel_filters}
name="ignore_panel_filters"
onChange={handleChange}/>
onChange={handleChange}
/>
</div>
</div>
@ -108,7 +114,8 @@ class AnnotationsEditor extends Component {
<div className="vis_editor__item">
<IconSelect
value={model.icon}
onChange={this.handleChange(model, 'icon')} />
onChange={this.handleChange(model, 'icon')}
/>
</div>
</div>
<div className="vis_editor__row-item">
@ -117,7 +124,8 @@ class AnnotationsEditor extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'fields')}
value={model.fields} />
value={model.fields}
/>
</div>
<div className="vis_editor__row-item">
<div className="vis_editor__label">Row Template (required - eg.<code>{'{{field}}'}</code>)</div>
@ -125,14 +133,16 @@ class AnnotationsEditor extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'template')}
value={model.template} />
value={model.template}
/>
</div>
</div>
</div>
<div className="vis_editor__annotations-controls">
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete} />
onDelete={handleDelete}
/>
</div>
</div>
);
@ -147,8 +157,11 @@ class AnnotationsEditor extends Component {
content = (
<div className="vis_editor__annotations-missing">
<p>Click the button below to create an annotation data source.</p>
<a className="thor__button-outlined-default large"
onClick={handleAdd}>Add Data Source</a>
<a
className="thor__button-outlined-default large"
onClick={handleAdd}
>Add Data Source
</a>
</div>
);
} else {

28
src/core_plugins/metrics/public/components/color_picker.js
View file

@ -43,14 +43,16 @@ class ColorPicker extends Component {
return (
<div
className="vis_editor__color_picker-swatch-empty"
onClick={this.handleClick}/>
onClick={this.handleClick}
/>
);
}
return (
<div
style={{ backgroundColor: this.props.value }}
className="vis_editor__color_picker-swatch"
onClick={this.handleClick}/>
onClick={this.handleClick}
/>
);
}
@ -71,13 +73,21 @@ class ColorPicker extends Component {
<div className="vis_editor__color_picker">
{ swatch }
{ clear }
{ this.state.displayPicker ? <div className="vis_editor__color_picker-popover">
<div className="vis_editor__color_picker-cover"
onClick={this.handleClose}/>
<Picker
color={ value }
onChangeComplete={this.handleChange} />
</div> : null }
{
this.state.displayPicker
? (
<div className="vis_editor__color_picker-popover">
<div
className="vis_editor__color_picker-cover"
onClick={this.handleClose}
/>
<Picker
color={ value }
onChangeComplete={this.handleChange}
/>
</div>
) : null
}
</div>
);
}

15
src/core_plugins/metrics/public/components/color_rules.js
View file

@ -46,7 +46,8 @@ class ColorRules extends Component {
<ColorPicker
onChange={handleColorChange}
name={this.props.secondaryVarName}
value={model[this.props.secondaryVarName]}/>
value={model[this.props.secondaryVarName]}
/>
</div>
);
}
@ -56,25 +57,29 @@ class ColorRules extends Component {
<ColorPicker
onChange={handleColorChange}
name={this.props.primaryVarName}
value={model[this.props.primaryVarName]}/>
value={model[this.props.primaryVarName]}
/>
{ secondary }
<div className="color_rules__label">if metric is</div>
<div className="color_rules__item">
<Select
onChange={this.handleChange(model, 'opperator')}
value={model.opperator}
options={operatorOptions}/>
options={operatorOptions}
/>
</div>
<input
className="color_rules__input"
type="number"
value={model.value}
onChange={this.handleChange(model, 'value', Number)}/>
onChange={this.handleChange(model, 'value', Number)}
/>
<div className="color_rules__control">
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete}
disableDelete={items.length < 2}/>
disableDelete={items.length < 2}
/>
</div>
</div>
);

3
src/core_plugins/metrics/public/components/custom_color_picker.js
View file

@ -56,7 +56,8 @@ export class CustomColorPicker extends Component {
<CompactColor
key={c}
color={c}
onClick={handleSwatchChange}/>
onClick={handleSwatchChange}
/>
);
});

6
src/core_plugins/metrics/public/components/data_format_picker.js
View file

@ -47,7 +47,8 @@ class DataFormatPicker extends Component {
defaultValue={value}
ref={(el) => this.custom = el}
onChange={this.handleCustomChange}
type="text"/>
type="text"
/>
</div>
);
}
@ -61,7 +62,8 @@ class DataFormatPicker extends Component {
clearable={false}
value={defaultValue}
options={options}
onChange={this.handleChange}/>
onChange={this.handleChange}
/>
</div>
{custom}
</div>

10
src/core_plugins/metrics/public/components/icon_select.js
View file

@ -29,7 +29,8 @@ class IconOption extends Component {
const icon = this.props.option.value;
const label = this.props.option.label;
return (
<div className={this.props.className}
<div
className={this.props.className}
onMouseEnter={this.handleMouseEnter}
onMouseDown={this.handleMouseDown}
onMouseMove={this.handleMouseMove}
@ -41,7 +42,7 @@ class IconOption extends Component {
<span
className={`vis_editor__icon_select-option kuiIcon ${icon}`}
aria-hidden="true"
></span>
/>
{ this.props.children }
</span>
</div>
@ -71,7 +72,7 @@ function IconValue(props) {
className="Select-value-label"
aria-label={`${label} icon`}
>
<span className={`vis_editor__icon_select-value kuiIcon ${icon}`}></span>
<span className={`vis_editor__icon_select-value kuiIcon ${icon}`} />
{ props.children }
</span>
</div>
@ -92,7 +93,8 @@ function IconSelect(props) {
value={props.value}
optionComponent={IconOption}
valueComponent={IconValue}
options={props.icons} />
options={props.icons}
/>
);
}

12
src/core_plugins/metrics/public/components/index_pattern.js
View file

@ -28,7 +28,8 @@ class IndexPattern extends Component {
className="vis_editor__input"
disabled={this.props.disabled}
onChange={handleTextChange(indexPatternName, '*')}
value={model[indexPatternName]}/>
value={model[indexPatternName]}
/>
<div className="vis_editor__label">Time Field</div>
<div className="vis_editor__index_pattern-fields">
<FieldSelect
@ -37,19 +38,22 @@ class IndexPattern extends Component {
disabled={this.props.disabled}
onChange={handleSelectChange(timeFieldName)}
indexPattern={model[indexPatternName]}
fields={fields}/>
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]}/>
value={model[intervalName]}
/>
<div className="vis_editor__label">Drop Last Bucket</div>
<YesNo
value={model[dropBucketName]}
name={dropBucketName}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
);
}

3
src/core_plugins/metrics/public/components/lib/create_agg_row_render.js
View file

@ -20,7 +20,8 @@ export default function createAggRowRender(props) {
panel={panel}
series={model}
siblings={items}
sortData={row.id} />
sortData={row.id}
/>
);
};
}

6
src/core_plugins/metrics/public/components/markdown_editor.js
View file

@ -100,7 +100,8 @@ class MarkdownEditor extends Component {
name={`ace-${model.id}`}
setOptions={{ wrap: true, fontSize: '14px' }}
value={model.markdown}
onChange={this.handleChange}/>
onChange={this.handleChange}
/>
</div>
<div className="vis_editor__markdown-variables">
<div>The following variables can be used in the Markdown by using the Handlebar (mustache) syntax. <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">Click here for documentation</a> on the available expressions.</div>
@ -121,7 +122,8 @@ class MarkdownEditor extends Component {
{{#each _all}}
- {{ label }} {{ last.formatted }}
{{/each}}`}</code>
{{/each}}`}
</code>
</pre>
</div>
</div>

47
src/core_plugins/metrics/public/components/panel_config/gauge.js
View file

@ -58,7 +58,8 @@ class GaugePanelConfig extends Component {
limit={1}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else {
view = (
@ -66,39 +67,45 @@ class GaugePanelConfig extends Component {
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Panel Filter</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('filter')}
value={model.filter}/>
value={model.filter}
/>
<div className="vis_editor__label">Ignore Global Filter</div>
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Background Color</div>
<ColorPicker
onChange={this.props.onChange}
name="background_color"
value={model.background_color}/>
value={model.background_color}
/>
<div className="vis_editor__label">Gauge Max (empty for auto)</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('gauge_max')}
value={model.gauge_max}/>
value={model.gauge_max}
/>
<div className="vis_editor__label">Gauge Style</div>
<Select
autosize={false}
clearable={false}
options={styleOptions}
value={model.gauge_style}
onChange={handleSelectChange('gauge_style')}/>
onChange={handleSelectChange('gauge_style')}
/>
</div>
<div className="vis_editor__vis_config-row">
@ -106,19 +113,22 @@ class GaugePanelConfig extends Component {
<ColorPicker
onChange={this.props.onChange}
name="gauge_inner_color"
value={model.gauge_inner_color}/>
value={model.gauge_inner_color}
/>
<div className="vis_editor__label">Inner Line Width</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('gauge_inner_width')}
value={model.gauge_inner_width}/>
value={model.gauge_inner_width}
/>
<div className="vis_editor__label">Gauge Line Width</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('gauge_width')}
value={model.gauge_width} />
value={model.gauge_width}
/>
</div>
<div>
<div className="vis_editor__label">Color Rules</div>
@ -131,7 +141,8 @@ class GaugePanelConfig extends Component {
secondaryVarName="text"
model={model}
onChange={this.props.onChange}
name="gauge_color_rules"/>
name="gauge_color_rules"
/>
</div>
</div>
);
@ -139,10 +150,16 @@ class GaugePanelConfig extends Component {
return (
<div>
<div className="kbnTabs">
<div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}>Data</div>
<div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}>Panel Options</div>
<div
className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}
>Data
</div>
<div
className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}
>Panel Options
</div>
</div>
{view}
</div>

47
src/core_plugins/metrics/public/components/panel_config/markdown.js
View file

@ -60,7 +60,8 @@ class MarkdownPanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else {
view = (
@ -68,31 +69,36 @@ class MarkdownPanelConfig extends Component {
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Background Color</div>
<ColorPicker
onChange={this.props.onChange}
name="background_color"
value={model.background_color}/>
value={model.background_color}
/>
<div className="vis_editor__label">Panel Filter</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('filter')}
value={model.filter} />
value={model.filter}
/>
<div className="vis_editor__label">Ignore Global Filter</div>
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Show Scrollbars</div>
<YesNo
value={model.markdown_scrollbars}
name="markdown_scrollbars"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__label">Vertical Alignment</div>
<div className="vis_editor__row_item">
<Select
@ -100,12 +106,13 @@ class MarkdownPanelConfig extends Component {
clearable={false}
options={alignOptions}
value={model.markdown_vertical_align}
onChange={handleSelectChange('markdown_vertical_align')}/>
onChange={handleSelectChange('markdown_vertical_align')}
/>
</div>
</div>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Custom CSS (supports Less)</div>
</div>
</div>
<div className="vis_editor__ace-editor">
<AceEditor
mode="less"
@ -114,7 +121,8 @@ class MarkdownPanelConfig extends Component {
name={`ace-css-${model.id}`}
setOptions={{ fontSize: '14px' }}
value={ model.markdown_less}
onChange={this.handleCSSChange}/>
onChange={this.handleCSSChange}
/>
</div>
</div>
);
@ -122,12 +130,21 @@ class MarkdownPanelConfig extends Component {
return (
<div>
<div className="kbnTabs">
<div className={`kbnTabs__tab${selectedTab === 'markdown' && '-active' || ''}`}
onClick={() => this.switchTab('markdown')}>Markdown</div>
<div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}>Data</div>
<div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}>Panel Options</div>
<div
className={`kbnTabs__tab${selectedTab === 'markdown' && '-active' || ''}`}
onClick={() => this.switchTab('markdown')}
>Markdown
</div>
<div
className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}
>Data
</div>
<div
className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}
>Panel Options
</div>
</div>
{view}
</div>

29
src/core_plugins/metrics/public/components/panel_config/metric.js
View file

@ -40,7 +40,8 @@ class MetricPanelConfig extends Component {
limit={2}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else {
view = (
@ -48,19 +49,22 @@ class MetricPanelConfig extends Component {
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Panel Filter</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('filter')}
value={model.filter}/>
value={model.filter}
/>
<div className="vis_editor__label">Ignore Global Filter</div>
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
<div>
<div className="vis_editor__label">Color Rules</div>
@ -69,7 +73,8 @@ class MetricPanelConfig extends Component {
<ColorRules
model={model}
onChange={this.props.onChange}
name="background_color_rules"/>
name="background_color_rules"
/>
</div>
</div>
);
@ -77,10 +82,16 @@ class MetricPanelConfig extends Component {
return (
<div>
<div className="kbnTabs">
<div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}>Data</div>
<div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}>Panel Options</div>
<div
className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}
>Data
</div>
<div
className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}
>Panel Options
</div>
</div>
{view}
</div>

57
src/core_plugins/metrics/public/components/panel_config/timeseries.js
View file

@ -47,7 +47,8 @@ class TimeseriesPanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else if (selectedTab === 'annotations') {
view = (
@ -55,7 +56,8 @@ class TimeseriesPanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name="annotations"
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else {
view = (
@ -63,20 +65,23 @@ class TimeseriesPanelConfig extends Component {
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Axis Min</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('axis_min')}
value={model.axis_min}/>
value={model.axis_min}
/>
<div className="vis_editor__label">Axis Max</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('axis_max')}
value={model.axis_max}/>
value={model.axis_max}
/>
<div className="vis_editor__label">Axis Position</div>
<div className="vis_editor__row_item">
<Select
@ -84,7 +89,8 @@ class TimeseriesPanelConfig extends Component {
clearable={false}
options={positionOptions}
value={model.axis_position}
onChange={handleSelectChange('axis_position')}/>
onChange={handleSelectChange('axis_position')}
/>
</div>
</div>
<div className="vis_editor__vis_config-row">
@ -92,25 +98,29 @@ class TimeseriesPanelConfig extends Component {
<ColorPicker
onChange={this.props.onChange}
name="background_color"
value={model.background_color}/>
value={model.background_color}
/>
<div className="vis_editor__label">Show Legend</div>
<YesNo
value={model.show_legend}
name="show_legend"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__label">Legend Position</div>
<div className="vis_editor__row_item">
<Select
clearable={false}
options={legendPositionOptions}
value={model.legend_position}
onChange={handleSelectChange('legend_position')}/>
onChange={handleSelectChange('legend_position')}
/>
</div>
<div className="vis_editor__label">Display Grid</div>
<YesNo
value={model.show_grid}
name="show_grid"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Panel Filter</div>
@ -118,12 +128,14 @@ class TimeseriesPanelConfig extends Component {
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('filter')}
value={model.filter}/>
value={model.filter}
/>
<div className="vis_editor__label">Ignore Global Filter</div>
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
</div>
);
@ -131,12 +143,21 @@ class TimeseriesPanelConfig extends Component {
return (
<div>
<div className="kbnTabs">
<div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}>Data</div>
<div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}>Panel Options</div>
<div className={`kbnTabs__tab${selectedTab === 'annotations' && '-active' || ''}`}
onClick={() => this.switchTab('annotations')}>Annotations</div>
<div
className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}
>Data
</div>
<div
className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}
>Panel Options
</div>
<div
className={`kbnTabs__tab${selectedTab === 'annotations' && '-active' || ''}`}
onClick={() => this.switchTab('annotations')}
>Annotations
</div>
</div>
{view}
</div>

38
src/core_plugins/metrics/public/components/panel_config/top_n.js
View file

@ -40,40 +40,47 @@ class TopNPanelConfig extends Component {
fields={this.props.fields}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
} else {
view = (
<div className="vis_editor__container">
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Item Url (This supports mustache templating.
<code>{'{{key}}'}</code> is set to the term)</div>
<code>{'{{key}}'}</code> is set to the term)
</div>
<input
className="vis_editor__input-grows"
onChange={handleTextChange('drilldown_url')}
value={model.drilldown_url}/>
value={model.drilldown_url}
/>
</div>
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
<div className="vis_editor__vis_config-row">
<div className="vis_editor__label">Background Color</div>
<ColorPicker
onChange={this.props.onChange}
name="background_color"
value={model.background_color}/>
value={model.background_color}
/>
<div className="vis_editor__label">Panel Filter</div>
<input
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('filter')}
value={model.filter}/>
value={model.filter}
/>
<div className="vis_editor__label">Ignore Global Filter</div>
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}/>
onChange={this.props.onChange}
/>
</div>
<div>
<div className="vis_editor__label">Color Rules</div>
@ -85,7 +92,8 @@ class TopNPanelConfig extends Component {
primaryName="bar"
hideSecondary={true}
onChange={this.props.onChange}
name="bar_color_rules"/>
name="bar_color_rules"
/>
</div>
</div>
);
@ -93,10 +101,16 @@ class TopNPanelConfig extends Component {
return (
<div>
<div className="kbnTabs">
<div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}>Data</div>
<div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}>Panel Options</div>
<div
className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
onClick={() => this.switchTab('data')}
>Data
</div>
<div
className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
onClick={() => this.switchTab('options')}
>Panel Options
</div>
</div>
{view}
</div>

15
src/core_plugins/metrics/public/components/series_config.js
View file

@ -18,32 +18,37 @@ class SeriesConfig extends Component {
<div className="vis_editor__series_config-row">
<DataFormatPicker
onChange={handleSelectChange('formatter')}
value={model.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}/>
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}/>
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}/>
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} />
disabled={!model.override_index_pattern}
/>
</div>
</div>
</div>

6
src/core_plugins/metrics/public/components/series_editor.js
View file

@ -37,7 +37,8 @@ class SeriesEditor extends Component {
onDelete={handleDelete.bind(null, props, row)}
model={row}
panel={model}
sortData={row.id} />
sortData={row.id}
/>
);
}
@ -56,7 +57,8 @@ class SeriesEditor extends Component {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__sort">
sortHandle="vis_editor__sort"
>
{ series }
</Sortable>
</div>

12
src/core_plugins/metrics/public/components/split.js
View file

@ -28,14 +28,16 @@ class Split extends Component {
return (
<SplitByFilter
model={model}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
}
if (model.split_mode === 'filters') {
return (
<SplitByFilters
model={model}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
}
if (model.split_mode === 'terms') {
@ -44,13 +46,15 @@ class Split extends Component {
model={model}
indexPattern={indexPattern}
fields={this.props.fields}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
}
return (
<SplitByEverything
model={model}
onChange={this.props.onChange} />
onChange={this.props.onChange}
/>
);
}

3
src/core_plugins/metrics/public/components/splits/everything.js
View file

@ -11,7 +11,8 @@ function SplitByEverything(props) {
<div className="vis_editor__split-selects">
<GroupBySelect
value={model.split_mode}
onChange={handleSelectChange('split_mode')} />
onChange={handleSelectChange('split_mode')}
/>
</div>
</div>
);

6
src/core_plugins/metrics/public/components/splits/filter.js
View file

@ -17,13 +17,15 @@ class SplitByFilter extends Component {
<div className="vis_editor__split-selects">
<GroupBySelect
value={model.split_mode}
onChange={handleSelectChange('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')} />
onChange={handleTextChange('filter')}
/>
</div>
);
}

12
src/core_plugins/metrics/public/components/splits/filter_items.js
View file

@ -39,7 +39,8 @@ class FilterItems extends Component {
disableTrash={true}
onChange={handleChange}
name="color"
value={model.color}/>
value={model.color}
/>
</div>
<div className="vis_editor__split-filter-item">
<input
@ -47,7 +48,8 @@ class FilterItems extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'filter')}
value={model.filter}/>
value={model.filter}
/>
</div>
<div className="vis_editor__split-filter-item">
<input
@ -55,13 +57,15 @@ class FilterItems extends Component {
className="vis_editor__input-grows-100"
type="text"
onChange={this.handleChange(model, 'label')}
value={model.label}/>
value={model.label}
/>
</div>
<div className="vis_editor__split-filter-control">
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete}
disableDelete={items.length < 2}/>
disableDelete={items.length < 2}
/>
</div>
</div>
);

6
src/core_plugins/metrics/public/components/splits/filters.js
View file

@ -12,7 +12,8 @@ function SplitByFilters(props) {
<div className="vis_editor__split-selects">
<GroupBySelect
value={model.split_mode}
onChange={handleSelectChange('split_mode')} />
onChange={handleSelectChange('split_mode')}
/>
</div>
</div>
<div className="vis_editor__split-container">
@ -20,7 +21,8 @@ function SplitByFilters(props) {
<FilterItems
name="split_filters"
model={model}
onChange={onChange} />
onChange={onChange}
/>
</div>
</div>
</div>

3
src/core_plugins/metrics/public/components/splits/group_by_select.js
View file

@ -12,7 +12,8 @@ function GroupBySelect(props) {
clearable={false}
value={ props.value || 'everything' }
onChange={props.onChange}
options={ modeOptions }/>
options={ modeOptions }
/>
);
}

12
src/core_plugins/metrics/public/components/splits/terms.js
View file

@ -22,7 +22,8 @@ class SplitByTerms extends Component {
<div className="vis_editor__split-selects">
<GroupBySelect
value={model.split_mode}
onChange={handleSelectChange('split_mode')} />
onChange={handleSelectChange('split_mode')}
/>
</div>
<div className="vis_editor__label">By</div>
<div className="vis_editor__item">
@ -30,7 +31,8 @@ class SplitByTerms extends Component {
indexPattern={indexPattern}
onChange={handleSelectChange('terms_field')}
value={model.terms_field}
fields={this.props.fields} />
fields={this.props.fields}
/>
</div>
<div className="vis_editor__label">Top</div>
<input
@ -38,7 +40,8 @@ class SplitByTerms extends Component {
type="number"
value={model.terms_size}
className="vis_editor__split-term_count"
onChange={handleTextChange('terms_size')} />
onChange={handleTextChange('terms_size')}
/>
<div className="vis_editor__label">Order By</div>
<div className="vis_editor__split-aggs">
<MetricSelect
@ -47,7 +50,8 @@ class SplitByTerms extends Component {
additionalOptions={[defaultCount]}
onChange={handleSelectChange('terms_order_by')}
restrict="basic"
value={model.terms_order_by}/>
value={model.terms_order_by}
/>
</div>
</div>
);

12
src/core_plugins/metrics/public/components/vis_editor.js
View file

@ -65,7 +65,8 @@ class VisEditor extends Component {
onBrush={this.onBrush}
fields={this.props.vis.fields}
model={this.props.vis.params}
visData={this.props.visData} />
visData={this.props.visData}
/>
);
}
@ -77,7 +78,8 @@ class VisEditor extends Component {
<div className="vis_editor">
<VisPicker
model={model}
onChange={handleChange} />
onChange={handleChange}
/>
<VisEditorVisualization
dirty={this.state.dirty}
autoApply={this.state.autoApply}
@ -86,12 +88,14 @@ class VisEditor extends Component {
onBrush={this.onBrush}
onCommit={handleCommit}
onToggleAutoApply={handleAutoApplyToggle}
onChange={handleChange} />
onChange={handleChange}
/>
<PanelConfig
fields={this.props.vis.fields}
model={model}
visData={this.props.visData}
onChange={handleChange} />
onChange={handleChange}
/>
</div>
);
}

20
src/core_plugins/metrics/public/components/vis_editor_visualization.js
View file

@ -66,14 +66,17 @@ class VisEditorVisualization extends Component {
<Toggle
defaultChecked={autoApply}
icons={false}
onChange={this.props.onToggleAutoApply} />
onChange={this.props.onToggleAutoApply}
/>
</div>
<div className="vis_editor__dirty_controls-button">
<button
disabled={!dirty}
onClick={this.props.onCommit}
className={`${applyButtonClassName} md`}>
<i className="fa fa-play"></i> Apply Changes</button>
className={`${applyButtonClassName} md`}
>
<i className="fa fa-play" /> Apply Changes
</button>
</div>
<div className={`vis_editor__dirty_controls-message${dirty ? '-dirty' : ''}`}>
{applyMessage}
@ -88,21 +91,24 @@ class VisEditorVisualization extends Component {
style={style}
data-shared-item={true}
ref={(el) => this.visDiv = el}
className="vis_editor__visualization">
className="vis_editor__visualization"
>
<Visualization
backgroundColor={visBackgroundColor}
className="dashboard__visualization"
model={this.props.model}
onBrush={this.props.onBrush}
onChange={this.handleChange}
visData={this.props.visData} />
visData={this.props.visData}
/>
</div>
{applyButton}
<div
className="vis_editor__visualization-draghandle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
<i className="fa fa-ellipsis-h"></i>
onMouseUp={this.handleMouseUp}
>
<i className="fa fa-ellipsis-h" />
</div>
</div>
);

5
src/core_plugins/metrics/public/components/vis_picker.js
View file

@ -13,7 +13,7 @@ function VisPickerItem(props) {
return (
<div className={itemClassName} onClick={() => props.onClick(type)}>
<div className={iconClassName}>
<i className={`fa ${icon}`}></i>
<i className={`fa ${icon}`} />
</div>
<div className={labelClassName}>
{ label }
@ -48,7 +48,8 @@ function VisPicker(props) {
key={item.type}
onClick={handleChange}
selected={ item.type === model.type }
{...item}/>
{...item}
/>
);
});

37
src/core_plugins/metrics/public/components/vis_types/gauge/series.js
View file

@ -49,7 +49,8 @@ function GaugeSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__agg_sort">
sortHandle="vis_editor__agg_sort"
>
{ aggs }
</Sortable>
<div className="vis_editor__series_row">
@ -58,7 +59,8 @@ function GaugeSeries(props) {
onChange={props.onChange}
fields={fields}
panel={panel}
model={model}/>
model={model}
/>
</div>
</div>
</div>
@ -68,16 +70,23 @@ function GaugeSeries(props) {
<SeriesConfig
fields={props.fields}
model={props.model}
onChange={props.onChange} />
onChange={props.onChange}
/>
);
}
body = (
<div className="vis_editor__series-row">
<div className="kbnTabs sm">
<div className={metricsClassName}
onClick={() => props.switchTab('metrics')}>Metrics</div>
<div className={optionsClassname}
onClick={() => props.switchTab('options')}>Options</div>
<div
className={metricsClassName}
onClick={() => props.switchTab('metrics')}
>Metrics
</div>
<div
className={optionsClassname}
onClick={() => props.switchTab('options')}
>Options
</div>
</div>
{seriesBody}
</div>
@ -91,7 +100,8 @@ function GaugeSeries(props) {
disableTrash={true}
onChange={props.onChange}
name="color"
value={model.color}/>
value={model.color}
/>
);
}
@ -100,7 +110,7 @@ function GaugeSeries(props) {
dragHandle = (
<Tooltip text="Sort">
<div className="vis_editor__sort thor__button-outlined-default sm">
<i className="fa fa-sort"></i>
<i className="fa fa-sort" />
</div>
</Tooltip>
);
@ -111,7 +121,8 @@ function GaugeSeries(props) {
className={`${props.className} vis_editor__series`}
style={props.style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<div className="vis_editor__container">
<div className="vis_editor__series-details">
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
@ -121,7 +132,8 @@ function GaugeSeries(props) {
className="vis_editor__input-grows"
onChange={handleChange('label')}
placeholder='Label'
value={model.label}/>
value={model.label}
/>
</div>
{ dragHandle }
<AddDeleteButtons
@ -132,7 +144,8 @@ function GaugeSeries(props) {
onClone={props.onClone}
onAdd={onAdd}
disableDelete={disableDelete}
disableAdd={disableAdd}/>
disableAdd={disableAdd}
/>
</div>
</div>
{ body }

35
src/core_plugins/metrics/public/components/vis_types/markdown/series.js
View file

@ -47,7 +47,8 @@ function MarkdownSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__agg_sort">
sortHandle="vis_editor__agg_sort"
>
{ aggs }
</Sortable>
<div className="vis_editor__series_row">
@ -56,7 +57,8 @@ function MarkdownSeries(props) {
onChange={props.onChange}
fields={fields}
panel={panel}
model={model}/>
model={model}
/>
</div>
</div>
</div>
@ -66,16 +68,23 @@ function MarkdownSeries(props) {
<SeriesConfig
fields={props.fields}
model={props.model}
onChange={props.onChange} />
onChange={props.onChange}
/>
);
}
body = (
<div className="vis_editor__series-row">
<div className="kbnTabs sm">
<div className={metricsClassName}
onClick={() => props.switchTab('metrics')}>Metrics</div>
<div className={optionsClassname}
onClick={() => props.switchTab('options')}>Options</div>
<div
className={metricsClassName}
onClick={() => props.switchTab('metrics')}
>Metrics
</div>
<div
className={optionsClassname}
onClick={() => props.switchTab('options')}
>Options
</div>
</div>
{seriesBody}
</div>
@ -87,7 +96,8 @@ function MarkdownSeries(props) {
className={`${props.className} vis_editor__series`}
style={props.style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<div className="vis_editor__container">
<div className="vis_editor__series-details">
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
@ -96,12 +106,14 @@ function MarkdownSeries(props) {
className="vis_editor__input-grows vis_editor__row_item"
onChange={handleChange('label')}
placeholder='Label'
value={model.label}/>
value={model.label}
/>
<input
className="vis_editor__input-grows"
onChange={handleChange('var_name')}
placeholder='Variable Name'
value={model.var_name}/>
value={model.var_name}
/>
</div>
<AddDeleteButtons
addTooltip="Add Series"
@ -111,7 +123,8 @@ function MarkdownSeries(props) {
onClone={props.onClone}
onAdd={onAdd}
disableDelete={disableDelete}
disableAdd={disableAdd}/>
disableAdd={disableAdd}
/>
</div>
</div>
{ body }

37
src/core_plugins/metrics/public/components/vis_types/metric/series.js
View file

@ -49,7 +49,8 @@ function MetricSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__agg_sort">
sortHandle="vis_editor__agg_sort"
>
{ aggs }
</Sortable>
<div className="vis_editor__series_row">
@ -58,7 +59,8 @@ function MetricSeries(props) {
onChange={props.onChange}
fields={fields}
panel={panel}
model={model}/>
model={model}
/>
</div>
</div>
</div>
@ -68,16 +70,23 @@ function MetricSeries(props) {
<SeriesConfig
fields={props.fields}
model={props.model}
onChange={props.onChange} />
onChange={props.onChange}
/>
);
}
body = (
<div className="vis_editor__series-row">
<div className="kbnTabs sm">
<div className={metricsClassName}
onClick={() => props.switchTab('metrics')}>Metrics</div>
<div className={optionsClassname}
onClick={() => props.switchTab('options')}>Options</div>
<div
className={metricsClassName}
onClick={() => props.switchTab('metrics')}
>Metrics
</div>
<div
className={optionsClassname}
onClick={() => props.switchTab('options')}
>Options
</div>
</div>
{seriesBody}
</div>
@ -91,7 +100,8 @@ function MetricSeries(props) {
disableTrash={true}
onChange={props.onChange}
name="color"
value={model.color}/>
value={model.color}
/>
);
}
@ -100,7 +110,7 @@ function MetricSeries(props) {
dragHandle = (
<Tooltip text="Sort">
<div className="vis_editor__sort thor__button-outlined-default sm">
<i className="fa fa-sort"></i>
<i className="fa fa-sort" />
</div>
</Tooltip>
);
@ -111,7 +121,8 @@ function MetricSeries(props) {
className={`${props.className} vis_editor__series`}
style={props.style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<div className="vis_editor__container">
<div className="vis_editor__series-details">
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
@ -121,7 +132,8 @@ function MetricSeries(props) {
className="vis_editor__input-grows"
onChange={handleChange('label')}
placeholder='Label'
value={model.label}/>
value={model.label}
/>
</div>
{ dragHandle }
<AddDeleteButtons
@ -132,7 +144,8 @@ function MetricSeries(props) {
onClone={props.onClone}
onAdd={onAdd}
disableDelete={disableDelete}
disableAdd={disableAdd}/>
disableAdd={disableAdd}
/>
</div>
</div>
{ body }

63
src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
View file

@ -55,7 +55,8 @@ function TimeseriesConfig(props) {
clearable={false}
options={chartTypeOptions}
value={model.chart_type}
onChange={handleSelectChange('chart_type')}/>
onChange={handleSelectChange('chart_type')}
/>
</div>
<div className="vis_editor__label">Stacked</div>
<div className="vis_editor__item">
@ -63,7 +64,8 @@ function TimeseriesConfig(props) {
clearable={false}
options={stackedOptions}
value={model.stacked}
onChange={handleSelectChange('stacked')}/>
onChange={handleSelectChange('stacked')}
/>
</div>
<div className="vis_editor__label">Fill (0 to 1)</div>
<input
@ -71,24 +73,28 @@ function TimeseriesConfig(props) {
type="number"
step="0.1"
onChange={handleTextChange('fill')}
value={model.fill}/>
value={model.fill}
/>
<div className="vis_editor__label">Line Width</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('line_width')}
value={model.line_width}/>
value={model.line_width}
/>
<div className="vis_editor__label">Point Size</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('point_size')}
value={model.point_size}/>
value={model.point_size}
/>
<div className="vis_editor__label">Steps</div>
<YesNo
value={model.steps}
name="steps"
onChange={props.onChange}/>
onChange={props.onChange}
/>
</div>
);
}
@ -101,7 +107,8 @@ function TimeseriesConfig(props) {
clearable={false}
options={chartTypeOptions}
value={model.chart_type}
onChange={handleSelectChange('chart_type')}/>
onChange={handleSelectChange('chart_type')}
/>
</div>
<div className="vis_editor__label">Stacked</div>
<div className="vis_editor__item">
@ -109,7 +116,8 @@ function TimeseriesConfig(props) {
clearable={false}
options={stackedOptions}
value={model.stacked}
onChange={handleSelectChange('stacked')}/>
onChange={handleSelectChange('stacked')}
/>
</div>
<div className="vis_editor__label">Fill (0 to 1)</div>
<input
@ -117,13 +125,15 @@ function TimeseriesConfig(props) {
type="number"
step="0.5"
onChange={handleTextChange('fill')}
value={model.fill}/>
value={model.fill}
/>
<div className="vis_editor__label">Line Width</div>
<input
className="vis_editor__input-grows"
type="number"
onChange={handleTextChange('line_width')}
value={model.line_width}/>
value={model.line_width}
/>
</div>
);
}
@ -136,12 +146,14 @@ function TimeseriesConfig(props) {
<div className="vis_editor__series_config-row">
<DataFormatPicker
onChange={handleSelectChange('formatter')}
value={model.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}/>
value={model.value_template}
/>
</div>
{ type }
<div className="vis_editor__series_config-row">
@ -150,19 +162,22 @@ function TimeseriesConfig(props) {
className="vis_editor__input-grows"
type="text"
onChange={handleTextChange('offset_time')}
value={model.offset_time}/>
value={model.offset_time}
/>
<div className="vis_editor__label">Hide in Legend</div>
<YesNo
value={model.hide_in_legend}
name="hide_in_legend"
onChange={props.onChange}/>
onChange={props.onChange}
/>
<div className="vis_editor__label">Split Color Theme</div>
<div className="vis_editor__row_item">
<Select
clearable={false}
options={splitColorOptions}
value={model.split_color_mode}
onChange={handleSelectChange('split_color_mode')}/>
onChange={handleSelectChange('split_color_mode')}
/>
</div>
</div>
<div className="vis_editor__series_config-row">
@ -170,21 +185,24 @@ function TimeseriesConfig(props) {
<YesNo
value={model.seperate_axis}
name="seperate_axis"
onChange={props.onChange}/>
onChange={props.onChange}
/>
<div className="vis_editor__label">Axis Min</div>
<input
className="vis_editor__input-grows"
type="number"
disabled={disableSeperateYaxis}
onChange={handleTextChange('axis_min')}
value={model.axis_min}/>
value={model.axis_min}
/>
<div className="vis_editor__label">Axis Max</div>
<input
className="vis_editor__input-grows"
type="number"
disabled={disableSeperateYaxis}
onChange={handleTextChange('axis_max')}
value={model.axis_max}/>
value={model.axis_max}
/>
<div className="vis_editor__label">Axis Position</div>
<div className="vis_editor__row_item">
<Select
@ -192,7 +210,8 @@ function TimeseriesConfig(props) {
disabled={disableSeperateYaxis}
options={positionOptions}
value={model.axis_position}
onChange={handleSelectChange('axis_position')}/>
onChange={handleSelectChange('axis_position')}
/>
</div>
</div>
<div className="vis_editor__series_config-row">
@ -200,13 +219,15 @@ function TimeseriesConfig(props) {
<YesNo
value={model.override_index_pattern}
name="override_index_pattern"
onChange={props.onChange}/>
onChange={props.onChange}
/>
<IndexPattern
{...props}
prefix="series_"
className="vis_editor__row_item vis_editor__row"
disabled={!model.override_index_pattern}
with-interval={true} />
with-interval={true}
/>
</div>
</div>
</div>

37
src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
View file

@ -49,7 +49,8 @@ function TimeseriesSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__agg_sort">
sortHandle="vis_editor__agg_sort"
>
{ aggs }
</Sortable>
<div className="vis_editor__series_row">
@ -58,7 +59,8 @@ function TimeseriesSeries(props) {
onChange={props.onChange}
fields={fields}
panel={panel}
model={model}/>
model={model}
/>
</div>
</div>
</div>
@ -68,16 +70,23 @@ function TimeseriesSeries(props) {
<SeriesConfig
fields={props.fields}
model={props.model}
onChange={props.onChange} />
onChange={props.onChange}
/>
);
}
body = (
<div className="vis_editor__series-row">
<div className="kbnTabs sm">
<div className={metricsClassName}
onClick={() => props.switchTab('metrics')}>Metrics</div>
<div className={optionsClassname}
onClick={() => props.switchTab('options')}>Options</div>
<div
className={metricsClassName}
onClick={() => props.switchTab('metrics')}
>Metrics
</div>
<div
className={optionsClassname}
onClick={() => props.switchTab('options')}
>Options
</div>
</div>
{seriesBody}
</div>
@ -91,7 +100,8 @@ function TimeseriesSeries(props) {
disableTrash={true}
onChange={props.onChange}
name="color"
value={model.color}/>
value={model.color}
/>
);
}
@ -100,7 +110,7 @@ function TimeseriesSeries(props) {
dragHandle = (
<Tooltip text="Sort">
<div className="vis_editor__sort thor__button-outlined-default sm">
<i className="fa fa-sort"></i>
<i className="fa fa-sort" />
</div>
</Tooltip>
);
@ -111,7 +121,8 @@ function TimeseriesSeries(props) {
className={`${props.className} vis_editor__series`}
style={props.style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<div className="vis_editor__container">
<div className="vis_editor__series-details">
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
@ -121,7 +132,8 @@ function TimeseriesSeries(props) {
className="vis_editor__input-grows"
onChange={handleChange('label')}
placeholder='Label'
value={model.label}/>
value={model.label}
/>
</div>
{ dragHandle }
<AddDeleteButtons
@ -132,7 +144,8 @@ function TimeseriesSeries(props) {
onClone={props.onClone}
onAdd={onAdd}
disableDelete={disableDelete}
disableAdd={disableAdd}/>
disableAdd={disableAdd}
/>
</div>
</div>
{ body }

37
src/core_plugins/metrics/public/components/vis_types/top_n/series.js
View file

@ -47,7 +47,8 @@ function TopNSeries(props) {
dynamic={true}
direction="vertical"
onSort={handleSort}
sortHandle="vis_editor__agg_sort">
sortHandle="vis_editor__agg_sort"
>
{ aggs }
</Sortable>
<div className="vis_editor__series_row">
@ -56,7 +57,8 @@ function TopNSeries(props) {
onChange={props.onChange}
fields={fields}
panel={panel}
model={model}/>
model={model}
/>
</div>
</div>
</div>
@ -66,16 +68,23 @@ function TopNSeries(props) {
<SeriesConfig
fields={props.fields}
model={props.model}
onChange={props.onChange} />
onChange={props.onChange}
/>
);
}
body = (
<div className="vis_editor__series-row">
<div className="kbnTabs sm">
<div className={metricsClassName}
onClick={() => props.switchTab('metrics')}>Metrics</div>
<div className={optionsClassname}
onClick={() => props.switchTab('options')}>Options</div>
<div
className={metricsClassName}
onClick={() => props.switchTab('metrics')}
>Metrics
</div>
<div
className={optionsClassname}
onClick={() => props.switchTab('options')}
>Options
</div>
</div>
{seriesBody}
</div>
@ -87,7 +96,8 @@ function TopNSeries(props) {
disableTrash={true}
onChange={props.onChange}
name="color"
value={model.color}/>
value={model.color}
/>
);
let dragHandle;
@ -95,7 +105,7 @@ function TopNSeries(props) {
dragHandle = (
<Tooltip text="Sort">
<div className="vis_editor__sort thor__button-outlined-default sm">
<i className="fa fa-sort"></i>
<i className="fa fa-sort" />
</div>
</Tooltip>
);
@ -106,7 +116,8 @@ function TopNSeries(props) {
className={`${props.className} vis_editor__series`}
style={props.style}
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}>
onTouchStart={props.onTouchStart}
>
<div className="vis_editor__container">
<div className="vis_editor__series-details">
<div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
@ -116,7 +127,8 @@ function TopNSeries(props) {
className="vis_editor__input-grows"
onChange={handleChange('label')}
placeholder='Label'
value={model.label}/>
value={model.label}
/>
</div>
{ dragHandle }
<AddDeleteButtons
@ -127,7 +139,8 @@ function TopNSeries(props) {
onClone={props.onClone}
onAdd={onAdd}
disableDelete={disableDelete}
disableAdd={disableAdd}/>
disableAdd={disableAdd}
/>
</div>
</div>
{ body }

2
src/core_plugins/metrics/public/components/visualization.js
View file

@ -38,7 +38,7 @@ function Visualization(props) {
visData: props.visData
});
}
return (<div className={props.className}></div>);
return (<div className={props.className} />);
}
Visualization.defaultProps = {

12
src/core_plugins/metrics/public/components/yes_no.js
View file

@ -19,16 +19,20 @@ function YesNo(props) {
name={inputName}
checked={Boolean(value)}
value="yes"
onChange={handleChange(1)}/>
Yes</label>
onChange={handleChange(1)}
/>
Yes
</label>
<label>
<input
type="radio"
name={inputName}
checked={!Boolean(value)}
value="no"
onChange={handleChange(0)}/>
No</label>
onChange={handleChange(0)}
/>
No
</label>
</div>
);
}

16
src/core_plugins/metrics/public/visualizations/components/annotation.js
View file

@ -18,8 +18,11 @@ class Annotation extends Component {
const reversed = this.props.reversed ? '-reversed' : '';
const messages = messageSource.map((message, i) => {
return (
<div key={`${message}-${i}`}
className="annotation__message">{ message }</div>
<div
key={`${message}-${i}`}
className="annotation__message"
>{ message }
</div>
);
});
return (
@ -28,7 +31,7 @@ class Annotation extends Component {
<div className={`annotation__timestamp${reversed}`}>{ moment(timestamp).format('lll') }</div>
{ messages }
</div>
<div className={`annotation__caret${reversed}`}></div>
<div className={`annotation__caret${reversed}`} />
</div>
);
}
@ -60,12 +63,13 @@ class Annotation extends Component {
});
return(
<div className="annotation" style={style.container}>
<div className="annotation__line" style={style.line}></div>
<div className="annotation__line" style={style.line} />
<div
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
className="annotation__icon">
<i className={`fa ${icon}`} style={style.icon}></i>
className="annotation__icon"
>
<i className={`fa ${icon}`} style={style.icon} />
{ tooltip }
</div>
</div>

6
src/core_plugins/metrics/public/visualizations/components/flot_chart.js
View file

@ -259,10 +259,12 @@ class FlotChart extends Component {
<Resize
onResize={this.handleResize}
ref={(el) => this.resize = el}
className="rhythm_chart__timeseries-container">
className="rhythm_chart__timeseries-container"
>
<div
ref={(el) => this.target = el}
className="rhythm_chart__timeseries-container" />
className="rhythm_chart__timeseries-container"
/>
</Resize>
);
}

25
src/core_plugins/metrics/public/visualizations/components/gauge.js
View file

@ -92,14 +92,19 @@ class Gauge extends Component {
<div
className="thorHalfGauge__metrics"
ref={(el) => this.inner = el}
style={styles.inner}>
style={styles.inner}
>
<div
className="thorHalfGauge__label"
ref="title">{ title }</div>
ref="title"
>{ title }
</div>
<div
className="thorHalfGauge__value"
style={styles.value}
ref="label">{ formatter(value) }</div>
ref="label"
>{ formatter(value) }
</div>
</div>
);
} else {
@ -107,14 +112,19 @@ class Gauge extends Component {
<div
className="thorCircleGauge__metrics"
ref={(el) => this.inner = el}
style={styles.inner}>
style={styles.inner}
>
<div
className="thorCircleGauge__value"
style={styles.value}
ref="label">{ formatter(value) }</div>
ref="label"
>{ formatter(value) }
</div>
<div
className="thorCircleGauge__label"
ref="title">{ title }</div>
ref="title"
>{ title }
</div>
</div>
);
}
@ -124,7 +134,8 @@ class Gauge extends Component {
<div className={className}>
<div
ref={(el) => this.resize = el}
className={`${className}__resize`}>
className={`${className}__resize`}
>
{ metrics }
<GaugeVis {...gaugeProps}/>
</div>

3
src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
View file

@ -137,7 +137,8 @@ class GaugeVis extends Component {
return (
<div
ref={(el) => this.resize = el}
style={styles.resize}>
style={styles.resize}
>
<div style={styles.svg} ref={(el) => this.inner = el}>
{svg}
</div>

3
src/core_plugins/metrics/public/visualizations/components/metric.js
View file

@ -120,7 +120,8 @@ class Metric extends Component {
<div className="rhythm_metric" style={styles.container}>
<div
ref={(el) => this.resize = el}
className="rhythm_metric__resize">
className="rhythm_metric__resize"
>
<div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
<div className="rhythm_metric__primary">
{ primaryLabel }

3
src/core_plugins/metrics/public/visualizations/components/resize.js
View file

@ -48,7 +48,8 @@ class Resize extends Component {
<div
style={style}
className={className}
ref={(el) => this.el = el} >
ref={(el) => this.el = el}
>
{this.props.children}
</div>
);

6
src/core_plugins/metrics/public/visualizations/components/timeseries.js
View file

@ -132,7 +132,8 @@ class Timeseries extends Component {
tickFormatter={this.props.tickFormatter}
options={this.props.options}
xaxisLabel={this.props.xaxisLabel}
yaxes={this.props.yaxes} />
yaxes={this.props.yaxes}
/>
</div>
<Legend
legendPosition={this.props.legendPosition}
@ -142,7 +143,8 @@ class Timeseries extends Component {
showLegend={this.state.showLegend}
seriesValues={this.state.values}
seriesFilter={this.state.show}
tickFormatter={this.props.tickFormatter} />
tickFormatter={this.props.tickFormatter}
/>
</div>
</div>
);

9
src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
View file

@ -87,7 +87,8 @@ class TimeseriesChart extends Component {
key={annotation.key}
icon={annotation.icon}
reversed={this.props.reversed}
color={annotation.color}/>
color={annotation.color}
/>
);
}
@ -163,18 +164,18 @@ class TimeseriesChart extends Component {
const value = item.datapoint[2] ? item.datapoint[1] - item.datapoint[2] : item.datapoint[1];
tooltip = (
<div style={styles.tooltipContainer}>
<i className="fa fa-caret-left" style={styles.leftCaret}></i>
<i className="fa fa-caret-left" style={styles.leftCaret} />
<div style={styles.tooltip}>
<div style={styles.items}>
<div style={styles.icon}>
<i className="fa fa-circle" style={{ color: item.series.color }}></i>
<i className="fa fa-circle" style={{ color: item.series.color }} />
</div>
<div style={styles.text}>{ item.series.label }</div>
<div style={styles.value}>{ formatter(value) }</div>
</div>
<div style={styles.date}>{ moment(item.datapoint[0]).format('ll LTS') }</div>
</div>
<i className="fa fa-caret-right" style={styles.rightCaret}></i>
<i className="fa fa-caret-right" style={styles.rightCaret} />
</div>
);
}

12
src/core_plugins/metrics/public/visualizations/components/top_n.js
View file

@ -35,13 +35,17 @@ class TopN extends Component {
}
}, this.props);
return (
<tr key={key}
<tr
key={key}
onClick={this.handleClick({ lastValue, ...item })}
style={styles.row}>
style={styles.row}
>
<td width="1*" className="rhythm_top_n__label">{ item.label }</td>
<td width="100%" className="rhythm_top_n__bar">
<div className="rhythm_top_n__inner-bar"
style={styles.innerBar}/>
<div
className="rhythm_top_n__inner-bar"
style={styles.innerBar}
/>
</td>
<td width="1*" className="rhythm_top_n__value">{ value }</td>
</tr>

5
src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
View file

@ -17,9 +17,10 @@ export default props => (row, i) => {
<div
className={ classes.join(' ') }
onClick={ event => props.onToggle(event, row.id) }
key={ key }>
key={ key }
>
<div className="rhythm_chart__legend_label">
<i className="fa fa-circle" style={{ color: row.color }}></i>
<i className="fa fa-circle" style={{ color: row.color }} />
<span>{ row.label }</span>
</div>
<div className="rhythm_chart__legend_value">{ value }</div>

8
ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap
View file

@ -7,7 +7,7 @@ exports[`KuiCollapseButton Props direction down renders the down class 1`] = `
data-test-subj="test subject string"
type="button"
>
<div
<span
class="kuiIcon fa-chevron-circle-down"
/>
</button>
@ -20,7 +20,7 @@ exports[`KuiCollapseButton Props direction left renders the left class 1`] = `
data-test-subj="test subject string"
type="button"
>
<div
<span
class="kuiIcon fa-chevron-circle-left"
/>
</button>
@ -33,7 +33,7 @@ exports[`KuiCollapseButton Props direction right renders the right class 1`] = `
data-test-subj="test subject string"
type="button"
>
<div
<span
class="kuiIcon fa-chevron-circle-right"
/>
</button>
@ -46,7 +46,7 @@ exports[`KuiCollapseButton Props direction up renders the up class 1`] = `
data-test-subj="test subject string"
type="button"
>
<div
<span
class="kuiIcon fa-chevron-circle-up"
/>
</button>

16
ui_framework/components/collapse_button/collapse_button.js
View file

@ -21,13 +21,15 @@ const KuiCollapseButton = ({ className, direction, ...rest }) => {
const classes = classNames('kuiCollapseButton', className);
const childClasses = classNames('kuiIcon', directionToClassNameMap[direction]);
return (<button
type="button"
className={classes}
{...rest}
>
<div className={childClasses}/>
</button>);
return (
<button
type="button"
className={classes}
{...rest}
>
<span className={childClasses} />
</button>
);
};
KuiCollapseButton.propTypes = {

4
ui_framework/components/empty_table_prompt/empty_table_prompt.test.js
View file

@ -12,7 +12,7 @@ import {
} from '../button';
test('renders KuiEmptyTablePrompt', () => {
const component = <KuiEmptyTablePrompt
const component = (<KuiEmptyTablePrompt
actions={
<KuiLinkButton
icon={<KuiButtonIcon type="create"/>}
@ -26,6 +26,6 @@ test('renders KuiEmptyTablePrompt', () => {
}
message="Uh oh, You have no items!"
{ ...requiredProps }
/>;
/>);
expect(render(component)).toMatchSnapshot();
});

2
ui_framework/components/info_button/info_button.js
View file

@ -9,7 +9,7 @@ const KuiInfoButton = props => {
return (
<button className={iconClasses} {...props}>
<span className='kuiIcon fa-info-circle'></span>
<span className='kuiIcon fa-info-circle' />
</button>
);
};

10
ui_framework/components/pager/pager.js
View file

@ -22,11 +22,11 @@ export function KuiPager({
(startNumber === 1 && endNumber === totalItems)
? null
: <KuiPagerButtonGroup
hasNext={hasNextPage}
hasPrevious={hasPreviousPage}
onNext={onNextPage}
onPrevious={onPreviousPage}
/>
hasNext={hasNextPage}
hasPrevious={hasPreviousPage}
onNext={onNextPage}
onPrevious={onPreviousPage}
/>
}
</div>
);

25
ui_framework/components/pager/pager.test.js
View file

@ -16,7 +16,7 @@ beforeEach(() => {
});
test('renders KuiPager', () => {
const component = <KuiPager
const component = (<KuiPager
hasPreviousPage={false}
hasNextPage={true}
onPreviousPage={onPreviousPage}
@ -24,49 +24,53 @@ test('renders KuiPager', () => {
startNumber={1}
endNumber={10}
totalItems={20}
{ ...requiredProps }/>;
{ ...requiredProps }
/>);
expect(render(component)).toMatchSnapshot();
});
describe('property', () => {
describe('hasPreviousPage', () => {
test('disables previous button when false', () => {
const component = <KuiPager
const component = (<KuiPager
hasPreviousPage={false}
hasNextPage={true}
onPreviousPage={onPreviousPage}
onNextPage={onNextPage}
startNumber={1}
endNumber={10}
totalItems={20}/>;
totalItems={20}
/>);
expect(render(component)).toMatchSnapshot();
});
});
describe('hasNextPage', () => {
test('disables next button when false', () => {
const component = <KuiPager
const component = (<KuiPager
hasPreviousPage={true}
hasNextPage={false}
onPreviousPage={onPreviousPage}
onNextPage={onNextPage}
startNumber={1}
endNumber={10}
totalItems={20}/>;
totalItems={20}
/>);
expect(render(component)).toMatchSnapshot();
});
});
describe('onPreviousPage', () => {
test('is called when clicked', () => {
const component = <KuiPager
const component = (<KuiPager
hasPreviousPage={true}
hasNextPage={true}
onPreviousPage={onPreviousPage}
onNextPage={onNextPage}
startNumber={1}
endNumber={10}
totalItems={20}/>;
totalItems={20}
/>);
const pager = mount(component);
pager.find('[data-test-subj="pagerPreviousButton"]').simulate('click');
sinon.assert.calledOnce(onPreviousPage);
@ -76,14 +80,15 @@ describe('property', () => {
describe('onNextPage', () => {
test('is called when clicked', () => {
const component = <KuiPager
const component = (<KuiPager
hasPreviousPage={true}
hasNextPage={true}
onPreviousPage={onPreviousPage}
onNextPage={onNextPage}
startNumber={1}
endNumber={10}
totalItems={20}/>;
totalItems={20}
/>);
const pager = mount(component);
pager.find('[data-test-subj="pagerNextButton"]').simulate('click');
sinon.assert.calledOnce(onNextPage);

29
ui_framework/components/pager/pager_button_group.test.js
View file

@ -16,12 +16,13 @@ beforeEach(() => {
});
test('renders KuiPagerButtonGroup', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={true}
{ ...requiredProps }/>;
{ ...requiredProps }
/>);
expect(render(component)).toMatchSnapshot();
});
@ -36,12 +37,12 @@ describe('property', () => {
}
test('onNext', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={true}
/>;
/>);
const pager = mount(component);
findNextButton(pager).simulate('click');
sinon.assert.calledOnce(onNext);
@ -49,12 +50,12 @@ describe('property', () => {
});
test('onPrevious', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={true}
/>;
/>);
const pager = mount(component);
findPreviousButton(pager).simulate('click');
sinon.assert.calledOnce(onPrevious);
@ -63,24 +64,24 @@ describe('property', () => {
describe('hasNext', () => {
test('is enabled when true', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={true}
/>;
/>);
const pager = mount(component);
const isDisabled = findNextButton(pager).prop('disabled');
expect(isDisabled).toBe(false);
});
test('is disabled when false', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={false}
hasPrevious={true}
/>;
/>);
const pager = mount(component);
const isDisabled = findNextButton(pager).prop('disabled');
expect(isDisabled).toBe(true);
@ -89,24 +90,24 @@ describe('property', () => {
describe('hasPrevious', () => {
test('is enabled when true', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={true}
/>;
/>);
const pager = mount(component);
const isDisabled = findPreviousButton(pager).prop('disabled');
expect(isDisabled).toBe(false);
});
test('is disabled when false', () => {
const component = <KuiPagerButtonGroup
const component = (<KuiPagerButtonGroup
onNext={onNext}
onPrevious={onPrevious}
hasNext={true}
hasPrevious={false}
/>;
/>);
const pager = mount(component);
const isDisabled = findPreviousButton(pager).prop('disabled');
expect(isDisabled).toBe(true);

2
ui_framework/components/table/table_row_cell.test.js
View file

@ -7,6 +7,6 @@ import {
} from './table_row_cell';
test('renders KuiTableRowCell', () => {
const component = <KuiTableRowCell { ...requiredProps }></KuiTableRowCell>;
const component = <KuiTableRowCell { ...requiredProps } />;
expect(render(component)).toMatchSnapshot();
});

21
ui_framework/components/table/table_row_check_box_cell.js
View file

@ -5,14 +5,19 @@ import { KuiTableRowCell } from './table_row_cell';
export const KuiTableRowCheckBoxCell = ({ onChange, isChecked, className, ...rest }) => {
const classes = classNames('kuiTableRowCell--checkBox', className);
return <KuiTableRowCell className={ classes } {...rest} >
<input
type="checkbox"
className="kuiCheckBox"
onChange={ onChange }
checked={ isChecked }
/>
</KuiTableRowCell>;
return (
<KuiTableRowCell
className={ classes }
{...rest}
>
<input
type="checkbox"
className="kuiCheckBox"
onChange={ onChange }
checked={ isChecked }
/>
</KuiTableRowCell>
);
};
KuiTableRowCheckBoxCell.propTypes = {
isChecked: PropTypes.bool,

2
ui_framework/components/table/table_row_check_box_cell.test.js
View file

@ -7,6 +7,6 @@ import {
} from './table_row_check_box_cell';
test('renders KuiTableRowCheckBoxCell', () => {
const component = <KuiTableRowCheckBoxCell { ...requiredProps }></KuiTableRowCheckBoxCell>;
const component = <KuiTableRowCheckBoxCell { ...requiredProps } />;
expect(render(component)).toMatchSnapshot();
});

29
ui_framework/components/tool_bar/tool_bar_search_box.js
View file

@ -6,19 +6,24 @@ export function KuiToolBarSearchBox({ filter, onFilter, placeholder, className,
onFilter(event.target.value);
}
const classes = classNames('kuiToolBarSearch', className);
return <div className={ classes } { ...rest } >
<div className="kuiToolBarSearchBox">
<div className="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
<input
className="kuiToolBarSearchBox__input"
type="text"
placeholder={ placeholder }
aria-label="Filter"
defaultValue={ filter }
onChange={ onChange }
/>
return (
<div
className={ classes }
{ ...rest }
>
<div className="kuiToolBarSearchBox">
<div className="kuiToolBarSearchBox__icon kuiIcon fa-search" />
<input
className="kuiToolBarSearchBox__input"
type="text"
placeholder={ placeholder }
aria-label="Filter"
defaultValue={ filter }
onChange={ onChange }
/>
</div>
</div>
</div>;
);
}
KuiToolBarSearchBox.propTypes = {

4
ui_framework/doc_site/src/components/guide_nav/guide_nav.js
View file

@ -61,7 +61,7 @@ export class GuideNav extends Component {
className={previousClasses}
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
>
<span className="fa fa-angle-left"></span>
<span className="fa fa-angle-left" />
</Link>
);
@ -74,7 +74,7 @@ export class GuideNav extends Component {
className={nextClasses}
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
>
<span className="fa fa-angle-right"></span>
<span className="fa fa-angle-right" />
</Link>
);

2
ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
View file

@ -19,7 +19,7 @@ export class GuideSandboxCodeToggle extends Component {
className="guideSandboxCodeToggle guideSection__sourceButton"
onClick={this.onClickSource}
>
<span className="fa fa-code"></span>
<span className="fa fa-code" />
</button>
);
}

2
ui_framework/doc_site/src/components/guide_section/guide_section.js
View file

@ -41,7 +41,7 @@ export class GuideSection extends Component {
className="guideSection__sourceButton"
onClick={this.onClickSource}
>
<span className="fa fa-code"></span>
<span className="fa fa-code" />
</button>
</div>

82
ui_framework/doc_site/src/views/action_item/action_items_in_menu.js
View file

@ -7,56 +7,56 @@ import {
} from '../../../../components';
export default () => (
<KuiMenu contained>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item A</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
<KuiMenu contained>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item A</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item B</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item B</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item C</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item C</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</KuiMenu>
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</KuiMenu>
);

2
ui_framework/doc_site/src/views/bar/bar.js
View file

@ -18,5 +18,5 @@ export default () => (
<input className="kuiTextInput" size="2" value="10" readOnly/>
<div>pages</div>
</KuiBarSection>
</KuiBar>
</KuiBar>
);

20
ui_framework/doc_site/src/views/bar/bar_one_section.js
View file

@ -7,16 +7,16 @@ import {
} from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<div className="kuiButtonGroup">
<KuiButton buttonType="basic">
<KuiBar>
<KuiBarSection>
<div className="kuiButtonGroup">
<KuiButton buttonType="basic">
See previous 10 pages
</KuiButton>
<KuiButton buttonType="basic">
</KuiButton>
<KuiButton buttonType="basic">
See next 10 pages
</KuiButton>
</div>
</KuiBarSection>
</KuiBar>
</KuiButton>
</div>
</KuiBarSection>
</KuiBar>
);

50
ui_framework/doc_site/src/views/bar/bar_three_sections.js
View file

@ -8,37 +8,37 @@ import {
} from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<div className="kuiTitle">
<KuiBar>
<KuiBarSection>
<div className="kuiTitle">
The Great American Novel
</div>
</KuiBarSection>
</div>
</KuiBarSection>
<KuiBarSection>
<KuiButtonGroup>
<KuiButton buttonType="basic">
<KuiBarSection>
<KuiButtonGroup>
<KuiButton buttonType="basic">
Create new page
</KuiButton>
<KuiButton buttonType="danger">
</KuiButton>
<KuiButton buttonType="danger">
Clear all pages
</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
<KuiBarSection>
<div>Limit to</div>
<input className="kuiTextInput" size="2" value="10" readOnly/>
<div>pages</div>
<KuiBarSection>
<div>Limit to</div>
<input className="kuiTextInput" size="2" value="10" readOnly/>
<div>pages</div>
<KuiButtonGroup>
<KuiButton buttonType="basic">
<KuiButtonGroup>
<KuiButton buttonType="basic">
Undo
</KuiButton>
<KuiButton buttonType="basic">
</KuiButton>
<KuiButton buttonType="basic">
Redo
</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
</KuiBar>
</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
</KuiBar>
);

6
ui_framework/doc_site/src/views/button/button_elements.js
View file

@ -17,7 +17,8 @@ export default () => (
<form onSubmit={e => {
e.preventDefault();
window.alert('Submit');
}}>
}}
>
<KuiSubmitButton buttonType="basic">
Submit input element
</KuiSubmitButton>
@ -27,7 +28,8 @@ export default () => (
<form onSubmit={e => {
e.preventDefault();
window.alert('Submit');
}}>
}}
>
<KuiSubmitButton buttonType="basic" disabled>
Submit input element, disabled
</KuiSubmitButton>

2
ui_framework/doc_site/src/views/card/card.js
View file

@ -26,7 +26,7 @@ export default () => {
<KuiLinkButton
buttonType="basic"
href="#"
>
>
Banana!
</KuiLinkButton>
</KuiCardFooter>

4
ui_framework/doc_site/src/views/card/card_group.js
View file

@ -37,7 +37,7 @@ export default () => {
<KuiLinkButton
buttonType="basic"
href="#"
>
>
Banana!
</KuiLinkButton>
</KuiCardFooter>
@ -106,7 +106,7 @@ export default () => {
<KuiLinkButton
buttonType="basic"
href="#"
>
>
Banana!
</KuiLinkButton>
</KuiCardFooter>

24
ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js
View file

@ -4,19 +4,19 @@ import { KuiEmptyTablePrompt, KuiLinkButton, KuiButtonIcon } from '../../../../c
export function EmptyTablePrompt() {
return (
<KuiEmptyTablePrompt
actions={
<KuiLinkButton
icon={<KuiButtonIcon type="create"/>}
aria-label="Add a new item"
data-test-subj="addNewPromptButton"
buttonType="primary"
href="#"
>
<KuiEmptyTablePrompt
actions={
<KuiLinkButton
icon={<KuiButtonIcon type="create"/>}
aria-label="Add a new item"
data-test-subj="addNewPromptButton"
buttonType="primary"
href="#"
>
Add a new item
</KuiLinkButton>
</KuiLinkButton>
}
message="Uh oh, You have no items!"
/>
message="Uh oh, You have no items!"
/>
);
}

10
ui_framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js
View file

@ -43,11 +43,11 @@ export function ControlledTableWithEmptyPrompt() {
</KuiLinkButton>
<KuiLinkButton
icon={<KuiButtonIcon type="create"/>}
aria-label="Add a new visualization"
data-test-subj="addNewVizPromptButton"
buttonType="primary"
href="#"
icon={<KuiButtonIcon type="create"/>}
aria-label="Add a new visualization"
data-test-subj="addNewVizPromptButton"
buttonType="primary"
href="#"
>
Add a new visualization
</KuiLinkButton>

2
ui_framework/doc_site/src/views/event/event.js
View file

@ -11,7 +11,7 @@ import {
export default () => (
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning"></span>
<span className="kuiIcon kuiIcon--error fa-warning" />
</KuiEventSymbol>
<KuiEventBody>

6
ui_framework/doc_site/src/views/event/event_menu.js
View file

@ -15,7 +15,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning"></span>
<span className="kuiIcon kuiIcon--error fa-warning" />
</KuiEventSymbol>
<KuiEventBody>
@ -33,7 +33,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning"></span>
<span className="kuiIcon kuiIcon--error fa-warning" />
</KuiEventSymbol>
<KuiEventBody>
@ -51,7 +51,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--warning fa-bolt"></span>
<span className="kuiIcon kuiIcon--warning fa-bolt" />
</KuiEventSymbol>
<KuiEventBody>

6
ui_framework/doc_site/src/views/event/events_sandbox_content.js
View file

@ -36,7 +36,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--info fa-info"></span>
<span className="kuiIcon kuiIcon--info fa-info" />
</KuiEventSymbol>
<KuiEventBody>
@ -54,7 +54,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning"></span>
<span className="kuiIcon kuiIcon--error fa-warning" />
</KuiEventSymbol>
<KuiEventBody>
@ -72,7 +72,7 @@ export default () => (
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--warning fa-bolt"></span>
<span className="kuiIcon kuiIcon--warning fa-bolt" />
</KuiEventSymbol>
<KuiEventBody>

4
ui_framework/doc_site/src/views/form_layout/field_group.js
View file

@ -13,7 +13,7 @@ export default () => (
<KuiFieldGroup>
<KuiFieldGroupSection isWide>
<div className="kuiSearchInput">
<div className="kuiSearchInput__icon kuiIcon fa-search"></div>
<div className="kuiSearchInput__icon kuiIcon fa-search" />
<input
className="kuiSearchInput__input"
type="text"
@ -57,7 +57,7 @@ export default () => (
placeholder="http://"
type="text"
rows="5"
></textarea>
/>
</KuiFieldGroupSection>
<KuiFieldGroupSection>

24
ui_framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js
View file

@ -21,7 +21,7 @@ export default () => {
<KuiHeaderBarSection>
<span className="kuiText">
<span className="kuiStatusText kuiStatusText--error">
<span className="kuiStatusText__icon kuiIcon fa-warning"></span>
<span className="kuiStatusText__icon kuiIcon fa-warning" />
Rope Hoth
</span>
</span>
@ -34,7 +34,7 @@ export default () => {
<div className="kuiToolBar">
<div className="kuiToolBarSearch">
<div className="kuiToolBarSearchBox">
<div className="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
<div className="kuiToolBarSearchBox__icon kuiIcon fa-search" />
<input
className="kuiToolBarSearchBox__input"
type="text"
@ -49,11 +49,11 @@ export default () => {
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-gear"></span>
<span className="kuiButton__icon kuiIcon fa-gear" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-bars"></span>
<span className="kuiButton__icon kuiIcon fa-bars" />
</button>
</div>
@ -64,10 +64,10 @@ export default () => {
<div className="kuiButtonGroup kuiButtonGroup--united">
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-left"></span>
<span className="kuiButton__icon kuiIcon fa-chevron-left" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-right"></span>
<span className="kuiButton__icon kuiIcon fa-chevron-right" />
</button>
</div>
</div>
@ -109,7 +109,7 @@ export default () => {
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--success fa-check"></div>
<div className="kuiIcon kuiIcon--success fa-check" />
</div>
</td>
<td className="kuiTableRowCell">
@ -137,7 +137,7 @@ export default () => {
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--success fa-check"></div>
<div className="kuiIcon kuiIcon--success fa-check" />
</div>
</td>
<td className="kuiTableRowCell">
@ -165,7 +165,7 @@ export default () => {
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--warning fa-bolt"></div>
<div className="kuiIcon kuiIcon--warning fa-bolt" />
</div>
</td>
<td className="kuiTableRowCell">
@ -193,7 +193,7 @@ export default () => {
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--error fa-warning"></div>
<div className="kuiIcon kuiIcon--error fa-warning" />
</div>
</td>
<td className="kuiTableRowCell">
@ -225,10 +225,10 @@ export default () => {
<div className="kuiButtonGroup kuiButtonGroup--united">
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-left"></span>
<span className="kuiButton__icon kuiIcon fa-chevron-left" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-right"></span>
<span className="kuiButton__icon kuiIcon fa-chevron-right" />
</button>
</div>
</div>

2
ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.js
View file

@ -17,7 +17,7 @@ export default () => {
<KuiHeaderBarSection>
<span className="kuiText">
<span className="kuiStatusText kuiStatusText--error">
<span className="kuiStatusText__icon kuiIcon fa-warning"></span>
<span className="kuiStatusText__icon kuiIcon fa-warning" />
Red health
</span>
</span>

2
ui_framework/doc_site/src/views/info_button/info_button.js
View file

@ -6,7 +6,7 @@ import {
export default () => (
<div>
<KuiInfoButton></KuiInfoButton>
<KuiInfoButton />
</div>
);

2
ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.js
View file

@ -28,7 +28,7 @@ export function LocalNavWithBreadcrumbs() {
<div className="kuiLocalMenuItem">Save</div>
<div className="kuiLocalMenuItem">Open</div>
<button className="kuiLocalMenuItem">
<div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
<div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o" />
Last 5 minutes
</button>
</div>

Some files were not shown because too many files have changed in this diff Show more