diff options
Diffstat (limited to 'weed/admin/view/app/collection_details.templ')
| -rw-r--r-- | weed/admin/view/app/collection_details.templ | 371 |
1 files changed, 371 insertions, 0 deletions
diff --git a/weed/admin/view/app/collection_details.templ b/weed/admin/view/app/collection_details.templ new file mode 100644 index 000000000..bd11cca81 --- /dev/null +++ b/weed/admin/view/app/collection_details.templ @@ -0,0 +1,371 @@ +package app + +import ( + "fmt" + "github.com/seaweedfs/seaweedfs/weed/admin/dash" + "github.com/seaweedfs/seaweedfs/weed/util" +) + +templ CollectionDetails(data dash.CollectionDetailsData) { + <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> + <div> + <h1 class="h2"> + <i class="fas fa-layer-group me-2"></i>Collection Details: {data.CollectionName} + </h1> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="/admin" class="text-decoration-none">Dashboard</a></li> + <li class="breadcrumb-item"><a href="/cluster/collections" class="text-decoration-none">Collections</a></li> + <li class="breadcrumb-item active" aria-current="page">{data.CollectionName}</li> + </ol> + </nav> + </div> + <div class="btn-toolbar mb-2 mb-md-0"> + <div class="btn-group me-2"> + <button type="button" class="btn btn-sm btn-outline-secondary" onclick="history.back()"> + <i class="fas fa-arrow-left me-1"></i>Back + </button> + <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> + + <!-- Collection Summary --> + <div class="row mb-4"> + <div class="col-md-3"> + <div class="card text-bg-primary"> + <div class="card-body"> + <div class="d-flex justify-content-between"> + <div> + <h6 class="card-title">Regular Volumes</h6> + <h4 class="mb-0">{fmt.Sprintf("%d", data.TotalVolumes)}</h4> + <small>Traditional volumes</small> + </div> + <div class="align-self-center"> + <i class="fas fa-database fa-2x"></i> + </div> + </div> + </div> + </div> + </div> + <div class="col-md-3"> + <div class="card text-bg-info"> + <div class="card-body"> + <div class="d-flex justify-content-between"> + <div> + <h6 class="card-title">EC Volumes</h6> + <h4 class="mb-0">{fmt.Sprintf("%d", data.TotalEcVolumes)}</h4> + <small>Erasure coded volumes</small> + </div> + <div class="align-self-center"> + <i class="fas fa-th-large fa-2x"></i> + </div> + </div> + </div> + </div> + </div> + <div class="col-md-3"> + <div class="card text-bg-success"> + <div class="card-body"> + <div class="d-flex justify-content-between"> + <div> + <h6 class="card-title">Total Files</h6> + <h4 class="mb-0">{fmt.Sprintf("%d", data.TotalFiles)}</h4> + <small>Files stored</small> + </div> + <div class="align-self-center"> + <i class="fas fa-file fa-2x"></i> + </div> + </div> + </div> + </div> + </div> + <div class="col-md-3"> + <div class="card text-bg-warning"> + <div class="card-body"> + <div class="d-flex justify-content-between"> + <div> + <h6 class="card-title">Total Size (Logical)</h6> + <h4 class="mb-0">{util.BytesToHumanReadable(uint64(data.TotalSize))}</h4> + <small>Data stored (regular volumes only)</small> + </div> + <div class="align-self-center"> + <i class="fas fa-hdd fa-2x"></i> + </div> + </div> + </div> + </div> + </div> + </div> + + <!-- Size Information Note --> + <div class="alert alert-info" role="alert"> + <i class="fas fa-info-circle me-2"></i> + <strong>Size Information:</strong> + Logical size represents the actual data stored (regular volumes only). + EC volumes show shard counts instead of size - physical storage for EC volumes is approximately 1.4x the original data due to erasure coding redundancy. + </div> + + <!-- Pagination Info --> + <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 + totalItems := data.TotalVolumes + data.TotalEcVolumes + if end > totalItems { + return totalItems + } + return end + }())} of {fmt.Sprintf("%d", data.TotalVolumes + data.TotalEcVolumes)} items + </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="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> + </div> + + <!-- Volumes Table --> + <div class="table-responsive"> + <table class="table table-striped table-hover" id="volumesTable"> + <thead> + <tr> + <th> + <a href="#" onclick="sortBy('volume_id')" class="text-dark text-decoration-none"> + Volume ID + if data.SortBy == "volume_id" { + if data.SortOrder == "asc" { + <i class="fas fa-sort-up ms-1"></i> + } else { + <i class="fas fa-sort-down ms-1"></i> + } + } else { + <i class="fas fa-sort ms-1 text-muted"></i> + } + </a> + </th> + <th> + <a href="#" onclick="sortBy('type')" class="text-dark text-decoration-none"> + Type + if data.SortBy == "type" { + if data.SortOrder == "asc" { + <i class="fas fa-sort-up ms-1"></i> + } else { + <i class="fas fa-sort-down ms-1"></i> + } + } else { + <i class="fas fa-sort ms-1 text-muted"></i> + } + </a> + </th> + <th class="text-dark">Logical Size / Shard Count</th> + <th class="text-dark">Files</th> + <th class="text-dark">Status</th> + <th class="text-dark">Actions</th> + </tr> + </thead> + <tbody> + // Display regular volumes + for _, volume := range data.RegularVolumes { + <tr> + <td> + <strong>{fmt.Sprintf("%d", volume.Id)}</strong> + </td> + <td> + <span class="badge bg-primary"> + <i class="fas fa-database me-1"></i>Regular + </span> + </td> + <td> + {util.BytesToHumanReadable(volume.Size)} + </td> + <td> + {fmt.Sprintf("%d", volume.FileCount)} + </td> + <td> + if volume.ReadOnly { + <span class="badge bg-warning">Read Only</span> + } else { + <span class="badge bg-success">Read/Write</span> + } + </td> + <td> + <div class="btn-group" role="group"> + <button type="button" class="btn btn-sm btn-outline-primary" + onclick="showVolumeDetails(event)" + data-volume-id={ fmt.Sprintf("%d", volume.Id) } + data-server={ volume.Server } + title="View volume details"> + <i class="fas fa-info-circle"></i> + </button> + </div> + </td> + </tr> + } + + // Display EC volumes + for _, ecVolume := range data.EcVolumes { + <tr> + <td> + <strong>{fmt.Sprintf("%d", ecVolume.VolumeID)}</strong> + </td> + <td> + <span class="badge bg-info"> + <i class="fas fa-th-large me-1"></i>EC + </span> + </td> + <td> + <span class="badge bg-primary">{fmt.Sprintf("%d/14", ecVolume.TotalShards)}</span> + </td> + <td> + <span class="text-muted">-</span> + </td> + <td> + if ecVolume.IsComplete { + <span class="badge bg-success"> + <i class="fas fa-check me-1"></i>Complete + </span> + } else { + <span class="badge bg-warning"> + <i class="fas fa-exclamation-triangle me-1"></i> + Missing {fmt.Sprintf("%d", len(ecVolume.MissingShards))} shards + </span> + } + </td> + <td> + <div class="btn-group" role="group"> + <button type="button" class="btn btn-sm btn-outline-info" + onclick="showEcVolumeDetails(event)" + data-volume-id={ fmt.Sprintf("%d", ecVolume.VolumeID) } + title="View EC volume details"> + <i class="fas fa-info-circle"></i> + </button> + if !ecVolume.IsComplete { + <button type="button" class="btn btn-sm btn-outline-warning" + onclick="repairEcVolume(event)" + data-volume-id={ fmt.Sprintf("%d", ecVolume.VolumeID) } + title="Repair missing shards"> + <i class="fas fa-wrench"></i> + </button> + } + </div> + </td> + </tr> + } + </tbody> + </table> + </div> + + <!-- Pagination --> + if data.TotalPages > 1 { + <nav aria-label="Collection volumes pagination"> + <ul class="pagination justify-content-center"> + if data.Page > 1 { + <li class="page-item"> + <a class="page-link" href="#" onclick="goToPage(event)" data-page="1">First</a> + </li> + <li class="page-item"> + <a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page-1) }>Previous</a> + </li> + } + + for i := 1; i <= data.TotalPages; i++ { + if i == data.Page { + <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"> + <a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", i) }>{fmt.Sprintf("%d", i)}</a> + </li> + } else if i == 4 && data.Page > 6 { + <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"> + <span class="page-link">...</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) }>Next</a> + </li> + <li class="page-item"> + <a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.TotalPages) }>Last</a> + </li> + } + </ul> + </nav> + } + + <script> + // Sorting functionality + function sortBy(field) { + const currentSort = new URLSearchParams(window.location.search).get('sort_by'); + const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc'; + + let newOrder = 'asc'; + if (currentSort === field && currentOrder === 'asc') { + newOrder = 'desc'; + } + + const url = new URL(window.location); + url.searchParams.set('sort_by', field); + url.searchParams.set('sort_order', newOrder); + url.searchParams.set('page', '1'); // Reset to first page + window.location.href = url.toString(); + } + + // Pagination functionality + function goToPage(event) { + event.preventDefault(); + const page = event.target.closest('a').getAttribute('data-page'); + const url = new URL(window.location); + url.searchParams.set('page', page); + window.location.href = url.toString(); + } + + // Page size functionality + function changePageSize(newPageSize) { + const url = new URL(window.location); + url.searchParams.set('page_size', newPageSize); + url.searchParams.set('page', '1'); // Reset to first page when changing page size + window.location.href = url.toString(); + } + + // Volume details + function showVolumeDetails(event) { + const volumeId = event.target.closest('button').getAttribute('data-volume-id'); + const server = event.target.closest('button').getAttribute('data-server'); + window.location.href = `/cluster/volumes/${volumeId}/${server}`; + } + + // EC Volume details + function showEcVolumeDetails(event) { + const volumeId = event.target.closest('button').getAttribute('data-volume-id'); + window.location.href = `/cluster/ec-volumes/${volumeId}`; + } + + // Repair EC Volume + function repairEcVolume(event) { + const volumeId = event.target.closest('button').getAttribute('data-volume-id'); + if (confirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`)) { + // TODO: Implement repair functionality + alert('Repair functionality will be implemented soon.'); + } + } + </script> +}
\ No newline at end of file |