mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add tab visibility change detection when polling executions (no-changelog) (#6311)

Browse Source 
feat: add tab visibility change detection when polling executions (no-changelog)
This commit is contained in:
Alex Grozav
2023-05-24 16:50:52 +03:00
committed by GitHub
parent 0d88bd7c1a
commit 071955ba68
2 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/editor-ui/src/components/ExecutionsList.vue
View File

@@ -343,6 +343,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
setPageTitle(`n8n - ${this.pageTitle}`); setPageTitle(`n8n - ${this.pageTitle}`);
document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
}, },
async created() { async created() {
await this.loadWorkflows(); await this.loadWorkflows();
@@ -354,10 +355,8 @@ export default defineComponent({
}); });
}, },
beforeDestroy() { beforeDestroy() {
if (this.autoRefreshInterval) { this.stopAutoRefreshInterval();
clearInterval(this.autoRefreshInterval); document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
this.autoRefreshInterval = undefined;
}
}, },
computed: { computed: {
...mapStores(useUIStore, useWorkflowsStore), ...mapStores(useUIStore, useWorkflowsStore),
@@ -412,15 +411,8 @@ export default defineComponent({
window.open(route.href, '_blank'); window.open(route.href, '_blank');
}, },
handleAutoRefreshToggle() { handleAutoRefreshToggle() {
if (this.autoRefreshInterval) { this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
// Clear any previously existing intervals (if any - there shouldn't) this.startAutoRefreshInterval();
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
if (this.autoRefresh) {
this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
}
}, },
handleCheckAllExistingChange() { handleCheckAllExistingChange() {
this.allExistingSelected = !this.allExistingSelected; this.allExistingSelected = !this.allExistingSelected;
@@ -927,6 +919,24 @@ export default defineComponent({
this.selectAllVisibleExecutions(); this.selectAllVisibleExecutions();
} }
}, },
startAutoRefreshInterval() {
if (this.autoRefresh) {
this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
}
},
stopAutoRefreshInterval() {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
},
onDocumentVisibilityChange() {
if (document.visibilityState === 'hidden') {
this.stopAutoRefreshInterval();
} else {
this.startAutoRefreshInterval();
}
},
}, },
}); });
</script> </script>

42
packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
View File

@@ -127,21 +127,38 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true; this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
if (this.autoRefresh) { this.startAutoRefreshInterval();
this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
}
// On larger screens, we need to load more then first page of executions // On larger screens, we need to load more then first page of executions
// for the scroll bar to appear and infinite scrolling is enabled // for the scroll bar to appear and infinite scrolling is enabled
this.checkListSize(); this.checkListSize();
this.scrollToActiveCard(); this.scrollToActiveCard();
document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
}, },
beforeDestroy() { beforeDestroy() {
if (this.autoRefreshInterval) { this.stopAutoRefreshInterval();
clearInterval(this.autoRefreshInterval); document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
this.autoRefreshInterval = undefined;
}
}, },
methods: { methods: {
startAutoRefreshInterval() {
if (this.autoRefresh) {
this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
}
},
stopAutoRefreshInterval() {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
},
onDocumentVisibilityChange() {
if (document.visibilityState === 'hidden') {
this.stopAutoRefreshInterval();
} else {
this.startAutoRefreshInterval();
}
},
loadMore(limit = 20): void { loadMore(limit = 20): void {
if (!this.loading) { if (!this.loading) {
const executionsListRef = this.$refs.executionList as HTMLElement | undefined; const executionsListRef = this.$refs.executionList as HTMLElement | undefined;
@@ -169,14 +186,9 @@ export default defineComponent({
}, },
onAutoRefreshToggle(): void { onAutoRefreshToggle(): void {
this.uiStore.executionSidebarAutoRefresh = this.autoRefresh; this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
if (this.autoRefreshInterval) {
// Clear any previously existing intervals (if any - there shouldn't) this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
clearInterval(this.autoRefreshInterval); this.startAutoRefreshInterval();
this.autoRefreshInterval = undefined;
}
if (this.autoRefresh) {
this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4 * 1000); // refresh data every 4 secs
}
}, },
checkListSize(): void { checkListSize(): void {
const sidebarContainerRef = this.$refs.container as HTMLElement | undefined; const sidebarContainerRef = this.$refs.container as HTMLElement | undefined;