feat(dashboard): Improve table overview (#4015)

Co-authored-by: Sophia Dao <sophia@prowler.com>
Co-authored-by: Sergio Garcia <38561120+sergargar@users.noreply.github.com>

dashboard/__main__.py

@@ -27,7 +27,7 @@ cli.show_server_banner = lambda *x: click.echo(
 # Initialize the app - incorporate css
 dashboard = dash.Dash(
     __name__,
-    external_stylesheets=[dbc.themes.DARKLY],
+    external_stylesheets=[dbc.themes.FLATLY],
     use_pages=True,
     suppress_callback_exceptions=True,
     title="Prowler Dashboard",
@@ -60,7 +60,9 @@ def generate_nav_links(current_path):
         link_content = html.Span(
             [
                 html.Img(src=icon_url, className="w-5"),
-                html.Span(page["name"], className="font-medium text-base leading-6"),
+                html.Span(
+                    page["name"], className="font-medium text-base leading-6 text-white"
+                ),
             ],
             className="flex justify-center lg:justify-normal items-center gap-x-3 py-2 px-3",
         )
@@ -96,7 +98,8 @@ def generate_help_menu():
                     [
                         html.Img(src=link["icon"], className="w-5"),
                         html.Span(
-                            link["title"], className="font-medium text-base leading-6"
+                            link["title"],
+                            className="font-medium text-base leading-6 text-white",
                         ),
                     ],
                     className="flex items-center gap-x-3 py-2 px-3",
@@ -160,7 +163,7 @@ def update_nav_bar(pathname):
                                     html.Img(src="assets/favicon.ico", className="w-5"),
                                     "Subscribe to prowler SaaS",
                                 ],
-                                className="flex items-center gap-x-3",
+                                className="flex items-center gap-x-3 text-white",
                             ),
                         ],
                         href="https://prowler.com/",

dashboard/assets/images/icons/arrows.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 443 511.62"><path fill-rule="nonzero" d="M152.93 286.97c0 17.1-13.87 30.97-30.97 30.97-17.11 0-30.98-13.87-30.98-30.97v-177.4l-37.45 40.31c-11.63 12.5-31.19 13.2-43.68 1.57-12.49-11.62-13.19-31.18-1.57-43.68L99.33 9.79l2.06-1.94c12.69-11.35 32.2-10.26 43.55 2.43l91.05 101.47c11.35 12.69 10.26 32.2-2.43 43.55-12.68 11.36-32.19 10.27-43.55-2.42l-37.08-41.33v175.42zm236.24 71.77c11.35-12.69 30.86-13.78 43.55-2.43 12.69 11.36 13.78 30.87 2.42 43.56L344.1 501.34c-11.36 12.69-30.87 13.78-43.55 2.42l-2.02-1.97-91.09-97.95c-11.63-12.49-10.93-32.05 1.57-43.67 12.49-11.63 32.05-10.93 43.67 1.57l37.46 40.31V231.53c0-17.11 13.87-30.97 30.97-30.97s30.97 13.86 30.97 30.97v168.54l37.09-41.33z"/></svg>

dashboard/assets/images/icons/dropdown.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1.001953125em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1013.7 90.8C997.8 75.5 972.4 76 957.1 92L510.9 557.1 73.2 90.8C58 74.7 32.7 73.9 16.6 89 0.5 104.1-0.3 129.4 14.8 145.5l466.6 497.1 1.5 1.5c0.2 0.2 0.4 0.4 0.7 0.6 0.3 0.3 0.6 0.5 0.9 0.8 0.3 0.3 0.6 0.5 0.9 0.7 0.2 0.2 0.4 0.4 0.7 0.6 0.3 0.2 0.6 0.5 0.9 0.7 0.2 0.2 0.5 0.4 0.7 0.5l0.9 0.6c0.3 0.2 0.5 0.4 0.8 0.5 0.3 0.2 0.6 0.3 0.9 0.5 0.3 0.2 0.6 0.3 0.9 0.5 0.3 0.2 0.5 0.3 0.8 0.4 0.3 0.2 0.6 0.3 1 0.5 0.3 0.1 0.5 0.3 0.8 0.4 0.3 0.2 0.7 0.3 1 0.5 0.2 0.1 0.5 0.2 0.7 0.3 0.4 0.2 0.7 0.3 1.1 0.4 0.2 0.1 0.5 0.2 0.7 0.3 0.4 0.1 0.8 0.3 1.2 0.4 0.2 0.1 0.5 0.1 0.7 0.2l1.2 0.3c0.2 0.1 0.4 0.1 0.7 0.2 0.4 0.1 0.8 0.2 1.3 0.3 0.2 0 0.4 0.1 0.6 0.1 0.4 0.1 0.9 0.2 1.3 0.2 0.2 0 0.4 0.1 0.6 0.1 0.5 0.1 0.9 0.1 1.4 0.2 0.2 0 0.4 0 0.6 0.1 0.5 0 1 0.1 1.5 0.1h4.6c0.5 0 1-0.1 1.5-0.1 0.2 0 0.4 0 0.5-0.1 0.5 0 0.9-0.1 1.4-0.2 0.2 0 0.4-0.1 0.6-0.1 0.4-0.1 0.9-0.1 1.3-0.2 0.2 0 0.4-0.1 0.6-0.1l1.2-0.3c0.2-0.1 0.4-0.1 0.7-0.2l1.2-0.3c0.2-0.1 0.5-0.1 0.7-0.2 0.4-0.1 0.8-0.2 1.1-0.4 0.2-0.1 0.5-0.2 0.7-0.3 0.4-0.1 0.7-0.3 1.1-0.4 0.3-0.1 0.5-0.2 0.8-0.3 0.3-0.1 0.7-0.3 1-0.5 0.3-0.1 0.5-0.2 0.8-0.4 0.3-0.2 0.6-0.3 0.9-0.5 0.3-0.1 0.6-0.3 0.8-0.4 0.3-0.2 0.6-0.3 0.8-0.5 0.3-0.2 0.6-0.3 0.9-0.5 0.3-0.2 0.5-0.3 0.8-0.5l0.9-0.6c0.2-0.2 0.4-0.3 0.7-0.5 0.3-0.2 0.6-0.5 1-0.7 0.2-0.1 0.4-0.3 0.6-0.5 0.3-0.3 0.7-0.5 1-0.8 0.2-0.1 0.3-0.3 0.5-0.5 0.5-0.5 1-0.9 1.5-1.4l0.9-0.9 475.4-495.6c15.3-15.7 14.7-41.1-1.2-56.3z" fill="#898989" /></svg>

dashboard/assets/styles/dist/output.css

@@ -5,7 +5,7 @@
 /* Use this file to add custom styles using Tailwind's utility classes. */
 
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -216,6 +216,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -239,9 +241,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -497,6 +499,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -547,14 +553,18 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .custom-grid {
   grid-template-columns: minmax(0, 16fr) repeat(11, minmax(0, 11fr));
 }
 
-.visible {
-  visibility: visible;
+.collapse {
+  visibility: collapse;
 }
 
 .relative {
@@ -594,6 +604,10 @@ video {
   margin-right: auto;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -618,6 +632,14 @@ video {
   margin-top: auto;
 }
 
+.mb-\[30px\] {
+  margin-bottom: 30px;
+}
+
+.mt-\[30px\] {
+  margin-top: 30px;
+}
+
 .block {
   display: block;
 }
@@ -634,14 +656,6 @@ video {
   display: inline-flex;
 }
 
-.min-w-36 {
-  min-width: 9rem;
-}
-
-.min-w-44 {
-  min-width: 11rem;
-}
-
 .table {
   display: table;
 }
@@ -662,6 +676,10 @@ video {
   max-height: 300px;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -670,6 +688,50 @@ video {
   width: 2rem;
 }
 
+.w-\[10\%\] {
+  width: 10%;
+}
+
+.w-\[10\.5\%\] {
+  width: 10.5%;
+}
+
+.w-\[11\%\] {
+  width: 11%;
+}
+
+.w-\[13\.5\%\] {
+  width: 13.5%;
+}
+
+.w-\[14\.5\%\] {
+  width: 14.5%;
+}
+
+.w-\[15\%\] {
+  width: 15%;
+}
+
+.w-\[36\%\] {
+  width: 36%;
+}
+
+.w-\[4\%\] {
+  width: 4%;
+}
+
+.w-\[40\.5\%\] {
+  width: 40.5%;
+}
+
+.w-\[9\%\] {
+  width: 9%;
+}
+
+.w-\[9\.5\%\] {
+  width: 9.5%;
+}
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -679,6 +741,10 @@ video {
   width: 100%;
 }
 
+.min-w-36 {
+  min-width: 9rem;
+}
+
 .grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -796,30 +862,31 @@ video {
 }
 
 .bg-gradient-failed {
-  background-image: linear-gradient(127.43deg, #F1F5F8 -177.68%, #e67272 87.35%);
+  background-image: linear-gradient(127.43deg, #F1F5F8 -177.68%, #EF4444 87.35%);
 }
 
 .bg-gradient-passed {
-  background-image: linear-gradient(127.43deg, #F1F5F8 -177.68%, #54d283 87.35%);
-}
-
-.bg-gradient-muted {
-    background-image: linear-gradient(127.43deg, #F1F5F8 -177.68%, #636c78 87.35%);
-}
-
-.p-3 {
-  padding: 0.75rem;
+  background-image: linear-gradient(127.43deg, #F1F5F8 -177.68%, #4ADE80 87.35%);
 }
 
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -854,6 +921,10 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -929,6 +1000,11 @@ video {
   color: rgb(41 37 36 / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .opacity-90 {
   opacity: 0.9;
 }
@@ -992,19 +1068,6 @@ video {
   /* Firefox */
 }
 
-/*Styles for previous-vext-container from table*/
-.previous-next-container {
-  margin-top: 1rem;
-  color: #000;
-}
-
-/*Style for input in filter table*/
-.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) {
-  color: #FFF !important;
-  opacity: 1 !important;
-}
-
-
 #_dash-app-content {
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
@@ -1041,6 +1104,10 @@ video {
   color: rgb(41 37 36 / var(--tw-text-opacity));
 }
 
+#_dash-app-content .accordion .accordion-collapse.collapse {
+  visibility: visible;
+}
+
 #_dash-app-content .accordion .accordion-button:not(.collapsed) {
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
@@ -1157,6 +1224,10 @@ video {
   width: auto;
 }
 
+.overview-table .card .collapse {
+  visibility: visible;
+}
+
 @media (min-width: 1536px) {
   .\32xl\:container {
     width: 100%;
@@ -1299,3 +1370,37 @@ video {
     row-gap: 0px;
   }
 }
+
+@media (min-width: 1536px) {
+  .\32xl\:w-\[10\%\] {
+    width: 10%;
+  }
+
+  .\32xl\:w-\[12\.5\%\] {
+    width: 12.5%;
+  }
+
+  .\32xl\:w-\[14\%\] {
+    width: 14%;
+  }
+
+  .\32xl\:w-\[15\.5\%\] {
+    width: 15.5%;
+  }
+
+  .\32xl\:w-\[2\%\] {
+    width: 2%;
+  }
+
+  .\32xl\:w-\[48\%\] {
+    width: 48%;
+  }
+
+  .\32xl\:w-\[71\.5\%\] {
+    width: 71.5%;
+  }
+
+  .\32xl\:w-\[9\%\] {
+    width: 9%;
+  }
+}

dashboard/lib/layouts.py

@@ -11,6 +11,7 @@ def create_layout_overview(
     service_dropdown: html.Div,
     table_row_dropdown: html.Div,
     status_dropdown: html.Div,
+    table_div_header: html.Div,
 ) -> html.Div:
     """
     Create the layout of the dashboard.
@@ -40,7 +41,7 @@ def create_layout_overview(
                     html.Div([account_dropdown], className=""),
                     html.Div([region_dropdown], className=""),
                 ],
-                className="grid gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-0",
+                className="grid gap-x-4 mt-[30px] mb-[30px] sm:grid-cols-2 lg:grid-cols-3",
             ),
             html.Div(
                 [
@@ -48,7 +49,7 @@ def create_layout_overview(
                     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",
+                className="grid gap-x-4 mb-[30px] sm:grid-cols-2 lg:grid-cols-3",
             ),
             html.Div(
                 [
@@ -57,11 +58,11 @@ def create_layout_overview(
                     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",
+                className="grid gap-x-4 mb-[30px] sm:grid-cols-2 lg:grid-cols-4",
             ),
             html.H4(
                 "Count of Findings by severity",
-                className="text-prowler-stone-900 text-lg font-bold",
+                className="text-prowler-stone-900 text-lg font-bold mb-[30px]",
             ),
             html.Div(
                 [
@@ -78,7 +79,7 @@ def create_layout_overview(
                         id="line_plot",
                     ),
                 ],
-                className="grid gap-x-4 gap-y-4 grid-cols-12 lg:gap-y-0",
+                className="grid gap-x-4 grid-cols-12 mb-[30px]",
             ),
             html.Div(
                 [
@@ -105,9 +106,10 @@ def create_layout_overview(
                 ],
                 className="flex justify-between items-center",
             ),
+            table_div_header,
             html.Div(id="table", className="grid"),
         ],
-        className="grid gap-x-8 gap-y-8 2xl:container mx-auto",
+        className="grid gap-x-8 2xl:container mx-auto",
     )
 
 

dashboard/src/input.css

@@ -8,10 +8,6 @@
 @tailwind components;
 @tailwind utilities;
 
-#_dash-app-content {
-  @apply bg-prowler-stone-500;
-}
-
 @layer components {
   .custom-grid {
     grid-template-columns: minmax(0, 16fr) repeat(11, minmax(0, 11fr));
@@ -20,6 +16,24 @@
   .custom-grid-large {
     grid-template-columns: minmax(0, 10fr) repeat(11, minmax(0, 11fr));
   }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+#_dash-app-content {
+  @apply bg-prowler-stone-500;
+}
+
 /* Styles for the accordion in the compliance page */
 #_dash-app-content .accordion .accordion-header .accordion-button {
   @apply text-prowler-stone-900 inline-block px-4 text-xs font-bold uppercase transition-all rounded-lg bg-prowler-stone-300 hover:bg-prowler-stone-900/10;
@@ -29,6 +43,10 @@
   @apply text-prowler-stone-900 bg-prowler-white rounded-lg;
 }
 
+#_dash-app-content .accordion .accordion-collapse.collapse {
+  @apply visible
+}
+
 #_dash-app-content .accordion .accordion-button:not(.collapsed) {
   @apply text-prowler-stone-900 bg-prowler-stone-500;
 }
@@ -99,14 +117,6 @@
   @apply absolute right-6 top-2 w-auto h-8 z-50;
 }
 
-@layer utilities {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+.overview-table .card .collapse {
+ @apply visible
 }

dashboard/tailwind.config.js

@@ -1,11 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./assets/**/*.{py,html,js}",
-    "./components/**/*.{py,html,js}",
-    "./pages/**/*.{py,html,js}",
-    "./utils/**/*.{py,html,js}",
-    "./app.py",
+    "*.{py,html,js}",
+    "./**/*.{py,html,js}",
+    "./**/**/*.{py,html,js}",
   ],
   theme: {
     extend: {