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
2 changed files with 50 additions and 28 deletions

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;