# 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](https://nextjs.org/), [React 19](https://react.dev/) - **Styling**: [Tailwind CSS 4](https://tailwindcss.com/), 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) ```bash docker build -t docker-dashboard-frontend . ``` **Container starten:** (Ersetze die Platzhalter durch deine Netbox-Daten) ```bash 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:** ```bash git pull origin main ``` **2. Container neu bauen und starten (mit Docker Compose):** ```bash docker-compose up -d --build ``` **ODER Manuell:** ```bash 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:** ```bash 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:** ```bash 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.