Archived all completed OpenSpec changes, created .gitignore, implemented Gitea CI/CD, updated frontend with professional styling and clickable IPs, and added application documentation.
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-03-27
|
||||
@@ -0,0 +1,47 @@
|
||||
## Context
|
||||
|
||||
The current project lacks an automated Continuous Integration/Continuous Deployment (CI/CD) pipeline for building and pushing Docker images. This manual process can lead to inconsistencies and delays in development and deployment. Additionally, comprehensive documentation for setting up and running the application is missing, which can hinder new developer onboarding and general usability.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Implement a robust CI/CD pipeline using GitHub Actions (compatible with Gitea Actions) to automate the building and pushing of Docker images for both backend and frontend services.
|
||||
- Ensure that Docker images are correctly tagged and pushed to the internal Gitea package repository.
|
||||
- Provide clear, concise, and up-to-date documentation for running the application locally, including instructions for using Docker Compose.
|
||||
|
||||
**Non-Goals:**
|
||||
- This design does not cover automated deployment to a production environment; it focuses solely on image building and pushing to the registry.
|
||||
- Automated testing within the CI/CD pipeline is out of scope for this change.
|
||||
- Advanced CI/CD features such as automated rollback strategies or complex deployment orchestrations are not included.
|
||||
|
||||
## Decisions
|
||||
|
||||
1. **CI/CD Workflow File**:
|
||||
- A new workflow file (`.gitea/workflows/ci-cd.yml` or `.github/workflows/ci-cd.yml` for Gitea compatibility) will be created.
|
||||
- The workflow will be triggered on `push` events to the `main` branch.
|
||||
- It will use a self-hosted runner with the label `run`.
|
||||
- **Build Process**:
|
||||
- Docker images for both `backend` and `frontend` services will be built.
|
||||
- Images will be tagged with `latest` and the short commit SHA.
|
||||
- **Push Process**:
|
||||
- Built images will be pushed to the Gitea internal Docker package registry.
|
||||
- Authentication to the Gitea registry will be handled using Gitea secrets (e.g., `GITEA_USERNAME`, `GITEA_PASSWORD` or `GITEA_TOKEN`).
|
||||
|
||||
2. **Application Documentation**:
|
||||
- A `README.md` file will be created or updated in the project root.
|
||||
- The documentation will include:
|
||||
- A brief overview of the application.
|
||||
- Prerequisites for running the application (Docker, Node.js/npm for local dev).
|
||||
- Step-by-step instructions for running the application locally using `docker-compose`.
|
||||
- Instructions for accessing the frontend and backend services once running.
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- **[Risk]** Gitea Actions compatibility: While Gitea Actions aim for GitHub Actions compatibility, subtle differences might exist.
|
||||
- **Mitigation**: Thorough testing of the workflow on the target Gitea instance will be performed.
|
||||
- **[Risk]** Security of Gitea credentials: Storing credentials for registry access.
|
||||
- **Mitigation**: Gitea's built-in secrets management will be utilized to store sensitive information securely.
|
||||
- **[Risk]** Documentation becoming outdated: Manual updates to documentation can lead to inconsistencies.
|
||||
- **Mitigation**: Keep the documentation concise and focused on essential setup steps, making it easier to maintain.
|
||||
- **[Risk]** Self-hosted runner availability: The CI/CD pipeline relies on a self-hosted runner being available and correctly configured.
|
||||
- **Mitigation**: Clear instructions for setting up and maintaining the self-hosted runner will be assumed to be in place.
|
||||
@@ -0,0 +1,27 @@
|
||||
## Why
|
||||
|
||||
To automate the build and deployment process of the application, ensuring consistent and reliable releases. This also provides clear instructions for users to run the application, improving developer onboarding and operational efficiency.
|
||||
|
||||
## What Changes
|
||||
|
||||
- A new GitHub Actions workflow file will be added to the repository, configured to be compatible with Gitea Actions.
|
||||
- This workflow will automatically build Docker images for both the backend and frontend services upon code pushes to specific branches.
|
||||
- The built Docker images will be tagged and pushed to the internal Gitea package repository.
|
||||
- The workflow will utilize a self-hosted runner with the label "run".
|
||||
- New documentation will be created, detailing how to set up and run the application locally, including instructions for using Docker Compose.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `ci-cd-pipeline`: Provides automated continuous integration and continuous deployment for the application's Docker images.
|
||||
- `application-documentation`: Offers comprehensive instructions for setting up and running the application.
|
||||
|
||||
### Modified Capabilities
|
||||
- None
|
||||
|
||||
## Impact
|
||||
|
||||
- Automated and consistent build and push of Docker images to the Gitea package repository.
|
||||
- Streamlined deployment process and improved release reliability.
|
||||
- Enhanced developer experience through clear and accessible application documentation.
|
||||
- Requires a configured Gitea instance with a Docker package repository and a self-hosted runner with the specified label.
|
||||
@@ -0,0 +1,36 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Project README File
|
||||
The project SHALL include a `README.md` file in the project root.
|
||||
|
||||
#### Scenario: README file existence
|
||||
- **WHEN** the project repository is initialized or cloned
|
||||
- **THEN** a `README.md` file SHALL be present in the root directory.
|
||||
|
||||
### Requirement: Application Overview
|
||||
The `README.md` file SHALL provide a brief overview of the application's purpose and functionality.
|
||||
|
||||
#### Scenario: User reads README
|
||||
- **WHEN** a user reads the `README.md` file
|
||||
- **THEN** they SHALL understand the application's purpose.
|
||||
|
||||
### Requirement: Prerequisites for Running
|
||||
The `README.md` file SHALL list all necessary prerequisites for running the application.
|
||||
|
||||
#### Scenario: User prepares to run application
|
||||
- **WHEN** a user consults the `README.md` for setup
|
||||
- **THEN** they SHALL find a list of required software (e.g., Docker, Node.js/npm).
|
||||
|
||||
### Requirement: Local Run Instructions
|
||||
The `README.md` file SHALL provide step-by-step instructions for running the application locally using Docker Compose.
|
||||
|
||||
#### Scenario: User runs application locally
|
||||
- **WHEN** a user follows the `README.md` instructions for local setup
|
||||
- **THEN** they SHALL be able to successfully start the application using Docker Compose.
|
||||
|
||||
### Requirement: Service Access Instructions
|
||||
The `README.md` file SHALL provide instructions on how to access the frontend and backend services once they are running.
|
||||
|
||||
#### Scenario: User accesses running services
|
||||
- **WHEN** a user has started the application
|
||||
- **THEN** they SHALL find information on the URLs/ports to access the frontend and backend.
|
||||
@@ -0,0 +1,40 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Gitea Actions Workflow File
|
||||
The project SHALL include a Gitea Actions compatible workflow file for CI/CD.
|
||||
|
||||
#### Scenario: Workflow file existence
|
||||
- **WHEN** the project repository is initialized or cloned
|
||||
- **THEN** a workflow file SHALL be present in the `.gitea/workflows/` or `.github/workflows/` directory.
|
||||
|
||||
### Requirement: Docker Image Build Automation
|
||||
The CI/CD pipeline SHALL automatically build Docker images for the backend and frontend services.
|
||||
|
||||
#### Scenario: Code push to main branch
|
||||
- **WHEN** code is pushed to the `main` branch
|
||||
- **THEN** the backend Docker image SHALL be built.
|
||||
- **AND** the frontend Docker image SHALL be built.
|
||||
|
||||
### Requirement: Docker Image Tagging
|
||||
The built Docker images SHALL be tagged with `latest` and the short commit SHA.
|
||||
|
||||
#### Scenario: Image build completion
|
||||
- **WHEN** a Docker image is successfully built
|
||||
- **THEN** the image SHALL be tagged with `latest`.
|
||||
- **AND** the image SHALL be tagged with the short commit SHA.
|
||||
|
||||
### Requirement: Docker Image Push to Gitea Registry
|
||||
The built Docker images SHALL be pushed to the internal Gitea package registry.
|
||||
|
||||
#### Scenario: Image build and tagging completion
|
||||
- **WHEN** Docker images are successfully built and tagged
|
||||
- **THEN** the backend image SHALL be pushed to the Gitea package registry.
|
||||
- **AND** the frontend image SHALL be pushed to the Gitea package registry.
|
||||
|
||||
### Requirement: Self-Hosted Runner Usage
|
||||
The CI/CD workflow SHALL utilize a self-hosted runner with the label "run".
|
||||
|
||||
#### Scenario: Workflow execution
|
||||
- **WHEN** the CI/CD workflow is executed
|
||||
- **THEN** it SHALL run on a self-hosted runner.
|
||||
- **AND** the self-hosted runner SHALL have the label "run".
|
||||
20
openspec/changes/archive/2026-03-27-add-gitea-ci-cd/tasks.md
Normal file
20
openspec/changes/archive/2026-03-27-add-gitea-ci-cd/tasks.md
Normal file
@@ -0,0 +1,20 @@
|
||||
## 1. CI/CD Workflow Implementation
|
||||
|
||||
- [x] 1.1 Create the CI/CD workflow file at `.github/workflows/ci-cd.yml`.
|
||||
- [x] 1.2 Configure the workflow to trigger on `push` events to the `main` branch.
|
||||
- [x] 1.3 Define a job that runs on a self-hosted runner with the label "run".
|
||||
- [x] 1.4 Add steps to checkout the repository code.
|
||||
- [x] 1.5 Add steps to build the backend Docker image.
|
||||
- [x] 1.6 Add steps to build the frontend Docker image.
|
||||
- [x] 1.7 Add steps to tag the built images with `latest` and the short commit SHA.
|
||||
- [x] 1.8 Add steps to log in to the Gitea Docker package registry using secrets.
|
||||
- [x] 1.9 Add steps to push the backend Docker image to the Gitea registry.
|
||||
- [x] 1.10 Add steps to push the frontend Docker image to the Gitea registry.
|
||||
|
||||
## 2. Documentation Creation
|
||||
|
||||
- [x] 2.1 Create or update the `README.md` file in the project root.
|
||||
- [x] 2.2 Add a brief application overview to `README.md`.
|
||||
- [x] 2.3 Add a list of prerequisites for running the application to `README.md`.
|
||||
- [x] 2.4 Add step-by-step instructions for running the application locally using Docker Compose to `README.md`.
|
||||
- [x] 2.5 Add instructions on how to access the frontend and backend services (URLs/ports) to `README.md`.
|
||||
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-03-27
|
||||
@@ -0,0 +1,35 @@
|
||||
## Context
|
||||
|
||||
The project currently lacks a `.gitignore` file, which results in various development-related files, build artifacts, and dependency directories being untracked or potentially committed to version control. This leads to a cluttered repository and can cause issues with consistency across different development environments.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Create a comprehensive `.gitignore` file at the project root.
|
||||
- Ensure that common development artifacts, temporary files, dependency directories, and OS/IDE-specific files are ignored by Git.
|
||||
- Maintain a clean and focused Git repository.
|
||||
|
||||
**Non-Goals:**
|
||||
- This design does not aim to modify existing Git history or remove already committed files.
|
||||
- It does not cover advanced Git configurations beyond the `.gitignore` file itself.
|
||||
- It will not address ignoring files that are intentionally part of the repository (e.g., configuration files that need to be tracked).
|
||||
|
||||
## Decisions
|
||||
|
||||
1. **Location**: The `.gitignore` file will be placed in the root directory of the project (`/home/filip/docker-backend-display/.gitignore`).
|
||||
2. **Content - General**: It will include standard ignore patterns for:
|
||||
- Node.js specific files and directories (`node_modules`, `npm-debug.log`, `build`, `dist`, etc.).
|
||||
- Operating System specific files (`.DS_Store`, `Thumbs.db`).
|
||||
- Common IDE/Editor specific files (`.vscode/`, `.idea/`, `*.swp`).
|
||||
3. **Content - Project Specific**: It will include patterns for:
|
||||
- Backend build artifacts (if any are generated outside `node_modules`).
|
||||
- Frontend build artifacts (`frontend/build`).
|
||||
- Log files (`*.log`).
|
||||
- Environment variables (`.env`).
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- **[Risk]** Over-ignoring essential files: There is a risk that some files necessary for the project's build or execution might be inadvertently ignored.
|
||||
- **Mitigation**: The `.gitignore` file will be carefully reviewed after creation, and tested by checking `git status` to ensure only intended files are ignored.
|
||||
- **[Risk]** Under-ignoring sensitive or large files: Some sensitive information or large binary files might be missed, leading to them being committed.
|
||||
- **Mitigation**: The `.gitignore` will be based on widely accepted templates for Node.js/React projects, and specific project directories will be explicitly added.
|
||||
@@ -0,0 +1,21 @@
|
||||
## Why
|
||||
|
||||
To prevent unnecessary files (such as build artifacts, dependency directories, and temporary files) from being committed to version control. This keeps the repository clean, reduces repository size, and ensures that only relevant source code is tracked.
|
||||
|
||||
## What Changes
|
||||
|
||||
- A new `.gitignore` file will be created in the project root. This file will contain patterns for files and directories that should be ignored by Git.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `git-ignore-management`: Manages the set of files and directories that Git should ignore across the project.
|
||||
|
||||
### Modified Capabilities
|
||||
- None
|
||||
|
||||
## Impact
|
||||
|
||||
- The project's Git repository will be cleaner and more focused on source code.
|
||||
- Development workflow will be improved by preventing accidental commits of irrelevant files.
|
||||
- Reduced repository size and faster cloning/fetching operations.
|
||||
@@ -0,0 +1,39 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Project Root .gitignore File
|
||||
The project SHALL include a `.gitignore` file at its root directory.
|
||||
|
||||
#### Scenario: .gitignore file existence
|
||||
- **WHEN** the project repository is initialized or cloned
|
||||
- **THEN** a `.gitignore` file SHALL be present in the root directory.
|
||||
|
||||
### Requirement: Ignore Node.js Dependencies
|
||||
The `.gitignore` file SHALL include patterns to ignore Node.js dependency directories and related build artifacts.
|
||||
|
||||
#### Scenario: Node.js project files
|
||||
- **WHEN** a Node.js project is being developed
|
||||
- **THEN** `node_modules/` SHALL be ignored.
|
||||
- **AND** `npm-debug.log` SHALL be ignored.
|
||||
- **AND** `build/` directories within Node.js projects SHALL be ignored.
|
||||
- **AND** `dist/` directories within Node.js projects SHALL be ignored.
|
||||
|
||||
### Requirement: Ignore OS and IDE Specific Files
|
||||
The `.gitignore` file SHALL include patterns to ignore operating system and integrated development environment (IDE) specific files.
|
||||
|
||||
#### Scenario: OS and IDE generated files
|
||||
- **WHEN** development is performed on various operating systems or IDEs
|
||||
- **THEN** `.DS_Store` SHALL be ignored.
|
||||
- **AND** `Thumbs.db` SHALL be ignored.
|
||||
- **AND** `.vscode/` directory SHALL be ignored.
|
||||
- **AND** `.idea/` directory SHALL be ignored.
|
||||
- **AND** `*.swp` files SHALL be ignored.
|
||||
|
||||
### Requirement: Ignore Project-Specific Build Artifacts and Logs
|
||||
The `.gitignore` file SHALL include patterns to ignore project-specific build output directories and log files.
|
||||
|
||||
#### Scenario: Project build and log files
|
||||
- **WHEN** the frontend or backend services are built
|
||||
- **THEN** `frontend/build/` SHALL be ignored.
|
||||
- **AND** `backend/build/` SHALL be ignored.
|
||||
- **AND** `*.log` files SHALL be ignored.
|
||||
- **AND** `.env` files SHALL be ignored.
|
||||
@@ -0,0 +1,19 @@
|
||||
## 1. Create .gitignore File
|
||||
|
||||
- [x] 1.1 Create a `.gitignore` file in the project root (`/home/filip/docker-backend-display/.gitignore`).
|
||||
- [x] 1.2 Add patterns to ignore Node.js dependency directories and related build artifacts:
|
||||
- `node_modules/`
|
||||
- `npm-debug.log`
|
||||
- `build/`
|
||||
- `dist/`
|
||||
- [x] 1.3 Add patterns to ignore OS and IDE specific files:
|
||||
- `.DS_Store`
|
||||
- `Thumbs.db`
|
||||
- `.vscode/`
|
||||
- `.idea/`
|
||||
- `*.swp`
|
||||
- [x] 1.4 Add patterns to ignore project-specific build artifacts and logs:
|
||||
- `frontend/build/`
|
||||
- `backend/build/`
|
||||
- `*.log`
|
||||
- `.env`
|
||||
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-03-27
|
||||
@@ -0,0 +1,30 @@
|
||||
## Context
|
||||
|
||||
The goal is to create a web-based tool that provides a real-time overview of services running in a local Docker environment. This is for developers who run multiple services and need a quick way to see what's running and how to access it. The tool will read from the Docker socket to get this information.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Provide a unified dashboard of all running Docker services that expose ports.
|
||||
- Prioritize services managed by Traefik, displaying the user-friendly URL.
|
||||
- The application should be a single, self-contained service.
|
||||
- The UI should be clean, simple, and update in near real-time.
|
||||
|
||||
**Non-Goals:**
|
||||
- This tool will not manage Docker services (start, stop, restart). It is read-only.
|
||||
- It will not provide detailed service metrics (CPU, memory).
|
||||
- It will not have an authentication mechanism, as it is intended for local use.
|
||||
|
||||
## Decisions
|
||||
|
||||
- **Backend:** A Node.js server using the Express framework. It will use the `dockerode` library to interact with the Docker socket. This provides a good balance of performance and ease of development.
|
||||
- **Frontend:** A single-page application built with React. This will allow for a dynamic and responsive user interface.
|
||||
- **Communication:** The frontend will communicate with the backend via a REST API. The backend will expose an endpoint that returns a list of services.
|
||||
- **Deployment:** The application will be packaged as a single Docker container for easy deployment.
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- **Security Risk:** Access to the Docker socket is equivalent to root access on the host machine. The application must be run in a trusted environment.
|
||||
- **Mitigation:** The documentation will clearly state the security implications. The application will be bound to `localhost` by default to minimize exposure.
|
||||
- **Performance:** Polling the Docker socket for changes can be inefficient.
|
||||
- **Mitigation:** The backend will use Docker events to listen for changes in real-time, avoiding constant polling.
|
||||
@@ -0,0 +1,25 @@
|
||||
## Why
|
||||
|
||||
This change introduces a web interface to display information about running Docker services that have exposed ports, making it easier to get an overview of the services running on a host.
|
||||
|
||||
## What Changes
|
||||
|
||||
- A new backend service that connects to the Docker socket (`docker.sock`).
|
||||
- A new frontend application that displays the service information.
|
||||
- The service will list all Docker services with exposed ports.
|
||||
- Services exposed via Traefik will be prioritized and displayed prominently.
|
||||
- The web interface will use a card-based layout to show each service.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `docker-service-discovery`: Discovers running Docker services and their exposed ports.
|
||||
- `service-display-frontend`: A web interface to display the discovered services.
|
||||
|
||||
### Modified Capabilities
|
||||
- None
|
||||
|
||||
## Impact
|
||||
|
||||
- This change will introduce a new web service to the host.
|
||||
- It will require access to the Docker socket, which has security implications that need to be considered.
|
||||
@@ -0,0 +1,26 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Discover running Docker containers
|
||||
The system SHALL discover all running Docker containers on the host.
|
||||
|
||||
#### Scenario: Containers are running
|
||||
- **WHEN** the service starts
|
||||
- **THEN** the system has a list of all running containers.
|
||||
|
||||
### Requirement: Identify services with exposed ports
|
||||
The system SHALL identify which of the running containers have exposed ports.
|
||||
|
||||
#### Scenario: Container with exposed ports
|
||||
- **WHEN** a container is running with a port mapping
|
||||
- **THEN** the system identifies the container and its exposed port.
|
||||
|
||||
#### Scenario: Container without exposed ports
|
||||
- **WHEN** a container is running without any port mappings
|
||||
- **THEN** the system ignores this container.
|
||||
|
||||
### Requirement: Prioritize Traefik services
|
||||
The system SHALL identify services that are managed by Traefik and extract the public-facing URL.
|
||||
|
||||
#### Scenario: Traefik service
|
||||
- **WHEN** a container has Traefik labels (e.g., `traefik.http.routers.my-service.rule`)
|
||||
- **THEN** the system SHALL extract the router rule and present it as the primary URL for the service.
|
||||
@@ -0,0 +1,26 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Display services in a card layout
|
||||
The frontend SHALL display each discovered service as a card.
|
||||
|
||||
#### Scenario: Services are discovered
|
||||
- **WHEN** the frontend receives a list of services from the backend
|
||||
- **THEN** it SHALL render a card for each service.
|
||||
|
||||
### Requirement: Show service details on each card
|
||||
Each service card SHALL display the service name, the exposed port, and the URL to access it.
|
||||
|
||||
#### Scenario: Displaying a service
|
||||
- **WHEN** a service is displayed
|
||||
- **THEN** the card SHALL show the service name, port, and URL.
|
||||
|
||||
### Requirement: Real-time updates
|
||||
The frontend SHALL update in near real-time when services are started or stopped.
|
||||
|
||||
#### Scenario: A new service is started
|
||||
- **WHEN** a new service is started on the host
|
||||
- **THEN** a new card for that service SHALL appear in the frontend without requiring a page refresh.
|
||||
|
||||
#### Scenario: A service is stopped
|
||||
- **WHEN** a service is stopped on the host
|
||||
- **THEN** the corresponding card SHALL be removed from the frontend without requiring a page refresh.
|
||||
@@ -0,0 +1,34 @@
|
||||
## 1. Backend Setup
|
||||
|
||||
- [x] 1.1 Initialize a new Node.js project for the backend.
|
||||
- [x] 1.2 Add dependencies: `express`, `dockerode`, and `cors`.
|
||||
- [x] 1.3 Create a basic Express server.
|
||||
- [x] 1.4 Configure the server to listen on a specific port.
|
||||
|
||||
## 2. Docker Service Discovery
|
||||
|
||||
- [x] 2.1 Implement a function to connect to the Docker socket using `dockerode`.
|
||||
- [x] 2.2 Create a function to list all running containers.
|
||||
- [x] 2.3 Filter the list of containers to include only those with exposed ports.
|
||||
- [x] 2.4 Implement logic to identify Traefik services and extract their URLs from container labels.
|
||||
- [x] 2.5 Create a REST API endpoint (`/api/services`) that returns the list of discovered services.
|
||||
- [x] 2.6 Implement real-time updates using Docker events to watch for container start and stop events.
|
||||
|
||||
## 3. Frontend Setup
|
||||
|
||||
- [x] 3.1 Initialize a new React project for the frontend.
|
||||
- [x] 3.2 Add dependencies: `axios` for making API requests.
|
||||
- [x] 3.3 Create a basic layout for the application.
|
||||
|
||||
## 4. Frontend Implementation
|
||||
|
||||
- [x] 4.1 Create a function to fetch the list of services from the backend API.
|
||||
- [x] 4.2 Create a `ServiceCard` component to display the information for a single service.
|
||||
- [x] 4.3 Implement the main view to display a grid of `ServiceCard` components.
|
||||
- [x] 4.4 Implement real-time updates on the frontend, either through polling or a WebSocket connection.
|
||||
|
||||
## 5. Dockerization
|
||||
|
||||
- [x] 5.1 Create a `Dockerfile` for the backend service.
|
||||
- [x] 5.2 Create a `Dockerfile` for the frontend service.
|
||||
- [x] 5.3 Create a `docker-compose.yml` file to run both services together.
|
||||
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-03-27
|
||||
@@ -0,0 +1,48 @@
|
||||
## Context
|
||||
|
||||
The current frontend suffers from an outdated design, inconsistent clickable elements, and a lack of direct access for services not exposed through Traefik. This design document outlines the technical approach to modernize the UI, ensure comprehensive service accessibility, and achieve a professional aesthetic, thereby significantly enhancing the developer experience in local Docker environments.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Modernize the user interface with a professional and polished look and feel.
|
||||
- Ensure all relevant links are clickable and provide clear visual feedback.
|
||||
- Implement a "frosted glass" effect for service cards to improve visual appeal and hierarchy.
|
||||
- Provide direct, clickable access to services not exposed via Traefik, prioritizing local network accessibility.
|
||||
- Improve overall frontend professionalism through refined typography, spacing, and responsive design.
|
||||
|
||||
**Non-Goals:**
|
||||
- The core business logic or functionality of the backend services will not be altered, only their discovery and presentation.
|
||||
- This tool will not manage Docker services (start, stop, restart). It remains read-only.
|
||||
|
||||
## Decisions
|
||||
|
||||
1. **Clickable Service Cards**:
|
||||
- If a service has a `traefikUrl`, the entire service card will be a clickable link that opens the URL in a new tab.
|
||||
- If a service does not have a `traefikUrl` but has a `preferredLocalUrl` (an IP accessible from the client's subnet), the entire card will be a clickable link to this URL, opening in a new tab.
|
||||
- If neither a `traefikUrl` nor a `preferredLocalUrl` is available, the card will display all `accessibleUrls` (container IPs and ports) as a list of clickable links.
|
||||
|
||||
2. **Frosted Glass Effect**:
|
||||
- The frosted glass effect will be achieved using CSS `backdrop-filter: blur()`.
|
||||
- A semi-transparent background color will be used to enhance the effect.
|
||||
|
||||
3. **Frontend Styling**:
|
||||
- A modern, clean font will be used.
|
||||
- The layout will be updated to be more spacious and visually balanced.
|
||||
- Implement a responsive design to ensure optimal viewing across various screen sizes.
|
||||
- Refine the color palette and spacing to contribute to a professional and polished appearance.
|
||||
|
||||
4. **Backend IP Discovery**:
|
||||
- The backend will use `os.networkInterfaces()` to identify its own local IP addresses and associated subnets.
|
||||
- For each container, the backend will iterate through its network settings to find all assigned IP addresses.
|
||||
- Logic will be implemented to compare container IPs against the backend's local subnets to determine a `preferredLocalUrl`.
|
||||
- The `listContainers` function will be modified to return `traefikUrl`, `preferredLocalUrl`, and a comprehensive list of `accessibleUrls` for each service.
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- **[Risk]** Browser compatibility for `backdrop-filter`.
|
||||
- **Mitigation**: A solid background color will be used as a fallback for browsers that do not support `backdrop-filter`.
|
||||
- **[Risk]** Complexity of IP/subnet matching, especially across diverse Docker network configurations and host environments.
|
||||
- **Mitigation**: The initial implementation will focus on common local development setups (e.g., Docker bridge networks, host network mode). Further refinement may be needed for more complex scenarios.
|
||||
- **[Risk]** Accurately determining the "client's subnet" if the client is not on the same host as the backend.
|
||||
- **Mitigation**: For the initial scope, the assumption is that the client is on the same local network as the backend. Future enhancements could involve client-side IP detection or configurable subnet ranges.
|
||||
@@ -0,0 +1,27 @@
|
||||
## Why
|
||||
|
||||
The current frontend is not user-friendly. Links are not clickable, the design is outdated, and there's no direct way to access services not exposed via Traefik. This change will significantly improve the user experience by making the interface more modern, interactive, and functional, especially for local development environments.
|
||||
|
||||
## What Changes
|
||||
|
||||
- Make all links in the frontend clickable.
|
||||
- Update the UI to a modern style.
|
||||
- Use a frosted glass effect for cards to improve the visual hierarchy.
|
||||
- For services without Traefik URLs, identify and display accessible local IP addresses, prioritizing those within the client's subnet, and make them clickable.
|
||||
- Enhance overall frontend professionalism through improved typography, spacing, and responsive design, while retaining the frosted card aesthetic.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- None
|
||||
|
||||
### Modified Capabilities
|
||||
- `service-display-frontend`: The UI will be updated to be more modern and interactive, including new logic for displaying and linking to local IPs.
|
||||
- `docker-service-discovery`: The backend logic will be extended to identify and prioritize local IP addresses for services not exposed via Traefik.
|
||||
|
||||
## Impact
|
||||
|
||||
- The frontend UI will be significantly updated, offering a more polished and professional look and feel.
|
||||
- User experience will be greatly improved, providing direct access to all services, regardless of Traefik exposure.
|
||||
- Changes will affect both frontend (UI/UX, display logic) and backend (service discovery logic).
|
||||
- No breaking changes are expected.
|
||||
@@ -0,0 +1,26 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Identify Backend Local IP Addresses
|
||||
The system SHALL identify all local IP addresses and their corresponding subnets on the host where the backend service is running.
|
||||
|
||||
#### Scenario: Backend on a host with local network interfaces
|
||||
- **WHEN** the backend service starts
|
||||
- **THEN** the system identifies all active local IP addresses and their subnets.
|
||||
|
||||
### Requirement: Determine Preferred Local IP for Services
|
||||
The system SHALL, for each service not exposed via Traefik, determine a "preferred local IP" if any of the service's exposed IPs are within the backend's identified local subnets.
|
||||
|
||||
#### Scenario: Service IP matches a local subnet
|
||||
- **WHEN** a service has an exposed IP address that falls within one of the backend's local subnets
|
||||
- **THEN** that service IP is identified as the "preferred local IP".
|
||||
|
||||
#### Scenario: Service IP does not match any local subnet
|
||||
- **WHEN** a service has exposed IP addresses but none fall within the backend's local subnets
|
||||
- **THEN** no "preferred local IP" is determined for that service.
|
||||
|
||||
### Requirement: Provide All Accessible Service IPs
|
||||
The system SHALL, for each service, provide a comprehensive list of all accessible IP addresses and ports.
|
||||
|
||||
#### Scenario: Service with exposed ports
|
||||
- **WHEN** a service has exposed ports
|
||||
- **THEN** the system provides a list of all IP addresses and ports through which the service can be accessed.
|
||||
@@ -0,0 +1,29 @@
|
||||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: Clickable Service Cards
|
||||
The system SHALL make the entire service card a clickable link based on the following priority:
|
||||
1. If a Traefik URL is present, use that.
|
||||
2. Else if a preferred local IP is present, use that.
|
||||
3. Else, display all accessible IPs/ports as individual clickable links.
|
||||
|
||||
#### Scenario: Service with Traefik URL
|
||||
- **WHEN** a service card is displayed with a Traefik URL
|
||||
- **THEN** the entire card is a clickable link that opens the Traefik URL in a new tab.
|
||||
|
||||
#### Scenario: Service with Preferred Local IP (no Traefik URL)
|
||||
- **WHEN** a service card is displayed with a preferred local IP but no Traefik URL
|
||||
- **THEN** the entire card is a clickable link that opens the preferred local IP in a new tab.
|
||||
|
||||
#### Scenario: Service with Multiple Accessible IPs/Ports (no Traefik or Preferred Local IP)
|
||||
- **WHEN** a service card is displayed with multiple accessible IPs/ports but no Traefik URL or preferred local IP
|
||||
- **THEN** the card is not clickable as a whole.
|
||||
- **AND** each accessible IP/port is displayed as an individual clickable link that opens in a new tab.
|
||||
|
||||
### Requirement: Professional and Modern UI with Frosted Cards
|
||||
The system SHALL have a professional and modern user interface with a "frosted glass" effect for service cards, improved typography, spacing, and responsive design.
|
||||
|
||||
#### Scenario: Displaying Service Cards
|
||||
- **WHEN** service cards are displayed
|
||||
- **THEN** the cards have a "frosted glass" effect with a blurred backdrop, semi-transparent background, rounded corners, and a subtle box shadow.
|
||||
- **AND** the overall layout utilizes improved typography and spacing for a professional appearance.
|
||||
- **AND** the interface is responsive, adapting to various screen sizes.
|
||||
@@ -0,0 +1,19 @@
|
||||
## 1. Backend Logic (IP Discovery)
|
||||
|
||||
- [x] 1.1 Implement a function in `backend/docker.js` to get the host's local IP addresses and subnets.
|
||||
- [x] 1.2 Modify `listContainers` in `backend/docker.js` to:
|
||||
- Get all container IP addresses.
|
||||
- Determine `preferredLocalUrl` by matching container IPs with host subnets.
|
||||
- Compile a list of `accessibleUrls` for each service.
|
||||
- Return `traefikUrl`, `preferredLocalUrl`, and `accessibleUrls` in the service object.
|
||||
|
||||
## 2. Frontend Styling
|
||||
|
||||
- [x] 2.1 Refine `ServiceCard.css` for improved typography and spacing.
|
||||
- [x] 2.2 Update `App.css` for a more professional color palette and responsive design.
|
||||
|
||||
## 3. Frontend Logic (Service Card Display)
|
||||
|
||||
- [x] 3.1 Modify `ServiceCard.js` to prioritize `traefikUrl`, then `preferredLocalUrl` for the main clickable card.
|
||||
- [x] 3.2 If neither `traefikUrl` nor `preferredLocalUrl` is present, display `accessibleUrls` as a list of individual clickable links within the card.
|
||||
- [x] 3.3 Ensure all new links open in a new tab.
|
||||
Reference in New Issue
Block a user