mirror of
https://github.com/seaweedfs/seaweedfs.git
synced 2026-11-13 07:19:18 +01:00
Chris LuandClaude Opus 5.5
b924ffabf1
* admin: restyle the UI as a calm console Grey canvas with white sheets, a docked sidebar that marks the current page with an indigo tint, ink primary buttons, tinted status pills, dense tables with tabular numbers and spectrum capacity meters. The styles are design tokens layered over Bootstrap's own variables, with light and dark values, so the page templates stay unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: add a light, dark and automatic theme switch The choice is kept in localStorage and applied before the page paints, on the sign-in page too; automatic follows the system setting. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: drop hard-coded colors from page templates The volume id link, utilization track and plugin form borders used fixed light-theme colors; sparklines now use the data palette. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: theme the plugin job detail panel background Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: keep the selected radio dot visible in dark mode Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: cycle the theme from memory when storage is blocked Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: keep success progress bars green Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: keep keyboard focus visible on the toolbar togglers Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: use contrasting text on danger and success buttons in dark mode Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: lead the dashboard with cluster health and one row of tiles The header now says in one line whether the cluster is healthy and how many masters, volume servers and filers report. The two rows of stat tiles become one: the volume size limit and EC volume count move into footnotes, the mount client card joins the cluster counts, and the counts link to their pages instead of sitting in nested cards. The duplicate version list and the bucket shortcut in the header are gone, and the section menus become plain View all links. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: export the user columns the table actually has The users table has username, email and access key columns, but the export waited for six cells per row and so always produced only the header line. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: drop table titles that repeat the page title List pages titled their only table with the page title again. The table now sits right under the summary tiles, and the export actions that were hidden in the table header menu move to the page header as an Export button, matching the cluster pages. The policies menu linked to nothing and is removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: drop clock and duplicate summary tiles Buckets, users, policies and service accounts spent a summary tile on the refresh time, which the page footer already shows (policies gains that footer). The users page also showed its user count twice. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: show unset bucket settings as a dash Rows of No owner, No quota and Not configured made the bucket table hard to scan. Unset cells now show a quiet dash that keeps the wording as a tooltip and for screen readers, and the name and creation date no longer wrap (the full timestamp is in the date's tooltip). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: export buckets through the page's API exporter admin.js loads after the page, so its copy of exportBucketList replaced the buckets page's own one. That copy scraped the visible rows, so it exported only the current page, without CSV quoting, and picked up the display text of the cells. The page's exporter reads every bucket from the API with full timestamps and escaped fields. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: escape quotes in the user export Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: download the bucket export as a Blob The exporter put the CSV into a data URL with encodeURI, which leaves # alone, so a bucket owner containing # ended the download there. Use the shared downloadCSV helper instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: count masters as configured, not reporting The master list comes from raft membership, which keeps a follower that is down, so it does not show which masters are reporting. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: link the Prometheus metrics endpoint from the sidebar Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * admin: drop the sidebar metrics link Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
732 lines
37 KiB
Templ
732 lines
37 KiB
Templ
package app
|
|
|
|
import (
|
|
"fmt"
|
|
"strings"
|
|
"github.com/seaweedfs/seaweedfs/weed/admin/dash"
|
|
)
|
|
|
|
templ ClusterVolumes(data dash.ClusterVolumesData) {
|
|
<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="bi bi-database me-2"></i>Cluster Volumes
|
|
</h1>
|
|
if data.FilterCollection != "" {
|
|
<div class="d-flex align-items-center mt-2">
|
|
<span class="badge bg-info me-2">
|
|
<i class="bi bi-funnel me-1"></i>Collection: {data.FilterCollection}
|
|
</span>
|
|
<a href={ dash.PUrl(ctx, "/storage/volumes") } class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-x 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()" style="width: auto;">
|
|
<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>
|
|
<option value="200" if data.PageSize == 200 { selected="selected" }>200 per page</option>
|
|
<option value="500" if data.PageSize == 500 { selected="selected" }>500 per page</option>
|
|
</select>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="exportVolumes()">
|
|
<i class="bi bi-download me-1"></i>Export Page
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="exportVolumeList()" title="Download the full cluster volume list as JSON">
|
|
<i class="bi bi-file-earmark-arrow-up me-1"></i>Export All (JSON)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="volumes-content">
|
|
<!-- Summary Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-primary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
|
Total Volumes
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
{fmt.Sprintf("%d", data.TotalVolumes)}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-database icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-success shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
|
if data.CollectionCount == 1 {
|
|
Collection
|
|
} else {
|
|
Collections
|
|
}
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
if data.CollectionCount == 1 {
|
|
{data.SingleCollection}
|
|
} else {
|
|
{fmt.Sprintf("%d", data.CollectionCount)}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-layers icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-info shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
|
if data.DataCenterCount == 1 {
|
|
Data Center
|
|
} else {
|
|
Data Centers
|
|
}
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
if data.DataCenterCount == 1 {
|
|
{data.SingleDataCenter}
|
|
} else {
|
|
{fmt.Sprintf("%d", data.DataCenterCount)}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-building icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-secondary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
|
|
if data.RackCount == 1 {
|
|
Rack
|
|
} else {
|
|
Racks
|
|
}
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
if data.RackCount == 1 {
|
|
{data.SingleRack}
|
|
} else {
|
|
{fmt.Sprintf("%d", data.RackCount)}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-server icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-dark shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
|
|
if data.DiskTypeCount == 1 {
|
|
Disk Type
|
|
} else {
|
|
Disk Types
|
|
}
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
if data.DiskTypeCount == 1 {
|
|
{data.SingleDiskType}
|
|
} else {
|
|
{strings.Join(data.AllDiskTypes, ", ")}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-device-hdd icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-purple shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-purple text-uppercase mb-1">
|
|
if data.VersionCount == 1 {
|
|
Version
|
|
} else {
|
|
Versions
|
|
}
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
if data.VersionCount == 1 {
|
|
{data.SingleVersion}
|
|
} else {
|
|
{strings.Join(data.AllVersions, ", ")}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-diagram-3 icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card border-left-warning shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
|
|
Total Size
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
{formatBytes(data.TotalSize)}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="bi bi-graph-up icon-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volumes Table -->
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">
|
|
<i class="bi bi-database me-2"></i>Volume Details
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
if len(data.Volumes) > 0 {
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="volumesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<a href="#" onclick="sortTable('id')" class="text-decoration-none text-dark">
|
|
Volume ID
|
|
@getSortIcon("id", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
<th>
|
|
<a href="#" onclick="sortTable('server')" class="text-decoration-none text-dark">
|
|
Server
|
|
@getSortIcon("server", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
if data.ShowDataCenterColumn {
|
|
<th>
|
|
<a href="#" onclick="sortTable('datacenter')" class="text-decoration-none text-dark">
|
|
Data Center
|
|
@getSortIcon("datacenter", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
}
|
|
if data.ShowRackColumn {
|
|
<th>
|
|
<a href="#" onclick="sortTable('rack')" class="text-decoration-none text-dark">
|
|
Rack
|
|
@getSortIcon("rack", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
}
|
|
if data.ShowCollectionColumn {
|
|
<th>
|
|
<a href="#" onclick="sortTable('collection')" class="text-decoration-none text-dark">
|
|
Collection
|
|
@getSortIcon("collection", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
}
|
|
<th>
|
|
<a href="#" onclick="sortTable('size')" class="text-decoration-none text-dark">
|
|
Size
|
|
@getSortIcon("size", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
<th>Volume Utilization</th>
|
|
<th>
|
|
<a href="#" onclick="sortTable('filecount')" class="text-decoration-none text-dark">
|
|
File Count
|
|
@getSortIcon("filecount", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
<th>
|
|
<a href="#" onclick="sortTable('replication')" class="text-decoration-none text-dark">
|
|
Replication
|
|
@getSortIcon("replication", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
if data.ShowDiskTypeColumn {
|
|
<th>
|
|
<a href="#" onclick="sortTable('disktype')" class="text-decoration-none text-dark">
|
|
Disk Type
|
|
@getSortIcon("disktype", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
}
|
|
if data.ShowVersionColumn {
|
|
<th>
|
|
<a href="#" onclick="sortTable('version')" class="text-decoration-none text-dark">
|
|
Version
|
|
@getSortIcon("version", data.SortBy, data.SortOrder)
|
|
</a>
|
|
</th>
|
|
}
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
for _, volume := range data.Volumes {
|
|
<tr>
|
|
<td>
|
|
<code class="volume-id-link" style="cursor: pointer; text-decoration: underline;"
|
|
data-volume-id={fmt.Sprintf("%d", volume.Id)}
|
|
title="Click to view volume details">
|
|
{fmt.Sprintf("%d", volume.Id)}
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<a href={templ.SafeURL(fmt.Sprintf("//%s/ui/index.html", volume.Server))} target="_blank" class="text-decoration-none">
|
|
{volume.Server}
|
|
<i class="bi bi-box-arrow-up-right ms-1 text-muted"></i>
|
|
</a>
|
|
</td>
|
|
if data.ShowDataCenterColumn {
|
|
<td>
|
|
<span class="badge bg-light text-dark">{volume.DataCenter}</span>
|
|
</td>
|
|
}
|
|
if data.ShowRackColumn {
|
|
<td>
|
|
<span class="badge bg-light text-dark">{volume.Rack}</span>
|
|
</td>
|
|
}
|
|
if data.ShowCollectionColumn {
|
|
<td>
|
|
if volume.Collection == "" {
|
|
<a href={ dash.PUrl(ctx, "/storage/volumes?collection=default") } class="text-decoration-none">
|
|
<span class="badge bg-secondary">default</span>
|
|
</a>
|
|
} else {
|
|
<a href={ dash.PUrl(ctx, fmt.Sprintf("/storage/volumes?collection=%s", volume.Collection)) } class="text-decoration-none">
|
|
<span class="badge bg-secondary">{volume.Collection}</span>
|
|
</a>
|
|
}
|
|
</td>
|
|
}
|
|
<td>{formatBytes(int64(volume.Size))}</td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 80px; height: 16px;">
|
|
<!-- Active data (green) -->
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
style={fmt.Sprintf("width: %.1f%%",
|
|
func() float64 {
|
|
if volume.Size > 0 {
|
|
if data.VolumeSizeLimit > 0 {
|
|
return float64(volume.Size - volume.DeletedByteCount) / float64(data.VolumeSizeLimit) * 100
|
|
}
|
|
return float64(volume.Size - volume.DeletedByteCount) / float64(volume.Size) * 100
|
|
}
|
|
return 0
|
|
}())}
|
|
title={fmt.Sprintf("Active: %s", formatBytes(int64(volume.Size - volume.DeletedByteCount)))}>
|
|
</div>
|
|
<!-- Garbage data (red) -->
|
|
<div class="progress-bar bg-danger" role="progressbar"
|
|
style={fmt.Sprintf("width: %.1f%%",
|
|
func() float64 {
|
|
if volume.Size > 0 && volume.DeletedByteCount > 0 {
|
|
if data.VolumeSizeLimit > 0 {
|
|
return float64(volume.DeletedByteCount) / float64(data.VolumeSizeLimit) * 100
|
|
}
|
|
return float64(volume.DeletedByteCount) / float64(volume.Size) * 100
|
|
}
|
|
return 0
|
|
}())}
|
|
title={fmt.Sprintf("Garbage: %s", formatBytes(int64(volume.DeletedByteCount)))}>
|
|
</div>
|
|
</div>
|
|
<small class="text-muted">
|
|
{func() string {
|
|
if data.VolumeSizeLimit > 0 {
|
|
return fmt.Sprintf("%.0f%%", float64(volume.Size)/float64(data.VolumeSizeLimit)*100)
|
|
}
|
|
return "N/A"
|
|
}()}
|
|
</small>
|
|
</div>
|
|
</td>
|
|
<td>{fmt.Sprintf("%d", volume.FileCount)}</td>
|
|
<td>
|
|
<span class="badge bg-info">{fmt.Sprintf("%03d", volume.ReplicaPlacement)}</span>
|
|
</td>
|
|
if data.ShowDiskTypeColumn {
|
|
<td>
|
|
<span class="badge bg-primary">{displayDiskType(volume.DiskType)}</span>
|
|
if volume.RemoteStorageName != "" {
|
|
<span class="badge bg-info text-white ms-1" title={volume.RemoteStorageKey}>
|
|
<i class="bi bi-cloud me-1"></i>{volume.RemoteStorageName}
|
|
</span>
|
|
}
|
|
</td>
|
|
}
|
|
if data.ShowVersionColumn {
|
|
<td>
|
|
<span class="badge bg-dark">{fmt.Sprintf("v%d", volume.Version)}</span>
|
|
</td>
|
|
}
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-outline-primary btn-sm view-details-btn"
|
|
title="View Details" data-volume-id={fmt.Sprintf("%d", volume.Id)}>
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm vacuum-btn"
|
|
title="Vacuum"
|
|
data-volume-id={fmt.Sprintf("%d", volume.Id)}
|
|
data-server={volume.Server}>
|
|
<i class="bi bi-arrows-angle-contract"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Volume Summary -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div>
|
|
<small class="text-muted">
|
|
Showing {fmt.Sprintf("%d", (data.CurrentPage-1)*data.PageSize + 1)} to {fmt.Sprintf("%d", minInt(data.CurrentPage*data.PageSize, data.TotalVolumes))} of {fmt.Sprintf("%d", data.TotalVolumes)} volumes
|
|
</small>
|
|
</div>
|
|
if data.TotalPages > 1 {
|
|
<div>
|
|
<small class="text-muted">
|
|
Page {fmt.Sprintf("%d", data.CurrentPage)} of {fmt.Sprintf("%d", data.TotalPages)}
|
|
</small>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Pagination Controls -->
|
|
if data.TotalPages > 1 {
|
|
<div class="d-flex justify-content-center mt-3">
|
|
<nav aria-label="Volumes pagination">
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<!-- Previous Button -->
|
|
if data.CurrentPage > 1 {
|
|
<li class="page-item">
|
|
<a class="page-link pagination-link" href="#" data-page={fmt.Sprintf("%d", data.CurrentPage-1)}>
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
} else {
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</span>
|
|
</li>
|
|
}
|
|
|
|
<!-- Page Numbers -->
|
|
for i := maxInt(1, data.CurrentPage-2); i <= minInt(data.TotalPages, data.CurrentPage+2); i++ {
|
|
if i == data.CurrentPage {
|
|
<li class="page-item active">
|
|
<span class="page-link">{fmt.Sprintf("%d", i)}</span>
|
|
</li>
|
|
} else {
|
|
<li class="page-item">
|
|
<a class="page-link pagination-link" href="#" data-page={fmt.Sprintf("%d", i)}>{fmt.Sprintf("%d", i)}</a>
|
|
</li>
|
|
}
|
|
}
|
|
|
|
<!-- Next Button -->
|
|
if data.CurrentPage < data.TotalPages {
|
|
<li class="page-item">
|
|
<a class="page-link pagination-link" href="#" data-page={fmt.Sprintf("%d", data.CurrentPage+1)}>
|
|
<i class="bi bi-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
} else {
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</span>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
}
|
|
} else {
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-database icon-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">No Volumes Found</h5>
|
|
<p class="text-muted">No volumes are currently available in the cluster.</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Last Updated -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<small class="text-muted">
|
|
<i class="bi bi-clock me-1"></i>
|
|
Last updated: {data.LastUpdated.Format("2006-01-02 15:04:05")}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript for pagination and sorting -->
|
|
<script>
|
|
// Initialize pagination links when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add click handlers to pagination links
|
|
document.querySelectorAll('.pagination-link').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const page = this.getAttribute('data-page');
|
|
goToPage(page);
|
|
});
|
|
});
|
|
|
|
// Add click handlers to view details buttons
|
|
document.querySelectorAll('.view-details-btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const volumeId = this.getAttribute('data-volume-id');
|
|
viewVolumeDetails(volumeId);
|
|
});
|
|
});
|
|
|
|
// Add click handlers to volume ID links
|
|
document.querySelectorAll('.volume-id-link').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const volumeId = this.getAttribute('data-volume-id');
|
|
viewVolumeDetails(volumeId);
|
|
});
|
|
});
|
|
|
|
// Add click handlers to vacuum buttons
|
|
document.querySelectorAll('.vacuum-btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const volumeId = this.getAttribute('data-volume-id');
|
|
const server = this.getAttribute('data-server');
|
|
performVacuum(volumeId, server, this);
|
|
});
|
|
});
|
|
});
|
|
|
|
function goToPage(page) {
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('page', page);
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function changePageSize() {
|
|
const pageSize = document.getElementById('pageSizeSelect').value;
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('pageSize', pageSize);
|
|
url.searchParams.set('page', '1'); // Reset to first page
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function sortTable(column) {
|
|
const url = new URL(window.location);
|
|
const currentSort = url.searchParams.get('sortBy');
|
|
const currentOrder = url.searchParams.get('sortOrder') || 'asc';
|
|
|
|
let newOrder = 'asc';
|
|
if (currentSort === column && currentOrder === 'asc') {
|
|
newOrder = 'desc';
|
|
}
|
|
|
|
url.searchParams.set('sortBy', column);
|
|
url.searchParams.set('sortOrder', newOrder);
|
|
url.searchParams.set('page', '1'); // Reset to first page
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function viewVolumeDetails(volumeId) {
|
|
// Get the server from the current row - works for both buttons and volume ID links
|
|
const clickedElement = event.target;
|
|
const row = clickedElement.closest('tr');
|
|
const serverCell = row.querySelector('td:nth-child(2) a');
|
|
const server = serverCell ? serverCell.textContent.trim() : 'unknown';
|
|
|
|
window.location.href = (window.__BASE_PATH__ || '') + `/storage/volumes/${volumeId}/${encodeURIComponent(server)}`;
|
|
}
|
|
|
|
function performVacuum(volumeId, server, button) {
|
|
// Disable button and show loading state
|
|
const originalHTML = button.innerHTML;
|
|
button.disabled = true;
|
|
button.innerHTML = '<i class="bi bi-arrow-repeat icon-spin"></i>';
|
|
|
|
// Send vacuum request
|
|
fetch((window.__BASE_PATH__ || '') + `/api/volumes/${volumeId}/${encodeURIComponent(server)}/vacuum`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
showMessage(data.error, 'error');
|
|
} else {
|
|
showMessage(data.message || 'Volume vacuum started successfully', 'success');
|
|
// Optionally refresh the page after a delay to show updated vacuum status
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 2000);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showMessage('Failed to start vacuum operation', 'error');
|
|
})
|
|
.finally(() => {
|
|
// Re-enable button
|
|
button.disabled = false;
|
|
button.innerHTML = originalHTML;
|
|
});
|
|
}
|
|
|
|
function showMessage(message, type) {
|
|
// Create toast notification
|
|
const toast = document.createElement('div');
|
|
toast.className = `alert alert-${type === 'error' ? 'danger' : 'success'} alert-dismissible fade show position-fixed`;
|
|
toast.style.top = '20px';
|
|
toast.style.right = '20px';
|
|
toast.style.zIndex = '9999';
|
|
toast.style.minWidth = '300px';
|
|
|
|
toast.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
// Auto-remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (toast.parentNode) {
|
|
toast.parentNode.removeChild(toast);
|
|
}
|
|
}, 5000);
|
|
}
|
|
</script>
|
|
}
|
|
|
|
func countActiveVolumes(volumes []dash.VolumeWithTopology) int {
|
|
// Since we removed status tracking, consider all volumes as active
|
|
return len(volumes)
|
|
}
|
|
|
|
func countUniqueDataCenters(volumes []dash.VolumeWithTopology) int {
|
|
dcMap := make(map[string]bool)
|
|
for _, volume := range volumes {
|
|
dcMap[volume.DataCenter] = true
|
|
}
|
|
return len(dcMap)
|
|
}
|
|
|
|
func countUniqueRacks(volumes []dash.VolumeWithTopology) int {
|
|
rackMap := make(map[string]bool)
|
|
for _, volume := range volumes {
|
|
if volume.Rack != "" {
|
|
rackMap[volume.Rack] = true
|
|
}
|
|
}
|
|
return len(rackMap)
|
|
}
|
|
|
|
// displayDiskType maps the empty disk type to its display name.
|
|
func displayDiskType(diskType string) string {
|
|
if diskType == "" {
|
|
return "hdd"
|
|
}
|
|
return diskType
|
|
}
|
|
|
|
func countUniqueDiskTypes(volumes []dash.VolumeWithTopology) int {
|
|
diskTypeMap := make(map[string]bool)
|
|
for _, volume := range volumes {
|
|
diskTypeMap[displayDiskType(volume.DiskType)] = true
|
|
}
|
|
return len(diskTypeMap)
|
|
}
|
|
|
|
|
|
|
|
templ getSortIcon(column, currentSort, currentOrder string) {
|
|
if column != currentSort {
|
|
<i class="bi bi-arrow-down-up text-muted ms-1"></i>
|
|
} else if currentOrder == "asc" {
|
|
<i class="bi bi-sort-up text-primary ms-1"></i>
|
|
} else {
|
|
<i class="bi bi-sort-down text-primary ms-1"></i>
|
|
}
|
|
}
|
|
|
|
func minInt(a, b int) int {
|
|
if a < b {
|
|
return a
|
|
}
|
|
return b
|
|
}
|
|
|
|
func maxInt(a, b int) int {
|
|
if a > b {
|
|
return a
|
|
}
|
|
return b
|
|
}
|