resource usage
This commit is contained in:
Henning Jacobs
@@ -29,19 +29,176 @@ stage.addChild(graphics);
|
||||
|
||||
var clusters = []
|
||||
|
||||
const FACTORS = {
|
||||
'm': 1/1000,
|
||||
'Ki': 1000,
|
||||
'Mi': 1000 * 1000
|
||||
}
|
||||
|
||||
function parseResource(v) {
|
||||
const match = v.match(/^(\d*)(\D*)$/)
|
||||
const factor = FACTORS[match[2]] || 1
|
||||
return parseInt(match[1]) * factor
|
||||
}
|
||||
|
||||
class Tooltip extends PIXI.Graphics {
|
||||
constructor () {
|
||||
super()
|
||||
}
|
||||
draw () {
|
||||
var tooltip = this
|
||||
tooltip.lineStyle(2, 0xaaaaff, 1)
|
||||
tooltip.beginFill(0x999999, 0.5)
|
||||
tooltip.drawRect(0, 0, 200, 400)
|
||||
tooltip.endFill()
|
||||
var text = new PIXI.Text('', {fontSize: 12, fill: 0xffffff})
|
||||
text.x = 2
|
||||
text.y = 2
|
||||
tooltip.addChild(text)
|
||||
tooltip.text = text
|
||||
tooltip.visible = false
|
||||
}
|
||||
}
|
||||
|
||||
class Node extends PIXI.Graphics {
|
||||
constructor (node, tooltip) {
|
||||
super()
|
||||
this.node = node
|
||||
this.tooltip = tooltip
|
||||
}
|
||||
isMaster() {
|
||||
return this.node.labels.master == 'true'
|
||||
}
|
||||
getResourceUsage() {
|
||||
const resources = {}
|
||||
for (let key of Object.keys(this.node.status.capacity)) {
|
||||
resources[key] = {'capacity': parseResource(this.node.status.capacity[key]), 'used': 0}
|
||||
}
|
||||
for (let pod of this.node.pods) {
|
||||
for (let container of pod.spec.containers) {
|
||||
if (container.resources && container.resources.requests) {
|
||||
for (let key of Object.keys(container.resources.requests)) {
|
||||
resources[key].used += parseResource(container.resources.requests[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
resources['pods'].used = this.node.pods.length
|
||||
return resources
|
||||
}
|
||||
draw () {
|
||||
var nodeBox = this
|
||||
nodeBox.lineStyle(2, 0xaaaaff, 1);
|
||||
nodeBox.beginFill(0x999999, 0.5)
|
||||
nodeBox.drawRect(0, 0, 105, 100)
|
||||
nodeBox.endFill()
|
||||
nodeBox.lineStyle(2, 0xaaaaaa, 1);
|
||||
nodeBox.interactive = true
|
||||
nodeBox.on('mouseover', function() {
|
||||
var s = this.node.name
|
||||
for (let key of Object.keys(this.node.labels)) {
|
||||
s += '\n' + key + ': ' + this.node.labels[key]
|
||||
}
|
||||
this.tooltip.text.text = s
|
||||
this.tooltip.x = this.toGlobal(new PIXI.Point(0, 0)).x
|
||||
this.tooltip.y = this.toGlobal(new PIXI.Point(0,0)).y
|
||||
this.tooltip.visible = true
|
||||
})
|
||||
nodeBox.on('mouseout', function() {
|
||||
this.tooltip.visible = false
|
||||
})
|
||||
const resources = this.getResourceUsage()
|
||||
for (var i=0; i<resources.cpu.capacity; i++) {
|
||||
nodeBox.drawRect(5, 90 - i * 5, 5, 5)
|
||||
}
|
||||
nodeBox.beginFill(0xaaffaa, 1)
|
||||
nodeBox.drawRect(5, 95 - resources.cpu.used * 5, 5, resources.cpu.used * 5)
|
||||
nodeBox.endFill()
|
||||
|
||||
const scale = 1000*1000*200
|
||||
nodeBox.drawRect(14, 95 - resources.memory.capacity/scale, 5, resources.memory.capacity/scale)
|
||||
nodeBox.lineStyle(2, 0xaaffaa, 1)
|
||||
nodeBox.beginFill(0xaaffaa, 1)
|
||||
nodeBox.drawRect(15, 95 - resources.memory.used/scale, 3, resources.memory.used/scale)
|
||||
nodeBox.endFill()
|
||||
var text = new PIXI.Text('', {fontSize: 10, fill: 0xffffff})
|
||||
nodeBox.addChild(text)
|
||||
|
||||
var px = 24
|
||||
var py = 5
|
||||
for (let pod of this.node.pods) {
|
||||
if (pod.metadata.namespace != 'kube-system') {
|
||||
var podBox = new Pod(pod)
|
||||
podBox.x = px
|
||||
podBox.y = py
|
||||
nodeBox.addChild(podBox.draw())
|
||||
px += 13
|
||||
if (px > 90) {
|
||||
px = 24
|
||||
py += 13
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
var px = 24
|
||||
var py = 85
|
||||
for (let pod of this.node.pods) {
|
||||
if (pod.metadata.namespace == 'kube-system') {
|
||||
var podBox = new Pod(pod)
|
||||
podBox.x = px
|
||||
podBox.y = py
|
||||
nodeBox.addChild(podBox.draw())
|
||||
px += 13
|
||||
if (px > 90) {
|
||||
px = 24
|
||||
py -= 13
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
return nodeBox
|
||||
}
|
||||
}
|
||||
|
||||
class Pod extends PIXI.Graphics {
|
||||
constructor (pod) {
|
||||
super()
|
||||
this.pod = pod
|
||||
}
|
||||
|
||||
draw() {
|
||||
var podBox = this
|
||||
podBox.lineStyle(2, 0xaaaaaa, 1);
|
||||
var i = 0
|
||||
var w = 10 / this.pod.spec.containers.length
|
||||
for (let container of this.pod.spec.containers) {
|
||||
podBox.drawRect(0 + i * w, 0, w, 10)
|
||||
i++
|
||||
}
|
||||
var ready = true
|
||||
for (let containerStatus of this.pod.status.containerStatuses) {
|
||||
if (!containerStatus.ready) {
|
||||
ready = false
|
||||
}
|
||||
}
|
||||
if (this.pod.status.phase == 'Running' && ready) {
|
||||
podBox.lineStyle(2, 0xaaffaa, 1);
|
||||
} else if (this.pod.status.phase == 'Pending') {
|
||||
podBox.lineStyle(2, 0xffffaa, 1);
|
||||
} else {
|
||||
podBox.lineStyle(2, 0xff9999, 1);
|
||||
}
|
||||
podBox.beginFill(0x999999, 0.5)
|
||||
podBox.drawRect(0, 0, 10, 10)
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
var tooltip = new Tooltip()
|
||||
tooltip.draw()
|
||||
|
||||
function update(clusters) {
|
||||
var tooltip = new PIXI.Graphics()
|
||||
tooltip.lineStyle(2, 0xaaaaff, 1)
|
||||
tooltip.beginFill(0x999999, 0.5)
|
||||
tooltip.drawRect(0, 0, 200, 400)
|
||||
tooltip.endFill()
|
||||
var text = new PIXI.Text('', {fontSize: 12, fill: 0xffffff})
|
||||
text.x = 2
|
||||
text.y = 2
|
||||
tooltip.addChild(text)
|
||||
tooltip.text = text
|
||||
tooltip.visible = false
|
||||
graphics.clear();
|
||||
graphics.removeChildren();
|
||||
graphics.lineStyle(2, 0xaaaaff, 1);
|
||||
var x = 50;
|
||||
for (let cluster of clusters) {
|
||||
@@ -49,82 +206,41 @@ function update(clusters) {
|
||||
clusterBox.x = x
|
||||
clusterBox.y = 50
|
||||
graphics.addChild(clusterBox)
|
||||
var innerX = 10;
|
||||
var rows = [10, 10]
|
||||
for (let node of cluster.nodes) {
|
||||
var nodeBox = new PIXI.Graphics()
|
||||
nodeBox.x = innerX
|
||||
nodeBox.y = 10
|
||||
nodeBox.lineStyle(2, 0xaaaaff, 1);
|
||||
nodeBox.beginFill(0x999999, 0.5)
|
||||
nodeBox.drawRect(0, 0, 100, 100)
|
||||
nodeBox.endFill()
|
||||
nodeBox.lineStyle(2, 0x00ff00, 1);
|
||||
for (var i=0; i<parseInt(node.status.capacity.cpu); i++) {
|
||||
nodeBox.drawRect(5, 5 + i * 8, 5, 5)
|
||||
var nodeBox = new Node(node, tooltip)
|
||||
nodeBox.draw()
|
||||
if (nodeBox.isMaster()) {
|
||||
nodeBox.x = rows[0]
|
||||
rows[0] += nodeBox.width + 5
|
||||
nodeBox.y = 10
|
||||
} else {
|
||||
nodeBox.x = rows[1]
|
||||
rows[1] += nodeBox.width + 5
|
||||
nodeBox.y = nodeBox.height + 15
|
||||
}
|
||||
nodeBox.interactive = true
|
||||
nodeBox.hitArea = new PIXI.Rectangle(0, 0, 50, 50)
|
||||
nodeBox.on('mouseover', function() {
|
||||
var s = node.name
|
||||
for (let key of Object.keys(node.labels)) {
|
||||
s += '\n' + key + ': ' + node.labels[key]
|
||||
}
|
||||
tooltip.text.text = s
|
||||
tooltip.x = this.toGlobal(new PIXI.Point(0, 0)).x
|
||||
tooltip.y = this.toGlobal(new PIXI.Point(0,0)).y
|
||||
tooltip.visible = true
|
||||
})
|
||||
nodeBox.on('mouseout', function() {
|
||||
tooltip.visible = false
|
||||
})
|
||||
var mem = parseInt(node.status.capacity.memory.replace('Ki', ''))
|
||||
nodeBox.drawRect(12, 5, 5, mem/(1024*512))
|
||||
clusterBox.addChild(nodeBox)
|
||||
var text = new PIXI.Text('', {fontSize: 10, fill: 0xffffff})
|
||||
nodeBox.addChild(text)
|
||||
|
||||
|
||||
var px = 20
|
||||
var py = 10
|
||||
for (let pod of node.pods) {
|
||||
var podBox = new PIXI.Graphics()
|
||||
podBox.x = px
|
||||
podBox.y = py
|
||||
if (pod.status.phase == 'Running') {
|
||||
podBox.lineStyle(2, 0xaaffaa, 1);
|
||||
} else if (pod.status.phase == 'Pending') {
|
||||
podBox.lineStyle(2, 0xffffaa, 1);
|
||||
} else {
|
||||
podBox.lineStyle(2, 0xff9999, 1);
|
||||
}
|
||||
podBox.beginFill(0x999999, 0.5)
|
||||
podBox.drawRect(0, 0, 10, 10)
|
||||
nodeBox.addChild(podBox)
|
||||
px += 13
|
||||
if (px > 50) {
|
||||
px = 20
|
||||
py += 13
|
||||
}
|
||||
}
|
||||
|
||||
innerX += nodeBox.width + 5
|
||||
}
|
||||
clusterBox.lineStyle(2, 0xaaaaff, 1);
|
||||
clusterBox.drawRect(0, 0, innerX, 200);
|
||||
clusterBox.drawRect(0, 0, Math.max(rows[0], rows[1]), nodeBox.height * 2 + 20);
|
||||
x += 250;
|
||||
}
|
||||
graphics.addChild(tooltip)
|
||||
}
|
||||
|
||||
fetch('/kubernetes-clusters')
|
||||
.then(function(response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function(json) {
|
||||
clusters = json.kubernetes_clusters;
|
||||
update(clusters)
|
||||
console.log(json);
|
||||
});
|
||||
function fetchData() {
|
||||
fetch('/kubernetes-clusters')
|
||||
.then(function(response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function(json) {
|
||||
clusters = json.kubernetes_clusters;
|
||||
update(clusters)
|
||||
});
|
||||
window.setTimeout(fetchData, 5000)
|
||||
}
|
||||
|
||||
fetchData()
|
||||
|
||||
function state() {
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user