feat: implement Phase 3 - Batch Operations
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 59s
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 59s
Features added:
- Multi-select functionality for processes with checkboxes
- Floating BatchActions toolbar appears when processes are selected
- Batch operations: Start Selected, Stop Selected, Restart Selected
- Select All / Deselect All button in processes page
- Visual feedback with ring indicator on selected cards
- Click card to toggle selection, buttons prevent card selection
Implementation details:
- Created batch API routes: /api/supervisor/processes/{start-all,stop-all,restart-all}
- Added React Query hooks: useStartAllProcesses, useStopAllProcesses, useRestartAllProcesses
- Created BatchActions component with floating toolbar
- Enhanced ProcessCard with optional selection mode (isSelected, onSelectionChange props)
- Updated processes page with selection state management
- Checkbox prevents event bubbling to avoid conflicts with action buttons
UX improvements:
- Selected cards show primary ring with offset
- BatchActions toolbar slides up from bottom
- Selection count displayed in toolbar
- Clear selection with X button or after batch action completes
Phase 3 complete (4-6 hours estimated)
This commit is contained in:
@@ -370,3 +370,89 @@ export function useRestartProcessGroup() {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Batch Operations (All Processes)
|
||||
|
||||
async function startAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
||||
const response = await fetch('/api/supervisor/processes/start-all', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ wait }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to start all processes');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function stopAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
||||
const response = await fetch('/api/supervisor/processes/stop-all', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ wait }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to stop all processes');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function restartAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
||||
const response = await fetch('/api/supervisor/processes/restart-all', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ wait }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to restart all processes');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export function useStartAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => startAllProcesses(wait),
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(`Failed to start all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useStopAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => stopAllProcesses(wait),
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(`Failed to stop all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRestartAllProcesses() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (wait: boolean = true) => restartAllProcesses(wait),
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(`Failed to restart all processes: ${error.message}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user