From: Tibor Frank Date: Mon, 3 Oct 2022 13:11:02 +0000 (+0200) Subject: CDash: Improvements in layout X-Git-Url: https://gerrit.fd.io/r/gitweb?p=csit.git;a=commitdiff_plain;h=c6bfe865e4a62dda2c5e635df53083e909a6558b CDash: Improvements in layout Signed-off-by: Tibor Frank Change-Id: I28697efb31a7c661547872bedb696317197b5c7f --- diff --git a/csit.infra.dash/app/pal/news/layout.py b/csit.infra.dash/app/pal/news/layout.py index cd1618d719..e9ff4dc334 100644 --- a/csit.infra.dash/app/pal/news/layout.py +++ b/csit.infra.dash/app/pal/news/layout.py @@ -331,7 +331,7 @@ class Layout: ) ) ], - brand="Dashboard", + brand=C.BRAND, brand_href="/", brand_external_link=True, class_name="p-2", @@ -344,13 +344,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 tables. It is placed on the right side. @@ -408,58 +407,45 @@ class Layout: :returns: Control panel. :rtype: dbc.Row """ - return dbc.Row( - id="row-ctrl-panel", - class_name="g-0", - children=[ - dbc.Row( - class_name="g-0 p-2", - children=[ - dbc.Row( - class_name="g-0", - children=[ - dbc.Label( - class_name="g-0", - children=show_tooltip(self._tooltips, - "help-summary-period", "Window") - ), - dbc.Row( - dbc.ButtonGroup( - id="bg-time-period", - class_name="g-0", - children=[ - dbc.Button( - id="period-last", - children="Last Run", - className="me-1", - outline=True, - color="info" - ), - dbc.Button( - id="period-short", - children=\ - f"Last {C.NEWS_SHORT} Runs", - className="me-1", - outline=True, - active=True, - color="info" - ), - dbc.Button( - id="period-long", - children="All Runs", - className="me-1", - outline=True, - color="info" - ) - ] - ) - ) - ] - ) - ] - ) - ] - ) + return [ + dbc.Label( + class_name="g-0 p-1", + children=show_tooltip(self._tooltips, + "help-summary-period", "Window") + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.ButtonGroup( + id="bg-time-period", + children=[ + dbc.Button( + id="period-last", + children="Last Run", + className="me-1", + outline=True, + color="info" + ), + dbc.Button( + id="period-short", + children=f"Last {C.NEWS_SHORT} Runs", + className="me-1", + outline=True, + active=True, + color="info" + ), + dbc.Button( + id="period-long", + children="All Runs", + className="me-1", + outline=True, + color="info" + ) + ] + ) + ] + ) + ] def callbacks(self, app): """Callbacks for the whole application. diff --git a/csit.infra.dash/app/pal/report/layout.py b/csit.infra.dash/app/pal/report/layout.py index a556871084..9397870e5e 100644 --- a/csit.infra.dash/app/pal/report/layout.py +++ b/csit.infra.dash/app/pal/report/layout.py @@ -298,7 +298,7 @@ class Layout: ) ) ], - brand="Dashboard", + brand=C.BRAND, brand_href="/", brand_external_link=True, class_name="p-2", @@ -311,12 +311,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. @@ -372,322 +372,300 @@ 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-release", "CSIT Release") - ), - dbc.Select( - id="dd-ctrl-rls", - placeholder=("Select a Release..."), - 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-dut", "DUT") - ), - dbc.Select( - id="dd-ctrl-dut", - placeholder=( - "Select a Device under Test..." - ) - ) - ], - class_name="mb-3", - size="sm", - ), - ] - ), - dbc.Row( - class_name="g-0", - children=[ - dbc.InputGroup( - [ - dbc.InputGroupText( - children=show_tooltip(self._tooltips, - "help-dut-ver", "DUT Version") - ), - dbc.Select( - id="dd-ctrl-dutver", - placeholder=( - "Select a Version of " - "Device under Test..." - ) - ) - ], - 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 + return [ + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.InputGroup( + [ + dbc.InputGroupText( + children=show_tooltip(self._tooltips, + "help-release", "CSIT Release") + ), + dbc.Select( + id="dd-ctrl-rls", + placeholder=("Select a Release..."), + options=sorted( + [ + {"label": k, "value": k} \ + for k in self.spec_tbs.keys() + ], + key=lambda d: d["label"] ) - ], - width=3 - ), - dbc.Col( - children=[ - dbc.Checklist( - id="cl-ctrl-core", - inline=True, - switch=False + ) + ], + size="sm", + ), + ] + ), + 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..." ) - ] - ) - ] - ), - 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 - ), - ], - width=3 - ), - dbc.Col( - children=[ - dbc.Checklist( - id="cl-ctrl-testtype", - inline=True, - switch=False + ) + ], + size="sm", + ), + ] + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.InputGroup( + [ + dbc.InputGroupText( + children=show_tooltip(self._tooltips, + "help-dut-ver", "DUT Version") + ), + dbc.Select( + id="dd-ctrl-dutver", + placeholder=( + "Select a Version of " + "Device under Test..." ) - ] - ) - ] - ), - 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": "20em"}, - ) - ], - ), - 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": "20em"}, + ) + ], + ), + 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. diff --git a/csit.infra.dash/app/pal/static/sass/lux.scss b/csit.infra.dash/app/pal/static/sass/lux.scss index 9e525f845b..f32f93c5d4 100644 --- a/csit.infra.dash/app/pal/static/sass/lux.scss +++ b/csit.infra.dash/app/pal/static/sass/lux.scss @@ -1,6 +1,9 @@ // Your variable overrides go here, e.g.: // $h1-font-size: 3rem; +$accordion-padding-y: 0.5rem; +$accordion-padding-x: 0.65rem; + @import "variables"; @import "bootstrap/bootstrap"; @import "bootswatch"; \ No newline at end of file diff --git a/csit.infra.dash/app/pal/stats/layout.py b/csit.infra.dash/app/pal/stats/layout.py index fa1da90a00..2f1b344613 100644 --- a/csit.infra.dash/app/pal/stats/layout.py +++ b/csit.infra.dash/app/pal/stats/layout.py @@ -308,7 +308,7 @@ class Layout: ) ) ], - brand="Dashboard", + brand=C.BRAND, brand_href="/", brand_external_link=True, class_name="p-2", @@ -321,12 +321,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. @@ -418,93 +418,78 @@ class Layout: :returns: Control panel. :rtype: dbc.Row """ - return dbc.Row( - id="row-ctrl-panel", - class_name="g-0", - children=[ - dbc.Row( - class_name="g-0 p-2", - children=[ - dbc.Row( - class_name="gy-1", - children=[ - dbc.Label( - class_name="p-0", - children=show_tooltip(self._tooltips, - "help-dut", "Device under Test") - ), - dbc.Row( - dbc.RadioItems( - id="ri-duts", - inline=True, - value=self.default["dut"], - options=self.default["duts"] - ) - ) - ] - ), - dbc.Row( - class_name="gy-1", - children=[ - dbc.Label( - class_name="p-0", - children=show_tooltip(self._tooltips, - "help-ttype", "Test Type"), - ), - dbc.RadioItems( - id="ri-ttypes", - inline=True, - value=self.default["ttype"], - options=self.default["ttypes"] - ) - ] - ), - dbc.Row( - class_name="gy-1", - children=[ - dbc.Label( - class_name="p-0", - children=show_tooltip(self._tooltips, - "help-cadence", "Cadence"), - ), - dbc.RadioItems( - id="ri-cadences", - inline=True, - value=self.default["cadence"], - options=self.default["cadences"] - ) - ] - ), - dbc.Row( - class_name="gy-1", - children=[ - dbc.Label( - class_name="p-0", - children=show_tooltip(self._tooltips, - "help-tbed", "Test Bed"), - ), - dbc.Select( - id="dd-tbeds", - placeholder="Select a test bed...", - value=self.default["tbed"], - options=self.default["tbeds"] - ) - ] - ), - dbc.Row( - class_name="gy-1", - children=[ - dbc.Alert( - id="al-job", - color="info", - children=self.default["job"] - ) - ] - ) - ] - ), - ] - ) + return [ + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.Label( + children=show_tooltip(self._tooltips, + "help-dut", "Device under Test") + ), + dbc.RadioItems( + id="ri-duts", + inline=True, + value=self.default["dut"], + options=self.default["duts"] + ) + ] + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.Label( + children=show_tooltip(self._tooltips, + "help-ttype", "Test Type"), + ), + dbc.RadioItems( + id="ri-ttypes", + inline=True, + value=self.default["ttype"], + options=self.default["ttypes"] + ) + ] + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.Label( + children=show_tooltip(self._tooltips, + "help-cadence", "Cadence"), + ), + dbc.RadioItems( + id="ri-cadences", + inline=True, + value=self.default["cadence"], + options=self.default["cadences"] + ) + ] + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.Label( + children=show_tooltip(self._tooltips, + "help-tbed", "Test Bed"), + ), + dbc.Select( + id="dd-tbeds", + placeholder="Select a test bed...", + value=self.default["tbed"], + options=self.default["tbeds"] + ) + ] + ), + dbc.Row( + class_name="g-0 p-1", + children=[ + dbc.Alert( + id="al-job", + color="info", + children=self.default["job"] + ) + ] + ) + ] class ControlPanel: """A class representing the control panel. diff --git a/csit.infra.dash/app/pal/templates/index_layout.jinja2 b/csit.infra.dash/app/pal/templates/index_layout.jinja2 index 4acd1bda2d..5a5f876c80 100644 --- a/csit.infra.dash/app/pal/templates/index_layout.jinja2 +++ b/csit.infra.dash/app/pal/templates/index_layout.jinja2 @@ -5,7 +5,7 @@
-

Dashboard

+

CDash

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) 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. diff --git a/csit.infra.dash/app/pal/utils/constants.py b/csit.infra.dash/app/pal/utils/constants.py index 8f39fc8991..73afb4c7a9 100644 --- a/csit.infra.dash/app/pal/utils/constants.py +++ b/csit.infra.dash/app/pal/utils/constants.py @@ -18,7 +18,6 @@ does not need to be hard coded here, but can be read from environment variables. """ import logging -import dash_bootstrap_components as dbc from dash import html @@ -36,13 +35,14 @@ class Constants: LOG_DATE_FORMAT = "%Y/%m/%d %H:%M:%S" # The application title. - TITLE = "FD.io CSIT" + TITLE = "FD.io CDash" + BRAND = "CDash" # The application description. DESCRIPTION = "Performance Dashboard" # External stylesheets. - EXTERNAL_STYLESHEETS = [ "/static/dist/css/bootstrap.css" ] + EXTERNAL_STYLESHEETS = ["/static/dist/css/bootstrap.css", ] # Top level template for all pages. TEMPLATE = "d-flex h-100 text-center text-white bg-dark"