diff --git a/app/src/app.js b/app/src/app.js index 991fb12..1bee321 100644 --- a/app/src/app.js +++ b/app/src/app.js @@ -2,7 +2,7 @@ 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, SECONDARY_COLOR } from './colors.js' +import { PRIMARY_COLOR, SECONDARY_COLOR } from './colors.js' import { DESATURATION_FILTER } from './filters.js' const PIXI = require('pixi.js') @@ -77,11 +77,11 @@ export default class App { menuBar.lineStyle(2, SECONDARY_COLOR, 0.8) menuBar.moveTo(0, 28) menuBar.lineTo(window.innerWidth, 28) - menuBar.lineStyle(1, PRIMARY_VIOLET, 1) + menuBar.lineStyle(1, PRIMARY_COLOR, 1) menuBar.drawRect(20, 3, 200, 22) stage.addChild(menuBar) - const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_VIOLET}) + const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR}) searchPrompt.x = 26 searchPrompt.y = 8 PIXI.ticker.shared.add(function (_) { @@ -90,7 +90,7 @@ export default class App { }) stage.addChild(searchPrompt) - const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_VIOLET}) + const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR}) searchText.x = 40 searchText.y = 8 stage.addChild(searchText) diff --git a/app/src/bars.js b/app/src/bars.js index 47be045..f834a4c 100644 --- a/app/src/bars.js +++ b/app/src/bars.js @@ -1,5 +1,5 @@ import {FACTORS, getBarColor} from './utils' -import {PRIMARY_VIOLET} from './colors' +import {PRIMARY_COLOR} from './colors' const PIXI = require('pixi.js') @@ -16,7 +16,7 @@ export default class Bars extends PIXI.Graphics { const barHeight = 92 - bars.beginFill(PRIMARY_VIOLET, 0.1) + bars.beginFill(PRIMARY_COLOR, 0.1) bars.drawRect(5, 110 - barHeight, 15, barHeight) bars.endFill() @@ -39,7 +39,7 @@ export default class Bars extends PIXI.Graphics { bars.drawRect(16.5, 110 - bars.resources.memory.used / scale, 2.5, bars.resources.memory.used / scale) bars.endFill() - bars.lineStyle(1, PRIMARY_VIOLET, 1) + bars.lineStyle(1, PRIMARY_COLOR, 1) for (var i = 0; i < bars.resources.cpu.capacity; i++) { bars.drawRect(5, 110 - (i + 1) * cpuHeight, 5, cpuHeight) } diff --git a/app/src/cluster.js b/app/src/cluster.js index b6eb3a2..b1b1526 100644 --- a/app/src/cluster.js +++ b/app/src/cluster.js @@ -1,6 +1,6 @@ import Node from './node.js' import { Pod } from './pod.js' -import { PRIMARY_VIOLET } from './colors.js' +import { PRIMARY_COLOR } from './colors.js' const PIXI = require('pixi.js') export default class Cluster extends PIXI.Graphics { @@ -38,12 +38,12 @@ export default class Cluster extends PIXI.Graphics { rows[0] += 20 } - this.lineStyle(2, PRIMARY_VIOLET, 1) + this.lineStyle(2, PRIMARY_COLOR, 1) const width = Math.max(rows[0], rows[1]) this.drawRect(0, 0, width, nodeBox.height * 2 + 30) var topHandle = new PIXI.Graphics() - topHandle.beginFill(PRIMARY_VIOLET, 1) + topHandle.beginFill(PRIMARY_COLOR, 1) topHandle.drawRect(0, 0, width, 15) topHandle.endFill() var text = new PIXI.Text(this.cluster.api_server_url, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000}) diff --git a/app/src/colors.js b/app/src/colors.js index 57787ca..7e03ec9 100644 --- a/app/src/colors.js +++ b/app/src/colors.js @@ -1,4 +1,4 @@ -const PRIMARY_VIOLET = 0xaaaaff +const PRIMARY_COLOR = 0xaaaaff const SECONDARY_COLOR = 0x222233 -export { PRIMARY_VIOLET, SECONDARY_COLOR } +export { PRIMARY_COLOR, SECONDARY_COLOR } diff --git a/app/src/node.js b/app/src/node.js index 66b54b9..07419d7 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, SECONDARY_COLOR} from './colors.js' +import {PRIMARY_COLOR, SECONDARY_COLOR} from './colors.js' import App from './app' const PIXI = require('pixi.js') @@ -48,16 +48,16 @@ export default class Node extends PIXI.Graphics { draw() { const nodeBox = this const topHandle = new PIXI.Graphics() - topHandle.beginFill(PRIMARY_VIOLET, 1) + topHandle.beginFill(PRIMARY_COLOR, 1) topHandle.drawRect(0, 0, 105, 15) topHandle.endFill() - const ellipsizedNodeName = this.node.name.substring(0, 18).concat('...') + const ellipsizedNodeName = this.node.name.length > 17 ? this.node.name.substring(0, 17).concat('…') : this.node.name const text = new PIXI.Text(ellipsizedNodeName, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000}) text.x = 2 text.y = 2 topHandle.addChild(text) nodeBox.addChild(topHandle) - nodeBox.lineStyle(2, PRIMARY_VIOLET, 1) + nodeBox.lineStyle(2, PRIMARY_COLOR, 1) nodeBox.beginFill(SECONDARY_COLOR, 1) nodeBox.drawRect(0, 0, 105, 115) nodeBox.endFill() @@ -65,8 +65,9 @@ export default class Node extends PIXI.Graphics { topHandle.interactive = true topHandle.on('mouseover', function () { let s = nodeBox.node.name - for (const key of Object.keys(nodeBox.node.labels)) { - s += '\n' + key + ': ' + nodeBox.node.labels[key] + s += '\nLabels:' + for (const key of Object.keys(nodeBox.node.labels).sort()) { + s += '\n ' + key + ': ' + nodeBox.node.labels[key] } nodeBox.tooltip.setText(s) nodeBox.tooltip.position = nodeBox.toGlobal(new PIXI.Point(0, 15)) diff --git a/app/src/pod.js b/app/src/pod.js index 4207d77..3280f04 100644 --- a/app/src/pod.js +++ b/app/src/pod.js @@ -1,5 +1,5 @@ const PIXI = require('pixi.js') -import {PRIMARY_VIOLET} from './colors.js' +import {PRIMARY_COLOR} from './colors.js' import {FACTORS, getBarColor, podResource} from './utils.js' import {BRIGHTNESS_FILTER} from './filters.js' @@ -167,7 +167,7 @@ export class Pod extends PIXI.Graphics { s += '\nStatus : ' + this.pod.status.phase + ' (' + ready + '/' + containerStatuses.length + ' ready)' s += '\nStart Time: ' + this.pod.status.startTime s += '\nLabels :' - for (var key of Object.keys(this.pod.labels)) { + for (var key of Object.keys(this.pod.labels).sort()) { if (key !== 'pod-template-hash') { s += '\n ' + key + ': ' + this.pod.labels[key] } @@ -201,7 +201,7 @@ export class Pod extends PIXI.Graphics { podBox.filters = [] this.tooltip.visible = false }) - podBox.lineStyle(1, PRIMARY_VIOLET, 1) + podBox.lineStyle(1, PRIMARY_COLOR, 1) let i = 0 const w = 10 / this.pod.containers.length for (const container of this.pod.containers) { diff --git a/app/src/selectbox.js b/app/src/selectbox.js index a887ade..d9067c1 100644 --- a/app/src/selectbox.js +++ b/app/src/selectbox.js @@ -1,4 +1,4 @@ -import { PRIMARY_VIOLET, SECONDARY_COLOR } from './colors.js' +import { PRIMARY_COLOR, 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: PRIMARY_VIOLET, + fill: PRIMARY_COLOR, align: 'center' }) this.text.x = 10 @@ -53,7 +53,7 @@ export default class SelectBox extends PIXI.Graphics { // draw a triangle backArrow.beginFill(SECONDARY_COLOR, 1) backArrow.drawRect(-18, 0, arrowBoxWidth, 22) - backArrow.lineStyle(1, PRIMARY_VIOLET, 1) + backArrow.lineStyle(1, PRIMARY_COLOR, 1) backArrow.beginFill(SECONDARY_COLOR, 1) backArrow.moveTo(-4, 5) backArrow.lineTo(-15, 11) @@ -62,14 +62,14 @@ export default class SelectBox extends PIXI.Graphics { backArrow.endFill() selectBox.addChild(backArrow) - selectBox.lineStyle(1, PRIMARY_VIOLET, 1) + selectBox.lineStyle(1, PRIMARY_COLOR, 1) selectBox.beginFill(SECONDARY_COLOR, 0.5) selectBox.drawRect(4, 0, 100, 22) selectBox.endFill() forwardArrow.beginFill(SECONDARY_COLOR, 1) forwardArrow.drawRect(108, 0, arrowBoxWidth, 22) - forwardArrow.lineStyle(1, PRIMARY_VIOLET, 1) + forwardArrow.lineStyle(1, PRIMARY_COLOR, 1) forwardArrow.beginFill(SECONDARY_COLOR, 1) forwardArrow.moveTo(111, 5) forwardArrow.lineTo(122, 11)