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

* Add beta UI tags to rollup index pattern creation * Add test, update snapshots * Address feedback, adjust copy, and localize rollup index pattern creation
jen-huang · Nov 1, 2018 · e1656c8 · e1656c8
1 parent 8cd56ca
commit e1656c8
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 18 deletions.
diff --git a/...ate_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap b/...ate_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap
@@ -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],
       }

diff --git a/...ections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js b/...ections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js
@@ -24,6 +24,7 @@ import { CreateIndexPatternWizard } from '../create_index_pattern_wizard';
 const mockIndexPatternCreationType = {
   getIndexPatternType: () => 'default',
   getIndexPatternName: () => 'name',
+  getIsBeta: () => false,
   checkIndicesForErrors: () => false,
   getShowSystemIndices: () => false,
   renderPrompt: () => {},

diff --git a/...create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap b/...create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap
@@ -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

diff --git a/...t/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js b/...t/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js
@@ -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();
+  });
 });
diff --git a/...ublic/management/sections/indices/create_index_pattern_wizard/components/header/header.js b/...ublic/management/sections/indices/create_index_pattern_wizard/components/header/header.js
@@ -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">

diff --git a/...ic/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js b/...ic/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
@@ -115,6 +115,7 @@ export class CreateIndexPatternWizard extends Component {
         isIncludingSystemIndices={isIncludingSystemIndices}
         onChangeIncludingSystemIndices={this.onChangeIncludingSystemIndices}
         indexPatternName={this.indexPatternCreationType.getIndexPatternName()}
+        isBeta={this.indexPatternCreationType.getIsBeta()}
       />
     );
   }

diff --git a/.../management/sections/indices/index_pattern_list/components/create_button/create_button.js b/.../management/sections/indices/index_pattern_list/components/create_button/create_button.js
@@ -17,17 +17,20 @@
  * 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,
   EuiContextMenuItem,
   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}

diff --git a/src/ui/public/management/index_pattern_creation/index_pattern_creation_config.js b/src/ui/public/management/index_pattern_creation/index_pattern_creation_config.js
@@ -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;
   }

diff --git a/...ck/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/rollup_prompt.js b/...ck/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/rollup_prompt.js
@@ -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>
 );