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
This commit is contained in:
Tristan Cacqueray 2018-06-26 22:49:16 +00:00 committed by Monty Taylor
parent 56f9d37813
commit 831476439a
2 changed files with 12 additions and 7 deletions

View File

@ -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

View File

@ -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()
}
}