ABAP Package Parser

Overview

ABAP Package Parser is a full-stack application that analyzes ABAP packages using ADT (ABAP Development Tools) functionality and generates interactive flowcharts visualizing object dependencies and relationships. The application uses a microservices architecture with real-time communication capabilities.

Access the Application

The live application is available at:

https://dev.qook.fr/abap-package-parser/index.html

Visit this URL to start analyzing ABAP packages and visualizing object dependencies.

Technology Stack

Client (Frontend)

• React 19 - UI framework
• TypeScript - Type-safe development
• Vite - Build tool and dev server
• @xyflow/react - Flow diagram visualization
• Fluent UI - Microsoft's design system
• Monaco Editor - Code editor component
• Dagre - Graph layout algorithm

Server (Backend API)

• NestJS - Node.js framework
• TypeScript - Type-safe development
• Express - HTTP server
• Swagger - API documentation

Parser (Core Logic)

• TypeScript - Core language
• @abaplint/core - ABAP code analysis
• Axios - HTTP client for ADT calls
• xml-js - XML parsing
• Observer Pattern - Event notification

WebSocket Gateway (ws)

• ws - WebSocket server
• AMQP (RabbitMQ) - Message broker
• TypeScript - Type-safe development

Project Structure

abap-package-parser/
├── client/          # React frontend application
│   └── src/
│       ├── components/    # React components
│       ├── hooks/        # Custom React hooks
│       └── utils/        # Utility functions
│
├── server/          # NestJS backend API
│   └── src/
│       ├── common/       # Shared services
│       ├── adt.controller.ts
│       ├── adt.service.ts
│       └── main.ts
│
├── parser/          # Core ABAP parsing logic
│   └── src/
│       ├── handlers/     # Object type handlers
│       ├── lib/          # Utility libraries
│       ├── lint/         # Code analysis
│       ├── observers/    # Observer pattern impl
│       └── utils/        # Helper functions
│
└── ws/              # WebSocket gateway
    └── src/
        └── websocket.ts  # WS server & AMQP consumer

System Architecture

High-Level Architecture Diagram

Component Interaction Flow

Detailed Component Architecture

1. Client Application (React)

Key Features:

• Real-time graph updates via WebSocket
• Interactive node clicking to view source code
• Automatic graph layout using Dagre algorithm
• Session management for multi-user support
• Search functionality with autocomplete
• Resizable code panel

2. Server Application (NestJS)

API Endpoints:

Endpoint	Method	Description
/api-abap-package-parser/abap/find/:filter	GET	Search for ABAP objects by filter
/api-abap-package-parser/abap/run/:classname	GET	Trigger analysis of a class (requires session ID)
/api-abap-package-parser/abap/source/:objecttype/:objectname	GET	Retrieve source code for an object

Headers:

• x-session-id: Session identifier for WebSocket correlation

3. Parser Library (Core Logic)

Parser Workflow:

Supported ABAP Object Types:

• Classes (CLAS)
• Function Groups (FUGR)
• Function Modules (FM)
• Includes (INCL)
• Programs (PROG)
• Interfaces (INTF)
• Tables (TABL)
• Structures (STRU)
• Transactions (TRAN)

4. WebSocket Gateway (ws)

WebSocket Message Types:

Client → Server:

{
  "type": "register",
  "sessionId": "abc-123-def-456"
}

Server → Client (via RabbitMQ):

// Node discovered
{
  "type": "class|fugr|incl",
  "data": {
    "name": "ZCL_MY_CLASS",
    "walk": [...]
  }
}

// Edge/Link discovered
{
  "type": "link",
  "data": [
    {
      "path": "0",
      "parentPath": null,
      "attribute": {
        "name": "METHOD_NAME",
        "parent": "ZCL_CLASS",
        "type": "METHOD"
      },
      "index": 0
    }
  ]
}

Data Flow Architecture

Complete Request-Response Cycle

Session Management

Message Queue Architecture

Deployment Architecture

Key Design Patterns

1. Observer Pattern

The parser uses the Observer pattern to publish events as it discovers ABAP objects and dependencies:

2. Handler Pattern

Each ABAP object type has a dedicated handler:

3. Pub/Sub Pattern

Asynchronous communication via RabbitMQ:

Environment Configuration

Client (.env)

VITE_API_BASE_URL=http://localhost:3000
VITE_WS_URL=ws://localhost:8081

Server (.env)

PORT=3000
ABAP_HOST=your-sap-system
ABAP_CLIENT=100
ABAP_USER=your-username
ABAP_PASSWORD=your-password

Parser (.env)

ABAP_CLASS=ZCL_DEFAULT_CLASS
AMQP_URL=amqp://test:password@localhost
AMQP_QUEUE=abap-parser

WebSocket Gateway (.env)

WS_PORT=8081
AMQP_URL=amqp://test:password@localhost
AMQP_QUEUE=abap-parser

Running the Application

Development Mode

# Terminal 1 - Start RabbitMQ
docker run -d -p 5672:5672 -p 15672:15672 rabbitmq:3-management

# Terminal 2 - Start WebSocket Gateway
cd ws
npm run dev

# Terminal 3 - Start NestJS Server
cd server
npm run start:dev

# Terminal 4 - Start React Client
cd client
npm run dev

Build for Production

# Build all components
cd client && npm run build
cd ../server && npm run build
cd ../parser && npm run build
cd ../ws && npm run build

Production Deployment with PM2

The application uses PM2 for production process management, providing clustering, auto-restart, and load balancing capabilities.

Prerequisites:

# Install PM2 globally
npm install -g pm2

Starting the Application:

# Start all services defined in ecosystem.config.js
pm2 start ecosystem.config.js

# Start with environment-specific configuration
pm2 start ecosystem.config.js --env production

Managing Services:

# View running processes
pm2 status
pm2 list

# Monitor logs
pm2 logs                    # All processes
pm2 logs Server             # NestJS Server only
pm2 logs WebSocket          # WebSocket Gateway only

# Restart services
pm2 restart all
pm2 restart Server
pm2 restart WebSocket

# Stop services
pm2 stop all
pm2 stop Server

# Delete from PM2
pm2 delete all
pm2 delete Server

PM2 Configuration (ecosystem.config.js):

The configuration runs:

• WebSocket Gateway: Single instance on port 8081
• NestJS Server: 4 instances in cluster mode on port 3002

Auto-start on System Boot:

# Generate startup script
pm2 startup

# Save current process list
pm2 save

# To disable auto-start
pm2 unstartup

Monitoring & Performance:

# Real-time monitoring
pm2 monit

# Web-based monitoring (optional)
pm2 install pm2-web
pm2 web

Important Notes:

• Ensure all services are built before starting PM2 (npm run build in each directory)
• RabbitMQ must be running before starting the services
• Update environment variables in ecosystem.config.js for your production environment
• The client (React app) should be served using a web server like Nginx or Apache

API Documentation

When the NestJS server is running, API documentation is available at:

http://localhost:3000/api/docs

Performance Considerations

1. Real-time Updates: WebSocket provides low-latency updates as objects are discovered
2. Async Processing: Parser runs asynchronously, preventing API blocking
3. Message Queue: RabbitMQ ensures reliable message delivery and decouples components
4. Session Isolation: Each analysis session is independent via session IDs
5. Graph Layout: Dagre algorithm efficiently handles large dependency graphs

Security Considerations

1. Session Management: UUID-based sessions prevent cross-session data leaks
2. Header Validation: Session ID required in HTTP headers
3. WebSocket Authentication: Registration required before receiving messages
4. SAP Credentials: Stored securely in environment variables
5. CORS: Configured for specific origins in production

Future Enhancements

• Docker Compose setup for easy deployment
• User authentication and authorization
• Graph export to PNG/SVG
• Caching layer for frequently accessed objects
• Advanced filtering and search capabilities
• Support for more ABAP object types
• Performance metrics and monitoring
• Horizontal scaling support

Contributing

Please see CONTRIBUTING.md for guidelines on contributing to this project.

License

MIT License - see LICENSE file for details.