Skip to content

Jabis Sev贸n / esm

Go to a project
Toggle navigation
Toggle navigation pinning
5c7a8006 by Rafal Wilinski
Options

:mans_shoe: Proof of concept with CPU and Memory

1 parent 87b6f07e
Inline Side-by-side
Showing 2 changed files with 120 additions and 23 deletions
index.html
...@@ -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>
......
index.js
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 socketPort: 41338, 11 socketPort: 41338,
12 path: '/status', 12 path: '/status',
13 interval: 1, 13 interval: 1,
14 retention: 30, 14 retention: 100,
15 }; 15 };
16 16
17 const gatherOsMetrics = (io) => { 17 const gatherOsMetrics = (io) => {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!