Fix EC Volumes page header styling to match admin theme (#7780)
* Fix EC Volumes page header styling to match admin theme Fixes #7779 The EC Volumes page was rendering with bright Bootstrap default colors instead of the admin dark theme because it was structured as a standalone HTML document with its own DOCTYPE, head, and body tags. This fix converts the template to be a content fragment (like other properly styled templates such as cluster_ec_shards.templ) so it correctly inherits the admin.css styling when rendered within the layout. * Address review comments: fix URL interpolation and falsy value check - Fix collection filter link to use templ.URL() for proper interpolation - Change updateUrl() falsy check from 'if (params[key])' to 'if (params[key] != null)' to handle 0 and false values correctly * Address additional review comments - Use erasure_coding.TotalShardsCount constant instead of hardcoded '14' for shard count displays (lines 88 and 214) - Improve error handling in repairVolume() to check response.ok before parsing JSON, preventing confusing errors on non-JSON responses - Remove unused totalSize variable in formatShardRangesWithSizes() - Simplify redundant pagination conditions * Remove unused code: displayShardLocationsHTML, groupShardsByServerWithSizes, formatShardRangesWithSizes These functions and templates were defined but never called anywhere in the codebase. Removing them reduces code maintenance burden. * Address review feedback: improve code quality - Add defensive JSON response validation in repairVolume function - Replace O(n²) bubble sorts with Go's standard sort.Ints and sort.Slice - Document volume status thresholds explaining EC recovery logic: * Critical: unrecoverable (more than DataShardsCount missing) * Degraded: high risk (more than half DataShardsCount missing) * Incomplete: reduced redundancy (more than half ParityShardsCount missing) * Minor: fully recoverable with good margin * Fix redundant shard count display in Healthy Volumes card Changed from 'Complete (14/14 shards)' to 'All 14 shards present' since the numerator and denominator were always the same value. * Use templ.URL for default collection link for consistency * Fix Clear Filter link to stay on EC Volumes page Changed href from /cluster/ec-shards to /cluster/ec-volumes so clearing the filter stays on the current page instead of navigating away.
This commit is contained in:
@@ -2,29 +2,48 @@ package app
|
|||||||
|
|
||||||
import (
|
import (
|
||||||
"fmt"
|
"fmt"
|
||||||
|
"sort"
|
||||||
"strings"
|
"strings"
|
||||||
"github.com/seaweedfs/seaweedfs/weed/admin/dash"
|
"github.com/seaweedfs/seaweedfs/weed/admin/dash"
|
||||||
"github.com/seaweedfs/seaweedfs/weed/storage/erasure_coding"
|
"github.com/seaweedfs/seaweedfs/weed/storage/erasure_coding"
|
||||||
)
|
)
|
||||||
|
|
||||||
templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
||||||
<!DOCTYPE html>
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||||
<html lang="en">
|
<div>
|
||||||
<head>
|
<h1 class="h2">
|
||||||
<title>EC Volumes - SeaweedFS</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<h2 class="mb-4">
|
|
||||||
<i class="fas fa-database me-2"></i>EC Volumes
|
<i class="fas fa-database me-2"></i>EC Volumes
|
||||||
<small class="text-muted">({fmt.Sprintf("%d", data.TotalVolumes)} volumes)</small>
|
</h1>
|
||||||
</h2>
|
if data.Collection != "" {
|
||||||
|
<div class="d-flex align-items-center mt-2">
|
||||||
|
if data.Collection == "default" {
|
||||||
|
<span class="badge bg-secondary text-white me-2">
|
||||||
|
<i class="fas fa-filter me-1"></i>Collection: default
|
||||||
|
</span>
|
||||||
|
} else {
|
||||||
|
<span class="badge bg-info text-white me-2">
|
||||||
|
<i class="fas fa-filter me-1"></i>Collection: {data.Collection}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
<a href="/cluster/ec-volumes" class="btn btn-sm btn-outline-secondary">
|
||||||
|
<i class="fas fa-times me-1"></i>Clear Filter
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="btn-toolbar mb-2 mb-md-0">
|
||||||
|
<div class="btn-group me-2">
|
||||||
|
<select class="form-select form-select-sm me-2" id="pageSizeSelect" onchange="changePageSize(this.value)" style="width: auto;">
|
||||||
|
<option value="5" if data.PageSize == 5 { selected="selected" }>5 per page</option>
|
||||||
|
<option value="10" if data.PageSize == 10 { selected="selected" }>10 per page</option>
|
||||||
|
<option value="25" if data.PageSize == 25 { selected="selected" }>25 per page</option>
|
||||||
|
<option value="50" if data.PageSize == 50 { selected="selected" }>50 per page</option>
|
||||||
|
<option value="100" if data.PageSize == 100 { selected="selected" }>100 per page</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="window.location.reload()">
|
||||||
|
<i class="fas fa-refresh me-1"></i>Refresh
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -37,7 +56,6 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
<div>
|
<div>
|
||||||
<h6 class="card-title">Total Volumes</h6>
|
<h6 class="card-title">Total Volumes</h6>
|
||||||
<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalVolumes)}</h4>
|
<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalVolumes)}</h4>
|
||||||
<small>EC encoded volumes</small>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="fas fa-cubes fa-2x"></i>
|
<i class="fas fa-cubes fa-2x"></i>
|
||||||
@@ -53,7 +71,6 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
<div>
|
<div>
|
||||||
<h6 class="card-title">Total Shards</h6>
|
<h6 class="card-title">Total Shards</h6>
|
||||||
<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalShards)}</h4>
|
<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalShards)}</h4>
|
||||||
<small>Distributed shards</small>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="fas fa-puzzle-piece fa-2x"></i>
|
<i class="fas fa-puzzle-piece fa-2x"></i>
|
||||||
@@ -67,9 +84,9 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<div>
|
<div>
|
||||||
<h6 class="card-title">Complete Volumes</h6>
|
<h6 class="card-title">Healthy Volumes</h6>
|
||||||
<h4 class="mb-0">{fmt.Sprintf("%d", data.CompleteVolumes)}</h4>
|
<h4 class="mb-0">{fmt.Sprintf("%d", data.CompleteVolumes)}</h4>
|
||||||
<small>All shards present</small>
|
<small>All { fmt.Sprintf("%d", erasure_coding.TotalShardsCount) } shards present</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="fas fa-check-circle fa-2x"></i>
|
<i class="fas fa-check-circle fa-2x"></i>
|
||||||
@@ -83,9 +100,9 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<div>
|
<div>
|
||||||
<h6 class="card-title">Incomplete Volumes</h6>
|
<h6 class="card-title">Degraded Volumes</h6>
|
||||||
<h4 class="mb-0">{fmt.Sprintf("%d", data.IncompleteVolumes)}</h4>
|
<h4 class="mb-0">{fmt.Sprintf("%d", data.IncompleteVolumes)}</h4>
|
||||||
<small>Missing shards</small>
|
<small>Incomplete/Critical</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="fas fa-exclamation-triangle fa-2x"></i>
|
<i class="fas fa-exclamation-triangle fa-2x"></i>
|
||||||
@@ -105,43 +122,6 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Volumes Table -->
|
<!-- Volumes Table -->
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span class="me-3">
|
|
||||||
Showing {fmt.Sprintf("%d", (data.Page-1)*data.PageSize + 1)} to {fmt.Sprintf("%d", func() int {
|
|
||||||
end := data.Page * data.PageSize
|
|
||||||
if end > data.TotalVolumes {
|
|
||||||
return data.TotalVolumes
|
|
||||||
}
|
|
||||||
return end
|
|
||||||
}())} of {fmt.Sprintf("%d", data.TotalVolumes)} volumes
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<label for="pageSize" class="form-label me-2 mb-0">Show:</label>
|
|
||||||
<select id="pageSize" class="form-select form-select-sm" style="width: auto;" onchange="changePageSize(this.value)">
|
|
||||||
<option value="5" if data.PageSize == 5 { selected }>5</option>
|
|
||||||
<option value="10" if data.PageSize == 10 { selected }>10</option>
|
|
||||||
<option value="25" if data.PageSize == 25 { selected }>25</option>
|
|
||||||
<option value="50" if data.PageSize == 50 { selected }>50</option>
|
|
||||||
<option value="100" if data.PageSize == 100 { selected }>100</option>
|
|
||||||
</select>
|
|
||||||
<span class="ms-2">per page</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
if data.Collection != "" {
|
|
||||||
<div>
|
|
||||||
if data.Collection == "default" {
|
|
||||||
<span class="badge bg-secondary text-white">Collection: default</span>
|
|
||||||
} else {
|
|
||||||
<span class="badge bg-info text-white">Collection: {data.Collection}</span>
|
|
||||||
}
|
|
||||||
<a href="/cluster/ec-shards" class="btn btn-sm btn-outline-secondary ms-2">Clear Filter</a>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-striped table-hover" id="ecVolumesTable">
|
<table class="table table-striped table-hover" id="ecVolumesTable">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -216,23 +196,23 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
for _, volume := range data.EcVolumes {
|
for _, volume := range data.EcVolumes {
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<strong>{fmt.Sprintf("%d", volume.VolumeID)}</strong>
|
<span class="fw-bold">{fmt.Sprintf("%d", volume.VolumeID)}</span>
|
||||||
</td>
|
</td>
|
||||||
if data.ShowCollectionColumn {
|
if data.ShowCollectionColumn {
|
||||||
<td>
|
<td>
|
||||||
if volume.Collection != "" {
|
if volume.Collection != "" {
|
||||||
<a href="/cluster/ec-shards?collection={volume.Collection}" class="text-decoration-none">
|
<a href={ templ.URL(fmt.Sprintf("/cluster/ec-shards?collection=%s", volume.Collection)) } class="text-decoration-none">
|
||||||
<span class="badge bg-info text-white">{volume.Collection}</span>
|
<span class="badge bg-info text-white">{volume.Collection}</span>
|
||||||
</a>
|
</a>
|
||||||
} else {
|
} else {
|
||||||
<a href="/cluster/ec-shards?collection=default" class="text-decoration-none">
|
<a href={ templ.URL("/cluster/ec-shards?collection=default") } class="text-decoration-none">
|
||||||
<span class="badge bg-secondary text-white">default</span>
|
<span class="badge bg-secondary text-white">default</span>
|
||||||
</a>
|
</a>
|
||||||
}
|
}
|
||||||
</td>
|
</td>
|
||||||
}
|
}
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-primary">{fmt.Sprintf("%d/14", volume.TotalShards)}</span>
|
<span class="badge bg-primary">{fmt.Sprintf("%d/%d", volume.TotalShards, erasure_coding.TotalShardsCount)}</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@displayShardSizes(volume.ShardSizes)
|
@displayShardSizes(volume.ShardSizes)
|
||||||
@@ -283,49 +263,76 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
<ul class="pagination justify-content-center">
|
<ul class="pagination justify-content-center">
|
||||||
if data.Page > 1 {
|
if data.Page > 1 {
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="#" onclick="goToPage(event)" data-page="1">First</a>
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page="1">
|
||||||
|
<i class="fas fa-angle-double-left"></i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page-1) }>Previous</a>
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page-1) }>
|
||||||
|
<i class="fas fa-chevron-left"></i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
}
|
}
|
||||||
|
|
||||||
for i := 1; i <= data.TotalPages; i++ {
|
<!-- First page -->
|
||||||
if i == data.Page {
|
if data.Page > 3 {
|
||||||
<li class="page-item active">
|
|
||||||
<span class="page-link">{fmt.Sprintf("%d", i)}</span>
|
|
||||||
</li>
|
|
||||||
} else if i <= 3 || i > data.TotalPages-3 || (i >= data.Page-2 && i <= data.Page+2) {
|
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", i) }>{fmt.Sprintf("%d", i)}</a>
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page="1">1</a>
|
||||||
</li>
|
</li>
|
||||||
} else if i == 4 && data.Page > 6 {
|
if data.Page > 4 {
|
||||||
<li class="page-item disabled">
|
|
||||||
<span class="page-link">...</span>
|
|
||||||
</li>
|
|
||||||
} else if i == data.TotalPages-3 && data.Page < data.TotalPages-5 {
|
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
<span class="page-link">...</span>
|
<span class="page-link">...</span>
|
||||||
</li>
|
</li>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<!-- Current page neighbors -->
|
||||||
|
if data.Page > 1 {
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page-1) }>{fmt.Sprintf("%d", data.Page-1)}</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
|
||||||
|
<li class="page-item active">
|
||||||
|
<span class="page-link">{fmt.Sprintf("%d", data.Page)}</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
if data.Page < data.TotalPages {
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page+1) }>{fmt.Sprintf("%d", data.Page+1)}</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Last page -->
|
||||||
|
if data.Page < data.TotalPages-2 {
|
||||||
|
if data.Page < data.TotalPages-3 {
|
||||||
|
<li class="page-item disabled">
|
||||||
|
<span class="page-link">...</span>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.TotalPages) }>{fmt.Sprintf("%d", data.TotalPages)}</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
|
||||||
if data.Page < data.TotalPages {
|
if data.Page < data.TotalPages {
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page+1) }>Next</a>
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page+1) }>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.TotalPages) }>Last</a>
|
<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.TotalPages) }>
|
||||||
|
<i class="fas fa-angle-double-right"></i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<!-- JavaScript -->
|
||||||
<script>
|
<script>
|
||||||
// Sorting functionality
|
|
||||||
function sortBy(field) {
|
function sortBy(field) {
|
||||||
const currentSort = new URLSearchParams(window.location.search).get('sort_by');
|
const currentSort = new URLSearchParams(window.location.search).get('sort_by');
|
||||||
const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';
|
const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';
|
||||||
@@ -335,65 +342,69 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
|
|||||||
newOrder = 'desc';
|
newOrder = 'desc';
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = new URL(window.location);
|
updateUrl({
|
||||||
url.searchParams.set('sort_by', field);
|
sort_by: field,
|
||||||
url.searchParams.set('sort_order', newOrder);
|
sort_order: newOrder,
|
||||||
url.searchParams.set('page', '1'); // Reset to first page
|
page: 1
|
||||||
window.location.href = url.toString();
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pagination functionality
|
|
||||||
function goToPage(event) {
|
function goToPage(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const page = event.target.closest('a').getAttribute('data-page');
|
const page = event.target.closest('a').getAttribute('data-page');
|
||||||
const url = new URL(window.location);
|
updateUrl({ page: page });
|
||||||
url.searchParams.set('page', page);
|
|
||||||
window.location.href = url.toString();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Page size functionality
|
|
||||||
function changePageSize(newPageSize) {
|
function changePageSize(newPageSize) {
|
||||||
|
updateUrl({ page_size: newPageSize, page: 1 });
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUrl(params) {
|
||||||
const url = new URL(window.location);
|
const url = new URL(window.location);
|
||||||
url.searchParams.set('page_size', newPageSize);
|
Object.keys(params).forEach(key => {
|
||||||
url.searchParams.set('page', '1'); // Reset to first page when changing page size
|
if (params[key] != null) {
|
||||||
|
url.searchParams.set(key, params[key]);
|
||||||
|
} else {
|
||||||
|
url.searchParams.delete(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
window.location.href = url.toString();
|
window.location.href = url.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Volume details
|
|
||||||
function showVolumeDetails(event) {
|
function showVolumeDetails(event) {
|
||||||
const volumeId = event.target.closest('button').getAttribute('data-volume-id');
|
const volumeId = event.target.closest('button').getAttribute('data-volume-id');
|
||||||
window.location.href = `/cluster/ec-volumes/${volumeId}`;
|
window.location.href = `/cluster/ec-volumes/${volumeId}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Repair volume
|
|
||||||
function repairVolume(event) {
|
function repairVolume(event) {
|
||||||
const volumeId = event.target.closest('button').getAttribute('data-volume-id');
|
const volumeId = event.target.closest('button').getAttribute('data-volume-id');
|
||||||
if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {
|
if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {
|
||||||
// TODO: Implement repair functionality
|
fetch(`/api/cluster/ec-volumes/${volumeId}/repair`, {
|
||||||
alert('Repair functionality will be implemented soon.');
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
if (data && data.success) {
|
||||||
|
alert('Repair initiated successfully');
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
alert('Failed to initiate repair: ' + (data && data.error ? data.error : 'Unknown error'));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
alert('Error: ' + error.message);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
}
|
|
||||||
|
|
||||||
// displayShardLocationsHTML renders shard locations as proper HTML
|
|
||||||
templ displayShardLocationsHTML(shardLocations map[int]string) {
|
|
||||||
if len(shardLocations) == 0 {
|
|
||||||
<span class="text-muted">No shards</span>
|
|
||||||
} else {
|
|
||||||
for i, serverInfo := range groupShardsByServer(shardLocations) {
|
|
||||||
if i > 0 {
|
|
||||||
<br/>
|
|
||||||
}
|
|
||||||
<strong>
|
|
||||||
<a href={ templ.URL("/cluster/volume-servers/" + serverInfo.Server) } class="text-primary text-decoration-none">
|
|
||||||
{ serverInfo.Server }
|
|
||||||
</a>:
|
|
||||||
</strong> { serverInfo.ShardRanges }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// displayShardSizes renders shard sizes in a compact format
|
// displayShardSizes renders shard sizes in a compact format
|
||||||
@@ -439,13 +450,7 @@ func groupShardsByServer(shardLocations map[int]string) []ServerShardInfo {
|
|||||||
var serverInfos []ServerShardInfo
|
var serverInfos []ServerShardInfo
|
||||||
for server, shards := range serverShards {
|
for server, shards := range serverShards {
|
||||||
// Sort shards for each server
|
// Sort shards for each server
|
||||||
for i := 0; i < len(shards); i++ {
|
sort.Ints(shards)
|
||||||
for j := i + 1; j < len(shards); j++ {
|
|
||||||
if shards[i] > shards[j] {
|
|
||||||
shards[i], shards[j] = shards[j], shards[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Format shard ranges compactly
|
// Format shard ranges compactly
|
||||||
shardRanges := formatShardRanges(shards)
|
shardRanges := formatShardRanges(shards)
|
||||||
@@ -456,56 +461,9 @@ func groupShardsByServer(shardLocations map[int]string) []ServerShardInfo {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Sort by server name
|
// Sort by server name
|
||||||
for i := 0; i < len(serverInfos); i++ {
|
sort.Slice(serverInfos, func(i, j int) bool {
|
||||||
for j := i + 1; j < len(serverInfos); j++ {
|
return serverInfos[i].Server < serverInfos[j].Server
|
||||||
if serverInfos[i].Server > serverInfos[j].Server {
|
|
||||||
serverInfos[i], serverInfos[j] = serverInfos[j], serverInfos[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return serverInfos
|
|
||||||
}
|
|
||||||
|
|
||||||
// groupShardsByServerWithSizes groups shards by server and formats ranges with sizes
|
|
||||||
func groupShardsByServerWithSizes(shardLocations map[int]string, shardSizes map[int]int64) []ServerShardInfo {
|
|
||||||
if len(shardLocations) == 0 {
|
|
||||||
return []ServerShardInfo{}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Group shards by server
|
|
||||||
serverShards := make(map[string][]int)
|
|
||||||
for shardId, server := range shardLocations {
|
|
||||||
serverShards[server] = append(serverShards[server], shardId)
|
|
||||||
}
|
|
||||||
|
|
||||||
var serverInfos []ServerShardInfo
|
|
||||||
for server, shards := range serverShards {
|
|
||||||
// Sort shards for each server
|
|
||||||
for i := 0; i < len(shards); i++ {
|
|
||||||
for j := i + 1; j < len(shards); j++ {
|
|
||||||
if shards[i] > shards[j] {
|
|
||||||
shards[i], shards[j] = shards[j], shards[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Format shard ranges compactly with sizes
|
|
||||||
shardRanges := formatShardRangesWithSizes(shards, shardSizes)
|
|
||||||
serverInfos = append(serverInfos, ServerShardInfo{
|
|
||||||
Server: server,
|
|
||||||
ShardRanges: shardRanges,
|
|
||||||
})
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// Sort by server name
|
|
||||||
for i := 0; i < len(serverInfos); i++ {
|
|
||||||
for j := i + 1; j < len(serverInfos); j++ {
|
|
||||||
if serverInfos[i].Server > serverInfos[j].Server {
|
|
||||||
serverInfos[i], serverInfos[j] = serverInfos[j], serverInfos[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return serverInfos
|
return serverInfos
|
||||||
}
|
}
|
||||||
@@ -544,72 +502,6 @@ func formatShardRanges(shards []int) string {
|
|||||||
return strings.Join(ranges, ",")
|
return strings.Join(ranges, ",")
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper function to format shard ranges with sizes (e.g., "0(1.2MB),1-3(2.5MB),7(800KB)")
|
|
||||||
func formatShardRangesWithSizes(shards []int, shardSizes map[int]int64) string {
|
|
||||||
if len(shards) == 0 {
|
|
||||||
return ""
|
|
||||||
}
|
|
||||||
|
|
||||||
var ranges []string
|
|
||||||
start := shards[0]
|
|
||||||
end := shards[0]
|
|
||||||
var totalSize int64
|
|
||||||
|
|
||||||
for i := 1; i < len(shards); i++ {
|
|
||||||
if shards[i] == end+1 {
|
|
||||||
end = shards[i]
|
|
||||||
totalSize += shardSizes[shards[i]]
|
|
||||||
} else {
|
|
||||||
// Add current range with size
|
|
||||||
if start == end {
|
|
||||||
size := shardSizes[start]
|
|
||||||
if size > 0 {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d(%s)", start, bytesToHumanReadable(size)))
|
|
||||||
} else {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d", start))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Calculate total size for the range
|
|
||||||
rangeSize := shardSizes[start]
|
|
||||||
for j := start + 1; j <= end; j++ {
|
|
||||||
rangeSize += shardSizes[j]
|
|
||||||
}
|
|
||||||
if rangeSize > 0 {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d-%d(%s)", start, end, bytesToHumanReadable(rangeSize)))
|
|
||||||
} else {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d-%d", start, end))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
start = shards[i]
|
|
||||||
end = shards[i]
|
|
||||||
totalSize = shardSizes[shards[i]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add the last range
|
|
||||||
if start == end {
|
|
||||||
size := shardSizes[start]
|
|
||||||
if size > 0 {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d(%s)", start, bytesToHumanReadable(size)))
|
|
||||||
} else {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d", start))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Calculate total size for the range
|
|
||||||
rangeSize := shardSizes[start]
|
|
||||||
for j := start + 1; j <= end; j++ {
|
|
||||||
rangeSize += shardSizes[j]
|
|
||||||
}
|
|
||||||
if rangeSize > 0 {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d-%d(%s)", start, end, bytesToHumanReadable(rangeSize)))
|
|
||||||
} else {
|
|
||||||
ranges = append(ranges, fmt.Sprintf("%d-%d", start, end))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return strings.Join(ranges, ",")
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper function to convert bytes to human readable format
|
// Helper function to convert bytes to human readable format
|
||||||
func bytesToHumanReadable(bytes int64) string {
|
func bytesToHumanReadable(bytes int64) string {
|
||||||
const unit = 1024
|
const unit = 1024
|
||||||
@@ -680,13 +572,7 @@ func formatIndividualShardSizes(shardSizes map[int]int64) string {
|
|||||||
var groupStrs []string
|
var groupStrs []string
|
||||||
for size, shardIds := range sizeGroups {
|
for size, shardIds := range sizeGroups {
|
||||||
// Sort shard IDs
|
// Sort shard IDs
|
||||||
for i := 0; i < len(shardIds); i++ {
|
sort.Ints(shardIds)
|
||||||
for j := i + 1; j < len(shardIds); j++ {
|
|
||||||
if shardIds[i] > shardIds[j] {
|
|
||||||
shardIds[i], shardIds[j] = shardIds[j], shardIds[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var idRanges []string
|
var idRanges []string
|
||||||
if len(shardIds) <= erasure_coding.ParityShardsCount {
|
if len(shardIds) <= erasure_coding.ParityShardsCount {
|
||||||
@@ -715,18 +601,27 @@ templ displayVolumeDistribution(volume dash.EcVolumeWithShards) {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
// displayEcVolumeStatus shows an improved status display for EC volumes
|
// displayEcVolumeStatus shows an improved status display for EC volumes.
|
||||||
|
// Status thresholds are based on EC recovery capability:
|
||||||
|
// - Critical: More than DataShardsCount missing (data is unrecoverable)
|
||||||
|
// - Degraded: More than half of DataShardsCount missing (high risk)
|
||||||
|
// - Incomplete: More than half of ParityShardsCount missing (reduced redundancy)
|
||||||
|
// - Minor Issues: Few shards missing (still fully recoverable)
|
||||||
templ displayEcVolumeStatus(volume dash.EcVolumeWithShards) {
|
templ displayEcVolumeStatus(volume dash.EcVolumeWithShards) {
|
||||||
if volume.IsComplete {
|
if volume.IsComplete {
|
||||||
<span class="badge bg-success"><i class="fas fa-check me-1"></i>Complete</span>
|
<span class="badge bg-success"><i class="fas fa-check me-1"></i>Complete</span>
|
||||||
} else {
|
} else {
|
||||||
if len(volume.MissingShards) > erasure_coding.DataShardsCount {
|
if len(volume.MissingShards) > erasure_coding.DataShardsCount {
|
||||||
|
// Unrecoverable: more shards missing than EC can reconstruct
|
||||||
<span class="badge bg-danger"><i class="fas fa-skull me-1"></i>Critical ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
<span class="badge bg-danger"><i class="fas fa-skull me-1"></i>Critical ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
||||||
} else if len(volume.MissingShards) > (erasure_coding.DataShardsCount/2) {
|
} else if len(volume.MissingShards) > (erasure_coding.DataShardsCount/2) {
|
||||||
|
// High risk: approaching unrecoverable state
|
||||||
<span class="badge bg-warning"><i class="fas fa-exclamation-triangle me-1"></i>Degraded ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
<span class="badge bg-warning"><i class="fas fa-exclamation-triangle me-1"></i>Degraded ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
||||||
} else if len(volume.MissingShards) > (erasure_coding.ParityShardsCount/2) {
|
} else if len(volume.MissingShards) > (erasure_coding.ParityShardsCount/2) {
|
||||||
|
// Reduced redundancy but still recoverable
|
||||||
<span class="badge bg-warning"><i class="fas fa-info-circle me-1"></i>Incomplete ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
<span class="badge bg-warning"><i class="fas fa-info-circle me-1"></i>Incomplete ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
||||||
} else {
|
} else {
|
||||||
|
// Minor: few shards missing, fully recoverable with good margin
|
||||||
<span class="badge bg-info"><i class="fas fa-info-circle me-1"></i>Minor Issues ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
<span class="badge bg-info"><i class="fas fa-info-circle me-1"></i>Minor Issues ({fmt.Sprintf("%d", len(volume.MissingShards))} missing)</span>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user