cpu.html

<cpu-panel>
    <pigod-panel>
        <yield to="title">
            CPU
            <span style="font-size: 14px;">
                <span class="cpu-percent">{ cpu_perc }%</span>
                <span class="temperature">{ cpu_temp }&deg;C</span>
                <span class="frequency">{ cpu_freq }MHz</span>
                <span class="voltage">{ cpu_volt }V</span>
                <span class="uptime">{ uptime }</span>
                <span class="pull-right">
                    <span class="free_mem" title="Used">{ used_mem }</span>/<span class="used_mem" title="Free">{ free_mem }</span> MB
                </span>
            </span>
        </yield>
        <yield to="outside-body">
            <canvas name="usage_chart" width="420" height="45" class="smoothchart"></canvas>
            <canvas name="temp_chart" width="420" height="45" class="smoothchart"></canvas>
        </yield>
        <yield to="body">
            <riot-table rows={processes} context={model} defaultsort="^CPU">
                <riot-col key="USER" header="User" />
                <riot-col key="PID" header="PID" cls="text-right" 
                        tpl={'<a href="">{row.PID}</a>'} 
                        cellclick={ parent.model.linkClick } 
                />
                <riot-col key="NI" header="NI" cls="text-right" 
                        tpl={'<span class="glyphicon glyphicon-chevron-down faded"></span> {row.NI}
                            <span class="glyphicon glyphicon-chevron-up faded"></span>'} 
                        cellclick={ parent.model.niceClick }
                />
                <riot-col key="CPU" header="CPU%" cls="text-right"/>
                <riot-col key="MEM" header="Mem%" cls="text-right"/>
                <riot-col key="TIME" header="Time" cls="text-right"/>
                <riot-col key="COMMAND" header="Command" tpl={'<div class="truncate">{row.COMMAND}</div>'} />
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        td.column-USER {
            min-width: 45px;
        }
        td.column-TIME {
            min-width: 70px;
        }
        td.column-PID {
            min-width: 45px;
        }
        td.column-NI {
            min-width: 45px;
        }
        td.column-CPU {
            background-color: rgba(179,254,165,0.36);
        }
        .cpu-percent {
            color: #2FB075;
        }
        .temperature {
            color: #337ab7;
        }
        .voltage {
            color: #c75d5d;
        }
        .frequency {
            color: #9c7bbd;
        }
        span.free_mem {
            color: #3e6f5a;
        }
        
        span.used_mem {
            color: #de6868;
        }
        .column-NI .faded {
            opacity: 0.25;
            cursor: pointer;
            font-size: 12px;
        }
        .column-NI .faded:hover {
            opacity: 1;
        }

    </style>
    
    <script type="text/es6arrow">
        var cpuSeries = new TimeSeries();
        var tempSeries = new TimeSeries();
        var voltSeries = new TimeSeries();
        
        var defaultChartConfig = {
            millisPerPixel:500,
            maxValueScale:1.05,
            grid:{
                fillStyle:'#e2e2e2',
                strokeStyle:'rgba(0,0,0,0.20)',
                sharpLines:true,
                millisPerLine:10000,
                verticalSections:5
            },
            labels:{
                fillStyle:'#000000',
                fontSize:14,
                precision:1
            },
            tooltip: true,
            timestampFormatter:SmoothieChart.timeFormatter
        };
        
        function setupChart(canvas, series, chartConfig, seriesStyles) {
            var chart = new SmoothieChart(Object.assign(chartConfig, defaultChartConfig));
            chart.addTimeSeries(series, seriesStyles);
            chart.streamTo(canvas, 500);
        }
        
        this.on('panelmount', () => {
            setupChart(this.usage_chart, cpuSeries, {
                minValue: 0,
                yMinFormatter: () => '',
                yMaxFormatter: (max, prec) => parseFloat(max).toFixed(prec) + '%',
            }, { lineWidth:1.2, strokeStyle:'#30CE87', fillStyle:'rgba(161,228,148,0.36)' });
            
            stretchCanvas(this.usage_chart);
            
            setupChart(this.temp_chart, tempSeries, {
                minValueScale:1.05,
                yMinFormatter: (min, prec) => parseFloat(min).toFixed(prec) + '\u00b0C',
                yMaxFormatter: (max, prec) => parseFloat(max).toFixed(prec) + '\u00b0C',
            }, { lineWidth:1.2, strokeStyle:'#008cff', fillStyle:'rgba(27,134,252,0.36)' });
            
            stretchCanvas(this.temp_chart);
        });
        
        start() {
            opts.pubsub.subscribe('top', this.topHandler = data => this.updateProc(data));
            opts.pubsub.subscribe('cputemp', this.cpuTempHandler = data => this.updateCpuTemp(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('top', this.topHandler);
            opts.pubsub.unsubscribe('cputemp', this.cpuTempHandler);
        }

        updateProc(data) {
            cpuSeries.append(Date.now(), data.cpu_perc);
            this.update(data);
        }
                
        updateCpuTemp(data) {
            if (data.cpu_temp) tempSeries.append(Date.now(), data.cpu_temp);
            this.update(data);
        }
        
        linkClick(value, row) {
            var pid = parseInt(value);
            if (row && pid) {
                if (confirm('Kill pid ' + pid + ' (' + row.COMMAND + ')?')) {
                    opts.pubsub.publish('pidkill', { pid: pid });
                }
            }
        }
        
        renice(row, delta) {
            var pid = parseInt(row.PID);
            var ni = parseInt(row.NI);
            if (row && pid && !isNaN(ni)) {
                opts.pubsub.publish('renice', { pid: pid, ni: ni+delta });
            }
        }
        
        niceClick(value, row, col, evt) {
            var up = evt.target.className.indexOf('glyphicon-chevron-up') >= 0;
            var down = evt.target.className.indexOf('glyphicon-chevron-down') >=0;
            if (up) {
                this.renice(row, 1);
            }
            if (down) {
                this.renice(row, -1);
            }
        }

    </script>
</cpu-panel>