Table of Contents
Architecture Diagram - PR Review Utility
🏗️ System Architecture (Phase 1)
┌─────────────────────────────────────────────────────────────────┐
│ USER / BROWSER │
│ http://localhost:5000 │
└────────────────────────────┬────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ PRESENTATION LAYER │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ HTML/JavaScript UI (wwwroot/) │ │
│ │ ┌────────────────┐ ┌─────────────┐ ┌──────────────┐ │ │
│ │ │ Index.cshtml │ │ site.css │ │ pr-viewer.js │ │ │
│ │ │ (Bootstrap 5) │ │ (Styling) │ │ (UI Logic) │ │ │
│ │ └────────────────┘ └─────────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────┬────────────────────────────────────┘
│
│ HTTP Requests
│ (GET/POST)
▼
┌─────────────────────────────────────────────────────────────────┐
│ CONTROLLER LAYER │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ HomeController PRController (API) │ │
│ │ ┌─────────────┐ ┌───────────────────────┐│ │
│ │ │ Index() │ │ GET /api/pr/{id} ││ │
│ │ │ Returns UI │ │ GET /api/pr/{id}/diff ││ │
│ │ │ │ │ GET /api/pr/{id}/raw ││ │
│ │ └─────────────┘ │ GET /api/pr/{id}/export││ │
│ │ └───────────────────────┘│ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────┬────────────────────────────────────┘
│
│ Calls Services
▼
┌─────────────────────────────────────────────────────────────────┐
│ SERVICE LAYER │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ IBitBucketService (Interface) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ BitBucketService (Implementation) │ │ │
│ │ │ │ │ │
│ │ │ • GetPullRequestAsync() │ │ │
│ │ │ • GetPullRequestDiffAsync() │ │ │
│ │ │ • GetRawDiffAsync() │ │ │
│ │ │ • ParseDiff() - Internal parser │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────┬────────────────────────────────────┘
│
│ HTTP Client
│ + Basic Auth
▼
┌─────────────────────────────────────────────────────────────────┐
│ EXTERNAL API │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ BitBucket REST API v2.0 │ │
│ │ https://api.bitbucket.org/2.0 │ │
│ │ │ │
│ │ Endpoints Used: │ │
│ │ • /repositories/{ws}/{repo}/pullrequests/{id} │ │
│ │ • /repositories/{ws}/{repo}/pullrequests/{id}/diff │ │
│ └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
🔄 Data Flow Diagram
User Action: "Fetch PR #42 from repo 'my-app'"
│
▼
┌─────────────────────────────────────────┐
│ 1. UI: pr-viewer.js │
│ - Validate inputs │
│ - Show loading spinner │
│ - Make AJAX call │
└──────────────┬──────────────────────────┘
│
│ GET /api/pr/my-app/42
▼
┌─────────────────────────────────────────┐
│ 2. Controller: PRController │
│ - Receive request │
│ - Call service │
└──────────────┬──────────────────────────┘
│
│ GetPullRequestAsync("my-app", 42)
▼
┌─────────────────────────────────────────┐
│ 3. Service: BitBucketService │
│ - Build API URL │
│ - Add authentication │
│ - Make HTTP request │
└──────────────┬──────────────────────────┘
│
│ GET https://api.bitbucket.org/...
▼
┌─────────────────────────────────────────┐
│ 4. BitBucket API │
│ - Authenticate │
│ - Fetch PR data │
│ - Return JSON │
└──────────────┬──────────────────────────┘
│
│ JSON Response
▼
┌─────────────────────────────────────────┐
│ 5. Service: BitBucketService │
│ - Parse JSON │
│ - Transform to model │
│ - Return PullRequest object │
└──────────────┬──────────────────────────┘
│
│ PullRequest object
▼
┌─────────────────────────────────────────┐
│ 6. Controller: PRController │
│ - Serialize to JSON │
│ - Return HTTP 200 OK │
└──────────────┬──────────────────────────┘
│
│ JSON Response
▼
┌─────────────────────────────────────────┐
│ 7. UI: pr-viewer.js │
│ - Parse response │
│ - Update DOM │
│ - Display PR details │
│ - Hide loading spinner │
└─────────────────────────────────────────┘
🔐 Authentication Flow
┌─────────────────────────────────────────┐
│ appsettings.json │
│ { │
│ "Username": "john@example.com", │
│ "AppPassword": "ATBBxxx..." │
│ } │
└──────────────┬──────────────────────────┘
│ Startup reads config
▼
┌─────────────────────────────────────────┐
│ BitBucketConfig (Dependency Injection) │
│ - Injected into BitBucketService │
└──────────────┬──────────────────────────┘
│
│ On each request
▼
┌─────────────────────────────────────────┐
│ BitBucketService │
│ credentials = Base64(username:password)│
│ Header: Authorization: Basic {creds} │
└──────────────┬──────────────────────────┘
│
│ HTTP Request with header
▼
┌─────────────────────────────────────────┐
│ BitBucket API │
│ - Validates credentials │
│ - Returns data or 401 │
└─────────────────────────────────────────┘
📊 Component Interaction Map
┌────────────────────────────────────────────────────────────┐
│ Startup.cs │
│ • Configures Services │
│ • Registers HttpClient │
│ • Binds BitBucketConfig │
│ • Sets up MVC + API │
└───────────┬────────────────────────────────────────────────┘
│
├──► HomeController ──► Returns Index.cshtml
│ (Main UI)
│
├──► PRController ──┬──► GetPullRequest()
│ ├──► GetPullRequestDiff()
│ ├──► GetRawDiff()
│ └──► ExportDiff()
│ │
│ │ All methods call ▼
│ │
└──► BitBucketService ◄────┘
│
├──► GetPullRequestAsync()
│ └──► HTTP GET to BitBucket
│
├──► GetPullRequestDiffAsync()
│ ├──► GetRawDiffAsync()
│ └──► ParseDiff()
│
└──► GetRawDiffAsync()
└──► HTTP GET to BitBucket
🗂️ File Organization Map
PRReviewUtility/
│
├── Frontend (User sees this)
│ └── wwwroot/
│ ├── js/pr-viewer.js ───► Calls API endpoints
│ └── css/site.css ───────► Styles UI
│
├── Backend (Server side)
│ ├── Controllers/
│ │ ├── HomeController ────► Serves UI
│ │ └── PRController ──────► Handles API requests
│ │
│ ├── Services/
│ │ └── BitBucketService ──► Talks to BitBucket
│ │
│ └── Models/
│ ├── PullRequest ───────► PR data structure
│ ├── DiffFile ──────────► Diff data structure
│ └── BitBucketConfig ───► Configuration model
│
├── Views/
│ ├── Home/Index.cshtml ─────► Main UI page
│ └── Shared/_Layout.cshtml ──► Bootstrap layout
│
└── Configuration/
├── appsettings.json ──────► BitBucket credentials
├── Startup.cs ────────────► App configuration
└── Program.cs ────────────► Entry point
🎯 Request Flow for "Export Diff"
User clicks "Export Diff" button
│
▼
┌─────────────────────────────────┐
│ JavaScript (pr-viewer.js) │
│ exportBtn.click() → │
│ window.location.href = │
│ /api/pr/{repo}/{id}/export │
└────────┬────────────────────────┘
│
▼
┌─────────────────────────────────┐
│ PRController.ExportDiff() │
│ 1. Get PR details │
│ 2. Get raw diff │
│ 3. Build text file content │
│ 4. Create file with metadata │
└────────┬────────────────────────┘
│
│ return File(bytes, "text/plain", filename)
▼
┌─────────────────────────────────┐
│ Browser │
│ Downloads file: │
│ "PR-42-my-app-diff.txt" │
└─────────────────────────────────┘
🔄 State Management
┌─────────────────────────────────────────┐
│ JavaScript State (pr-viewer.js) │
│ │
│ • currentRepository: string │
│ • currentPrId: number │
│ • rawDiffText: string │
│ • diff: object (files array) │
│ │
│ No persistence - resets on page reload │
└─────────────────────────────────────────┘
Server is stateless:
• No session storage
• No cookies
• Each request independent
📈 Scalability Design
Current (Phase 1):
┌──────────┐
│ Browser │ ──► Single .NET App ──► BitBucket API
└──────────┘
Future Phases:
┌──────────┐ ┌─────────────┐
│ Browser │ ──► Load Balancer ─┤ .NET App 1 │──┐
└──────────┘ ├─────────────┤ │
│ .NET App 2 │──┼──► BitBucket
└─────────────┘ │
│
┌──────────────┐ │
│ Redis Cache │◄┘
└──────────────┘
🎨 UI Component Structure
Index.cshtml (Main Page)
│
├── Form Section
│ ├── Repository Input
│ ├── PR ID Input
│ └── Fetch Button
│
├── Loading Spinner (hidden by default)
│
├── Error Alert (hidden by default)
│
├── PR Details Card (shown after fetch)
│ ├── Title, Author, Branches
│ ├── State Badge
│ └── Action Buttons
│ ├── Export Diff
│ └── Toggle Raw Diff
│
├── Files List Section
│ └── For each file:
│ ├── File name
│ ├── Status badge
│ ├── Stats (+/-)
│ └── View button
│ └── Expandable diff content
│
└── Raw Diff Section (toggle)
├── Copy button
└── Pre-formatted diff text
🚀 Performance Characteristics
| Operation | Expected Time | Notes | |-----------|---------------|-------| | App Startup | < 3 seconds | Cold start | | Page Load | < 1 second | Static files cached | | API Request | 2-5 seconds | Depends on PR size | | Diff Parse | < 1 second | Client-side processing | | Export | Instant | No processing needed |
📝 Notes
- All diagrams are for Phase 1 implementation
- Phase 2 will add Rule Engine service layer
- Phase 3 will add AI Integration service layer
- System is designed for horizontal scaling
- Stateless design enables load balancing
Architecture diagrams for PR Review Utility v1.0