Observer Frontend (Svelte)

Dashboard do monitorowania aplikacji SaaS z sliding window.

📁 Struktura projektu

observer-frontend/
├── src/
│   ├── App.svelte                    # Główny komponent
│   ├── app.css                       # Globalne style (zmienne CSS, layout)
│   ├── main.js                       # Entry point
│   ├── config/
│   │   └── apps.js                   # ← KONFIGURACJA APLIKACJI
│   └── lib/
│       └── components/
│           ├── Topbar.svelte         # Górny pasek
│           └── AppCard.svelte        # Kafelek aplikacji
├── public/
│   └── favicon.svg
├── index.html
├── package.json
├── vite.config.js
└── svelte.config.js

➕ Dodawanie/usuwanie aplikacji

Edytuj plik src/config/apps.js:

export const apps = [
  {
    id: 'my-app',           // unikalny identyfikator
    name: 'My Application', // nazwa wyświetlana
    url: 'https://...',     // URL (kliknięcie w nazwę)
    group: 'My Group',      // grupa do filtrowania
  },
  // ... dodaj więcej aplikacji
];

⚙️ Konfiguracja sliding window

W tym samym pliku src/config/apps.js:

export const slidingWindowConfig = {
  slots: 4,              // liczba slotów (barów) na kafelku
  intervalMinutes: 15,   // interwał między slotami
  refreshSeconds: 60,    // jak często odświeżać
};

🐧 Instalacja na Linux (krok po kroku)

1. Zainstaluj Node.js (jeśli nie masz)

# Ubuntu/Debian - NodeSource (zalecane)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# RHEL/CentOS/Fedora
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

# Sprawdź wersję
node --version    # v20.x.x
npm --version     # 10.x.x

2. Rozpakuj i zainstaluj zależności

# Rozpakuj archiwum
tar -xzvf observer-frontend.tar.gz
cd observer-frontend

# Zainstaluj zależności
npm install

3. Uruchom serwer deweloperski

npm run dev

# Otwórz w przeglądarce: http://localhost:5173

4. Build produkcyjny

npm run build

# Pliki statyczne w: dist/

🔗 Integracja z backendem FastAPI

Opcja A: Osobne serwery (dev)

Frontend na porcie 5173, backend na 8000.
Proxy jest już skonfigurowane w vite.config.js.

# Terminal 1 - backend
cd observer
python -m uvicorn app.main:app --reload

# Terminal 2 - frontend
cd observer-frontend
npm run dev

Opcja B: Zintegrowane (produkcja)

Build frontend → kopiuj do static/ backendu.

# Build
npm run build

# Kopiuj do backendu
cp -r dist/* ../observer/static/

# Serwuj przez FastAPI
python -m uvicorn app.main:app

🎨 Dostosowanie stylów

Kolory (app.css)

:root {
  --color-ok: #22c55e;        /* Zielony - OK */
  --color-error: #ef4444;     /* Czerwony - Error */
  --color-pending: #6b7280;   /* Szary - Brak danych */
  --color-kyndryl-red: #FF462D;
}

Motywy

• .dark - ciemny motyw (domyślny)
• .light - jasny motyw

Dodawanie fontu Everett

# Skopiuj pliki fontów
mkdir -p public/fonts
cp TWKEverett-Regular-web.woff2 public/fonts/

Dodaj do app.css:

@font-face {
  font-family: 'Everett';
  src: url('/fonts/TWKEverett-Regular-web.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

📡 Pobieranie danych z API

W App.svelte zamień mock data na fetch:

<script>
  import { onMount } from 'svelte';
  
  let apps = [];
  
  onMount(async () => {
    const response = await fetch('/api/status');
    const data = await response.json();
    apps = data.apps;
  });
  
  // Odświeżaj co 30 sekund
  setInterval(async () => {
    const response = await fetch('/api/status');
    const data = await response.json();
    apps = data.apps;
  }, 30000);
</script>

✅ Checklist przed produkcją

• Dodaj font Everett
• Podmień mock data na API
• Dodaj logo Kyndryl (SVG)
• Skonfiguruj CORS w backendzie (jeśli osobne domeny)
• Ustaw zmienne środowiskowe (API URL)