anobre/openshift-resource-governance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: correct dropdown order and add day format for 7d/30d charts

Browse Source
This commit is contained in:
Anderson
2025-10-03 09:57:19 -03:00
parent 6c2821609c
commit 958e76f513
1 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/static/index.html
View File

@@ -1403,13 +1403,13 @@
</button> </button>
</li> </li>
<li> <li>
<button class="pf-v6-c-dropdown__menu-item pf-m-selected" onclick="selectTimeRange('24h', 'Last 24 Hours')"> <button class="pf-v6-c-dropdown__menu-item" onclick="selectTimeRange('6h', 'Last 6 Hours')">
Last 24 Hours Last 6 Hours
</button> </button>
</li> </li>
<li> <li>
<button class="pf-v6-c-dropdown__menu-item" onclick="selectTimeRange('6h', 'Last 6 Hours')"> <button class="pf-v6-c-dropdown__menu-item pf-m-selected" onclick="selectTimeRange('24h', 'Last 24 Hours')">
Last 6 Hours Last 24 Hours
</button> </button>
</li> </li>
<li> <li>
@@ -2730,8 +2730,8 @@
// Create charts after DOM is updated // Create charts after DOM is updated
setTimeout(() => { setTimeout(() => {
createCPUChart(cpuChartId, cpuData); createCPUChart(cpuChartId, cpuData, timeRange);
createMemoryChart(memoryChartId, memoryData); createMemoryChart(memoryChartId, memoryData, timeRange);
}, 100); }, 100);
} }
@@ -2905,7 +2905,7 @@
}; };
} }
function createCPUChart(containerId, cpuData) { function createCPUChart(containerId, cpuData, timeRange = '24h') {
const container = document.getElementById(containerId); const container = document.getElementById(containerId);
if (!container) return; if (!container) return;
@@ -2951,13 +2951,21 @@
tickLabels: { fill: '#FFFFFF', fontSize: 12 }, tickLabels: { fill: '#FFFFFF', fontSize: 12 },
grid: { stroke: '#404040' } grid: { stroke: '#404040' }
}, },
tickFormat: (t) => { tickFormat: (t) => {
const date = new Date(t); const date = new Date(t);
return date.toLocaleTimeString('pt-BR', { // Check if we're dealing with days (7d or 30d)
hour: '2-digit', if (timeRange === '7d' || timeRange === '30d') {
minute: '2-digit' return date.toLocaleDateString('pt-BR', {
}); day: '2-digit',
} month: '2-digit'
});
} else {
return date.toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
});
}
}
}), }),
React.createElement(Victory.VictoryLine, { React.createElement(Victory.VictoryLine, {
key: 'cpu-line', key: 'cpu-line',
@@ -2989,7 +2997,7 @@
ReactDOM.render(chart, container); ReactDOM.render(chart, container);
} }
function createMemoryChart(containerId, memoryData) { function createMemoryChart(containerId, memoryData, timeRange = '24h') {
const container = document.getElementById(containerId); const container = document.getElementById(containerId);
if (!container) return; if (!container) return;
@@ -3035,13 +3043,21 @@
tickLabels: { fill: '#FFFFFF', fontSize: 12 }, tickLabels: { fill: '#FFFFFF', fontSize: 12 },
grid: { stroke: '#404040' } grid: { stroke: '#404040' }
}, },
tickFormat: (t) => { tickFormat: (t) => {
const date = new Date(t); const date = new Date(t);
return date.toLocaleTimeString('pt-BR', { // Check if we're dealing with days (7d or 30d)
hour: '2-digit', if (timeRange === '7d' || timeRange === '30d') {
minute: '2-digit' return date.toLocaleDateString('pt-BR', {
}); day: '2-digit',
} month: '2-digit'
});
} else {
return date.toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
});
}
}
}), }),
React.createElement(Victory.VictoryLine, { React.createElement(Victory.VictoryLine, {
key: 'memory-line', key: 'memory-line',