Merge branch 'master' into maps/remove_licensing

docs/setup/docker.asciidoc

@@ -39,11 +39,13 @@ docker pull {docker-repo}:{version}
 === Run Kibana on Docker for development
 Kibana can be quickly started and connected to a local Elasticsearch container for development
 or testing use with the following command:
---------------------------------------------
+
+[source,sh,subs="attributes"]
+----
 docker run --link YOUR_ELASTICSEARCH_CONTAINER_NAME_OR_ID:elasticsearch -p 5601:5601 {docker-repo}:{version}
---------------------------------------------
-endif::[]
+----
 
+endif::[]
 [float]
 [[configuring-kibana-docker]]
 === Configure Kibana on Docker

src/dev/build/tasks/os_packages/create_os_package_tasks.ts

@@ -49,6 +49,7 @@ export const CreateRpmPackage: Task = {
   },
 };
 
+const dockerBuildDate = new Date().toISOString();
 export const CreateDockerCentOS: Task = {
   description: 'Creating Docker CentOS image',
 
@@ -57,11 +58,13 @@ export const CreateDockerCentOS: Task = {
       architecture: 'x64',
       context: false,
       image: true,
+      dockerBuildDate,
     });
     await runDockerGenerator(config, log, build, {
       architecture: 'aarch64',
       context: false,
       image: true,
+      dockerBuildDate,
     });
   },
 };
@@ -76,6 +79,7 @@ export const CreateDockerUBI: Task = {
         context: false,
         ubi: true,
         image: true,
+        dockerBuildDate,
       });
     }
   },
@@ -88,18 +92,21 @@ export const CreateDockerContexts: Task = {
     await runDockerGenerator(config, log, build, {
       context: true,
       image: false,
+      dockerBuildDate,
     });
 
     if (!build.isOss()) {
       await runDockerGenerator(config, log, build, {
         ubi: true,
         context: true,
         image: false,
+        dockerBuildDate,
       });
       await runDockerGenerator(config, log, build, {
         ironbank: true,
         context: true,
         image: false,
+        dockerBuildDate,
       });
     }
   },

src/dev/build/tasks/os_packages/docker_generator/run.ts

@@ -33,6 +33,7 @@ export async function runDockerGenerator(
     image: boolean;
     ubi?: boolean;
     ironbank?: boolean;
+    dockerBuildDate?: string;
   }
 ) {
   // UBI var config
@@ -53,7 +54,7 @@ export async function runDockerGenerator(
   const artifactPrefix = `kibana${artifactFlavor}-${version}-linux`;
   const artifactTarball = `${artifactPrefix}-${artifactArchitecture}.tar.gz`;
   const artifactsDir = config.resolveFromTarget('.');
-  const dockerBuildDate = new Date().toISOString();
+  const dockerBuildDate = flags.dockerBuildDate || new Date().toISOString();
   // That would produce oss, default and default-ubi7
   const dockerBuildDir = config.resolveFromRepo(
     'build',

src/plugins/data/common/field_formats/converters/color.test.ts

@@ -28,10 +28,10 @@ describe('Color Format', () => {
 
       expect(colorer.convert(99, HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>99</span>');
       expect(colorer.convert(100, HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">100</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">100</span></span>'
       );
       expect(colorer.convert(150, HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">150</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">150</span></span>'
       );
       expect(colorer.convert(151, HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>151</span>');
     });
@@ -74,22 +74,22 @@ describe('Color Format', () => {
 
       expect(converter('B', HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>B</span>');
       expect(converter('AAA', HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AAA</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">AAA</span></span>'
       );
       expect(converter('AB', HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AB</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">AB</span></span>'
       );
       expect(converter('a', HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>a</span>');
 
       expect(converter('B', HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>B</span>');
       expect(converter('AAA', HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AAA</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">AAA</span></span>'
       );
       expect(converter('AB', HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AB</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">AB</span></span>'
       );
       expect(converter('AB <', HTML_CONTEXT_TYPE)).toBe(
-        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AB &lt;</span></span>'
+        '<span ng-non-bindable><span style="color:blue;background-color:yellow">AB &lt;</span></span>'
       );
       expect(converter('a', HTML_CONTEXT_TYPE)).toBe('<span ng-non-bindable>a</span>');
     });

src/plugins/data/common/field_formats/converters/color.ts → src/plugins/data/common/field_formats/converters/color.tsx

@@ -7,15 +7,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { findLast, cloneDeep, template, escape } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+import { findLast, cloneDeep, escape } from 'lodash';
 import { KBN_FIELD_TYPES } from '../../kbn_field_types/types';
 import { FieldFormat } from '../field_format';
 import { HtmlContextTypeConvert, FIELD_FORMAT_IDS } from '../types';
 import { asPrettyString } from '../utils';
 import { DEFAULT_CONVERTER_COLOR } from '../constants/color_default';
 
-const convertTemplate = template('<span style="<%- style %>"><%- val %></span>');
-
 export class ColorFormat extends FieldFormat {
   static id = FIELD_FORMAT_IDS.COLOR;
   static title = i18n.translate('data.fieldFormats.color.title', {
@@ -51,11 +51,18 @@ export class ColorFormat extends FieldFormat {
 
   htmlConvert: HtmlContextTypeConvert = (val) => {
     const color = this.findColorRuleForVal(val) as typeof DEFAULT_CONVERTER_COLOR;
-    if (!color) return escape(asPrettyString(val));
 
-    let style = '';
-    if (color.text) style += `color: ${color.text};`;
-    if (color.background) style += `background-color: ${color.background};`;
-    return convertTemplate({ val, style });
+    const displayVal = escape(asPrettyString(val));
+    if (!color) return displayVal;
+
+    return ReactDOM.renderToStaticMarkup(
+      <span
+        style={{
+          color: color.text,
+          backgroundColor: color.background,
+        }}
+        dangerouslySetInnerHTML={{ __html: displayVal }} // eslint-disable-line react/no-danger
+      />
+    );
   };
 }

src/plugins/data/common/field_formats/converters/source.test.ts

@@ -9,6 +9,7 @@
 import { SourceFormat } from './source';
 import { HtmlContextTypeConvert } from '../types';
 import { HTML_CONTEXT_TYPE } from '../content_types';
+import { stubIndexPatternWithFields } from '../../index_patterns/index_pattern.stub';
 
 describe('Source Format', () => {
   let convertHtml: Function;
@@ -31,4 +32,19 @@ describe('Source Format', () => {
       '<span ng-non-bindable>{&quot;foo&quot;:&quot;bar&quot;,&quot;number&quot;:42,&quot;hello&quot;:&quot;&lt;h1&gt;World&lt;/h1&gt;&quot;,&quot;also&quot;:&quot;with \\&quot;quotes\\&quot; or &#39;single quotes&#39;&quot;}</span>'
     );
   });
+
+  test('should render a description list if a field is passed', () => {
+    const hit = {
+      foo: 'bar',
+      number: 42,
+      hello: '<h1>World</h1>',
+      also: 'with "quotes" or \'single quotes\'',
+    };
+
+    const indexPattern = { ...stubIndexPatternWithFields, formatHit: (h: string) => h };
+
+    expect(convertHtml(hit, { field: 'field', indexPattern, hit })).toMatchInlineSnapshot(
+      `"<span ng-non-bindable><dl class=\\"source truncate-by-height\\"><dt>foo:</dt><dd>bar</dd> <dt>number:</dt><dd>42</dd> <dt>hello:</dt><dd><h1>World</h1></dd> <dt>also:</dt><dd>with \\"quotes\\" or 'single quotes'</dd> </dl></span>"`
+    );
+  });
 });

src/plugins/data/common/field_formats/converters/source.ts → src/plugins/data/common/field_formats/converters/source.tsx

@@ -6,40 +6,34 @@
  * Side Public License, v 1.
  */
 
-import { template, escape, keys } from 'lodash';
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom/server';
+import { escape, keys } from 'lodash';
 import { shortenDottedString } from '../../utils';
 import { KBN_FIELD_TYPES } from '../../kbn_field_types/types';
 import { FieldFormat } from '../field_format';
 import { TextContextTypeConvert, HtmlContextTypeConvert, FIELD_FORMAT_IDS } from '../types';
 import { UI_SETTINGS } from '../../constants';
 
-/**
- * Remove all of the whitespace between html tags
- * so that inline elements don't have extra spaces.
- *
- * If you have inline elements (span, a, em, etc.) and any
- * amount of whitespace around them in your markup, then the
- * browser will push them apart. This is ugly in certain
- * scenarios and is only fixed by removing the whitespace
- * from the html in the first place (or ugly css hacks).
- *
- * @param  {string} html - the html to modify
- * @return {string} - modified html
- */
-function noWhiteSpace(html: string) {
-  const TAGS_WITH_WS = />\s+</g;
-  return html.replace(TAGS_WITH_WS, '><');
+interface Props {
+  defPairs: Array<[string, string]>;
 }
-
-const templateHtml = `
-  <dl class="source truncate-by-height">
-    <% defPairs.forEach(function (def) { %>
-      <dt><%- def[0] %>:</dt>
-      <dd><%= def[1] %></dd>
-      <%= ' ' %>
-    <% }); %>
-  </dl>`;
-const doTemplate = template(noWhiteSpace(templateHtml));
+const TemplateComponent = ({ defPairs }: Props) => {
+  return (
+    <dl className={'source truncate-by-height'}>
+      {defPairs.map((pair, idx) => (
+        <Fragment key={idx}>
+          <dt
+            dangerouslySetInnerHTML={{ __html: `${escape(pair[0])}:` }} // eslint-disable-line react/no-danger
+          />
+          <dd
+            dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
+          />{' '}
+        </Fragment>
+      ))}
+    </dl>
+  );
+};
 
 export class SourceFormat extends FieldFormat {
   static id = FIELD_FORMAT_IDS._SOURCE;
@@ -70,6 +64,8 @@ export class SourceFormat extends FieldFormat {
       pairs.push([newField, val]);
     }, []);
 
-    return doTemplate({ defPairs: highlightPairs.concat(sourcePairs) });
+    return ReactDOM.renderToStaticMarkup(
+      <TemplateComponent defPairs={highlightPairs.concat(sourcePairs)} />
+    );
   };
 }

src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx

@@ -85,7 +85,7 @@ class FilterEditorUI extends Component<Props, State> {
   public render() {
     return (
       <div>
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <EuiFlexGroup alignItems="baseline" responsive={false}>
             <EuiFlexItem>
               <FormattedMessage

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -161,7 +161,7 @@ class FilterOptionsUI extends Component<Props, State> {
         panelPaddingSize="none"
         repositionOnScroll
       >
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <FormattedMessage
             id="data.filter.searchBar.changeAllFiltersTitle"
             defaultMessage="Change all filters"

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -6,26 +6,39 @@
 // Uses the append style, but no bordering
 .kqlQueryBar__languageSwitcherButton {
   border-right: none !important;
+  border-left: $euiFormInputGroupBorder;
 }
 
 .kbnQueryBar__textareaWrap {
   overflow: visible !important; // Override EUI form control
   display: flex;
   flex: 1 1 100%;
   position: relative;
+
+  @include kbnThemeStyle('v8') {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
-  height: $euiFormControlHeight;
+  height: $euiFormControlHeight - 2px;
   // Unlike most inputs within layout control groups, the text area still needs a border
   // for multi-line content. These adjusts help it sit above the control groups
   // shadow to line up correctly.
   padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
   box-shadow: 0 0 0 1px $euiFormBorderColor;
 
+  @include kbnThemeStyle('v7') {
+    padding-top: $euiSizeS + 2px;
+  }
+
+  @include kbnThemeStyle('v8') {
+    border-radius: 0;
+    padding-bottom: $euiSizeS + 1px;
+  }
+
   &:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
     @include euiYScrollWithShadows;
   }

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -96,7 +96,7 @@ export function QueryLanguageSwitcher({
         />
       </EuiPopoverTitle>
       <div style={{ width: '350px' }}>
-        <EuiText>
+        <EuiText size="s">
           <p>
             <FormattedMessage
               id="data.query.queryBar.syntaxOptionsDescription"

src/plugins/data/public/ui/query_string_input/query_string_input.tsx

@@ -379,14 +379,12 @@ export default class QueryStringInputUI extends Component<Props, State> {
     const newQueryString = value.substr(0, start) + text + value.substr(end);
 
     this.reportUiCounter?.(
-      METRIC_TYPE.LOADED,
-      `query_string:${type}:suggestions_select_position`,
-      listIndex
+      METRIC_TYPE.CLICK,
+      `query_string:${type}:suggestions_select_position_${listIndex}`
     );
     this.reportUiCounter?.(
-      METRIC_TYPE.LOADED,
-      `query_string:${type}:suggestions_select_q_length`,
-      end - start
+      METRIC_TYPE.CLICK,
+      `query_string:${type}:suggestions_select_q_length_${end - start}`
     );
 
     this.onQueryStringChange(newQueryString);

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -202,7 +202,7 @@ export function SavedQueryManagementComponent({
           className="kbnSavedQueryManagement__popover"
           data-test-subj="saved-query-management-popover"
         >
-          <EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
+          <EuiPopoverTitle paddingSize="m" id={'savedQueryManagementPopoverTitle'}>
             {savedQueryPopoverTitleText}
           </EuiPopoverTitle>
           {savedQueries.length > 0 ? (
@@ -234,7 +234,7 @@ export function SavedQueryManagementComponent({
               <EuiSpacer size="s" />
             </Fragment>
           )}
-          <EuiPopoverFooter>
+          <EuiPopoverFooter paddingSize="m">
             <EuiFlexGroup
               direction="rowReverse"
               gutterSize="s"

src/plugins/vis_type_timeseries/public/application/components/aggs/agg.tsx

@@ -48,9 +48,9 @@ export function Agg(props: AggProps) {
     ...props.style,
   };
 
-  const indexPattern =
-    (props.series.override_index_pattern && props.series.series_index_pattern) ||
-    props.panel.index_pattern;
+  const indexPattern = props.series.override_index_pattern
+    ? props.series.series_index_pattern
+    : props.panel.index_pattern;
 
   return (
     <div className={props.className} style={style}>