lnmch/kops-arm64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#7 common color theme

Browse Source
This commit is contained in:
Henning Jacobs
2016-12-23 20:30:54 +01:00
parent d7a5409b74
commit f6daedc56c
8 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app.py
View File

@@ -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

19
app/src/app.js
View File

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

3
app/src/colors.js
View File

@@ -1,3 +1,4 @@
const PRIMARY_VIOLET = 0xaaaaff
const SECONDARY_COLOR = 0x222233
export { PRIMARY_VIOLET }
export { PRIMARY_VIOLET, SECONDARY_COLOR }

8
app/src/filters.js Normal file
View File

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

4
app/src/node.js
View File

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

30
app/src/pod.js
View File

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

40
app/src/selectbox.js
View File

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

6
app/src/tooltip.js
View File

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