sort labels
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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})
|
||||
|
||||
@@ -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 }
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user