C-Dash: Small changes in styling

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

6 files changed, 348 insertions, 274 deletions

diff --git a/csit.infra.dash/app/cdash/news/layout.py b/csit.infra.dash/app/cdash/news/layout.py
index 02275214a5..959d54d690 100644
--- a/csit.infra.dash/app/cdash/news/layout.py
+++ b/csit.infra.dash/app/cdash/news/layout.py
@@ -380,14 +380,6 @@ class Layout:
         :rtype: list
         """
         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=[
@@ -448,7 +440,7 @@ class Layout:
                         [
                             dbc.Button(
                                 id="plot-btn-url",
-                                children="URL",
+                                children="Show URL",
                                 class_name="me-1",
                                 color="info",
                                 style={
diff --git a/csit.infra.dash/app/cdash/report/layout.py b/csit.infra.dash/app/cdash/report/layout.py
index d4720d91fc..6f40019583 100644
--- a/csit.infra.dash/app/cdash/report/layout.py
+++ b/csit.infra.dash/app/cdash/report/layout.py
@@ -503,132 +503,164 @@ class Layout:
             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={"type": "ctrl-cl", "index": "frmsize-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-framesize",
+                                    "Frame Size"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "frmsize"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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={"type": "ctrl-cl", "index": "core-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=False,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-cores",
+                                    "Number of Cores"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "core"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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={"type": "ctrl-cl", "index": "tsttype-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-ttype",
+                                    "Test Type"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "tsttype"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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="normalize",
-                                options=[{
-                                    "value": "normalize",
-                                    "label": (
-                                        "Normalize results to CPU "
-                                        "frequency 2GHz"
-                                    )
-                                }],
-                                value=[],
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-normalize",
+                                    "Normalization"
+                                )
                             ),
-                        ]
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id="normalize",
+                                        options=[{
+                                            "value": "normalize",
+                                            "label": (
+                                                "Normalize to CPU frequency "
+                                                "2GHz"
+                                            )
+                                        }],
+                                        value=[],
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ]
+                            )
+                        ],
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
@@ -743,7 +775,7 @@ class Layout:
                         [
                             dbc.Button(
                                 id="plot-btn-url",
-                                children="URL",
+                                children="Show URL",
                                 class_name="me-1",
                                 color="info",
                                 style={
diff --git a/csit.infra.dash/app/cdash/report/layout.yaml b/csit.infra.dash/app/cdash/report/layout.yaml
index 14ecdf57e6..4f9f7ac2a7 100644
--- a/csit.infra.dash/app/cdash/report/layout.yaml
+++ b/csit.infra.dash/app/cdash/report/layout.yaml
@@ -25,15 +25,15 @@ plot-throughput:
     tickcolor: "rgb(220, 220, 220)"
     zeroline: False
     range: [0, 50]
-  autosize: False
+  autosize: True
   margin:
     t: 50
     b: 0
     l: 80
     r: 20
   showlegend: False
-  width: 700
-  height: 900
+  # width: 700
+  height: 800
   paper_bgcolor: "#fff"
   plot_bgcolor: "#fff"
   hoverlabel:
@@ -66,15 +66,15 @@ plot-latency:
     tickcolor: "rgb(220, 220, 220)"
     zeroline: False
     range: [0, 50]
-  autosize: False
+  autosize: True
   margin:
     t: 50
     b: 0
     l: 80
     r: 20
   showlegend: False
-  width: 700
-  height: 900
+  # width: 700
+  height: 800
   paper_bgcolor: "#fff"
   plot_bgcolor: "#fff"
   hoverlabel:
diff --git a/csit.infra.dash/app/cdash/stats/layout.py b/csit.infra.dash/app/cdash/stats/layout.py
index 8a206f1813..dace219aae 100644
--- a/csit.infra.dash/app/cdash/stats/layout.py
+++ b/csit.infra.dash/app/cdash/stats/layout.py
@@ -353,75 +353,95 @@ class Layout:
             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"],
-                        input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-dut",
+                                    "DUT"
+                                )
+                            ),
+                            dbc.RadioItems(
+                                id="ri-duts",
+                                inline=True,
+                                value=self._default["dut"],
+                                options=self._default["duts"],
+                                class_name="form-control"
+                            )
+                        ],
+                        size="sm"
                     )
                 ]
             ),
             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"],
-                        input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-ttype",
+                                    "Test Type"
+                                )
+                            ),
+                            dbc.RadioItems(
+                                id="ri-ttypes",
+                                inline=True,
+                                value=self._default["ttype"],
+                                options=self._default["ttypes"],
+                                class_name="form-control"
+                            )
+                        ],
+                        size="sm"
                     )
                 ]
             ),
             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"],
-                        input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-cadence",
+                                    "Cadence"
+                                )
+                            ),
+                            dbc.RadioItems(
+                                id="ri-cadences",
+                                inline=True,
+                                value=self._default["cadence"],
+                                options=self._default["cadences"],
+                                class_name="form-control"
+                            )
+                        ],
+                        size="sm"
                     )
                 ]
             ),
             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.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                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"]
+                            )
+                        ],
+                        size="sm"
                     )
                 ]
             ),
@@ -485,7 +505,7 @@ class Layout:
                         [
                             dbc.Button(
                                 id="plot-btn-url",
-                                children="URL",
+                                children="Show URL",
                                 class_name="me-1",
                                 color="info",
                                 style={
diff --git a/csit.infra.dash/app/cdash/trending/layout.py b/csit.infra.dash/app/cdash/trending/layout.py
index a8f6b6a054..f5a99e5119 100644
--- a/csit.infra.dash/app/cdash/trending/layout.py
+++ b/csit.infra.dash/app/cdash/trending/layout.py
@@ -459,134 +459,164 @@ class Layout:
             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={"type": "ctrl-cl", "index": "frmsize-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-framesize",
+                                    "Frame Size"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "frmsize"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "frmsize"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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={"type": "ctrl-cl", "index": "core-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=False,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-cores",
+                                    "Number of Cores"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "core"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "core"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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={"type": "ctrl-cl", "index": "tsttype-all"},
-                                options=C.CL_ALL_DISABLED,
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-ttype",
+                                    "Test Type"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype-all"
+                                        },
+                                        options=C.CL_ALL_DISABLED,
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ],
+                                width=2
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id={
+                                            "type": "ctrl-cl",
+                                            "index": "tsttype"
+                                        },
+                                        inline=True
+                                    )
+                                ]
                             )
                         ],
-                        width=3
-                    ),
-                    dbc.Col(
-                        children=[
-                            dbc.Checklist(
-                                id={"type": "ctrl-cl", "index": "tsttype"},
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
-                            )
-                        ]
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
             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="normalize",
-                                options=[
-                                    {
-                                        "value": "normalize",
-                                        "label": (
-                                            "Normalize results to CPU "
-                                            "frequency 2GHz"
-                                        )
-                                    }
-                                ],
-                                value=[],
-                                inline=True,
-                                switch=False,
-                                input_class_name="border-info bg-info"
+                    dbc.InputGroup(
+                        [
+                            dbc.InputGroupText(
+                                children=show_tooltip(
+                                    self._tooltips,
+                                    "help-normalize",
+                                    "Normalization"
+                                )
+                            ),
+                            dbc.Col(
+                                children=[
+                                    dbc.Checklist(
+                                        id="normalize",
+                                        options=[{
+                                            "value": "normalize",
+                                            "label": (
+                                                "Normalize to CPU frequency "
+                                                "2GHz"
+                                            )
+                                        }],
+                                        value=[],
+                                        inline=True,
+                                        class_name="ms-2"
+                                    )
+                                ]
                             )
-                        ]
+                        ],
+                        style={"align-items": "center"},
+                        size="sm"
                     )
                 ]
             ),
@@ -694,7 +724,7 @@ class Layout:
                         [
                             dbc.Button(
                                 id="plot-btn-url",
-                                children="URL",
+                                children="Show URL",
                                 class_name="me-1",
                                 color="info",
                                 style={
diff --git a/csit.infra.dash/app/cdash/utils/utils.py b/csit.infra.dash/app/cdash/utils/utils.py
index 461821d28b..58bdb05cdb 100644
--- a/csit.infra.dash/app/cdash/utils/utils.py
+++ b/csit.infra.dash/app/cdash/utils/utils.py
@@ -366,7 +366,7 @@ def get_list_group_items(tests: list) -> list:
                         "font-size": ".875em",
                         "color": get_color(i)
                     },
-                    input_class_name="border-danger bg-danger"
+                    class_name="info"
                 )
             ],
             class_name="p-0"