fix(dashboard): Add multiple dashboard fixes (#3714)

dashboard/lib/dropdowns.py

@@ -193,3 +193,97 @@ def create_compliance_dropdown(compliance: list) -> html.Div:
             ),
         ],
     )
+
+
+def create_severity_dropdown(severity: list) -> html.Div:
+    """
+    Dropdown to select the severity.
+    Args:
+        severity (list): List of severity.
+    Returns:
+        html.Div: Dropdown to select the severity.
+    """
+    return html.Div(
+        [
+            html.Label(
+                "Severity:", className="text-prowler-stone-900 font-bold text-sm"
+            ),
+            dcc.Dropdown(
+                id="severity-filter",
+                options=[{"label": i, "value": i} for i in severity],
+                value=["All"],
+                clearable=False,
+                multi=True,
+                style={"color": "#000000"},
+            ),
+        ],
+    )
+
+
+def create_service_dropdown(services: list) -> html.Div:
+    """
+    Dropdown to select the service.
+    Args:
+        services (list): List of services.
+    Returns:
+        html.Div: Dropdown to select the service.
+    """
+    return html.Div(
+        [
+            html.Label(
+                "Service:", className="text-prowler-stone-900 font-bold text-sm"
+            ),
+            dcc.Dropdown(
+                id="service-filter",
+                options=[{"label": i, "value": i} for i in services],
+                value=["All"],
+                clearable=False,
+                multi=True,
+                style={"color": "#000000"},
+            ),
+        ],
+    )
+
+
+def create_status_dropdown(status: list) -> html.Div:
+    """
+    Dropdown to select the status.
+    Args:
+        status (list): List of status.
+    Returns:
+        html.Div: Dropdown to select the status.
+    """
+    return html.Div(
+        [
+            html.Label("Status:", className="text-prowler-stone-900 font-bold text-sm"),
+            dcc.Dropdown(
+                id="status-filter",
+                options=[{"label": i, "value": i} for i in status],
+                value=["All"],
+                clearable=False,
+                multi=True,
+                style={"color": "#000000"},
+            ),
+        ],
+    )
+
+
+def create_table_row_dropdown(table_rows: list) -> html.Div:
+    """
+    Dropdown to select the number of rows in the table.
+    Args:
+        table_rows (list): List of number of rows.
+    Returns:
+        html.Div: Dropdown to select the number of rows in the table.
+    """
+    return html.Div(
+        [
+            dcc.Dropdown(
+                id="table-rows",
+                options=[{"label": i, "value": i} for i in table_rows],
+                value=table_rows[0],
+                clearable=False,
+                style={"color": "#000000", "margin-right": "10px"},
+            ),
+        ],
+    )

dashboard/lib/layouts.py

@@ -6,6 +6,10 @@ def create_layout_overview(
     date_dropdown: html.Div,
     region_dropdown: html.Div,
     download_button: html.Button,
+    severity_dropdown: html.Div,
+    service_dropdown: html.Div,
+    table_row_dropdown: html.Div,
+    status_dropdown: html.Div,
 ) -> html.Div:
     """
     Create the layout of the dashboard.
@@ -39,15 +43,23 @@ def create_layout_overview(
             ),
             html.Div(
                 [
-                    html.Div(className="flex", id="aws_card"),
-                    html.Div(className="flex", id="azure_card"),
-                    html.Div(className="flex", id="gcp_card"),
-                    html.Div(className="flex", id="k8s_card"),
+                    html.Div([severity_dropdown], className=""),
+                    html.Div([service_dropdown], className=""),
+                    html.Div([status_dropdown], className=""),
+                ],
+                className="grid gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-0",
+            ),
+            html.Div(
+                [
+                    html.Div(className="flex", id="aws_card", n_clicks=0),
+                    html.Div(className="flex", id="azure_card", n_clicks=0),
+                    html.Div(className="flex", id="gcp_card", n_clicks=0),
+                    html.Div(className="flex", id="k8s_card", n_clicks=0),
                 ],
                 className="grid gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-y-0",
             ),
             html.H4(
-                "Count of Failed Findings by severity",
+                "Count of Findings by severity",
                 className="text-prowler-stone-900 text-lg font-bold",
             ),
             html.Div(
@@ -70,10 +82,23 @@ def create_layout_overview(
             html.Div(
                 [
                     html.H4(
-                        "Top 25 Failed Findings by Severity",
+                        "Top Findings by Severity",
                         className="text-prowler-stone-900 text-lg font-bold",
                     ),
-                    download_button,
+                    html.Div(
+                        [
+                            (
+                                html.Label(
+                                    "Table Rows:",
+                                    className="text-prowler-stone-900 font-bold text-sm",
+                                    style={"margin-right": "10px"},
+                                )
+                            ),
+                            table_row_dropdown,
+                            download_button,
+                        ],
+                        className="flex justify-between items-center",
+                    ),
                     dcc.Download(id="download-data"),
                 ],
                 className="flex justify-between items-center",