Remove unused PHP files related to Hyper-V and Storage dashboards
- Deleted `cluster-detail2.php`, `constants.inc copy.php`, `D.php`, and `Dashboard2.php`. These files were no longer in use and contributed to unnecessary clutter in the codebase. - Cleaned up references to removed files.
This commit is contained in:
e025532
@@ -1,55 +1,67 @@
|
||||
let typ = document.getElementById("type").dataset.value;
|
||||
let computer = document.getElementById("computer").dataset.value;
|
||||
|
||||
async function fetchAndDisplayData() {
|
||||
try {
|
||||
const response = await fetch(`z_data_${typ}.php?c=${computer}`);
|
||||
const jsonData = await response.json();
|
||||
const data = jsonData.data || jsonData;
|
||||
const data = jsonData.data || jsonData; // Utilisation plus robuste
|
||||
|
||||
const cpuKey = Object.keys(data).find(key => key.includes('CPU'));
|
||||
const ramKey = Object.keys(data).find(key => key.includes('Memory'));
|
||||
const labels = [];
|
||||
|
||||
// Utilisation d'un Set pour collecter les labels uniques plus efficacement
|
||||
const uniqueLabels = new Set();
|
||||
if (cpuKey && data[cpuKey]) {
|
||||
data[cpuKey].forEach(point => {
|
||||
if (!labels.includes(point.datetime)) {
|
||||
labels.push(point.datetime);
|
||||
}
|
||||
});
|
||||
data[cpuKey].forEach(point => uniqueLabels.add(point.datetime));
|
||||
}
|
||||
if (ramKey && data[ramKey]) {
|
||||
data[ramKey].forEach(point => {
|
||||
if (!labels.includes(point.datetime)) {
|
||||
labels.push(point.datetime);
|
||||
}
|
||||
});
|
||||
data[ramKey].forEach(point => uniqueLabels.add(point.datetime));
|
||||
}
|
||||
labels.sort();
|
||||
const cpuDataMap = {};
|
||||
const ramDataMap = {};
|
||||
if (cpuKey && data[cpuKey]) {
|
||||
data[cpuKey].forEach(point => {
|
||||
cpuDataMap[point.datetime] = parseFloat(point.avg_value);
|
||||
});
|
||||
}
|
||||
if (ramKey && data[ramKey]) {
|
||||
data[ramKey].forEach(point => {
|
||||
ramDataMap[point.datetime] = parseFloat(point.avg_value);
|
||||
});
|
||||
}
|
||||
const cpuChartData = labels.map(label => cpuDataMap[label] || null);
|
||||
const ramChartData = labels.map(label => ramDataMap[label] || null);
|
||||
const labels = Array.from(uniqueLabels).sort(); // Conversion en Array et tri
|
||||
|
||||
// Fonction pour créer une map de données
|
||||
const createDataMap = (key, rawData) => {
|
||||
const map = {};
|
||||
if (key && rawData[key]) {
|
||||
rawData[key].forEach(point => {
|
||||
map[point.datetime] = parseFloat(point.avg_value);
|
||||
});
|
||||
}
|
||||
return map;
|
||||
};
|
||||
|
||||
const cpuDataMap = createDataMap(cpuKey, data);
|
||||
const ramDataMap = createDataMap(ramKey, data);
|
||||
|
||||
// Fonction pour générer les données du graphique
|
||||
const getChartData = (map, sortedLabels) => sortedLabels.map(label => map[label] ?? null);
|
||||
|
||||
const cpuChartData = getChartData(cpuDataMap, labels);
|
||||
const ramChartData = getChartData(ramDataMap, labels);
|
||||
|
||||
// Formatage des labels pour l'axe X
|
||||
const formattedLabels = labels.map(label => {
|
||||
const date = new Date(label);
|
||||
return date.toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'});
|
||||
return !isNaN(date)
|
||||
? date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
|
||||
: 'Invalid Date';
|
||||
});
|
||||
if (cpuKey && data[cpuKey] && data[cpuKey].length > 0) {
|
||||
const ctx1 = document.getElementById('cpuChart').getContext('2d');
|
||||
new Chart(ctx1, {
|
||||
|
||||
// *** Fonction pour créer un graphique (adaptée pour v2.x) ***
|
||||
const createChartV2 = (canvasId, label, chartData, formattedLabels) => {
|
||||
const ctx = document.getElementById(canvasId)?.getContext('2d');
|
||||
if (!ctx) {
|
||||
console.error(`Canvas element with id "${canvasId}" not found.`);
|
||||
return null;
|
||||
}
|
||||
return new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: formattedLabels,
|
||||
datasets: [{
|
||||
label: 'CPU (%)',
|
||||
data: cpuChartData,
|
||||
label: label, // Garde le label pour l'infobulle
|
||||
data: chartData,
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
||||
fill: true,
|
||||
@@ -58,40 +70,69 @@ async function fetchAndDisplayData() {
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {display: false},
|
||||
legend: {
|
||||
display: false // Cacher la légende en v2
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {y: {beginAtZero: true}}
|
||||
scales: {
|
||||
yAxes: [{ // *** Utilisation de yAxes (tableau) pour v2.x ***
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
// Ajout de la fonction callback pour formater les labels de l'axe Y
|
||||
callback: function(value, index, values) { // Note: le 3ème argument est 'values' en v2
|
||||
return value + '%'; // Ajoute le symbole %
|
||||
}
|
||||
// max: 100, // Optionnel mais recommandé pour les pourcentages
|
||||
// stepSize: 5 // Optionnel: pour suggérer un intervalle
|
||||
}
|
||||
// scaleLabel: { // Si vous vouliez un titre d'axe en v2 (ce que vous ne voulez pas)
|
||||
// display: false,
|
||||
// labelString: 'Utilisation (%)'
|
||||
// }
|
||||
}],
|
||||
xAxes: [{ // *** xAxes doit aussi être dans un tableau en v2.x ***
|
||||
// ... autres options pour l'axe X si nécessaire ...
|
||||
}]
|
||||
},
|
||||
tooltips: { // *** 'tooltips' au pluriel en v2.x ***
|
||||
callbacks: {
|
||||
label: function(tooltipItem, data) { // Arguments différents en v2
|
||||
let label = data.datasets[tooltipItem.datasetIndex].label || '';
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
// tooltipItem.yLabel contient la valeur numérique en v2
|
||||
if (tooltipItem.yLabel !== null && typeof tooltipItem.yLabel !== 'undefined') {
|
||||
label += tooltipItem.yLabel + '%';
|
||||
}
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Création des graphiques en utilisant la fonction adaptée pour v2.x
|
||||
if (cpuKey && data[cpuKey]?.length > 0) {
|
||||
createChartV2('cpuChart', 'CPU (%)', cpuChartData, formattedLabels);
|
||||
} else {
|
||||
const cpuChartElement = document.getElementById('cpuChart');
|
||||
if (cpuChartElement) cpuChartElement.style.display = 'none';
|
||||
console.log("Pas de données CPU à afficher.");
|
||||
}
|
||||
if (ramKey && data[ramKey] && data[ramKey].length > 0) {
|
||||
const ctx2 = document.getElementById('ramChart').getContext('2d');
|
||||
new Chart(ctx2, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: formattedLabels,
|
||||
datasets: [{
|
||||
label: 'Memory (%)',
|
||||
data: ramChartData,
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {display: false},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {y: {beginAtZero: true}}
|
||||
}
|
||||
});
|
||||
|
||||
if (ramKey && data[ramKey]?.length > 0) {
|
||||
createChartV2('ramChart', 'Memory (%)', ramChartData, formattedLabels);
|
||||
} else {
|
||||
const ramChartElement = document.getElementById('ramChart');
|
||||
if (ramChartElement) ramChartElement.style.display = 'none';
|
||||
console.log("Pas de données RAM à afficher.");
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
console.error('Erreur lors de la récupération ou de l\'affichage des données:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user