CDash: Improvements in layout

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

2 files changed, 273 insertions, 294 deletions

diff --git a/csit.infra.dash/app/pal/trending/graphs.py b/csit.infra.dash/app/pal/trending/graphs.py
index 1eff4aa889..6f1ec84825 100644
--- a/csit.infra.dash/app/pal/trending/graphs.py
+++ b/csit.infra.dash/app/pal/trending/graphs.py
@@ -20,8 +20,6 @@ import pandas as pd
 import hdrh.histogram
 import hdrh.codec
 
-from datetime import datetime
-
 from ..utils.constants import Constants as C
 from ..utils.utils import classify_anomalies, get_color
 
@@ -120,8 +118,6 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
     df = df.dropna(subset=[C.VALUE[ttype], ])
     if df.empty:
         return list()
-    if df.empty:
-        return list()
 
     x_axis = df["start_time"].tolist()
     if ttype == "pdr-lat":
@@ -135,6 +131,7 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
 
     hover = list()
     customdata = list()
+    customdata_samples = list()
     for idx, (_, row) in enumerate(df.iterrows()):
         d_type = "trex" if row["dut_type"] == "none" else row["dut_type"]
         hover_itm = (
@@ -157,7 +154,11 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
         ).replace("<stdev>", stdev)
         hover.append(hover_itm)
         if ttype == "pdr-lat":
-            customdata.append(_get_hdrh_latencies(row, name))
+            customdata_samples.append(_get_hdrh_latencies(row, name))
+            customdata.append({"name": name})
+        else:
+            customdata_samples.append({"name": name, "show_telemetry": True})
+            customdata.append({"name": name})
 
     hover_trend = list()
     for avg, stdev, (_, row) in zip(trend_avg, trend_stdev, df.iterrows()):
@@ -189,7 +190,7 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
             hoverinfo="text+name",
             showlegend=True,
             legendgroup=name,
-            customdata=customdata
+            customdata=customdata_samples
         ),
         go.Scatter(  # Trend line
             x=x_axis,
@@ -205,6 +206,7 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
             hoverinfo="text+name",
             showlegend=False,
             legendgroup=name,
+            customdata=customdata
         )
     ]
 
@@ -237,6 +239,7 @@ def _generate_trending_traces(ttype: str, name: str, df: pd.DataFrame,
                 showlegend=False,
                 legendgroup=name,
                 name=name,
+                customdata=customdata,
                 marker={
                     "size": 15,
                     "symbol": "circle-open",
@@ -297,8 +300,6 @@ def graph_trending(data: pd.DataFrame, sel:dict, layout: dict,
         if df is None or df.empty:
             continue
 
-        name = "-".join((itm["dut"], itm["phy"], itm["framesize"], itm["core"],
-            itm["test"], itm["testtype"], ))
         if normalize:
             phy = itm["phy"].split("-")
             topo_arch = f"{phy[0]}-{phy[1]}" if len(phy) == 4 else str()
@@ -306,18 +307,16 @@ def graph_trending(data: pd.DataFrame, sel:dict, layout: dict,
                 if topo_arch else 1.0
         else:
             norm_factor = 1.0
-        traces = _generate_trending_traces(
-            itm["testtype"], name, df, get_color(idx), norm_factor
-        )
+        traces = _generate_trending_traces(itm["testtype"], itm["id"], df,
+            get_color(idx), norm_factor)
         if traces:
             if not fig_tput:
                 fig_tput = go.Figure()
             fig_tput.add_traces(traces)
 
         if itm["testtype"] == "pdr":
-            traces = _generate_trending_traces(
-                "pdr-lat", name, df, get_color(idx), norm_factor
-            )
+            traces = _generate_trending_traces("pdr-lat", itm["id"], df,
+                get_color(idx), norm_factor)
             if traces:
                 if not fig_lat:
                     fig_lat = go.Figure()
@@ -348,7 +347,7 @@ def graph_hdrh_latency(data: dict, layout: dict) -> go.Figure:
     for idx, (lat_name, lat_hdrh) in enumerate(data.items()):
         try:
             decoded = hdrh.histogram.HdrHistogram.decode(lat_hdrh)
-        except (hdrh.codec.HdrLengthException, TypeError) as err:
+        except (hdrh.codec.HdrLengthException, TypeError):
             continue
         previous_x = 0.0
         prev_perc = 0.0
diff --git a/csit.infra.dash/app/pal/trending/layout.py b/csit.infra.dash/app/pal/trending/layout.py
index eac02ced6f..9b1965f937 100644
--- a/csit.infra.dash/app/pal/trending/layout.py
+++ b/csit.infra.dash/app/pal/trending/layout.py
@@ -305,7 +305,7 @@ class Layout:
                     )
                 )
             ],
-            brand="Dashboard",
+            brand=C.BRAND,
             brand_href="/",
             brand_external_link=True,
             class_name="p-2",
@@ -318,12 +318,12 @@ class Layout:
         :returns: Column with the control panel.
         :rtype: dbc.Col
         """
-        return dbc.Col(
-            id="col-controls",
-            children=[
-                self._add_ctrl_panel(),
-            ],
-        )
+        return dbc.Col([
+            html.Div(
+                children=self._add_ctrl_panel(),
+                className="sticky-top"
+            )
+        ])
 
     def _add_plotting_col(self) -> dbc.Col:
         """Add column with plots and tables. It is placed on the right side.
@@ -369,281 +369,261 @@ class Layout:
         :returns: Control panel.
         :rtype: dbc.Row
         """
-        return dbc.Row(
-            id="row-ctrl-panel",
-            class_name="g-0 p-2",
-            children=[
-                dbc.Row(
-                    class_name="g-0",
-                    children=[
-                        dbc.InputGroup(
-                            [
-                                dbc.InputGroupText(
-                                    children=show_tooltip(self._tooltips,
-                                        "help-dut", "DUT")
-                                ),
-                                dbc.Select(
-                                    id="dd-ctrl-dut",
-                                    placeholder=(
-                                        "Select a Device under Test..."
-                                    ),
-                                    options=sorted(
-                                        [
-                                            {"label": k, "value": k} \
-                                                for k in self.spec_tbs.keys()
-                                        ],
-                                        key=lambda d: d["label"]
-                                    )
-                                )
-                            ],
-                            class_name="mb-3",
-                            size="sm",
-                        ),
-                    ]
-                ),
-                dbc.Row(
-                    class_name="g-0",
-                    children=[
-                        dbc.InputGroup(
-                            [
-                                dbc.InputGroupText(
-                                    children=show_tooltip(self._tooltips,
-                                        "help-infra", "Infra")
-                                ),
-                                dbc.Select(
-                                    id="dd-ctrl-phy",
-                                    placeholder=(
-                                        "Select a Physical Test Bed "
-                                        "Topology..."
-                                    )
-                                )
-                            ],
-                            class_name="mb-3",
-                            size="sm",
-                        ),
-                    ]
-                ),
-                dbc.Row(
-                    class_name="g-0",
-                    children=[
-                        dbc.InputGroup(
-                            [
-                                dbc.InputGroupText(
-                                    children=show_tooltip(self._tooltips,
-                                        "help-area", "Area")
-                                ),
-                                dbc.Select(
-                                    id="dd-ctrl-area",
-                                    placeholder="Select an Area...",
-                                    disabled=True,
-                                ),
-                            ],
-                            class_name="mb-3",
-                            size="sm",
-                        ),
-                    ]
-                ),
-                dbc.Row(
-                    class_name="g-0",
-                    children=[
-                        dbc.InputGroup(
-                            [
-                                dbc.InputGroupText(
-                                    children=show_tooltip(self._tooltips,
-                                        "help-test", "Test")
-                                ),
-                                dbc.Select(
-                                    id="dd-ctrl-test",
-                                    placeholder="Select a Test...",
-                                    disabled=True,
-                                ),
-                            ],
-                            class_name="mb-3",
-                            size="sm",
-                        ),
-                    ]
-                ),
-                dbc.Row(
-                    id="row-ctrl-framesize",
-                    class_name="gy-1",
-                    children=[
-                        dbc.Label(
-                            children=show_tooltip(self._tooltips,
-                                "help-framesize", "Frame Size"),
-                            class_name="p-0"
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-framesize-all",
-                                    options=C.CL_ALL_DISABLED,
-                                    inline=True,
-                                    switch=False
-                                ),
-                            ],
-                            width=3
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-framesize",
-                                    inline=True,
-                                    switch=False
-                                )
-                            ]
-                        )
-                    ]
-                ),
-                dbc.Row(
-                    id="row-ctrl-core",
-                    class_name="gy-1",
-                    children=[
-                        dbc.Label(
-                            children=show_tooltip(self._tooltips,
-                                "help-cores", "Number of Cores"),
-                            class_name="p-0"
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-core-all",
-                                    options=C.CL_ALL_DISABLED,
-                                    inline=False,
-                                    switch=False
-                                )
-                            ],
-                            width=3
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-core",
-                                    inline=True,
-                                    switch=False
-                                )
-                            ]
-                        )
-                    ]
-                ),
-                dbc.Row(
-                    id="row-ctrl-testtype",
-                    class_name="gy-1",
-                    children=[
-                        dbc.Label(
-                            children=show_tooltip(self._tooltips,
-                                "help-ttype", "Test Type"),
-                            class_name="p-0"
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-testtype-all",
-                                    options=C.CL_ALL_DISABLED,
-                                    inline=True,
-                                    switch=False
+        return [
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(self._tooltips,
+                                    "help-dut", "DUT")
+                            ),
+                            dbc.Select(
+                                id="dd-ctrl-dut",
+                                placeholder=(
+                                    "Select a Device under Test..."
                                 ),
-                            ],
-                            width=3
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-testtype",
-                                    inline=True,
-                                    switch=False
+                                options=sorted(
+                                    [
+                                        {"label": k, "value": k} \
+                                            for k in self.spec_tbs.keys()
+                                    ],
+                                    key=lambda d: d["label"]
                                 )
-                            ]
-                        )
-                    ]
-                ),
-                dbc.Row(
-                    id="row-ctrl-normalize",
-                    class_name="gy-1",
-                    children=[
-                        dbc.Label(
-                            children=show_tooltip(self._tooltips,
-                                "help-normalize", "Normalize"),
-                            class_name="p-0"
-                        ),
-                        dbc.Col(
-                            children=[
-                                dbc.Checklist(
-                                    id="cl-ctrl-normalize",
-                                    options=[{
-                                        "value": "normalize",
-                                        "label": (
-                                            "Normalize results to CPU"
-                                            "frequency 2GHz"
-                                        )
-                                    }],
-                                    value=[],
-                                    inline=True,
-                                    switch=False
-                                ),
-                            ]
-                        )
-                    ]
-                ),
-                dbc.Row(
-                    class_name="gy-1 p-0",
-                    children=[
-                        dbc.ButtonGroup(
-                            [
-                                dbc.Button(
-                                    id="btn-ctrl-add",
-                                    children="Add Selected",
-                                    class_name="me-1",
-                                    color="info"
+                            )
+                        ],
+                        size="sm",
+                    ),
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(self._tooltips,
+                                    "help-infra", "Infra")
+                            ),
+                            dbc.Select(
+                                id="dd-ctrl-phy",
+                                placeholder=(
+                                    "Select a Physical Test Bed "
+                                    "Topology..."
                                 )
-                            ]
-                        )
-                    ]
-                ),
-                dbc.Row(
-                    id="row-card-sel-tests",
-                    class_name="gy-1",
-                    style=C.STYLE_DISABLED,
-                    children=[
-                        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(
-                    id="row-btns-sel-tests",
-                    style=C.STYLE_DISABLED,
-                    children=[
-                        dbc.ButtonGroup(
-                            class_name="gy-2",
-                            children=[
-                                dbc.Button(
-                                    id="btn-sel-remove",
-                                    children="Remove Selected",
-                                    class_name="w-100 me-1",
-                                    color="info",
-                                    disabled=False
-                                ),
-                                dbc.Button(
-                                    id="btn-sel-remove-all",
-                                    children="Remove All",
-                                    class_name="w-100 me-1",
-                                    color="info",
-                                    disabled=False
-                                ),
-                            ]
-                        )
-                    ]
-                ),
-            ]
-        )
+                            )
+                        ],
+                        size="sm",
+                    ),
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(self._tooltips,
+                                    "help-area", "Area")
+                            ),
+                            dbc.Select(
+                                id="dd-ctrl-area",
+                                placeholder="Select an Area...",
+                                disabled=True,
+                            ),
+                        ],
+                        size="sm",
+                    ),
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(self._tooltips,
+                                    "help-test", "Test")
+                            ),
+                            dbc.Select(
+                                id="dd-ctrl-test",
+                                placeholder="Select a Test...",
+                                disabled=True,
+                            ),
+                        ],
+                        size="sm",
+                    ),
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.Label(
+                        children=show_tooltip(self._tooltips,
+                            "help-framesize", "Frame Size"),
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-framesize-all",
+                                options=C.CL_ALL_DISABLED,
+                                inline=True,
+                                switch=False
+                            ),
+                        ],
+                        width=3
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-framesize",
+                                inline=True,
+                                switch=False
+                            )
+                        ]
+                    )
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.Label(
+                        children=show_tooltip(self._tooltips,
+                            "help-cores", "Number of Cores"),
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-core-all",
+                                options=C.CL_ALL_DISABLED,
+                                inline=False,
+                                switch=False
+                            )
+                        ],
+                        width=3
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-core",
+                                inline=True,
+                                switch=False
+                            )
+                        ]
+                    )
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.Label(
+                        children=show_tooltip(self._tooltips,
+                            "help-ttype", "Test Type"),
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-testtype-all",
+                                options=C.CL_ALL_DISABLED,
+                                inline=True,
+                                switch=False
+                            ),
+                        ],
+                        width=3
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-testtype",
+                                inline=True,
+                                switch=False
+                            )
+                        ]
+                    )
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.Label(
+                        children=show_tooltip(self._tooltips,
+                            "help-normalize", "Normalize"),
+                    ),
+                    dbc.Col(
+                        children=[
+                            dbc.Checklist(
+                                id="cl-ctrl-normalize",
+                                options=[{
+                                    "value": "normalize",
+                                    "label": (
+                                        "Normalize results to CPU "
+                                        "frequency 2GHz"
+                                    )
+                                }],
+                                value=[],
+                                inline=True,
+                                switch=False
+                            ),
+                        ]
+                    )
+                ]
+            ),
+            dbc.Row(
+                class_name="g-0 p-1",
+                children=[
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button(
+                                id="btn-ctrl-add",
+                                children="Add Selected",
+                                color="info"
+                            )
+                        ]
+                    )
+                ]
+            ),
+            dbc.Row(
+                id="row-card-sel-tests",
+                class_name="g-0 p-1",
+                style=C.STYLE_DISABLED,
+                children=[
+                    dbc.Label("Selected tests"),
+                    dbc.Checklist(
+                        class_name="overflow-auto",
+                        id="cl-selected",
+                        options=[],
+                        inline=False,
+                        style={"max-height": "12em"},
+                    )
+                ],
+            ),
+            dbc.Row(
+                id="row-btns-sel-tests",
+                class_name="g-0 p-1",
+                style=C.STYLE_DISABLED,
+                children=[
+                    dbc.ButtonGroup(
+                        children=[
+                            dbc.Button(
+                                id="btn-sel-remove",
+                                children="Remove Selected",
+                                class_name="w-100",
+                                color="info",
+                                disabled=False
+                            ),
+                            dbc.Button(
+                                id="btn-sel-remove-all",
+                                children="Remove All",
+                                class_name="w-100",
+                                color="info",
+                                disabled=False
+                            ),
+                        ]
+                    )
+                ]
+            ),
+        ]
 
     class ControlPanel:
         """A class representing the control panel.