From 831476439a6138a070666de93cbd357c0f63c49f Mon Sep 17 00:00:00 2001
From: Tristan Cacqueray <tdecacqu@redhat.com>
Date: Tue, 26 Jun 2018 22:49:16 +0000
Subject: [PATCH] web: fix status page flickering

Each time the jquery.zuul status page is created it registers
a setTimeout loop and page focus event that needs to be cleared
when the user visit another page. Otherwise the page flicker
for each status component that has been loaded.

Change-Id: I762496899570da4438e1cca78a6a35f7f4141049
---
 web/status/jquery.zuul.js      |  4 ++--
 web/status/status.component.ts | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/status/jquery.zuul.js b/web/status/jquery.zuul.js
index 87e2aeae1a..a05b48ad9c 100644
--- a/web/status/jquery.zuul.js
+++ b/web/status/jquery.zuul.js
@@ -648,11 +648,11 @@ import LineTImage from '../images/line-t.png';
       schedule: function (app) {
         app = app || this
         if (!options.enabled) {
-          setTimeout(function () { app.schedule(app) }, 5000)
+          app.timer = setTimeout(function () { app.schedule(app) }, 5000)
           return
         }
         app.update().always(function () {
-          setTimeout(function () { app.schedule(app) }, 5000)
+          app.timer = setTimeout(function () { app.schedule(app) }, 5000)
         })
 
         // Only update graphs every minute
diff --git a/web/status/status.component.ts b/web/status/status.component.ts
index 42603b2389..a1eb30f877 100644
--- a/web/status/status.component.ts
+++ b/web/status/status.component.ts
@@ -24,6 +24,7 @@ interface ZuulStatusOption {
 
 interface ZuulStatus {
   options: ZuulStatusOption
+  timer: number
 }
 
 @Component({
@@ -36,15 +37,19 @@ export default class StatusComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute, private zuul: ZuulService) {}
 
   ngOnInit() {
-    if (this.app) {
-      this.app.options.enabled = true
-    } else {
-      this.app = zuulStart(
-        jQuery, this.route.snapshot.paramMap.get('tenant'), this.zuul)
+    if (typeof this.app === 'undefined') {
+       this.app = zuulStart(
+           jQuery, this.route.snapshot.paramMap.get('tenant'), this.zuul)
     }
+    this.app.options.enabled = true
   }
 
   ngOnDestroy() {
     this.app.options.enabled = false
+    if (typeof this.app.timer !== 'undefined') {
+        clearTimeout(this.app.timer)
+        this.app.timer = 0
+    }
+    jQuery(document).off()
   }
 }