docker-swarm-dashboard

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

docker-swarm-dashboard

★ 49 Open GitHub ↗

Dashboard for Docker Swarm Cluster

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![GitHub release](https://img.shields.io/github/v/release/heckenmann/docker-swarm-dashboard?style=flat-square)](https://github.com/heckenmann/docker-swarm-dashboard/releases/latest)
![Docker](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/docker-publish.yml/badge.svg?branch=master)
![CodeQL](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/codeql.yml/badge.svg?branch=master)
![Cypress](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/cypress.yml/badge.svg?branch=master)
![Frontend CI](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/ci-frontend.yml/badge.svg?branch=master)
![Server Go CI](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/go-test-server-src.yml/badge.svg?branch=master)
![API Build & Healthcheck](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/api-test.yml/badge.svg?branch=master)
[![Lint server-src](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/lint-server-src.yml/badge.svg)](https://github.com/heckenmann/docker-swarm-dashboard/actions/workflows/lint-server-src.yml)

# docker-swarm-dashboard
Dashboard for Docker Swarm Cluster

Docker-Image Size: < 25 MB

_Use a stable release in production, not the master-build!
Don't expose this service to the world! The endpoints offer the configuration of your services._

If you like this project, please give a ⭐ on github.
Feedback would be nice.

- [Frameworks & Libraries](#frameworks--libraries)
- [Screenshots](#screenshots)
- [Getting started](#getting-started)
- [Development](#development)

## Frameworks & Libraries
- [ApexCharts](https://apexcharts.com/)
- [Bootstrap](https://getbootstrap.com/)
- [Cypress](https://www.cypress.io/)
- [Fontawesome](https://fontawesome.com/)
- [Gorilla](https://www.gorillatoolkit.org/)
- [Jotai](https://jotai.org/)
- [React](https://reactjs.org/)

## Screenshots

![Dashboard - Light Mode](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/dashboard-light.png)
![Dashboard - Dark Mode](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/dashboard-dark.png)
![Timeline](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/timeline.png)
![Stacks](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/stacks.png)
![Nodes](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/nodes.png)
![Tasks](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/tasks.png)
![Ports](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/ports.png)
![Logs](https://raw.githubusercontent.com/heckenmann/docker-swarm-dashboard/master/screenshots/logs.png)

## Getting started
### Tags
|Tag|Description|Image|
|---|---|---|
|e.g. 1.4.1|Stable release|ghcr.io/heckenmann/docker-swarm-dashboard:1.4.1|
|latest|Latest stable release|ghcr.io/heckenmann/docker-swarm-dashboard:latest|
|master|Current unstable master-build (not well tested)|ghcr.io/heckenmann/docker-swarm-dashboard:master|

### Configuration
Docker Swarm Dashboard supports environment variables for configuration.

| Environment variable | Description | Default |
|---|---|---|
| `DSD_HTTP_PORT` | HTTP port within the container. Usually does not need to be changed. | `8080` |
| `DSD_HANDLE_LOGS` | Set to `false` to prevent fetching and displaying logs. | `true` |
| `DSD_DASHBOARD_LAYOUT` | Default dashboard layout. Either `row` (default) or `column`. | `row` |
| `DSD_HIDE_SERVICE_STATES` | Comma-separated list of states to not show in the main dashboard. | (none) |
| `DSD_PATH_PREFIX` | Set a URL path prefix for the dashboard (e.g. `/dashboard`). Useful when running behind a reverse proxy or when the app should not be served from the root path. | `/` |
| `DSD_ALLOWED_ORIGINS` | Comma-separated list of allowed HTTP CORS and WebSocket origins (e.g. `https://dashboard.example.com`). The default keeps the historical behavior and allows all origins. Set a concrete allow-list to restrict browser access. | `*` |
| `DSD_NODE_EXPORTER_LABEL` | Docker service label to identify node-exporter service for metrics collection. | `dsd.node-exporter` |
| `DSD_CADVISOR_LABEL` | Docker service label to identify cAdvisor service for container memory metrics. | `dsd.cadvisor` |
| `LOCALE` | Timestamp format based on a [BCP 47](https://www.rfc-editor.org/bcp/bcp47.txt) language tag. | (system) |
| `TZ` | [IANA Time zone](https://www.iana.org/time-zones) to display timestamps in. | (system) |
| `DSD_VERSION_CHECK_ENABLED` | When `true`, the system will check for updates and notify in the UI if a new version is available. | `false` |
| `DSD_VERSION_CHECK_CACHE_TIMEOUT_MINUTES` | Cache duration in minutes for version check results. | `60` |
| `DSD_WELCOME_MESSAGE` | If set, this message will be displayed to the user in a modal dialog when the web application is opened in the browser. | (none) |
| `DOCKER_API_VERSION` | Forces a specific Docker API version to use (e.g. `1.35`, `1.41`). When not specified, the server automatically negotiates the highest API version supported by both the client and Docker daemon. Only set this if you need to force a specific version for compatibility. | (auto-negotiated) |

If `DSD_ALLOWED_ORIGINS` is not set, the server logs a startup warning because all HTTP CORS and WebSocket origins are allowed for backward compatibility.

#### UI Default Settings
These environment variables control the default UI state. All settings can be changed by the user in the web interface and are persisted in the URL hash.

| Environment variable | Description | Default |
|---|---|---|
| `DSD_TABLE_SIZE` | Default table size. Either `sm` (small) or `lg` (large). | `sm` |
| `DSD_SERVICE_NAME_FILTER` | Default service name filter value. | (none) |
| `DSD_STACK_NAME_FILTER` | Default stack name filter value. | (none) |
| `DSD_FILTER_TYPE` | Default filter type. Either `service` or `stack`. | `service` |
| `DSD_LOGS_NUMBER_OF_LINES` | Default number of log lines to fetch. | `100` |
| `DSD_LOGS_MESSAGE_MAX_LEN` | Maximum length of log messages to display. | `2000` |
| `DSD_LOGS_FORM_TAIL` | Default value for tail option in logs form. | `true` |
| `DSD_LOGS_FORM_SINCE` | Default value for since option in logs form. | `false` |
| `DSD_LOGS_FORM_SINCE_AMOUNT` | Default amount for since option in logs form. | `15` |
| `DSD_LOGS_FORM_SINCE_UNIT` | Default unit for since option in logs form. Either `minutes`, `hours`, or `days`. | `minutes` |
| `DSD_LOGS_FORM_FOLLOW` | Default value for follow option in logs form. | `false` |
| `DSD_LOGS_FORM_TIMESTAMPS` | Default value for timestamps option in logs form. | `true` |
| `DSD_LOGS_FORM_STDOUT` | Default value for stdout option in logs form. | `true` |
| `DSD_LOGS_FORM_STDERR` | Default value for stderr option in logs form. | `true` |
| `DSD_LOGS_FORM_DETAILS` | Default value for details option in logs form. | `true` |
| `DSD_LOGS_SEARCH_KEYWORD` | Default search keyword for logs. | (none) |
| `DSD_DARK_MODE` | Enable dark mode by default. Either `true` or `false`. | `false` |
| `DSD_SHOW_NAMES_BUTTONS` | Show action buttons in entity names by default. Either `true` or `false`. | `true` |
| `DSD_SHOW_NAV_LABELS` | Show navigation labels by default. Either `true` or `false`. | `false` |
| `DSD_MAX_CONTENT_WIDTH` | Maximum content width. Either `fluid` (full width) or `fixed` (container width). | `fluid` |

### Pull Image from ghcr.io
```
docker pull ghcr.io/heckenmann/docker-swarm-dashboard:master
```

### docker-compose.yml
```
---
version: '3.5'

services:
  docker-swarm-dashboard:
    image: ghcr.io/heckenmann/docker-swarm-dashboard:master
    deploy:
      replicas: 1
      placement:
        constraints:
          - node.role == manager
    ports:
      - "8080:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"
```

### docker-compose.yml with traefik and basic auth
This configuration sets a password for access. It is importand to configure ssl in traefik for better security.

In this example you can login with "**docker / docker**" on port 8080.

Have a look at https://doc.traefik.io/traefik/user-guides/docker-compose/acme-tls/
```
---
version: '3.5'

services:
  docker-swarm-dashboard:
    image: ghcr.io/heckenmann/docker-swarm-dashboard:master
    deploy:
      replicas: 1
      placement:
        constraints:
          - node.role == manager
      labels:
        - "traefik.enable=true"
        - "traefik.http.routers.dsd.entrypoints=web"
        - "traefik.http.routers.dsd.middlewares=basic-auth"
        - "traefik.http.services.dsd.loadbalancer.server.port=8080"
        - "traefik.http.routers.dsd.rule=PathPrefix(`/`)"
        # Login with docker / docker
        - "traefik.http.middlewares.basic-auth.basicauth.users=docker:$$2y$$10$$81nFbUw842iBd7MlngMR4.1VBI9j6Y.vTiamBAqtVNfs4qehzZB.e"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"

traefik:
    image: "traefik:v2.9"
    deploy:
      placement:
        constraints:
          - node.role == manager
    command:
      #- "--log.level=debug"
      #- "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.swarmMode=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:8080"
    ports:
      - "8080:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
```

### Deploy on docker-swarm
From the directory with docker-compose.yml run:
```
docker stack deploy --compose-file docker-compose.yml docker-swarm-dashboard
```

### Metrics Integration (Optional)

Docker Swarm Dashboard supports optional integration with Prometheus Node Exporter and cAdvisor for enhanced metrics visualization.

#### Overview

| Metric Source | Provides | Discovery Label | Default Label |
|--------------|----------|-----------------|---------------|
| **Node Exporter** | Node-level metrics (CPU, memory, disk, network) | `dsd.node-exporter` | `dsd.node-exporter=true` |
| **cAdvisor** | Container-level metrics (memory usage per container) | `dsd.cadvisor` | `dsd.cadvisor=true` |

Both services should be deployed as **global services** on the same overlay network as the dashboard.

---

#### Node Exporter Setup

**Purpose:** Displays node-level system metrics (CPU, memory, disk, network usage per swarm node).

**Deployment:**
```yaml
node-exporter:
  image: prom/node-exporter:latest
  deploy:
    mode: global
    placement:
      constraints:
        - node.role == manager   # Or remove for all nodes
    labels:
      - "dsd.node-exporter=true"
  networks:
    - your-network-name
  volumes:
    - /proc:/host/proc:ro
    - /sys:/host/sys:ro
    - /:/rootfs:ro
  command:
    - '--path.procfs=/host/proc'
    - '--path.sysfs=/host/sys'
    - '--collector.filesystem.mount-points-exclude=^/(sys|proc|dev|host|etc)($$|/)'
```

**Customize Discovery Label:**
```yaml
environment:
  DSD_NODE_EXPORTER_LABEL: "my.custom.label"
```

---

#### cAdvisor Setup

**Purpose:** Displays container-level memory metrics per service (memory usage, limits, per-container breakdown).

**Deployment:**
```yaml
cadvisor:
  image: gcr.io/cadvisor/cadvisor:latest
  deploy:
    mode: global
    placement:
      constraints:
        - node.role == manager   # Or remove for all nodes
    labels:
      - "dsd.cadvisor=true"
  networks:
    - your-network-name
  volumes:
    - /:/rootfs:ro
    - /var/run:/var/run:ro
    - /sys:/sys:ro
    - /var/lib/docker/:/var/lib/docker:ro
    - /dev/disk/:/dev/disk:ro
  command:
    - '--docker_only=true'
    - '--housekeeping_interval=30s'
```

**Customize Discovery Label:**
```yaml
environment:
  DSD_CADVISOR_LABEL: "my.custom.label"
```

---

#### Metrics Displayed

**Node Exporter Metrics:**
- CPU usage per node
- Memory usage per node
- Disk I/O and storage
- Network traffic per node

**cAdvisor Metrics (Service Metrics Tab):**
- **Total Memory Usage:** Aggregate memory usage across all containers in the service
- **Memory Limits:** Configured memory limits for each container
- **Per-Container Breakdown:** Memory usage for each task/container in the service
- **Usage Percentage:** Memory usage as a percentage of the configured limit

**Benefits of cAdvisor:**
- Identify memory-hungry containers within a service
- Monitor services approaching memory limits
- Detect potential out-of-memory (OOM) situations before they occur

---

#### Network Configuration

Both services should be attached to the same overlay network as the dashboard for container-to-container communication:

```yaml
networks:
  - your-network-name  # Same network as docker-swarm-dashboard
```

This ensures metrics are only reachable from within the overlay network (recommended for security).

### logs-generator (for testing)
```
docker service create --name logger chentex/random-logger:latest 50 200
```

## Development
### Local Build
```
docker build -t ghcr.io/heckenmann/docker-swarm-dashboard:local .
```

### Run api-mock-server
```
# from app-src
yarn run start-api-mock
```
### Run UI
```
# from app-src
yarn run start-dev-server
```
When you run the UI with the api-mock-server, you have to open the ui with "base"-param (API-URL):
http://localhost:3000#base="http%3A%2F%2Flocalhost%3A3001%2F"

### Run UI-tests
```
# from app-src
yarn run cy:run
```

docker-swarm-dashboard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README