diff --git a/app/src/app.js b/app/src/app.js index 0c1e2f3..f4a57be 100644 --- a/app/src/app.js +++ b/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) diff --git a/app/src/bars.js b/app/src/bars.js index 0b928b3..93beb94 100644 --- a/app/src/bars.js +++ b/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 }) diff --git a/app/src/cluster.js b/app/src/cluster.js index 2e0d108..aa7bc2d 100644 --- a/app/src/cluster.js +++ b/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) diff --git a/app/src/node.js b/app/src/node.js index ed4a2b8..f166812 100644 --- a/app/src/node.js +++ b/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 }) diff --git a/app/src/pod.js b/app/src/pod.js index 45ccdba..65945b4 100644 --- a/app/src/pod.js +++ b/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 diff --git a/app/src/tooltip.js b/app/src/tooltip.js index d073aea..fa69d0a 100644 --- a/app/src/tooltip.js +++ b/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() } } diff --git a/static/sharetechmono.woff2 b/static/sharetechmono.woff2 new file mode 100644 index 0000000..fcfbb2b Binary files /dev/null and b/static/sharetechmono.woff2 differ diff --git a/templates/index.html b/templates/index.html index a3d0965..3143838 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,10 +3,24 @@ Kubernetes Operational View - + + + +
Loading..
- +