From a0bdb538ec442fa59895b579685dc34161da0886 Mon Sep 17 00:00:00 2001
From: igoristic <igor.zaytsev.dev@gmail.com>
Date: Mon, 6 May 2019 17:18:41 -0400
Subject: [PATCH] Unmounting react components when a directive is destroyed
 (#35834)

---
 .../plugins/monitoring/public/directives/beats/beat/index.js  | 3 ++-
 .../monitoring/public/directives/beats/overview/index.js      | 3 ++-
 x-pack/plugins/monitoring/public/directives/chart/index.js    | 4 +++-
 .../public/directives/elasticsearch/cluster_status/index.js   | 3 ++-
 .../public/directives/elasticsearch/index_summary/index.js    | 3 ++-
 .../public/directives/elasticsearch/ml_job_listing/index.js   | 3 ++-
 .../public/directives/elasticsearch/node_summary/index.js     | 3 ++-
 .../public/directives/kibana/cluster_status/index.js          | 3 ++-
 .../monitoring/public/directives/kibana/listing/index.js      | 3 ++-
 .../monitoring/public/directives/kibana/summary/index.js      | 3 ++-
 10 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/directives/beats/beat/index.js b/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
index 4532190c942d..66f67141e51d 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import moment from 'moment';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { Beat } from 'plugins/monitoring/components/beats/beat';
 import { timefilter } from 'ui/timefilter';
@@ -20,6 +20,7 @@ uiModule.directive('monitoringBeatsBeat', () => {
       data: '=',
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
 
       function onBrush({ xaxis }) {
         timefilter.setTime({
diff --git a/x-pack/plugins/monitoring/public/directives/beats/overview/index.js b/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
index 051088e3af7f..2d04184dbce3 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import moment from 'moment';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { BeatsOverview } from 'plugins/monitoring/components/beats/overview';
 import { timefilter } from 'ui/timefilter';
@@ -20,6 +20,7 @@ uiModule.directive('monitoringBeatsOverview', () => {
       data: '=',
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
 
       function onBrush({ xaxis }) {
         timefilter.setTime({
diff --git a/x-pack/plugins/monitoring/public/directives/chart/index.js b/x-pack/plugins/monitoring/public/directives/chart/index.js
index 713f3d29921c..c51b59491aa7 100644
--- a/x-pack/plugins/monitoring/public/directives/chart/index.js
+++ b/x-pack/plugins/monitoring/public/directives/chart/index.js
@@ -5,7 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import moment from 'moment';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
@@ -21,6 +21,8 @@ uiModule.directive('monitoringChart', () => {
       series: '='
     },
     link(scope, $elem) {
+      scope.$on('$destroy', () => $elem && $elem[0] && unmountComponentAtNode($elem[0]));
+
       function onBrush({ xaxis }) {
         timefilter.setTime({
           from: moment(xaxis.from),
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
index a9a2abea4e85..9a53afaccb56 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { ClusterStatus } from 'plugins/monitoring/components/elasticsearch/cluster_status';
 import { I18nContext } from 'ui/i18n';
@@ -18,6 +18,7 @@ uiModule.directive('monitoringClusterStatusElasticsearch', () => {
       status: '='
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       scope.$watch('status', status => {
         render(<I18nContext><ClusterStatus stats={status} /></I18nContext>, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
index 234d0753f160..1ca38184d307 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { IndexDetailStatus } from 'plugins/monitoring/components/elasticsearch/index_detail_status';
 import { I18nContext } from 'ui/i18n';
@@ -16,6 +16,7 @@ uiModule.directive('monitoringIndexSummary', () => {
     restrict: 'E',
     scope: { summary: '=' },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       scope.$watch('summary', summary => {
         render(<I18nContext><IndexDetailStatus stats={summary} /></I18nContext>, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
index 284257e7144b..0dc9fcd83921 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
@@ -7,7 +7,7 @@
 import { capitalize } from 'lodash';
 import numeral from '@elastic/numeral';
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
@@ -123,6 +123,7 @@ uiModule.directive('monitoringMlListing', kbnUrl => {
       status: '=',
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       const columns = getColumns(kbnUrl, scope);
 
       const filterJobsPlaceholder = i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.filterJobsPlaceholder', {
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
index 030ba5c62126..0af889827307 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { NodeDetailStatus } from 'plugins/monitoring/components/elasticsearch/node_detail_status';
 import { I18nContext } from 'ui/i18n';
@@ -18,6 +18,7 @@ uiModule.directive('monitoringNodeSummary', () => {
       node: '='
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       scope.$watch('node', node => {
         render(<I18nContext><NodeDetailStatus stats={node} /></I18nContext>, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
index c1daf984e8f8..e5ab961733c4 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { ClusterStatus } from 'plugins/monitoring/components/kibana/cluster_status';
 import { I18nContext } from 'ui/i18n';
@@ -18,6 +18,7 @@ uiModule.directive('monitoringClusterStatusKibana', () => {
       status: '=',
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       scope.$watch('status', status => {
         render(<I18nContext><ClusterStatus stats={status} /></I18nContext>, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
index 6c71517382dd..303ca3fe4a54 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
@@ -6,7 +6,7 @@
 
 import { capitalize, get } from 'lodash';
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import {
   KuiTableRowCell,
@@ -150,6 +150,7 @@ uiModule.directive('monitoringKibanaListing', (kbnUrl, i18n) => {
       onNewState: '=',
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       const filterInstancesPlaceholder = i18n('xpack.monitoring.kibana.listing.filterInstancesPlaceholder', {
         defaultMessage: 'Filter Instances…'
       });
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
index e6411ccf67c4..2c46e88bc100 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { DetailStatus } from 'plugins/monitoring/components/kibana/detail_status';
 import { I18nContext } from 'ui/i18n';
@@ -18,6 +18,7 @@ uiModule.directive('monitoringKibanaSummary', () => {
       kibana: '='
     },
     link(scope, $el) {
+      scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
       scope.$watch('kibana', kibana => {
         render(<I18nContext><DetailStatus stats={kibana} /></I18nContext>, $el[0]);
       });