Jennings's Blog

MTool

Published on
Last updated on
Technical
AI

Executive Summary

MTool is a full-stack enterprise application designed to manage and visualize End-to-End (E2E) test automation results for SAP ABAP and non-ABAP systems. The platform consolidates test data from multiple sources, provides real-time dashboards, and implements enterprise-grade security with SAP Identity Authentication Service (IAS) integration.

Key Achievements

MetricValue
ArchitectureMicroservices with BFF Pattern
Services3 (Frontend, Backend, Auth)
Database Models20+ entities
UI Components22 reusable components
Languages Supported3 (English, Chinese, German)
Auth Methods2 (Credentials + OIDC/IAS)
ObservabilityFull OpenTelemetry + Prometheus

1. Architecture Overview

1.1 High-Level Architecture

1.2 BFF Authentication Pattern

The application implements a Backend for Frontend (BFF) pattern for secure authentication:

Benefits:

  • Security: Cookies scoped to frontend domain only
  • Simplicity: No CORS configuration needed for auth
  • Flexibility: Same configuration works for dev and production

2. Technology Stack

2.1 Technology Overview

2.2 Frontend Service

CategoryTechnologyVersionPurpose
FrameworkNext.js16+React framework with App Router
RuntimeBunLatestFast JavaScript runtime
LanguageTypeScript5.xType-safe development
StylingTailwind CSSv4Utility-first CSS
UI Componentsshadcn/ui + RadixLatestAccessible component library
AuthenticationBetter-Auth React1.4.xClient-side auth hooks
i18ni18nextLatestInternationalization
NotificationsSonner2.0+Toast notifications
ChartsRechartsLatestData visualization

2.3 Backend Service

CategoryTechnologyVersionPurpose
LanguageGo1.25+High-performance backend
FrameworkEchov4.14HTTP routing framework
ORMGORM1.31Database operations
Schedulerrobfig/cronv3Job scheduling
TracingOpenTelemetry1.39Distributed tracing
MetricsPrometheusLatestMetrics export

2.4 Auth Service

CategoryTechnologyVersionPurpose
LanguageTypeScript5.xType-safe development
FrameworkHonoLatestLightweight web framework
Auth LibraryBetter-Auth1.4.9Authentication framework
ORMPrismaLatestType-safe database client
OIDCGeneric OAuthBuilt-inSAP IAS integration

3. Database Design

3.1 Entity Relationship Diagram

3.2 Model Summary

| Domain | Models | Purpose | |—|—|| | Authentication | 7 | User, Session, Account, Role, Permission, RolePermission, AccessToken | | Business | 5 | Topic, Sprint, Connection, TestCase, Scheduler | | Reports | 7 | PDOC, APE, OPA (5-level hierarchy) |

4. User Interface

4.1 Application Navigation Structure

4.2 UI Component Library

Built on shadcn/ui with Radix UI primitives for accessibility:

CategoryComponents
LayoutCard, Separator, Tabs, ScrollArea
FormsInput, Select, Switch, Checkbox, Label
FeedbackAlert, AlertDialog, Badge, Toast (Sonner)
Data DisplayTable (with resizable columns), Chart
NavigationCommand, Popover, Dialog
UtilityButton, Avatar, Calendar

4.3 Design System

  • Color Scheme: CSS variables with OKLCH color space
  • Dark Mode: Class-based toggle (.dark class)
  • Typography: Material Symbols icon system
  • Responsive: Mobile-first Tailwind breakpoints
  • Accessibility: ARIA attributes, keyboard navigation

5. Security Architecture

5.1 Authentication Flow

5.2 Role-Based Access Control (RBAC)

5.3 External Group Mapping (IAS Integration)

5.4 Session Security

ParameterValuePurpose
Absolute Timeout8 hoursMaximum session lifetime
Idle Timeout30 minutesRequire revalidation after inactivity
Cookie Cache5 minutesClient-side session cache
Session Expiry ToastEnabledUser notification on 401

5.5 Personal Access Tokens (PAT)

6. Observability Stack

6.1 Distributed Tracing Flow

6.2 Metrics Architecture

6.3 Structured Logging

  • Format: JSON (machine-parseable)
  • Correlation ID: X-Correlation-ID header propagation
  • Fields: timestamp, level, service, trace_id, user_id, message
  • Sensitive Data: Password/token redaction

7. Integration Points

7.1 SAP ABAP Data Sync

7.2 CI/CD Integration (OPA Reports)

7.3 SAP Identity Authentication Service (IAS)

ConfigurationValue
ProtocolOpenID Connect (OIDC)
Discovery{issuer}/.well-known/openid-configuration
Scopesopenid, profile, email, groups
Callbackhttps://{frontend}/api/v1/auth/oauth2/callback/sap

8. Deployment Architecture

8.1 Docker Compose Topology

8.2 Environment URLs

EnvironmentFrontendBackendAuth
Locallocalhost:3000localhost:5000localhost:4000
Testmtool-test.maco.only.sapmtool-test-backend…mtool-test-auth…
Productionmtool.maco.only.sapmtool-backend…mtool-auth…

9. Key Features

9.1 Feature Overview

9.2 E2E Test Dashboard

  • Real-time visualization of test results
  • Historical trend analysis across sprints
  • Filter by: Topic, Sprint, Connection, Test Case
  • Export capabilities for reports

9.3 Automated Data Sync

  • Cron-based scheduling for automated sync
  • Manual trigger option for immediate sync
  • Execution history with status tracking
  • Partial failure handling (continues on error)

10. Development Workflow

10.1 Local Development Commands

Terminal window
# Start all services
make dev-all


# Or individual services
make dev-auth      # Port 4000
make dev-backend   # Port 5000
make dev-front     # Port 3000

10.2 Git Workflow

10.3 Build & Deploy

Terminal window
# Build all services
make build-all


# Docker deployment
docker-compose up -d

11. Success Metrics

11.1 Technical Excellence

MetricStatus
Type SafetyTypeScript + Go static typing
Code QualityESLint, Go vet, Prettier
SecurityRBAC, encrypted passwords, secure sessions
ObservabilityFull stack tracing + metrics
DocumentationComprehensive README + specifications

11.2 Business Value

CapabilityBenefit
Consolidated DashboardSingle source of truth for E2E test results
Automated SyncReduced manual effort for data collection
Enterprise SSOSeamless integration with SAP IAS
Role-Based AccessSecure multi-team collaboration
API TokensCI/CD pipeline integration

Appendix A: API Endpoints

Authentication API (/api/v1/auth)

MethodEndpointDescription
POST/sign-in/emailEmail/password login
POST/sign-in/socialOIDC/SSO login
GET/get-sessionValidate session
GET/user/profileGet current user
PUT/user/profileUpdate profile
GET/POST/DELETE/tokensPAT management

E2E Automation API (/api/v1/e2e-automation)

MethodEndpointDescription
GET/POST/PUT/DELETE/settings/sprintsSprint CRUD
GET/POST/PUT/DELETE/settings/connectionsConnection CRUD
GET/POST/PUT/DELETE/settings/test-casesTest case CRUD
GET/POST/PUT/DELETE/settings/schedulerScheduler CRUD
GET/reports/abapGet ABAP reports
POST/reports/abap/syncTrigger sync
POST/reports/opaUpload OPA report
GET/reports/opaGet OPA reports
GET/jobs/historySync history

Appendix B: Configuration Reference

Required Environment Variables

ServiceVariableDescription
AuthDATABASE_URLPostgreSQL connection
AuthBETTER_AUTH_SECRETSession signing secret
AuthBETTER_AUTH_URLFrontend URL (BFF)
AuthTRUSTED_ORIGINSCORS origins
BackendDATABASE_URLPostgreSQL connection
BackendAUTH_SERVICE_URLAuth service URL
BackendENCRYPTION_KEYAES-256 key (64 hex chars)
FrontendNEXT_PUBLIC_BETTER_AUTH_URLBrowser auth endpoint
FrontendAUTH_URLServer-side auth proxy
FrontendNEXT_PUBLIC_BACKEND_URLBackend API URL

Document generated for MTool project showcase. For technical inquiries, refer to the codebase specifications directory.

Back to Blog