From a1efd924026ecb7e0a594fc3cbf1f385ff0dcc65 Mon Sep 17 00:00:00 2001 From: Tang Ning Date: Thu, 7 Apr 2016 20:02:45 +0800 Subject: [PATCH] Show memory usage --- index.html | 4 +- js/stats.js | 90 +++++++++++++++++++++++++++++-------------- stylesheets/main.css | 2 +- stylesheets/main.less | 2 +- templates/cpu.tmpl | 2 +- templates/mem.tmpl | 30 +++++++++++++++ 6 files changed, 97 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 8785848..ebbaaf4 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,11 @@
- - diff --git a/js/stats.js b/js/stats.js index 6829926..68a2dcb 100644 --- a/js/stats.js +++ b/js/stats.js @@ -8,14 +8,14 @@ const ipc = require('electron').ipcRenderer; require('highcharts/modules/exporting')(Highcharts); -var ract, cpu_chart, cpu_monitor; +var ract, cpu_chart, cpu_monitor, mem_monitor; var templates = { cpu: fs.readFileSync(__dirname + '/templates/cpu.tmpl').toString(), mem: fs.readFileSync(__dirname + '/templates/mem.tmpl').toString() }; -function plotCpuChart(data) { +function plotChart(id, data) { var option = { chart: { type: 'area' @@ -64,67 +64,101 @@ function plotCpuChart(data) { }, series: [{ showInLegend: false, - data: data.sys + data: data[0] }, { showInLegend: false, - data: data.user + data: data[1] }], credits: { enabled: false } }; - if (!cpu_chart) { - Highcharts.chart('cpu_chart', option, function(chart) { - console.log('chart created'); - }); - } - else { - // cpu_chart.series[0].setData(data.user, false); - // cpu_chart.series[1].setData(data.sys, false); - } + Highcharts.chart(id, option, function(chart) { + }); } -ipc.on('show', function() { +var cpu_data = { + chart_data: [[], []] +}; + +function showCpuStats() { if (!cpu_monitor) cpu_monitor = new os.CpuMonitor({delay: 1}); - var cpu_data = { - chart_data: { - user: [null, null, 1,2,3,4,5,6,7], - sys: [null, null, 1,2,3,4,5,6,7] - } - }; - cpu_monitor.on('cpuUsage', function(data) { cpu_data.cpu = data; - cpu_data.chart_data.user.push(parseFloat(data.user)); - cpu_data.chart_data.sys.push(parseFloat(data.sys)); - - render(templates.cpu, cpu_data); + cpu_data.chart_data[0].push(parseFloat(data.user)); + cpu_data.chart_data[1].push(parseFloat(data.sys)); + render('cpu_chart', templates.cpu, cpu_data); }); cpu_monitor.on('topCpuProcs', function(data) { cpu_data.procs = data; - render(templates.cpu, cpu_data); + render('cpu_chart', templates.cpu, cpu_data); }); +} + +var mem_data = { + chart_data: [[], []] +}; + +function showMemStats() { + if (!mem_monitor) + mem_monitor = new os.MemMonitor({delay: 1}); + + mem_monitor.on('memUsage', function(data) { + mem_data.cpu = data; + mem_data.chart_data[0].push(parseFloat(1)); + mem_data.chart_data[1].push(parseFloat(2)); + render('mem_chart', templates.mem, mem_data); + }); + + mem_monitor.on('topMemProcs', function(data) { + mem_data.procs = data; + render('mem_chart', templates.mem, mem_data); + }); + +} + +var currentDisplay = 'cpu'; +showCpuStats(); + +ipc.on('show', function() { + if (currentDisplay === 'cpu') + showCpuStats(); + else if (currentDisplay === 'mem') + showMemStats(); }); ipc.on('after_hide', function() { if (cpu_monitor) cpu_monitor.emit('exit'); + if (mem_monitor) + mem_monitor.emit('exit'); + cpu_monitor = null; + mem_monitor = null; cpu_chart = null; }); +function switchDisplay(display) { + currentDisplay = display; + + if (currentDisplay === 'cpu') + showCpuStats(); + else if (currentDisplay === 'mem') + showMemStats(); +} + function quit() { ipc.send('quit'); } -function render(template, data) { +function render(id, template, data) { if (ract) ract.set(data); @@ -134,6 +168,6 @@ function render(template, data) { data: data }); - plotCpuChart(data.chart_data); + plotChart(id, data.chart_data); } diff --git a/stylesheets/main.css b/stylesheets/main.css index 67d13d3..cfb4304 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -1 +1 @@ -html,body{width:100%;height:100%;margin:0;padding:0}body{font-family:sans-serif}a{text-decoration:none}.window-content{flex-wrap:wrap}.window-content #cpu_chart{width:100%;height:100px}.window-content table{margin-top:-10px;margin-bottom:0}.window-content table .tb-head{text-align:center;font-weight:bold;background-color:#F8F8F8}.window-content table .right{text-align:right}.window-content table td{width:50%} \ No newline at end of file +html,body{width:100%;height:100%;margin:0;padding:0}body{font-family:sans-serif}a{text-decoration:none}.window-content{flex-wrap:wrap}.window-content .chart{width:100%;height:100px}.window-content table{margin-top:-10px;margin-bottom:0}.window-content table .tb-head{text-align:center;font-weight:bold;background-color:#F8F8F8}.window-content table .right{text-align:right}.window-content table td{width:50%} \ No newline at end of file diff --git a/stylesheets/main.less b/stylesheets/main.less index 21b5870..70a3cce 100644 --- a/stylesheets/main.less +++ b/stylesheets/main.less @@ -19,7 +19,7 @@ a { .window-content { flex-wrap: wrap; - #cpu_chart { + .chart { width: 100%; height: 100px; } diff --git a/templates/cpu.tmpl b/templates/cpu.tmpl index cf8e64e..7d37ced 100644 --- a/templates/cpu.tmpl +++ b/templates/cpu.tmpl @@ -1,4 +1,4 @@ -
+
diff --git a/templates/mem.tmpl b/templates/mem.tmpl index e69de29..e5c400b 100644 --- a/templates/mem.tmpl +++ b/templates/mem.tmpl @@ -0,0 +1,30 @@ +
+
+
+ + + + + + + + + + + + + + + +
Overview
Used{{ mem.used }} %
Wired{{ mem.wired }} %
Unused{{ mem.unused }} %
+ + + + + {{#each procs:p}} + + + + + {{/each}} +
Top Processes
{{ command }}{{ mem }} %