# UI API Configuration

## Übersicht
Die UI-Anwendung verwendet keine hart codierten API-URLs mehr. Stattdessen wird die API-Basis-URL über die Umgebungsvariable `API_BASE` konfiguriert.

## Konfiguration

### Umgebungsvariable
- **Name**: `API_BASE`
- **Standard**: `http://localhost:8001`
- **Beispiele**:
  - Lokal: `http://localhost:8001`
  - Docker: `http://api:8001`
  - Kubernetes: `http://api-service:8001`

- **Name**: `BASE_PATH`
- **Standard**: `""` (leer)
- **Beschreibung**: Pfad-Präfix für Reverse Proxy (z.B. `/ui`)
- **Beispiele**:
  - Ohne Proxy: `""` (leer)
  - Hinter Proxy: `/ui`
  - Traefik/nginx: `/home-automation`

### Startup-Ausgabe
Beim Start zeigt die UI die verwendete API-URL an:
```
UI using API_BASE: http://localhost:8001
```

## API-Funktionen

### `api_url(path: str) -> str`
Hilfsfunktion zum Erstellen vollständiger API-URLs:
```python
from apps.ui.main import api_url

# Beispiel
url = api_url("/devices")  # → "http://localhost:8001/devices"
```

### Health Endpoint
Für Kubernetes Liveness/Readiness Probes:
```bash
GET /health
```

Antwort:
```json
{
  "status": "ok",
  "service": "ui",
  "api_base": "http://localhost:8001"
}
```

## Verwendung

### Lokal (Entwicklung)
```bash
# Standard (verwendet http://localhost:8001)
poetry run uvicorn apps.ui.main:app --host 0.0.0.0 --port 8002

# Mit anderer API
API_BASE=http://192.168.1.100:8001 poetry run uvicorn apps.ui.main:app --port 8002

# Mit BASE_PATH (Reverse Proxy)
BASE_PATH=/ui poetry run uvicorn apps.ui.main:app --port 8002
# Zugriff: http://localhost:8002/ui/
```

### Docker Compose
```yaml
services:
  ui:
    build: .
    ports:
      - "8002:8002"
    environment:
      - API_BASE=http://api:8001
      - BASE_PATH=""  # Leer für direkten Zugriff
    depends_on:
      - api
```

### Docker Compose mit Reverse Proxy
```yaml
services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
  
  ui:
    build: .
    environment:
      - API_BASE=http://api:8001
      - BASE_PATH=/ui  # Pfad-Präfix für nginx
    expose:
      - "8002"
```

### Kubernetes
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: ui
spec:
  replicas: 2
  selector:
    matchLabels:
      app: ui
  template:
    metadata:
      labels:
        app: ui
    spec:
      containers:
      - name: ui
        image: home-automation-ui:latest
        env:
          - name: API_BASE
            value: "http://api-service:8001"
          - name: BASE_PATH
            value: "/ui"  # Für Ingress
        ports:
          - containerPort: 8002
        livenessProbe:
          httpGet:
            path: /ui/health  # Mit BASE_PATH!
            port: 8002
          initialDelaySeconds: 5
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /ui/health  # Mit BASE_PATH!
            port: 8002
          initialDelaySeconds: 5
          periodSeconds: 5
        resources:
          requests:
            memory: "128Mi"
            cpu: "100m"
          limits:
            memory: "256Mi"
            cpu: "500m"
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ui-ingress
spec:
  rules:
  - host: home.example.com
    http:
      paths:
      - path: /ui
        pathType: Prefix
        backend:
          service:
            name: ui-service
            port:
              number: 8002
```

## Geänderte Dateien

1. **apps/ui/main.py**
   - `API_BASE` aus Umgebung lesen
   - `api_url()` Hilfsfunktion
   - `/health` Endpoint
   - `API_BASE` an Template übergeben

2. **apps/ui/api_client.py**
   - `fetch_devices(api_base)` benötigt Parameter
   - `fetch_layout(api_base)` benötigt Parameter

3. **apps/ui/templates/dashboard.html**
   - JavaScript verwendet `{{ api_base }}` aus Backend

## Akzeptanz-Kriterien ✓

- ✅ `print(API_BASE)` zeigt korrekten Wert beim Start
- ✅ UI funktioniert lokal ohne Codeänderung
- ✅ Mit `API_BASE=http://api:8001` ruft UI korrekt den API-Service an
- ✅ Health-Endpoint für Kubernetes verfügbar
- ✅ Keine hart codierten URLs mehr

## Vorteile

1. **Flexibilität**: API-URL per ENV konfigurierbar
2. **Docker/K8s Ready**: Service Discovery unterstützt
3. **Health Checks**: Monitoring-Integration möglich
4. **Abwärtskompatibel**: Bestehende Deployments funktionieren weiter
5. **Clean Code**: Zentrale Konfiguration statt verteilte Hardcodes