feat(uti): Form layout

[csit.git] / resources / tools / dash / app / pal / trending / layout.py

diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index 11900c6..ac866cf 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -19,12 +19,13 @@ 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 callback_context, no_update, ALL

 from dash import Input, Output, State
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 from copy import deepcopy
 from dash import Input, Output, State
 from dash.exceptions import PreventUpdate
 from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 from copy import deepcopy

+from json import loads, JSONDecodeError

 
 from ..data.data import Data
 from .graphs import graph_trending, graph_hdrh_latency, \
 
 from ..data.data import Data
 from .graphs import graph_trending, graph_hdrh_latency, \


@@ -35,14 +36,14 @@ class Layout:
     """
     """
 
     """
     """
 

-    NO_GRAPH = {"data": [], "layout": {}, "frames": []}
+    STYLE_DISABLED = {"display": "none"}
+    STYLE_ENABLED = {"display": "inherit"}

 
     CL_ALL_DISABLED = [{
         "label": "All",
         "value": "all",
         "disabled": True
     }]
 
     CL_ALL_DISABLED = [{
         "label": "All",
         "value": "all",
         "disabled": True
     }]

-

     CL_ALL_ENABLED = [{
         "label": "All",
         "value": "all",
     CL_ALL_ENABLED = [{
         "label": "All",
         "value": "all",


@@ -67,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=5)
+        ).read_trending_mrr(days=180)

 
         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=14)
+        ).read_trending_ndrpdr(days=180)

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


@@ -154,6 +155,7 @@ class Layout:
                     ),
                     dcc.Loading(
                         dbc.Offcanvas(
                     ),
                     dcc.Loading(
                         dbc.Offcanvas(

+                            class_name="w-50",

                             id="offcanvas-metadata",
                             title="Throughput And Latency",
                             placement="end",
                             id="offcanvas-metadata",
                             title="Throughput And Latency",
                             placement="end",


@@ -264,48 +266,54 @@ class Layout:
             class_name="g-0 p-2",
             children=[
                 dbc.Row(
             class_name="g-0 p-2",
             children=[
                 dbc.Row(

-                    class_name="gy-1",
+                    class_name="g-0",

                     children=[
                     children=[

-                        dbc.Label(
-                            "Physical Test Bed Topology, NIC and Driver",
-                            class_name="p-0"
-                        ),
-                        dbc.Select(
-                            id="dd-ctrl-phy",
-                            placeholder="Select a Physical Test Bed Topology...",
-                            options=[
-                                {"label": k, "value": k} for k in self.spec_tbs.keys()
+                        dbc.InputGroup(
+                            [
+                                dbc.InputGroupText("Infra"),
+                                dbc.Select(
+                                    id="dd-ctrl-phy",
+                                    placeholder="Select a Physical Test Bed Topology...",
+                                    options=[
+                                        {"label": k, "value": k} for k in self.spec_tbs.keys()
+                                    ],
+                                ),

                             ],
                             ],

+                            class_name="mb-3",

                             size="sm",
                         ),
                     ]
                 ),
                 dbc.Row(
                             size="sm",
                         ),
                     ]
                 ),
                 dbc.Row(

-                    class_name="gy-1",
+                    class_name="g-0",

                     children=[
                     children=[

-                        dbc.Label(
-                            "Area",
-                            class_name="p-0"
-                        ),
-                        dbc.Select(
-                            id="dd-ctrl-area",
-                            placeholder="Select an Area...",
-                            disabled=True,
+                        dbc.InputGroup(
+                            [
+                                dbc.InputGroupText("Area"),
+                                dbc.Select(
+                                    id="dd-ctrl-area",
+                                    placeholder="Select an Area...",
+                                    disabled=True,
+                                ),
+                            ],
+                            class_name="mb-3",

                             size="sm",
                         ),
                     ]
                 ),
                 dbc.Row(
                             size="sm",
                         ),
                     ]
                 ),
                 dbc.Row(

-                    class_name="gy-1",
+                    class_name="g-0",

                     children=[
                     children=[

-                        dbc.Label(
-                            "Test",
-                            class_name="p-0"
-                        ),
-                        dbc.Select(
-                            id="dd-ctrl-test",
-                            placeholder="Select a Test...",
-                            disabled=True,
+                        dbc.InputGroup(
+                            [
+                                dbc.InputGroupText("Test"),
+                                dbc.Select(
+                                    id="dd-ctrl-test",
+                                    placeholder="Select a Test...",
+                                    disabled=True,
+                                ),
+                            ],
+                            class_name="mb-3",

                             size="sm",
                         ),
                     ]
                             size="sm",
                         ),
                     ]


@@ -401,14 +409,15 @@ class Layout:
                     ]
                 ),
                 dbc.Row(
                     ]
                 ),
                 dbc.Row(

-                    class_name="gy-1",
+                    class_name="gy-1 p-0",

                     children=[
                         dbc.ButtonGroup(
                             [
                                 dbc.Button(
                                     id="btn-ctrl-add",
                                     children="Add Selected",
                     children=[
                         dbc.ButtonGroup(
                             [
                                 dbc.Button(
                                     id="btn-ctrl-add",
                                     children="Add Selected",

-                                    color="secondary",
+                                    class_name="me-1",
+                                    color="info"

                                 )
                             ],
                             size="md",
                                 )
                             ],
                             size="md",


@@ -420,6 +429,7 @@ class Layout:
                     children=[
                         dcc.DatePickerRange(
                             id="dpr-period",
                     children=[
                         dcc.DatePickerRange(
                             id="dpr-period",

+                            className="d-flex justify-content-center",

                             min_date_allowed=\
                                 datetime.utcnow()-timedelta(days=180),
                             max_date_allowed=datetime.utcnow(),
                             min_date_allowed=\
                                 datetime.utcnow()-timedelta(days=180),
                             max_date_allowed=datetime.utcnow(),


@@ -431,54 +441,47 @@ class Layout:
                     ]
                 ),
                 dbc.Row(
                     ]
                 ),
                 dbc.Row(

+                    id="row-card-sel-tests",

                     class_name="gy-1",
                     class_name="gy-1",

+                    style=self.STYLE_DISABLED,

                     children=[
                     children=[

-                        dbc.Card(
-                            class_name="p-0",
-                            children=[
-                                dbc.Label(
-                                    "Selected tests",
-                                    class_name="p-0"
-                                ),
-                                dbc.Checklist(
-                                    id="cl-selected",
-                                    options=[],
-                                    inline=False
-                                )
-                            ],
-                            color="light",
-                            outline=True
+                        dbc.Label(
+                            "Selected tests",
+                            class_name="p-0"
+                        ),
+                        dbc.Checklist(
+                            class_name="overflow-auto",
+                            id="cl-selected",
+                            options=[],
+                            inline=False,
+                            style={"max-height": "12em"},

                         )
                         )

-                    ]
+                    ],

                 ),
                 dbc.Row(
                 ),
                 dbc.Row(

+                    id="row-btns-sel-tests",
+                    style=self.STYLE_DISABLED,

                     children=[
                         dbc.ButtonGroup(
                     children=[
                         dbc.ButtonGroup(

-                            [
-                                dbc.Button(
-                                    id="btn-sel-remove-all",
-                                    children="Remove All",
-                                    class_name="w-100",
-                                    color="secondary",
-                                    disabled=False
-                                ),
+                            class_name="gy-2",
+                            children=[

                                 dbc.Button(
                                     id="btn-sel-remove",
                                     children="Remove Selected",
                                 dbc.Button(
                                     id="btn-sel-remove",
                                     children="Remove Selected",

-                                    class_name="w-100",
-                                    color="secondary",
+                                    class_name="w-100 me-1",
+                                    color="info",

                                     disabled=False
                                 ),
                                 dbc.Button(
                                     disabled=False
                                 ),
                                 dbc.Button(

-                                    id="btn-sel-display",
-                                    children="Display",
-                                    class_name="w-100",
-                                    color="secondary",
+                                    id="btn-sel-remove-all",
+                                    children="Remove All",
+                                    class_name="w-100 me-1",
+                                    color="info",

                                     disabled=False
                                     disabled=False

-                                )
+                                ),

                             ],
                             size="md",
                             ],
                             size="md",

-                        ),
+                        )

                     ]
                 ),
             ]
                     ]
                 ),
             ]


@@ -582,7 +585,7 @@ class Layout:
                 row_fig_tput = [
                     dcc.Loading(
                         dcc.Graph(
                 row_fig_tput = [
                     dcc.Loading(
                         dcc.Graph(

-                            id="graph-tput",
+                            id={"type": "graph", "index": "tput"},

                             figure=fig_tput
                         )
                     ),
                             figure=fig_tput
                         )
                     ),


@@ -591,7 +594,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")
                     ]),


@@ -600,7 +605,7 @@ class Layout:
                 row_fig_lat = [
                     dcc.Loading(
                         dcc.Graph(
                 row_fig_lat = [
                     dcc.Loading(
                         dcc.Graph(

-                            id="graph-latency",
+                            id={"type": "graph", "index": "lat"},

                             figure=fig_lat
                         )
                     )
                             figure=fig_lat
                         )
                     )


@@ -614,6 +619,8 @@ class Layout:
             Output("row-graph-tput", "children"),
             Output("row-graph-lat", "children"),
             Output("row-btn-download", "children"),
             Output("row-graph-tput", "children"),
             Output("row-graph-lat", "children"),
             Output("row-btn-download", "children"),

+            Output("row-card-sel-tests", "style"),
+            Output("row-btns-sel-tests", "style"),

             Output("dd-ctrl-phy", "value"),
             Output("dd-ctrl-area", "options"),
             Output("dd-ctrl-area", "disabled"),
             Output("dd-ctrl-phy", "value"),
             Output("dd-ctrl-area", "options"),
             Output("dd-ctrl-area", "disabled"),


@@ -650,7 +657,6 @@ class Layout:
             Input("btn-ctrl-add", "n_clicks"),
             Input("dpr-period", "start_date"),
             Input("dpr-period", "end_date"),
             Input("btn-ctrl-add", "n_clicks"),
             Input("dpr-period", "start_date"),
             Input("dpr-period", "end_date"),

-            Input("btn-sel-display", "n_clicks"),

             Input("btn-sel-remove", "n_clicks"),
             Input("btn-sel-remove-all", "n_clicks"),
         )
             Input("btn-sel-remove", "n_clicks"),
             Input("btn-sel-remove-all", "n_clicks"),
         )


@@ -658,7 +664,7 @@ class Layout:
             dd_phy: str, dd_area: str, dd_test: str, cl_core: list,
             cl_core_all: list, cl_framesize: list, cl_framesize_all: list,
             cl_testtype: list, cl_testtype_all: list, btn_add: int,
             dd_phy: str, dd_area: str, dd_test: str, cl_core: list,
             cl_core_all: list, cl_framesize: list, cl_framesize_all: list,
             cl_testtype: list, cl_testtype_all: list, btn_add: int,

-            d_start: str, d_end: str, btn_display: int, btn_remove: int,
+            d_start: str, d_end: str, btn_remove: int,

             btn_remove_all: int) -> tuple:
             """
             """
             btn_remove_all: int) -> tuple:
             """
             """


@@ -670,6 +676,8 @@ class Layout:
             row_fig_tput = no_update
             row_fig_lat = no_update
             row_btn_dwnld = no_update
             row_fig_tput = no_update
             row_fig_lat = no_update
             row_btn_dwnld = no_update

+            row_card_sel_tests = no_update
+            row_btns_sel_tests = no_update

 
             ctrl_panel = self.ControlPanel(cp_data)
 
 
             ctrl_panel = self.ControlPanel(cp_data)
 


@@ -870,12 +878,19 @@ class Layout:
                                         "core": core.lower(),
                                         "testtype": ttype.lower()
                                     })
                                         "core": core.lower(),
                                         "testtype": ttype.lower()
                                     })

+                    row_card_sel_tests = self.STYLE_ENABLED
+                    row_btns_sel_tests = self.STYLE_ENABLED

                     ctrl_panel.set(ctrl_panel.defaults)
                     ctrl_panel.set({
                         "cl-selected-options": self._list_tests(store_sel)
                     })
                     ctrl_panel.set(ctrl_panel.defaults)
                     ctrl_panel.set({
                         "cl-selected-options": self._list_tests(store_sel)
                     })

-            elif trigger_id in ("btn-sel-display", "dpr-period"):
-                _ = btn_display
+                    row_fig_tput, row_fig_lat, row_btn_dwnld = \
+                    _generate_plotting_arrea(
+                        graph_trending(
+                            self.data, store_sel, self.layout, d_start, d_end
+                        )
+                    )
+            elif trigger_id == "dpr-period":

                 row_fig_tput, row_fig_lat, row_btn_dwnld = \
                     _generate_plotting_arrea(
                         graph_trending(
                 row_fig_tput, row_fig_lat, row_btn_dwnld = \
                     _generate_plotting_arrea(
                         graph_trending(


@@ -887,6 +902,8 @@ class Layout:
                 row_fig_tput = self.PLACEHOLDER
                 row_fig_lat = self.PLACEHOLDER
                 row_btn_dwnld = self.PLACEHOLDER
                 row_fig_tput = self.PLACEHOLDER
                 row_fig_lat = self.PLACEHOLDER
                 row_btn_dwnld = self.PLACEHOLDER

+                row_card_sel_tests = self.STYLE_DISABLED
+                row_btns_sel_tests = self.STYLE_DISABLED

                 store_sel = list()
                 ctrl_panel.set({
                         "cl-selected-options": list()
                 store_sel = list()
                 ctrl_panel.set({
                         "cl-selected-options": list()


@@ -913,6 +930,8 @@ class Layout:
                     row_fig_tput = self.PLACEHOLDER
                     row_fig_lat = self.PLACEHOLDER
                     row_btn_dwnld = self.PLACEHOLDER
                     row_fig_tput = self.PLACEHOLDER
                     row_fig_lat = self.PLACEHOLDER
                     row_btn_dwnld = self.PLACEHOLDER

+                    row_card_sel_tests = self.STYLE_DISABLED
+                    row_btns_sel_tests = self.STYLE_DISABLED

                     store_sel = list()
                     ctrl_panel.set({
                             "cl-selected-options": list()
                     store_sel = list()
                     ctrl_panel.set({
                             "cl-selected-options": list()


@@ -920,7 +939,8 @@ class Layout:
 
             ret_val = [
                 ctrl_panel.panel, store_sel,
 
             ret_val = [
                 ctrl_panel.panel, store_sel,

-                row_fig_tput, row_fig_lat, row_btn_dwnld
+                row_fig_tput, row_fig_lat, row_btn_dwnld,
+                row_card_sel_tests, row_btns_sel_tests

             ]
             ret_val.extend(ctrl_panel.values())
             return ret_val
             ]
             ret_val.extend(ctrl_panel.values())
             return ret_val


@@ -929,30 +949,38 @@ class Layout:
             Output("metadata-tput-lat", "children"),
             Output("metadata-hdrh-graph", "children"),
             Output("offcanvas-metadata", "is_open"),
             Output("metadata-tput-lat", "children"),
             Output("metadata-hdrh-graph", "children"),
             Output("offcanvas-metadata", "is_open"),

-            Input("graph-tput", "clickData"),
-            Input("graph-latency", "clickData")
+            Input({"type": "graph", "index": ALL}, "clickData"),
+            prevent_initial_call=True

         )
         )

-        def _show_metadata_from_graphs(
-            tput_data: dict, lat_data: dict) -> tuple:
+        def _show_metadata_from_graphs(graph_data: dict) -> tuple:

             """
             """
             """
             """

-            if not (tput_data or lat_data):
+            try:
+                trigger_id = loads(
+                    callback_context.triggered[0]["prop_id"].split(".")[0]
+                )["index"]
+                idx = 0 if trigger_id == "tput" else 1
+                graph_data = graph_data[idx]["points"][0]
+            except (JSONDecodeError, IndexError, KeyError, ValueError,
+                    TypeError):

                 raise PreventUpdate
 
             metadata = no_update
             graph = list()
 
                 raise PreventUpdate
 
             metadata = no_update
             graph = list()
 

-            trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0]
-            if trigger_id == "graph-tput":
+            children = [
+                dbc.ListGroupItem(
+                    [dbc.Badge(x.split(":")[0]), x.split(": ")[1]]
+                ) for x in graph_data.get("text", "").split("<br>")
+            ]
+            if trigger_id == "tput":

                 title = "Throughput"
                 title = "Throughput"

-                txt = tput_data["points"][0]["text"].replace("<br>", "\n")
-            elif trigger_id == "graph-latency":
+            elif trigger_id == "lat":

                 title = "Latency"
                 title = "Latency"

-                txt = lat_data["points"][0]["text"].replace("<br>", "\n")
-                hdrh_data = lat_data["points"][0].get("customdata", None)
+                hdrh_data = graph_data.get("customdata", None)

                 if hdrh_data:
                     graph = [dbc.Card(
                 if hdrh_data:
                     graph = [dbc.Card(

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

                         children=[
                             dbc.CardHeader(hdrh_data.pop("name")),
                             dbc.CardBody(children=[
                         children=[
                             dbc.CardHeader(hdrh_data.pop("name")),
                             dbc.CardBody(children=[


@@ -967,7 +995,7 @@ class Layout:
                     ]
             metadata = [
                 dbc.Card(
                     ]
             metadata = [
                 dbc.Card(

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

                     children=[
                         dbc.CardHeader(children=[
                             dcc.Clipboard(
                     children=[
                         dbc.CardHeader(children=[
                             dcc.Clipboard(


@@ -979,7 +1007,8 @@ class Layout:
                         ]),
                         dbc.CardBody(
                             id="tput-lat-metadata",
                         ]),
                         dbc.CardBody(
                             id="tput-lat-metadata",

-                            children=[txt]
+                            class_name="p-0",
+                            children=[dbc.ListGroup(children, flush=True), ]

                         )
                     ]
                 )
                         )
                     ]
                 )