Docker Dashboard (Netbox Integration)

Ein modernes Dashboard zur Visualisierung von Docker-Containern und Inventar-Daten, integriert mit Netbox. Entwickelt mit Next.js, React und Tailwind CSS.

🚀 Features

• Inventar-Übersicht: Automatische Erkennung und Darstellung von Containern basierend auf Netbox-Daten.
• Netbox Integration: Nahtlose Anbindung an die Netbox API zur Zentralisierung der Dokumentation.
• Modernes UI: Responsives Design dank Tailwind CSS v4.
• Dockerized: Saubere Trennung von Infrastruktur und Code.

🛠️ Technologien

• Frontend: Next.js 16, React 19
• Styling: Tailwind CSS 4, Lucide React Icons
• Deployment: Docker & Docker Compose

---

🔌 Netbox Integration

Das Dashboard dient als Frontend für deine Dokumentation in Netbox. Es "scannt" Netbox nach virtuellen Maschinen, die als Docker-Container gekennzeichnet sind.

Voraussetzungen in Netbox

Damit Container im Dashboard erscheinen, müssen sie in Netbox korrekt angelegt sein:

1. Rolle (Role):

   • Erstelle eine Rolle für Virtual Machines mit dem Namen Docker Container und dem Slug docker-container.
   • Jede VM, die im Dashboard erscheinen soll, muss diese Rolle haben.

2. Custom Fields:

   • Das Dashboard liest spezifische Custom Fields aus, um Details anzuzeigen. Lege diese in Netbox an (für Objekte vom Typ Virtualization > Virtual Machine):
     • Name: docker_run_command | Type: Text (oder Long Text)
       • Inhalt: Der komplette docker run Befehl.
     • Name: docker_volumes | Type: Text (oder Long Text)
       • Inhalt: Volume-Mappings (z.B. -v /host/path:/container/path), am besten eins pro Zeile.

Funktionsweise

1. Das Dashboard fragt die Netbox API unter /api/virtualization/virtual-machines/ ab.
2. Es filtert automatisch nach ?role=docker-container.
3. Die Ergebnisse werden nach dem zugewiesenen Device (Host) gruppiert.
4. IP-Adressen, Status und die oben genannten Custom Fields werden visualisiert.

---

📦 Deployment & Betrieb

Die Infrastruktur-Konfiguration (Dockerfile, docker-compose.yml) liegt im Hauptverzeichnis, der Anwendungscode im Unterordner frontend/.

1. Docker Build & Run (Manuell)

Image bauen: (Aus dem Hauptverzeichnis)

docker build -t docker-dashboard-frontend .

Container starten: (Ersetze die Platzhalter durch deine Netbox-Daten)

docker run -d \
  -p 3000:3000 \
  -e NETBOX_API_URL="https://deine-netbox-url.com" \
  -e NETBOX_API_TOKEN="dein_api_token" \
  -e APP_TITLE="Mein Docker Dashboard" \
  --name docker-dashboard \
  docker-dashboard-frontend

Das Dashboard ist anschließend unter http://localhost:3000 erreichbar.

---

2. Updates einspielen (Workflow)

Wenn sich am Code im Git etwas geändert hat:

1. Code aktualisieren:

git pull origin main

2. Container neu bauen und starten (mit Docker Compose):

docker-compose up -d --build

ODER Manuell:

docker stop docker-dashboard
docker rm docker-dashboard
docker build -t docker-dashboard-frontend .
# (Dann docker run Befehl von oben)

---

🔧 Git-Verwaltung

Dieses Projekt wird unter https://git.klenzel.net/Klenzel/docker_dashboard verwaltet.

Initiales Setup:

git init
git remote add origin https://git.klenzel.net/Klenzel/docker_dashboard
git add .
git commit -m "Initial commit"
git push -u origin main

Änderungen hochladen:

git add .
git commit -m "Beschreibung der Änderung"
git push origin main

---

📂 Projektstruktur

• Dockerfile: Bauanleitung für das Image (im Root).
• docker-compose.yml: Orchestrierung (im Root).
• frontend/: Quellcode der Next.js Anwendung.
  • src/app/: Pages & Routing.
  • src/lib/: API-Logik (Netbox Fetching).
  • src/components/: UI-Bausteine.