use webfont and fix tooltip size

app/src/app.js

@@ -46,7 +46,7 @@ export default class App {
         //Create a container object called the `stage`
         const stage = new PIXI.Container()
 
-        const searchPrompt = new PIXI.Text('>', {fontSize: 18, fill: 0xaaaaff})
+        const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
         searchPrompt.x = 20
         searchPrompt.y = 5
         PIXI.ticker.shared.add(function(_) {
@@ -55,7 +55,7 @@ export default class App {
         })
         stage.addChild(searchPrompt)
 
-        const searchText = new PIXI.Text('', {fontSize: 18, fill: 0xaaaaff})
+        const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
         searchText.x = 40
         searchText.y = 5
         stage.addChild(searchText)

app/src/bars.js

@@ -58,7 +58,7 @@ export default class Bars extends PIXI.Graphics {
             s += '\t\t Capacity  : ' + podsCap + '\n'
             s += '\t\t Used      : ' + podsUsed + '\n'
 
-            bars.tooltip.text.text = s
+            bars.tooltip.setText(s)
             bars.tooltip.position = bars.toGlobal(new PIXI.Point(22, 16))
             bars.tooltip.visible = true
         })

app/src/cluster.js

@@ -45,7 +45,7 @@ export default class Cluster extends PIXI.Graphics {
         topHandle.beginFill(0xaaaaff, 1)
         topHandle.drawRect(0, 0, width, 15)
         topHandle.endFill()
-        var text = new PIXI.Text(this.cluster.api_server_url, {fontSize: 10, fill: 0x000000})
+        var text = new PIXI.Text(this.cluster.api_server_url, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000})
         text.x = 2
         text.y = 2
         topHandle.addChild(text)

app/src/node.js

@@ -48,8 +48,8 @@ export default class Node extends PIXI.Graphics {
         topHandle.beginFill(0xaaaaff, 1)
         topHandle.drawRect(0, 0, 105, 15)
         topHandle.endFill()
-        const ellipsizedNodeName = this.node.name.substring(0, 20).concat('...')
-        const text = new PIXI.Text(ellipsizedNodeName, {fontSize: 10, fill: 0x000000})
+        const ellipsizedNodeName = this.node.name.substring(0, 18).concat('...')
+        const text = new PIXI.Text(ellipsizedNodeName, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000})
         text.x = 2
         text.y = 2
         topHandle.addChild(text)
@@ -65,7 +65,7 @@ export default class Node extends PIXI.Graphics {
             for (var key of Object.keys(nodeBox.node.labels)) {
                 s += '\n' + key + ': ' + nodeBox.node.labels[key]
             }
-            nodeBox.tooltip.text.text = s
+            nodeBox.tooltip.setText(s)
             nodeBox.tooltip.position = nodeBox.toGlobal(new PIXI.Point(0, 15))
             nodeBox.tooltip.visible = true
         })

app/src/pod.js

@@ -79,12 +79,6 @@ export class Pod extends PIXI.Graphics {
 
     draw() {
 
-        if (this.tick) {
-            PIXI.ticker.shared.remove(this.tick, this)
-            this.tick = null
-            this.alpha = this._progress
-            this.tint = 0xffffff
-        }
 
         // pod.status.containerStatuses might be undefined!
         const containerStatuses = this.pod.status.containerStatuses || []
@@ -102,6 +96,8 @@ export class Pod extends PIXI.Graphics {
         const allRunning = running >= containerStatuses.length
         const resources = this.getResourceUsage()
 
+        var newTick = null
+
         const podBox = this
         podBox.interactive = true
         podBox.on('mouseover', function() {
@@ -133,9 +129,8 @@ export class Pod extends PIXI.Graphics {
             s += '\n\t\tLimit: ' + (resources.memory.limit / FACTORS.Mi).toFixed(0) + ' MiB'
             s += '\n\t\tUsed: ' + (resources.memory.used / FACTORS.Mi).toFixed(0) + ' MiB'
 
-            this.tooltip.text.text = s
-            this.tooltip.x = this.toGlobal(new PIXI.Point(10, 10)).x
-            this.tooltip.y = this.toGlobal(new PIXI.Point(10, 10)).y
+            this.tooltip.setText(s)
+            this.tooltip.position = this.toGlobal(new PIXI.Point(10, 10))
             this.tooltip.visible = true
         })
         podBox.on('mouseout', function () {
@@ -156,14 +151,14 @@ export class Pod extends PIXI.Graphics {
             podBox.lineStyle(2, 0xaaffaa, 1)
         } else if (this.pod.status.phase == 'Running' && allRunning && !allReady) {
             // all containers running, but some not ready (readinessProbe)
-            this.tick = this.pulsate
+            newTick = this.pulsate
             podBox.lineStyle(2, 0xaaffaa, 1)
         } else if (this.pod.status.phase == 'Pending') {
-            this.tick = this.pulsate
+            newTick = this.pulsate
             podBox.lineStyle(2, 0xffffaa, 1)
         } else {
             // CrashLoopBackOff, ImagePullBackOff or other unknown state
-            this.tick = this.crashing
+            newTick = this.crashing
             podBox.lineStyle(2, 0xff9999, 1)
         }
         podBox.beginFill(0x999999, 0.5)
@@ -183,10 +178,16 @@ export class Pod extends PIXI.Graphics {
                 this.addChild(cross)
                 this.cross = cross
             }
-            this.tick = this.terminating
+            newTick = this.terminating
         }
-        if (this.tick) {
+        if (newTick) {
+            this.tick = newTick
             PIXI.ticker.shared.add(this.tick, this)
+        } else if (this.tick) {
+            PIXI.ticker.shared.remove(this.tick, this)
+            this.tick = null
+            this.alpha = this._progress
+            this.tint = 0xffffff
         }
 
         const cpuHeight = resources.cpu.limit !== 0 ? 8 / resources.cpu.limit : 0

app/src/tooltip.js

@@ -3,19 +3,23 @@ const PIXI = require('pixi.js')
 export default class Tooltip extends PIXI.Graphics {
     constructor () {
         super()
+        this.text = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 12, fill: 0xffffff})
+        this.text.x = 4
+        this.text.y = 4
+        this.addChild(this.text)
+        this.visible = false
+    }
+
+    setText(text) {
+        this.text.text = text
+        this.draw()
     }
 
     draw () {
-        var tooltip = this
-        tooltip.lineStyle(1, 0x000000, 1)
-        tooltip.beginFill(0x666666, 0.8)
-        tooltip.drawRect(0, 0, 200, 400)
-        tooltip.endFill()
-        var text = new PIXI.Text('', {fontSize: 12, fill: 0xffffff})
-        text.x = 2
-        text.y = 2
-        tooltip.addChild(text)
-        tooltip.text = text
-        tooltip.visible = false
+        this.clear()
+        this.lineStyle(2, 0x333333, 0.8)
+        this.beginFill(0x333333, 0.8)
+        this.drawRect(0, 0, this.text.width + 8, this.text.height + 8)
+        this.endFill()
     }
 }

templates/index.html

@@ -3,10 +3,24 @@
     <head>
         <meta charset="utf-8">
         <title>Kubernetes Operational View</title>
-        <style>* {padding: 0; margin: 0}</style>
+<style>* {padding: 0; margin: 0} body { color: #aaaaff; background: #000; }</style>
+<style>
+/* latin */
+@font-face {
+  font-family: 'ShareTechMono';
+  font-style: normal;
+  font-weight: 400;
+  /* ShareTechMono-Regular.ttf: Copyright (c) 2012, Carrois Type Design, Ralph du Carrois (www.carrois.com post@carrois.com), with Reserved Font Name 'Share'
+     License: SIL Open Font License, 1.1 */
+  src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(static/sharetechmono.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+</style>
     </head>
     <body>
+        <!-- make sure the font is loaded -->
+        <div id="loading" style="font-family: ShareTechMono">Loading..</div>
         <script src="static/{{ app_js }}"></script>
-        <script>const app = new App(); app.run()</script>
+        <script>document.getElementById('loading').style.display = 'none'; const app = new App(); app.run()</script>
     </body>
 </html>