add vacuum operation

weed/admin/view/app/cluster_volumes.templ

@@ -364,8 +364,10 @@ templ ClusterVolumes(data dash.ClusterVolumesData) {
                                                         title="View Details" data-volume-id={fmt.Sprintf("%d", volume.Id)}>
                                                     <i class="fas fa-eye"></i>
                                                 </button>
-                                                <button type="button" class="btn btn-outline-secondary btn-sm" 
-                                                        title="Vacuum">
+                                                <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="fas fa-compress-alt"></i>
                                                 </button>
                                             </div>
@@ -485,6 +487,16 @@ templ ClusterVolumes(data dash.ClusterVolumesData) {
                     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) {
@@ -531,6 +543,66 @@ templ ClusterVolumes(data dash.ClusterVolumesData) {
             
             window.location.href = `/cluster/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="fas fa-spinner fa-spin"></i>';
+
+            // Send vacuum request
+            fetch(`/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>
 }