STEINNI
114 lines
3.4 KiB
JavaScript
Executable File
114 lines
3.4 KiB
JavaScript
Executable File
class statusView extends EICDomContent {
|
|
|
|
times = [];
|
|
fps;
|
|
prevTime = Date.now();
|
|
frames = 0;
|
|
paused = false;
|
|
|
|
DOMContentLoaded() {
|
|
|
|
ui.eicfy(this.el);
|
|
this.fps = 0;
|
|
|
|
if(performance && performance.memory) {
|
|
this.memchart = new BarChart(this.find('.metrics [eicbarchart].memory'), {
|
|
title: '',
|
|
maxPlot: 20,
|
|
data: [ ]
|
|
});
|
|
} else {
|
|
this.find('.metrics [eicbarchart].memory').parentElement.remove();
|
|
}
|
|
|
|
if(window.requestAnimationFrame) {
|
|
this.fpschart = new BarChart(this.find('.metrics [eicbarchart].fps'), {
|
|
title: '',
|
|
maxPlot: 20,
|
|
data: [ ]
|
|
});
|
|
|
|
window.requestAnimationFrame(this.loop.bind(this));
|
|
}
|
|
|
|
// start monitoring services
|
|
this.tickerId = setInterval(this.tick.bind(this), 1000);
|
|
|
|
this.contents = new DataGrid(this.find('.contents'), {
|
|
headers: [
|
|
{label: 'ID', sortable:true, filter: 'text'},
|
|
{label: 'class', sortable:true, filter: 'text'},
|
|
{label: 'type', sortable:true, filter: 'list'},
|
|
],
|
|
height: '200px'
|
|
});
|
|
|
|
this.assets = new DataGrid(this.find('.assets'), {
|
|
headers: [
|
|
{label: 'type', sortable:true, filter: 'list'},
|
|
{label: 'resource', sortable:true, filter: 'text'},
|
|
],
|
|
height: '200px'
|
|
});
|
|
|
|
this.refresh();
|
|
}
|
|
|
|
refresh() {
|
|
this.contents.clear();
|
|
|
|
for(let i = 0; i < Controller._contents.length; i++) {
|
|
let item = Controller._contents[i];
|
|
this.contents.addRow(item.view._sparcId, [ item.view._sparcId, item.view._className, item.type ]);
|
|
}
|
|
|
|
this.assets.clear();
|
|
|
|
for(let type in app.Assets.Store) {
|
|
let group = app.Assets.Store[type];
|
|
for(let resource in group) {
|
|
this.assets.addRow('', [ type, resource ]);
|
|
}
|
|
}
|
|
}
|
|
|
|
tick() {
|
|
|
|
if(performance && performance.memory) {
|
|
let memory = performance.memory;
|
|
let current = Math.round(100 * Math.round( memory.usedJSHeapSize / 1024) / 1024) / 100;
|
|
let max = Math.round( memory.jsHeapSizeLimit / 1024) / 1024;
|
|
|
|
this.memchart.options.title = '<tspan large>' + current + '</tspan> <tspan small>Mb (' + Math.round(1000 * (memory.totalJSHeapSize / memory.jsHeapSizeLimit)) / 10 + '%)</tspan>'
|
|
this.memchart.add({value: current, severity: 'info'});
|
|
}
|
|
|
|
this.fpschart.options.title = '<tspan large>' + this.fps + '</tspan> <tspan small>fps</tspan>';
|
|
this.fpschart.add({value: this.fps + 1, severity: 'info'});
|
|
}
|
|
|
|
|
|
loop() {
|
|
|
|
const time = Date.now();
|
|
this.frames++;
|
|
if (time > this.prevTime + 1000) {
|
|
this.fps = Math.round( ( this.frames * 1000 ) / ( time - this.prevTime ) );
|
|
this.prevTime = time;
|
|
this.frames = 0;
|
|
}
|
|
|
|
if(!this.paused) window.requestAnimationFrame(this.loop.bind(this));
|
|
}
|
|
|
|
DOMContentFocused() { this.refresh(); }
|
|
|
|
DOMContentRemoved() {
|
|
|
|
if(this.tickerId) { clearInterval(this.tickerId); }
|
|
this.paused = true;
|
|
}
|
|
|
|
}
|
|
|
|
app.registerClass('statusView', statusView); |