filip/docker-service-discovery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Archived all completed OpenSpec changes, created .gitignore, implemented Gitea CI/CD, updated frontend with professional styling and clickable IPs, and added application documentation.

Browse Source
This commit is contained in:
Filip
2026-03-27 13:09:48 +01:00
parent cc59a91fea
commit 1873ae0e1f
25 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
openspec/changes/archive/2026-03-27-modernize-frontend-ui/.openspec.yaml Normal file
View File

@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-03-27

48
openspec/changes/archive/2026-03-27-modernize-frontend-ui/design.md Normal file
View File

@@ -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.

27
openspec/changes/archive/2026-03-27-modernize-frontend-ui/proposal.md Normal file
View File

@@ -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.

26
openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/docker-service-discovery/spec.md Normal file
View File

@@ -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.

29
openspec/changes/archive/2026-03-27-modernize-frontend-ui/specs/service-display-frontend/spec.md Normal file
View File

@@ -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.

19
openspec/changes/archive/2026-03-27-modernize-frontend-ui/tasks.md Normal file
View File

@@ -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.