Introduces camera status page (#196)

* docs: Added code of conduct

* Merge branch 'local-timezone' into page-camera-status

* style: Added various svg for PR

* style: Updated CSS new classes & update

* config: Added langage params & cam inactivity threshold

* feat: Updated to handle multipage with lang as url param

* feat: Updated navbar to handle language as url param & pyronear logo button to homepage

* style: Updated alert card style

* feat: Added api watchers for cameras to handle cameras status

* Feat: Added callback to handle language switch

* feat: Added camera status page

* fix: clean

Author: fe51

app/assets/css/style.css

@@ -58,16 +58,19 @@ a.no-underline {
   text-align: center;
 }
 
-.alert-card {
+.pyronear-card {
   background-color: #FFEBD6;
-  margin-bottom: 12px;
-  padding: 8px;
   border-radius: 8px;
-  width: 100%;
   border: 0px solid;
   box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
+.alert-card {
+  margin-bottom: 12px;
+  padding: 8px;
+  width: 100%;
+}
+
 #alert-information-styling-container {
   display: flex;
   flex-direction: column;
@@ -81,3 +84,15 @@ a.no-underline {
 .alert-information-title {
   font-weight: bold;
 }
+
+.navbar-button{
+  color: white;
+  border: 1px solid white;
+
+}
+
+.navbar-button:hover{
+  color: white;
+  border: 1px solid white;
+  background-color: #03383c;
+}

app/assets/images/camera.svg

@@ -15,6 +15,7 @@
 from main import app
 
 import config as cfg
+from pages.cameras_status import display_cam_cards
 from services import api_client, get_token
 from utils.data import process_bbox
 
@@ -150,6 +151,24 @@ def get_cameras(user_token):
     return cameras.to_json(orient="split")
 
 
+@app.callback(
+    Output("camera-cards-container", "children"),
+    [Input("main_api_fetch_interval", "n_intervals"), Input("api_cameras", "data")],
+    State("user_token", "data"),
+)
+def api_cameras_watcher(n_intervals, api_cameras, user_token):
+
+    logger.info("Get cameras data")
+    if user_token is not None:
+        api_client.token = user_token
+
+    cameras = pd.DataFrame(api_client.fetch_cameras().json())
+    cameras["last_active_at"] = pd.to_datetime(cameras["last_active_at"]).dt.strftime("%Y-%m-%d %H:%M")
+    cameras = cameras.sort_values("name")
+
+    return display_cam_cards(cameras)
+
+
 @app.callback(
     Output("api_sequences", "data"),
     [Input("main_api_fetch_interval", "n_intervals"), Input("api_cameras", "data")],

app/assets/images/clock-error.svg

@@ -5,6 +5,7 @@
 
 import ast
 import json
+import urllib
 from io import StringIO
 
 import dash
@@ -21,6 +22,43 @@
 logger = logging_config.configure_logging(cfg.DEBUG, cfg.SENTRY_DSN)
 
 
+@app.callback(Output("camera_status_button_text", "children"), Input("url", "search"))
+def update_nav_bar_language(search):
+
+    translate = {
+        "fr": {
+            "camera_status": "Statut des Caméras",
+        },
+        "es": {
+            "camera_status": "Estado de las Cámaras",
+        },
+    }
+
+    params = dict(urllib.parse.parse_qsl(search.lstrip("?"))) if search else {}
+
+    lang = params.get("lang", cfg.DEFAULT_LANGUAGE)
+
+    return [translate[lang]["camera_status"]]
+
+
+@app.callback(Output("url", "search"), [Input("btn-fr", "n_clicks"), Input("btn-es", "n_clicks")])
+def update_language_url(fr_clicks, es_clicks):
+    # Check which button has been clicked
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return ""
+
+    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
+
+    # update the URL according to the button clicked
+    if button_id == "btn-fr":
+        return "?lang=fr"
+    elif button_id == "btn-es":
+        return "?lang=es"
+
+    return ""
+
+
 # Create event list
 @app.callback(
     Output("sequence-list-container", "children"),

app/assets/images/clock.svg

@@ -10,21 +10,42 @@
 pyro_logo = "https://pyronear.org/img/logo_letters_orange.png"
 
 
-def Navbar():
+def Navbar(lang="fr"):
     navbar = dbc.Navbar(
         [
             dbc.Row(
                 [
-                    dbc.Col(html.Img(src=pyro_logo, height="30px"), width=3),
+                    dbc.Col(
+                        html.A(
+                            html.Img(src=pyro_logo, height="30px"),
+                            href="/",
+                        ),
+                        width=3,
+                    ),
                 ],
                 align="center",
             ),
             html.Div(
                 className="ml-auto",
                 style={"display": "flex", "flexDirection": "row", "gap": "10px", "marginRight": "10px"},
                 children=[
-                    dbc.Button(["🇫🇷", " FR"], href="/fr", color="light", className="mr-2"),
-                    dbc.Button(["🇪🇸", " ES"], href="/es", color="light"),
+                    dbc.Button(
+                        html.Div(
+                            [
+                                html.Img(
+                                    src="assets/images/camera.svg",
+                                    style={"width": "20px", "height": "20px", "marginRight": "5px"},
+                                ),
+                                html.P(children=[], style={"margin": "0"}, id="camera_status_button_text"),
+                            ],
+                            style={"display": "flex", "alignItems": "center"},
+                        ),
+                        href="/cameras-status",
+                        outline=True,
+                        className="navbar-button",
+                    ),
+                    dbc.Button(["🇫🇷", " FR"], id="btn-fr", color="light", className="mr-2"),
+                    dbc.Button(["🇪🇸", " ES"], id="btn-es", color="light"),
                 ],
             ),
         ],

app/assets/images/no-image.svg

@@ -4,7 +4,7 @@
 # See LICENSE or go to <https://www.apache.org/licenses/LICENSE-2.0> for full license details.
 
 import os
-from typing import Optional
+from typing import List, Optional
 
 from dotenv import load_dotenv
 
@@ -19,6 +19,9 @@
 LOGIN: bool = os.environ.get("LOGIN", "true").lower() == "true"
 PYRORISK_FALLBACK: str = "https://github.com/pyronear/pyro-risks/releases/download/v0.1.0-data/pyrorisk_20200901.json"
 GEOJSON_FILE: str = "https://github.com/pyronear/pyro-risks/releases/download/v0.1.0-data/departements.geojson"
+AVAILABLE_LANGS: List[str] = ["fr", "es"]
+DEFAULT_LANGUAGE: str = "fr"
+CAMERA_INACTIVITY_THRESHOLD_MINUTES: int = 30
 # Sentry
 SENTRY_DSN: Optional[str] = os.getenv("SENTRY_DSN")
 SERVER_NAME: Optional[str] = os.getenv("SERVER_NAME")

app/callbacks/data_callbacks.py

@@ -3,6 +3,7 @@
 # This program is licensed under the Apache License 2.0.
 # See LICENSE or go to <https://www.apache.org/licenses/LICENSE-2.0> for full license details.
 import argparse
+import urllib.parse
 
 import callbacks.data_callbacks
 import callbacks.display_callbacks  # noqa: F401
@@ -13,6 +14,7 @@
 from main import app
 
 import config as cfg
+from pages.cameras_status import cameras_status_layout
 from pages.homepage import homepage_layout
 from pages.login import login_layout
 
@@ -26,28 +28,29 @@
 # Manage Pages
 @app.callback(
     Output("page-content", "children"),
-    [Input("url", "pathname"), Input("api_cameras", "data")],
+    [Input("url", "pathname"), Input("api_cameras", "data"), Input("url", "search")],
     State("user_token", "data"),
 )
-def display_page(pathname, api_cameras, user_token):
+def display_page(pathname, api_cameras, search, user_token):
     logger.debug(
         "display_page called with pathname: %s, user_token: %s",
         pathname,
         user_token,
     )
-    if user_token is None:
-        if pathname == "/" or pathname == "/fr" or pathname is None:
-            logger.info("No user headers found, showing login layout (language: French).")
-            return login_layout(lang="fr")
-        if pathname == "/es":
-            logger.info("No user headers found, showing login layout (language: Spanish).")
-            return login_layout(lang="es")
-    if pathname == "/" or pathname == "/fr" or pathname is None:
-        logger.info("Showing homepage layout (default language: French).")
-        return homepage_layout(user_token, api_cameras, lang="fr")
-    if pathname == "/es":
-        logger.info("Showing homepage layout (language: Spanish).")
-        return homepage_layout(user_token, api_cameras, lang="es")
+
+    params = dict(urllib.parse.parse_qsl(search.lstrip("?"))) if search else {}
+
+    lang = params.get("lang", cfg.DEFAULT_LANGUAGE)
+
+    if lang not in cfg.AVAILABLE_LANGS:
+        lang = cfg.DEFAULT_LANGUAGE
+
+    if not isinstance(user_token, str) or not user_token:
+        return login_layout(lang=lang)
+    if pathname == "/" or pathname is None:
+        return homepage_layout(user_token, api_cameras, lang=lang)
+    if pathname == "/cameras-status":
+        return cameras_status_layout(user_token, api_cameras, lang=lang)
     else:
         logger.warning("Unable to find page for pathname: %s", pathname)
         return html.Div([html.P("Unable to find this page.", className="alert alert-warning")])

app/callbacks/display_callbacks.py

@@ -0,0 +1,102 @@
+# Copyright (C) 2020-2025, Pyronear.
+
+# This program is licensed under the Apache License 2.0.
+# See LICENSE or go to <https://www.apache.org/licenses/LICENSE-2.0> for full license details.
+
+from datetime import datetime, timedelta
+
+import dash_bootstrap_components as dbc
+from dash import html
+
+import config as cfg
+from utils.display import convert_dt_to_local_tz
+
+
+def display_cam_cards(cameras):
+
+    no_cam_img_url = "assets/images/no-image.svg"
+
+    cards = []
+    for _, row in cameras.iterrows():
+
+        clock_image_src_issue = "assets/images/clock-error.svg"
+        last_active_at_style_issue = {"margin": "0", "color": "#f44336"}
+
+        if str(row["last_active_at"]) == "nan":
+            clock_image_src = clock_image_src_issue
+            last_active_at_style = last_active_at_style_issue
+        else:
+            if datetime.now() - datetime.strptime(row["last_active_at"], "%Y-%m-%d %H:%M") > timedelta(
+                minutes=cfg.CAMERA_INACTIVITY_THRESHOLD_MINUTES
+            ):
+                clock_image_src = clock_image_src_issue
+                last_active_at_style = last_active_at_style_issue
+            else:
+                clock_image_src = "assets/images/clock.svg"
+                last_active_at_style = {"margin": "0"}
+
+        card = dbc.Col(
+            dbc.Card(
+                [
+                    dbc.CardBody(
+                        [
+                            html.H4(row["name"], className="card-title"),
+                            html.Div(
+                                [
+                                    html.Img(
+                                        src=clock_image_src,
+                                        style={"width": "20px", "height": "20px", "marginRight": "5px"},
+                                    ),
+                                    html.P(
+                                        f"{convert_dt_to_local_tz(row['lat'], row['lon'], row['last_active_at'])}",
+                                        style=last_active_at_style,
+                                    ),
+                                ],
+                                style={"display": "flex", "alignItems": "center"},
+                            ),
+                        ],
+                        style={"padding": "10px"},
+                    ),
+                    dbc.CardImg(
+                        src=row["last_image"] if row["last_image"] is not None else no_cam_img_url,
+                        top=False,
+                        style={"width": "100%", "borderRadius": "0"},
+                    ),
+                ],
+                className="pyronear-card",
+            ),
+            width=6,
+            md=3,
+            xxl=2,
+            style={"marginTop": "1.5rem"},
+        )
+        cards.append(card)
+
+    return dbc.Row(cards)
+
+
+def cameras_status_layout(user_token, api_cameras, lang="fr"):
+    translate = {
+        "fr": {
+            "breadcrumb": "Dashboard des caméras",
+            "page_title": "Dashboard de l'état des caméras",
+        },
+        "es": {
+            "breadcrumb": "Panel de cámaras",
+            "page_title": "Panel de control del estado de la cámara",
+        },
+    }
+
+    return dbc.Container(
+        [
+            dbc.Breadcrumb(
+                items=[
+                    {"label": "Homepage", "href": "/", "external_link": False},
+                    {"label": translate[lang]["breadcrumb"], "active": True},
+                ],
+            ),
+            html.H1(translate[lang]["page_title"], style={"font-size": "2rem"}),
+            html.Div(id="camera-cards-container", children=[]),
+        ],
+        fluid=True,
+    )