lnmch/kops-arm64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added selectbox

Browse Source
This commit is contained in:
Christian Lohmann
2016-12-22 14:33:25 +01:00
parent aa498a0b30
commit bc95a98652
3 changed files with 125 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

@@ -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"
},

48
app/src/app.js
View File

@@ -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(_) {
var v = Math.sin((PIXI.ticker.shared.lastTime % 2000)/2000.* Math.PI)
PIXI.ticker.shared.add(function (_) {
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)
})

81
app/src/selectbox.js Normal file
View File

@@ -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
}
}