mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 12:57:29 -08:00
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:
parent
0d88bd7c1a
commit
071955ba68
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue