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(, $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(, $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(, $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(, $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(, $el[0]);
});