-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.gohtml
108 lines (98 loc) · 2.89 KB
/
index.gohtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Resource Tracker</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Resource Tracker</h1>
<div id="cpu-mem-timeseries"></div>
</div>
<script>
// Initialize arrays to store the data
var timestamps = [];
var cpuUsage = [];
var memUsage = [];
// Function to get the current time in a suitable format
function getCurrentTime() {
return new Date().toISOString();
}
// Function to fetch data from the server
function fetchData() {
$.ajax({
url: 'http://localhost:8080/usage',
method: 'GET',
success: function(data) {
updateGraph(data.cpuPercent, data.memPercent);
},
error: function(xhr, status, error) {
console.error('Error fetching data:', error);
alert('Error fetching data. Please try again later.');
}
});
}
// Function to update the graph with new data
function updateGraph(newCpuUsage, newMemUsage) {
// Append new data to the arrays
var currentTime = getCurrentTime();
timestamps.push(currentTime);
cpuUsage.push(newCpuUsage);
memUsage.push(newMemUsage);
// Keep the arrays at a maximum length (e.g., the last 60 seconds)
if (timestamps.length > 60) {
timestamps.shift();
cpuUsage.shift();
memUsage.shift();
}
// Update the Plotly graph using extendTraces
Plotly.extendTraces('cpu-mem-timeseries', {
x: [[currentTime], [currentTime]],
y: [[newCpuUsage], [newMemUsage]]
}, [0, 1]);
// Optionally, you can use relayout to adjust the x-axis range
Plotly.relayout('cpu-mem-timeseries', {
xaxis: {
range: [timestamps[0], timestamps[timestamps.length - 1]]
}
});
}
// Initial plot setup
var initialData = [
{
type: "scatter",
mode: "lines",
name: 'CPU Usage',
x: [],
y: [],
line: {color: '#17BECF'}
},
{
type: "scatter",
mode: "lines",
name: 'Memory Usage',
x: [],
y: [],
line: {color: '#7F7F7F'}
}
];
var layout = {
title: 'CPU and Memory Usage Over Time',
xaxis: {
autorange: true,
type: 'date'
},
yaxis: {
autorange: true,
range: [0, 100],
type: 'linear'
}
};
Plotly.newPlot('cpu-mem-timeseries', initialData, layout);
// Fetch data every second
setInterval(fetchData, 1000);
</script>
</body>
</html>