From 9959eb6baef81d54a04cbe6c5eb3df5333339f2a Mon Sep 17 00:00:00 2001 From: Soufiane Fariss Date: Wed, 21 Aug 2024 18:33:58 +0200 Subject: [PATCH 1/6] web: edit explorer README --- web/explorer/DEVELOPMENT.md | 11 ++++---- web/explorer/README.md | 26 ++++++++++--------- web/explorer/index.html | 2 +- .../src/components/DescriptionPanel.vue | 24 +++++++++++++---- web/explorer/src/components/NavBar.vue | 6 ++--- 5 files changed, 43 insertions(+), 26 deletions(-) diff --git a/web/explorer/DEVELOPMENT.md b/web/explorer/DEVELOPMENT.md index dbfb3025f..e9b15709c 100644 --- a/web/explorer/DEVELOPMENT.md +++ b/web/explorer/DEVELOPMENT.md @@ -1,6 +1,6 @@ -# Development Guide for Capa Explorer Web +# Development Guide for capa explorer web -This guide will help you set up the Capa Explorer Web project for local development. +This guide will help you set up the capa explorer web project for local development. ## Prerequisites @@ -31,7 +31,7 @@ Before you begin, ensure you have the following installed: npm run dev ``` - This will start the Vite development server. The application should now be running at `http://localhost:` + This will start the Vite development server. The application should now be running at `http://localhost:`. ## Project Structure @@ -80,7 +80,7 @@ Or, you can build a standalone bundle application that can be used offline: npm run build:bundle ``` -This will generate an offline HTML bundle file in the `dist/` directory. +This will generate an offline HTML bundle file in the `capa-explorer-web/` directory. ## Testing @@ -98,12 +98,13 @@ We use ESLint for linting and Prettier for code formatting. Run the linter with: ``` npm run lint +npm run format:check npm run format ``` ## Working with PrimeVue Components -Capa Explorer Web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage. +capa explorer web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage. ## Best Practices diff --git a/web/explorer/README.md b/web/explorer/README.md index 341e91a7f..b6dae243d 100644 --- a/web/explorer/README.md +++ b/web/explorer/README.md @@ -1,6 +1,6 @@ -# Capa Explorer Web +# capa explorer web -Capa Explorer Web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis. +capa explorer web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis. ## Features @@ -11,31 +11,33 @@ Capa Explorer Web is a browser-based user interface for exploring program capabi ## Getting Started -1. **Access the Application**: Open Capa Explorer Web in your web browser. - You can start using Capa Explorer Web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/) or running it locally by dowloading the offline release in the [releases](https://github.com/mandiant/capa/releases) section and loading it in your browser. +1. **Access the application**: Open capa explorer web in your web browser. + You can start using capa explorer web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/explorer) or running it locally by downloading the offline release from the top right-hand corner and opening it in your web browser. -2. **Import capa Results**: +2. **Import capa results**: - Click on "Upload from local" to select a capa analysis document file from your computer (with a version higher than 7.0.0). - Or, paste a URL to a capa JSON file and click the arrow button to load it. + - You can also load capa results using the `rdoc` query parameter to the URL. For example: `?rdoc=https://example.com/capa-results.json` (loading JSON and gzipped JSON (.gz) files are both supported). - Alternatively, use the "Preview Static" or "Preview Dynamic" for sample data. -3. **Explore the Results**: +3. **Explore the results**: - Use the tree view to navigate through the identified capabilities. - Toggle between different views using the checkboxes in the settings panel: - "Show capabilities by function/process" for grouped analysis. - - "Show library rule matches" to include or exclude library rules. + - "Show distinct library rule matches" to include or exclude library rules. + - "Show columns filters" to show per-column search filters. -4. **Interact with the Data**: - - Expand/collapse nodes in the table to see more details. +4. **Interact with the results**: + - Expand/collapse nodes in the table to see more details by clicking rows or clicking arrow icons. - Use the search and filter options to find specific features, functions or capabilities (rules). - - Right click on rule names to view their source code or additional information. + - Right click on rule names (and `match` nodes) to view their source code or additional information. ## Feedback and Contributions -We welcome your feedback and contributions to improve the web-based Capa Explorer. Please report any issues or suggest enhancements through the `capa` GitHub repository. +We welcome your feedback and contributions to improve the web-based capa explorer. Please report any issues or suggest enhancements through the `capa` GitHub repository. --- -For developers interested in building or contributing to Capa Explorer WebUI, please refer to our [Development Guide](DEVELOPMENT.md). +For developers interested in building or contributing to capa explorer web, please refer to our [Development Guide](DEVELOPMENT.md). diff --git a/web/explorer/index.html b/web/explorer/index.html index 0ef43c9ea..3330f702a 100644 --- a/web/explorer/index.html +++ b/web/explorer/index.html @@ -4,7 +4,7 @@ - Capa Explorer + capa explorer web diff --git a/web/explorer/src/components/DescriptionPanel.vue b/web/explorer/src/components/DescriptionPanel.vue index 9dfd5db82..ab57a0a6e 100644 --- a/web/explorer/src/components/DescriptionPanel.vue +++ b/web/explorer/src/components/DescriptionPanel.vue @@ -1,15 +1,29 @@