mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-11 05:54:17 +00:00
Hugo P.Brito
e392299d2c
Redesigns the Attack Paths graph around the structure of the attack: - New _lib/template-graph.ts groups concrete nodes by resource type into one synthetic node per type (with a count badge), dedupes inter-group edges, drops intra-group self-loops, and appends a terminal Outcome node wired from the sink representatives. Account and finding nodes are filtered out of this structural view. - _lib/layout.ts adds 'attackGroup' and 'outcome' node types and a MarkerType.ArrowClosed markerEnd on every edge so attack direction is explicit. 'attackGroup' is intentionally named off the reserved React Flow 'group' type, which otherwise paints a default gray container behind the node. - New GroupNode (stacked-card visual, type icon, count badge, click-to-expand) and OutcomeNode (severity-colored terminal with Crosshair) components, registered in NODE_TYPES. - useGraphStore gains templateSource, outcome, expandedTypes and toggleExpandedType; the rendered graph is the collapsed template, recomputed via buildTemplateGraph on every state change. - attack-paths-page handleNodeClick: grouped type -> expand; expanded concrete resource -> collapse its type; outcome node is inert. A key based on expandedTypes forces React Flow to refit on expansion. Banner copy updated. - graph-legend.tsx skips the outcome marker label so the legend does not list it as a resource type. - Unit tests for buildTemplateGraph (grouping, edge dedup, expand, sink->outcome wiring, finding/account drop, empty input) and for the new edge markerEnd in layoutWithDagre.
Description
This repository hosts the UI component for Prowler, providing a user-friendly web interface to interact seamlessly with Prowler's features.
🚀 Production deployment
Docker deployment
Clone the repository
# HTTPS
git clone https://github.com/prowler-cloud/ui.git
# SSH
git clone git@github.com:prowler-cloud/ui.git
Build the Docker image
docker build -t prowler-cloud/ui . --target prod
Run the Docker container
docker run -p 3000:3000 prowler-cloud/ui
Local deployment
Clone the repository
# HTTPS
git clone https://github.com/prowler-cloud/ui.git
# SSH
git clone git@github.com:prowler-cloud/ui.git
Build the project
pnpm run build
Run the production server
pnpm start
🧪 Development deployment
Docker deployment
Clone the repository
# HTTPS
git clone https://github.com/prowler-cloud/ui.git
# SSH
git clone git@github.com:prowler-cloud/ui.git
Build the Docker image
docker build -t prowler-cloud/ui . --target dev
Run the Docker container
docker run -p 3000:3000 prowler-cloud/ui
Local deployment
Clone the repository
# HTTPS
git clone https://github.com/prowler-cloud/ui.git
# SSH
git clone git@github.com:prowler-cloud/ui.git
Install dependencies
pnpm install
Note: The pnpm install command will automatically configure prek Git hooks for code quality checks. If hooks are not installed, run from the repo root:
prek install
Run the development server
pnpm run dev
Technologies Used
Git Hooks
The UI uses prek for pre-commit checks, configured in .pre-commit-config.yaml. pnpm install runs the postinstall script that installs hooks automatically. To re-install manually:
prek install --overwrite
On each commit, prek runs Prettier and ESLint against the staged files, plus a project-wide TypeScript check and the unit tests related to the staged changes. The full Next.js build runs in CI, not on commit.