Proof of concept with CPU and Memory
Showing
2 changed files
with
120 additions
and
23 deletions
... | @@ -3,50 +3,147 @@ | ... | @@ -3,50 +3,147 @@ |
3 | <head> | 3 | <head> |
4 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script> | 4 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script> |
5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script> | 5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script> |
6 | <style> | ||
7 | * { | ||
8 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | ||
9 | } | ||
10 | |||
11 | h1 { | ||
12 | font-size: 3em; | ||
13 | color: #222222; | ||
14 | margin: 0; | ||
15 | } | ||
16 | |||
17 | h5 { | ||
18 | margin: 0; | ||
19 | color: #888888; | ||
20 | } | ||
21 | |||
22 | p { | ||
23 | font-size: 0.7em; | ||
24 | color: #888888; | ||
25 | } | ||
26 | |||
27 | .stats-column { | ||
28 | display: flex; | ||
29 | flex-direction: column; | ||
30 | justify-content: center; | ||
31 | align-content: center; | ||
32 | margin-right: 3em; | ||
33 | } | ||
34 | |||
35 | .container { | ||
36 | display: flex; | ||
37 | flex-direction: row; | ||
38 | margin: auto; | ||
39 | } | ||
40 | |||
41 | .footer { | ||
42 | position: fixed; | ||
43 | margin: auto; | ||
44 | text-align: center; | ||
45 | left: 0; | ||
46 | right: 0; | ||
47 | bottom: 0; | ||
48 | } | ||
49 | </style> | ||
6 | </head> | 50 | </head> |
7 | <body> | 51 | <body> |
8 | <div style="width: 400px; margin: auto"> | 52 | <div style="width: 400px; margin: auto"> |
9 | <canvas id="myChart" width="400" height="200"></canvas> | 53 | <h3>Express Status</h3> |
54 | <div class="container"> | ||
55 | <div class="stats-column"> | ||
56 | <h5>CPU Usage</h5> | ||
57 | <h1 id="cpuStat">0.03%</h1> | ||
58 | </div> | ||
59 | <canvas id="cpuChart" width="400" height="100"></canvas> | ||
60 | </div> | ||
61 | <div class="container"> | ||
62 | <div class="stats-column"> | ||
63 | <h5>Memory Usage</h5> | ||
64 | <h1 id="memStat">0.03%</h1> | ||
65 | </div> | ||
66 | <canvas id="memChart" width="400" height="100"></canvas> | ||
67 | </div> | ||
68 | <div class="footer"> | ||
69 | <p>Powered by Socket.io</p> | ||
70 | </div> | ||
10 | </div> | 71 | </div> |
11 | <script> | 72 | <script> |
73 | Chart.defaults.global.defaultFontSize = 8; | ||
74 | Chart.defaults.global.animation.duration = 500; | ||
75 | Chart.defaults.global.legend.display = false; | ||
76 | Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)"; | ||
77 | Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)"; | ||
78 | Chart.defaults.global.elements.line.borderWidth = 2; | ||
79 | |||
12 | var socket = io('http://localhost:41338'); | 80 | var socket = io('http://localhost:41338'); |
13 | var labels = [0]; | 81 | var labels = []; |
14 | var dataset = [{ | 82 | var cpuDataset = [{ |
15 | label: 'CPU Usage in %', | 83 | label: 'CPU Usage in %', |
16 | data: [0], | 84 | data: [], |
17 | lineTension: 0, | 85 | lineTension: 0.3, |
18 | pointRadius: 0 | 86 | pointRadius: 0, |
19 | }]; | 87 | }]; |
20 | 88 | var memDataset = [{ | |
21 | var ctx = document.getElementById("myChart"); | 89 | label: 'Memory Usage in MB', |
22 | var myChart = new Chart(ctx, { | 90 | data: [], |
23 | type: 'line', | 91 | lineTension: 0.6, |
24 | data: { | 92 | pointRadius: 0, |
25 | labels: labels, | 93 | }]; |
26 | datasets: dataset, | 94 | var defaultOptions = { |
27 | }, | ||
28 | options: { | ||
29 | scales: { | 95 | scales: { |
30 | yAxes: [{ | 96 | yAxes: [{ |
31 | ticks: { | 97 | ticks: { |
32 | beginAtZero: true | 98 | beginAtZero: true |
33 | } | 99 | } |
34 | }], | 100 | }], |
101 | xAxes: [{ | ||
102 | type: 'time', | ||
103 | time: { | ||
104 | unitStepSize: 30 | ||
105 | }, | ||
106 | gridLines: { | ||
107 | display: false | ||
108 | } | ||
109 | }] | ||
35 | }, | 110 | }, |
36 | tooltips: { | 111 | tooltips: { |
37 | enabled: false | 112 | enabled: false |
38 | } | 113 | } |
39 | } | 114 | }; |
115 | |||
116 | var cpuStat = document.getElementById('cpuStat'); | ||
117 | var cpuChartCtx = document.getElementById("cpuChart"); | ||
118 | var memChartCtx = document.getElementById("memChart"); | ||
119 | var cpuChart = new Chart(cpuChartCtx, { | ||
120 | type: 'line', | ||
121 | data: { | ||
122 | labels: labels, | ||
123 | datasets: cpuDataset, | ||
124 | }, | ||
125 | options: defaultOptions | ||
126 | }); | ||
127 | |||
128 | var memChart = new Chart(memChartCtx, { | ||
129 | type: 'line', | ||
130 | data: { | ||
131 | labels: labels, | ||
132 | datasets: memDataset, | ||
133 | }, | ||
134 | options: defaultOptions | ||
40 | }); | 135 | }); |
41 | 136 | ||
42 | socket.on('stats', function (data) { | 137 | socket.on('stats', function (data) { |
43 | console.log(data); | 138 | cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%'; |
44 | labels = data.osStats.map((point) => point.timestamp); | 139 | cpuChart.data.datasets[0].data = data.osStats.map((point) => point.cpu); |
45 | dataset[0].data = data.osStats.map((point) => point.cpu); | 140 | cpuChart.data.labels = data.osStats.map((point) => point.timestamp); |
141 | cpuChart.update(); | ||
46 | 142 | ||
47 | myChart.data.datasets[0].data.push(data.osStats[data.osStats.length - 1].cpu); | 143 | memStat.textContent = (data.osStats[data.osStats.length - 1].memory / 1024 / 1024).toFixed(1) + 'MB'; |
48 | myChart.data.labels.push(data.osStats[data.osStats.length - 1].timestamp); | 144 | memChart.data.datasets[0].data = data.osStats.map((point) => point.memory); |
49 | myChart.update(); | 145 | memChart.data.labels = data.osStats.map((point) => point.timestamp); |
146 | memChart.update(); | ||
50 | }); | 147 | }); |
51 | </script> | 148 | </script> |
52 | </body> | 149 | </body> | ... | ... |
-
Please register or sign in to post a comment