Merge branch 'tomislater-scale-masters-separately'

This commit is contained in:
Henning Jacobs
2019-03-23 12:09:14 +01:00
3 changed files with 75 additions and 45 deletions

View File

@@ -14,8 +14,8 @@ export default class Bars extends PIXI.Graphics {
draw() {
const bars = this
const barHeightPx = bars.entity.cluster.heightOfNodePx - (App.current.heightOfTopHandlePx + 5 + 3)
const heightOfNodeWoPaddingPx = bars.entity.cluster.heightOfNodePx - 5
const barHeightPx = bars.entity.heightOfNodePx - (App.current.heightOfTopHandlePx + 5 + 3)
const heightOfNodeWoPaddingPx = bars.entity.heightOfNodePx - 5
bars.beginFill(App.current.theme.primaryColor, 0.1)
bars.drawRect(5, heightOfNodeWoPaddingPx - barHeightPx, 15, barHeightPx)

View File

@@ -1,4 +1,4 @@
import Node from './node.js'
import { Node, isMaster } from './node.js'
import { Pod } from './pod.js'
import App from './app.js'
const PIXI = require('pixi.js')
@@ -39,64 +39,90 @@ export default class Cluster extends PIXI.Graphics {
let workerHeight = 0
const workerNodes = []
let maxPods = 0
// get the largest number of pods
let maxPodsInWorkers = 0
let maxPodsInMasters = 0
// get the largest number of pods (workers and masters)
for (const n of Object.values(this.cluster.nodes)) {
const podsInNode = Object.values(n.pods).length
if (podsInNode >= maxPods) {
maxPods = podsInNode
if (isMaster(n.labels)) {
if (podsInNode >= maxPodsInMasters) {
maxPodsInMasters = podsInNode
}
} else {
if (podsInNode >= maxPodsInWorkers) {
maxPodsInWorkers = podsInNode
}
}
}
// with maxPods we can calculate the size of all nodes in the cluster
this.podsPerRow = Math.max(
// with maxPodsInWorkers we can calculate the size of all nodes in the cluster
this.podsPerRowWorker = Math.max(
App.current.defaultPodsPerRow,
Math.ceil(Math.sqrt(maxPods))
Math.ceil(Math.sqrt(maxPodsInWorkers))
)
this.podsPerRowMaster = Math.max(
App.current.defaultPodsPerRow,
Math.ceil(Math.sqrt(maxPodsInMasters))
)
this.widthOfNodePx = Math.max(
this.widthOfWorkerNodePx = Math.max(
App.current.defaultWidthOfNodePx,
Math.floor(this.podsPerRow * App.current.sizeOfPodPx + App.current.startDrawingPodsAt + 2)
Math.floor(this.podsPerRowWorker * App.current.sizeOfPodPx + App.current.startDrawingPodsAt + 2)
)
this.widthOfMasterNodePx = Math.max(
App.current.defaultWidthOfNodePx,
Math.floor(this.podsPerRowMaster * App.current.sizeOfPodPx + App.current.startDrawingPodsAt + 2)
)
this.heightOfNodePx = Math.max(
this.heightOfWorkerNodePx = Math.max(
App.current.defaultHeightOfNodePx,
Math.floor(this.podsPerRow * App.current.sizeOfPodPx + App.current.heightOfTopHandlePx + (App.current.sizeOfPodPx * 2) + 2)
Math.floor(this.podsPerRowWorker * App.current.sizeOfPodPx + App.current.heightOfTopHandlePx + (App.current.sizeOfPodPx * 2) + 2)
)
this.heightOfMasterNodePx = Math.max(
App.current.defaultHeightOfNodePx,
Math.floor(this.podsPerRowMaster * App.current.sizeOfPodPx + App.current.heightOfTopHandlePx + (App.current.sizeOfPodPx * 2) + 2)
)
const maxWidth = window.innerWidth - (this.widthOfNodePx * 1.2)
const maxWidth = window.innerWidth - (this.heightOfWorkerNodePx * 1.2)
for (const nodeName of Object.keys(this.cluster.nodes).sort()) {
const node = this.cluster.nodes[nodeName]
var nodeBox = new Node(node, this, this.tooltip)
let nodeBox = null
if (isMaster(node.labels)) {
nodeBox = new Node(node, this, this.tooltip, this.podsPerRowMaster, this.widthOfMasterNodePx, this.heightOfMasterNodePx)
nodeBox.draw()
if (nodeBox.isMaster()) {
if (masterX > maxWidth) {
masterWidth = masterX
masterX = left
masterY += this.heightOfNodePx + padding
masterHeight += this.heightOfNodePx + padding
masterY += this.heightOfMasterNodePx + padding
masterHeight += this.heightOfMasterNodePx + padding
}
if (masterHeight == 0) {
masterHeight = this.heightOfNodePx + padding
masterHeight = this.heightOfMasterNodePx + padding
}
nodeBox.x = masterX
nodeBox.y = masterY
masterX += this.widthOfNodePx + padding
masterX += this.widthOfMasterNodePx + padding
} else {
nodeBox = new Node(node, this, this.tooltip, this.podsPerRowWorker, this.widthOfWorkerNodePx, this.heightOfWorkerNodePx)
nodeBox.draw()
if (workerX > maxWidth) {
workerWidth = workerX
workerX = left
workerY += this.heightOfNodePx + padding
workerHeight += this.heightOfNodePx + padding
workerY += this.heightOfWorkerNodePx + padding
workerHeight += this.heightOfWorkerNodePx + padding
}
workerNodes.push(nodeBox)
if (workerHeight == 0) {
workerHeight = this.heightOfNodePx + padding
workerHeight = this.heightOfWorkerNodePx + padding
}
nodeBox.x = workerX
nodeBox.y = workerY
workerX += this.widthOfNodePx + padding
workerX += this.widthOfWorkerNodePx + padding
}
this.addChild(nodeBox)
}

View File

@@ -4,22 +4,26 @@ import {parseResource} from './utils.js'
import App from './app'
const PIXI = require('pixi.js')
export default class Node extends PIXI.Graphics {
constructor(node, cluster, tooltip) {
export const isMaster = (labels) => {
for (var key in labels) {
if (key == 'node-role.kubernetes.io/master' ||
key == 'kubernetes.io/role' && labels[key] == 'master' ||
key == 'master' && labels[key] == 'true' ) {
return true
}
}
}
export class Node extends PIXI.Graphics {
constructor(node, cluster, tooltip, podsPerRow, widthOfNodePx, heightOfNodePx) {
super()
this.node = node
this.cluster = cluster
this.tooltip = tooltip
}
isMaster() {
for (var key in this.node.labels) {
if (key == 'node-role.kubernetes.io/master' ||
key == 'kubernetes.io/role' && this.node.labels[key] == 'master' ||
key == 'master' && this.node.labels[key] == 'true' ) {
return true
}
}
this.podsPerRow = podsPerRow
this.widthOfNodePx = widthOfNodePx
this.heightOfNodePx = heightOfNodePx
}
getResourceUsage() {
@@ -64,10 +68,10 @@ export default class Node extends PIXI.Graphics {
const nodeBox = this
const topHandle = new PIXI.Graphics()
topHandle.beginFill(App.current.theme.primaryColor, 1)
topHandle.drawRect(0, 0, this.cluster.widthOfNodePx, App.current.heightOfTopHandlePx)
topHandle.drawRect(0, 0, this.widthOfNodePx, App.current.heightOfTopHandlePx)
topHandle.endFill()
// there is about 2.83 letters per pod
const roomForText = Math.floor(2.83 * this.cluster.podsPerRow)
const roomForText = Math.floor(2.83 * this.podsPerRow)
const ellipsizedNodeName = this.node.name.length > roomForText ? this.node.name.substring(0, roomForText).concat('…') : this.node.name
const text = new PIXI.Text(ellipsizedNodeName, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000})
text.x = 2
@@ -76,7 +80,7 @@ export default class Node extends PIXI.Graphics {
nodeBox.addChild(topHandle)
nodeBox.lineStyle(2, App.current.theme.primaryColor, 1)
nodeBox.beginFill(App.current.theme.secondaryColor, 1)
nodeBox.drawRect(0, 0, this.cluster.widthOfNodePx, this.cluster.heightOfNodePx)
nodeBox.drawRect(0, 0, this.widthOfNodePx, this.heightOfNodePx)
nodeBox.endFill()
nodeBox.lineStyle(2, 0xaaaaaa, 1)
topHandle.interactive = true
@@ -116,9 +120,9 @@ export default class Node extends PIXI.Graphics {
podBox.movePodTo(
new PIXI.Point(
// we have a room for this.cluster.podsPerRow pods
px + (App.current.sizeOfPodPx * (podsCounter % this.cluster.podsPerRow)),
px + (App.current.sizeOfPodPx * (podsCounter % this.podsPerRow)),
// we just count when to get to another row
py + (App.current.sizeOfPodPx * Math.floor(podsCounter / this.cluster.podsPerRow))
py + (App.current.sizeOfPodPx * Math.floor(podsCounter / this.podsPerRow))
)
)
nodeBox.addChild(podBox.draw())
@@ -129,9 +133,9 @@ export default class Node extends PIXI.Graphics {
podBox.movePodTo(
new PIXI.Point(
// we have a room for this.cluster.podsPerRow pods
px + (App.current.sizeOfPodPx * (podsKubeSystemCounter % this.cluster.podsPerRow)),
px + (App.current.sizeOfPodPx * (podsKubeSystemCounter % this.podsPerRow)),
// like above (for not kube-system pods), but we count from the bottom
this.cluster.heightOfNodePx - App.current.sizeOfPodPx - 2 - (App.current.sizeOfPodPx * Math.floor(podsKubeSystemCounter / this.cluster.podsPerRow))
this.heightOfNodePx - App.current.sizeOfPodPx - 2 - (App.current.sizeOfPodPx * Math.floor(podsKubeSystemCounter / this.podsPerRow))
)
)
nodeBox.addChild(podBox.draw())