feat: implement bulk ACL application feature for proxy hosts
This commit is contained in:
Wikid82
@@ -0,0 +1,177 @@
|
||||
# Bulk ACL Application Feature
|
||||
|
||||
## Overview
|
||||
Implemented a bulk ACL (Access Control List) application feature that allows users to quickly apply or remove access lists from multiple proxy hosts at once, eliminating the need to edit each host individually.
|
||||
|
||||
## User Workflow Improvements
|
||||
|
||||
### Previous Workflow (Manual)
|
||||
1. Create proxy hosts
|
||||
2. Create access list
|
||||
3. **Edit each host individually** to apply the ACL (tedious for many hosts)
|
||||
|
||||
### New Workflow (Bulk)
|
||||
1. Create proxy hosts
|
||||
2. Create access list
|
||||
3. **Select multiple hosts** → Bulk Actions → Apply/Remove ACL (one operation)
|
||||
|
||||
## Implementation Details
|
||||
|
||||
### Backend (`backend/internal/api/handlers/proxy_host_handler.go`)
|
||||
|
||||
**New Endpoint**: `PUT /api/v1/proxy-hosts/bulk-update-acl`
|
||||
|
||||
**Request Body**:
|
||||
```json
|
||||
{
|
||||
"host_uuids": ["uuid-1", "uuid-2", "uuid-3"],
|
||||
"access_list_id": 42 // or null to remove ACL
|
||||
}
|
||||
```
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"updated": 2,
|
||||
"errors": [
|
||||
{"uuid": "uuid-3", "error": "proxy host not found"}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Updates multiple hosts in a single database transaction
|
||||
- Applies Caddy config once for all updates (efficient)
|
||||
- Partial failure handling (returns both successes and errors)
|
||||
- Validates host existence before applying ACL
|
||||
- Supports both applying and removing ACLs (null = remove)
|
||||
|
||||
### Frontend
|
||||
|
||||
#### API Client (`frontend/src/api/proxyHosts.ts`)
|
||||
```typescript
|
||||
export const bulkUpdateACL = async (
|
||||
hostUUIDs: string[],
|
||||
accessListID: number | null
|
||||
): Promise<BulkUpdateACLResponse>
|
||||
```
|
||||
|
||||
#### React Query Hook (`frontend/src/hooks/useProxyHosts.ts`)
|
||||
```typescript
|
||||
const { bulkUpdateACL, isBulkUpdating } = useProxyHosts()
|
||||
|
||||
// Usage
|
||||
await bulkUpdateACL(['uuid-1', 'uuid-2'], 42) // Apply ACL 42
|
||||
await bulkUpdateACL(['uuid-1', 'uuid-2'], null) // Remove ACL
|
||||
```
|
||||
|
||||
#### UI Components (`frontend/src/pages/ProxyHosts.tsx`)
|
||||
|
||||
**Multi-Select Checkboxes**:
|
||||
- Checkbox column added to proxy hosts table
|
||||
- "Select All" checkbox in table header
|
||||
- Individual checkboxes per row
|
||||
|
||||
**Bulk Actions UI**:
|
||||
- "Bulk Actions" button appears when hosts are selected
|
||||
- Shows count of selected hosts
|
||||
- Opens modal with ACL selection dropdown
|
||||
|
||||
**Modal Features**:
|
||||
- Lists all enabled access lists
|
||||
- "Remove Access List" option (sets null)
|
||||
- Real-time feedback on success/failure
|
||||
- Toast notifications for user feedback
|
||||
|
||||
## Testing
|
||||
|
||||
### Backend Tests (`proxy_host_handler_test.go`)
|
||||
- ✅ `TestProxyHostHandler_BulkUpdateACL_Success` - Apply ACL to multiple hosts
|
||||
- ✅ `TestProxyHostHandler_BulkUpdateACL_RemoveACL` - Remove ACL (null value)
|
||||
- ✅ `TestProxyHostHandler_BulkUpdateACL_PartialFailure` - Mixed success/failure
|
||||
- ✅ `TestProxyHostHandler_BulkUpdateACL_EmptyUUIDs` - Validation error
|
||||
- ✅ `TestProxyHostHandler_BulkUpdateACL_InvalidJSON` - Malformed request
|
||||
|
||||
### Frontend Tests
|
||||
**API Tests** (`proxyHosts-bulk.test.ts`):
|
||||
- ✅ Apply ACL to multiple hosts
|
||||
- ✅ Remove ACL with null value
|
||||
- ✅ Handle partial failures
|
||||
- ✅ Handle empty host list
|
||||
- ✅ Propagate API errors
|
||||
|
||||
**Hook Tests** (`useProxyHosts-bulk.test.tsx`):
|
||||
- ✅ Apply ACL via mutation
|
||||
- ✅ Remove ACL via mutation
|
||||
- ✅ Query invalidation after success
|
||||
- ✅ Error handling
|
||||
- ✅ Loading state tracking
|
||||
|
||||
**Test Results**:
|
||||
- Backend: All tests passing (106+ tests)
|
||||
- Frontend: All tests passing (132 tests)
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Example 1: Apply ACL to Multiple Hosts
|
||||
```typescript
|
||||
// Select hosts in UI
|
||||
setSelectedHosts(new Set(['host-1-uuid', 'host-2-uuid', 'host-3-uuid']))
|
||||
|
||||
// User clicks "Bulk Actions" → Selects ACL from dropdown
|
||||
await bulkUpdateACL(['host-1-uuid', 'host-2-uuid', 'host-3-uuid'], 5)
|
||||
|
||||
// Result: "Access list applied to 3 host(s)"
|
||||
```
|
||||
|
||||
### Example 2: Remove ACL from Hosts
|
||||
```typescript
|
||||
// User selects "Remove Access List" from dropdown
|
||||
await bulkUpdateACL(['host-1-uuid', 'host-2-uuid'], null)
|
||||
|
||||
// Result: "Access list removed from 2 host(s)"
|
||||
```
|
||||
|
||||
### Example 3: Partial Failure Handling
|
||||
```typescript
|
||||
const result = await bulkUpdateACL(['valid-uuid', 'invalid-uuid'], 10)
|
||||
|
||||
// result = {
|
||||
// updated: 1,
|
||||
// errors: [{ uuid: 'invalid-uuid', error: 'proxy host not found' }]
|
||||
// }
|
||||
|
||||
// Toast: "Updated 1 host(s), 1 failed"
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
1. **Time Savings**: Apply ACLs to dozens of hosts in one click vs. editing each individually
|
||||
2. **User-Friendly**: Clear visual feedback with checkboxes and selection count
|
||||
3. **Error Resilient**: Partial failures don't block the entire operation
|
||||
4. **Efficient**: Single Caddy config reload for all updates
|
||||
5. **Flexible**: Supports both applying and removing ACLs
|
||||
6. **Well-Tested**: Comprehensive test coverage for all scenarios
|
||||
|
||||
## Future Enhancements (Optional)
|
||||
|
||||
- Add bulk ACL application from Access Lists page (when creating/editing ACL)
|
||||
- Bulk enable/disable hosts
|
||||
- Bulk delete hosts
|
||||
- Bulk certificate assignment
|
||||
- Filter hosts before selection (e.g., "Select all hosts without ACL")
|
||||
|
||||
## Related Files Modified
|
||||
|
||||
### Backend
|
||||
- `backend/internal/api/handlers/proxy_host_handler.go` (+73 lines)
|
||||
- `backend/internal/api/handlers/proxy_host_handler_test.go` (+140 lines)
|
||||
|
||||
### Frontend
|
||||
- `frontend/src/api/proxyHosts.ts` (+19 lines)
|
||||
- `frontend/src/hooks/useProxyHosts.ts` (+11 lines)
|
||||
- `frontend/src/pages/ProxyHosts.tsx` (+95 lines)
|
||||
- `frontend/src/api/__tests__/proxyHosts-bulk.test.ts` (+93 lines, new file)
|
||||
- `frontend/src/hooks/__tests__/useProxyHosts-bulk.test.tsx` (+149 lines, new file)
|
||||
|
||||
**Total**: ~580 lines added (including tests)
|
||||
@@ -37,6 +37,7 @@ func (h *ProxyHostHandler) RegisterRoutes(router *gin.RouterGroup) {
|
||||
router.PUT("/proxy-hosts/:uuid", h.Update)
|
||||
router.DELETE("/proxy-hosts/:uuid", h.Delete)
|
||||
router.POST("/proxy-hosts/test", h.TestConnection)
|
||||
router.PUT("/proxy-hosts/bulk-update-acl", h.BulkUpdateACL)
|
||||
}
|
||||
|
||||
// List retrieves all proxy hosts.
|
||||
@@ -199,3 +200,63 @@ func (h *ProxyHostHandler) TestConnection(c *gin.Context) {
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"message": "Connection successful"})
|
||||
}
|
||||
|
||||
// BulkUpdateACL applies or removes an access list to multiple proxy hosts.
|
||||
func (h *ProxyHostHandler) BulkUpdateACL(c *gin.Context) {
|
||||
var req struct {
|
||||
HostUUIDs []string `json:"host_uuids" binding:"required"`
|
||||
AccessListID *uint `json:"access_list_id"` // nil means remove ACL
|
||||
}
|
||||
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
if len(req.HostUUIDs) == 0 {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "host_uuids cannot be empty"})
|
||||
return
|
||||
}
|
||||
|
||||
updated := 0
|
||||
errors := []map[string]string{}
|
||||
|
||||
for _, uuid := range req.HostUUIDs {
|
||||
host, err := h.service.GetByUUID(uuid)
|
||||
if err != nil {
|
||||
errors = append(errors, map[string]string{
|
||||
"uuid": uuid,
|
||||
"error": "proxy host not found",
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
host.AccessListID = req.AccessListID
|
||||
if err := h.service.Update(host); err != nil {
|
||||
errors = append(errors, map[string]string{
|
||||
"uuid": uuid,
|
||||
"error": err.Error(),
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
updated++
|
||||
}
|
||||
|
||||
// Apply Caddy config once for all updates
|
||||
if updated > 0 && h.caddyManager != nil {
|
||||
if err := h.caddyManager.ApplyConfig(c.Request.Context()); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{
|
||||
"error": "Failed to apply configuration: " + err.Error(),
|
||||
"updated": updated,
|
||||
"errors": errors,
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"updated": updated,
|
||||
"errors": errors,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -336,3 +336,184 @@ func TestProxyHostWithCaddyIntegration(t *testing.T) {
|
||||
r.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusOK, resp.Code)
|
||||
}
|
||||
|
||||
func TestProxyHostHandler_BulkUpdateACL_Success(t *testing.T) {
|
||||
router, db := setupTestRouter(t)
|
||||
|
||||
// Create an access list
|
||||
acl := &models.AccessList{
|
||||
Name: "Test ACL",
|
||||
Type: "ip",
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(acl).Error)
|
||||
|
||||
// Create multiple proxy hosts
|
||||
host1 := &models.ProxyHost{
|
||||
UUID: uuid.NewString(),
|
||||
Name: "Host 1",
|
||||
DomainNames: "host1.example.com",
|
||||
ForwardScheme: "http",
|
||||
ForwardHost: "localhost",
|
||||
ForwardPort: 8001,
|
||||
Enabled: true,
|
||||
}
|
||||
host2 := &models.ProxyHost{
|
||||
UUID: uuid.NewString(),
|
||||
Name: "Host 2",
|
||||
DomainNames: "host2.example.com",
|
||||
ForwardScheme: "http",
|
||||
ForwardHost: "localhost",
|
||||
ForwardPort: 8002,
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(host1).Error)
|
||||
require.NoError(t, db.Create(host2).Error)
|
||||
|
||||
// Apply ACL to both hosts
|
||||
body := fmt.Sprintf(`{"host_uuids":["%s","%s"],"access_list_id":%d}`, host1.UUID, host2.UUID, acl.ID)
|
||||
req := httptest.NewRequest(http.MethodPut, "/api/v1/proxy-hosts/bulk-update-acl", strings.NewReader(body))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
resp := httptest.NewRecorder()
|
||||
router.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusOK, resp.Code)
|
||||
|
||||
var result map[string]interface{}
|
||||
require.NoError(t, json.Unmarshal(resp.Body.Bytes(), &result))
|
||||
require.Equal(t, float64(2), result["updated"])
|
||||
require.Empty(t, result["errors"])
|
||||
|
||||
// Verify hosts have ACL assigned
|
||||
var updatedHost1 models.ProxyHost
|
||||
require.NoError(t, db.First(&updatedHost1, "uuid = ?", host1.UUID).Error)
|
||||
require.NotNil(t, updatedHost1.AccessListID)
|
||||
require.Equal(t, acl.ID, *updatedHost1.AccessListID)
|
||||
|
||||
var updatedHost2 models.ProxyHost
|
||||
require.NoError(t, db.First(&updatedHost2, "uuid = ?", host2.UUID).Error)
|
||||
require.NotNil(t, updatedHost2.AccessListID)
|
||||
require.Equal(t, acl.ID, *updatedHost2.AccessListID)
|
||||
}
|
||||
|
||||
func TestProxyHostHandler_BulkUpdateACL_RemoveACL(t *testing.T) {
|
||||
router, db := setupTestRouter(t)
|
||||
|
||||
// Create an access list
|
||||
acl := &models.AccessList{
|
||||
Name: "Test ACL",
|
||||
Type: "ip",
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(acl).Error)
|
||||
|
||||
// Create proxy host with ACL
|
||||
host := &models.ProxyHost{
|
||||
UUID: uuid.NewString(),
|
||||
Name: "Host with ACL",
|
||||
DomainNames: "acl-host.example.com",
|
||||
ForwardScheme: "http",
|
||||
ForwardHost: "localhost",
|
||||
ForwardPort: 8000,
|
||||
AccessListID: &acl.ID,
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(host).Error)
|
||||
|
||||
// Remove ACL (access_list_id: null)
|
||||
body := fmt.Sprintf(`{"host_uuids":["%s"],"access_list_id":null}`, host.UUID)
|
||||
req := httptest.NewRequest(http.MethodPut, "/api/v1/proxy-hosts/bulk-update-acl", strings.NewReader(body))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
resp := httptest.NewRecorder()
|
||||
router.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusOK, resp.Code)
|
||||
|
||||
var result map[string]interface{}
|
||||
require.NoError(t, json.Unmarshal(resp.Body.Bytes(), &result))
|
||||
require.Equal(t, float64(1), result["updated"])
|
||||
require.Empty(t, result["errors"])
|
||||
|
||||
// Verify ACL removed
|
||||
var updatedHost models.ProxyHost
|
||||
require.NoError(t, db.First(&updatedHost, "uuid = ?", host.UUID).Error)
|
||||
require.Nil(t, updatedHost.AccessListID)
|
||||
}
|
||||
|
||||
func TestProxyHostHandler_BulkUpdateACL_PartialFailure(t *testing.T) {
|
||||
router, db := setupTestRouter(t)
|
||||
|
||||
// Create an access list
|
||||
acl := &models.AccessList{
|
||||
Name: "Test ACL",
|
||||
Type: "ip",
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(acl).Error)
|
||||
|
||||
// Create one valid host
|
||||
host := &models.ProxyHost{
|
||||
UUID: uuid.NewString(),
|
||||
Name: "Valid Host",
|
||||
DomainNames: "valid.example.com",
|
||||
ForwardScheme: "http",
|
||||
ForwardHost: "localhost",
|
||||
ForwardPort: 8000,
|
||||
Enabled: true,
|
||||
}
|
||||
require.NoError(t, db.Create(host).Error)
|
||||
|
||||
// Try to update valid host + non-existent host
|
||||
nonExistentUUID := uuid.NewString()
|
||||
body := fmt.Sprintf(`{"host_uuids":["%s","%s"],"access_list_id":%d}`, host.UUID, nonExistentUUID, acl.ID)
|
||||
req := httptest.NewRequest(http.MethodPut, "/api/v1/proxy-hosts/bulk-update-acl", strings.NewReader(body))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
resp := httptest.NewRecorder()
|
||||
router.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusOK, resp.Code)
|
||||
|
||||
var result map[string]interface{}
|
||||
require.NoError(t, json.Unmarshal(resp.Body.Bytes(), &result))
|
||||
require.Equal(t, float64(1), result["updated"])
|
||||
|
||||
errors := result["errors"].([]interface{})
|
||||
require.Len(t, errors, 1)
|
||||
errorMap := errors[0].(map[string]interface{})
|
||||
require.Equal(t, nonExistentUUID, errorMap["uuid"])
|
||||
require.Equal(t, "proxy host not found", errorMap["error"])
|
||||
|
||||
// Verify valid host was updated
|
||||
var updatedHost models.ProxyHost
|
||||
require.NoError(t, db.First(&updatedHost, "uuid = ?", host.UUID).Error)
|
||||
require.NotNil(t, updatedHost.AccessListID)
|
||||
require.Equal(t, acl.ID, *updatedHost.AccessListID)
|
||||
}
|
||||
|
||||
func TestProxyHostHandler_BulkUpdateACL_EmptyUUIDs(t *testing.T) {
|
||||
router, _ := setupTestRouter(t)
|
||||
|
||||
body := `{"host_uuids":[],"access_list_id":1}`
|
||||
req := httptest.NewRequest(http.MethodPut, "/api/v1/proxy-hosts/bulk-update-acl", strings.NewReader(body))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
resp := httptest.NewRecorder()
|
||||
router.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusBadRequest, resp.Code)
|
||||
|
||||
var result map[string]interface{}
|
||||
require.NoError(t, json.Unmarshal(resp.Body.Bytes(), &result))
|
||||
require.Contains(t, result["error"], "host_uuids cannot be empty")
|
||||
}
|
||||
|
||||
func TestProxyHostHandler_BulkUpdateACL_InvalidJSON(t *testing.T) {
|
||||
router, _ := setupTestRouter(t)
|
||||
|
||||
body := `{"host_uuids": invalid json}`
|
||||
req := httptest.NewRequest(http.MethodPut, "/api/v1/proxy-hosts/bulk-update-acl", strings.NewReader(body))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
resp := httptest.NewRecorder()
|
||||
router.ServeHTTP(resp, req)
|
||||
require.Equal(t, http.StatusBadRequest, resp.Code)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { bulkUpdateACL } from '../proxyHosts';
|
||||
import type { BulkUpdateACLResponse } from '../proxyHosts';
|
||||
|
||||
// Mock the client module
|
||||
const mockPut = vi.fn();
|
||||
vi.mock('../client', () => ({
|
||||
default: {
|
||||
put: (...args: unknown[]) => mockPut(...args),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('proxyHosts bulk operations', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('bulkUpdateACL', () => {
|
||||
it('should apply ACL to multiple hosts', async () => {
|
||||
const mockResponse: BulkUpdateACLResponse = {
|
||||
updated: 3,
|
||||
errors: [],
|
||||
};
|
||||
mockPut.mockResolvedValue({ data: mockResponse });
|
||||
|
||||
const hostUUIDs = ['uuid-1', 'uuid-2', 'uuid-3'];
|
||||
const accessListID = 42;
|
||||
const result = await bulkUpdateACL(hostUUIDs, accessListID);
|
||||
|
||||
expect(mockPut).toHaveBeenCalledWith('/proxy-hosts/bulk-update-acl', {
|
||||
host_uuids: hostUUIDs,
|
||||
access_list_id: accessListID,
|
||||
});
|
||||
expect(result).toEqual(mockResponse);
|
||||
});
|
||||
|
||||
it('should remove ACL from hosts when accessListID is null', async () => {
|
||||
const mockResponse: BulkUpdateACLResponse = {
|
||||
updated: 2,
|
||||
errors: [],
|
||||
};
|
||||
mockPut.mockResolvedValue({ data: mockResponse });
|
||||
|
||||
const hostUUIDs = ['uuid-1', 'uuid-2'];
|
||||
const result = await bulkUpdateACL(hostUUIDs, null);
|
||||
|
||||
expect(mockPut).toHaveBeenCalledWith('/proxy-hosts/bulk-update-acl', {
|
||||
host_uuids: hostUUIDs,
|
||||
access_list_id: null,
|
||||
});
|
||||
expect(result).toEqual(mockResponse);
|
||||
});
|
||||
|
||||
it('should handle partial failures', async () => {
|
||||
const mockResponse: BulkUpdateACLResponse = {
|
||||
updated: 1,
|
||||
errors: [
|
||||
{ uuid: 'invalid-uuid', error: 'proxy host not found' },
|
||||
],
|
||||
};
|
||||
mockPut.mockResolvedValue({ data: mockResponse });
|
||||
|
||||
const hostUUIDs = ['valid-uuid', 'invalid-uuid'];
|
||||
const accessListID = 10;
|
||||
const result = await bulkUpdateACL(hostUUIDs, accessListID);
|
||||
|
||||
expect(result.updated).toBe(1);
|
||||
expect(result.errors).toHaveLength(1);
|
||||
expect(result.errors[0].uuid).toBe('invalid-uuid');
|
||||
});
|
||||
|
||||
it('should handle empty host list', async () => {
|
||||
const mockResponse: BulkUpdateACLResponse = {
|
||||
updated: 0,
|
||||
errors: [],
|
||||
};
|
||||
mockPut.mockResolvedValue({ data: mockResponse });
|
||||
|
||||
const result = await bulkUpdateACL([], 5);
|
||||
|
||||
expect(mockPut).toHaveBeenCalledWith('/proxy-hosts/bulk-update-acl', {
|
||||
host_uuids: [],
|
||||
access_list_id: 5,
|
||||
});
|
||||
expect(result.updated).toBe(0);
|
||||
});
|
||||
|
||||
it('should propagate API errors', async () => {
|
||||
const error = new Error('Network error');
|
||||
mockPut.mockRejectedValue(error);
|
||||
|
||||
await expect(bulkUpdateACL(['uuid-1'], 1)).rejects.toThrow('Network error');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -70,3 +70,24 @@ export const deleteProxyHost = async (uuid: string): Promise<void> => {
|
||||
export const testProxyHostConnection = async (host: string, port: number): Promise<void> => {
|
||||
await client.post('/proxy-hosts/test', { forward_host: host, forward_port: port });
|
||||
};
|
||||
|
||||
export interface BulkUpdateACLRequest {
|
||||
host_uuids: string[];
|
||||
access_list_id: number | null;
|
||||
}
|
||||
|
||||
export interface BulkUpdateACLResponse {
|
||||
updated: number;
|
||||
errors: { uuid: string; error: string }[];
|
||||
}
|
||||
|
||||
export const bulkUpdateACL = async (
|
||||
hostUUIDs: string[],
|
||||
accessListID: number | null
|
||||
): Promise<BulkUpdateACLResponse> => {
|
||||
const { data } = await client.put<BulkUpdateACLResponse>('/proxy-hosts/bulk-update-acl', {
|
||||
host_uuids: hostUUIDs,
|
||||
access_list_id: accessListID,
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { useProxyHosts } from '../useProxyHosts';
|
||||
import * as proxyHostsApi from '../../api/proxyHosts';
|
||||
|
||||
// Mock the API module
|
||||
vi.mock('../../api/proxyHosts');
|
||||
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('useProxyHosts bulk operations', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('bulkUpdateACL', () => {
|
||||
it('should apply ACL to multiple hosts', async () => {
|
||||
const mockResponse = {
|
||||
updated: 2,
|
||||
errors: [],
|
||||
};
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([]);
|
||||
vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue(mockResponse);
|
||||
|
||||
const { result } = renderHook(() => useProxyHosts(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
const hostUUIDs = ['uuid-1', 'uuid-2'];
|
||||
const accessListID = 5;
|
||||
|
||||
const response = await result.current.bulkUpdateACL(hostUUIDs, accessListID);
|
||||
|
||||
expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalledWith(hostUUIDs, accessListID);
|
||||
expect(response.updated).toBe(2);
|
||||
expect(response.errors).toEqual([]);
|
||||
});
|
||||
|
||||
it('should remove ACL from hosts', async () => {
|
||||
const mockResponse = {
|
||||
updated: 1,
|
||||
errors: [],
|
||||
};
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([]);
|
||||
vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue(mockResponse);
|
||||
|
||||
const { result } = renderHook(() => useProxyHosts(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
const response = await result.current.bulkUpdateACL(['uuid-1'], null);
|
||||
|
||||
expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalledWith(['uuid-1'], null);
|
||||
expect(response.updated).toBe(1);
|
||||
});
|
||||
|
||||
it('should invalidate queries after successful bulk update', async () => {
|
||||
const mockHosts = [
|
||||
{
|
||||
uuid: 'uuid-1',
|
||||
name: 'Host 1',
|
||||
domain_names: 'host1.example.com',
|
||||
forward_scheme: 'http',
|
||||
forward_host: 'localhost',
|
||||
forward_port: 8001,
|
||||
ssl_forced: false,
|
||||
http2_support: false,
|
||||
hsts_enabled: false,
|
||||
hsts_subdomains: false,
|
||||
block_exploits: true,
|
||||
websocket_support: false,
|
||||
application: 'none' as const,
|
||||
locations: [],
|
||||
enabled: true,
|
||||
access_list_id: null,
|
||||
certificate_id: null,
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(proxyHostsApi.getProxyHosts)
|
||||
.mockResolvedValueOnce([])
|
||||
.mockResolvedValueOnce(mockHosts);
|
||||
|
||||
vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({
|
||||
updated: 1,
|
||||
errors: [],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useProxyHosts(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
expect(result.current.hosts).toEqual([]);
|
||||
|
||||
await result.current.bulkUpdateACL(['uuid-1'], 10);
|
||||
|
||||
// Query should be invalidated and refetch
|
||||
await waitFor(() => expect(result.current.hosts).toEqual(mockHosts));
|
||||
});
|
||||
|
||||
it('should handle bulk update errors', async () => {
|
||||
const error = new Error('Bulk update failed');
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([]);
|
||||
vi.mocked(proxyHostsApi.bulkUpdateACL).mockRejectedValue(error);
|
||||
|
||||
const { result } = renderHook(() => useProxyHosts(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
await expect(result.current.bulkUpdateACL(['uuid-1'], 5)).rejects.toThrow(
|
||||
'Bulk update failed'
|
||||
);
|
||||
});
|
||||
|
||||
it('should track bulk updating state', async () => {
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([]);
|
||||
vi.mocked(proxyHostsApi.bulkUpdateACL).mockImplementation(
|
||||
() => new Promise((resolve) => setTimeout(() => resolve({ updated: 1, errors: [] }), 100))
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useProxyHosts(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
expect(result.current.isBulkUpdating).toBe(false);
|
||||
|
||||
const promise = result.current.bulkUpdateACL(['uuid-1'], 1);
|
||||
|
||||
await waitFor(() => expect(result.current.isBulkUpdating).toBe(true));
|
||||
|
||||
await promise;
|
||||
|
||||
await waitFor(() => expect(result.current.isBulkUpdating).toBe(false));
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
createProxyHost,
|
||||
updateProxyHost,
|
||||
deleteProxyHost,
|
||||
bulkUpdateACL,
|
||||
ProxyHost
|
||||
} from '../api/proxyHosts';
|
||||
|
||||
@@ -39,6 +40,14 @@ export function useProxyHosts() {
|
||||
},
|
||||
});
|
||||
|
||||
const bulkUpdateACLMutation = useMutation({
|
||||
mutationFn: ({ hostUUIDs, accessListID }: { hostUUIDs: string[]; accessListID: number | null }) =>
|
||||
bulkUpdateACL(hostUUIDs, accessListID),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: QUERY_KEY });
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
hosts: query.data || [],
|
||||
loading: query.isLoading,
|
||||
@@ -47,9 +56,12 @@ export function useProxyHosts() {
|
||||
createHost: createMutation.mutateAsync,
|
||||
updateHost: (uuid: string, data: Partial<ProxyHost>) => updateMutation.mutateAsync({ uuid, data }),
|
||||
deleteHost: deleteMutation.mutateAsync,
|
||||
bulkUpdateACL: (hostUUIDs: string[], accessListID: number | null) =>
|
||||
bulkUpdateACLMutation.mutateAsync({ hostUUIDs, accessListID }),
|
||||
isCreating: createMutation.isPending,
|
||||
isUpdating: updateMutation.isPending,
|
||||
isDeleting: deleteMutation.isPending,
|
||||
isBulkUpdating: bulkUpdateACLMutation.isPending,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Loader2, ExternalLink, AlertTriangle, ChevronUp, ChevronDown } from 'lucide-react'
|
||||
import { Loader2, ExternalLink, AlertTriangle, ChevronUp, ChevronDown, CheckSquare, Square } from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useProxyHosts } from '../hooks/useProxyHosts'
|
||||
import { useCertificates } from '../hooks/useCertificates'
|
||||
import { useAccessLists } from '../hooks/useAccessLists'
|
||||
import { getSettings } from '../api/settings'
|
||||
import type { ProxyHost } from '../api/proxyHosts'
|
||||
import type { AccessList } from '../api/accessLists'
|
||||
import ProxyHostForm from '../components/ProxyHostForm'
|
||||
import { Switch } from '../components/ui/Switch'
|
||||
import { toast } from 'react-hot-toast'
|
||||
|
||||
type SortColumn = 'name' | 'domain' | 'forward'
|
||||
type SortDirection = 'asc' | 'desc'
|
||||
|
||||
export default function ProxyHosts() {
|
||||
const { hosts, loading, isFetching, error, createHost, updateHost, deleteHost } = useProxyHosts()
|
||||
const { hosts, loading, isFetching, error, createHost, updateHost, deleteHost, bulkUpdateACL, isBulkUpdating } = useProxyHosts()
|
||||
const { certificates } = useCertificates()
|
||||
const { data: accessLists } = useAccessLists()
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editingHost, setEditingHost] = useState<ProxyHost | undefined>()
|
||||
const [sortColumn, setSortColumn] = useState<SortColumn>('name')
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
|
||||
const [selectedHosts, setSelectedHosts] = useState<Set<string>>(new Set())
|
||||
const [showBulkACLModal, setShowBulkACLModal] = useState(false)
|
||||
|
||||
const { data: settings } = useQuery({
|
||||
queryKey: ['settings'],
|
||||
@@ -123,6 +129,45 @@ export default function ProxyHosts() {
|
||||
}
|
||||
}
|
||||
|
||||
const toggleHostSelection = (uuid: string) => {
|
||||
setSelectedHosts(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(uuid)) {
|
||||
next.delete(uuid)
|
||||
} else {
|
||||
next.add(uuid)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedHosts.size === hosts.length) {
|
||||
setSelectedHosts(new Set())
|
||||
} else {
|
||||
setSelectedHosts(new Set(hosts.map(h => h.uuid)))
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkApplyACL = async (accessListID: number | null) => {
|
||||
const hostUUIDs = Array.from(selectedHosts)
|
||||
try {
|
||||
const result = await bulkUpdateACL(hostUUIDs, accessListID)
|
||||
|
||||
if (result.errors.length > 0) {
|
||||
toast.error(`Updated ${result.updated} host(s), ${result.errors.length} failed`)
|
||||
} else {
|
||||
const action = accessListID ? 'applied to' : 'removed from'
|
||||
toast.success(`Access list ${action} ${result.updated} host(s)`)
|
||||
}
|
||||
|
||||
setSelectedHosts(new Set())
|
||||
setShowBulkACLModal(false)
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to update hosts')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
@@ -130,12 +175,26 @@ export default function ProxyHosts() {
|
||||
<h1 className="text-3xl font-bold text-white">Proxy Hosts</h1>
|
||||
{isFetching && !loading && <Loader2 className="animate-spin text-blue-400" size={24} />}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="px-4 py-2 bg-blue-active hover:bg-blue-hover text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Add Proxy Host
|
||||
</button>
|
||||
<div className="flex gap-3">
|
||||
{selectedHosts.size > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 text-sm">{selectedHosts.size} selected</span>
|
||||
<button
|
||||
onClick={() => setShowBulkACLModal(true)}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
|
||||
disabled={isBulkUpdating}
|
||||
>
|
||||
{isBulkUpdating ? 'Updating...' : 'Bulk Actions'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="px-4 py-2 bg-blue-active hover:bg-blue-hover text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Add Proxy Host
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -156,6 +215,19 @@ export default function ProxyHosts() {
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-900 border-b border-gray-800">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
<button
|
||||
onClick={toggleSelectAll}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
title={selectedHosts.size === hosts.length ? 'Deselect all' : 'Select all'}
|
||||
>
|
||||
{selectedHosts.size === hosts.length ? (
|
||||
<CheckSquare size={18} />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort('name')}
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider cursor-pointer hover:text-gray-200 transition-colors"
|
||||
@@ -197,6 +269,18 @@ export default function ProxyHosts() {
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{sortedHosts.map((host) => (
|
||||
<tr key={host.uuid} className="hover:bg-gray-900/50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<button
|
||||
onClick={() => toggleHostSelection(host.uuid)}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{selectedHosts.has(host.uuid) ? (
|
||||
<CheckSquare size={18} className="text-blue-400" />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-white">
|
||||
{host.name || <span className="text-gray-500 italic">Unnamed</span>}
|
||||
@@ -325,6 +409,71 @@ export default function ProxyHosts() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Bulk ACL Modal */}
|
||||
{showBulkACLModal && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={() => setShowBulkACLModal(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-dark-card border border-gray-800 rounded-lg p-6 max-w-md w-full mx-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="text-xl font-bold text-white mb-4">Apply Access List</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400 mb-4">
|
||||
Applying to {selectedHosts.size} selected host(s)
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Access List
|
||||
</label>
|
||||
<select
|
||||
className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onChange={(e) => {
|
||||
const value = e.target.value
|
||||
if (value === 'remove') {
|
||||
if (confirm(`Remove access list from ${selectedHosts.size} host(s)?`)) {
|
||||
handleBulkApplyACL(null)
|
||||
}
|
||||
} else if (value !== '') {
|
||||
handleBulkApplyACL(parseInt(value, 10))
|
||||
}
|
||||
}}
|
||||
defaultValue=""
|
||||
disabled={isBulkUpdating}
|
||||
>
|
||||
<option value="">Select an access list...</option>
|
||||
<option value="remove" className="text-red-400">
|
||||
🚫 Remove Access List
|
||||
</option>
|
||||
<optgroup label="Available Access Lists">
|
||||
{accessLists
|
||||
?.filter((acl: AccessList) => acl.enabled)
|
||||
.map((acl: AccessList) => (
|
||||
<option key={acl.id} value={acl.id}>
|
||||
{acl.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setShowBulkACLModal(false)}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
|
||||
disabled={isBulkUpdating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user