Skip to content

fix(editor): Fix memory leak in Node Detail View by correctly unsubscribing from event buses #6021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 20, 2023
Merged

fix(editor): Fix memory leak in Node Detail View by correctly unsubscribing from event buses #6021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b65432d
performance(editor): Unsubscribe from eventBus on NodeSettings destro…
OlegIvaniv Apr 20, 2023
eae8406
Lintfix
OlegIvaniv Apr 20, 2023
ebfc1aa
Fix other leaking eventBuses, refactor preventNodeViewBeforeUnload
OlegIvaniv Apr 20, 2023
a8467ee
Fix destinationWasSaved bus call
OlegIvaniv Apr 20, 2023
decb308
Lintfix
OlegIvaniv Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions cypress/e2e/14-data-transformation-expressions.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ describe('Data transformation expressions', () => {
beforeEach(() => {
wf.actions.visit();

cy.window()
// @ts-ignore
.then(
(win) => win.onBeforeUnloadNodeView && win.removeEventListener('beforeunload', win.onBeforeUnloadNodeView),
);
cy.window().then(
(win) => {
// @ts-ignore
Copy link
Contributor

@netroy netroy Apr 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we augment the typeof win to have preventNodeViewBeforeUnload?: boolean, so we don't need to sprinkle // @ts-ignore in so many places ?

win.preventNodeViewBeforeUnload = true;
},
);
});

it('$json + native string methods', () => {
Expand Down
11 changes: 6 additions & 5 deletions cypress/e2e/14-mapping.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ describe('Data mapping', () => {
beforeEach(() => {
workflowPage.actions.visit();

cy.window()
// @ts-ignore
.then(
(win) => win.onBeforeUnloadNodeView && win.removeEventListener('beforeunload', win.onBeforeUnloadNodeView),
);
cy.window().then(
(win) => {
// @ts-ignore
win.preventNodeViewBeforeUnload = true;
},
);
});

it('maps expressions from table header', () => {
Expand Down
11 changes: 6 additions & 5 deletions cypress/e2e/16-webhook-node.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,12 @@ describe('Webhook Trigger node', async () => {
beforeEach(() => {
workflowPage.actions.visit();

cy.window()
// @ts-ignore
.then(
(win) => win.onBeforeUnloadNodeView && win.removeEventListener('beforeunload', win.onBeforeUnloadNodeView),
);
cy.window().then(
(win) => {
// @ts-ignore
win.preventNodeViewBeforeUnload = true;
},
);
});

it('should listen for a GET request', () => {
Expand Down
10 changes: 4 additions & 6 deletions packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,10 @@ export default Vue.extend({
if (this.autofocus && this.$refs.input) {
this.focus();
}

if (this.eventBus) {
this.eventBus.on('focus', () => {
this.focus();
});
}
this.eventBus?.on('focus', this.focus);
},
destroyed() {
this.eventBus?.off('focus', this.focus);
},
methods: {
focus() {
Expand Down
13 changes: 4 additions & 9 deletions packages/editor-ui/src/components/Modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,22 +121,17 @@ export default Vue.extend({
mounted() {
window.addEventListener('keydown', this.onWindowKeydown);

if (this.eventBus) {
this.eventBus.on('close', () => {
this.closeDialog();
});

this.eventBus.on('closeAll', () => {
this.uiStore.closeAllModals();
});
}
this.eventBus?.on('close', this.closeDialog);
this.eventBus?.on('closeAll', this.uiStore.closeAllModals);

const activeElement = document.activeElement as HTMLElement;
if (activeElement) {
activeElement.blur();
}
},
beforeDestroy() {
this.eventBus?.off('close', this.closeDialog);
this.eventBus?.off('closeAll', this.uiStore.closeAllModals);
window.removeEventListener('keydown', this.onWindowKeydown);
},
computed: {
Expand Down
8 changes: 2 additions & 6 deletions packages/editor-ui/src/components/ModalDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,15 @@ export default Vue.extend({
},
mounted() {
window.addEventListener('keydown', this.onWindowKeydown);

if (this.eventBus) {
this.eventBus.on('close', () => {
this.close();
});
}
this.eventBus?.on('close', this.close);

const activeElement = document.activeElement as HTMLElement;
if (activeElement) {
activeElement.blur();
}
},
beforeDestroy() {
this.eventBus?.off('close', this.close);
window.removeEventListener('keydown', this.onWindowKeydown);
},
computed: {
Expand Down
12 changes: 5 additions & 7 deletions packages/editor-ui/src/components/NodeDetailsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,15 +211,10 @@ export default mixins(
};
},
mounted() {
dataPinningEventBus.on(
'data-pinning-discovery',
({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
},
);
dataPinningEventBus.on('data-pinning-discovery', this.setIsTooltipVisible);
},
destroyed() {
dataPinningEventBus.off('data-pinning-discovery');
dataPinningEventBus.off('data-pinning-discovery', this.setIsTooltipVisible);
},
computed: {
...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore, useSettingsStore),
Expand Down Expand Up @@ -480,6 +475,9 @@ export default mixins(
},
},
methods: {
setIsTooltipVisible({ isTooltipVisible }: { isTooltipVisible: boolean }) {
this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
},
onKeyDown(e: KeyboardEvent) {
if (e.key === 's' && this.isCtrlKeyPressed(e)) {
e.stopPropagation();
Expand Down
12 changes: 7 additions & 5 deletions packages/editor-ui/src/components/NodeSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -895,18 +895,20 @@ export default mixins(externalHooks, nodeHelpers).extend({
onStopExecution() {
this.$emit('stopExecution');
},
openSettings() {
this.openPanel = 'settings';
},
},
mounted() {
this.populateHiddenIssuesSet();
this.setNodeValues();
if (this.eventBus) {
this.eventBus.on('openSettings', () => {
this.openPanel = 'settings';
});
}
this.eventBus?.on('openSettings', this.openSettings);

this.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
},
destroyed() {
this.eventBus?.off('openSettings', this.openSettings);
},
});
</script>

Expand Down
13 changes: 6 additions & 7 deletions packages/editor-ui/src/components/RunData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,7 +585,6 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
currentPage: 1,
pageSize: 10,
pageSizes: [10, 25, 50, 100],
eventBus: dataPinningEventBus,

pinDataDiscoveryTooltipVisible: false,
isControlledPinDataTooltip: false,
Expand All @@ -595,8 +594,8 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
this.init();

if (!this.isPaneTypeInput) {
this.eventBus.on('data-pinning-error', this.onDataPinningError);
this.eventBus.on('data-unpinning', this.onDataUnpinning);
dataPinningEventBus.on('data-pinning-error', this.onDataPinningError);
dataPinningEventBus.on('data-unpinning', this.onDataUnpinning);

this.showPinDataDiscoveryTooltip(this.jsonData);
}
Expand All @@ -609,8 +608,8 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
},
destroyed() {
this.hidePinDataDiscoveryTooltip();
this.eventBus.off('data-pinning-error', this.onDataPinningError);
this.eventBus.off('data-unpinning', this.onDataUnpinning);
dataPinningEventBus.off('data-pinning-error', this.onDataPinningError);
dataPinningEventBus.off('data-unpinning', this.onDataUnpinning);
},
computed: {
...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
Expand Down Expand Up @@ -908,15 +907,15 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
setTimeout(() => {
this.isControlledPinDataTooltip = true;
this.pinDataDiscoveryTooltipVisible = true;
this.eventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
}, 500); // Wait for NDV to open
}
},
hidePinDataDiscoveryTooltip() {
if (this.pinDataDiscoveryTooltipVisible) {
this.isControlledPinDataTooltip = false;
this.pinDataDiscoveryTooltipVisible = false;
this.eventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
}
},
pinDataDiscoveryComplete() {
Expand Down
22 changes: 13 additions & 9 deletions packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,15 +92,10 @@ export default mixins(showMessage).extend({
deepCopy(defaultMessageEventBusDestinationOptions),
this.destination,
);
this.eventBus.on('destinationWasSaved', () => {
const updatedDestination = this.logStreamingStore.getDestination(this.destination.id);
if (updatedDestination) {
this.nodeParameters = Object.assign(
deepCopy(defaultMessageEventBusDestinationOptions),
this.destination,
);
}
});
this.eventBus?.on('destinationWasSaved', this.onDestinationWasSaved);
},
destroyed() {
this.eventBus?.off('destinationWasSaved', this.onDestinationWasSaved);
},
computed: {
...mapStores(useLogStreamingStore),
Expand All @@ -124,6 +119,15 @@ export default mixins(showMessage).extend({
},
},
methods: {
onDestinationWasSaved() {
const updatedDestination = this.logStreamingStore.getDestination(this.destination.id);
if (updatedDestination) {
this.nodeParameters = Object.assign(
deepCopy(defaultMessageEventBusDestinationOptions),
this.destination,
);
}
},
async onClick(event?: PointerEvent) {
if (
event &&
Expand Down
14 changes: 8 additions & 6 deletions packages/editor-ui/src/components/TagsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,13 @@ export default mixins(showMessage).extend({
}
}

if (this.eventBus) {
this.eventBus.on('focus', () => {
this.focusOnInput();
this.focusOnTopOption();
});
}
this.eventBus?.on('focus', this.onBusFocus);

this.tagsStore.fetchAll();
},
destroyed() {
this.eventBus?.off('focus', this.onBusFocus);
},
computed: {
...mapStores(useTagsStore, useUIStore),
allTags(): ITag[] {
Expand All @@ -144,6 +142,10 @@ export default mixins(showMessage).extend({
},
},
methods: {
onBusFocus() {
this.focusOnInput();
this.focusOnTopOption();
},
filterOptions(filter = '') {
this.$data.filter = filter.trim();
this.$nextTick(() => this.focusOnTopOption());
Expand Down
33 changes: 16 additions & 17 deletions packages/editor-ui/src/views/NodeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2516,6 +2516,20 @@ export default mixins(
}
}
},
onBeforeUnload(e) {
if (this.isDemo || window.preventNodeViewBeforeUnload) {
return;
} else if (this.uiStore.stateIsDirty) {
const confirmationMessage = this.$locale.baseText(
'nodeView.itLooksLikeYouHaveBeenEditingSomething',
);
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
} else {
this.startLoading(this.$locale.baseText('nodeView.redirecting'));
return;
}
},
async newWorkflow(): Promise<void> {
this.startLoading();
await this.resetWorkspace();
Expand Down Expand Up @@ -2597,23 +2611,7 @@ export default mixins(
document.addEventListener('keydown', this.keyDown);
document.addEventListener('keyup', this.keyUp);

// allow to be overriden in e2e tests
// @ts-ignore
window.onBeforeUnloadNodeView = (e) => {
if (this.isDemo) {
return;
} else if (this.uiStore.stateIsDirty) {
const confirmationMessage = this.$locale.baseText(
'nodeView.itLooksLikeYouHaveBeenEditingSomething',
);
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
} else {
this.startLoading(this.$locale.baseText('nodeView.redirecting'));
return;
}
};
window.addEventListener('beforeunload', window.onBeforeUnloadNodeView);
window.addEventListener('beforeunload', this.onBeforeUnload);
},
getOutputEndpointUUID(nodeName: string, index: number): string | null {
const node = this.workflowsStore.getNodeByName(nodeName);
Expand Down Expand Up @@ -3972,6 +3970,7 @@ export default mixins(
document.removeEventListener('keydown', this.keyDown);
document.removeEventListener('keyup', this.keyUp);
window.removeEventListener('message', this.onPostMessageReceived);
window.removeEventListener('beforeunload', this.onBeforeUnload);

this.$root.$off('newWorkflow', this.newWorkflow);
this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
Expand Down
25 changes: 15 additions & 10 deletions packages/editor-ui/src/views/SettingsLogStreamingView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,18 +135,16 @@ export default mixins().extend({
}
});
// refresh when a modal closes
this.eventBus.on('destinationWasSaved', async () => {
this.$forceUpdate();
});
this.eventBus.on('destinationWasSaved', this.onDestinationWasSaved);
// listen to remove emission
this.eventBus.on('remove', async (destinationId: string) => {
await this.onRemove(destinationId);
});
this.eventBus.on('remove', this.onRemove);
// listen to modal closing and remove nodes from store
this.eventBus.on('closing', async (destinationId: string) => {
this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
this.uiStore.stateIsDirty = false;
});
this.eventBus.on('closing', this.onBusClosing);
},
destroyed() {
this.eventBus.off('destinationWasSaved', this.onDestinationWasSaved);
this.eventBus.off('remove', this.onRemove);
this.eventBus.off('closing', this.onBusClosing);
},
computed: {
...mapStores(
Expand All @@ -173,6 +171,13 @@ export default mixins().extend({
},
},
methods: {
onDestinationWasSaved() {
this.$forceUpdate();
},
onBusClosing() {
this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
this.uiStore.stateIsDirty = false;
},
async getDestinationDataFromBackend(): Promise<void> {
this.logStreamingStore.clearEventNames();
this.logStreamingStore.clearDestinationItemTrees();
Expand Down