15Lyzer - Angular HTTP Call Analyzer Dashboard

A beautiful GUI dashboard to analyze and visualize all HTTP calls in your Angular 15 applications

🎯 What is 15Lyzer?

15Lyzer is a powerful web-based dashboard that analyzes your Angular 15 application and provides comprehensive insights into all HTTP calls. Simply upload your Angular project directory, and get instant visualization of:

• 📊 HTTP Call Statistics - Total calls, methods distribution, and more
• 🔍 Component/Service Analysis - See which components and services make HTTP calls
• 📡 HTTP Method Breakdown - Visual breakdown of GET, POST, PUT, DELETE, PATCH
• 🎨 Beautiful Visualizations - Interactive charts and tables
• ⚡ Real-time Analysis - Upload and analyze in seconds

✨ Features

🖥️ Web Dashboard

• Modern UI - Clean, responsive design built with vanilla HTML/CSS/JS
• Drag & Drop - Easy directory upload with progress tracking
• Interactive Charts - Visual HTTP method distribution
• Search & Filter - Find specific components, services, or methods
• Detailed Tables - View all HTTP calls with file locations

🔍 Analysis Capabilities

• Automatic Detection - Finds all HTTP calls in TypeScript files
• Method Recognition - Detects GET, POST, PUT, DELETE, PATCH
• Component Mapping - Links HTTP calls to specific components/services
• File Tracking - Shows exact file locations and line numbers
• Async Detection - Identifies async/await patterns

📦 Installation

Prerequisites

• Node.js >= 16.0.0
• npm or yarn

Install from npm

npm install -g 15lyzers

Or install from source

git clone https://github.com/lpaszkiewicz/15Lyzer.git
cd 15Lyzer
npm install

🚀 Quick Start

Start the Dashboard

npm start

Or if installed globally:

15lyzer-dashboard

This will start the server at http://localhost:3000

Using the Dashboard

1. Open your browser and navigate to http://localhost:3000
2. Click "Choose Directory" and select your Angular 15 project root
3. Wait for analysis - The dashboard will process all TypeScript files
4. Explore results - View statistics, charts, and detailed HTTP call information

📊 Dashboard Features

Statistics Cards

View key metrics at a glance:

• Total TypeScript files analyzed
• Total HTTP calls found
• Number of components with HTTP calls
• Number of services with HTTP calls

HTTP Method Distribution Chart

Visual bar chart showing:

• GET requests (green)
• POST requests (blue)
• PUT requests (orange)
• PATCH requests (purple)
• DELETE requests (red)

Component/Service Browser

• Search - Find classes by name
• Filter - Show only components or services
• Expandable - Click to see all methods with HTTP calls
• Method Tags - Color-coded HTTP method indicators

Detailed HTTP Calls Table

Comprehensive table with:

• Class name
• Method name
• HTTP methods used
• File path
• Component/Service type
• Async indicator

🛠️ Configuration

Change Port

Set the PORT environment variable:

PORT=8080 npm start

Custom Upload Limit

Edit src/server.js to change the file size limit:

const upload = multer({
  dest: 'uploads/',
  limits: { fileSize: 200 * 1024 * 1024 }, // 200MB
});

📁 Project Structure

15Lyzer/
├── src/
│   ├── server.js          # Express server and API
│   ├── scanner.js         # File system scanner
│   ├── parser.js          # TypeScript parser
│   └── functionAnalyzer.js # HTTP call analyzer
├── public/
│   ├── index.html         # Dashboard UI
│   ├── styles.css         # Styling
│   └── app.js             # Frontend logic
├── uploads/               # Temporary upload directory
└── package.json

What it detects

15Lyzer scans every non-spec TypeScript file for Angular HttpClient usage including:

| Pattern | Detected as | |---|---| | this.http.get('/api/resource') | GET method | | this.http.post('/api/resource', data) | POST method | | this.http.get(`/api/resource/${id}`) | GET with template | | this.http.put(url, data) | PUT method | | this.http.delete(url) | DELETE method | | this.http.patch(url, data) | PATCH method |

Programmatic API

You can also use 15Lyzer programmatically:

const { scanFiles } = require('15lyzers');
const { analyzeMultipleFiles, getStatistics } = require('15lyzers/src/functionAnalyzer');

const files = scanFiles('./my-angular-app');
const functions = analyzeMultipleFiles(files);
const stats = getStatistics(functions);

console.log(`Found ${stats.withHttpCalls} functions with HTTP calls`);

Detailed Testing with Click Simulation

const { 
  scanFiles, 
  parseFiles, 
  testCallsDetailed, 
  reportDetailedResult,
  createClickContext 
} = require('15lyzer');

const files = scanFiles('./my-angular-app');
const calls = parseFiles(files);

// Test with comprehensive data capture
const results = await testCallsDetailed(calls, 'http://localhost:4200', {
  timeout: 10000,
  headers: { Authorization: 'Bearer token' },
  maxBodySize: 1048576, // 1MB
  detailed: true,
  clickAction: 'User Navigation',
  onResult: (r) => {
    console.log('\n📊 Detailed Result:');
    console.log(`   Completed: ${r.completed}`);
    console.log(`   Timed Out: ${r.timedOut}`);
    console.log(`   Status: ${r.status}`);
    console.log(`   Duration: ${r.duration}ms`);
    console.log(`   Response Size: ${r.responseData?.size || 0} bytes`);
  },
});

// Check completion status
const completed = results.filter((r) => r.completed);
const timedOut = results.filter((r) => r.timedOut);
console.log(`\nCompleted: ${completed.length}/${results.length}`);
console.log(`Timed Out: ${timedOut.length}/${results.length}`);

Exit codes

| Code | Meaning | |---|---| | 0 | All tested endpoints returned < 500 status | | 1 | One or more endpoints returned a 5xx or network error |

Custom Tool Generation

15Lyzer can analyze your entire Angular 15 application and generate standalone HTTP endpoint tests with zero external dependencies.

Generate Custom Tools

15lyzer-generate ./my-app --tool e2e --output ./generated

Available Tool Type

Standalone E2E Test Generator (e2e)

Generates standalone E2E tests for HTTP endpoints using ONLY Node.js built-in modules (no Cypress, Playwright, or any other framework installation required!):

# Generate standalone tests with zero dependencies
15lyzer-generate ./my-app --tool e2e --output ./e2e/generated

Generate Selenium tests

15lyzer-generate ./my-app --tool e2e --framework selenium --output ./selenium-tests

**🎉 NEW: Zero-dependency standalone mode (default)!** No need for Cypress, Playwright, or Selenium! Tests run using 15Lyzer's built-in test runner.

**Important**: When using Cypress, Playwright, or Selenium, you do **NOT** need them installed to generate the test files. The tool only creates the test code templates. You'll only need the chosen framework when you want to actually run those tests.

**Features:**
- Creates E2E tests for all components
- **Standalone framework (default)**: Run tests immediately with ZERO dependencies!
- Uses ONLY Node.js built-in modules (`http`, `https`, `url`) - no external packages
- Or choose from: Cypress, Playwright, Selenium
- Generates framework-specific helper functions
- Auto-intercepts API calls for testing
- Includes TypeScript type declarations
- Generates README with setup instructions

**Example Standalone Output (Default):**
```javascript
const { describe, it, beforeEach, expect, httpRequest } = require('./runner');

describe('MyComponent E2E', () => {
  let baseUrl;

  beforeEach(() => {
    baseUrl = 'http://localhost:4200';
  });

  it('should load component page', async () => {
    const response = await httpRequest({
      method: 'GET',
      url: `${baseUrl}/my-route`,
    });
    expect(response.status).toBe(200);
  });

  it('should fetch data from API', async () => {
    const response = await httpRequest({
      method: 'GET',
      url: `${baseUrl}/api/data`,
    });
    expect(response.status).toBeGreaterThanOrEqual(200);
    expect(response.status).toBeLessThan(300);
  });
});

Features:

• ✅ Uses ONLY Node.js built-in modules (http, https, url)
• ✅ Zero installation required - no Cypress, Playwright, or Selenium needed
• ✅ Familiar test API - describe/it/expect (similar to Jest/Jasmine)
• ✅ Built-in HTTP testing - test real API endpoints
• ✅ Full async/await support
• ✅ Comprehensive assertions - toBe, toEqual, toContain, toBeTruthy, etc.
• ✅ Smart endpoint detection - automatically generates tests for services with HTTP calls

Run standalone tests:

# Run a single test file
node mycomponent.standalone.js

## 🔒 Security

- **Temporary Files** - Uploaded files are automatically deleted after analysis
- **Local Only** - Dashboard runs on localhost by default
- **No Data Storage** - Analysis results are not saved to disk
- **File Validation** - Only TypeScript files are processed

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Start development server
npm start

📄 License

MIT License - see LICENSE file for details

🐛 Issues

Found a bug? Have a feature request? Please open an issue on GitHub

📝 Changelog

v2.0.0 (Current)

• 🎉 Complete rewrite as GUI dashboard application
• ✨ Added web-based UI with modern design
• 📊 Added interactive charts and visualizations
• 🔍 Added search and filter capabilities
• ⚡ Improved analysis performance
• 🚀 Real-time directory upload and analysis

v1.1.0

• Added standalone test generation
• Improved HTTP call detection
• Bug fixes

🙏 Credits

Created by Lisa Paszkiewicz