Scale masters separately
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
nodeBox.draw()
|
||||
if (nodeBox.isMaster()) {
|
||||
let nodeBox = null
|
||||
|
||||
if (isMaster(node.labels)) {
|
||||
nodeBox = new Node(node, this, this.tooltip, this.podsPerRowMaster, this.widthOfMasterNodePx, this.heightOfMasterNodePx)
|
||||
nodeBox.draw()
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
@@ -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())
|
||||
|
||||
Reference in New Issue
Block a user