Merge branch 'upstream-master' into fix-no-masters

# Conflicts: # .gitattributes
2019-03-20 07:03:02 +10:00
parent 608615b786 d257337a5a
commit b740119532
18 changed files with 252 additions and 130 deletions
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1277,6 +1277,11 @@
      "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=",
      "dev": true
    },
+    "bit-twiddle": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bit-twiddle/-/bit-twiddle-1.0.2.tgz",
+      "integrity": "sha1-DGwfq+KyPRcXPZpht7cJPrnhdp4="
+    },
    "bluebird": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
@@ -2512,9 +2517,9 @@
      }
    },
    "earcut": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.1.4.tgz",
-      "integrity": "sha512-ttRjmPD5oaTtXOoxhFp9aZvMB14kBjapYaiBuzBB1elOgSLU9P2Ev86G2OClBg+uspUXERsIzXKpUWweH2K4Xg=="
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.1.5.tgz",
+      "integrity": "sha1-gpKAqaOg9f7gUp8KR8Pk7/CbIeQ="
    },
    "electron-to-chromium": {
      "version": "1.3.90",
@@ -3059,6 +3064,11 @@
      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
      "dev": true
    },
+    "eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+    },
    "events": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
@@ -3387,7 +3397,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -3408,12 +3419,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -3428,17 +3441,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -3555,7 +3571,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -3567,6 +3584,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -3581,6 +3599,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -3588,12 +3607,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.2.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.1",
            "yallist": "^3.0.0"
@@ -3612,6 +3633,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -3692,7 +3714,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -3704,6 +3727,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -3789,7 +3813,8 @@
        "safe-buffer": {
          "version": "5.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -3825,6 +3850,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -3844,6 +3870,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -3887,12 +3914,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -4370,6 +4399,11 @@
      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
      "dev": true
    },
+    "ismobilejs": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-0.5.1.tgz",
+      "integrity": "sha1-Dj+CXinjL4StXdu2Dp4EqJQEZIg="
+    },
    "js-tokens": {
      "version": "3.0.2",
      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
@@ -5010,8 +5044,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "object-copy": {
      "version": "0.1.0",
@@ -5234,6 +5267,11 @@
        "pbkdf2": "^3.0.3"
      }
    },
+    "parse-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-uri/-/parse-uri-1.0.0.tgz",
+      "integrity": "sha1-KHLcwi8aeXrN4Vg9igrClVLdrCA="
+    },
    "pascalcase": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -5323,45 +5361,18 @@
      "integrity": "sha1-i0tcQzsx5Bm8N53FZc4bg1qRs3I="
    },
    "pixi.js": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-4.8.3.tgz",
-      "integrity": "sha512-FhczbzbxCXURJWUVL+/rWDFlW7IGuSQfCCD7NDWM+WRs4dQCc9VCBrUWVq87MApt2XqEx8mky5O0Na1wal1MDg==",
+      "version": "4.8.6",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-4.8.6.tgz",
+      "integrity": "sha1-3hUFOhdnQTOkj9P+ATikAZove/E=",
      "requires": {
        "bit-twiddle": "^1.0.2",
-        "earcut": "^2.1.3",
+        "earcut": "^2.1.4",
        "eventemitter3": "^2.0.0",
-        "ismobilejs": "^0.4.0",
+        "ismobilejs": "^0.5.1",
        "object-assign": "^4.0.1",
        "pixi-gl-core": "^1.1.4",
        "remove-array-items": "^1.0.0",
-        "resource-loader": "^2.1.1"
-      },
-      "dependencies": {
-        "bit-twiddle": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/bit-twiddle/-/bit-twiddle-1.0.2.tgz",
-          "integrity": "sha1-DGwfq+KyPRcXPZpht7cJPrnhdp4="
-        },
-        "eventemitter3": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
-        },
-        "ismobilejs": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-0.4.1.tgz",
-          "integrity": "sha1-Gl8SbHD+05yT2jgPpiy65XI+fcI="
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-        },
-        "remove-array-items": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/remove-array-items/-/remove-array-items-1.1.0.tgz",
-          "integrity": "sha512-+YAHWd5patqAM/F4uBsto9h8RXDVxPRrKW46AkbI6eH12OFrN9wlGpkNWYxCjCfwtkidTjaaCXqU634V4mysvw=="
-        }
+        "resource-loader": "^2.2.3"
      }
    },
    "pkg-dir": {
@@ -5641,6 +5652,11 @@
        }
      }
    },
+    "remove-array-items": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/remove-array-items/-/remove-array-items-1.1.1.tgz",
+      "integrity": "sha1-/XRf9z0IIuVh6pEL8bQB/HhD5pM="
+    },
    "remove-trailing-separator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -5720,19 +5736,12 @@
      "dev": true
    },
    "resource-loader": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/resource-loader/-/resource-loader-2.2.0.tgz",
-      "integrity": "sha512-DfFhj7jveciV2fGu0gzJiev9i8mpIIjGiASBpPyUbQCPfNp7rnGF9mPMeJxPWnxNF4N9+NBkTIE1823/AnQy8g==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/resource-loader/-/resource-loader-2.2.3.tgz",
+      "integrity": "sha1-LIsHW3uTKKLnL7pvUbTf8nSHAAA=",
      "requires": {
        "mini-signals": "^1.1.1",
        "parse-uri": "^1.0.0"
-      },
-      "dependencies": {
-        "parse-uri": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/parse-uri/-/parse-uri-1.0.0.tgz",
-          "integrity": "sha1-KHLcwi8aeXrN4Vg9igrClVLdrCA="
-        }
      }
    },
    "restore-cursor": {
--- a/app/package.json
+++ b/app/package.json
@@ -28,7 +28,7 @@
  },
  "homepage": "https://github.com/hjacobs/kube-ops-view#readme",
  "dependencies": {
-    "pixi.js": "^4.7.3",
+    "pixi.js": "^4.8.5",
    "babel-runtime": "^6.26.0",
    "babel-polyfill": "^6.26.0"
  },
--- a/app/src/app.js
+++ b/app/src/app.js
@@ -1,6 +1,6 @@
 import Tooltip from './tooltip.js'
 import Cluster from './cluster.js'
-import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge} from './pod.js'
+import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge, sortByStatus} from './pod.js'
 import SelectBox from './selectbox'
 import {Theme, ALL_THEMES} from './themes.js'
 import {DESATURATION_FILTER} from './filters.js'
@@ -20,7 +20,7 @@ export default class App {
        this.filterString = (params.get('q') && decodeURIComponent(params.get('q'))) || ''
        this.selectedClusters = new Set((params.get('clusters') || '').split(',').filter(x => x))
        this.seenPods = new Set()
-        this.sorterFn = ''
+        this.sorterFn = sortByName
        this.theme = Theme.get(localStorage.getItem('theme'))
        this.eventSource = null
        this.connectTime = null
@@ -29,6 +29,13 @@ export default class App {
        this.clusterStatuses = new Map()
        this.viewContainerTargetPosition = new PIXI.Point()
        this.bootstrapping = true
+
+        this.startDrawingPodsAt = 24
+        this.defaultPodsPerRow = 6
+        this.defaultWidthOfNodePx = 105
+        this.defaultHeightOfNodePx = 115
+        this.sizeOfPodPx = 13
+        this.heightOfTopHandlePx = 15
    }

    parseLocationHash() {
@@ -67,11 +74,22 @@ export default class App {
        return labels && labels[name] === value
    }

+    namespaceMatches(pod, value) {
+        return pod.namespace === value
+    }
+
    createMatchesFunctionForQuery(query) {
-        if (query.includes('=')) {
-            const labelAndValue = query.split('=', 2)
-            return pod => this.labelMatches(pod, labelAndValue[0], labelAndValue[1])
-        } else {
+        if (query.startsWith('namespace=')) {
+            // filter by namespace
+            const value = query.split('namespace=', 2)[1]
+            return pod => this.namespaceMatches(pod, value)
+        } else if (query.includes('=')) {
+            // filter by label
+            const [label, value] = query.split('=', 2)
+            return pod => this.labelMatches(pod, label, value)
+        }
+        else {
+            // filter by name
            return pod => this.nameMatches(pod, query)
        }
    }
@@ -324,6 +342,9 @@ export default class App {
            },
            {
                text: 'SORT: CPU', value: sortByCPU
+            },
+            {
+                text: 'SORT: STATUS', value: sortByStatus
            }
        ]
        //setting default sort
--- a/app/src/bars.js
+++ b/app/src/bars.js
@@ -14,41 +14,42 @@ export default class Bars extends PIXI.Graphics {
    draw() {
        const bars = this

-        const barHeight = 92
+        const barHeightPx = bars.entity.cluster.heightOfNodePx - (App.current.heightOfTopHandlePx + 5 + 3)
+        const heightOfNodeWoPaddingPx = bars.entity.cluster.heightOfNodePx - 5

        bars.beginFill(App.current.theme.primaryColor, 0.1)
-        bars.drawRect(5, 110 - barHeight, 15, barHeight)
+        bars.drawRect(5, heightOfNodeWoPaddingPx - barHeightPx, 15, barHeightPx)
        bars.endFill()

        // CPU
-        const cpuHeight = barHeight / bars.resources.cpu.capacity
+        const cpuHeight = barHeightPx / bars.resources.cpu.capacity
        bars.interactive = true
        bars.lineStyle(0, 0xaaffaa, 1)
        bars.beginFill(getBarColor(bars.resources.cpu.requested, bars.resources.cpu.capacity - bars.resources.cpu.reserved), 1)
-        bars.drawRect(5, 110 - (bars.resources.cpu.requested + bars.resources.cpu.reserved) * cpuHeight, 2.5, (bars.resources.cpu.requested + bars.resources.cpu.reserved) * cpuHeight)
+        bars.drawRect(5, heightOfNodeWoPaddingPx - (bars.resources.cpu.requested + bars.resources.cpu.reserved) * cpuHeight, 2.5, (bars.resources.cpu.requested + bars.resources.cpu.reserved) * cpuHeight)
        bars.beginFill(getBarColor(bars.resources.cpu.used, bars.resources.cpu.capacity), 1)
-        bars.drawRect(7.5, 110 - bars.resources.cpu.used * cpuHeight, 2.5, bars.resources.cpu.used * cpuHeight)
+        bars.drawRect(7.5, heightOfNodeWoPaddingPx - bars.resources.cpu.used * cpuHeight, 2.5, bars.resources.cpu.used * cpuHeight)
        bars.endFill()
        bars.lineStyle(1, App.current.theme.primaryColor, 1)
-        bars.drawRect(5, 110 - bars.resources.cpu.reserved * cpuHeight, 5, bars.resources.cpu.reserved * cpuHeight)
+        bars.drawRect(5, heightOfNodeWoPaddingPx - bars.resources.cpu.reserved * cpuHeight, 5, bars.resources.cpu.reserved * cpuHeight)

        // Memory
-        const scale = bars.resources.memory.capacity / barHeight
+        const scale = bars.resources.memory.capacity / barHeightPx
        bars.lineStyle(0, 0xaaffaa, 1)
        bars.beginFill(getBarColor(bars.resources.memory.requested, bars.resources.memory.capacity - bars.resources.memory.reserved), 1)
-        bars.drawRect(14, 110 - (bars.resources.memory.requested + bars.resources.memory.reserved) / scale, 2.5, (bars.resources.memory.requested + bars.resources.memory.reserved) / scale)
+        bars.drawRect(14, heightOfNodeWoPaddingPx - (bars.resources.memory.requested + bars.resources.memory.reserved) / scale, 2.5, (bars.resources.memory.requested + bars.resources.memory.reserved) / scale)
        bars.beginFill(getBarColor(bars.resources.memory.used, bars.resources.memory.capacity), 1)
-        bars.drawRect(16.5, 110 - bars.resources.memory.used / scale, 2.5, bars.resources.memory.used / scale)
+        bars.drawRect(16.5, heightOfNodeWoPaddingPx - bars.resources.memory.used / scale, 2.5, bars.resources.memory.used / scale)
        bars.endFill()
        bars.lineStyle(1, App.current.theme.primaryColor, 1)
-        bars.drawRect(14, 110 - bars.resources.memory.reserved / scale, 5, bars.resources.memory.reserved / scale)
+        bars.drawRect(14, heightOfNodeWoPaddingPx - bars.resources.memory.reserved / scale, 5, bars.resources.memory.reserved / scale)

        bars.lineStyle(1, App.current.theme.primaryColor, 1)
        for (var i = 0; i < bars.resources.cpu.capacity; i++) {
-            bars.drawRect(5, 110 - (i + 1) * cpuHeight, 5, cpuHeight)
+            bars.drawRect(5, heightOfNodeWoPaddingPx - (i + 1) * cpuHeight, 5, cpuHeight)
        }

-        bars.drawRect(14, 110 - bars.resources.memory.capacity / scale, 5, bars.resources.memory.capacity / scale)
+        bars.drawRect(14, heightOfNodeWoPaddingPx - bars.resources.memory.capacity / scale, 5, bars.resources.memory.capacity / scale)

        bars.on('mouseover', function () {
            let s = 'CPU: \n'
--- a/app/src/cluster.js
+++ b/app/src/cluster.js
@@ -38,7 +38,34 @@ export default class Cluster extends PIXI.Graphics {
        let workerWidth = 0
        let workerHeight = 0
        const workerNodes = []
-        const maxWidth = window.innerWidth - 130
+        
+        let maxPods = 0
+        // get the largest number of pods
+        for (const n of Object.values(this.cluster.nodes)) {
+            const podsInNode = Object.values(n.pods).length
+            if (podsInNode >= maxPods) {
+                maxPods = podsInNode
+            }
+        }
+        
+        // with maxPods we can calculate the size of all nodes in the cluster
+        this.podsPerRow = Math.max(
+            App.current.defaultPodsPerRow,
+            Math.ceil(Math.sqrt(maxPods))
+        )
+
+        this.widthOfNodePx = Math.max(
+            App.current.defaultWidthOfNodePx,
+            Math.floor(this.podsPerRow * App.current.sizeOfPodPx + App.current.startDrawingPodsAt + 2)
+        )
+
+        this.heightOfNodePx = Math.max(
+            App.current.defaultHeightOfNodePx,
+            Math.floor(this.podsPerRow * App.current.sizeOfPodPx + App.current.heightOfTopHandlePx + (App.current.sizeOfPodPx * 2) + 2)
+        )
+
+        const maxWidth = window.innerWidth - (this.widthOfNodePx * 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)
@@ -47,29 +74,29 @@ export default class Cluster extends PIXI.Graphics {
                if (masterX > maxWidth) {
                    masterWidth = masterX
                    masterX = left
-                    masterY += nodeBox.height + padding
-                    masterHeight += nodeBox.height + padding
+                    masterY += this.heightOfNodePx + padding
+                    masterHeight += this.heightOfNodePx + padding
                }
                if (masterHeight == 0) {
-                    masterHeight = nodeBox.height + padding
+                    masterHeight = this.heightOfNodePx + padding
                }
                nodeBox.x = masterX
                nodeBox.y = masterY
-                masterX += nodeBox.width + padding
+                masterX += this.widthOfNodePx + padding
            } else {
                if (workerX > maxWidth) {
                    workerWidth = workerX
                    workerX = left
-                    workerY += nodeBox.height + padding
-                    workerHeight += nodeBox.height + padding
+                    workerY += this.heightOfNodePx + padding
+                    workerHeight += this.heightOfNodePx + padding
                }
                workerNodes.push(nodeBox)
                if (workerHeight == 0) {
-                    workerHeight = nodeBox.height + padding
+                    workerHeight = this.heightOfNodePx + padding
                }
                nodeBox.x = workerX
                nodeBox.y = workerY
-                workerX += nodeBox.width + padding
+                workerX += this.widthOfNodePx + padding
            }
            this.addChild(nodeBox)
        }
@@ -98,7 +125,7 @@ export default class Cluster extends PIXI.Graphics {

        const topHandle = this.topHandle = new PIXI.Graphics()
        topHandle.beginFill(App.current.theme.primaryColor, 1)
-        topHandle.drawRect(0, 0, width, 15)
+        topHandle.drawRect(0, 0, width, App.current.heightOfTopHandlePx)
        topHandle.endFill()
        topHandle.interactive = true
        topHandle.buttonMode = true
--- a/app/src/node.js
+++ b/app/src/node.js
@@ -64,9 +64,11 @@ 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, 105, 15)
+        topHandle.drawRect(0, 0, this.cluster.widthOfNodePx, App.current.heightOfTopHandlePx)
        topHandle.endFill()
-        const ellipsizedNodeName = this.node.name.length > 17 ? this.node.name.substring(0, 17).concat('…') : this.node.name
+        // there is about 2.83 letters per pod
+        const roomForText = Math.floor(2.83 * this.cluster.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
        text.y = 2
@@ -74,7 +76,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, 105, 115)
+        nodeBox.drawRect(0, 0, this.cluster.widthOfNodePx, this.cluster.heightOfNodePx)
        nodeBox.endFill()
        nodeBox.lineStyle(2, 0xaaaaaa, 1)
        topHandle.interactive = true
@@ -85,7 +87,7 @@ export default class Node extends PIXI.Graphics {
                s += '\n  ' + key + ': ' + nodeBox.node.labels[key]
            }
            nodeBox.tooltip.setText(s)
-            nodeBox.tooltip.position = nodeBox.toGlobal(new PIXI.Point(0, 15))
+            nodeBox.tooltip.position = nodeBox.toGlobal(new PIXI.Point(0, App.current.heightOfTopHandlePx))
            nodeBox.tooltip.visible = true
        })
        topHandle.on('mouseout', function () {
@@ -103,33 +105,37 @@ export default class Node extends PIXI.Graphics {

    addPods(sorterFn) {
        const nodeBox = this
-        let px = 24
-        let py = 20
+        const px = App.current.startDrawingPodsAt
+        const py = App.current.heightOfTopHandlePx + 5
+        let podsCounter = 0
+        let podsKubeSystemCounter = 0
        const pods = Object.values(this.node.pods).sort(sorterFn)
        for (const pod of pods) {
            if (pod.namespace != 'kube-system') {
                const podBox = Pod.getOrCreate(pod, this.cluster, this.tooltip)
-                podBox.movePodTo(new PIXI.Point(px, py))
+                podBox.movePodTo(
+                    new PIXI.Point(
+                        // we have a room for this.cluster.podsPerRow pods
+                        px + (App.current.sizeOfPodPx * (podsCounter % this.cluster.podsPerRow)),
+                        // we just count when to get to another row
+                        py + (App.current.sizeOfPodPx * Math.floor(podsCounter / this.cluster.podsPerRow))
+                    )
+                )
                nodeBox.addChild(podBox.draw())
-                px += 13
-                if (px > 90) {
-                    px = 24
-                    py += 13
-                }
-            }
-        }
-        px = 24
-        py = 100
-        for (const pod of pods) {
-            if (pod.namespace == 'kube-system') {
+                podsCounter++
+            } else {
+                // kube-system pods
                const podBox = Pod.getOrCreate(pod, this.cluster, this.tooltip)
-                podBox.movePodTo(new PIXI.Point(px, py))
+                podBox.movePodTo(
+                    new PIXI.Point(
+                        // we have a room for this.cluster.podsPerRow pods
+                        px + (App.current.sizeOfPodPx * (podsKubeSystemCounter % this.cluster.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))
+                    )
+                )
                nodeBox.addChild(podBox.draw())
-                px += 13
-                if (px > 90) {
-                    px = 24
-                    py -= 13
-                }
+                podsKubeSystemCounter++
            }
        }
    }
--- a/app/src/pod.js
+++ b/app/src/pod.js
@@ -34,7 +34,11 @@ const sortByCPU = (a, b) => {
    return bCpu - aCpu
 }

-export {ALL_PODS, sortByAge, sortByCPU, sortByMemory, sortByName}
+const sortByStatus = (a, b) => {
+    return (a.phase).localeCompare(b.phase)
+}
+
+export {ALL_PODS, sortByAge, sortByCPU, sortByMemory, sortByName, sortByStatus}

 export class Pod extends PIXI.Graphics {

@@ -272,7 +276,7 @@ export class Pod extends PIXI.Graphics {
        }

        // CPU
-        const scaleCpu = resources.cpu.requested <= resources.cpu.limit ? resources.cpu.limit / 8 : resources.cpu.requested / 8
+        const scaleCpu = Math.max(resources.cpu.requested, resources.cpu.limit, resources.cpu.used) / 8
        const scaledCpuReq = resources.cpu.requested !== 0 && scaleCpu !== 0 ? resources.cpu.requested / scaleCpu : 0
        const scaledCpuUsed = resources.cpu.used !== 0 && scaleCpu !== 0 ? resources.cpu.used / scaleCpu : 0
        podBox.lineStyle()
@@ -283,7 +287,7 @@ export class Pod extends PIXI.Graphics {
        podBox.endFill()

        // Memory
-        const scale = resources.memory.requested <= resources.memory.limit ? resources.memory.limit / 8 : resources.memory.requested / 8
+        const scale = Math.max(resources.memory.requested, resources.memory.limit, resources.memory.used) / 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()