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

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 28 deletions

View file

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

View file

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