🐳 Container Dashboard

A beautiful, real-time Docker container monitoring dashboard for your NAS

Features • Installation • Screenshots • API • Contributing

📖 About

Container Dashboard is a lightweight, mobile-optimized web application designed to monitor Docker containers on QNAP NAS systems (or any Linux Docker host). It provides real-time insights into your containerized infrastructure with a stunning glass-morphism dark mode interface.

Perfect for home labs, small businesses, or anyone running Docker on a NAS who wants a beautiful monitoring solution without the complexity of larger tools like Portainer or Yacht.

✨ Features

🎯 Core Functionality

📊 Real-time Container Monitoring - Live status updates every 30 seconds
🔍 Smart Filtering - View Active, Running, Stopped containers, or All at once
🌐 One-Click Access - Clickable port links to instantly open your services
🎨 Intelligent Icons - Auto-assigns contextual icons based on container type
📈 System Metrics - Real-time CPU and RAM monitoring with circular gauges
📅 Uptime Tracking - 7-day container uptime history with visual charts

💎 User Experience

🌙 Dark Mode - Beautiful glass-morphism design
📱 Mobile-First - Fully responsive, optimized for phones and tablets
⚡ Lightning Fast - Built with vanilla JavaScript, no heavy frameworks
🔄 Auto-Refresh - Set it and forget it with automatic data updates

🛠️ Technical

🐳 Dockerode Integration - Direct Docker socket communication
🔐 Read-Only Access - Secure, non-destructive monitoring
📦 Self-Contained - Single Docker container, easy deployment
🪶 Lightweight - ~50MB RAM, <1% CPU usage

🖼️ Screenshots

Main Dashboard

Modern glass-morphism interface with real-time metrics

Container Views

Active Containers - Services with exposed ports (default)
Running - All currently running containers
Stopped - Inactive containers
All Containers - Complete overview

🚀 Installation

Option 1: QNAP Container Station (Recommended for QNAP Users)

Method A: Using Docker Compose in Container Station

Open Container Station on your QNAP NAS
Enable SSH on your QNAP (if not already enabled):
- Go to Control Panel → Telnet/SSH
- Enable "Allow SSH connection"
SSH into your QNAP:

ssh admin@your-nas-ip

Navigate to a directory (e.g., Container folder):

cd /share/Container

Clone the repository:

git clone https://github.com/ordingr/ContainerDashboard.git
cd ContainerDashboard

Edit the docker-compose.yml to set your NAS IP:

vi docker-compose.yml
# Change NAS_IP=192.168.1.10 to your actual NAS IP
# Press 'i' to edit, ESC then ':wq' to save

Deploy using Docker Compose:

docker-compose up -d

Access the dashboard:

http://your-nas-ip:3080

Method B: Using Container Station UI (Manual Setup)

Open Container Station → Click Create Container
Configure the container:
- Name: container-dashboard
- Image: node:20-alpine
- Command: Leave empty (we'll build it)
Or build from source in Container Station:
- Click Create → Create Application
- Upload or paste the docker-compose.yml content
- Container Station will build and run automatically

Method C: Pre-built Image (Coming Soon)

Once we publish to Docker Hub, you'll be able to:

Open Container Station → Create Container
Search for: ordingr/container-dashboard (when published)
Configure:
- Port: 3080:3000
- Volume: /var/run/docker.sock:/var/run/docker.sock:ro
- Environment: NAS_IP=YOUR_NAS_IP
Click Create

Option 2: Standard Docker Compose (Linux/Mac)

Clone the repository

git clone https://github.com/ordingr/ContainerDashboard.git
cd ContainerDashboard

Configure your NAS IP (optional)

# Edit docker-compose.yml
nano docker-compose.yml
# Change NAS_IP=192.168.1.10 to your NAS IP

Deploy

docker-compose up -d

Access

http://your-nas-ip:3080

Option 3: Manual Docker Build & Run

# Build the image
docker build -t container-dashboard .

# Run the container
docker run -d \
  --name container-dashboard \
  --restart unless-stopped \
  -p 3080:3000 \
  -v /var/run/docker.sock:/var/run/docker.sock:ro \
  -e NAS_IP=192.168.1.10 \
  container-dashboard

Option 4: Development Setup

# Install dependencies
npm install

# Start with hot reload
npm run dev

# Production start
npm start

🔌 API

The dashboard exposes a REST API for programmatic access:

Endpoints

Endpoint	Method	Description
`/api/containers`	`GET`	List all containers with ports, status, and metadata
`/api/system`	`GET`	Docker system info (version, resources, counts)
`/api/health`	`GET`	Real-time CPU/RAM usage and metrics
`/api/uptime`	`GET`	7-day uptime history data

Example Response

// GET /api/containers
[
  {
    "id": "a1b2c3d4e5f6",
    "name": "plex",
    "image": "plexinc/pms-docker:latest",
    "state": "running",
    "status": "Up 3 days",
    "ports": [
      {
        "private": 32400,
        "public": 32400,
        "type": "tcp",
        "url": "http://192.168.1.10:32400"
      }
    ],
    "icon": "movie",
    "iconColor": "orange"
  }
]

⚙️ Configuration

Environment Variables

Variable	Default	Description
`PORT`	`3000`	Internal server port
`NAS_IP`	`192.168.1.10`	Your NAS IP for generating service URLs

Port Mapping

The default external port is 3080. Change it in docker-compose.yml:

ports:
  - "YOUR_PORT:3000"

Customizing Bottom Navigation

Edit public/index.html to update quick-access links:

<!-- Line ~167-178 -->
<a href="http://YOUR_IP:YOUR_PORT" target="_blank">
  <span class="material-symbols-outlined">analytics</span>
  <span class="text-[10px] font-bold">Your Service</span>
</a>

🎨 Icon Mapping

Containers are automatically assigned icons based on their name or image:

Match Pattern	Icon	Color
`plex`	🎬 Movie	Orange
`jenkins`	🏗️ Construction	Red
`dashboard`, `web`	📊 Dashboard	Blue
`api`, `server`	⚡ API	Green
`db`, `mysql`, `postgres`, `mariadb`	🗄️ Database	Purple
`nginx`	🌐 Public	Green
`ollama`, `ai`, `webui`	🧠 Psychology	Pink
default	⚙️ Deployed Code	Blue

🔒 Security

✅ Docker socket mounted as read-only (:ro)
✅ No write operations to Docker
⚠️ Consider adding authentication for external access
⚠️ Use firewall rules if exposing to the internet
⚠️ Update NAS_IP environment variable to prevent SSRF

🐛 Troubleshooting

QNAP: Container Station can't access Docker socket?

Check permissions on your QNAP:

ssh admin@your-nas-ip
ls -la /var/run/docker.sock
# Should show: srw-rw---- 1 root docker

# If needed, ensure your user is in docker group
# Usually Container Station handles this automatically

QNAP: Git command not found?

Install Git on QNAP:

Open App Center
Search for "Entware" or "git"
Install, then try again via SSH

Or manually upload files:

Download the repo as ZIP from GitHub
Extract to /share/Container/ContainerDashboard
Continue with docker-compose commands

No containers showing up?

Check Docker socket permissions:

ls -la /var/run/docker.sock
docker logs container-dashboard

CPU/RAM showing 0% or incorrect values?

The app reads from /proc/meminfo and /proc/loadavg. Ensure your Docker host exposes these, or the app will use fallback values.

Port links not working?

Verify NAS_IP environment variable matches your actual IP
Ensure container ports are properly mapped and accessible
Check firewall rules on your NAS

QNAP: Can't access on port 3080?

Check QNAP firewall:

Go to Control Panel → Security → Firewall
Ensure port 3080 is allowed
Or change to a different port in docker-compose.yml

🛣️ Roadmap

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow existing code style
Test on both mobile and desktop
Update README if adding features
Keep it lightweight and fast

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Space Grotesk - Beautiful font family
Google Material Symbols - Icon set
Tailwind CSS - Utility-first CSS framework
Dockerode - Docker API client
Express - Web framework

📊 Stats

⭐ Star History

If you find this project useful, please consider giving it a star! It helps others discover the project.

Built with ❤️ for the home lab community

Report Bug • Request Feature • Discussions

Name		Name	Last commit message	Last commit date
design		design
public		public
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
JENKINS_SETUP.md		JENKINS_SETUP.md
Jenkinsfile		Jenkinsfile
LICENSE		LICENSE
README.md		README.md
deploy.sh		deploy.sh
docker-compose.yml		docker-compose.yml
package.json		package.json
server.js		server.js

Latest commit

History

Folders and files

Repository files navigation