[Rollups] Mark beta in rollup index pattern creation (#24805)

* Add beta UI tags to rollup index pattern creation

* Add test, update snapshots

* Address feedback, adjust copy, and localize rollup index pattern creation
This commit is contained in:
Jen Huang 2018-10-31 17:53:13 -07:00 committed by GitHub
parent 6c95237e89
commit 8491b2ee8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 176 additions and 18 deletions

View file

@ -4,6 +4,7 @@ exports[`CreateIndexPatternWizard defaults to the loading state 1`] = `
<div>
<Header
indexPatternName="name"
isBeta={false}
isIncludingSystemIndices={false}
onChangeIncludingSystemIndices={[Function]}
showSystemIndices={false}
@ -16,6 +17,7 @@ exports[`CreateIndexPatternWizard renders index pattern step when there are indi
<div>
<Header
indexPatternName="name"
isBeta={false}
isIncludingSystemIndices={false}
onChangeIncludingSystemIndices={[Function]}
showSystemIndices={false}
@ -36,6 +38,7 @@ exports[`CreateIndexPatternWizard renders index pattern step when there are indi
"getIndexPatternMappings": [Function],
"getIndexPatternName": [Function],
"getIndexPatternType": [Function],
"getIsBeta": [Function],
"getShowSystemIndices": [Function],
"renderPrompt": [Function],
}
@ -51,6 +54,7 @@ exports[`CreateIndexPatternWizard renders the empty state when there are no indi
<div>
<Header
indexPatternName="name"
isBeta={false}
isIncludingSystemIndices={false}
onChangeIncludingSystemIndices={[Function]}
showSystemIndices={false}
@ -65,6 +69,7 @@ exports[`CreateIndexPatternWizard renders time field step when step is set to 2
<div>
<Header
indexPatternName="name"
isBeta={false}
isIncludingSystemIndices={false}
onChangeIncludingSystemIndices={[Function]}
showSystemIndices={false}
@ -79,6 +84,7 @@ exports[`CreateIndexPatternWizard renders time field step when step is set to 2
"getIndexPatternMappings": [Function],
"getIndexPatternName": [Function],
"getIndexPatternType": [Function],
"getIsBeta": [Function],
"getShowSystemIndices": [Function],
"renderPrompt": [Function],
}
@ -92,6 +98,7 @@ exports[`CreateIndexPatternWizard shows system indices even if there are no othe
<div>
<Header
indexPatternName="name"
isBeta={false}
isIncludingSystemIndices={true}
onChangeIncludingSystemIndices={[Function]}
showSystemIndices={false}
@ -112,6 +119,7 @@ exports[`CreateIndexPatternWizard shows system indices even if there are no othe
"getIndexPatternMappings": [Function],
"getIndexPatternName": [Function],
"getIndexPatternType": [Function],
"getIsBeta": [Function],
"getShowSystemIndices": [Function],
"renderPrompt": [Function],
}

View file

@ -24,6 +24,7 @@ import { CreateIndexPatternWizard } from '../create_index_pattern_wizard';
const mockIndexPatternCreationType = {
getIndexPatternType: () => 'default',
getIndexPatternName: () => 'name',
getIsBeta: () => false,
checkIndicesForErrors: () => false,
getShowSystemIndices: () => false,
renderPrompt: () => {},

View file

@ -1,5 +1,74 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header should render a different name, prompt, and beta tag if provided 1`] = `
<div>
<EuiTitle
size="m"
>
<h1>
<FormattedMessage
defaultMessage="Create {indexPatternName}"
id="kbn.management.createIndexPatternHeader"
values={
Object {
"indexPatternName": "test index pattern",
}
}
/>
<React.Fragment>
<EuiBetaBadge
label="Beta"
tooltipPosition="top"
/>
</React.Fragment>
</h1>
</EuiTitle>
<EuiFlexGroup
alignItems="flexEnd"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiText
grow={true}
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
<FormattedMessage
defaultMessage="Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations."
id="kbn.management.createIndexPatternLabel"
values={Object {}}
/>
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<React.Fragment>
<EuiSpacer
size="s"
/>
<div>
Test prompt
</div>
</React.Fragment>
<EuiSpacer
size="m"
/>
</div>
`;
exports[`Header should render normally 1`] = `
<div>
<EuiTitle

View file

@ -43,4 +43,18 @@ describe('Header', () => {
expect(component).toMatchSnapshot();
});
it('should render a different name, prompt, and beta tag if provided', () => {
const component = shallow(
<Header
isIncludingSystemIndices={false}
onChangeIncludingSystemIndices={() => {}}
prompt={<div>Test prompt</div>}
indexPatternName="test index pattern"
isBeta={true}
/>
);
expect(component).toMatchSnapshot();
});
});

View file

@ -20,6 +20,7 @@
import React, { Fragment } from 'react';
import {
EuiBetaBadge,
EuiSpacer,
EuiTitle,
EuiFlexGroup,
@ -37,6 +38,7 @@ export const Header = ({
showSystemIndices,
isIncludingSystemIndices,
onChangeIncludingSystemIndices,
isBeta,
}) => (
<div>
<EuiTitle>
@ -48,6 +50,12 @@ export const Header = ({
indexPatternName
}}
/>
{ isBeta ? (
<Fragment>
{' '}
<EuiBetaBadge label="Beta" />
</Fragment>
) : null }
</h1>
</EuiTitle>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">

View file

@ -115,6 +115,7 @@ export class CreateIndexPatternWizard extends Component {
isIncludingSystemIndices={isIncludingSystemIndices}
onChangeIncludingSystemIndices={this.onChangeIncludingSystemIndices}
indexPatternName={this.indexPatternCreationType.getIndexPatternName()}
isBeta={this.indexPatternCreationType.getIsBeta()}
/>
);
}

View file

@ -17,10 +17,12 @@
* under the License.
*/
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { euiColorAccent } from '@elastic/eui/dist/eui_theme_k6_light.json';
import {
EuiBadge,
EuiButton,
EuiPopover,
EuiContextMenuPanel,
@ -28,6 +30,7 @@ import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
rgbToHex,
} from '@elastic/eui';
export class CreateButton extends Component {
@ -58,6 +61,13 @@ export class CreateButton extends Component {
});
}
renderBetaBadge = () => {
const color = rgbToHex(euiColorAccent);
return (
<EuiBadge color={color}>Beta</EuiBadge>
);
};
render() {
const { options, children } = this.props;
const { isPopoverOpen } = this.state;
@ -113,6 +123,12 @@ export class CreateButton extends Component {
<EuiDescriptionList style={{ whiteSpace: 'nowrap' }}>
<EuiDescriptionListTitle>
{option.text}
{ option.isBeta ? (
<Fragment>
{' '}
{this.renderBetaBadge()}
</Fragment>
) : null }
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{option.description}

View file

@ -26,7 +26,7 @@ const indexPatternButtonText = i18n.translate('common.ui.management.editIndexPat
{ defaultMessage: 'Standard index pattern' });
const indexPatternButtonDescription = i18n.translate('common.ui.management.editIndexPattern.createIndex.defaultButtonDescription',
{ defaultMessage: 'Can perform full aggregations against any data' });
{ defaultMessage: 'Perform full aggregations against any data' });
export class IndexPatternCreationConfig {
static key = 'default';
@ -36,11 +36,13 @@ export class IndexPatternCreationConfig {
name = indexPatternTypeName,
showSystemIndices = true,
httpClient = null,
isBeta = false,
}) {
this.type = type;
this.name = name;
this.showSystemIndices = showSystemIndices;
this.httpClient = httpClient;
this.isBeta = isBeta;
}
async getIndexPatternCreationOption(urlHandler) {
@ -62,6 +64,10 @@ export class IndexPatternCreationConfig {
return this.name;
}
getIsBeta = () => {
return this.isBeta;
}
getShowSystemIndices = () => {
return this.showSystemIndices;
}

View file

@ -12,13 +12,21 @@ import {
export const RollupPrompt = () => (
<EuiCallOut
size="s"
title={
`Rollup index patterns can match against one rollup index and zero or more
regular indices. They will have limited metrics, fields, intervals and aggregations
available based on the rollup index job configuration. The rollup index is
limited to those that have one job configuration, or multiple jobs
with the same configuration.`
}
/>
color="warning"
iconType="help"
title="Beta feature"
>
<p>
Kibana&apos;s support for rollup index patterns is in beta. You might encounter
issues using these patterns in saved searches, visualizations, and dashboards.
They are not supported in advanced features, such as Visual Builder, Timelion,
and Machine Learning.
</p>
<p>
You can match a rollup index pattern against one rollup index and zero or
more regular indices. A rollup index pattern has limited metrics, fields,
intervals, and aggregations. A rollup index is limited to indices that have
one job configuration, or multiple jobs with compatible configurations.
</p>
</EuiCallOut>
);

View file

@ -9,6 +9,25 @@ import { IndexPatternCreationConfig } from 'ui/management/index_pattern_creation
import { RollupPrompt } from './components/rollup_prompt';
import { setHttpClient, getRollupIndices } from '../services/api';
import { i18n } from '@kbn/i18n';
const rollupIndexPatternTypeName = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultTypeName',
{ defaultMessage: 'rollup index pattern' });
const rollupIndexPatternButtonText = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonText',
{ defaultMessage: 'Rollup index pattern' });
const rollupIndexPatternButtonDescription = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonDescription',
{ defaultMessage: 'Perform limited aggregations against summarized data' });
const rollupIndexPatternNoMatchError = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.noMatchError',
{ defaultMessage: 'Rollup index pattern error: must match one rollup index' });
const rollupIndexPatternTooManyMatchesError = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.tooManyMatchesError',
{ defaultMessage: 'Rollup index pattern error: can only match one rollup index' });
const rollupIndexPatternIndexLabel = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.indexLabel',
{ defaultMessage: 'Rollup' });
export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig {
static key = 'rollup';
@ -16,8 +35,9 @@ export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig
constructor(options) {
super({
type: 'rollup',
name: 'rollup index pattern',
name: rollupIndexPatternTypeName,
showSystemIndices: false,
isBeta: true,
...options,
});
@ -37,9 +57,10 @@ export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig
async getIndexPatternCreationOption(urlHandler) {
await this.settingUp;
return this.rollupIndices && this.rollupIndices.length ? {
text: `Rollup index pattern`,
description: `Can perform limited aggregations against summarized data`,
text: rollupIndexPatternButtonText,
description: rollupIndexPatternButtonDescription,
testSubj: `createRollupIndexPatternButton`,
isBeta: this.isBeta,
onClick: () => {
urlHandler('/management/kibana/index?type=rollup');
},
@ -53,7 +74,7 @@ export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig
getIndexTags(indexName) {
return this.isRollupIndex(indexName) ? [{
key: this.type,
name: 'Rollup',
name: rollupIndexPatternIndexLabel,
}] : [];
}
@ -67,16 +88,22 @@ export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig
const rollupIndices = indices.filter(index => this.isRollupIndex(index.name));
if(!rollupIndices.length) {
return ['Rollup index error: must match one rollup index'];
return [rollupIndexPatternNoMatchError];
} else if(rollupIndices.length > 1) {
return ['Rollup index error: can only match one rollup index'];
return [rollupIndexPatternTooManyMatchesError];
}
const rollupIndexName = rollupIndices[0].name;
const error = this.rollupIndicesCapabilities[rollupIndexName].error;
if(error) {
return [`Rollup index error: ${error}`];
const errorMessage = i18n.translate('xpack.rollupJobs.editRollupIndexPattern.createIndex.uncaughtError', {
defaultMessage: 'Rollup index pattern error: {error}',
values: {
error
}
});
return [errorMessage];
}
this.rollupIndex = rollupIndexName;