diff --git a/Kapitel 21/Premium Rohtext.md b/Kapitel 21/Premium Rohtext.md index 11434eb..6fcc636 100644 --- a/Kapitel 21/Premium Rohtext.md +++ b/Kapitel 21/Premium Rohtext.md @@ -252,3 +252,562 @@ alles innerhalb deines UCC. > Diese Vorlage kannst du für alle anderen Container übernehmen. > Ändere nur den Namen und den jeweiligen Duplicati-Job. > So entsteht Schritt für Schritt ein zentrales, einheitliches Kontrollzentrum für dein gesamtes UCC. + +--- + +## UI-Erweiterung: Thematische Tabs + +Das zentrale Dashboard aus dem Free-Teil zeigt bereits alle LXC-Container übersichtlich auf einer Seite. +Im Premium-Teil erweitern wir diese Oberfläche um **thematische Tabs**, die deine Infrastruktur logisch gliedern. + +Jeder Tab bündelt zusammengehörige Dienste – beispielsweise alle Netzwerk-Tools oder alle Automatisierungen – +und macht so aus deiner Container-Liste eine strukturierte Kommandozentrale. + +> [!NOTE] +> Diese Tabs basieren auf den bisherigen Kapiteln 1 bis 21. +> Clipper (Kapitel 22) ist nicht enthalten, da es sich nicht um einen steuerbaren Dienst handelt. + +👉 **Screenshot geeignet:** Tab-Leiste mit markiertem aktivem Bereich „Daten & Dateien“ + +### Tab-Übersicht + +| **Tab** | **Enthaltene Kapitel / LXCs** | **Beschreibung** | +|----------------------------------|----------------------------------------------------------------------------------|--------------------------------------------------------| +| **Übersicht** *(Startseite)* | Alle LXC-Container | Übersicht aller Dienste mit Status und Grundfunktionen | +| **System & Infrastruktur** | 1 (Proxmox), 15 (Netdata), 8 (Archiv), 10 (Webspace), 12 (Asset-LXC) | Ressourcen, Backups, Verwaltung | +| **Netzwerk & Sicherheit** | 2 (Pi-hole), 3 (Nginx), 4 (WireGuard), 5 (Vaultwarden), 19 (WAHA) | DNS, Reverse Proxy, VPN, Passwortsafe, API-Gateways | +| **Dateien & Dienste** | 6 (Nextcloud), 16 (Paperless), 20 (Tandoor), *(Filebrowser)* | Dateiablage, Dokumentenmanagement, Rezeptverwaltung | +| **Automation & Integration** | 11 (n8n), 18 (Ollama), 13 (Gitea) | Workflows, KI, Code, Hintergrunddienste | +| **Kommunikation & Information** | 14 (Wiki), 17 (Postiz), 7 (Affine) | Wissensdatenbank, Notizen, Kommunikationsdienste | +| **Medien & Streaming** | 9 (RTMP), 22 (Clipper) | Streaming-Infrastruktur, VOD-Handling | +| **Smart Home & Visualisierung** | 21 (Home Assistant) | Steuerung, Visualisierung, Dashboard | + +Jeder Tab enthält interaktive Kacheln mit Statusanzeige, Ressourcenwerten und Direktaktionen. + +👉 **Screenshot geeignet:** geöffneter Tab „Automation & Dienste“ mit mehreren Kacheln sichtbar + +## Tabs anlegen + +Damit dein Dashboard übersichtlich bleibt, gliedern wir die Oberfläche in einzelne Tabs. +Jeder Tab bildet ein Thema ab – z. B. **Netzwerk & Sicherheit** oder **Automation & Dienste** – +und enthält die zugehörigen Kacheln. + +Tabs lassen sich direkt über die Oberfläche von Home Assistant anlegen. + +### Ersten Tab erstellen + +1. Öffne in Home Assistant dein Dashboard **UCC Premium** +2. Klicke oben rechts auf das Drei-Punkte-Menü und wähle **„Dashboard bearbeiten“** +3. Wähle unten **„Ansicht hinzufügen“** +4. Vergib einen Namen für den Tab, z. B. `Netzwerk & Sicherheit` +5. Wähle ein passendes Symbol, z. B. `mdi:shield-outline` +6. Aktiviere die Option **„Panel anzeigen“**, damit mehrere Kacheln nebeneinander dargestellt werden können +7. Speichern + +Wiederhole diesen Vorgang für alle weiteren Bereiche: + +- System & Infrastruktur +- Daten & Dateien +- Automation & Dienste +- Wissen & Kommunikation +- Smart Home & Visualisierung + +> [!TIP] +> Du musst nicht alle Tabs sofort befüllen. Beginne mit den Bereichen, die für dich am wichtigsten sind. + +👉 **Screenshot geeignet:** Tab-Leiste mit aktivem Tab „Netzwerk & Sicherheit“ + +Im nächsten Schritt fügen wir die Kacheln in diese Tabs ein und kümmern uns anschließend um besondere Funktionen, +die über den Standard hinausgehen. + +## Erste vollständige Kachel anlegen + +Jetzt gestaltest du deine erste funktionsfähige Steuerkachel im Premium-Dashboard. +Diese Kachel zeigt dir, ob ein Dienst läuft, wie stark er arbeitet – +und ermöglicht dir, ihn direkt zu starten, zu stoppen oder neu zu starten. +Ganz ohne Umweg über Proxmox oder Terminal. + +Wir beginnen mit dem Container **Proxmox** (also dem LXC, der dein Proxmox-Webinterface enthält). + +> [!NOTE] +> Alle weiteren Kacheln kannst du später einfach duplizieren +> und an den jeweiligen Dienst anpassen – z. B. Nextcloud, Vaultwarden, n8n, etc. + +### Schritt 1 – Kachel erstellen + +Für deine Steuerkacheln nutzt du die `custom:button-card`. +Damit kannst du nicht nur den Status eines Containers anzeigen, +sondern auch CPU- und RAM-Auslastung sichtbar machen – +alles in einer einzigen Kachel. + +> [!NOTE] +> Wenn du die `custom:button-card` noch nicht installiert hast: +> Öffne den **Home Assistant Community Store (HACS)**, +> gehe zu **Frontend → Button Card** und installiere sie dort. +> Danach Home Assistant neu starten. + +#### Kachel anlegen + +1. Öffne dein **Premium-Dashboard** +2. Klicke auf **„Bearbeiten“**, dann auf **„Karte hinzufügen“** +3. Wähle den Typ **„Benutzerdefiniert → Button Card“** + +Im folgenden Editor gibst du folgenden YAML-Block ein: + +```yaml +type: custom:button-card +entity: sensor.lxc_proxmox_status +name: Proxmox +icon: mdi:server +show_state: true +show_icon: true +show_name: true +custom_fields: + cpu: > + [[[ + return states['sensor.netdata_proxmox_cpu']?.state + '%' || '–'; + ]]] + ram: > + [[[ + return states['sensor.netdata_proxmox_ram']?.state + '%' || '–'; + ]]] +styles: + grid: + - grid-template-areas: '"i n" "cpu cpu" "ram ram" "s s"' + - grid-template-columns: 1fr 1fr + - grid-template-rows: auto + custom_fields: + cpu: + - font-size: 12px + - color: gray + ram: + - font-size: 12px + - color: gray +state: + - value: 'running' + color: green + - value: 'stopped' + color: red + - value: 'paused' + color: orange +tap_action: + action: toggle +``` + +> [!NOTE] +> Die Statusanzeige basiert auf dem Sensor `sensor.lxc_proxmox_status`. +> CPU- und RAM-Werte stammen aus Netdata und müssen in deinem System +> z. B. als `sensor.netdata_proxmox_cpu` und `sensor.netdata_proxmox_ram` verfügbar sein. +> Diese Sensoren werden im Free-Kapitel automatisch angelegt, +> wenn du Netdata korrekt integriert hast. + +> [!TIP] +> Wenn du nicht sicher bist, wie deine Sensoren heißen, +> schau unter **Einstellungen → Geräte & Dienste → Entitäten** +> und suche nach `proxmox` oder `netdata`. + +Diese Kachel zeigt dir nun: +- ob der Container läuft (grün), gestoppt ist (rot) oder pausiert (orange) +- die aktuelle CPU-Auslastung +- die aktuelle RAM-Nutzung + +### Schritt 2 – Steuerung einbauen + +Deine Kachel zeigt bereits den aktuellen Zustand und Leistungsdaten – +jetzt soll sie auch **direkt steuerbar** sein. + +Du hinterlegst dafür drei Aktionen: +- **Einfacher Klick:** Container starten +- **Doppelklick:** Container stoppen +- **Halten:** Container neustarten + +Diese Befehle werden über `rest_command`s ausgelöst, +die du im nächsten Schritt definierst. + +#### Aktionen in der Kachel eintragen + +Öffne deine bestehende `custom:button-card` +und **ersetze den Block `tap_action: action: toggle`** +durch die folgenden drei Einträge: + +```yaml +tap_action: + action: call-service + service: rest_command.proxmox_lxc_start_proxmox + +double_tap_action: + action: call-service + service: rest_command.proxmox_lxc_stop_proxmox + +hold_action: + action: call-service + service: rest_command.proxmox_lxc_restart_proxmox +``` + +> [!NOTE] +> Diese drei Befehle existieren noch nicht in deinem System. +> Du wirst sie im nächsten Schritt in deiner `configuration.yaml` selbst anlegen. + +### Schritt 3 – Steuerbefehle in Home Assistant anlegen + +Damit dein Button wirklich **Start**, **Stop** und **Neustart** ausführen kann, +muss Home Assistant wissen, **wie** es mit deinem Proxmox-Server sprechen soll. + +Dazu legst du drei sogenannte `rest_command`s an – +**für jeden einzelnen Container**, den du steuern möchtest. + +> [!CAUTION] +> Es reicht **nicht**, diese Befehle einmalig zu erstellen. +> Du brauchst **pro Container** ein eigenes Befehls-Set: +> jeweils einen für Start, Stop und Neustart. + +> [!NOTE] +> Speichere zuerst deinen Button im Dashboard, bevor du Home Assistant verlässt. +> Die Änderungen im YAML wirken sich sonst nicht korrekt aus. + +#### Öffne die Konfigurationsdatei + +Die `configuration.yaml` ist die zentrale Datei von Home Assistant. +Hier legst du Befehle, Sensoren und Integrationen manuell an. + +So findest du sie: + +1. Öffne Home Assistant im Browser +2. Gehe zu **Einstellungen → Add-ons** +3. Starte den **File Editor** + (falls nicht installiert: über HACS → Frontend nachinstallieren) +4. Klicke links auf die Datei `configuration.yaml` + +> [!TIP] +> Alternativ kannst du auch per SFTP auf dein Home Assistant System zugreifen +> und dort im `config`-Verzeichnis die Datei `configuration.yaml` öffnen. + +#### Befehle einfügen (für einen Container) + +Scrolle ans Ende der Datei und füge folgenden Block ein. +Dieses Beispiel zeigt die Steuerung für den Container `Proxmox` mit der ID `101`. + +```yaml +rest_command: + proxmox_lxc_start_proxmox: + url: "https://192.168.100.10:8006/api2/json/nodes/pve/lxc/101/status/start" + method: POST + verify_ssl: false + headers: + Authorization: "PVEAPIToken=ha@pve!homeassistant=DEIN_API_TOKEN" + + proxmox_lxc_stop_proxmox: + url: "https://192.168.100.10:8006/api2/json/nodes/pve/lxc/101/status/stop" + method: POST + verify_ssl: false + headers: + Authorization: "PVEAPIToken=ha@pve!homeassistant=DEIN_API_TOKEN" + + proxmox_lxc_restart_proxmox: + url: "https://192.168.100.10:8006/api2/json/nodes/pve/lxc/101/status/reboot" + method: POST + verify_ssl: false + headers: + Authorization: "PVEAPIToken=ha@pve!homeassistant=DEIN_API_TOKEN" +``` + +> [!TIP] +> Ersetze: +> – `192.168.100.10` durch die IP-Adresse deines Proxmox-Servers +> – oder verwende alternativ einen lokalen DNS-Namen wie `proxmox.local` +> – `101` durch die **Container-ID** aus Proxmox +> – `proxmox_lxc_*` durch einen eindeutigen Namen, z. B. `nextcloud`, `kopia`, etc. +> – `DEIN_API_TOKEN` durch den API-Token für den Benutzer `ha@pve` aus dem Free-Kapitel + +> [!NOTE] +> Der Aufruf funktioniert **nur innerhalb deines Heimnetzwerks**. +> Der Proxmox-Server ist nicht öffentlich erreichbar – und das ist gut so. + +#### Konfiguration prüfen und übernehmen + +1. Klicke im File Editor auf **„Speichern“** +2. Gehe zu **Einstellungen → System → Steuerung** +3. Klicke auf **„Konfiguration prüfen“** +4. Wenn keine Fehler angezeigt werden, klicke auf **„Neu starten“**, + damit Home Assistant die neuen Befehle lädt + +> [!CAUTION] +> Wenn ein YAML-Fehler erscheint: +> Prüfe Einrückungen, Anführungszeichen und doppelte `rest_command:`-Einträge. + +Wenn alles korrekt eingetragen ist, funktioniert dein Button jetzt wie geplant. +**Start**, **Stop** und **Neustart** können direkt über das Dashboard ausgelöst werden. + +### Schritt 4 – Weboberfläche öffnen + +Damit du direkt aus dem Dashboard die Benutzeroberfläche deines Containers öffnen kannst, +fügst du einen vierten Befehl hinzu: **„Weboberfläche aufrufen“**. +Anders als bei Start/Stopp ist das kein `rest_command`, sondern einfach ein Link, +der beim Klicken einen neuen Tab im Browser öffnet. + +#### Web-Link in die Kachel einbauen + +Ergänze deine bestehende Kachel um folgenden zusätzlichen Block: +**füge ihn direkt hinter den drei bisherigen Aktionsblöcken ein.** + +```yaml +show_icon: true +show_name: true + +custom_fields: + web: + card: + type: custom:button-card + icon: mdi:open-in-new + tap_action: + action: url + url_path: "https://nextcloud.deinedomain.tld" + styles: + card: + - background-color: "#64D4E8" + - border-radius: 12px + - padding: 8px + - height: 40px + - width: 40px +``` + +> [!TIP] +> Du kannst die URL direkt anpassen – z. B. für Vaultwarden, n8n oder Kopia. +> Die Adresse muss aus Sicht deines **Browsers** erreichbar sein, +> also z. B. über den Nginx Proxy Manager veröffentlicht sein. + +> [!NOTE] +> Der Link öffnet sich **nicht im Home Assistant-Fenster**, +> sondern startet einen neuen Browser-Tab mit der Zielseite. + +Wenn du willst, kannst du das Icon auch durch einen Text oder anderen Button ersetzen – +wir bleiben hier beim Symbol „open-in-new“ für Klarheit. + +### Schritt 5 – Optische Korrektur bei gestopptem Container + +Wenn ein Container gestoppt ist (`sensor.lxc_proxmox_status = stopped`), +liefern die CPU- und RAM-Werte entweder `0`, `null` oder gar keine Anzeige. +Damit das im Dashboard klarer und sauberer aussieht, +setzen wir in diesem Fall eine Platzhalteranzeige – z. B. `–`. + +#### Umsetzung: + +Du passt den Anzeige-Text für CPU und RAM direkt in der Kachel an: +Wenn der Container gestoppt ist, erscheint **nicht „0 %“**, sondern z. B. **„–“ oder „aus“**. + +Füge dazu diesen Block in die Kachel unterhalb von `custom_fields:` ein +(bzw. passe vorhandene Felder an): + +```yaml +custom_fields: + cpu: > + [[[ return states['sensor.lxc_proxmox_status'].state === 'running' + ? states['sensor.netdata_proxmox_cpu'].state + ' %' + : '–'; ]]] + ram: > + [[[ return states['sensor.lxc_proxmox_status'].state === 'running' + ? states['sensor.netdata_proxmox_ram'].state + ' %' + : '–'; ]]] +``` + +> [!NOTE] +> Diese Werte werden automatisch aktualisiert. +> Wenn der Container startet oder stoppt, passen sich beide Felder direkt an. + +> [!TIP] +> Du kannst statt `–` auch `aus`, `n.v.` oder ein Icon wie `mdi:power-off` anzeigen lassen, +> je nachdem, was optisch besser zu deinem Dashboard passt. + +### Komplettes Beispiel – Grundkachel mit allen Funktionen + +Du kannst diese YAML-Vorlage 1:1 in dein Dashboard übernehmen +und anschließend die Platzhalter (`DEIN_...`) durch deine echten Werte ersetzen. + +```yaml +type: custom:button-card +entity: sensor.lxc_DEINCONTAINER_status +name: DEINCONTAINER +icon: mdi:server + +show_icon: true +show_name: true + +tap_action: + action: call-service + service: rest_command.proxmox_lxc_start_DEINCONTAINER + +hold_action: + action: call-service + service: rest_command.proxmox_lxc_restart_DEINCONTAINER + +double_tap_action: + action: call-service + service: rest_command.proxmox_lxc_stop_DEINCONTAINER + +styles: + card: + - border-radius: 12px + - padding: 12px + - background-color: > + [[[ return entity.state === 'running' ? '#64D4E8' : '#999999'; ]]] + - color: black + name: + - font-weight: bold + - font-size: 16px + icon: + - width: 32px + - height: 32px + +custom_fields: + cpu: > + [[[ return entity.state === 'running' + ? states['sensor.netdata_DEINCONTAINER_cpu'].state + ' %' + : '–'; ]]] + ram: > + [[[ return entity.state === 'running' + ? states['sensor.netdata_DEINCONTAINER_ram'].state + ' %' + : '–'; ]]] + web: + card: + type: custom:button-card + icon: mdi:open-in-new + tap_action: + action: url + url_path: "https://DEINCONTAINER.deinedomain.tld" + styles: + card: + - background-color: "#73A1EF" + - border-radius: 8px + - padding: 6px + - height: 36px + - width: 36px +``` + +#### Platzhalter zum Ersetzen + +| Platzhalter | Bedeutung | +|---------------------------------|----------------------------------------------------| +| `DEINCONTAINER` | z. B. `nextcloud`, `vaultwarden`, `n8n`, … | +| `sensor.lxc_DEINCONTAINER_status` | Sensor für Container-Status (aus Free-Kapitel) | +| `sensor.netdata_DEINCONTAINER_cpu` | Sensor für CPU-Wert aus Netdata | +| `sensor.netdata_DEINCONTAINER_ram` | Sensor für RAM-Wert aus Netdata | +| `rest_command.proxmox_lxc_start_DEINCONTAINER` | API-Befehl zum Starten (siehe Konfigurations-Teil) | +| `rest_command.proxmox_lxc_stop_DEINCONTAINER` | API-Befehl zum Stoppen | +| `rest_command.proxmox_lxc_restart_DEINCONTAINER` | API-Befehl zum Neustarten | +| `https://DEINCONTAINER.deinedomain.tld` | URL zur Weboberfläche über Nginx Proxy Manager | + +> [!NOTE] +> Diese Kachel enthält bereits alle empfohlenen Funktionen. +> Du kannst sie jetzt für jeden weiteren Dienst duplizieren und nur die Platzhalter anpassen. + +### Schritt 6 – Kachel duplizieren und anpassen + +Jetzt musst du nicht jede Kachel komplett neu bauen. +Du nutzt einfach die fertige Kachel von oben als Vorlage, +duplizierst sie und passt nur die individuellen Werte an. + +#### So duplizierst du eine Kachel: + +1. Öffne dein **UCC Premium Dashboard** in Home Assistant +2. Klicke oben rechts auf **Bearbeiten** +3. Suche die fertige Kachel (z. B. `Nextcloud`) +4. Klicke auf das **Drei-Punkte-Menü** oben rechts in der Kachel +5. Wähle **Duplizieren** +6. Klicke auf das neue Duplikat +7. Ersetze dort alle Platzhalter durch die Werte deines neuen Containers: + +| Bereich | Was du änderst (Beispiel für `Vaultwarden`) | +|--------------|----------------------------------------------------------------| +| `name:` | `Vaultwarden` | +| `entity:` | `sensor.lxc_vaultwarden_status` | +| `cpu:` | `sensor.netdata_vaultwarden_cpu` | +| `ram:` | `sensor.netdata_vaultwarden_ram` | +| `rest_command.start` | `rest_command.proxmox_lxc_start_vaultwarden` | +| `rest_command.stop` | `rest_command.proxmox_lxc_stop_vaultwarden` | +| `rest_command.restart` | `rest_command.proxmox_lxc_restart_vaultwarden` | +| `url_path:` | `https://vaultwarden.deinedomain.tld` | + +#### Wiederhole das für jeden weiteren Container: + +- n8n +- Kopia +- Home Assistant +- Pi-hole +- Affine +- …und alle anderen UCC-Dienste + +> [!TIP] +> Du musst nur die **Bezeichnungen und Befehle anpassen** – +> das Grundlayout bleibt gleich. So baust du dein Kontrollzentrum in Minuten fertig. + +### Erweiterung einzelner Kacheln + +Du hast jetzt eine funktionierende Grundkachel gebaut +und sie für alle deine Container dupliziert. + +Einige Dienste brauchen aber **zusätzliche Funktionen** oder **spezielle Einstellungen**, +damit du sie optimal über das Dashboard bedienen kannst. + +Wir gehen jetzt **Kachel für Kachel** durch +und zeigen dir **nur die zusätzlichen YAML-Blöcke**, +die du in der jeweiligen Kachel **ergänzen oder anpassen musst.** + +> [!NOTE] +> Wenn ein Dienst keine Sonderfunktionen hat, +> bleibt seine Kachel wie du sie vorher dupliziert hast – ganz ohne Änderungen. +und zeigen dir **nur die zusätzlichen YAML-Blöcke**, +die du in der jeweiligen Kachel **ergänzen oder anpassen musst.** + +> [!NOTE] +> Wenn ein Dienst keine Sonderfunktionen hat, +> bleibt seine Kachel wie du sie vorher dupliziert hast – ganz ohne Änderungen. + +#### Kachel: Proxmox + +> [!CAUTION] +> Diese Kachel ist ein **Spezialfall** und darf **nicht** aus der Grundkachel dupliziert werden! +> Du verwendest hier **keine API-Steuerung** (starten, stoppen etc.), +> da sonst die Gefahr besteht, dass du dir versehentlich den Host selbst ausschaltest. + +Die Proxmox-Kachel zeigt nur CPU- und RAM-Werte an +und öffnet bei Klick das Proxmox-Webinterface. +Sie hat **keine Aktionen zur Steuerung**. + +> [!NOTE] +> Proxmox ist **nicht öffentlich erreichbar**. +> Du musst eine **lokale IP-Adresse** verwenden, z. B.: + +```yaml +tap_action: + action: url + url_path: "https://192.168.1.10:8006" +``` + +#### So passt du die Kachel an: + +1. Ersetze in der YAML der Proxmox-Kachel den gesamten Block: +```yaml +tap_action: + action: call-service + service: rest_command.proxmox_lxc_start_* +``` +durch den lokalen URL-Aufruf oben. + +2. Entferne ggf. vorhandene `hold_action` und `double_tap_action`, + oder setze sie auf: +```yaml +hold_action: + action: none +double_tap_action: + action: none +``` + +3. Ersetze den `custom_fields:`-Block für CPU und RAM durch: +```yaml +custom_fields: + cpu: > + [[[ return states['sensor.netdata_proxmox_cpu'].state + ' %'; ]]] + ram: > + [[[ return states['sensor.netdata_proxmox_ram'].state + ' %'; ]]] +``` +