feat: migrate frontend to the new React platform

README.md

@@ -32,7 +32,7 @@ make run
 ```
 
 * Send an alert by opening [http://0.0.0.0:8889/notebooks/notebooks/send_real_alerts.ipynb](http://0.0.0.0:8889/notebooks/notebooks/send_real_alerts.ipynb)
-* Observe the alert on the frontend at [http://0.0.0.0:8050/](http://0.0.0.0:8050/)
+* Observe the alert on the frontend at [http://localhost:8080/](http://localhost:8080/)
 * Use credentials from `data/csv/API_DATA_DEV/users.csv`
 * Or check directly on the API at [http://0.0.0.0:5050/docs](http://0.0.0.0:5050/docs) with the same creds
 
@@ -43,7 +43,7 @@ make run
 * **pyro-api**: Pyronear API (uvicorn)
 * **db**: PostgreSQL database
 * **minio**: S3-compatible storage (via MinIO)
-* **frontend**: Web app (Dash)
+* **frontend**: Web app (React, [pyro-platform](https://github.com/pyronear/pyro-platform))
 * **pyro-engine**: Engine service (requires cameras, optional)
 * **reolinkdev1 / reolinkdev2**: Fake Reolink cameras sending test images
 * **notebooks**: Jupyter server to run helper notebooks
@@ -91,10 +91,11 @@ docker logs engine
 ## 🔑 Access
 
 * **API**: [http://localhost:5050/docs](http://localhost:5050/docs)
-* **Frontend (Dash app)**: [http://localhost:8050](http://localhost:8050)
+* **Frontend (React app)**: [http://localhost:8080](http://localhost:8080)
 
   * If issues: use a private browser window
   * Admin access currently does not display camera alerts, use user creds from `data/csv/users.csv`
+  * Configuration (API URL, etc.) lives in `containers/frontend/app-config.js`
 * **Notebooks**: [http://localhost:8889](http://localhost:8889)
 * **pgAdmin (db-ui)**: [http://localhost:8888/browser/](http://localhost:8888/browser/)
 

containers/frontend/app-config.js

@@ -0,0 +1,21 @@
+window.AppConfig = {
+  API_URL: 'http://localhost:5050',
+  API_TIMEOUT_MS: 2000,
+  LIVE_STREAMING_MEDIA_URL: '',
+
+  LIVE_STREAMING_TIMEOUT_SECONDS: 30,
+  CAMERAS_INACTIVITY_THRESHOLD_MINUTES: 30,
+  CAMERAS_LIST_REFRESH_INTERVAL_MINUTES: 2,
+  ALERTS_LIST_REFRESH_INTERVAL_SECONDS: 30,
+  ALERTS_PLAYER_INTERVAL_MILLISECONDS: 500,
+  ALERTS_PLAYER_CONFIDENCE_THRESHOLD: 0.15,
+  ALERTS_SOUND_FILE: 'notification-alert.mp3',
+  ALERTS_CAMERA_RANGE_KM: 30,
+  USER_GUIDE_URLS: {
+    fr: 'https://pyronear.notion.site/Guide-d-utilisation-plateforme-Pyronear-376425b63668818ebd17da60b20cc770',
+    en: 'https://pyronear.notion.site/Pyronear-Platform-User-Guide-389425b6366881da906ee38e93524db2',
+    de: 'https://pyronear.notion.site/Pyronear-Plattform-Benutzerhandbuch-389425b63668816abf44e8679fb9dd35',
+    es: 'https://pyronear.notion.site/Gu-a-de-uso-de-la-plataforma-Pyronear-389425b6366881e69fd6f6f1a414814d',
+  },
+  HISTORY_NB_ALERTS_PER_PAGE: 15,
+};

containers/frontend/sites_live_access.json

@@ -0,0 +1,5 @@
+{
+  "st-peray": ["st-peray"],
+  "test07": ["brison", "serre-de-barre"],
+  "test77": ["croix-augas", "videlles", "moret-sur-loing", "nemours"]
+}

docker-compose.yml

@@ -17,7 +17,7 @@ services:
     - S3_SECRET_KEY=${S3_SECRET_KEY}
     - S3_REGION=${S3_REGION}
     - SERVER_NAME=${SERVER_NAME}
-    - PLATFORM_URL=${PLATFORM_URL:-http://0.0.0.0:8050}
+    - PLATFORM_URL=${PLATFORM_URL:-http://localhost:8080}
     - TEMPORAL_API_URL=${TEMPORAL_API_URL:-}
     - TEMPORAL_MODEL_THRESHOLD=${TEMPORAL_MODEL_THRESHOLD:-0.45}
     - TEMPORAL_API_TOKEN=${TEMPORAL_API_TOKEN:-}
@@ -146,17 +146,16 @@ services:
       pyro_api:
         condition: service_healthy
   frontend:
-    image: pyronear/pyro-platform:latest
-    command: python index.py --host 0.0.0.0 --port 8050
+    image: pyronear/pyro-platform-react:latest
     profiles:
       - front
     ports:
-      - 8050:8050
-    environment:
-      - API_URL=${API_URL}
-      - API_LOGIN=${SUPERADMIN_LOGIN}
-      - API_PWD=${SUPERADMIN_PWD}
-      - DEBUG=FALSE
+      - 8080:8080
+    volumes:
+      # The React app runs in the browser, so API_URL in app-config.js must be
+      # reachable from the host (localhost:5050), not the compose network.
+      - ./containers/frontend/app-config.js:/usr/share/nginx/html/config/app-config.js:ro
+      - ./containers/frontend/sites_live_access.json:/usr/share/nginx/html/config/sites_live_access.json:ro
     depends_on:
       init_script:
         condition: service_started