feat: add Docker container management functionality
- Implement DockerHandler to handle API requests for listing Docker containers. - Create DockerService to interact with Docker API and retrieve container information. - Add routes for Docker container management in the API. - Introduce frontend API integration for Docker container listing. - Enhance ProxyHostForm to allow quick selection of Docker containers. - Update Docker-related tests to ensure functionality and error handling. - Modify Docker Compose files to enable Docker socket access for local and remote environments. - Add TypeScript configurations for improved build processes.
This commit is contained in:
Wikid82
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react'
|
||||
import type { ProxyHost } from '../api/proxyHosts'
|
||||
import { useRemoteServers } from '../hooks/useRemoteServers'
|
||||
import { useDocker } from '../hooks/useDocker'
|
||||
|
||||
interface ProxyHostFormProps {
|
||||
host?: ProxyHost
|
||||
@@ -25,6 +26,9 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
|
||||
})
|
||||
|
||||
const { servers: remoteServers } = useRemoteServers()
|
||||
const [dockerHost, setDockerHost] = useState('')
|
||||
const [showDockerHost, setShowDockerHost] = useState(false)
|
||||
const { containers: dockerContainers, isLoading: dockerLoading, error: dockerError } = useDocker(dockerHost)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
@@ -54,6 +58,23 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
|
||||
}
|
||||
}
|
||||
|
||||
const handleContainerSelect = (containerId: string) => {
|
||||
const container = dockerContainers.find(c => c.id === containerId)
|
||||
if (container) {
|
||||
// Prefer internal IP if available, otherwise use container name
|
||||
const host = container.ip || container.names[0]
|
||||
// Use the first exposed port if available, otherwise default to 80
|
||||
const port = container.ports && container.ports.length > 0 ? container.ports[0].private_port : 80
|
||||
|
||||
setFormData({
|
||||
...formData,
|
||||
forward_host: host,
|
||||
forward_port: port,
|
||||
forward_scheme: 'http',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-dark-card rounded-lg border border-gray-800 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
@@ -85,26 +106,75 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Remote Server Quick Select */}
|
||||
{remoteServers.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Remote Server Quick Select */}
|
||||
{remoteServers.length > 0 && (
|
||||
<div>
|
||||
<label htmlFor="quick-select-server" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Quick Select: Remote Server
|
||||
</label>
|
||||
<select
|
||||
id="quick-select-server"
|
||||
onChange={e => handleServerSelect(e.target.value)}
|
||||
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"
|
||||
>
|
||||
<option value="">-- Select a server --</option>
|
||||
{remoteServers.map(server => (
|
||||
<option key={server.uuid} value={server.uuid}>
|
||||
{server.name} ({server.host}:{server.port})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Docker Container Quick Select */}
|
||||
<div>
|
||||
<label htmlFor="quick-select" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Quick Select from Remote Servers
|
||||
</label>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label htmlFor="quick-select-docker" className="block text-sm font-medium text-gray-300">
|
||||
Quick Select: Container
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowDockerHost(!showDockerHost)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
{showDockerHost ? 'Hide Remote' : 'Remote Docker?'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showDockerHost && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="tcp://100.x.y.z:2375"
|
||||
value={dockerHost}
|
||||
onChange={(e) => setDockerHost(e.target.value)}
|
||||
className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white text-sm mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
)}
|
||||
|
||||
<select
|
||||
id="quick-select"
|
||||
onChange={e => handleServerSelect(e.target.value)}
|
||||
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"
|
||||
id="quick-select-docker"
|
||||
onChange={e => handleContainerSelect(e.target.value)}
|
||||
disabled={dockerLoading}
|
||||
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 disabled:opacity-50"
|
||||
>
|
||||
<option value="">-- Select a server --</option>
|
||||
{remoteServers.map(server => (
|
||||
<option key={server.uuid} value={server.uuid}>
|
||||
{server.name} ({server.host}:{server.port})
|
||||
<option value="">
|
||||
{dockerLoading ? 'Loading containers...' : '-- Select a container --'}
|
||||
</option>
|
||||
{dockerContainers.map(container => (
|
||||
<option key={container.id} value={container.id}>
|
||||
{container.names[0]} ({container.image})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{dockerError && (
|
||||
<p className="text-xs text-red-400 mt-1">
|
||||
Failed to connect: {(dockerError as Error).message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Forward Details */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
|
||||
@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import ProxyHostForm from '../ProxyHostForm'
|
||||
import { mockRemoteServers } from '../../test/mockData'
|
||||
|
||||
// Mock the hook
|
||||
// Mock the hooks
|
||||
vi.mock('../../hooks/useRemoteServers', () => ({
|
||||
useRemoteServers: vi.fn(() => ({
|
||||
servers: mockRemoteServers,
|
||||
@@ -16,6 +16,26 @@ vi.mock('../../hooks/useRemoteServers', () => ({
|
||||
})),
|
||||
}))
|
||||
|
||||
vi.mock('../../hooks/useDocker', () => ({
|
||||
useDocker: vi.fn(() => ({
|
||||
containers: [
|
||||
{
|
||||
id: 'container-123',
|
||||
names: ['my-app'],
|
||||
image: 'nginx:latest',
|
||||
state: 'running',
|
||||
status: 'Up 2 hours',
|
||||
network: 'bridge',
|
||||
ip: '172.17.0.2',
|
||||
ports: [{ private_port: 80, public_port: 8080, type: 'tcp' }]
|
||||
}
|
||||
],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
})),
|
||||
}))
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
@@ -65,6 +85,7 @@ describe('ProxyHostForm', () => {
|
||||
block_exploits: true,
|
||||
websocket_support: false,
|
||||
enabled: true,
|
||||
locations: [],
|
||||
created_at: '2025-11-18T10:00:00Z',
|
||||
updated_at: '2025-11-18T10:00:00Z',
|
||||
}
|
||||
@@ -159,13 +180,29 @@ describe('ProxyHostForm', () => {
|
||||
expect(screen.getByText(/Local Docker Registry/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
const select = screen.getByRole('combobox', { name: /quick select/i })
|
||||
const select = screen.getByLabelText('Quick Select: Remote Server')
|
||||
fireEvent.change(select, { target: { value: mockRemoteServers[0].uuid } })
|
||||
|
||||
expect(screen.getByDisplayValue(mockRemoteServers[0].host)).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue(mockRemoteServers[0].port)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('populates fields when a docker container is selected', async () => {
|
||||
renderWithClient(
|
||||
<ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByLabelText('Quick Select: Container')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
const select = screen.getByLabelText('Quick Select: Container')
|
||||
fireEvent.change(select, { target: { value: 'container-123' } })
|
||||
|
||||
expect(screen.getByDisplayValue('172.17.0.2')).toBeInTheDocument() // IP
|
||||
expect(screen.getByDisplayValue('80')).toBeInTheDocument() // Port
|
||||
})
|
||||
|
||||
it('displays error message on submission failure', async () => {
|
||||
const mockErrorSubmit = vi.fn(() => Promise.reject(new Error('Submission failed')))
|
||||
renderWithClient(
|
||||
@@ -199,4 +236,19 @@ describe('ProxyHostForm', () => {
|
||||
|
||||
expect(advancedInput).toHaveValue('header_up X-Test "True"')
|
||||
})
|
||||
|
||||
it('allows entering a remote docker host', async () => {
|
||||
renderWithClient(
|
||||
<ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
|
||||
)
|
||||
|
||||
const toggle = screen.getByText('Remote Docker?')
|
||||
fireEvent.click(toggle)
|
||||
|
||||
const input = screen.getByPlaceholderText('tcp://100.x.y.z:2375')
|
||||
expect(input).toBeInTheDocument()
|
||||
|
||||
fireEvent.change(input, { target: { value: 'tcp://remote:2375' } })
|
||||
expect(input).toHaveValue('tcp://remote:2375')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user