diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml new file mode 100644 index 0000000..981446f --- /dev/null +++ b/.github/workflows/ci-cd.yml @@ -0,0 +1,43 @@ +name: CI/CD Pipeline + +on: + push: + branches: + - main + +jobs: + build-and-push: + runs-on: [self-hosted, run] + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Build backend image + run: docker build -t backend ./backend + + - name: Build frontend image + run: docker build -t frontend ./frontend + + - name: Tag images + run: | + docker tag backend:latest git.reiimer.se/my-org/backend:latest + docker tag backend:latest git.reiimer.se/my-org/backend:$(echo $GITHUB_SHA | cut -c1-7) + docker tag frontend:latest git.reiimer.se/my-org/frontend:latest + docker tag frontend:latest git.reiimer.se/my-org/frontend:$(echo $GITHUB_SHA | cut -c1-7) + + - name: Log in to Gitea Registry + uses: docker/login-action@v3 + with: + registry: git.reiimer.se + username: ${{ secrets.GITEA_USERNAME }} + password: ${{ secrets.GITEA_PASSWORD }} + + - name: Push backend image + run: | + docker push git.reiimer.se/filip/backend:latest + docker push git.reiimer.se/filip/backend:$(echo $GITHUB_SHA | cut -c1-7) + + - name: Push frontend image + run: | + docker push git.reiimer.se/filip/frontend:latest + docker push git.reiimer.se/filip/frontend:$(echo $GITHUB_SHA | cut -c1-7) diff --git a/README.md b/README.md new file mode 100644 index 0000000..9319988 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Docker Backend Display + +This project provides a web interface to display information about running Docker services, particularly useful for local development environments. It consists of a Node.js backend that interacts with the Docker socket and a React frontend for visualization. + +## Features + +- Discovers running Docker containers with exposed ports. +- Prioritizes Traefik-exposed services, showing their public URLs. +- For non-Traefik services, identifies and makes clickable local IP addresses accessible from the client's subnet. +- Real-time updates for container start/stop events. +- Modern and responsive user interface with frosted glass effects for service cards. + +## Prerequisites + +To run this application, you need to have the following installed: + +- **Docker**: For running containers and interacting with the Docker daemon. +- **Docker Compose**: For orchestrating the backend and frontend services. +- **Node.js & npm**: (Optional, for local development outside Docker) + +## Running the Application Locally with Docker Compose + +1. **Clone the repository**: + ```bash + git clone + cd docker-backend-display + ``` + +2. **Start the services**: + ```bash + docker compose up --build + ``` + This command will: + - Build the Docker images for both the backend and frontend services. + - Start the backend service, which connects to your Docker daemon. + - Start the frontend service. + +3. **Access the application**: + - **Frontend**: Open your web browser and navigate to `http://localhost:3000`. + - **Backend API**: The backend API is available at `http://localhost:3001/api/services`. + +## Accessing Services + +- The frontend will display cards for each discovered Docker service. +- If a service is exposed via Traefik, clicking its card will take you to the Traefik-assigned URL. +- If a service is not Traefik-exposed but has an IP accessible from your local network, clicking its card will take you to that local IP and port. +- Otherwise, the card will list all accessible container IPs and ports as individual clickable links. diff --git a/openspec/changes/create-gitignore-file/.openspec.yaml b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/.openspec.yaml similarity index 100% rename from openspec/changes/create-gitignore-file/.openspec.yaml rename to openspec/changes/archive/2026-03-27-add-gitea-ci-cd/.openspec.yaml diff --git a/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/design.md b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/design.md new file mode 100644 index 0000000..e5c6411 --- /dev/null +++ b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/design.md @@ -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. diff --git a/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/proposal.md b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/proposal.md new file mode 100644 index 0000000..f3bf828 --- /dev/null +++ b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/proposal.md @@ -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. diff --git a/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/application-documentation/spec.md b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/application-documentation/spec.md new file mode 100644 index 0000000..8a41c7b --- /dev/null +++ b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/application-documentation/spec.md @@ -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. diff --git a/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/ci-cd-pipeline/spec.md b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/ci-cd-pipeline/spec.md new file mode 100644 index 0000000..694d7dc --- /dev/null +++ b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/specs/ci-cd-pipeline/spec.md @@ -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". diff --git a/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/tasks.md b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/tasks.md new file mode 100644 index 0000000..a9146fb --- /dev/null +++ b/openspec/changes/archive/2026-03-27-add-gitea-ci-cd/tasks.md @@ -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`. diff --git a/openspec/changes/docker-service-display/.openspec.yaml b/openspec/changes/archive/2026-03-27-create-gitignore-file/.openspec.yaml similarity index 100% rename from openspec/changes/docker-service-display/.openspec.yaml rename to openspec/changes/archive/2026-03-27-create-gitignore-file/.openspec.yaml diff --git a/openspec/changes/create-gitignore-file/design.md b/openspec/changes/archive/2026-03-27-create-gitignore-file/design.md similarity index 100% rename from openspec/changes/create-gitignore-file/design.md rename to openspec/changes/archive/2026-03-27-create-gitignore-file/design.md diff --git a/openspec/changes/create-gitignore-file/proposal.md b/openspec/changes/archive/2026-03-27-create-gitignore-file/proposal.md similarity index 100% rename from openspec/changes/create-gitignore-file/proposal.md rename to openspec/changes/archive/2026-03-27-create-gitignore-file/proposal.md diff --git a/openspec/changes/create-gitignore-file/specs/git-ignore-management/spec.md b/openspec/changes/archive/2026-03-27-create-gitignore-file/specs/git-ignore-management/spec.md similarity index 100% rename from openspec/changes/create-gitignore-file/specs/git-ignore-management/spec.md rename to openspec/changes/archive/2026-03-27-create-gitignore-file/specs/git-ignore-management/spec.md diff --git a/openspec/changes/create-gitignore-file/tasks.md b/openspec/changes/archive/2026-03-27-create-gitignore-file/tasks.md similarity index 100% rename from openspec/changes/create-gitignore-file/tasks.md rename to openspec/changes/archive/2026-03-27-create-gitignore-file/tasks.md diff --git a/openspec/changes/modernize-frontend-ui/.openspec.yaml b/openspec/changes/archive/2026-03-27-docker-service-display/.openspec.yaml similarity index 100% rename from openspec/changes/modernize-frontend-ui/.openspec.yaml rename to openspec/changes/archive/2026-03-27-docker-service-display/.openspec.yaml diff --git a/openspec/changes/docker-service-display/design.md b/openspec/changes/archive/2026-03-27-docker-service-display/design.md similarity index 100% rename from openspec/changes/docker-service-display/design.md rename to openspec/changes/archive/2026-03-27-docker-service-display/design.md diff --git a/openspec/changes/docker-service-display/proposal.md b/openspec/changes/archive/2026-03-27-docker-service-display/proposal.md similarity index 100% rename from openspec/changes/docker-service-display/proposal.md rename to openspec/changes/archive/2026-03-27-docker-service-display/proposal.md diff --git a/openspec/changes/docker-service-display/specs/docker-service-discovery/spec.md b/openspec/changes/archive/2026-03-27-docker-service-display/specs/docker-service-discovery/spec.md similarity index 100% rename from openspec/changes/docker-service-display/specs/docker-service-discovery/spec.md rename to openspec/changes/archive/2026-03-27-docker-service-display/specs/docker-service-discovery/spec.md diff --git a/openspec/changes/docker-service-display/specs/service-display-frontend/spec.md b/openspec/changes/archive/2026-03-27-docker-service-display/specs/service-display-frontend/spec.md similarity index 100% rename from openspec/changes/docker-service-display/specs/service-display-frontend/spec.md rename to openspec/changes/archive/2026-03-27-docker-service-display/specs/service-display-frontend/spec.md diff --git a/openspec/changes/docker-service-display/tasks.md b/openspec/changes/archive/2026-03-27-docker-service-display/tasks.md similarity index 100% rename from openspec/changes/docker-service-display/tasks.md rename to openspec/changes/archive/2026-03-27-docker-service-display/tasks.md diff --git a/openspec/changes/archive/2026-03-27-modernize-frontend-ui/.openspec.yaml b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/.openspec.yaml new file mode 100644 index 0000000..a61e7c1 --- /dev/null +++ b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-03-27 diff --git a/openspec/changes/modernize-frontend-ui/design.md b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/design.md similarity index 100% rename from openspec/changes/modernize-frontend-ui/design.md rename to openspec/changes/archive/2026-03-27-modernize-frontend-ui/design.md diff --git a/openspec/changes/modernize-frontend-ui/proposal.md b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/proposal.md similarity index 100% rename from openspec/changes/modernize-frontend-ui/proposal.md rename to openspec/changes/archive/2026-03-27-modernize-frontend-ui/proposal.md diff --git a/openspec/changes/modernize-frontend-ui/specs/docker-service-discovery/spec.md b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/docker-service-discovery/spec.md similarity index 100% rename from openspec/changes/modernize-frontend-ui/specs/docker-service-discovery/spec.md rename to openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/docker-service-discovery/spec.md diff --git a/openspec/changes/modernize-frontend-ui/specs/service-display-frontend/spec.md b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/service-display-frontend/spec.md similarity index 100% rename from openspec/changes/modernize-frontend-ui/specs/service-display-frontend/spec.md rename to openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/service-display-frontend/spec.md diff --git a/openspec/changes/modernize-frontend-ui/tasks.md b/openspec/changes/archive/2026-03-27-modernize-frontend-ui/tasks.md similarity index 100% rename from openspec/changes/modernize-frontend-ui/tasks.md rename to openspec/changes/archive/2026-03-27-modernize-frontend-ui/tasks.md