Merge branch 'master' into ml-migrate-router

docs/visualize/lens.asciidoc

@@ -4,24 +4,22 @@
 
 beta[]
 
-*Lens* is a simple and fast way to create visualizations of your {es} data. With *Lens*, 
+*Lens* is a simple and fast way to create visualizations of your {es} data. To create visualizations, 
 you drag and drop your data fields onto the visualization builder pane, and *Lens* automatically generates 
 a visualization that best displays your data.
 
 With Lens, you can:
 
-* Explore your data in just a few clicks.
+* Use the automatically generated visualization suggestions to change the visualization type.
 
 * Create visualizations with multiple layers and indices.
 
-* Use the automatically generated visualization suggestions to change the visualization type.
-
 * Add your visualizations to dashboards and Canvas workpads.
 
-To get started with *Lens*, click a field in the data panel, then drag and drop the field on a highlighted area.
+To get started with *Lens*, select a field in the data panel, then drag and drop the field on a highlighted area.
 
 [role="screenshot"]
-image::images/lens_drag_drop.gif[]
+image::images/lens_drag_drop.gif[Drag and drop]
 
 You can incorporate many fields into your visualization, and Lens uses heuristics to decide how to apply each one to the visualization.
 
@@ -30,9 +28,9 @@ you can still configure the customization options for your visualization.
 
 [float]
 [[apply-lens-filters]]
-==== Filter the data panel fields
+==== Change the data panel fields
 
-The fields in the data panel based on your selected <<index-patterns, index pattern>>, and the <<set-time-filter,time filter>>. 
+The fields in the data panel are based on the selected <<index-patterns, index pattern>> and <<set-time-filter,time filter>>. 
 
 To change the index pattern, click it, then select a new one. The fields in the data panel automatically update.
 
@@ -46,12 +44,12 @@ To filter the fields in the data panel:
 [[view-data-summaries]]
 ==== Data summaries
 
-To help you decide exactly the data you want to display, get a quick summary of each field. The summary shows the distribution of values in the time range.
+To help you decide exactly the data you want to display, get a quick summary of each field. The summary shows the distribution of values within the selected time range.
 
 To view the field summary information, navigate to the field, then click *i*.
 
 [role="screenshot"]
-image::images/lens_data_info.png[]
+image::images/lens_data_info.png[Data summary window]
 
 [float]
 [[change-the-visualization-type]]
@@ -62,7 +60,7 @@ image::images/lens_data_info.png[]
 *Suggestions* are shortcuts to alternate visualizations that *Lens* generates for you.
 
 [role="screenshot"]
-image::images/lens_suggestions.gif[]
+image::images/lens_suggestions.gif[Visualization suggestions]
 
 If you'd like to use a visualization type that is not suggested, click the visualization type,
 then select a new one. 
@@ -78,19 +76,30 @@ still allows you to make the change.
 [[customize-operation]]
 ==== Change the aggregation and labels
 
-Lens allows some customizations of the data for each visualization.
+For each visualization, Lens allows some customizations of the data.
 
 . Click *Drop a field here* or the field name in the column.
 
-. Change the options that appear depending on the type of field.
+. Change the options that appear. Options vary depending on the type of field.
++
+[role="screenshot"]
+image::images/lens_aggregation_labels.png[Quick function options]
 
 [float]
 [[layers]]
 ==== Add layers and indices
 
-Bar, line, and area charts allow you to visualize multiple data layers and indices so that you can compare and analyze data from multiple sources.
+Area, line, and bar charts allow you to visualize multiple data layers and indices so that you can compare and analyze data from multiple sources.
+
+To add a layer, click *+*, then drag and drop the fields for the new layer. 
+
+[role="screenshot"]
+image::images/lens_layers.png[Add layers]
+
+To view a different index, click it, then select a new one.
 
-To add a layer, click *+*, then drag and drop the fields for the new layer. To view a different index, click it, then select a new one.
+[role="screenshot"]
+image::images/lens_index_pattern.png[Add index pattern]
 
 [float]
 [[lens-tutorial]]
@@ -110,8 +119,6 @@ To start, you'll need to add the <<add-sample-data, sample ecommerce data>>.
 
 Drag and drop your data onto the visualization builder pane.
 
-. Open *Lens*.
-
 . Select the *kibana_sample_data_ecommerce* index pattern.
 
 . Click image:images/time-filter-calendar.png[], then click *Last 7 days*. 
@@ -138,16 +145,19 @@ image::images/lens_tutorial_2.png[Lens tutorial]
 
 Make your visualization look exactly how you want with the customization options.
 
-. Click *Average of taxful_total_price*.
-
-.. Change the *Label* to `Sales`.
-
-. Click *Top values of category.keyword*.
+. Click *Average of taxful_total_price*, then change the *Label* to `Sales`.
++
+[role="screenshot"]
+image::images/lens_tutorial_3.1.png[Lens tutorial]
 
-.. Change *Number of values* to `10`. The visualization updates to show there are only
-six available categories.
+. Click *Top values of category.keyword*, then change *Number of values* to `10`.
++
+[role="screenshot"]
+image::images/lens_tutorial_3.2.png[Lens tutorial]
++
+The visualization updates to show there are only six available categories.
 +
-Look at the *Suggestions*. An area chart is not an option, but for sales data, a stacked area chart might be the best option.
+Look at the *Suggestions*. An area chart is not an option, but for the sales data, a stacked area chart might be the best option.
 
 . To switch the chart type, click *Stacked bar chart* in the column, then click *Stacked area* from the *Select a visualizations* window.
 +

packages/kbn-storybook/package.json

@@ -6,14 +6,14 @@
   "dependencies": {
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
-    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-info": "^5.2.8",
-    "@storybook/addon-knobs": "^5.2.8",
-    "@storybook/addon-options": "^5.2.8",
-    "@storybook/addon-storyshots": "^5.2.8",
-    "@storybook/react": "^5.2.8",
-    "@storybook/theming": "^5.2.8",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-options": "^5.3.19",
+    "@storybook/addon-storyshots": "^5.3.19",
+    "@storybook/react": "^5.3.19",
+    "@storybook/theming": "^5.3.19",
     "copy-webpack-plugin": "^6.0.2",
     "fast-glob": "2.2.7",
     "glob-watcher": "5.0.3",

test/functional/apps/discover/_errors.js

@@ -22,21 +22,21 @@ import expect from '@kbn/expect';
 export default function ({ getService, getPageObjects }) {
   const esArchiver = getService('esArchiver');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'discover']);
+  const PageObjects = getPageObjects(['common', 'discover', 'timePicker']);
 
   describe('errors', function describeIndexTests() {
     before(async function () {
       await esArchiver.loadIfNeeded('logstash_functional');
       await esArchiver.load('invalid_scripted_field');
+      await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
       await PageObjects.common.navigateToApp('discover');
     });
 
     after(async function () {
       await esArchiver.unload('invalid_scripted_field');
     });
 
-    // ES issue https://github.com/elastic/elasticsearch/issues/54235
-    describe.skip('invalid scripted field error', () => {
+    describe('invalid scripted field error', () => {
       it('is rendered', async () => {
         const isFetchErrorVisible = await testSubjects.exists('discoverFetchError');
         expect(isFetchErrorVisible).to.be(true);

x-pack/package.json

@@ -37,12 +37,13 @@
     "@kbn/storybook": "1.0.0",
     "@kbn/test": "1.0.0",
     "@kbn/utility-types": "1.0.0",
-    "@storybook/addon-actions": "^5.2.6",
+    "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-knobs": "^5.2.6",
-    "@storybook/addon-storyshots": "^5.2.6",
-    "@storybook/react": "^5.2.6",
-    "@storybook/theming": "^5.2.6",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-storyshots": "^5.3.19",
+    "@storybook/react": "^5.3.19",
+    "@storybook/theming": "^5.3.19",
     "@testing-library/react": "^9.3.2",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/jest-dom": "^5.8.0",

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -40,6 +40,9 @@ const testBedConfig: TestBedConfig = {
     initialEntries: [`/policies/edit/${POLICY_NAME}`],
     componentRoutePath: `/policies/edit/:policyName`,
   },
+  defaultProps: {
+    getUrlForApp: () => {},
+  },
 };
 
 const initTestBed = registerTestBed(EditPolicy, testBedConfig);

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js

@@ -120,7 +120,7 @@ describe('edit policy', () => {
     store = indexLifecycleManagementStore();
     component = (
       <Provider store={store}>
-        <EditPolicy />
+        <EditPolicy getUrlForApp={() => {}} />
       </Provider>
     );
     store.dispatch(fetchedPolicies(policies));
@@ -155,7 +155,7 @@ describe('edit policy', () => {
     test('should show error when trying to save as new policy but using the same name', () => {
       component = (
         <Provider store={store}>
-          <EditPolicy match={{ params: { policyName: 'testy0' } }} />
+          <EditPolicy match={{ params: { policyName: 'testy0' } }} getUrlForApp={() => {}} />
         </Provider>
       );
       const rendered = mountWithIntl(component);

x-pack/plugins/index_lifecycle_management/public/application/app.tsx

@@ -17,9 +17,11 @@ import { trackUiMetric } from './services/ui_metric';
 export const App = ({
   history,
   navigateToApp,
+  getUrlForApp,
 }: {
   history: ScopedHistory;
   navigateToApp: ApplicationStart['navigateToApp'];
+  getUrlForApp: ApplicationStart['getUrlForApp'];
 }) => {
   useEffect(() => trackUiMetric(METRIC_TYPE.LOADED, UIM_APP_LOAD), []);
 
@@ -32,7 +34,10 @@ export const App = ({
           path={`/policies`}
           render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
         />
-        <Route path={`/policies/edit/:policyName?`} component={EditPolicy} />
+        <Route
+          path={`/policies/edit/:policyName?`}
+          render={(props) => <EditPolicy {...props} getUrlForApp={getUrlForApp} />}
+        />
       </Switch>
     </Router>
   );

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -17,12 +17,13 @@ export const renderApp = (
   element: Element,
   I18nContext: I18nStart['Context'],
   history: ScopedHistory,
-  navigateToApp: ApplicationStart['navigateToApp']
+  navigateToApp: ApplicationStart['navigateToApp'],
+  getUrlForApp: ApplicationStart['getUrlForApp']
 ): UnmountCallback => {
   render(
     <I18nContext>
       <Provider store={indexLifecycleManagementStore()}>
-        <App history={history} navigateToApp={navigateToApp} />
+        <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
       </Provider>
     </I18nContext>,
     element

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.js

@@ -123,6 +123,7 @@ export class DeletePhase extends PureComponent {
               <SnapshotPolicies
                 value={phaseData[PHASE_WAIT_FOR_SNAPSHOT_POLICY]}
                 onChange={(value) => setPhaseData(PHASE_WAIT_FOR_SNAPSHOT_POLICY, value)}
+                getUrlForApp={this.props.getUrlForApp}
               />
             </EuiFormRow>
           </EuiDescribedFormGroup>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/snapshot_policies.tsx

@@ -8,12 +8,14 @@ import React, { Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { ApplicationStart } from 'kibana/public';
 
 import {
   EuiButtonIcon,
   EuiCallOut,
   EuiComboBox,
   EuiComboBoxOptionOption,
+  EuiLink,
   EuiSpacer,
 } from '@elastic/eui';
 
@@ -22,8 +24,13 @@ import { useLoadSnapshotPolicies } from '../../../../services/api';
 interface Props {
   value: string;
   onChange: (value: string) => void;
+  getUrlForApp: ApplicationStart['getUrlForApp'];
 }
-export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChange }) => {
+export const SnapshotPolicies: React.FunctionComponent<Props> = ({
+  value,
+  onChange,
+  getUrlForApp,
+}) => {
   const { error, isLoading, data, sendRequest } = useLoadSnapshotPolicies();
 
   const policies = data.map((name: string) => ({
@@ -43,14 +50,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
     onChange(newValue);
   };
 
+  const getUrlForSnapshotPolicyWizard = () => {
+    return getUrlForApp('management', {
+      path: `data/snapshot_restore/add_policy`,
+    });
+  };
+
   let calloutContent;
   if (error) {
     calloutContent = (
       <Fragment>
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="policiesErrorCallout"
-          size="s"
           iconType="help"
           color="warning"
           title={
@@ -99,7 +111,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         >
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.noPoliciesCreatedMessage"
-            defaultMessage="Create a snapshot lifecycle policy to automate the creation and deletion of cluster snapshots."
+            defaultMessage="{link} to automate the creation and deletion of cluster snapshots."
+            values={{
+              link: (
+                <EuiLink href={getUrlForSnapshotPolicyWizard()} target="_blank">
+                  {i18n.translate(
+                    'xpack.indexLifecycleMgmt.editPolicy.deletePhase.noPoliciesCreatedLink',
+                    {
+                      defaultMessage: 'Create a snapshot lifecycle policy',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
           />
         </EuiCallOut>
       </Fragment>
@@ -110,7 +134,6 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="customPolicyCallout"
-          size="s"
           iconType="help"
           color="warning"
           title={
@@ -122,7 +145,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         >
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.customPolicyMessage"
-            defaultMessage="Enter the name of an existing snapshot policy, or create a new policy with this name."
+            defaultMessage="Enter the name of an existing snapshot policy, or {link} with this name."
+            values={{
+              link: (
+                <EuiLink href={getUrlForSnapshotPolicyWizard()} target="_blank">
+                  {i18n.translate(
+                    'xpack.indexLifecycleMgmt.editPolicy.deletePhase.customPolicyLink',
+                    {
+                      defaultMessage: 'create a new policy',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
           />
         </EuiCallOut>
       </Fragment>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js

@@ -308,6 +308,7 @@ export class EditPolicy extends Component {
               <DeletePhase
                 errors={errors[PHASE_DELETE]}
                 isShowingErrors={isShowingErrors && !!findFirstError(errors[PHASE_DELETE], false)}
+                getUrlForApp={this.props.getUrlForApp}
               />
 
               <EuiHorizontalRule />