diff --git a/app.py b/app.py index a5096c2..6becaf3 100755 --- a/app.py +++ b/app.py @@ -130,8 +130,8 @@ def generate_mock_pod(index, i, j): labels = {} phase = pod_phases[hash_int((index + 1) * (i + 1) * (j + 1)) % len(pod_phases)] containers = [] - for k in range(1): - containers.append({'name': 'myapp', 'image': 'foo/bar/{}'.format(j), 'resources': {'requests': {'cpu': '100m', 'memory': '100Mi'}}}) + for k in range(1 + j % 2): + containers.append({'name': 'myapp', 'image': 'foo/bar/{}'.format(j), 'resources': {'requests': {'cpu': '100m', 'memory': '100Mi'}, 'limits': {}}}) status = {'phase': phase} if phase == 'Running': if j % 13 == 0: @@ -139,6 +139,9 @@ def generate_mock_pod(index, i, j): elif j % 7 == 0: status['containerStatuses'] = [{'ready': True, 'state': {'running': {}}, 'restartCount': 3}] pod = {'name': '{}-{}-{}'.format(names[hash_int((i + 1) * (j + 1)) % len(names)], i, j), 'namespace': 'kube-system' if j < 3 else 'default', 'labels': labels, 'status': status, 'containers': containers} + if phase == 'Running' and j % 17 == 0: + pod['deleted'] = 123 + return pod diff --git a/app/src/app.js b/app/src/app.js index 4f32906..991fb12 100644 --- a/app/src/app.js +++ b/app/src/app.js @@ -2,7 +2,8 @@ import Tooltip from './tooltip.js' import Cluster from './cluster.js' import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge} from './pod.js' import SelectBox from './selectbox' -import { PRIMARY_VIOLET } from './colors.js' +import { PRIMARY_VIOLET, SECONDARY_COLOR } from './colors.js' +import { DESATURATION_FILTER } from './filters.js' const PIXI = require('pixi.js') @@ -17,8 +18,6 @@ export default class App { this.filterString = '' } this.seenPods = new Set() - this.desaturationFilter = new PIXI.filters.ColorMatrixFilter() - this.desaturationFilter.desaturate() this.sorterFn = '' } @@ -30,7 +29,7 @@ export default class App { } else { document.location.hash = '' } - const filter = this.desaturationFilter + const filter = DESATURATION_FILTER for (const cluster of this.viewContainer.children) { for (const node of cluster.children) { const name = node.pod && node.pod.name @@ -73,13 +72,16 @@ export default class App { const stage = new PIXI.Container() const menuBar = new PIXI.Graphics() - menuBar.beginFill(PRIMARY_VIOLET, 1) + menuBar.beginFill(SECONDARY_COLOR, 0.8) menuBar.drawRect(0, 0, window.innerWidth, 28) - menuBar.lineStyle(1.5, 0x000000, 1) + menuBar.lineStyle(2, SECONDARY_COLOR, 0.8) + menuBar.moveTo(0, 28) + menuBar.lineTo(window.innerWidth, 28) + menuBar.lineStyle(1, PRIMARY_VIOLET, 1) menuBar.drawRect(20, 3, 200, 22) stage.addChild(menuBar) - const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14}) + const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_VIOLET}) searchPrompt.x = 26 searchPrompt.y = 8 PIXI.ticker.shared.add(function (_) { @@ -88,7 +90,7 @@ export default class App { }) stage.addChild(searchPrompt) - const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14}) + const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_VIOLET}) searchText.x = 40 searchText.y = 8 stage.addChild(searchText) @@ -150,6 +152,7 @@ export default class App { animatePodCreation(originalPod, globalPosition) { const pod = new Pod(originalPod.pod, null, this.tooltip) pod.draw() + pod.interactive = false const targetPosition = globalPosition const angle = Math.random()*Math.PI*2 const cos = Math.cos(angle) diff --git a/app/src/colors.js b/app/src/colors.js index 8a7b2cd..57787ca 100644 --- a/app/src/colors.js +++ b/app/src/colors.js @@ -1,3 +1,4 @@ const PRIMARY_VIOLET = 0xaaaaff +const SECONDARY_COLOR = 0x222233 -export { PRIMARY_VIOLET } +export { PRIMARY_VIOLET, SECONDARY_COLOR } diff --git a/app/src/filters.js b/app/src/filters.js new file mode 100644 index 0000000..6e89b8a --- /dev/null +++ b/app/src/filters.js @@ -0,0 +1,8 @@ +const PIXI = require('pixi.js') +const BRIGHTNESS_FILTER = new PIXI.filters.ColorMatrixFilter() +BRIGHTNESS_FILTER.brightness(1.3) + +const DESATURATION_FILTER = new PIXI.filters.ColorMatrixFilter() +DESATURATION_FILTER.desaturate() + +export { BRIGHTNESS_FILTER, DESATURATION_FILTER } diff --git a/app/src/node.js b/app/src/node.js index 35c707a..66b54b9 100644 --- a/app/src/node.js +++ b/app/src/node.js @@ -1,7 +1,7 @@ import {Pod} from './pod.js' import Bars from './bars.js' import {parseResource} from './utils.js' -import {PRIMARY_VIOLET} from './colors.js' +import {PRIMARY_VIOLET, SECONDARY_COLOR} from './colors.js' import App from './app' const PIXI = require('pixi.js') @@ -58,7 +58,7 @@ export default class Node extends PIXI.Graphics { topHandle.addChild(text) nodeBox.addChild(topHandle) nodeBox.lineStyle(2, PRIMARY_VIOLET, 1) - nodeBox.beginFill(PRIMARY_VIOLET, 0.2) + nodeBox.beginFill(SECONDARY_COLOR, 1) nodeBox.drawRect(0, 0, 105, 115) nodeBox.endFill() nodeBox.lineStyle(2, 0xaaaaaa, 1) diff --git a/app/src/pod.js b/app/src/pod.js index 2d2cba4..4207d77 100644 --- a/app/src/pod.js +++ b/app/src/pod.js @@ -1,5 +1,7 @@ const PIXI = require('pixi.js') +import {PRIMARY_VIOLET} from './colors.js' import {FACTORS, getBarColor, podResource} from './utils.js' +import {BRIGHTNESS_FILTER} from './filters.js' const ALL_PODS = {} @@ -160,9 +162,7 @@ export class Pod extends PIXI.Graphics { const podBox = this podBox.interactive = true podBox.on('mouseover', function () { - const filter = new PIXI.filters.ColorMatrixFilter() - filter.brightness(1.3) - podBox.filters = [filter] + podBox.filters = [BRIGHTNESS_FILTER] let s = this.pod.name s += '\nStatus : ' + this.pod.status.phase + ' (' + ready + '/' + containerStatuses.length + ' ready)' s += '\nStart Time: ' + this.pod.status.startTime @@ -201,31 +201,33 @@ export class Pod extends PIXI.Graphics { podBox.filters = [] this.tooltip.visible = false }) - podBox.lineStyle(2, 0xaaaaaa, 1) + podBox.lineStyle(1, PRIMARY_VIOLET, 1) let i = 0 const w = 10 / this.pod.containers.length for (const container of this.pod.containers) { podBox.drawRect(i * w, 0, w, 10) i++ } + let color if (this.pod.status.phase == 'Succeeded') { // completed Job - podBox.lineStyle(2, 0xaaaaff, 1) + color = 0xaaaaff } else if (this.pod.status.phase == 'Running' && allReady) { - podBox.lineStyle(2, 0xaaffaa, 1) + color = 0xaaffaa } else if (this.pod.status.phase == 'Running' && allRunning && !allReady) { // all containers running, but some not ready (readinessProbe) newTick = this.pulsate - podBox.lineStyle(2, 0xaaffaa, 1) + color = 0xaaffaa } else if (this.pod.status.phase == 'Pending') { newTick = this.pulsate - podBox.lineStyle(2, 0xffffaa, 1) + color = 0xffffaa } else { // CrashLoopBackOff, ImagePullBackOff or other unknown state newTick = this.crashing - podBox.lineStyle(2, 0xff9999, 1) + color = 0xffaaaa } - podBox.beginFill(0x999999, 0.5) + podBox.lineStyle(2, color, 1) + podBox.beginFill(color, 0.2) podBox.drawRect(0, 0, 10, 10) if (this.pod.deleted) { if (!this.cross) { @@ -245,7 +247,6 @@ export class Pod extends PIXI.Graphics { newTick = this.terminating } - if (restarts) { this.lineStyle(2, 0xff9999, 1) for (let i = 0; i < Math.min(restarts, 4); i++) { @@ -266,19 +267,20 @@ export class Pod extends PIXI.Graphics { this.tint = 0xffffff } + // CPU const cpuHeight = resources.cpu.limit !== 0 ? 8 / resources.cpu.limit : 0 - podBox.lineStyle(0, 0xaaffaa, 1) + podBox.lineStyle() podBox.beginFill(getBarColor(resources.cpu.requested, resources.cpu.limit), 1) podBox.drawRect(1, 9 - resources.cpu.requested * cpuHeight, 1, resources.cpu.requested * cpuHeight) podBox.beginFill(getBarColor(resources.cpu.used, resources.cpu.limit), 1) podBox.drawRect(2, 9 - resources.cpu.used * cpuHeight, 1, resources.cpu.used * cpuHeight) podBox.endFill() - podBox.lineStyle(1, 0xaaaaaa, 1) + // Memory const scale = resources.memory.limit / 8 const scaledMemReq = resources.memory.requested !== 0 && scale !== 0 ? resources.memory.requested / scale : 0 const scaledMemUsed = resources.memory.used !== 0 && scale !== 0 ? resources.memory.used / scale : 0 - podBox.lineStyle(0, 0xaaffaa, 1) + podBox.lineStyle() podBox.beginFill(getBarColor(resources.memory.requested, resources.memory.limit), 1) podBox.drawRect(3, 9 - scaledMemReq, 1, scaledMemReq) podBox.beginFill(getBarColor(resources.memory.used, resources.memory.limit), 1) diff --git a/app/src/selectbox.js b/app/src/selectbox.js index 2d9685c..a887ade 100644 --- a/app/src/selectbox.js +++ b/app/src/selectbox.js @@ -1,4 +1,4 @@ -import { PRIMARY_VIOLET } from './colors.js' +import { PRIMARY_VIOLET, SECONDARY_COLOR } from './colors.js' import App from './app' const PIXI = require('pixi.js') @@ -11,7 +11,7 @@ export default class SelectBox extends PIXI.Graphics { this.text = new PIXI.Text(this.items[this.count].text, { fontFamily: 'ShareTechMono', fontSize: 14, - fill: 0x000000, + fill: PRIMARY_VIOLET, align: 'center' }) this.text.x = 10 @@ -48,29 +48,33 @@ export default class SelectBox extends PIXI.Graphics { forwardArrow.interactive = true selectBox.interactive = true + const arrowBoxWidth = 18 + // draw a triangle - backArrow.lineStyle(1.5, 0x000000, 1) - backArrow.beginFill(PRIMARY_VIOLET, 0.9) - backArrow.drawRect(-22, 0, 22, 22) - backArrow.moveTo(-7, 6) - backArrow.lineTo(-16, 11) - backArrow.lineTo(-7, 16) - backArrow.lineTo(-7, 6) + backArrow.beginFill(SECONDARY_COLOR, 1) + backArrow.drawRect(-18, 0, arrowBoxWidth, 22) + backArrow.lineStyle(1, PRIMARY_VIOLET, 1) + backArrow.beginFill(SECONDARY_COLOR, 1) + backArrow.moveTo(-4, 5) + backArrow.lineTo(-15, 11) + backArrow.lineTo(-4, 17) + backArrow.lineTo(-4, 5) backArrow.endFill() selectBox.addChild(backArrow) - selectBox.lineStyle(1.5, 0x000000, 1) - selectBox.beginFill(PRIMARY_VIOLET, 0.5) + selectBox.lineStyle(1, PRIMARY_VIOLET, 1) + selectBox.beginFill(SECONDARY_COLOR, 0.5) selectBox.drawRect(4, 0, 100, 22) selectBox.endFill() - forwardArrow.lineStyle(1.5, 0x000000, 1) - forwardArrow.beginFill(PRIMARY_VIOLET, 0.9) - forwardArrow.drawRect(108, 0, 22, 22) - forwardArrow.moveTo(115, 6) - forwardArrow.lineTo(124, 11) - forwardArrow.lineTo(115, 16) - forwardArrow.lineTo(115, 6) + forwardArrow.beginFill(SECONDARY_COLOR, 1) + forwardArrow.drawRect(108, 0, arrowBoxWidth, 22) + forwardArrow.lineStyle(1, PRIMARY_VIOLET, 1) + forwardArrow.beginFill(SECONDARY_COLOR, 1) + forwardArrow.moveTo(111, 5) + forwardArrow.lineTo(122, 11) + forwardArrow.lineTo(111, 17) + forwardArrow.lineTo(111, 5) forwardArrow.endFill() selectBox.addChild(forwardArrow) diff --git a/app/src/tooltip.js b/app/src/tooltip.js index fa69d0a..7c7b8b5 100644 --- a/app/src/tooltip.js +++ b/app/src/tooltip.js @@ -1,3 +1,5 @@ +import {SECONDARY_COLOR} from './colors.js' + const PIXI = require('pixi.js') export default class Tooltip extends PIXI.Graphics { @@ -17,8 +19,8 @@ export default class Tooltip extends PIXI.Graphics { draw () { this.clear() - this.lineStyle(2, 0x333333, 0.8) - this.beginFill(0x333333, 0.8) + this.lineStyle(2, SECONDARY_COLOR, 0.8) + this.beginFill(SECONDARY_COLOR, 0.8) this.drawRect(0, 0, this.text.width + 8, this.text.height + 8) this.endFill() }