Kapitel 21/Premium Rohtext.md aktualisiert

This commit is contained in:
2025-10-25 20:16:17 +00:00
parent c1372ca2ce
commit 9e89d14471

View File

@@ -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 + ' %'; ]]]
```