chore(docs): update screenshots and docs of Prowler App (#5984)

.env

@@ -17,7 +17,7 @@ PROWLER_API_VERSION="latest"
 # If running Django and celery on host, use 'localhost', else use 'postgres-db'
 POSTGRES_HOST=postgres-db
 POSTGRES_PORT=5432
-POSTGRES_ADMIN_USER=prowler
+POSTGRES_ADMIN_USER=prowler_admin
 POSTGRES_ADMIN_PASSWORD=postgres
 POSTGRES_USER=prowler
 POSTGRES_PASSWORD=postgres

.gitignore

@@ -57,3 +57,6 @@ coverage*
 
 # Node
 node_modules
+
+# Persistent data
+_data/

README.md

@@ -49,7 +49,7 @@
 
 Prowler App is a web application that allows you to run Prowler in your cloud provider accounts and visualize the results in a user-friendly interface.
 
-![Prowler App](docs/img/compliance-app.png)
+![Prowler App](docs/img/overview.png)
 
 >More details at [Prowler App Documentation](https://docs.prowler.com/projects/prowler-open-source/en/latest/#prowler-app-installation)
 

docker-compose-dev.yml

@@ -5,7 +5,6 @@ services:
       context: ./api
       dockerfile: Dockerfile
       target: dev
-    image: prowler-api-dev
     environment:
       - DJANGO_SETTINGS_MODULE=config.django.devel
       - DJANGO_LOGGING_FORMATTER=${LOGGING_FORMATTER:-human_readable}
@@ -41,18 +40,18 @@ services:
     image: postgres:16.3-alpine
     hostname: "postgres-db"
     volumes:
-      - ./api/_data/postgres:/var/lib/postgresql/data
+      - ./_data/postgres:/var/lib/postgresql/data
     environment:
-      - POSTGRES_USER=${POSTGRES_ADMIN_USER:-prowler}
-      - POSTGRES_PASSWORD=${POSTGRES_ADMIN_PASSWORD:-S3cret}
-      - POSTGRES_DB=${POSTGRES_DB:-prowler_db}
+      - POSTGRES_USER=${POSTGRES_ADMIN_USER}
+      - POSTGRES_PASSWORD=${POSTGRES_ADMIN_PASSWORD}
+      - POSTGRES_DB=${POSTGRES_DB}
     env_file:
       - path: .env
         required: false
     ports:
       - "${POSTGRES_PORT:-5432}:${POSTGRES_PORT:-5432}"
     healthcheck:
-      test: ["CMD-SHELL", "sh -c 'pg_isready -U ${POSTGRES_ADMIN_USER:-prowler} -d ${POSTGRES_DB:-prowler_db}'"]
+      test: ["CMD-SHELL", "sh -c 'pg_isready -U ${POSTGRES_ADMIN_USER} -d ${POSTGRES_DB}'"]
       interval: 5s
       timeout: 5s
       retries: 5
@@ -78,7 +77,6 @@ services:
       context: ./api
       dockerfile: Dockerfile
       target: dev
-    image: prowler-worker-dev
     environment:
       - DJANGO_SETTINGS_MODULE=config.django.devel
     env_file:
@@ -98,7 +96,6 @@ services:
       context: ./api
       dockerfile: Dockerfile
       target: dev
-    image: prowler-worker-dev
     environment:
       - DJANGO_SETTINGS_MODULE=config.django.devel
     env_file:

docs/index.md

@@ -2,7 +2,7 @@
 
 ## Prowler App
 
-![Prowler App](img/compliance-app.png)
+![Prowler App](img/overview.png)
 
 Prowler App is a web application that allows you to run Prowler in a simple way. It provides a user-friendly interface to configure and run scans, view results, and manage your security findings.
 
@@ -362,21 +362,19 @@ Log in with your email and password to start using the Prowler App.
 <img src="img/log-in.png" alt="Log In" width="285"/>
 
 #### **Add a Provider**
-- Go to `Settings > Providers` and click `Add Account`.
+- Go to `Settings > Cloud Providers` and click `Add Account`.
 - Select the provider you want to scan (AWS, GCP, Azure, Kubernetes).
 - Enter the provider's ID (AWS Account ID, GCP Project ID, Azure Subscription ID, Kubernetes Cluster) and optional alias.
 - Follow the instructions to add your credentials.
 
 #### **Start a Scan**
-Once your credentials are added and tested, click `Start Now` to run your first scan.
+After successfully adding and testing your credentials, Prowler will start scanning your cloud environment, click on the `Go to Scans` button to see the progress.
 
 #### **View Results**
-Monitor your scan's progress in the `Scans` section and analyze the findings in:
+While the scan is running, start exploring the findings in these sections:
 
-- **Overview**: High-level summary of the scan.
-- **Findings**: Detailed list of issues detected. <img src="img/findings.png" alt="Findings" width="700"/>
-- **Compliance**: Insights into compliance status. <img src="img/compliance.png" alt="Compliance" width="700"/>
-- **Services**: Breakdown of services scanned. <img src="img/services.png" alt="Services" width="700"/>
+- **Overview**: High-level summary of the scans. <img src="../../img/overview.png" alt="Overview" width="700"/>
+- **Compliance**: Insights into compliance status. <img src="../../img/compliance.png" alt="Compliance" width="700"/>
 
 > See more details about the Prowler App usage in the [Prowler App](tutorials/prowler-app.md) section.
 

docs/tutorials/prowler-app.md

@@ -18,12 +18,14 @@ Once you’ve signed up, log in with your email and password to start using the
 
 <img src="../../img/log-in.png" alt="Log In" width="350"/>
 
+You will see the Overview page with no data yet, so let's start adding a provider to scan your cloud environment.
+
 ---
 
 ## **Step 3: Add a Provider**
-To run your first scan:
+To run your first scan, you need to add a cloud provider account. Prowler App supports AWS, Azure, GCP, and Kubernetes.
 
-1. Navigate to `Settings > Providers`.
+1. Navigate to `Settings > Cloud Providers`.
 2. Click `Add Account` to set up a new provider and provide your credentials:
 
 <img src="../../img/add-provider.png" alt="Add Provider" width="700"/>
@@ -33,6 +35,10 @@ To run your first scan:
 ## **Step 4: Configure the Provider**
 Choose the provider you want to scan from the following options:
 
+<img src="../../img/select-provider.png" alt="Select a Provider" width="700"/>
+
+Once you’ve selected a provider, you need to provide the Provider UID:
+
 - **AWS**: Enter your AWS Account ID.
 - **GCP**: Enter your GCP Project ID.
 - **Azure**: Enter your Azure Subscription ID.
@@ -40,11 +46,9 @@ Choose the provider you want to scan from the following options:
 
 Optionally, provide a **Provider Alias** for easier identification. Follow the instructions provided to add your credentials:
 
-<img src="../../img/add-account.png" alt="Add Account" width="700"/>
-
 ---
 ### **Step 4.1: AWS Credentials**
-For AWS, Prowler App can use either IAM Access Keys or assume an IAM Role. Here’s how to set up each:
+For AWS, enter your `AWS Account ID` and choose one of the following methods to connect:
 
 #### **Step 4.1.1: IAM Access Keys**
 1. Select `Connect via Credentials`.
@@ -95,15 +99,15 @@ By default, the `kubeconfig` file is located at `~/.kube/config`.
 ---
 
 ## **Step 5: Test Connection**
-After adding your credentials of your cloud account, click the `Test Connection` button to verify that the Prowler App can successfully connect to your provider:
+After adding your credentials of your cloud account, click the `Launch` button to verify that the Prowler App can successfully connect to your provider:
 
 <img src="../../img/test-connection-button.png" alt="Test Connection" width="700"/>
 
 
-## **Step 6: Start Your First Scan**
-After successfully adding and testing your credentials, click the `Start Now` button to initiate your first scan:
+## **Step 6: Scan started**
+After successfully adding and testing your credentials, Prowler will start scanning your cloud environment, click on the `Go to Scans` button to see the progress:
 
-<img src="../../img/start-now.png" alt="Start Now" width="700"/>
+<img src="../../img/provider-added.png" alt="Start Now" width="700"/>
 
 ???+ note
     Prowler will automatically scan all configured providers every **24 hours**, ensuring your cloud environment stays continuously monitored.
@@ -119,7 +123,10 @@ Track the progress of your scan in the `Scans` section:
 ## **Step 8: Analyze the Findings**
 While the scan is running, start exploring the findings in these sections:
 
-- **Overview**: High-level summary of the scan.
-- **Findings**: Detailed list of issues detected. <img src="../../img/findings.png" alt="Findings" width="700"/>
+- **Overview**: High-level summary of the scans. <img src="../../img/overview.png" alt="Overview" width="700"/>
 - **Compliance**: Insights into compliance status. <img src="../../img/compliance.png" alt="Compliance" width="700"/>
-- **Services**: Breakdown of services scanned. <img src="../../img/services.png" alt="Services" width="700"/>
+- **Issues**: Types of issues detected.
+
+<img src="../../img/issues.png" alt="Issues" width="300" style="text-align: center;"/>
+
+- **Browse All Findings**: Detailed list of findings detected, where you can filter by severity, service, and more. <img src="../../img/findings.png" alt="Findings" width="700"/>