Merge branch 'master' into #60333

.ci/Jenkinsfile_coverage

@@ -44,7 +44,7 @@ kibanaPipeline(timeoutMinutes: 180) {
           'xpack-ciGroup10': kibanaPipeline.xpackCiGroupProcess(10),
         ]),
       ])
-      workers.base(name: 'coverage-worker', label: 'tests-l', ramDisk: false, bootstrapped: false) {
+      workers.base(name: 'coverage-worker', size: 'l', ramDisk: false, bootstrapped: false) {
         kibanaPipeline.downloadCoverageArtifacts()
         kibanaPipeline.bash(
           '''

.ci/Jenkinsfile_visual_baseline

@@ -7,12 +7,12 @@ kibanaPipeline(timeoutMinutes: 120) {
   catchError {
     parallel([
       'oss-visualRegression': {
-        workers.ci(name: 'oss-visualRegression', label: 'linux && immutable', ramDisk: false) {
+        workers.ci(name: 'oss-visualRegression', size: 's', ramDisk: false) {
           kibanaPipeline.functionalTestProcess('oss-visualRegression', './test/scripts/jenkins_visual_regression.sh')(1)
         }
       },
       'xpack-visualRegression': {
-        workers.ci(name: 'xpack-visualRegression', label: 'linux && immutable', ramDisk: false) {
+        workers.ci(name: 'xpack-visualRegression', size: 's', ramDisk: false) {
           kibanaPipeline.functionalTestProcess('xpack-visualRegression', './test/scripts/jenkins_xpack_visual_regression.sh')(1)
         }
       },

.ci/es-snapshots/Jenkinsfile_build_es

@@ -25,7 +25,7 @@ def PROMOTE_WITHOUT_VERIFY = !!params.PROMOTE_WITHOUT_VERIFICATION
 timeout(time: 120, unit: 'MINUTES') {
   timestamps {
     ansiColor('xterm') {
-      node('linux && immutable') {
+      node(workers.label('s')) {
         catchErrors {
           def VERSION
           def SNAPSHOT_ID

.ci/es-snapshots/Jenkinsfile_verify_es

@@ -61,7 +61,7 @@ kibanaPipeline(timeoutMinutes: 120) {
 }
 
 def promoteSnapshot(snapshotVersion, snapshotId) {
-  node('linux && immutable') {
+  node(workers.label('s')) {
     esSnapshots.promote(snapshotVersion, snapshotId)
   }
 }

docs/infrastructure/index.asciidoc

@@ -21,6 +21,8 @@ You can optionally save these views and add them to {kibana-ref}/dashboard.html[
 
 * Seamlessly switch to view the corresponding logs, application traces or uptime information for a component.
 
+* Create alerts based on metric thresholds for one or more components.
+
 To get started, you need to <<xpack-metrics-getting-started, start collecting metrics data from your infrastructure>>. Then you can <<infra-ui, use the Metrics application to inspect and analyze your data>>.
 
 [role="screenshot"]

docs/infrastructure/metrics-explorer.asciidoc

@@ -20,6 +20,7 @@ By default that is set to `@timestamp`.
 * The interval for the X Axis is set to `auto`.
 The bucket size is determined by the time range.
 * To use *Open in Visualize* you need access to the Visualize app.
+* To use *Create alert* you need to {kibana-ref}/alerting-getting-started.html#alerting-setup-prerequisites[set up alerting].
 
 [float]
 [[metrics-explorer-tutorial]]
@@ -67,4 +68,8 @@ Choose a graph, click the *Actions* dropdown and select *Open In Visualize*.
 This opens the graph in {kibana-ref}/TSVB.html[TSVB].
 From here you can save the graph and add it to a dashboard as usual.
 
+9. You can also create an alert based on the metrics in a graph.
+Choose a graph, click the *Actions* dropdown and select *Create alert*.
+This opens the {kibana-ref}/defining-alerts.html[alert flyout] prefilled with mertrics from the chart.
+
 Who's the Metrics Explorer now? You are!

package.json

@@ -238,6 +238,7 @@
     "react-monaco-editor": "~0.27.0",
     "react-redux": "^7.1.3",
     "react-resize-detector": "^4.2.0",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
     "react-use": "^13.27.0",

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -27,7 +27,7 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpackMerge from 'webpack-merge';
 // @ts-ignore
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import * as SharedDeps from '@kbn/ui-shared-deps';
+import * as UiSharedDeps from '@kbn/ui-shared-deps';
 
 import { Bundle, WorkerConfig, parseDirPath, DisallowedSyntaxPlugin } from '../common';
 
@@ -73,7 +73,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
     },
 
     externals: {
-      ...SharedDeps.externals,
+      ...UiSharedDeps.externals,
     },
 
     plugins: [new CleanWebpackPlugin(), new DisallowedSyntaxPlugin()],

packages/kbn-ui-framework/package.json

@@ -38,7 +38,7 @@
     "brace": "0.11.1",
     "chalk": "^2.4.2",
     "chokidar": "3.2.1",
-    "core-js": "^3.2.1",
+    "core-js": "^3.6.4",
     "css-loader": "^3.4.2",
     "expose-loader": "^0.7.5",
     "file-loader": "^4.2.0",

packages/kbn-ui-shared-deps/entry.js

@@ -17,31 +17,40 @@
  * under the License.
  */
 
-// import global polyfills before everything else
 require('./polyfills');
 
 // must load before angular
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;
 
-export const Angular = require('angular');
-export const ElasticCharts = require('@elastic/charts');
-export const ElasticEui = require('@elastic/eui');
-export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
-export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
-export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+// stateful deps
 export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nAngular = require('@kbn/i18n/angular');
 export const KbnI18nReact = require('@kbn/i18n/react');
+export const Angular = require('angular');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
+export const Monaco = require('./monaco.ts');
+export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 export const React = require('react');
 export const ReactDom = require('react-dom');
+export const ReactDomServer = require('react-dom/server');
 export const ReactIntl = require('react-intl');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
-export const Monaco = require('./monaco.ts');
-export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 
-// load timezone data into moment-timezone
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));
+
+// big deps which are locked to a single version
+export const Rxjs = require('rxjs');
+export const RxjsOperators = require('rxjs/operators');
+export const ElasticCharts = require('@elastic/charts');
+export const ElasticEui = require('@elastic/eui');
+export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
+export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format');
+export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
+export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
+
+// massive deps that we should really get rid of or reduce in size substantially
+export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');

packages/kbn-ui-shared-deps/index.d.ts

@@ -25,7 +25,12 @@ export const distDir: string;
 /**
  * Filename of the main bundle file in the distributable directory
  */
-export const distFilename: string;
+export const jsFilename: string;
+
+/**
+ * Filename of files that must be loaded before the jsFilename
+ */
+export const jsDepFilenames: string[];
 
 /**
  * Filename of the unthemed css file in the distributable directory

packages/kbn-ui-shared-deps/index.js

@@ -20,17 +20,14 @@
 const Path = require('path');
 
 exports.distDir = Path.resolve(__dirname, 'target');
-exports.distFilename = 'kbn-ui-shared-deps.js';
+exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js'];
+exports.jsFilename = 'kbn-ui-shared-deps.js';
 exports.baseCssDistFilename = 'kbn-ui-shared-deps.css';
 exports.lightCssDistFilename = 'kbn-ui-shared-deps.light.css';
 exports.darkCssDistFilename = 'kbn-ui-shared-deps.dark.css';
 exports.externals = {
+  // stateful deps
   angular: '__kbnSharedDeps__.Angular',
-  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
-  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
-  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
   '@kbn/i18n/react': '__kbnSharedDeps__.KbnI18nReact',
@@ -39,10 +36,31 @@ exports.externals = {
   'moment-timezone': '__kbnSharedDeps__.MomentTimezone',
   react: '__kbnSharedDeps__.React',
   'react-dom': '__kbnSharedDeps__.ReactDom',
+  'react-dom/server': '__kbnSharedDeps__.ReactDomServer',
   'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare',
+
+  /**
+   * big deps which are locked to a single version
+   */
+  rxjs: '__kbnSharedDeps__.Rxjs',
+  'rxjs/operators': '__kbnSharedDeps__.RxjsOperators',
+  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
+  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
+  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
+  '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
+  '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
+  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
+  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
+
+  /**
+   * massive deps that we should really get rid of or reduce in size substantially
+   */
+  elasticsearch: '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser': '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser/elasticsearch': '__kbnSharedDeps__.ElasticsearchBrowser',
 };

packages/kbn-ui-shared-deps/package.json

@@ -1,37 +1,41 @@
 {
   "name": "@kbn/ui-shared-deps",
   "version": "1.0.0",
-  "license": "Apache-2.0",
   "private": true,
+  "license": "Apache-2.0",
   "scripts": {
     "build": "node scripts/build",
     "kbn:bootstrap": "node scripts/build --dev",
     "kbn:watch": "node scripts/build --watch"
   },
-  "devDependencies": {
+  "dependencies": {
     "@elastic/charts": "^18.1.1",
-    "abortcontroller-polyfill": "^1.4.0",
     "@elastic/eui": "21.0.1",
-    "@kbn/babel-preset": "1.0.0",
-    "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
-    "@yarnpkg/lockfile": "^1.1.0",
+    "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",
-    "core-js": "^3.2.1",
-    "css-loader": "^3.4.2",
+    "core-js": "^3.6.4",
     "custom-event-polyfill": "^0.3.0",
-    "del": "^5.1.0",
+    "elasticsearch-browser": "^16.7.0",
     "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
+    "monaco-editor": "~0.17.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-intl": "^2.8.0",
-    "read-pkg": "^5.2.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.3",
+    "rxjs": "^6.5.3",
     "symbol-observable": "^1.2.0",
-    "webpack": "^4.41.5",
     "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "css-loader": "^3.4.2",
+    "del": "^5.1.0",
+    "webpack": "^4.41.5"
   }
 }

packages/kbn-ui-shared-deps/webpack.config.js

@@ -23,27 +23,27 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { REPO_ROOT } = require('@kbn/dev-utils');
 const webpack = require('webpack');
 
-const SharedDeps = require('./index');
+const UiSharedDeps = require('./index');
 
 const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');
 
 exports.getWebpackConfig = ({ dev = false } = {}) => ({
   mode: dev ? 'development' : 'production',
   entry: {
-    [SharedDeps.distFilename.replace(/\.js$/, '')]: './entry.js',
-    [SharedDeps.darkCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps': './entry.js',
+    'kbn-ui-shared-deps.dark': [
       '@elastic/eui/dist/eui_theme_dark.css',
       '@elastic/charts/dist/theme_only_dark.css',
     ],
-    [SharedDeps.lightCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps.light': [
       '@elastic/eui/dist/eui_theme_light.css',
       '@elastic/charts/dist/theme_only_light.css',
     ],
   },
   context: __dirname,
   devtool: dev ? '#cheap-source-map' : false,
   output: {
-    path: SharedDeps.distDir,
+    path: UiSharedDeps.distDir,
     filename: '[name].js',
     sourceMapFilename: '[file].map',
     publicPath: '__REPLACE_WITH_PUBLIC_PATH__',
@@ -81,6 +81,16 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
 
   optimization: {
     noEmitOnErrors: true,
+    splitChunks: {
+      cacheGroups: {
+        'kbn-ui-shared-deps.@elastic': {
+          name: 'kbn-ui-shared-deps.@elastic',
+          test: m => m.resource && m.resource.includes('@elastic'),
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
   },
 
   performance: {

packages/kbn-ui-shared-deps/yarn.lock

@@ -0,0 +1 @@
+../../yarn.lock