Merge pull request #117 from hjacobs/dashboard-mode

#108 add `renderer` UI option to disable WebGL

Author: hjacobs

app/src/app.js

@@ -5,35 +5,26 @@ import SelectBox from './selectbox'
 import { Theme, ALL_THEMES} from './themes.js'
 import { DESATURATION_FILTER } from './filters.js'
 import { JSON_delta } from './vendor/json_delta.js'
+import Config from './config.js'
 
 const PIXI = require('pixi.js')
 
 const addWheelListener = require('./vendor/addWheelListener')
 
-const TRUTHY_VALUES = new Set(['1', 'true'])
-
 
 export default class App {
 
     constructor() {
         const params = this.parseLocationHash()
-        this.dashboardMode = TRUTHY_VALUES.has(params.get('dashboard'))
-        this.reloadIntervalSeconds = parseInt(params.get('reload')) || 0
+        this.config = Config.fromParams(params)
         this.filterString = params.get('q') || ''
         this.selectedClusters = new Set((params.get('clusters') || '').split(',').filter(x => x))
-        this.initialScale = parseFloat(params.get('scale')) || 1.0
         this.seenPods = new Set()
         this.sorterFn = ''
         this.theme = Theme.get(localStorage.getItem('theme'))
         this.eventSource = null
         this.connectTime = null
         this.keepAliveTimer = null
-        // make sure we got activity at least every 20 seconds
-        this.keepAliveSeconds = 20
-        // always reconnect after 5 minutes
-        this.maxConnectionLifetimeSeconds = 300
-        // consider cluster data older than 1 minute outdated
-        this.maxDataAgeSeconds = 60
         this.clusters = new Map()
         this.clusterStatuses = new Map()
         this.viewContainerTargetPosition = new PIXI.Point()
@@ -104,8 +95,9 @@ export default class App {
     initialize() {
         App.current = this
 
-        //Create the renderer
-        const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2})
+        // create the renderer
+        const noWebGL = this.config.renderer === 'canvas'
+        const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2}, noWebGL)
         renderer.view.style.display = 'block'
         renderer.autoResize = true
         renderer.resize(window.innerWidth, window.innerHeight)
@@ -124,8 +116,8 @@ export default class App {
         this.registerEventListeners()
         setInterval(this.pruneUnavailableClusters.bind(this), 5 * 1000)
 
-        if (this.reloadIntervalSeconds) {
-            setTimeout(function() { location.reload(false) }, this.reloadIntervalSeconds * 1000)
+        if (this.config.reloadIntervalSeconds) {
+            setTimeout(function() { location.reload(false) }, this.config.reloadIntervalSeconds * 1000)
         }
     }
 
@@ -152,7 +144,7 @@ export default class App {
             }
             else if (event.key == 'Home') {
                 this.viewContainerTargetPosition.x = 20
-                this.viewContainerTargetPosition.y = this.dashboardMode ? 20 : 40
+                this.viewContainerTargetPosition.y = this.config.dashboardMode ? 20 : 40
             }
             else if (event.key && event.key.length == 1 && !event.ctrlKey && !event.metaKey) {
                 this.filterString += event.key
@@ -334,14 +326,14 @@ export default class App {
         this.theme.apply(this.stage)
 
         const viewContainer = new PIXI.Container()
-        viewContainer.scale.set(this.initialScale)
+        viewContainer.scale.set(this.config.initialScale)
         viewContainer.x = 20
-        viewContainer.y = this.dashboardMode ? 20 : 40
+        viewContainer.y = this.config.dashboardMode ? 20 : 40
         this.viewContainerTargetPosition.x = viewContainer.x
         this.viewContainerTargetPosition.y = viewContainer.y
         this.stage.addChild(viewContainer)
 
-        if (!this.dashboardMode) {
+        if (!this.config.dashboardMode) {
             this.drawMenuBar()
         }
 
@@ -550,10 +542,10 @@ export default class App {
         if (this.keepAliveTimer != null) {
             clearTimeout(this.keepAliveTimer)
         }
-        this.keepAliveTimer = setTimeout(this.connect.bind(this), this.keepAliveSeconds * 1000)
+        this.keepAliveTimer = setTimeout(this.connect.bind(this), this.config.keepAliveSeconds * 1000)
         if (this.connectTime != null) {
             const now = Date.now()
-            if (now - this.connectTime > this.maxConnectionLifetimeSeconds * 1000) {
+            if (now - this.connectTime > this.config.maxConnectionLifetimeSeconds * 1000) {
                 // maximum connection lifetime exceeded => reconnect
                 this.connect()
             }
@@ -565,7 +557,7 @@ export default class App {
         const nowSeconds = Date.now() / 1000
         for (const [clusterId, statusObj] of this.clusterStatuses.entries()) {
             const lastQueryTime = statusObj.last_query_time || 0
-            if (lastQueryTime < nowSeconds - this.maxDataAgeSeconds) {
+            if (lastQueryTime < nowSeconds - this.config.maxDataAgeSeconds) {
                 this.clusters.delete(clusterId)
                 updateNeeded = true
             } else if (lastQueryTime < nowSeconds - 20) {
@@ -622,7 +614,7 @@ export default class App {
             const cluster = JSON.parse(event.data)
             const status = that.clusterStatuses.get(cluster.id)
             const nowSeconds = Date.now() / 1000
-            if (status && status.last_query_time < nowSeconds - that.maxDataAgeSeconds) {
+            if (status && status.last_query_time < nowSeconds - that.config.maxDataAgeSeconds) {
                 // outdated data => ignore
             } else {
                 that.clusters.set(cluster.id, cluster)

app/src/config.js

@@ -0,0 +1,28 @@
+const TRUTHY_VALUES = new Set(['1', 'true'])
+
+export default class Config {
+
+    constructor() {
+        this.dashboardMode = false
+        this.reloadIntervalSeconds = 0
+        this.initialScale = 1.0
+        this.renderer = 'auto'
+        // make sure we got activity at least every 20 seconds
+        this.keepAliveSeconds = 20
+        // always reconnect after 5 minutes
+        this.maxConnectionLifetimeSeconds = 300
+        // consider cluster data older than 1 minute outdated
+        this.maxDataAgeSeconds = 60
+    }
+
+    static fromParams(params) {
+        const config = new Config()
+        config.dashboardMode = TRUTHY_VALUES.has(params.get('dashboard'))
+        config.reloadIntervalSeconds = parseInt(params.get('reload')) || 0
+        config.initialScale = parseFloat(params.get('scale')) || 1.0
+        config.renderer = params.get('renderer') || 'auto'
+        return config
+    }
+
+
+}

docs/ui-options.rst

@@ -14,5 +14,7 @@ Example URL: ``https://kube-ops-view.example.org/#dashboard=true;reload=600``
     Enable dashboard mode which hides the menu bar.
 ``reload``
     Reload the whole page after X seconds. This is useful for unattended TV screens running 24x7 to mitigate JavaScript memory leaks and browser crashes.
+``renderer``
+    Forces the fallback canvas renderer (instead of WebGL) when set to "canvas".
 ``scale``
     Set the initial view scale (``1.0`` is 100%).