Optimized page loading and bundle size

x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx

@@ -8,9 +8,8 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer } from '@elastic/eui';
 import { Expression, Props } from '../components/duration/expression';
-
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
-
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
 import { CommonAlertParamDetails } from '../../../common/types';
 
 interface ThreadPoolTypes {

x-pack/plugins/monitoring/public/angular/providers/private.js

@@ -81,9 +81,9 @@
  *
  * @param {[type]} prov [description]
  */
-import _ from 'lodash';
+import { partial, uniqueId, isObject } from 'lodash';
 
-const nextId = _.partial(_.uniqueId, 'privateProvider#');
+const nextId = partial(uniqueId, 'privateProvider#');
 
 function name(fn) {
   return fn.name || fn.toString().split('\n').shift();
@@ -141,7 +141,7 @@ export function PrivateProvider() {
 
         const context = {};
         let instance = $injector.invoke(prov, context, locals);
-        if (!_.isObject(instance)) instance = context;
+        if (!isObject(instance)) instance = context;
 
         privPath.pop();
         return instance;
@@ -155,7 +155,7 @@ export function PrivateProvider() {
 
         if ($delegateId != null && $delegateProv != null) {
           instance = instantiate(prov, {
-            $decorate: _.partial(get, $delegateId, $delegateProv),
+            $decorate: partial(get, $delegateId, $delegateProv),
           });
         } else {
           instance = instantiate(prov);

x-pack/plugins/monitoring/public/components/chart/chart_target.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { get, isEqual, filter } from 'lodash';
 import $ from 'jquery';
 import React from 'react';
 import { eventBus } from './event_bus';
@@ -50,12 +50,12 @@ export class ChartTarget extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
-    if (this.plot && !_.isEqual(newProps, this.props)) {
+    if (this.plot && !isEqual(newProps, this.props)) {
       const { series, timeRange } = newProps;
 
       const xaxisOptions = this.plot.getAxes().xaxis.options;
-      xaxisOptions.min = _.get(timeRange, 'min');
-      xaxisOptions.max = _.get(timeRange, 'max');
+      xaxisOptions.min = get(timeRange, 'min');
+      xaxisOptions.max = get(timeRange, 'max');
 
       this.plot.setData(this.filterData(series, newProps.seriesToShow));
       this.plot.setupGrid();
@@ -73,7 +73,7 @@ export class ChartTarget extends React.Component {
   }
 
   filterData(data, seriesToShow) {
-    return _(data).filter(this.filterByShow(seriesToShow)).value();
+    return filter(data, this.filterByShow(seriesToShow)).value();
   }
 
   async getOptions() {
@@ -128,7 +128,7 @@ export class ChartTarget extends React.Component {
     this.handleThorPlotHover = (_event, pos, item, originalPlot) => {
       if (this.plot !== originalPlot) {
         // the crosshair is set for the original chart already
-        this.plot.setCrosshair({ x: _.get(pos, 'x') });
+        this.plot.setCrosshair({ x: get(pos, 'x') });
       }
       this.props.updateLegend(pos, item);
     };

x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { debounce, keys, has, includes, isFunction, difference, assign } from 'lodash';
 import React from 'react';
 import { getLastValue } from './get_last_value';
 import { TimeseriesContainer } from './timeseries_container';
@@ -17,7 +17,7 @@ export class TimeseriesVisualization extends React.Component {
   constructor(props) {
     super(props);
 
-    this.debouncedUpdateLegend = _.debounce(this.updateLegend, DEBOUNCE_SLOW_MS);
+    this.debouncedUpdateLegend = debounce(this.updateLegend, DEBOUNCE_SLOW_MS);
     this.debouncedUpdateLegend = this.debouncedUpdateLegend.bind(this);
 
     this.toggleFilter = this.toggleFilter.bind(this);
@@ -26,18 +26,18 @@ export class TimeseriesVisualization extends React.Component {
 
     this.state = {
       values: {},
-      seriesToShow: _.keys(values),
+      seriesToShow: keys(values),
       ignoreVisibilityUpdates: false,
     };
   }
 
   filterLegend(id) {
-    if (!_.has(this.state.values, id)) {
+    if (!has(this.state.values, id)) {
       return [];
     }
 
-    const notAllShown = _.keys(this.state.values).length !== this.state.seriesToShow.length;
-    const isCurrentlyShown = _.includes(this.state.seriesToShow, id);
+    const notAllShown = keys(this.state.values).length !== this.state.seriesToShow.length;
+    const isCurrentlyShown = includes(this.state.seriesToShow, id);
     const seriesToShow = [];
 
     if (notAllShown && isCurrentlyShown) {
@@ -59,7 +59,7 @@ export class TimeseriesVisualization extends React.Component {
   toggleFilter(_event, id) {
     const seriesToShow = this.filterLegend(id);
 
-    if (_.isFunction(this.props.onFilter)) {
+    if (isFunction(this.props.onFilter)) {
       this.props.onFilter(seriesToShow);
     }
   }
@@ -94,21 +94,21 @@ export class TimeseriesVisualization extends React.Component {
         getValuesByX(this.props.series, pos.x, setValueCallback);
       }
     } else {
-      _.assign(values, this.getLastValues());
+      assign(values, this.getLastValues());
     }
 
     this.setState({ values });
   }
 
   UNSAFE_componentWillReceiveProps(props) {
     const values = this.getLastValues(props);
-    const currentKeys = _.keys(this.state.values);
-    const keys = _.keys(values);
-    const diff = _.difference(keys, currentKeys);
+    const currentKeys = keys(this.state.values);
+    const valueKeys = keys(values);
+    const diff = difference(valueKeys, currentKeys);
     const nextState = { values: values };
 
     if (diff.length && !this.state.ignoreVisibilityUpdates) {
-      nextState.seriesToShow = keys;
+      nextState.seriesToShow = valueKeys;
     }
 
     this.setState(nextState);

x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js

@@ -27,7 +27,7 @@ import {
   EuiHealth,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import _ from 'lodash';
+import { get } from 'lodash';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
@@ -58,7 +58,7 @@ const getNodeTooltip = (node) => {
   return null;
 };
 
-const getSortHandler = (type) => (item) => _.get(item, [type, 'summary', 'lastVal']);
+const getSortHandler = (type) => (item) => get(item, [type, 'summary', 'lastVal']);
 const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid, alerts) => {
   const cols = [];
 
@@ -87,7 +87,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid, aler
 
       let setupModeStatus = null;
       if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
-        const list = _.get(setupMode, 'data.byUuid', {});
+        const list = get(setupMode, 'data.byUuid', {});
         const status = list[node.resolver] || {};
         const instance = {
           uuid: node.resolver,
@@ -396,7 +396,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
             setupMode.data.totalUniqueInstanceCount
           ) {
             const finishMigrationAction =
-              _.get(setupMode.meta, 'liveClusterUuid') === clusterUuid
+              get(setupMode.meta, 'liveClusterUuid') === clusterUuid
                 ? setupMode.shortcutToFinishMigration
                 : setupMode.openFlyout;
 

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/unassigned.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { sortBy } from 'lodash';
 import React from 'react';
 import { Shard } from './shard';
 import { i18n } from '@kbn/i18n';
@@ -36,7 +36,7 @@ export class Unassigned extends React.Component {
   };
 
   render() {
-    const shards = _.sortBy(this.props.shards, 'shard').map(this.createShard);
+    const shards = sortBy(this.props.shards, 'shard').map(this.createShard);
     return (
       <td className="monUnassigned" data-test-subj="clusterView-Unassigned">
         <EuiFlexGroup wrap className="monUnassigned__children">

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/has_primary_children.js

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { some } from 'lodash';
 
 export function hasPrimaryChildren(item) {
-  return _.some(item.children, { primary: true });
+  return some(item.children, { primary: true });
 }

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/vents.js

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { each, isArray } from 'lodash';
 
 export const _vents = {};
 export const vents = {
   vents: _vents,
   on: function (id, cb) {
-    if (!_.isArray(_vents[id])) {
+    if (!isArray(_vents[id])) {
       _vents[id] = [];
     }
     _vents[id].push(cb);
@@ -22,7 +22,7 @@ export const vents = {
     const args = Array.prototype.slice.call(arguments);
     const id = args.shift();
     if (_vents[id]) {
-      _.each(_vents[id], function (cb) {
+      each(_vents[id], function (cb) {
         cb.apply(null, args);
       });
     }

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/transformers/indices_by_nodes.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { find, reduce, values } from 'lodash';
 import { decorateShards } from '../lib/decorate_shards';
 
 export function indicesByNodes() {
@@ -39,7 +39,7 @@ export function indicesByNodes() {
         return obj;
       }
 
-      let nodeObj = _.find(obj[index].children, { id: node });
+      let nodeObj = find(obj[index].children, { id: node });
       if (!nodeObj) {
         nodeObj = {
           id: node,
@@ -55,7 +55,7 @@ export function indicesByNodes() {
       return obj;
     }
 
-    const data = _.reduce(
+    const data = reduce(
       decorateShards(shards, nodes),
       function (obj, shard) {
         obj = createIndex(obj, shard);
@@ -65,8 +65,7 @@ export function indicesByNodes() {
       {}
     );
 
-    return _(data)
-      .values()
+    return values(data)
       .sortBy((index) => [!index.unassignedPrimaries, /^\./.test(index.name), index.name])
       .value();
   };

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/transformers/nodes_by_indices.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { find, some, reduce, values } from 'lodash';
 import { hasPrimaryChildren } from '../lib/has_primary_children';
 import { decorateShards } from '../lib/decorate_shards';
 
@@ -32,7 +32,7 @@ export function nodesByIndices() {
       if (!obj[node]) {
         createNode(obj, nodes[node], node);
       }
-      let indexObj = _.find(obj[node].children, { id: index });
+      let indexObj = find(obj[node].children, { id: index });
       if (!indexObj) {
         indexObj = {
           id: index,
@@ -51,7 +51,7 @@ export function nodesByIndices() {
     }
 
     let data = {};
-    if (_.some(shards, isUnassigned)) {
+    if (some(shards, isUnassigned)) {
       data.unassigned = {
         name: 'Unassigned',
         master: false,
@@ -60,10 +60,9 @@ export function nodesByIndices() {
       };
     }
 
-    data = _.reduce(decorateShards(shards, nodes), createIndexAddShard, data);
+    data = reduce(decorateShards(shards, nodes), createIndexAddShard, data);
 
-    return _(data)
-      .values()
+    return values(data)
       .sortBy(function (node) {
         return [node.name !== 'Unassigned', !node.master, node.name];
       })

x-pack/plugins/monitoring/public/legacy_shims.ts

@@ -5,7 +5,6 @@
  */
 
 import { CoreStart, HttpSetup, IUiSettingsClient } from 'kibana/public';
-import angular from 'angular';
 import { Observable } from 'rxjs';
 import { HttpRequestInit } from '../../../../src/core/public';
 import { MonitoringStartPluginDependencies } from './types';

x-pack/plugins/monitoring/public/lib/calculate_shard_stats.js

@@ -5,10 +5,10 @@
  */
 
 import { set } from '@elastic/safer-lodash-set';
-import _ from 'lodash';
+import { get, each } from 'lodash';
 
 function addOne(obj, key) {
-  let value = _.get(obj, key);
+  let value = get(obj, key);
   set(obj, key, ++value);
 }
 
@@ -34,8 +34,8 @@ export function calculateShardStats(state) {
     data[shard.index] = metrics;
   };
   if (state) {
-    const shards = _.get(state, 'cluster_state.shards');
-    _.each(shards, processShards);
+    const shards = get(state, 'cluster_state.shards');
+    each(shards, processShards);
   }
   return data;
 }

x-pack/plugins/monitoring/public/lib/get_cluster_from_clusters.js

@@ -4,16 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
+import { find, first } from 'lodash';
 
 export function getClusterFromClusters(clusters, globalState, unsetGlobalState = false) {
   const cluster = (() => {
-    const existingCurrent = _.find(clusters, { cluster_uuid: globalState.cluster_uuid });
+    const existingCurrent = find(clusters, { cluster_uuid: globalState.cluster_uuid });
     if (existingCurrent) {
       return existingCurrent;
     }
 
-    const firstCluster = _.first(clusters);
+    const firstCluster = first(clusters);
     if (firstCluster && firstCluster.cluster_uuid) {
       return firstCluster;
     }

x-pack/plugins/monitoring/public/lib/route_init.js

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import { ajaxErrorHandlersProvider } from './ajax_error_handler';
 import { isInSetupMode } from './setup_mode';
 import { getClusterFromClusters } from './get_cluster_from_clusters';
@@ -13,7 +12,7 @@ export function routeInitProvider(Private, monitoringClusters, globalState, lice
   const ajaxErrorHandlers = Private(ajaxErrorHandlersProvider);
 
   function isOnPage(hash) {
-    return _.includes(window.location.hash, hash);
+    return window.location.hash.includes(hash);
   }
 
   /*