added selectbox

app/package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/hjacobs/kube-ops-view#readme",
   "dependencies": {
+    "pixi-display": "^1.0.1",
     "pixi.js": "^4.3.0",
     "webpack-dev-server": "^1.16.2"
   },

app/src/app.js

@@ -1,8 +1,11 @@
 import Tooltip from './tooltip.js'
 import Cluster from './cluster.js'
-import { Pod, ALL_PODS } from './pod.js'
+import {Pod, ALL_PODS} from './pod.js'
+import SelectBox from './selectbox'
+import 'pixi-display'
 const PIXI = require('pixi.js')
 
+
 export default class App {
 
     constructor() {
@@ -20,7 +23,7 @@ export default class App {
                 for (const pod of node.children) {
                     const name = pod.pod && pod.pod.name
                     if (name) {
-                        if (!name.includes(searchString)){
+                        if (!name.includes(searchString)) {
                             pod.filters = [filter]
                         } else {
                             // TODO: pod might have other filters set..
@@ -46,11 +49,13 @@ export default class App {
         //Create a container object called the `stage`
         const stage = new PIXI.Container()
 
+        stage.displayList = new PIXI.DisplayList()
+
         const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
         searchPrompt.x = 20
         searchPrompt.y = 5
-        PIXI.ticker.shared.add(function(_) {
+        PIXI.ticker.shared.add(function (_) {
-            var v = Math.sin((PIXI.ticker.shared.lastTime % 2000)/2000.* Math.PI)
+            var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI)
             searchPrompt.alpha = v
         })
         stage.addChild(searchPrompt)
@@ -60,6 +65,28 @@ export default class App {
         searchText.y = 5
         stage.addChild(searchText)
 
+        const items = [
+            {
+                text: 'Name', sorterFn: () => {}
+            },
+            {
+                text: 'Age', sorterFn: () => {}
+            },
+            {
+                text: 'Memory', sorterFn: () => {}
+            },
+            {
+                text: 'CPU', sorterFn: () => {}
+            },
+
+        ]
+        const selectBox = new SelectBox(items)
+        selectBox.x = 265
+        selectBox.y = 5
+        const mainLayer = new PIXI.DisplayGroup(1, true)
+        selectBox.displayGroup = mainLayer
+        stage.addChild(selectBox.draw())
+
         const viewContainer = new PIXI.Container()
         viewContainer.x = 20
         viewContainer.y = 40
@@ -77,7 +104,7 @@ export default class App {
                 event.preventDefault()
             }
             else if (event.key == 'Backspace') {
-                this.filterString = this.filterString.slice(0, Math.max(0, this.filterString.length-1))
+                this.filterString = this.filterString.slice(0, Math.max(0, this.filterString.length - 1))
                 this.filter()
                 event.preventDefault()
             }
@@ -98,7 +125,7 @@ export default class App {
         const pod = new Pod(originalPod.pod, this.tooltip, false)
         pod.draw()
         const targetPosition = new PIXI.Point(globalX, globalY)
-        const angle = Math.random()*Math.PI*2
+        const angle = Math.random() * Math.PI * 2
         const cos = Math.cos(angle)
         const sin = Math.sin(angle)
         const distance = Math.max(200, Math.random() * Math.min(window.innerWidth, window.innerHeight))
@@ -111,7 +138,7 @@ export default class App {
         pod._progress = 0
         originalPod.visible = false
         const that = this
-        const tick = function(t) {
+        const tick = function (t) {
             // progress goes from 0 to 1
             const progress = Math.min(1, pod._progress + (0.01 * t))
             const scale = 1 + ((1 - progress) * 140)
@@ -132,6 +159,7 @@ export default class App {
         PIXI.ticker.shared.add(tick)
         this.stage.addChild(pod)
     }
+
     update(clusters) {
         this.viewContainer.removeChildren()
         var y = 0
@@ -154,7 +182,7 @@ export default class App {
                 this.seenPods[key] = pod
                 const globalPos = pod.toGlobal({x: 0, y: 0})
                 if (!firstTime && i < 10) {
-                    window.setTimeout(function() {
+                    window.setTimeout(function () {
                         that.animatePodCreation(pod, globalPos.x, globalPos.y)
                     }, 100 * i)
                 }
@@ -174,10 +202,10 @@ export default class App {
 
         function fetchData() {
             fetch('kubernetes-clusters', {credentials: 'include'})
-            .then(function(response) {
+                .then(function (response) {
                     return response.json()
                 })
-            .then(function(json) {
+                .then(function (json) {
                     const clusters = json.kubernetes_clusters
                     that.update(clusters)
                 })

app/src/selectbox.js

@@ -0,0 +1,81 @@
+const PIXI = require('pixi.js')
+
+export default class SelectBox extends PIXI.Graphics {
+    constructor(items) {
+        super()
+        this.items = items
+        this.count = 0
+        this.text = new PIXI.Text(this.items[this.count].text, {
+            fontFamily: 'ShareTechMono',
+            fontSize: 14,
+            fill: 0xaaaaff,
+            align: 'center'
+        })
+        this.text.x = 10
+        this.text.y = 10
+        this.addChild(this.text)
+    }
+
+    onForwardPressed() {
+        const selectBox = this
+        if (selectBox.count + 1 < this.items.length) {
+            selectBox.count++
+        } else {
+            selectBox.count = 0
+        }
+        selectBox.text.text = selectBox.items[selectBox.count].text
+    }
+
+    onBackPressed() {
+        const selectBox = this
+        if (selectBox.count - 1 > 0) {
+            selectBox.count--
+        } else {
+            selectBox.count = selectBox.items.length - 1
+        }
+        selectBox.text.text = selectBox.items[selectBox.count].text
+    }
+
+    draw() {
+        const selectBox = this
+
+        const backArrow = new PIXI.Graphics()
+        const forwardArrow = new PIXI.Graphics()
+        backArrow.interactive = true
+        forwardArrow.interactive = true
+        selectBox.interactive = true
+        // set a fill and line style
+
+        // draw a triangle
+        backArrow.lineStyle(2, 0x000000, 1)
+        backArrow.beginFill(0x1b7c87, 0.5)
+        backArrow.moveTo(0, 2)
+        backArrow.lineTo(-20, 15)
+        backArrow.lineTo(0, 28)
+        backArrow.lineTo(0, 2)
+        backArrow.endFill()
+        selectBox.addChild(backArrow)
+        selectBox.lineStyle(2, 0x000000, 1)
+        selectBox.beginFill(0x1b7c87, 0.5)
+        selectBox.drawRoundedRect(4, 0, 100, 30, 10)
+        selectBox.endFill()
+
+        forwardArrow.lineStyle(2, 0x000000, 1)
+        forwardArrow.beginFill(0x1b7c87, 0.5)
+        forwardArrow.moveTo(108, 2)
+        forwardArrow.lineTo(128, 15)
+        forwardArrow.lineTo(108, 28)
+        forwardArrow.lineTo(108, 2)
+        forwardArrow.endFill()
+        selectBox.addChild(forwardArrow)
+
+        backArrow.on('mousedown', selectBox.onBackPressed.bind(this))
+        backArrow.on('touchstart', selectBox.onBackPressed.bind(this))
+        forwardArrow.on('mousedown', selectBox.onForwardPressed.bind(this))
+        forwardArrow.on('touchstart', selectBox.onForwardPressed.bind(this))
+
+        return selectBox
+    }
+
+}
+