Skip to main content

Rippler UI

Flutter-based web and desktop interface for the Rippler impact analysis system.

Architecture Diagram​

The following diagram illustrates the internal architecture of the Rippler UI, showing the Next.js application structure with pages/routes, React components, state management, API client services, and integration with backend services.

Update the Architecture Diagram

To view and edit the architecture diagram:

  1. Open /docs/architecture/services/rippler-ui.drawio in diagrams.net or VS Code with the Draw.io extension
  2. The diagram shows the complete frontend architecture including Next.js pages, React components, API integration, WebSocket connections, state management, and SSO authentication
  3. After making changes, export to HTML and copy to /website/static/architecture/services/rippler-ui.drawio.html

Overview​

Rippler UI provides a modern, responsive interface for visualizing impact analysis results, managing repositories, and monitoring the health of the Rippler ecosystem.

Features​

  • Dashboard: Overview of recent analyses and system health
  • Repository Management: Onboard and configure repositories
  • Dependency Visualization: Interactive dependency graph visualization
  • PR Impact View: Detailed view of pull request impact analysis
  • Service Monitor: Real-time monitoring of microservice health
  • Settings: Configure system preferences and integrations
  • Responsive Design: Works seamlessly on web and desktop

Technology Stack​

  • Flutter: Cross-platform UI framework
  • Dart: Programming language
  • Flutter Web: Web deployment target
  • Flutter Desktop: Native desktop apps (Windows, macOS, Linux)
  • Provider: State management
  • HTTP: API communication

Quick Start​

Prerequisites​

  • Flutter SDK 3.0+
  • Dart SDK 3.0+
  • Chrome (for web development)

Installation​

# Clone the repository
git clone https://github.com/Citi-Rippler/rippler-ui.git
cd rippler-ui

# Get dependencies
flutter pub get

Running​

Web (Development)​

# Run in development mode
flutter run -d chrome --web-port 3000

# Or from project root
make ui-dev

Web (Production Build)​

# Build for production
flutter build web --release

# Serve the built files
cd build/web
python -m http.server 3000

Desktop​

# Run on desktop
flutter run -d macos  # macOS
flutter run -d windows  # Windows
flutter run -d linux  # Linux

Using Docker​

# Build and run
docker-compose up rippler-ui

# Access at http://localhost:18000

Project Structure​

lib/
├── main.dart              # Application entry point
├── app/
│   ├── app.dart          # App configuration
│   └── routes.dart       # Route definitions
├── screens/
│   ├── dashboard/        # Dashboard screen
│   ├── repositories/     # Repository management
│   ├── analysis/         # Impact analysis views
│   ├── graph/            # Dependency graph visualization
│   └── settings/         # Settings screen
├── widgets/
│   ├── common/           # Reusable widgets
│   ├── charts/           # Chart components
│   └── cards/            # Card components
├── services/
│   ├── api_service.dart  # API client
│   └── auth_service.dart # Authentication
├── models/
│   ├── repository.dart   # Data models
│   ├── analysis.dart
│   └── service.dart
└── utils/
    ├── constants.dart    # App constants
    └── helpers.dart      # Helper functions

Features​

Dashboard​

The main dashboard provides:

  • Recent impact analyses
  • System health metrics
  • Quick actions
  • Service status overview

Repository Management​

  • Browse repositories
  • Onboard new repositories
  • Configure webhooks
  • View repository settings

Dependency Graph​

Interactive visualization showing:

  • Service dependencies
  • Impact paths
  • Circular dependencies
  • Service metadata

Impact Analysis View​

Detailed PR analysis including:

  • Summary of changes
  • Affected services
  • Risk assessment
  • Recommendations
  • Stakeholder notifications

Service Monitor​

Real-time monitoring:

  • Service health status
  • Response times
  • Error rates
  • Resource usage

Configuration​

Environment Configuration​

Create .env file in the project root:

# API Gateway URL
API_BASE_URL=http://localhost:18000

# Feature Flags
ENABLE_ANALYTICS=true
ENABLE_NOTIFICATIONS=true

# UI Configuration
DEFAULT_PAGE_SIZE=20
REFRESH_INTERVAL=30000

API Integration​

The UI connects to backend services through the API Gateway:

// lib/services/api_service.dart
class ApiService {
  static const String baseUrl = 'http://localhost:18000';
  
  Future<List<Repository>> getRepositories() async {
    final response = await http.get(
      Uri.parse('$baseUrl/api/v1/repositories'),
    );
    // Handle response
  }
}

Development​

Running Tests​

# Run all tests
flutter test

# Run with coverage
flutter test --coverage

# Run integration tests
flutter drive --target=test_driver/app.dart

# Or from project root
make test-ui

Code Quality​

# Analyze code
flutter analyze

# Format code
flutter format lib/

# Or from project root
make ui-analyze

Building​

# Build for web
flutter build web --release

# Build for desktop
flutter build macos --release  # macOS
flutter build windows --release  # Windows
flutter build linux --release  # Linux

# Or from project root
make ui-build

Deployment​

Web Deployment​

Using Docker​

# Build Docker image
docker build -t rippler-ui .

# Run container
docker run -p 18000:80 rippler-ui

Static Hosting​

The web build generates static files that can be hosted on:

  • GitHub Pages
  • Netlify
  • Vercel
  • AWS S3 + CloudFront
  • Any static file server
# Build production files
flutter build web --release

# Deploy build/web directory

Desktop Deployment​

Desktop applications can be distributed as:

  • Installers (MSI, DMG, DEB)
  • Standalone executables
  • App Store packages

Usage​

Connecting to Backend​

  1. Ensure API Gateway is running on port 18000
  2. Configure API_BASE_URL in environment
  3. Start the UI application
  4. Navigate to http://localhost:3000

Viewing Impact Analysis​

  1. Navigate to "Repositories"
  2. Select a repository
  3. Click on a pull request
  4. View impact analysis results

Visualizing Dependencies​

  1. Navigate to "Dependencies"
  2. Select services to visualize
  3. Interact with the graph
  4. View dependency paths

Troubleshooting​

Connection Errors​

  1. Verify API Gateway is running
  2. Check API_BASE_URL configuration
  3. Review CORS settings
  4. Check browser console for errors

Build Failures​

  1. Clean build artifacts: flutter clean
  2. Get dependencies: flutter pub get
  3. Check Flutter version: flutter doctor
  4. Review build logs

Repository​

GitHub: rippler-ui