From 3839b4b3357d26db4b92b90a147d93342a90e56c Mon Sep 17 00:00:00 2001
From: chloeskt <chloe.sekkat@ensae.fr>
Date: Thu, 18 Mar 2021 08:44:08 +0100
Subject: [PATCH] feat: create alert screen pages

---
 .gitignore                    |   3 +
 app/alert_screen.py           | 229 ++++++++++++++++++++++++++++++---
 app/assets/pyro_alert_on.png  | Bin 0 -> 13229 bytes
 app/assets/pyro_fire_logo.png | Bin 0 -> 9427 bytes
 app/assets/styles.css         |  67 ++++++++++
 app/homepage.py               |   6 -
 app/main.py                   | 236 +++++++++++++++++++++++++++-------
 app/navbar.py                 |  21 +++
 app/utils.py                  |   4 +-
 9 files changed, 490 insertions(+), 76 deletions(-)
 create mode 100644 app/assets/pyro_alert_on.png
 create mode 100644 app/assets/pyro_fire_logo.png
 create mode 100644 app/assets/styles.css

diff --git a/.gitignore b/.gitignore
index 34c23ff..87cf194 100644
--- a/.gitignore
+++ b/.gitignore
@@ -114,6 +114,9 @@ venv.bak/
 .spyderproject
 .spyproject
 
+# Pycharm project settings
+.idea/
+
 # Rope project settings
 .ropeproject
 
diff --git a/app/alert_screen.py b/app/alert_screen.py
index 7150de5..e2684a7 100644
--- a/app/alert_screen.py
+++ b/app/alert_screen.py
@@ -4,8 +4,8 @@
 # See LICENSE or go to <https://www.apache.org/licenses/LICENSE-2.0.txt> for full license details.
 
 """
-The following Python file is dedicated to the big screen of the web application.
-The big screen corresponds to a web page which will be displayed on a big screen in the CODIS room. There will be no
+The following Python file is dedicated to the alert screen of the web application.
+The alert screen corresponds to a web page which will be displayed on a big screen in the CODIS room. There will be no
 interaction with the user. The main use of this page is to display a "sober" screen when there are no alerts. When an
 alert pops out, the screen will automatically change to display various information.
 
@@ -20,34 +20,225 @@
 import dash_core_components as dcc
 import dash_html_components as html
 
-# From navbar.py to add the navigation bar at the top of the page
-from navbar import Navbar
 
-# Importing alerts map builder from alerts.py
-from alerts import build_alerts_map
+# ----------------------------------------------------------------------------------------------------------------------
+# CONTENT
+def build_no_alert_detected_screen():
+    """
+    The following function builds the no alert screen.
+    """
+    # background image as style
+    style = {
+        "backgroundImage": 'url("/assets/pyro_alert_off.png")',
+        "backgroundRepeat": "no-repeat",
+        "backgroundPosition": "center",
+        "backgroundSize": "cover",
+        "position": "fixed",
+        "height": "100%",
+        "width": "100%",
+    }
 
-# Importing risks map and opacity slider builders from risks.py
-from risks import build_risks_map, build_opacity_slider
+    return style
 
-# Importing plotly fig objects from graphs.py
-from graphs import generate_meteo_fig
 
-# Importing layer style button builder and fetched API data from utils.py
-from utils import build_layer_style_button, build_live_alerts_metadata
+def build_alert_detected_screen(img_url, alert_metadata, last_alert):
+    """
+    This function is used in the main.py file to create the alert screen when its on, i.e. when there is an alert
+    ongoing.
 
+    It takes as arguments:
 
-# ----------------------------------------------------------------------------------------------------------------------
-# CONTENT
+    - 'img_url': the URL address of the alert frame to be displayed on the left of the map;
+    - 'alert_metadata': a dictionary containing metadata about the ongoing alert
+    - 'last_alert': pd.DataFrame of the last alert
 
+    All these inputs are instantiated in the main.py file via a call to the API.
+    """
+    # Get lat and lon from last_alert
+    lat, lon = last_alert["lat"], last_alert["lon"]
+
+    # Get device id for last_alert
+    device_id = last_alert["device_id"]
+
+    # Background image
+    background_image = html.Img(
+        id="alert_background",
+        src="/assets/pyro_alert_on.png",
+        style={
+            "position": "fixed",
+            "width": "100vw",
+            "height": "100vh",
+        },
+    )
+
+    # Fire icon
+    fire_icon = html.Img(
+        id="fire_icon",
+        src="/assets/pyro_fire_logo.png",
+        className="blink-image",
+        style={"height": "100%"},
+    )
+
+    # Detection frames
+    alert_frame = html.Img(
+        id="alert_frame",
+        src=img_url,
+        style={
+            "position": "relative",
+            "width": "100%",
+            "height": "100%",
+            "object-fit": "contain",
+        },
+    )
+
+    # Fire alert image div (right of the screen)
+    # Multiple frames are rendered here (to make it look like a GIF)
+    fire_images_div = html.Div(
+        id="fire_alert_div",
+        children=[
+            alert_frame,
+            dcc.Interval(id="interval-component-img-refresh", interval=3 * 1000),
+        ],
+        style={"display": "flex", "height": "100%", "width": "100%"},
+    )
+
+    # Alert metadata div
+    alert_metadata_div = html.Div(
+        children=[
+            html.P("Tour: {}".format(alert_metadata["site_name"])),
+            html.P("Coordonnées de la tour: {}, {}".format(lat, lon)),
+            html.P("Id de caméra: {}".format(device_id)),
+            html.P("Azimuth: {}".format(alert_metadata["azimuth"])),
+        ]
+    )
+
+    # Fire text div (left part of screen)
+    fire_text_div = html.Div(
+        id="fire_text_div",
+        children=[
+            html.Div(
+                html.P(
+                    "DFCI: KD62D6.5",
+                ),
+                style={
+                    "font-size": "2vw",
+                    "color": "#054546",
+                    "font-weight": "bold",
+                },
+            ),
+            html.Div(
+                alert_metadata_div,
+                style={
+                    "font-size": "1.75vw",
+                    "color": "#054546",
+                },
+            ),
+        ],
+        style={
+            "margin-top": "5%",
+        },
+    )
+
+    # Final layout: one row containing 2 columns, and each column contains two rows
+    layout_div = [
+        background_image,
+        dbc.Row(
+            children=[
+                dbc.Col(
+                    id="col_fire_text",
+                    children=[
+                        dbc.Row(
+                            id="fire_icon_rwo",
+                            children=fire_icon,
+                            style={
+                                "display": "flex",
+                                "justify-content": "center",
+                                "height": "30%",
+                            },
+                        ),
+                        dbc.Row(
+                            id="fire_text_row",
+                            children=fire_text_div,
+                            style={
+                                "display": "flex",
+                                "justify-content": "center",
+                                "margin-right": "2.5%",
+                            },
+                        ),
+                    ],
+                    style={
+                        "width": "50%",
+                        "margin": "2.5%",
+                    },
+                ),
+                dbc.Col(
+                    id="col_image_fire",
+                    children=[
+                        dbc.Row(
+                            html.Div(
+                                html.Div(
+                                    html.P("DÉPART DE FEU"),
+                                    style={
+                                        "font-size": "4vw",
+                                        "color": "#fd4848",
+                                        "font-weight": "bold",
+                                    },
+                                    className="blink-image",
+                                ),
+                            ),
+                            style={
+                                "display": "flex",
+                                "justify-content": "center",
+                                "padding-bottom": "7%",
+                            },
+                        ),
+                        dbc.Row(
+                            id="fire_images_row",
+                            children=fire_images_div,
+                            style={
+                                "display": "flex",
+                                "justify-content": "center",
+                                "margin-right": "2.5%",
+                            },
+                        ),
+                    ],
+                    style={
+                        "width": "50%",
+                        "margin": "2.5%",
+                    },
+                ),
+            ],
+            style={
+                "height": "100%",
+            },
+        ),
+    ]
+
+    style = {
+        "height": "100%",
+        "width": "100%",
+        "position": "fixed",
+    }
+
+    return layout_div, style
 
 
 # ----------------------------------------------------------------------------------------------------------------------
 # App layout
-# The following block gathers elements defined above and returns them via the BigScreen function
-
-
-def Bigscreen():
+# The following block gathers elements defined above and returns them via the alert_screen function
+def alert_screen():
     """
     The following function is used in the main.py file to build the layout of the big screen page.
     """
-    raise NotImplementedError
+    layout = html.Div(
+        children=[
+            dcc.Interval(id="interval-component-alert-screen", interval=3 * 1000),
+            html.Div(id="core_layout_alert_screen", children=[]),
+        ],
+        style={
+            "height": "100%",
+            "width": "100%",
+            "position": "fixed",
+        },
+    )
+    return layout
diff --git a/app/assets/pyro_alert_on.png b/app/assets/pyro_alert_on.png
new file mode 100644
index 0000000000000000000000000000000000000000..466787ac30495933c5b2c020956b8d24b186458c
GIT binary patch
literal 13229
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

literal 0
HcmV?d00001

diff --git a/app/assets/pyro_fire_logo.png b/app/assets/pyro_fire_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce792ae78c5e37d01fcbd8bcdc98ae81ba26d29e
GIT binary patch
literal 9427
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
Z@jq&J`!LU3Qz!rc002ovPDHLkV1lgb{9*tA

literal 0
HcmV?d00001

diff --git a/app/assets/styles.css b/app/assets/styles.css
new file mode 100644
index 0000000..c02860a
--- /dev/null
+++ b/app/assets/styles.css
@@ -0,0 +1,67 @@
+/* Firefox old */
+@-moz-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* IE */
+/* csslint ignore:start */
+@-ms-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+/* csslint ignore:end */
+
+/* Opera and prob css3 final iteration */
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.blink-image {
+  -moz-animation: blink normal 1s infinite ease-in-out; /* Firefox */
+  -webkit-animation: blink normal 1s infinite ease-in-out; /* Webkit */
+  -ms-animation: blink normal 1s infinite ease-in-out; /* IE */
+  animation: blink normal 1s infinite ease-in-out; /* Opera and prob css3 final iteration */
+}
diff --git a/app/homepage.py b/app/homepage.py
index 2b96cd9..8ec6648 100644
--- a/app/homepage.py
+++ b/app/homepage.py
@@ -320,12 +320,6 @@ def Homepage():
                     # Map object added here
                     html.Div(build_alerts_map(), id='hp_map'),
 
-                    # Interval object triggering api calls every 10 seconds
-                    dcc.Interval(
-                        id='interval-component',
-                        interval=10 * 1000,  # Timestep in milliseconds
-                        n_intervals=0),
-
                     # Two placeholders updated by callbacks in main.py to trigger a change in map style
                     html.Div(id='map_style_btn_switch_view'),   # Associated with the main map style button
                     html.Div(id='alert_btn_switch_view'),   # Associated with the alert banner in risks mode
diff --git a/app/main.py b/app/main.py
index f440483..0817185 100644
--- a/app/main.py
+++ b/app/main.py
@@ -10,7 +10,7 @@
 
 "python app/main.py"
 
-It is built around 4 main sections:
+It is built around 5 main sections:
 
 - Imports
 
@@ -21,45 +21,41 @@
     - The "Alerts and Infrastructure" view
     - The "Risk Score" view
     - The homepage
+    - The alert screen page
 
 - Running the web-app server, which allows to launch the app via the Terminal command.
 """
 
-
 # ----------------------------------------------------------------------------------------------------------------------
 # IMPORTS
 
 # General imports
-import pandas as pd
-from flask_caching import Cache
-import config as cfg  # Cf. config.py file
-
-# Importing the pyro-API client
-from services import api_client
 
 # Main Dash imports, used to instantiate the web-app and create callbacks (ie. to generate interactivity)
 import dash
-from dash.dependencies import Input, Output, State
-from dash.exceptions import PreventUpdate
-
+import dash_bootstrap_components as dbc
 # Various modules provided by Dash to build the page layout
 import dash_core_components as dcc
 import dash_html_components as html
-import dash_bootstrap_components as dbc
 import dash_leaflet as dl
+import pandas as pd
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+from flask_caching import Cache
 
+import config as cfg  # Cf. config.py file
+from alert_screen import alert_screen, build_no_alert_detected_screen, build_alert_detected_screen
+from alerts import define_map_zoom_center, build_alerts_elements
 # From homepage.py, we import the main layout instantiation function
 from homepage import Homepage
-
 # From other Python files, we import some functions needed for interactivity
 from homepage import choose_map_style, display_alerts_frames
-from alerts import define_map_zoom_center, build_alerts_elements
 from risks import build_risks_geojson_and_colorbar
-from alert_screen import alert_screen
-from utils import choose_layer_style, build_info_box, build_info_object,\
+# Importing the pyro-API client
+from services import api_client
+from utils import choose_layer_style, build_info_box, build_info_object, \
     build_live_alerts_metadata, build_historic_markers, build_legend_box
 
-
 # ----------------------------------------------------------------------------------------------------------------------
 # APP INSTANTIATION & OVERALL LAYOUT
 
@@ -69,11 +65,24 @@
 # We define a few attributes of the app object
 app.title = 'Pyronear - Monitoring platform'
 app.config.suppress_callback_exceptions = True
-server = app.server   # Gunicorn will be looking for the server attribute of this module
-
-# We create a rough layout, filled with the content of the homepage
-app.layout = html.Div([dcc.Location(id='url', refresh=False),
-                       html.Div(id='page-content')])
+server = app.server  # Gunicorn will be looking for the server attribute of this module
+
+# We create a rough layout, filled with the content of the homepage/alert page
+app.layout = html.Div(
+    [
+        dcc.Location(id="url", refresh=False),
+        html.Div(id="page-content", style={"height": "100%"}),
+        # Interval component to generate call to API every 10 seconds
+        dcc.Interval(
+            id="interval-component-homepage",
+            interval=10 * 1000
+        ),
+        # Hidden div to keep a record of live alerts data
+        dcc.Store(id="store_live_alerts_data", storage_type="memory"),
+        dcc.Store(id="last_displayed_event_id", storage_type="memory"),
+        dcc.Store(id="images_url_current_alert", storage_type="session", data={}),
+    ]
+)
 
 # Cache configuration
 cache = Cache(app.server, config={
@@ -95,7 +104,7 @@
 
 @app.callback(
     Output("page-content", "children"),
-    Input("url", "pathname"),
+    Input("url", "pathname")
 )
 def display_page(pathname):
     """
@@ -103,8 +112,7 @@ def display_page(pathname):
     thanks to the instantiation functions built in the various .py files.
     """
     if pathname == "/alert_screen":
-        return alert_screen(alert_metadata)
-
+        return alert_screen()
     else:
         return Homepage()
 
@@ -149,6 +157,22 @@ def change_layer_style(n_clicks=None):
     return choose_layer_style(n_clicks)
 
 
+@app.callback(
+    Output("store_live_alerts_data", "data"),
+    Input('interval-component-homepage', 'n_intervals')
+)
+def update_alert_data(interval):
+    """
+    The following function is used to update the div containing live alert data from API.
+    """
+    # Fetching live alerts where is_acknowledged is False
+    response = api_client.get_ongoing_alerts().json()
+    all_alerts = pd.DataFrame(response)
+    live_alerts = all_alerts.loc[~all_alerts["is_acknowledged"]]
+
+    return live_alerts.to_json()
+
+
 # ----------------------------------------------------------------------------------------------------------------------
 # Callbacks related to the "Alerts and Infrastructure" view
 
@@ -444,45 +468,49 @@ def change_map_style_main(map_style_button_input, alert_button_input, map_style_
 
 
 @app.callback(
-    [Output('img_url', 'children'),
-     Output('live_alert_header_btn', 'children'),
-     Output('live_alerts_marker', 'children')],
-    Input('interval-component', 'n_intervals'),
-    State('map_style_button', 'children')
+    [
+        Output("img_url", "children"),
+        Output("live_alert_header_btn", "children"),
+        Output("live_alerts_marker", "children"),
+    ],
+    Input("store_live_alerts_data", "data"),
+    State("map_style_button", "children")
 )
-def fetch_alert_status_metadata(n_intervals, map_style_button_label):
+def update_style_components_with_alert_metadata(
+        live_alerts, map_style_button_label
+):
     """
-    -- Fetching and refreshing alerts data --
+    -- Updating style components with corresponding alerts data --
 
-    This callback takes as input the 'n_intervals' attribute of the interval component,
-    which acts as a timer with the number of intervals increasing by 1 every 10 seconds.
+    This callback takes as input "live_alerts" which is the json object containing all live alerts. This json is
+    retrieved thanks to every 10s call to the API.
 
     It also takes as input the label of the button that allows users to change the style of the map (but as a 'State'
     mode, so that the callback is not triggered by a change in this label), in order to deduce the style of the map that
     the user is currently looking at.
 
-    Each time it is triggered, the callback makes a call to the API to get all ongoing alerts,
-    filters out those which have been already acknowledged and returns several elements:
+    Each time it is triggered, the callback uses the data of all ongoing alerts which are stored in
+    "store_live_alerts_data" and returns several elements:
 
     - it stores the URL address of the frame associated with the last alert;
-    - it creates the elements that signall the alert around the map (banner);
+    - it creates the elements that signal the alert around the map (banner);
     - and instantiates the alert markers on the map.
 
     To build these elements, it relies on the build_alerts_elements imported from alerts.
-    scheduling API metadata fetches and defining alert status
     """
 
     # Deducing the style of the map in place from the map style button label
-    if 'risques' in map_style_button_label.lower():
-        map_style = 'alerts'
+    if "risques" in map_style_button_label.lower():
+        map_style = "alerts"
 
-    elif 'alertes' in map_style_button_label.lower():
-        map_style = 'risks'
+    elif "alertes" in map_style_button_label.lower():
+        map_style = "risks"
 
-    # Fetching live alerts where is_acknowledged is False
-    response = api_client.get_ongoing_alerts().json()
-    all_alerts = pd.DataFrame(response)
-    live_alerts = all_alerts.loc[~all_alerts['is_acknowledged']]
+    # Get live alerts data
+    if live_alerts is None:
+        raise PreventUpdate
+
+    live_alerts = pd.read_json(live_alerts)
 
     # Defining the alert status
     if live_alerts.empty:
@@ -496,10 +524,10 @@ def fetch_alert_status_metadata(n_intervals, map_style_button_label):
         alert_status = 1
 
         # Fetching the last alert
-        last_alert = live_alerts.loc[live_alerts['id'].idxmax()]
+        last_alert = live_alerts.loc[live_alerts["id"].idxmax()]
 
         # Fetching the URL address of the frame associated with the last alert
-        img_url = api_client.get_media_url(last_alert['media_id']).json()["url"]
+        img_url = api_client.get_media_url(last_alert["media_id"]).json()["url"]
 
         return build_alerts_elements(img_url, alert_status, alert_metadata, map_style)
 
@@ -529,7 +557,7 @@ def display_alert_frame_metadata(n_clicks_marker, img_url):
 
 
 @app.callback(
-    Output('interval-component', 'disabled'),
+    Output('interval-component-homepage', 'disabled'),
     Input("alert_marker_{}".format(alert_id), 'n_clicks')
 )
 def callback_func_start_stop_interval(n_clicks):
@@ -563,11 +591,121 @@ def callback_func_start_stop_interval(n_clicks):
 #     return build_alerts_elements(alert_status, alert_metadata)
 
 
+# ----------------------------------------------------------------------------------------------------------------------
+# Callbacks related to alert_screen page
+@app.callback(
+    [
+        Output("core_layout_alert_screen", "children"),
+        Output("core_layout_alert_screen", "style"),
+        Output("last_displayed_event_id", "data"),
+    ],
+    Input("interval-component-alert-screen", "n_intervals"),
+    [
+        State("store_live_alerts_data", "data"),
+        State("last_displayed_event_id", "data"),
+    ],
+)
+def update_alert_screen(n_intervals, live_alerts, last_displayed_event_id):
+    """
+    -- Update elements related to the Alert Screen page when the interval component "alert-screen" is triggered --
+    """
+    if live_alerts is None:
+        style_to_display = build_no_alert_detected_screen()
+        return (
+            [{}],
+            style_to_display,
+            last_displayed_event_id
+        )
+
+    else:
+        # Fetching the last alert
+        live_alerts = pd.read_json(live_alerts)
+        last_alert = live_alerts.loc[live_alerts["id"].idxmax()]
+        last_event_id = str(last_alert["event_id"])
+
+        # Fetching the URL address of the frame associated with the last alert
+        img_url = api_client.get_media_url(last_alert["media_id"]).json()["url"]
+
+        if last_event_id == last_displayed_event_id:
+            # the alert is related to an event id which has already been displayed
+            # need to send the img_url to the GIF
+            raise PreventUpdate
+        else:
+            # new event, not been displayed yet
+            layout_div, style_to_display = build_alert_detected_screen(
+                img_url, alert_metadata, last_alert
+            )
+            return layout_div, style_to_display, last_event_id
+
+
+@app.callback(
+    Output("images_url_current_alert", "data"),
+    Input("interval-component-homepage", "n_intervals"),
+    [
+        State("store_live_alerts_data", "data"),
+        State("images_url_current_alert", "data")
+    ],
+)
+def update_dict_of_images(n_intervals, live_alerts, dict_images_url_current_alert):
+    """
+    -- Update the dictionary of images of ongoing events --
+
+    Dict where keys are event id and value is a list of all urls related to the same event.
+    These url come from the API calls, triggered by "interval-component-homepage".
+    """
+    if live_alerts is None:
+        raise PreventUpdate
+
+    else:
+        # Fetching the last alert
+        live_alerts = pd.read_json(live_alerts)
+        last_alert = live_alerts.loc[live_alerts["id"].idxmax()]
+        last_event_id = str(last_alert["event_id"])
+
+        # Fetching the URL address of the frame associated with the last alert
+        img_url = api_client.get_media_url(last_alert["media_id"]).json()["url"]
+
+        if last_event_id not in dict_images_url_current_alert.keys():
+            dict_images_url_current_alert[last_event_id] = []
+        dict_images_url_current_alert[last_event_id].append(img_url)
+
+        return dict_images_url_current_alert
+
+
+@app.callback(
+    Output("alert_frame", "src"),
+    Input("interval-component-img-refresh", "n_intervals"),
+    [
+        State("last_displayed_event_id", "data"),
+        State("images_url_current_alert", "data")
+    ]
+)
+def update_images_for_doubt_removal(n_intervals, last_displayed_event_id, dict_images_url_current_alert):
+    """
+    -- Create a pseudo GIF --
+
+    Created from the x frames we received each time there is an alert related to the same event.
+    The urls of these images are stored in a dictionary "images_url_current_alert".
+    """
+    if last_displayed_event_id not in dict_images_url_current_alert.keys():
+        raise PreventUpdate
+
+    list_url_images = dict_images_url_current_alert[last_displayed_event_id]
+    # Only for demo purposes: will be removed afterwards
+    list_url_images = [
+        "http://placeimg.com/625/225/nature",
+        "http://placeimg.com/625/225/animals",
+        "http://placeimg.com/625/225/nature"
+    ]
+    return list_url_images[n_intervals % len(list_url_images)]
+
+
 # ----------------------------------------------------------------------------------------------------------------------
 # RUNNING THE WEB-APP SERVER
 
 if __name__ == '__main__':
     import argparse
+
     parser = argparse.ArgumentParser(description='Pyronear web-app',
                                      formatter_class=argparse.ArgumentDefaultsHelpFormatter)
 
diff --git a/app/navbar.py b/app/navbar.py
index b06a741..664a1af 100644
--- a/app/navbar.py
+++ b/app/navbar.py
@@ -58,6 +58,26 @@ def Navbar(dropdown=False):
         className="mx-auto order-0",
         style={'color': 'white', 'align': 'center', 'justify': 'center'})
 
+    # Alert monitoring screen, to be displayed in CODIS
+    alert_screen_button = dbc.NavLink(
+        children=[
+            html.Div(
+                children=[
+                    html.I(
+                        className="mx-auto order-0",
+                    ),
+                    html.Span("Ecran de monitoring"),
+                ]
+            )
+        ],
+        href="alert_screen",
+        style={
+            "font-size": "15px",
+            "color": "white",
+        },
+        className="btn btn-warning"
+    )
+
     # Navbar
     navbar = dbc.Navbar(
         [
@@ -73,6 +93,7 @@ def Navbar(dropdown=False):
             ),
             dbc.NavbarToggler(id="navbar-toggler"),
             dbc.Collapse([user_item, dropdown], id="navbar-collapse", navbar=True),
+            html.Div(alert_screen_button)
         ],
         color="black",
         dark=True,
diff --git a/app/utils.py b/app/utils.py
index ff2561f..52d31b1 100644
--- a/app/utils.py
+++ b/app/utils.py
@@ -271,12 +271,12 @@ def build_live_alerts_metadata():
     """
 
     alert_metadata = {
-        "id": 0,
+        "id": 112,
         "created_at": "2020-11-25T15:22:21.690Z",
         "media_url": "https://photos.lci.fr/images/613/344/photo-incendie-generac-gard-e8f2d9-0@1x.jpeg",
         "lat": 44.765181,
         "lon": 4.51488,
-        "event_id": 0,
+        "event_id": 79,
         "azimuth": "49.2°",
         "site_name": "Serre de pied de Boeuf",
         "type": "start",