Merge remote-tracking branch 'upstream/master' into 56704

docs/user/visualize.asciidoc

@@ -53,9 +53,9 @@ data sets.
 
 * *<<for-dashboard,Dashboard tools>>*
 [horizontal]
-<<for-dashboard,Controls>>:: Provides the ability to add interactive inputs to a Dashboard.
+Controls:: Adds interactive inputs to a Dashboard.
 
-<<for-dashboard,Markdown widget>>:: Display free-form information or instructions.
+Markdown widget:: Display free-form information or instructions.
 
 * *For developers*
 [horizontal]

docs/visualize/for-dashboard.asciidoc

@@ -1,117 +1,51 @@
 [[for-dashboard]]
-== Markdown and controls
-
-[float]
-[[markdown-widget]]
-=== Markdown widget
-
-The Markdown widget is a text entry field that accepts GitHub-flavored Markdown text. Kibana renders the text you enter
-in this field and displays the results on the dashboard. You can click the *Help* link to go to the
-https://help.github.com/articles/github-flavored-markdown/[help page] for GitHub flavored Markdown. From the widget
-you can:
-
-* Click *Apply* to display the rendered text in the Preview panel
-* Click *Discard* to revert to a previously saved version
+== Dashboard tools
 
+Visualize comes with controls and Markdown tools that you can add to dashboards for an interactive experience.
 
 [float]
 [[controls]]
-=== Controls widget
+=== Controls
 experimental[]
 
-The Controls widget enables you to add interactive inputs
-to a dashboard.  You can create two types of inputs:
+The controls tool enables you to add interactive inputs
+on a dashboard.
 
-* Dropdown menu
-* Radio slider
+You can add two types of interactive inputs:
 
-[role="screenshot"]
-image::images/controls/controls_in_dashboard.png[]
+* *Options list* - Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city.
 
-[float]
-[[add-input-controls]]
-=== Add input controls
-
-To start a *Controls* visualization, open the Visualization application
-and click the *+* button. Scroll to the *Others* section and
-select *Controls*.
-
-In the visualization builder, choose the type of control to add to
-your visualization.
-
-[float]
-==== Dropdown menu
-
-A dropdown menu allows users to filter content by selecting
-one or more options from a list. The dropdown menu is dynamically populated
-with the results of a terms aggregation.
+* *Range slider* - Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price.
 
 [role="screenshot"]
-image::images/controls/dropdown_control_editor.png[]
-
-*Control Label*:: The label for the dropdown menu. By default, the
-label is the field name.
-
-*Index Pattern*:: The <<index-patterns,index pattern>> that contains
-the data set to visualize.
-
-*Field*:: The field used to populate the list of options
-and filter on when users interact with the input.
-The list of available fields is derived from the specified
-index pattern.
-
-*Parent control*:: The control for chaining dropdown menus so that the
-selection in the first menu
-filters the terms in the second menu. Only available when
-creating multiple dropdown menus.
-
-*Multiselect*:: When enabled, the dropdown menu allows users to select multiple options.
-
-*Size*:: The number of options to include in the list.
+image::images/dashboard-controls.png[]
 
 [float]
-==== Range slider
+[[markdown-widget]]
+=== Markdown
 
-A range sliders allow users to filter content within a range of numbers.
-The range slider minimum and maximum values are dynamically populated with
-the results of a min and max aggregation.
+The Markdown tool is a text entry field that accepts GitHub-flavored Markdown text. When you enter the text, the tool populates the results on the dashboard.
 
-[role="screenshot"]
-image::images/controls/range_slider_editor.png[]
+Markdown is helpful when you want to include important information, instructions, and images on your dashboard.
 
-*Control Label*:: The label for the range slider. By default, the
-label is the field name.
+For information about GitHub-flavored Markdown text, click *Help*.
 
-*Index Pattern*:: The <<index-patterns,index pattern>> that contains
-the data set to visualize.
+For example, when you enter:
 
-*Field*:: The field used to populate the range slider
-and filter on when users interact with the input.
-The list of available fields is derived from the
-specified index pattern.
-
-*Step Size*:: The increment/decrement size of the slider.
+[role="screenshot"]
+image::images/markdown_example_1.png[]
 
-*Decimal Places*:: The number of decimal places.
+The following instructions are displayed:
 
-[float]
-[[global-options]]
-=== Global options
+[role="screenshot"]
+image::images/markdown_example_2.png[]
 
-Open the *Options* tab to configure settings that apply to all input
-controls in a Controls visualization.
+Or when you enter:
 
 [role="screenshot"]
-image::images/controls/controls_options.png[]
-
-*Update Kibana filters on each change*:: When enabled, all input interactions
-immediately create filters that cause the dashboard to refresh. When disabled,
-Kibana filters are only created
-when the user clicks *Apply changes* image:images/apply-changes-button.png[].
+image::images/markdown_example_3.png[]
 
-*Use time filter*:: When enabled, the aggregations used to generate
-the dropdown options list and range minimum and maximum are bound
-to <<set-time-filter,Kibana's global time range>>.
+The following image is displayed:
 
-*Pin filters to global state*:: When enabled, all filters created by
-interacting with the inputs are automatically pinned.
+[role="screenshot"]
+image::images/markdown_example_4.png[]

docs/visualize/most-frequent.asciidoc

@@ -11,6 +11,8 @@ The most frequently used visualizations include:
 * Metric, goal, and gauge
 * Tag cloud
 
+[[metric-chart]]
+
 [float]
 [[frequently-used-viz-aggregation]]
 === Supported aggregations

src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts

@@ -24,9 +24,6 @@
  * directly where they are needed.
  */
 
-import chrome from 'ui/chrome';
-
-export const legacyChrome = chrome;
 export { SavedObjectSaveOpts } from 'ui/saved_objects/types';
 export { npSetup, npStart } from 'ui/new_platform';
 export { subscribeWithScope } from 'ui/utils/subscribe_with_scope';
@@ -37,8 +34,6 @@ export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_to
 export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url/index';
 export { IInjector } from 'ui/chrome';
 export { SavedObjectLoader } from 'ui/saved_objects';
-export { VISUALIZE_EMBEDDABLE_TYPE } from '../../../visualizations/public/embeddable';
-export { registerTimefilterWithGlobalStateFactory } from 'ui/timefilter/setup_router';
 export { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 export {
   configureAppAngularModule,

src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts

@@ -55,7 +55,6 @@ export { wrapInI18nContext } from 'ui/i18n';
 export { DashboardConstants } from '../dashboard/np_ready/dashboard_constants';
 export { VisSavedObject } from '../../../visualizations/public/embeddable/visualize_embeddable';
 export { VISUALIZE_EMBEDDABLE_TYPE } from '../../../visualizations/public/embeddable';
-export { VisType } from '../../../visualizations/public';
 export {
   configureAppAngularModule,
   ensureDefaultIndexPattern,

src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx

@@ -24,7 +24,8 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { IndexPattern } from 'src/plugins/data/public';
-import { IAggType, documentationLinks } from '../legacy_imports';
+import { useKibana } from '../../../../../plugins/kibana_react/public';
+import { IAggType } from '../legacy_imports';
 import { ComboBoxGroupedOptions } from '../utils';
 import { AGG_TYPE_ACTION_KEYS, AggTypeAction } from './agg_params_state';
 
@@ -51,6 +52,7 @@ function DefaultEditorAggSelect({
   isSubAggregation,
   onChangeAggType,
 }: DefaultEditorAggSelectProps) {
+  const { services } = useKibana();
   const selectedOptions: ComboBoxGroupedOptions<IAggType> = value
     ? [{ label: value.title, target: value }]
     : [];
@@ -69,7 +71,7 @@ function DefaultEditorAggSelect({
 
   let aggHelpLink: string | undefined;
   if (has(value, 'name')) {
-    aggHelpLink = get(documentationLinks, ['aggs', value.name]);
+    aggHelpLink = services.docLinks.links.aggs[value.name];
   }
 
   const helpLink = value && aggHelpLink && (

src/legacy/core_plugins/vis_default_editor/public/components/controls/date_ranges.test.tsx

@@ -20,10 +20,8 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DateRangesParamEditor } from './date_ranges';
-
-jest.mock('../../legacy_imports', () => ({
-  getDocLink: jest.fn(),
-}));
+import { KibanaContextProvider } from '../../../../../../plugins/kibana_react/public';
+import { docLinksServiceMock } from '../../../../../../core/public/mocks';
 
 describe('DateRangesParamEditor component', () => {
   let setValue: jest.Mock;
@@ -50,14 +48,25 @@ describe('DateRangesParamEditor component', () => {
     };
   });
 
+  function DateRangesWrapped(props: any) {
+    const services = {
+      docLinks: docLinksServiceMock.createStartContract(),
+    };
+    return (
+      <KibanaContextProvider services={services}>
+        <DateRangesParamEditor {...props} />
+      </KibanaContextProvider>
+    );
+  }
+
   it('should add default range if there is an empty ininitial value', () => {
-    mountWithIntl(<DateRangesParamEditor {...defaultProps} />);
+    mountWithIntl(<DateRangesWrapped {...defaultProps} />);
 
     expect(setValue).toHaveBeenCalledWith([{}]);
   });
 
   it('should validate range values with date math', function() {
-    const component = mountWithIntl(<DateRangesParamEditor {...defaultProps} />);
+    const component = mountWithIntl(<DateRangesWrapped {...defaultProps} />);
 
     // should allow empty values
     expect(setValidity).toHaveBeenNthCalledWith(1, true);

src/legacy/core_plugins/vis_default_editor/public/components/controls/date_ranges.tsx

@@ -37,8 +37,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { isEqual, omit } from 'lodash';
 
+import { useKibana } from '../../../../../../plugins/kibana_react/public';
 import { AggParamEditorProps } from '../agg_param_props';
-import { getDocLink } from '../../legacy_imports';
 
 const FROM_PLACEHOLDER = '\u2212\u221E';
 const TO_PLACEHOLDER = '+\u221E';
@@ -66,6 +66,7 @@ function DateRangesParamEditor({
   setValue,
   setValidity,
 }: AggParamEditorProps<DateRangeValues[]>) {
+  const { services } = useKibana();
   const [ranges, setRanges] = useState(() => value.map(range => ({ ...range, id: generateId() })));
   const hasInvalidRange = value.some(
     ({ from, to }) => (!from && !to) || !validateDateMath(from) || !validateDateMath(to)
@@ -115,7 +116,7 @@ function DateRangesParamEditor({
     <EuiFormRow compressed fullWidth>
       <>
         <EuiText size="xs">
-          <EuiLink href={getDocLink('date.dateMath')} target="_blank">
+          <EuiLink href={services.docLinks.links.date.dateMath} target="_blank">
             <FormattedMessage
               id="visDefaultEditor.controls.dateRanges.acceptedDateFormatsLinkText"
               defaultMessage="Acceptable date formats"

src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/reducers.ts

@@ -20,7 +20,7 @@
 import { cloneDeep } from 'lodash';
 
 import { Vis, VisState } from 'src/legacy/core_plugins/visualizations/public';
-import { AggConfigs, IAggConfig, AggGroupNames, move } from '../../../legacy_imports';
+import { AggConfigs, IAggConfig, AggGroupNames } from '../../../legacy_imports';
 import { EditorStateActionTypes } from './constants';
 import { getEnabledMetricAggsCount } from '../../agg_group_helper';
 import { EditorAction } from './actions';
@@ -136,7 +136,8 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState {
     case EditorStateActionTypes.REORDER_AGGS: {
       const { sourceAgg, destinationAgg } = action.payload;
       const destinationIndex = state.aggs.aggs.indexOf(destinationAgg);
-      const newAggs = move([...state.aggs.aggs], sourceAgg, destinationIndex);
+      const newAggs = [...state.aggs.aggs];
+      newAggs.splice(destinationIndex, 0, newAggs.splice(state.aggs.aggs.indexOf(sourceAgg), 1)[0]);
 
       return {
         ...state,

src/legacy/core_plugins/vis_default_editor/public/legacy_imports.ts

@@ -49,7 +49,4 @@ export { AggParamOption } from 'ui/agg_types';
 export { CidrMask } from 'ui/agg_types';
 
 export { PersistedState } from 'ui/persisted_state';
-export { getDocLink } from 'ui/documentation_links';
-export { documentationLinks } from 'ui/documentation_links/documentation_links';
-export { move } from 'ui/utils/collection';
 export * from 'ui/vis/lib';

src/legacy/core_plugins/vis_type_table/public/get_inner_angular.ts

@@ -30,7 +30,6 @@ import {
   PaginateControlsDirectiveProvider,
   watchMultiDecorator,
   KbnAccessibleClickProvider,
-  StateManagementConfigProvider,
   configureAppAngularModule,
 } from './legacy_imports';
 import { initAngularBootstrap } from '../../../../plugins/kibana_legacy/public';
@@ -72,22 +71,19 @@ function createLocalPrivateModule() {
 }
 
 function createLocalConfigModule(uiSettings: IUiSettingsClient) {
-  angular
-    .module('tableVisConfig', ['tableVisPrivate'])
-    .provider('stateManagementConfig', StateManagementConfigProvider)
-    .provider('config', function() {
-      return {
-        $get: () => ({
-          get: (value: string) => {
-            return uiSettings ? uiSettings.get(value) : undefined;
-          },
-          // set method is used in agg_table mocha test
-          set: (key: string, value: string) => {
-            return uiSettings ? uiSettings.set(key, value) : undefined;
-          },
-        }),
-      };
-    });
+  angular.module('tableVisConfig', []).provider('config', function() {
+    return {
+      $get: () => ({
+        get: (value: string) => {
+          return uiSettings ? uiSettings.get(value) : undefined;
+        },
+        // set method is used in agg_table mocha test
+        set: (key: string, value: string) => {
+          return uiSettings ? uiSettings.set(key, value) : undefined;
+        },
+      }),
+    };
+  });
 }
 
 function createLocalI18nModule() {

src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts

@@ -24,8 +24,6 @@ export { IAggConfig, AggGroupNames, Schemas } from 'ui/agg_types';
 export { PaginateDirectiveProvider } from 'ui/directives/paginate';
 // @ts-ignore
 export { PaginateControlsDirectiveProvider } from 'ui/directives/paginate';
-// @ts-ignore
-export { StateManagementConfigProvider } from 'ui/state_management/config_provider';
 export { tabifyGetColumns } from 'ui/agg_response/tabify/_get_columns';
 // @ts-ignore
 export { tabifyAggResponse } from 'ui/agg_response/tabify';

src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts

@@ -18,10 +18,6 @@
  */
 
 export { AggType, AggGroupNames, IAggConfig, IAggType, Schemas } from 'ui/agg_types';
-// @ts-ignore
-export { SimpleEmitter } from 'ui/utils/simple_emitter';
-// @ts-ignore
-export { Binder } from 'ui/binder';
 export { getFormat, getTableAggs } from 'ui/visualize/loader/pipeline_helpers/utilities';
 // @ts-ignore
 export { tabifyAggResponse } from 'ui/agg_response/tabify';