Skip to content

Commit 6dfee0f

Browse files
codeperfectpluscodeperfectplus
committed
chore: experimental graph created
1 parent 3567b05 commit 6dfee0f

5 files changed

Lines changed: 278 additions & 137 deletions

File tree

‎src/routes/graphs.py‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,9 @@
88
@admin_required
99
def graphs():
1010
return render_template('graphs/graphs.html')
11+
12+
13+
@app.route('/experimental/graphs')
14+
@admin_required
15+
def experimental_graphs():
16+
return render_template('experimental/graphs.html')

‎src/static/js/graphs.js‎

Lines changed: 65 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function fetchDataAndRenderCharts() {
1212
console.log('Stored Filter Value:', storedFilterValue);
1313

1414
// Fetch data with the selected time filter
15-
fetch(`/api/v1/prometheus/graphs_data/targets?filter=${storedFilterValue}`)
15+
fetch(`/api/v1/prometheus/graphs_data?filter=${storedFilterValue}`)
1616
.then(response => response.json())
1717
.then(data => {
1818
const cpuData = data.cpu;
@@ -164,17 +164,17 @@ function createChart(ctx, labels, datasets, yLabel) {
164164
options: {
165165
scales: {
166166
x: {
167-
type: 'category', // Use 'category' scale to treat time as strings
167+
type: 'category',
168+
reverse: true, // Reverse the x-axis to start from the right
168169
title: {
169170
display: true,
170171
text: 'Time'
171172
},
172173
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
174+
autoSkip: true,
175+
maxTicksLimit: 10,
176+
maxRotation: 20,
176177
minRotation: 0,
177-
178178
}
179179
},
180180
y: {
@@ -194,97 +194,90 @@ function createChart(ctx, labels, datasets, yLabel) {
194194
function createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData) {
195195
// CPU Usage Chart
196196
const ctxCpu = document.getElementById('cpuTimeChart').getContext('2d');
197-
const cpuDatasets = cpuData.map((cpu, index) => ({
198-
label: `CPU Usage (%) ${cpu.metric.instance}`,
199-
data: cpu.values,
200-
borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
201-
backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
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,
202203
tension: 0.4
203-
}));
204-
205-
createChart(ctxCpu, timeData, cpuDatasets, 'CPU Usage (%)');
204+
}], 'CPU Usage (%)');
206205

207206
// Memory Usage Chart
208207
const ctxMemory = document.getElementById('memoryTimeChart').getContext('2d');
209-
const memoryDatasets = memoryData.map((memory, index) => ({
210-
label: `Memory Usage (%) ${memory.metric.instance}`,
211-
data: memory.values,
212-
borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
213-
backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
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,
214214
tension: 0.4
215-
}));
216-
217-
createChart(ctxMemory, timeData, memoryDatasets, 'Memory Usage (%)');
215+
}], 'Memory Usage (%)');
218216

219217
// Battery Percentage Chart
220218
const ctxBattery = document.getElementById('batteryTimeChart').getContext('2d');
221-
const batteryDatasets = batteryData.map((battery, index) => ({
222-
label: `Battery Usage (%) ${battery.metric.instance}`,
223-
data: battery.values,
224-
borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
225-
backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
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,
226225
tension: 0.4
227-
}));
228-
229-
createChart(ctxBattery, timeData, batteryDatasets, 'Battery Percentage (%)');
226+
}], 'Battery Percentage (%)');
230227

231228
// Network Sent & Received Chart
232229
const ctxNetwork = document.getElementById('networkTimeChart').getContext('2d');
233-
const networkDatasets = [
234-
...networkSentData.map((networkSent, index) => ({
235-
label: `Network Sent (MB) ${networkSent.metric.instance}`,
236-
data: networkSent.values,
237-
borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
238-
backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
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,
239237
tension: 0.4
240-
})),
241-
...networkReceivedData.map((networkReceived, index) => ({
242-
label: `Network Received (MB) ${networkReceived.metric.instance}`,
243-
data: networkReceived.values,
244-
borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
245-
backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
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,
246245
tension: 0.4
247-
}))
248-
];
249-
250-
createChart(ctxNetwork, timeData, networkDatasets, 'Data Transferred (MB)');
246+
}
247+
], 'Data Transferred (MB)');
251248

252249
// Dashboard Memory Usage Chart
253250
const ctxDashboardMemory = document.getElementById('dashboardMemoryTimeChart').getContext('2d');
254-
const dashboardMemoryDatasets = dashboardMemoryUsageData.map((dashboardMemory, index) => ({
255-
label: `Dashboard Memory Usage (%) ${dashboardMemory.metric.instance}`,
256-
data: dashboardMemory.values,
257-
borderColor: `rgba(${75 + index * 20}, 192, 75, 1)`,
258-
backgroundColor: `rgba(${75 + index * 20}, 192, 75, 0.2)`,
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,
259257
tension: 0.4
260-
}));
261-
262-
createChart(ctxDashboardMemory, timeData, dashboardMemoryDatasets, 'Dashboard Memory Usage (%)');
258+
}], 'Dashboard Memory Usage (%)');
263259

264260
// CPU Frequency Chart
265261
const ctxCpuFrequency = document.getElementById('cpuFrequencyTimeChart').getContext('2d');
266-
const cpuFrequencyDatasets = cpuFrequencyData.map((cpuFrequency, index) => ({
267-
label: `CPU Frequency (GHz) ${cpuFrequency.metric.instance}`,
268-
data: cpuFrequency.values,
269-
borderColor: `rgba(${192 + index * 20}, 192, 75, 1)`,
270-
backgroundColor: `rgba(${192 + index * 20}, 192, 75, 0.2)`,
271-
tension: 0.4,
272-
273-
}));
274-
275-
createChart(ctxCpuFrequency, timeData, cpuFrequencyDatasets, 'CPU Frequency (GHz)');
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)');
276270

277271
// Current Temperature Chart
278272
const ctxCurrentTemp = document.getElementById('currentTempTimeChart').getContext('2d');
279-
const currentTempDatasets = currentTempData.map((currentTemp, index) => ({
280-
label: `Current Temperature (°C) ${currentTemp.metric.instance}`,
281-
data: currentTemp.values,
282-
borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
283-
backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
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,
284279
tension: 0.4
285-
}));
286-
287-
createChart(ctxCurrentTemp, timeData, currentTempDatasets, 'Current Temperature (°C)');
280+
}], 'Current Temperature (°C)');
288281
}
289282

290283
// Fetch initial data when the page loads

src/static/js/graphs copy.js renamed to src/static/js/graphs_experimental.js

Lines changed: 74 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function fetchDataAndRenderCharts() {
1212
console.log('Stored Filter Value:', storedFilterValue);
1313

1414
// Fetch data with the selected time filter
15-
fetch(`/api/v1/prometheus/graphs_data?filter=${storedFilterValue}`)
15+
fetch(`/api/v1/prometheus/graphs_data/targets?filter=${storedFilterValue}`)
1616
.then(response => response.json())
1717
.then(data => {
1818
const cpuData = data.cpu;
@@ -26,6 +26,8 @@ function fetchDataAndRenderCharts() {
2626
const currentTime = data.current_time;
2727
const timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
2828

29+
console.log('cpuFrequencyData:', cpuFrequencyData);
30+
2931
// Format the time data using the currentTime from backend
3032
const timeData = data.time.map(time => formatDate(time, currentTime));
3133

@@ -164,17 +166,17 @@ function createChart(ctx, labels, datasets, yLabel) {
164166
options: {
165167
scales: {
166168
x: {
167-
type: 'category', // Use 'category' scale to treat time as strings
169+
type: 'category',
170+
reverse: true, // Reverse the x-axis to start from the right
168171
title: {
169172
display: true,
170173
text: 'Time'
171174
},
172175
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+
autoSkip: true,
177+
maxTicksLimit: 10,
178+
maxRotation: 20,
176179
minRotation: 0,
177-
178180
}
179181
},
180182
y: {
@@ -194,90 +196,97 @@ function createChart(ctx, labels, datasets, yLabel) {
194196
function createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData) {
195197
// CPU Usage Chart
196198
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,
199+
const cpuDatasets = cpuData.map((cpu, index) => ({
200+
label: `CPU Usage (%) ${cpu.metric.instance}`,
201+
data: cpu.values,
202+
borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
203+
backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
203204
tension: 0.4
204-
}], 'CPU Usage (%)');
205+
}));
206+
207+
createChart(ctxCpu, timeData, cpuDatasets, 'CPU Usage (%)');
205208

206209
// Memory Usage Chart
207210
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,
211+
const memoryDatasets = memoryData.map((memory, index) => ({
212+
label: `Memory Usage (%) ${memory.metric.instance}`,
213+
data: memory.values,
214+
borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
215+
backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
214216
tension: 0.4
215-
}], 'Memory Usage (%)');
217+
}));
218+
219+
createChart(ctxMemory, timeData, memoryDatasets, 'Memory Usage (%)');
216220

217221
// Battery Percentage Chart
218222
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,
223+
const batteryDatasets = batteryData.map((battery, index) => ({
224+
label: `Battery Usage (%) ${battery.metric.instance}`,
225+
data: battery.values,
226+
borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
227+
backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
225228
tension: 0.4
226-
}], 'Battery Percentage (%)');
229+
}));
230+
231+
createChart(ctxBattery, timeData, batteryDatasets, 'Battery Percentage (%)');
227232

228233
// Network Sent & Received Chart
229234
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,
235+
const networkDatasets = [
236+
...networkSentData.map((networkSent, index) => ({
237+
label: `Network Sent (MB) ${networkSent.metric.instance}`,
238+
data: networkSent.values,
239+
borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
240+
backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
237241
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,
242+
})),
243+
...networkReceivedData.map((networkReceived, index) => ({
244+
label: `Network Received (MB) ${networkReceived.metric.instance}`,
245+
data: networkReceived.values,
246+
borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
247+
backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
245248
tension: 0.4
246-
}
247-
], 'Data Transferred (MB)');
249+
}))
250+
];
251+
252+
createChart(ctxNetwork, timeData, networkDatasets, 'Data Transferred (MB)');
248253

249254
// Dashboard Memory Usage Chart
250255
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,
256+
const dashboardMemoryDatasets = dashboardMemoryUsageData.map((dashboardMemory, index) => ({
257+
label: `Dashboard Memory Usage (%) ${dashboardMemory.metric.instance}`,
258+
data: dashboardMemory.values,
259+
borderColor: `rgba(${75 + index * 20}, 192, 75, 1)`,
260+
backgroundColor: `rgba(${75 + index * 20}, 192, 75, 0.2)`,
257261
tension: 0.4
258-
}], 'Dashboard Memory Usage (%)');
262+
}));
263+
264+
createChart(ctxDashboardMemory, timeData, dashboardMemoryDatasets, 'Dashboard Memory Usage (%)');
259265

260266
// CPU Frequency Chart
261267
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)');
268+
const cpuFrequencyDatasets = cpuFrequencyData.map((cpuFrequency, index) => ({
269+
label: `CPU Frequency (GHz) ${cpuFrequency.metric.instance}`,
270+
data: cpuFrequency.values,
271+
borderColor: `rgba(${192 + index * 20}, 192, 75, 1)`,
272+
backgroundColor: `rgba(${192 + index * 20}, 192, 75, 0.2)`,
273+
tension: 0.4,
274+
275+
}));
276+
277+
createChart(ctxCpuFrequency, timeData, cpuFrequencyDatasets, 'CPU Frequency (GHz)');
270278

271279
// Current Temperature Chart
272280
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,
281+
const currentTempDatasets = currentTempData.map((currentTemp, index) => ({
282+
label: `Current Temperature (°C) ${currentTemp.metric.instance}`,
283+
data: currentTemp.values,
284+
borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
285+
backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
279286
tension: 0.4
280-
}], 'Current Temperature (°C)');
287+
}));
288+
289+
createChart(ctxCurrentTemp, timeData, currentTempDatasets, 'Current Temperature (°C)');
281290
}
282291

283292
// Fetch initial data when the page loads

0 commit comments

Comments
 (0)