feat(uti): Add offcanvas to stats

Change-Id: I5d807944b0158e51998bfc709a87d9d6c826112c
Signed-off-by: Tibor Frank <tifrank@cisco.com>

diff --git a/resources/tools/dash/app/pal/stats/layout.py b/resources/tools/dash/app/pal/stats/layout.py
index 18f7b69..0ae83cf 100644 (file)
--- a/resources/tools/dash/app/pal/stats/layout.py
+++ b/resources/tools/dash/app/pal/stats/layout.py
@@ -19,6 +19,7 @@ import dash_bootstrap_components as dbc
 
 from dash import dcc
 from dash import html
 
 from dash import dcc
 from dash import html

+from dash import callback_context, no_update

 from dash import Input, Output
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from dash import Input, Output
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError


@@ -48,7 +49,7 @@ class Layout:
         data_stats, data_mrr, data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
         data_stats, data_mrr, data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True

-        ).read_stats(days=180)
+        ).read_stats()

 
         df_tst_info = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)
 
 
         df_tst_info = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)
 


@@ -157,16 +158,22 @@ class Layout:
                             self._add_navbar(),
                         ]
                     ),
                             self._add_navbar(),
                         ]
                     ),

+                    dcc.Loading(
+                        dbc.Offcanvas(
+                            class_name="w-50",
+                            id="offcanvas-metadata",
+                            title="Detailed Information",
+                            placement="end",
+                            is_open=False,
+                            children=[
+                                dbc.Row(id="row-metadata")
+                            ]
+                        )
+                    ),

                     dbc.Row(
                         id="row-main",
                         class_name="g-0",
                         children=[
                     dbc.Row(
                         id="row-main",
                         class_name="g-0",
                         children=[

-                            dcc.Store(
-                                id="selected-tests"
-                            ),
-                            dcc.Store(
-                                id="control-panel"
-                            ),

                             self._add_ctrl_col(),
                             self._add_plotting_col(),
                         ]
                             self._add_ctrl_col(),
                             self._add_plotting_col(),
                         ]


@@ -255,7 +262,9 @@ class Layout:
                         dcc.Loading(children=[
                             dbc.Button(
                                 id="btn-download-data",
                         dcc.Loading(children=[
                             dbc.Button(
                                 id="btn-download-data",

-                                children=["Download Data"]
+                                children=["Download Data"],
+                                class_name="me-1",
+                                color="info"

                             ),
                             dcc.Download(id="download-data")
                         ])
                             ),
                             dcc.Download(id="download-data")
                         ])


@@ -270,25 +279,37 @@ class Layout:
         """
         return dbc.Row(
             id="row-ctrl-panel",
         """
         return dbc.Row(
             id="row-ctrl-panel",

-            class_name="g-0 p-2",
+            class_name="g-0",

             children=[
             children=[

-                dbc.Label("Choose the Trending Job"),
-                dbc.RadioItems(
-                    id="ri_job",
-                    value=self.jobs[0],
-                    options=[{"label": i, "value": i} for i in self.jobs]
+                dbc.Row(
+                    class_name="g-0 p-2",
+                    children=[
+                        dbc.Label("Choose the Trending Job"),
+                        dbc.RadioItems(
+                            id="ri_job",
+                            value=self.jobs[0],
+                            options=[
+                                {"label": i, "value": i} for i in self.jobs
+                            ]
+                        )
+                    ]

                 ),
                 ),

-                dbc.Label("Choose the Time Period"),
-                dcc.DatePickerRange(
-                    id="dpr-period",
-                    className="d-flex justify-content-center",
-                    min_date_allowed=\
-                        datetime.utcnow()-timedelta(days=180),
-                    max_date_allowed=datetime.utcnow(),
-                    initial_visible_month=datetime.utcnow(),
-                    start_date=datetime.utcnow() - timedelta(days=180),
-                    end_date=datetime.utcnow(),
-                    display_format="D MMMM YY"
+                dbc.Row(
+                    class_name="g-0 p-2",
+                    children=[
+                        dbc.Label("Choose the Time Period"),
+                        dcc.DatePickerRange(
+                            id="dpr-period",
+                            className="d-flex justify-content-center",
+                            min_date_allowed=\
+                                datetime.utcnow()-timedelta(days=180),
+                            max_date_allowed=datetime.utcnow(),
+                            initial_visible_month=datetime.utcnow(),
+                            start_date=datetime.utcnow() - timedelta(days=180),
+                            end_date=datetime.utcnow(),
+                            display_format="D MMMM YY"
+                        )
+                    ]

                 )
             ]
         )
                 )
             ]
         )


@@ -329,3 +350,63 @@ class Layout:
                 raise PreventUpdate
 
             return dcc.send_data_frame(self.data.to_csv, "statistics.csv")
                 raise PreventUpdate
 
             return dcc.send_data_frame(self.data.to_csv, "statistics.csv")

+
+        @app.callback(
+            Output("row-metadata", "children"),
+            Output("offcanvas-metadata", "is_open"),
+            Input("graph-passed", "clickData"),
+            Input("graph-duration", "clickData"),
+            prevent_initial_call=True
+        )
+        def _show_metadata_from_graphs(
+                passed_data: dict, duration_data: dict) -> tuple:
+            """
+            """
+
+            if not (passed_data or duration_data):
+                raise PreventUpdate
+
+            metadata = no_update
+            open_canvas = False
+            title = "Job Statistics"
+            trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0]
+            if trigger_id == "graph-passed":
+                graph_data = passed_data["points"][0].get("hovertext", "")
+            elif trigger_id == "graph-duration":
+                graph_data = duration_data["points"][0].get("text", "")
+            if graph_data:
+                metadata = [
+                    dbc.Card(
+                        class_name="gy-2 p-0",
+                        children=[
+                            dbc.CardHeader(children=[
+                                dcc.Clipboard(
+                                    target_id="metadata",
+                                    title="Copy",
+                                    style={"display": "inline-block"}
+                                ),
+                                title
+                            ]),
+                            dbc.CardBody(
+                                id="metadata",
+                                class_name="p-0",
+                                children=[dbc.ListGroup(
+                                    children=[
+                                        dbc.ListGroupItem(
+                                            [
+                                                dbc.Badge(
+                                                    x.split(":")[0]
+                                                ),
+                                                x.split(": ")[1]
+                                            ]
+                                        ) for x in graph_data.split("<br>")
+                                    ],
+                                    flush=True),
+                                ]
+                            )
+                        ]
+                    )
+                ]
+                open_canvas = True
+
+            return metadata, open_canvas

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index ac866cf..fa5f821 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -68,12 +68,12 @@ class Layout:
         data_mrr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
         data_mrr = Data(
             data_spec_file=self._data_spec_file,
             debug=True

-        ).read_trending_mrr(days=180)
+        ).read_trending_mrr()

 
         data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True
 
         data_ndrpdr = Data(
             data_spec_file=self._data_spec_file,
             debug=True

-        ).read_trending_ndrpdr(days=180)
+        ).read_trending_ndrpdr()

 
         self._data = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)
 
 
         self._data = pd.concat([data_mrr, data_ndrpdr], ignore_index=True)