sort labels

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)

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)
         }

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})

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 }

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 += '\nLabels:'
-                s += '\n' + key + ': ' + nodeBox.node.labels[key]
+            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))

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) {

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)