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);
|
||||
}
|
||||
|
||||
/* 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-card {
|
||||
@@ -1864,21 +1824,12 @@
|
||||
|
||||
<!-- Storage Overview -->
|
||||
<div class="metrics-grid" style="margin-top: 24px;">
|
||||
<div class="storage-donut-card">
|
||||
<h3 class="chart-title">
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon success">
|
||||
<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 class="metric-value" id="dashboard-storage-utilization">-</div>
|
||||
<div class="metric-label">Storage Utilization</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon info">
|
||||
@@ -1910,7 +1861,21 @@
|
||||
<!-- Charts Grid -->
|
||||
<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-header">
|
||||
<h3 style="margin: 0; color: var(--pf-global--Color--100); font-size: 18px; font-weight: 600;">
|
||||
@@ -2835,7 +2800,10 @@
|
||||
|
||||
function updateDashboardStorageMetrics(data) {
|
||||
try {
|
||||
const storageUtilization = data.storage_utilization_percent || 0;
|
||||
|
||||
// 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-storage-warnings').textContent = data.storage_warnings || '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 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
|
||||
const container = document.getElementById('storage-donut-chart');
|
||||
|
||||
// Clear container
|
||||
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, {
|
||||
data: [
|
||||
{ x: 'Used', y: utilizationPercentage },
|
||||
{ x: 'Unused', y: unusedPercentage }
|
||||
],
|
||||
width: 200,
|
||||
height: 200,
|
||||
innerRadius: 60,
|
||||
colorScale: [
|
||||
utilizationPercentage >= 90 ? '#dc2626' :
|
||||
utilizationPercentage >= 75 ? '#f59e0b' :
|
||||
utilizationPercentage >= 50 ? '#3b82f6' : '#22c55e',
|
||||
'#374151'
|
||||
],
|
||||
data: chartData,
|
||||
width: 300,
|
||||
height: 300,
|
||||
innerRadius: 80,
|
||||
colorScale: [usedColor, '#374151'],
|
||||
style: {
|
||||
data: {
|
||||
stroke: '#1f2937',
|
||||
strokeWidth: 2
|
||||
strokeWidth: 3
|
||||
}
|
||||
},
|
||||
labels: () => null,
|
||||
@@ -2897,12 +2869,12 @@
|
||||
|
||||
// Create center text
|
||||
const centerText = React.createElement('text', {
|
||||
x: 100,
|
||||
y: 100,
|
||||
x: 150,
|
||||
y: 140,
|
||||
textAnchor: 'middle',
|
||||
dominantBaseline: 'middle',
|
||||
style: {
|
||||
fontSize: '24px',
|
||||
fontSize: '28px',
|
||||
fontWeight: 'bold',
|
||||
fill: '#f9fafb'
|
||||
}
|
||||
@@ -2910,21 +2882,21 @@
|
||||
|
||||
// Create subtitle
|
||||
const subtitle = React.createElement('text', {
|
||||
x: 100,
|
||||
y: 125,
|
||||
x: 150,
|
||||
y: 170,
|
||||
textAnchor: 'middle',
|
||||
dominantBaseline: 'middle',
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontSize: '14px',
|
||||
fill: '#9ca3af'
|
||||
}
|
||||
}, 'Storage Used');
|
||||
}, `${formatBytes(totalStorageUsed)} used`);
|
||||
|
||||
// Create SVG container
|
||||
const svgContainer = React.createElement('svg', {
|
||||
width: 200,
|
||||
height: 200,
|
||||
viewBox: '0 0 200 200'
|
||||
width: 300,
|
||||
height: 300,
|
||||
viewBox: '0 0 300 300'
|
||||
}, donutChart, centerText, subtitle);
|
||||
|
||||
// Render the chart
|
||||
@@ -2934,13 +2906,23 @@
|
||||
console.error('Error updating storage donut chart:', error);
|
||||
// Fallback to simple text display
|
||||
const container = document.getElementById('storage-donut-chart');
|
||||
const storageUtilization = data.storage_utilization_percent || 0;
|
||||
const totalStorageUsed = data.total_storage_used || 0;
|
||||
|
||||
container.innerHTML = `
|
||||
<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>
|
||||
<p>Storage utilization chart</p>
|
||||
<p style="font-size: 14px; color: var(--pf-global--Color--400);">
|
||||
Chart library not available
|
||||
</p>
|
||||
<div style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--primary-color--100);">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
</div>
|
||||
<div style="font-size: 32px; font-weight: bold; color: var(--pf-global--Color--100); margin-bottom: 8px;">
|
||||
${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>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user