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);
  }
 
  /*