From c3ce5119c09eb40607a4b82f242c10ff2c56284a Mon Sep 17 00:00:00 2001 From: Tibor Frank Date: Mon, 16 May 2022 13:47:59 +0200 Subject: feat(uti): set styles for url dialog Change-Id: I27e741436be82499c84371018a4f03f2330cbab4 Signed-off-by: Tibor Frank --- resources/tools/dash/app/pal/data/tooltips.yaml | 3 ++ resources/tools/dash/app/pal/stats/layout.py | 47 ++++++++++++++++--------- resources/tools/dash/app/pal/trending/layout.py | 37 ++++++++++++------- 3 files changed, 58 insertions(+), 29 deletions(-) diff --git a/resources/tools/dash/app/pal/data/tooltips.yaml b/resources/tools/dash/app/pal/data/tooltips.yaml index 1b61ab6c63..e5259b4d7b 100644 --- a/resources/tools/dash/app/pal/data/tooltips.yaml +++ b/resources/tools/dash/app/pal/data/tooltips.yaml @@ -28,3 +28,6 @@ help-time-period: Choose a time period for selected tests. help-ttype: Main measured variable. +help-url: + URL with current configuration. If there is no "Copy URL" button, use triple + click. diff --git a/resources/tools/dash/app/pal/stats/layout.py b/resources/tools/dash/app/pal/stats/layout.py index 8b4de8491d..cbb8cc7781 100644 --- a/resources/tools/dash/app/pal/stats/layout.py +++ b/resources/tools/dash/app/pal/stats/layout.py @@ -39,6 +39,12 @@ class Layout: DEFAULT_JOB = "csit-vpp-perf-mrr-daily-master-2n-icx" + URL_STYLE = { + "background-color": "#d2ebf5", + "border-color": "#bce1f1", + "color": "#135d7c" + } + def __init__(self, app: Flask, html_layout_file: str, spec_file: str, graph_layout_file: str, data_spec_file: str, tooltip_file: str, time_period: int=None) -> None: @@ -253,10 +259,13 @@ class Layout: lst_job[1], lst_job[3], lst_job[4])) } - def _show_tooltip(self, id: str, title: str) -> list: + def _show_tooltip(self, id: str, title: str, + clipboard_id: str=None) -> list: """ """ return [ + dcc.Clipboard(target_id=clipboard_id, title="Copy URL") \ + if clipboard_id else str(), f"{title} ", dbc.Badge( id=id, @@ -403,18 +412,29 @@ class Layout: color="info" ), dcc.Download(id="download-data") - ]), + ]) ] ), dbc.Col( # Show URL width=10, children=[ - dbc.Card( - id="card-url", - body=True, - class_name="gy-2 p-0", - children=[] - ), + dbc.InputGroup( + class_name="me-1", + children=[ + dbc.InputGroupText( + style=self.URL_STYLE, + children=self._show_tooltip( + "help-url", "URL", "input-url") + ), + dbc.Input( + id="input-url", + readonly=True, + type="url", + style=self.URL_STYLE, + value="" + ) + ] + ) ] ) ] @@ -590,7 +610,7 @@ class Layout: Output("control-panel", "data"), # Store Output("graph-passed", "figure"), Output("graph-duration", "figure"), - Output("card-url", "children"), + Output("input-url", "value"), Output("ri-ttypes", "options"), Output("ri-cadences", "options"), Output("dd-tbeds", "options"), @@ -725,14 +745,7 @@ class Layout: ctrl_panel.panel, fig_passed, fig_duration, - [ # URL - dcc.Clipboard( - target_id="card-url", - title="Copy URL", - style={"display": "inline-block"} - ), - new_url - ] + new_url ] ret_val.extend(ctrl_panel.values()) return ret_val diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py index 6b68070bde..6d9eca66f8 100644 --- a/resources/tools/dash/app/pal/trending/layout.py +++ b/resources/tools/dash/app/pal/trending/layout.py @@ -75,6 +75,12 @@ class Layout: "nfv_density-dcr_memif-chain": "CNF Service Chains Routing", } + URL_STYLE = { + "background-color": "#d2ebf5", + "border-color": "#bce1f1", + "color": "#135d7c" + } + def __init__(self, app: Flask, html_layout_file: str, spec_file: str, graph_layout_file: str, data_spec_file: str, tooltip_file: str, time_period: str=None) -> None: @@ -235,10 +241,13 @@ class Layout: def label(self, key: str) -> str: return self.LABELS.get(key, key) - def _show_tooltip(self, id: str, title: str) -> list: + def _show_tooltip(self, id: str, title: str, + clipboard_id: str=None) -> list: """ """ return [ + dcc.Clipboard(target_id=clipboard_id, title="Copy URL") \ + if clipboard_id else str(), f"{title} ", dbc.Badge( id=id, @@ -766,7 +775,7 @@ class Layout: dbc.Button( id="btn-download-data", children=self._show_tooltip( - "help-download", "Download"), + "help-download", "Download Data"), class_name="me-1", color="info" ), @@ -777,19 +786,23 @@ class Layout: dbc.Col( # Show URL width=10, children=[ - dbc.Card( - id="card-url", - body=True, - class_name="gy-2 p-0", + dbc.InputGroup( + class_name="me-1", children=[ - dcc.Clipboard( - target_id="card-url", - title="Copy URL", - style={"display": "inline-block"} + dbc.InputGroupText( + style=self.URL_STYLE, + children=self._show_tooltip( + "help-url", "URL", "input-url") ), - url + dbc.Input( + id="input-url", + readonly=True, + type="url", + style=self.URL_STYLE, + value=url + ) ] - ), + ) ] ) ] -- cgit 1.2.3-korg