mirror of
https://github.com/johndoe6345789/docker-swarm-termina.git
synced 2026-04-24 13:45:01 +00:00
59e91defcb
This commit implements a major frontend refactoring to improve testability and maintainability through better separation of concerns. ## New Comprehensive Hooks **useTerminalModalState** (100% coverage): - Manages all TerminalModal state logic - Handles mode switching (interactive <-> simple) - Manages fallback logic and notifications - Mobile responsiveness detection **useDashboard** (Ready for testing): - Consolidates all Dashboard page logic - Combines authentication, containers, and terminal state - Provides derived state (isInitialLoading, showEmptyState) - Simplifies Dashboard component to pure presentation ## Refactored Components **TerminalModal**: Reduced from 135 to 95 lines (-30%) - Extracted state management to useTerminalModalState hook - Now focuses solely on rendering - All business logic moved to hooks **Dashboard Page**: Reduced from 90 to 66 lines (-27%) - Extracted logic to useDashboard hook - Removed redundant state calculations - Cleaner, more readable component ## Comprehensive Test Coverage **New Tests Added**: 1. useTerminalModalState.test.tsx (100% coverage, 8 tests) 2. useContainerActions.test.tsx (100% coverage, 15 tests) 3. useContainerList.test.tsx (100% coverage, 9 tests) 4. useSimpleTerminal.test.tsx (97% coverage, 18 tests) **Test Coverage Improvements**: - Frontend hooks: 30% → 54% coverage (+80% improvement) - Overall frontend: 28% → 42% coverage (+50% improvement) - All custom hooks: 100% coverage (except useDashboard, useInteractiveTerminal) **Total**: 105 passing tests (was 65) ## Benefits 1. **Better Testability**: Logic in hooks is easier to test than in components 2. **Smaller Components**: Components are now pure presentational 3. **Reusability**: Hooks can be reused across components 4. **Maintainability**: Business logic separated from presentation 5. **Type Safety**: Full TypeScript support maintained ## Coverage Summary Backend: 100% (467/467 statements, 116 tests) Frontend: 42% overall, 54% hooks (105 tests) Hooks with 100% Coverage: - ✅ useTerminalModalState - ✅ useContainerActions - ✅ useContainerList - ✅ useTerminalModal - ✅ useAuthRedirect - ✅ authErrorHandler https://claude.ai/code/session_mmQs0
Docker Swarm Container Terminal WebUI
A modern, secure web interface for managing Docker containers with interactive terminal access.
Features
- 🔐 Secure Authentication - Username/password authentication to protect container access
- 📦 Container Management - View all active containers with real-time status updates
- 💻 Interactive Terminal - Execute commands directly in running containers
- 🎨 Modern UI - Built with Material UI and Next.js for a polished experience
- 🐳 Docker Native - Direct integration with Docker API
- 📱 Responsive Design - Works seamlessly on desktop and mobile devices
Tech Stack
Frontend
- Next.js 14+ - React framework with App Router
- Material UI (MUI) - Modern component library
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
Backend
- Flask - Python web framework
- Docker SDK - Python Docker integration
- Flask-CORS - Cross-origin resource sharing
Deployment
- Docker - Containerized deployment
- Docker Compose - Multi-container orchestration
- CapRover - Docker Swarm deployment platform
- GHCR - GitHub Container Registry for images
Quick Start
Using CapRover (Recommended for Production)
Pre-built deployment packages are available in Releases:
-
Download the latest release packages:
backend-caprover-{version}.tar(uncompressed - required by CapRover)frontend-caprover-{version}.tar(uncompressed - required by CapRover)
-
Deploy to CapRover:
- Upload backend
.tarfile to your CapRover backend app - Upload frontend
.tarfile to your CapRover frontend app
- Upload backend
For detailed instructions, see:
- QUICKSTART.md - Fast deployment guide
- CAPROVER_DEPLOYMENT.md - Complete CapRover setup guide
Using Docker Compose (Local Development)
- Clone the repository:
git clone https://github.com/johndoe6345789/docker-swarm-termina.git
cd docker-swarm-termina
- Start the application:
docker-compose up -d
- Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Login with default credentials:
- Username:
admin - Password:
admin123
Manual Setup
Backend Setup
- Navigate to the backend directory:
cd backend
- Install Python dependencies:
pip install -r requirements.txt
- Create
.envfile (optional):
cp .env.example .env
# Edit .env to set custom credentials
- Run the Flask application:
python app.py
The backend will be available at http://localhost:5000
Frontend Setup
- Navigate to the frontend directory:
cd frontend
- Install Node.js dependencies:
npm install
- Create
.env.localfile:
cp .env.local.example .env.local
# Edit if backend is running on a different URL
- Run the development server:
npm run dev
The frontend will be available at http://localhost:3000
Configuration
Backend Environment Variables
ADMIN_USERNAME- Admin username (default:admin)ADMIN_PASSWORD- Admin password (default:admin123)FLASK_ENV- Flask environment (default:development)
Frontend Environment Variables
NEXT_PUBLIC_API_URL- Backend API URL (default:http://localhost:5000)
API Endpoints
Authentication
POST /api/auth/login- Authenticate userPOST /api/auth/logout- Logout user
Containers
GET /api/containers- List all containersPOST /api/containers/<id>/exec- Execute command in container
Health
GET /api/health- Health check endpoint
Deployment Options
CapRover (Docker Swarm)
Production-ready deployment packages are automatically built and published to GitHub Releases.
- Quick Deploy: Upload pre-built tar files to CapRover
- Documentation: See CAPROVER_DEPLOYMENT.md
- Includes: Enhanced Docker socket debugging and diagnostics
Docker Images (GHCR)
Images are automatically built and pushed to GitHub Container Registry:
- Backend:
ghcr.io/johndoe6345789/docker-swarm-termina-backend - Frontend:
ghcr.io/johndoe6345789/docker-swarm-termina-frontend
Security Considerations
⚠️ Important Security Notes:
- Change Default Credentials - Always change the default admin credentials in production
- Docker Socket Access - The backend requires access to Docker socket (
/var/run/docker.sock) - Network Security - Use proper firewall rules and network isolation
- HTTPS - Use HTTPS in production (reverse proxy recommended)
- Session Management - Current implementation uses simple token-based auth; consider implementing JWT or OAuth for production
Development
Project Structure
.
├── backend/ # Flask backend
│ ├── app.py # Main Flask application
│ ├── requirements.txt # Python dependencies
│ └── Dockerfile # Backend Docker image
├── frontend/ # Next.js frontend
│ ├── app/ # Next.js app directory
│ ├── components/ # React components
│ ├── lib/ # Utility functions and API client
│ └── Dockerfile # Frontend Docker image
├── docker-compose.yml # Docker Compose configuration
└── .github/
└── workflows/
└── docker-publish.yml # GHCR publishing workflow
Building for Production
Build Docker Images
docker-compose build
Push to GHCR
Images are automatically pushed when code is merged to main. To manually push:
docker tag docker-swarm-termina-backend ghcr.io/johndoe6345789/docker-swarm-termina-backend:latest
docker tag docker-swarm-termina-frontend ghcr.io/johndoe6345789/docker-swarm-termina-frontend:latest
docker push ghcr.io/johndoe6345789/docker-swarm-termina-backend:latest
docker push ghcr.io/johndoe6345789/docker-swarm-termina-frontend:latest
License
MIT License - see LICENSE file for details
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Support
For issues, questions, or contributions, please open an issue on GitHub.