Unmounting react components when a directive is destroyed (#35834)

This commit is contained in:
igoristic 2019-05-06 17:18:41 -04:00 committed by GitHub
parent dcf5f91784
commit a0bdb538ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 21 additions and 10 deletions

View file

@ -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({

View file

@ -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({

View file

@ -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),

View file

@ -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]);
});

View file

@ -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]);
});

View file

@ -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', {

View file

@ -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]);
});

View file

@ -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]);
});

View file

@ -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…'
});

View file

@ -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]);
});