feat(uti): set styles for url dialog

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

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
+                                    )
                                 ]
-                            ),
+                            )
                         ]
                     )
                 ]