Admin UI: Add policies (#6968)
* add policies to UI, accessing filer directly * view, edit policies * add back buttons for "users" page * remove unused * fix ui dark mode when modal is closed * bucket view details button * fix browser buttons * filer action button works * clean up masters page * fix volume servers action buttons * fix collections page action button * fix properties page * more obvious * fix directory creation file mode * Update file_browser_handlers.go * directory permission
This commit is contained in:
Chris Lu
@@ -164,22 +164,18 @@ templ ClusterCollections(data dash.ClusterCollectionsData) {
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm"
|
||||
title="View Details">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||||
title="Edit">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm"
|
||||
title="Delete"
|
||||
data-collection-name={collection.Name}
|
||||
onclick="confirmDeleteCollection(this)">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="btn btn-outline-primary btn-sm"
|
||||
title="View Details"
|
||||
data-action="view-details"
|
||||
data-name={collection.Name}
|
||||
data-datacenter={collection.DataCenter}
|
||||
data-volume-count={fmt.Sprintf("%d", collection.VolumeCount)}
|
||||
data-file-count={fmt.Sprintf("%d", collection.FileCount)}
|
||||
data-total-size={fmt.Sprintf("%d", collection.TotalSize)}
|
||||
data-disk-types={formatDiskTypes(collection.DiskTypes)}>
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@@ -209,30 +205,169 @@ templ ClusterCollections(data dash.ClusterCollectionsData) {
|
||||
|
||||
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteCollectionModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title text-danger">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>Delete Collection
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete the collection <strong id="deleteCollectionName"></strong>?</p>
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-warning me-2"></i>
|
||||
This action cannot be undone. All volumes in this collection will be affected.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteCollection">Delete Collection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- JavaScript for cluster collections functionality -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Handle collection action buttons
|
||||
document.addEventListener('click', function(e) {
|
||||
const button = e.target.closest('[data-action]');
|
||||
if (!button) return;
|
||||
|
||||
const action = button.getAttribute('data-action');
|
||||
|
||||
switch(action) {
|
||||
case 'view-details':
|
||||
const collectionData = {
|
||||
name: button.getAttribute('data-name'),
|
||||
datacenter: button.getAttribute('data-datacenter'),
|
||||
volumeCount: parseInt(button.getAttribute('data-volume-count')),
|
||||
fileCount: parseInt(button.getAttribute('data-file-count')),
|
||||
totalSize: parseInt(button.getAttribute('data-total-size')),
|
||||
diskTypes: button.getAttribute('data-disk-types')
|
||||
};
|
||||
showCollectionDetails(collectionData);
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function showCollectionDetails(collection) {
|
||||
const modalHtml = '<div class="modal fade" id="collectionDetailsModal" tabindex="-1">' +
|
||||
'<div class="modal-dialog modal-lg">' +
|
||||
'<div class="modal-content">' +
|
||||
'<div class="modal-header">' +
|
||||
'<h5 class="modal-title"><i class="fas fa-layer-group me-2"></i>Collection Details: ' + collection.name + '</h5>' +
|
||||
'<button type="button" class="btn-close" data-bs-dismiss="modal"></button>' +
|
||||
'</div>' +
|
||||
'<div class="modal-body">' +
|
||||
'<div class="row">' +
|
||||
'<div class="col-md-6">' +
|
||||
'<h6 class="text-primary"><i class="fas fa-info-circle me-1"></i>Basic Information</h6>' +
|
||||
'<table class="table table-sm">' +
|
||||
'<tr><td><strong>Collection Name:</strong></td><td><code>' + collection.name + '</code></td></tr>' +
|
||||
'<tr><td><strong>Data Center:</strong></td><td>' +
|
||||
(collection.datacenter ? '<span class="badge bg-light text-dark">' + collection.datacenter + '</span>' : '<span class="text-muted">N/A</span>') +
|
||||
'</td></tr>' +
|
||||
'<tr><td><strong>Disk Types:</strong></td><td>' +
|
||||
(collection.diskTypes ? collection.diskTypes.split(', ').map(type =>
|
||||
'<span class="badge bg-' + getDiskTypeBadgeColor(type) + ' me-1">' + type + '</span>'
|
||||
).join('') : '<span class="text-muted">Unknown</span>') +
|
||||
'</td></tr>' +
|
||||
'</table>' +
|
||||
'</div>' +
|
||||
'<div class="col-md-6">' +
|
||||
'<h6 class="text-primary"><i class="fas fa-chart-bar me-1"></i>Storage Statistics</h6>' +
|
||||
'<table class="table table-sm">' +
|
||||
'<tr><td><strong>Total Volumes:</strong></td><td>' +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<i class="fas fa-database me-2 text-muted"></i>' +
|
||||
'<span>' + collection.volumeCount.toLocaleString() + '</span>' +
|
||||
'</div>' +
|
||||
'</td></tr>' +
|
||||
'<tr><td><strong>Total Files:</strong></td><td>' +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<i class="fas fa-file me-2 text-muted"></i>' +
|
||||
'<span>' + collection.fileCount.toLocaleString() + '</span>' +
|
||||
'</div>' +
|
||||
'</td></tr>' +
|
||||
'<tr><td><strong>Total Size:</strong></td><td>' +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<i class="fas fa-hdd me-2 text-muted"></i>' +
|
||||
'<span>' + formatBytes(collection.totalSize) + '</span>' +
|
||||
'</div>' +
|
||||
'</td></tr>' +
|
||||
'</table>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="row mt-3">' +
|
||||
'<div class="col-12">' +
|
||||
'<h6 class="text-primary"><i class="fas fa-link me-1"></i>Quick Actions</h6>' +
|
||||
'<div class="d-grid gap-2 d-md-flex">' +
|
||||
'<a href="/cluster/volumes?collection=' + encodeURIComponent(collection.name) + '" class="btn btn-outline-primary">' +
|
||||
'<i class="fas fa-database me-1"></i>View Volumes' +
|
||||
'</a>' +
|
||||
'<a href="/files?collection=' + encodeURIComponent(collection.name) + '" class="btn btn-outline-info">' +
|
||||
'<i class="fas fa-folder me-1"></i>Browse Files' +
|
||||
'</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="modal-footer">' +
|
||||
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// Remove existing modal if present
|
||||
const existingModal = document.getElementById('collectionDetailsModal');
|
||||
if (existingModal) {
|
||||
existingModal.remove();
|
||||
}
|
||||
|
||||
// Add modal to body and show
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
const modal = new bootstrap.Modal(document.getElementById('collectionDetailsModal'));
|
||||
modal.show();
|
||||
|
||||
// Remove modal when hidden
|
||||
document.getElementById('collectionDetailsModal').addEventListener('hidden.bs.modal', function() {
|
||||
this.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function getDiskTypeBadgeColor(diskType) {
|
||||
switch(diskType.toLowerCase()) {
|
||||
case 'ssd':
|
||||
return 'primary';
|
||||
case 'hdd':
|
||||
case '':
|
||||
return 'secondary';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function exportCollections() {
|
||||
// Simple CSV export of collections list
|
||||
const rows = Array.from(document.querySelectorAll('#collectionsTable tbody tr')).map(row => {
|
||||
const cells = row.querySelectorAll('td');
|
||||
if (cells.length > 1) {
|
||||
return {
|
||||
name: cells[0].textContent.trim(),
|
||||
volumes: cells[1].textContent.trim(),
|
||||
files: cells[2].textContent.trim(),
|
||||
size: cells[3].textContent.trim(),
|
||||
diskTypes: cells[4].textContent.trim()
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}).filter(row => row !== null);
|
||||
|
||||
const csvContent = "data:text/csv;charset=utf-8," +
|
||||
"Collection Name,Volumes,Files,Size,Disk Types\n" +
|
||||
rows.map(r => '"' + r.name + '","' + r.volumes + '","' + r.files + '","' + r.size + '","' + r.diskTypes + '"').join("\n");
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", "collections.csv");
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
func getDiskTypeColor(diskType string) string {
|
||||
|
||||
Reference in New Issue
Block a user