Fix: Storage donut chart - movido para seção de gráficos e corrigido renderização Victory.js
This commit is contained in:
@@ -343,46 +343,6 @@
|
|||||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Storage Donut Chart */
|
|
||||||
.storage-donut-card {
|
|
||||||
background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
|
|
||||||
border: 1px solid #404040;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-donut-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-donut-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 250px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-donut-info {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-donut-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--pf-global--Color--100);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-donut-subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--pf-global--Color--200);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chart Cards */
|
/* Chart Cards */
|
||||||
.chart-card {
|
.chart-card {
|
||||||
@@ -1864,21 +1824,12 @@
|
|||||||
|
|
||||||
<!-- Storage Overview -->
|
<!-- Storage Overview -->
|
||||||
<div class="metrics-grid" style="margin-top: 24px;">
|
<div class="metrics-grid" style="margin-top: 24px;">
|
||||||
<div class="storage-donut-card">
|
<div class="metric-card">
|
||||||
<h3 class="chart-title">
|
<div class="metric-icon success">
|
||||||
<i class="fas fa-database"></i>
|
<i class="fas fa-database"></i>
|
||||||
Storage Utilization
|
|
||||||
</h3>
|
|
||||||
<div class="storage-donut-chart" id="storage-donut-chart">
|
|
||||||
<div class="loading-spinner">
|
|
||||||
<i class="fas fa-spinner fa-spin"></i>
|
|
||||||
Loading storage utilization...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="storage-donut-info">
|
|
||||||
<div class="storage-donut-title" id="storage-donut-title">Storage Usage</div>
|
|
||||||
<div class="storage-donut-subtitle" id="storage-donut-subtitle">0% of 100 GB</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="metric-value" id="dashboard-storage-utilization">-</div>
|
||||||
|
<div class="metric-label">Storage Utilization</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="metric-icon info">
|
<div class="metric-icon info">
|
||||||
@@ -1910,7 +1861,21 @@
|
|||||||
<!-- Charts Grid -->
|
<!-- Charts Grid -->
|
||||||
<div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 24px; margin-bottom: 32px;">
|
<div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 24px; margin-bottom: 32px;">
|
||||||
|
|
||||||
<!-- 1. Resource Utilization Trend (24h) -->
|
<!-- 1. Storage Utilization Donut Chart -->
|
||||||
|
<div class="chart-card">
|
||||||
|
<h3 class="chart-title">
|
||||||
|
<i class="fas fa-database"></i>
|
||||||
|
Storage Utilization
|
||||||
|
</h3>
|
||||||
|
<div class="chart-content" id="storage-donut-chart">
|
||||||
|
<div class="loading-spinner">
|
||||||
|
<i class="fas fa-spinner fa-spin"></i>
|
||||||
|
Loading storage utilization...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Resource Utilization Trend (24h) -->
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
<div class="chart-header">
|
<div class="chart-header">
|
||||||
<h3 style="margin: 0; color: var(--pf-global--Color--100); font-size: 18px; font-weight: 600;">
|
<h3 style="margin: 0; color: var(--pf-global--Color--100); font-size: 18px; font-weight: 600;">
|
||||||
@@ -2835,7 +2800,10 @@
|
|||||||
|
|
||||||
function updateDashboardStorageMetrics(data) {
|
function updateDashboardStorageMetrics(data) {
|
||||||
try {
|
try {
|
||||||
|
const storageUtilization = data.storage_utilization_percent || 0;
|
||||||
|
|
||||||
// Update storage metrics cards
|
// Update storage metrics cards
|
||||||
|
document.getElementById('dashboard-storage-utilization').textContent = `${storageUtilization.toFixed(1)}%`;
|
||||||
document.getElementById('dashboard-total-pvcs').textContent = data.total_pvcs || '0';
|
document.getElementById('dashboard-total-pvcs').textContent = data.total_pvcs || '0';
|
||||||
document.getElementById('dashboard-storage-warnings').textContent = data.storage_warnings || '0';
|
document.getElementById('dashboard-storage-warnings').textContent = data.storage_warnings || '0';
|
||||||
document.getElementById('dashboard-storage-classes').textContent = data.storage_classes ? data.storage_classes.length : '0';
|
document.getElementById('dashboard-storage-classes').textContent = data.storage_classes ? data.storage_classes.length : '0';
|
||||||
@@ -2857,35 +2825,39 @@
|
|||||||
const utilizationPercentage = Math.min(100, Math.max(0, storageUtilization));
|
const utilizationPercentage = Math.min(100, Math.max(0, storageUtilization));
|
||||||
const unusedPercentage = 100 - utilizationPercentage;
|
const unusedPercentage = 100 - utilizationPercentage;
|
||||||
|
|
||||||
// Update donut chart info
|
|
||||||
document.getElementById('storage-donut-title').textContent = `${utilizationPercentage.toFixed(1)}%`;
|
|
||||||
document.getElementById('storage-donut-subtitle').textContent = `${formatBytes(totalStorageUsed)} of 100 GB`;
|
|
||||||
|
|
||||||
// Create donut chart using Victory.js
|
// Create donut chart using Victory.js
|
||||||
const container = document.getElementById('storage-donut-chart');
|
const container = document.getElementById('storage-donut-chart');
|
||||||
|
|
||||||
// Clear container
|
// Clear container
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
|
|
||||||
// Create React element for donut chart
|
// Check if Victory is available
|
||||||
|
if (typeof Victory === 'undefined' || typeof React === 'undefined') {
|
||||||
|
throw new Error('Victory.js or React not available');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create donut chart data
|
||||||
|
const chartData = [
|
||||||
|
{ x: 'Used', y: utilizationPercentage },
|
||||||
|
{ x: 'Unused', y: unusedPercentage }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Determine color based on utilization
|
||||||
|
const usedColor = utilizationPercentage >= 90 ? '#dc2626' :
|
||||||
|
utilizationPercentage >= 75 ? '#f59e0b' :
|
||||||
|
utilizationPercentage >= 50 ? '#3b82f6' : '#22c55e';
|
||||||
|
|
||||||
|
// Create VictoryPie component
|
||||||
const donutChart = React.createElement(Victory.VictoryPie, {
|
const donutChart = React.createElement(Victory.VictoryPie, {
|
||||||
data: [
|
data: chartData,
|
||||||
{ x: 'Used', y: utilizationPercentage },
|
width: 300,
|
||||||
{ x: 'Unused', y: unusedPercentage }
|
height: 300,
|
||||||
],
|
innerRadius: 80,
|
||||||
width: 200,
|
colorScale: [usedColor, '#374151'],
|
||||||
height: 200,
|
|
||||||
innerRadius: 60,
|
|
||||||
colorScale: [
|
|
||||||
utilizationPercentage >= 90 ? '#dc2626' :
|
|
||||||
utilizationPercentage >= 75 ? '#f59e0b' :
|
|
||||||
utilizationPercentage >= 50 ? '#3b82f6' : '#22c55e',
|
|
||||||
'#374151'
|
|
||||||
],
|
|
||||||
style: {
|
style: {
|
||||||
data: {
|
data: {
|
||||||
stroke: '#1f2937',
|
stroke: '#1f2937',
|
||||||
strokeWidth: 2
|
strokeWidth: 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
labels: () => null,
|
labels: () => null,
|
||||||
@@ -2897,12 +2869,12 @@
|
|||||||
|
|
||||||
// Create center text
|
// Create center text
|
||||||
const centerText = React.createElement('text', {
|
const centerText = React.createElement('text', {
|
||||||
x: 100,
|
x: 150,
|
||||||
y: 100,
|
y: 140,
|
||||||
textAnchor: 'middle',
|
textAnchor: 'middle',
|
||||||
dominantBaseline: 'middle',
|
dominantBaseline: 'middle',
|
||||||
style: {
|
style: {
|
||||||
fontSize: '24px',
|
fontSize: '28px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fill: '#f9fafb'
|
fill: '#f9fafb'
|
||||||
}
|
}
|
||||||
@@ -2910,21 +2882,21 @@
|
|||||||
|
|
||||||
// Create subtitle
|
// Create subtitle
|
||||||
const subtitle = React.createElement('text', {
|
const subtitle = React.createElement('text', {
|
||||||
x: 100,
|
x: 150,
|
||||||
y: 125,
|
y: 170,
|
||||||
textAnchor: 'middle',
|
textAnchor: 'middle',
|
||||||
dominantBaseline: 'middle',
|
dominantBaseline: 'middle',
|
||||||
style: {
|
style: {
|
||||||
fontSize: '12px',
|
fontSize: '14px',
|
||||||
fill: '#9ca3af'
|
fill: '#9ca3af'
|
||||||
}
|
}
|
||||||
}, 'Storage Used');
|
}, `${formatBytes(totalStorageUsed)} used`);
|
||||||
|
|
||||||
// Create SVG container
|
// Create SVG container
|
||||||
const svgContainer = React.createElement('svg', {
|
const svgContainer = React.createElement('svg', {
|
||||||
width: 200,
|
width: 300,
|
||||||
height: 200,
|
height: 300,
|
||||||
viewBox: '0 0 200 200'
|
viewBox: '0 0 300 300'
|
||||||
}, donutChart, centerText, subtitle);
|
}, donutChart, centerText, subtitle);
|
||||||
|
|
||||||
// Render the chart
|
// Render the chart
|
||||||
@@ -2934,13 +2906,23 @@
|
|||||||
console.error('Error updating storage donut chart:', error);
|
console.error('Error updating storage donut chart:', error);
|
||||||
// Fallback to simple text display
|
// Fallback to simple text display
|
||||||
const container = document.getElementById('storage-donut-chart');
|
const container = document.getElementById('storage-donut-chart');
|
||||||
|
const storageUtilization = data.storage_utilization_percent || 0;
|
||||||
|
const totalStorageUsed = data.total_storage_used || 0;
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
|
<div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
|
||||||
<i class="fas fa-chart-pie" style="font-size: 48px; margin-bottom: 16px;"></i>
|
<div style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--primary-color--100);">
|
||||||
<p>Storage utilization chart</p>
|
<i class="fas fa-chart-pie"></i>
|
||||||
<p style="font-size: 14px; color: var(--pf-global--Color--400);">
|
</div>
|
||||||
Chart library not available
|
<div style="font-size: 32px; font-weight: bold; color: var(--pf-global--Color--100); margin-bottom: 8px;">
|
||||||
</p>
|
${storageUtilization.toFixed(1)}%
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 16px; color: var(--pf-global--Color--200);">
|
||||||
|
${formatBytes(totalStorageUsed)} used
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; color: var(--pf-global--Color--400); margin-top: 8px;">
|
||||||
|
Victory.js not available
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user