Skip to content

Commit 3567b05

Browse files
codeperfectpluscodeperfectplus
committed
Refactor API endpoint URL in graphs.js to include targets in the filter parameter
1 parent 4253df9 commit 3567b05

2 files changed

Lines changed: 353 additions & 60 deletions

File tree

‎src/static/js/graphs copy.js‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
// Variables to store chart instances
2+
let cpuTimeChart, memoryTimeChart, batteryTimeChart, networkTimeChart, dashboardMemoryTimeChart, cpuFrequencyTimeChart, currentTempTimeChart;
3+
4+
// Function to fetch data and render charts
5+
function fetchDataAndRenderCharts() {
6+
// Retrieve stored filter value from local storage or set default value
7+
const storedFilterValue = localStorage.getItem('filterValue') || 5;
8+
9+
// Set the filter element value to the stored filter value
10+
document.getElementById('timeFilter').value = storedFilterValue;
11+
12+
console.log('Stored Filter Value:', storedFilterValue);
13+
14+
// Fetch data with the selected time filter
15+
fetch(`/api/v1/prometheus/graphs_data?filter=${storedFilterValue}`)
16+
.then(response => response.json())
17+
.then(data => {
18+
const cpuData = data.cpu;
19+
const memoryData = data.memory;
20+
const batteryData = data.battery;
21+
const networkSentData = data.network_sent;
22+
const networkReceivedData = data.network_received;
23+
const dashboardMemoryUsageData = data.dashboard_memory_usage;
24+
const cpuFrequencyData = data.cpu_frequency;
25+
const currentTempData = data.current_temp;
26+
const currentTime = data.current_time;
27+
const timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
28+
29+
// Format the time data using the currentTime from backend
30+
const timeData = data.time.map(time => formatDate(time, currentTime));
31+
32+
displayTimeAndTimeZone(currentTime, timeZoneName);
33+
34+
createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData);
35+
})
36+
.catch(error => console.error('Error fetching data:', error));
37+
}
38+
39+
// Add event listener to refresh data when filter value changes
40+
document.getElementById('timeFilter').addEventListener('change', (event) => {
41+
// Save the new filter value to local storage
42+
localStorage.setItem('filterValue', event.target.value);
43+
// Fetch data with the new filter value
44+
fetchDataAndRenderCharts();
45+
});
46+
47+
// Initial fetch when the page loads
48+
document.addEventListener('DOMContentLoaded', () => {
49+
fetchDataAndRenderCharts();
50+
});
51+
52+
// Add the refresh button to fetch the data
53+
document.getElementById('refreshData').addEventListener('click', () => {
54+
fetchDataAndRenderCharts();
55+
});
56+
57+
document.getElementById('refreshCpuTime').addEventListener('click', () => {
58+
fetchDataAndRenderCharts();
59+
});
60+
61+
document.getElementById('refreshMemoryTime').addEventListener('click', () => {
62+
fetchDataAndRenderCharts();
63+
});
64+
65+
document.getElementById('refreshBatteryTime').addEventListener('click', () => {
66+
fetchDataAndRenderCharts();
67+
});
68+
69+
document.getElementById('refreshNetworkTime').addEventListener('click', () => {
70+
fetchDataAndRenderCharts();
71+
});
72+
73+
document.getElementById('refreshDashboardMemoryTime').addEventListener('click', () => {
74+
fetchDataAndRenderCharts();
75+
});
76+
77+
document.getElementById('refreshCpuFrequencyTime').addEventListener('click', () => {
78+
fetchDataAndRenderCharts();
79+
});
80+
81+
document.getElementById('refreshCurrentTempTime').addEventListener('click', () => {
82+
fetchDataAndRenderCharts();
83+
});
84+
85+
86+
function formatDate(dateString, currentTime) {
87+
const date = new Date(dateString);
88+
const now = new Date(currentTime); // Use currentTime from backend
89+
90+
// Helper function to format with leading zeros
91+
const pad = (num) => String(num).padStart(2, '0');
92+
93+
// Manually extract UTC components
94+
const day = pad(date.getUTCDate()); // e.g., 09
95+
const month = pad(date.getUTCMonth() + 1); // e.g., 04
96+
const year = date.getUTCFullYear(); // e.g., 2021
97+
const hours = pad(date.getUTCHours()); // e.g., 11
98+
const minutes = pad(date.getUTCMinutes()); // e.g., 33
99+
100+
101+
// Calculate time differences
102+
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
103+
const diffWeeks = Math.floor(diffDays / 7);
104+
const diffMonths = now.getMonth() - date.getUTCMonth() + (12 * (now.getFullYear() - date.getUTCFullYear()));
105+
const diffYears = now.getFullYear() - date.getUTCFullYear();
106+
107+
// Determine the label based on time differences
108+
// // Reset the time to 12am for the date comparison
109+
// date.setUTCHours(0, 0, 0, 0);
110+
// now.setUTCHours(0, 0, 0, 0);
111+
112+
// if (diffDays === 0) {
113+
// return `Today ${hours}:${minutes}`;
114+
// } else if (diffDays === 1) {
115+
// return `Yesterday ${hours}:${minutes}`;
116+
// } else if (diffDays <= 3) {
117+
// return `${diffDays} Days Ago ${hours}:${minutes}`;
118+
// } else if (diffDays <= 7) {
119+
// return `${Math.ceil(diffDays / 7)} Week${diffDays > 7 ? 's' : ''} Ago ${hours}:${minutes}`;
120+
// } else if (diffDays <= 30) {
121+
// return `${Math.ceil(diffDays / 7)} Weeks Ago ${hours}:${minutes}`;
122+
// } else if (diffMonths < 12) {
123+
// return `${diffMonths} Month${diffMonths > 1 ? 's' : ''} Ago ${hours}:${minutes}`;
124+
// } else if (diffYears < 2) {
125+
// return `Last Year ${hours}:${minutes}`;
126+
// } else {
127+
// return `${year}/${month}/${day} ${hours}:${minutes}`;
128+
// }
129+
130+
return `${year}/${month}/${day} ${hours}:${minutes}`;
131+
}
132+
133+
function displayTimeAndTimeZone(currentTime, timeZoneName) {
134+
// Display the current time and timezone
135+
document.getElementById('currentTime').textContent = `Current Time: ${currentTime}`;
136+
document.getElementById('timeZoneName').textContent = `Time Zone: ${timeZoneName}`;
137+
// Update currentTime by 1 second every second
138+
setInterval(() => {
139+
const date = new Date(currentTime);
140+
date.setSeconds(date.getSeconds() + 1);
141+
currentTime = date.toISOString();
142+
document.getElementById('currentTime').textContent = `Current Time: ${currentTime}`;
143+
}, 1000);
144+
}
145+
146+
// add the refresh button to fetch the data
147+
document.getElementById('refreshData').addEventListener('click', () => {
148+
fetchDataAndRenderCharts();
149+
});
150+
151+
152+
// Function to create a chart with multiple datasets
153+
function createChart(ctx, labels, datasets, yLabel) {
154+
if (ctx.chart) {
155+
ctx.chart.destroy(); // Destroy the existing chart if it exists
156+
}
157+
158+
ctx.chart = new Chart(ctx, {
159+
type: 'line',
160+
data: {
161+
labels: labels, // Use your timeData directly as labels
162+
datasets: datasets
163+
},
164+
options: {
165+
scales: {
166+
x: {
167+
type: 'category', // Use 'category' scale to treat time as strings
168+
title: {
169+
display: true,
170+
text: 'Time'
171+
},
172+
ticks: {
173+
autoSkip: true, // Automatically skip some labels to prevent overlap
174+
maxTicksLimit: 10, // Maximum number of ticks to display
175+
maxRotation: 20, // Prevent rotating the labels for better readability
176+
minRotation: 0,
177+
178+
}
179+
},
180+
y: {
181+
beginAtZero: true,
182+
title: {
183+
display: true,
184+
text: yLabel
185+
}
186+
}
187+
}
188+
}
189+
});
190+
}
191+
192+
193+
// Function to create charts with the fetched data
194+
function createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData) {
195+
// CPU Usage Chart
196+
const ctxCpu = document.getElementById('cpuTimeChart').getContext('2d');
197+
createChart(ctxCpu, timeData, [{
198+
label: 'CPU Usage (%)',
199+
data: cpuData,
200+
borderColor: 'rgba(75, 192, 192, 1)',
201+
backgroundColor: 'rgba(75, 192, 192, 0.2)',
202+
fill: true,
203+
tension: 0.4
204+
}], 'CPU Usage (%)');
205+
206+
// Memory Usage Chart
207+
const ctxMemory = document.getElementById('memoryTimeChart').getContext('2d');
208+
createChart(ctxMemory, timeData, [{
209+
label: 'Memory Usage (%)',
210+
data: memoryData,
211+
borderColor: 'rgba(153, 102, 255, 1)',
212+
backgroundColor: 'rgba(153, 102, 255, 0.2)',
213+
fill: true,
214+
tension: 0.4
215+
}], 'Memory Usage (%)');
216+
217+
// Battery Percentage Chart
218+
const ctxBattery = document.getElementById('batteryTimeChart').getContext('2d');
219+
createChart(ctxBattery, timeData, [{
220+
label: 'Battery Percentage (%)',
221+
data: batteryData,
222+
borderColor: 'rgba(255, 159, 64, 1)',
223+
backgroundColor: 'rgba(255, 159, 64, 0.2)',
224+
fill: true,
225+
tension: 0.4
226+
}], 'Battery Percentage (%)');
227+
228+
// Network Sent & Received Chart
229+
const ctxNetwork = document.getElementById('networkTimeChart').getContext('2d');
230+
createChart(ctxNetwork, timeData, [
231+
{
232+
label: 'Network Sent (MB)',
233+
data: networkSentData,
234+
borderColor: 'rgba(255, 99, 132, 1)',
235+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
236+
fill: true,
237+
tension: 0.4
238+
},
239+
{
240+
label: 'Network Received (MB)',
241+
data: networkReceivedData,
242+
borderColor: 'rgba(54, 162, 235, 1)',
243+
backgroundColor: 'rgba(54, 162, 235, 0.2)',
244+
fill: true,
245+
tension: 0.4
246+
}
247+
], 'Data Transferred (MB)');
248+
249+
// Dashboard Memory Usage Chart
250+
const ctxDashboardMemory = document.getElementById('dashboardMemoryTimeChart').getContext('2d');
251+
createChart(ctxDashboardMemory, timeData, [{
252+
label: 'Dashboard Memory Usage (%)',
253+
data: dashboardMemoryUsageData,
254+
borderColor: 'rgba(255, 99, 132, 1)',
255+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
256+
fill: true,
257+
tension: 0.4
258+
}], 'Dashboard Memory Usage (%)');
259+
260+
// CPU Frequency Chart
261+
const ctxCpuFrequency = document.getElementById('cpuFrequencyTimeChart').getContext('2d');
262+
createChart(ctxCpuFrequency, timeData, [{
263+
label: 'CPU Frequency (GHz)',
264+
data: cpuFrequencyData,
265+
borderColor: 'rgba(255, 99, 132, 1)',
266+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
267+
fill: true,
268+
tension: 0.4
269+
}], 'CPU Frequency (GHz)');
270+
271+
// Current Temperature Chart
272+
const ctxCurrentTemp = document.getElementById('currentTempTimeChart').getContext('2d');
273+
createChart(ctxCurrentTemp, timeData, [{
274+
label: 'Current Temperature (°C)',
275+
data: currentTempData,
276+
borderColor: 'rgba(255, 99, 132, 1)',
277+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
278+
fill: true,
279+
tension: 0.4
280+
}], 'Current Temperature (°C)');
281+
}
282+
283+
// Fetch initial data when the page loads
284+
document.addEventListener('DOMContentLoaded', () => {
285+
fetchDataAndRenderCharts();
286+
});

0 commit comments

Comments
 (0)