**TM Event Flow App** is a web application developed in Angular for managing and visualizing event flows. The application allows users to:
Sign in to like and favorite skills
TM Event Flow App is a web application developed in Angular for managing and visualizing event flows. The application allows users to:
The application connects to a REST API backend and uses WebSockets to receive real-time updates about events, brokers, messages, and executions.
tm-event-flow-app/ ├─ public/ # Archivos públicos (favicon, assets) ├─ src/ │ ├─ index.html # Página base de la aplicación Angular │ ├─ main.ts # Punto de entrada del frontend │ ├─ styles.css # Estilos globales │ ├─ theme.scss # Definición de temas y variables │ └─ app/ │ ├─ app.component.* # Componente raíz de la aplicación │ ├─ app.config.ts # Configuración general │ ├─ app.routes.ts # Rutas principales de la aplicación │ │ │ ├─ common/ # Componentes y módulos compartidos │ │ └─ material/ # Módulos Angular Material │ │ │ ├─ core/ # Servicios, interfaces y utilidades base │ │ ├─ enums/ # Enumeraciones (roles, estados, eventos WebSocket) │ │ ├─ interfaces/ # Definición de contratos de datos │ │ └─ services/ # Servicios globales (auth, broker, flow, execution, theme) │ │ │ ├─ auth/ # Módulo de autenticación │ │ ├─ login/ # Componente de inicio de sesión │ │ └─ auth.routes.ts # Rutas del módulo de autenticación │ │ │ ├─ dashboard/ # Módulo principal del sistema │ │ ├─ layout/ # Estructura visual del panel │ │ ├─ components/ # Submódulos funcionales │ │ │ ├─ brokers/ # Administración de brokers de mensajería │ │ │ └─ flows/ # Gestión y ejecución de flujos de eventos │ │ │ ├─ flow-detail/ # Detalle y visualización de flujos │ │ │ ├─ layout/ # Layout para el módulo de flows │ │ │ ├─ my-flows/ # Lista de flujos del usuario │ │ │ └─ executions/ # Gestión de ejecuciones de tests │ │ │ ├─ execution-create/ # Crear ejecuciones con orden de eventos │ │ │ ├─ execution-list/ # Listar y gestionar ejecuciones │ │ │ └─ test-case-results/ # Componentes de resultados │ │ │ ├─ event-order-validation-result/ │ │ │ ├─ infrastructure-validation-result/ │ │ │ ├─ contract-validation-result/ │ │ │ ├─ missing-event-detection-result/ │ │ │ └─ duplicate-message-detection-result/ │ │ └─ dashboard.routes.ts │ │ │ ├─ settings/ # Configuración y personalización del sistema │ │ ├─ layout/ # Vista de configuración │ │ └─ components/ │ │ └─ theme/ # Cambio de temas y apariencia │ │ │ ├─ home/ # Página inicial y navegación general │ │ ├─ layout/ # Estructura principal │ │ └─ home.routes.ts │ │ │ └─ environment/ # Variables de entorno │ └─ environment.ts # Configuración de URLs del backend │ ├─ angular.json # Configuración del proyecto Angular ├─ package.json # Dependencias y scripts ├─ tsconfig.json # Configuración TypeScript ├─ tsconfig.app.json # Configuración específica del frontend └─ tsconfig.spec.json # Configuración de pruebas unitarias
src/app/ ├── auth/ # Authentication module │ ├── auth.routes.ts # Authentication routes │ └── login/ # Login component │ ├── dashboard/ # Main dashboard module │ ├── components/ │ │ ├── brokers/ # Broker management │ │ └── flows/ # Flow management │ │ ├── flow-detail/ # Flow detail │ │ ├── layout/ # Layout for flows │ │ ├── my-flows/ # User's flow list │ │ └── executions/ # Execution management (NEW) │ │ ├── execution-create/ # Create execution tests │ │ ├── execution-list/ # List and manage executions │ │ └── test-case-results/ # Test case result components │ │ ├── infrastructure-validation-result/ │ │ ├── contract-validation-result/ │ │ ├── missing-event-detection-result/ │ │ └── duplicate-message-detection-result/ │ ├── layout/ # Main dashboard layout │ └── dashboard.routes.ts # Dashboard routes │ ├── home/ # Home module │ └── layout/ │ ├── core/ # Shared core functionality │ ├── enums/ # Enumerations │ │ ├── auth.enum.ts # Authentication states │ │ └── socket.enum.ts # WebSocket events │ ├── interfaces/ # TypeScript interfaces │ │ ├── broker.interface.ts │ │ ├── flow.interface.ts │ │ ├── login.interface.ts │ │ ├── messages.interface.ts │ │ ├── user.interface.ts │ │ ├── menu.interface.ts │ │ ├── execution.interface.ts # Execution models (NEW) │ │ ├── test-case.interface.ts # Test case models (NEW) │ │ └── result.interface.ts # Test result models (NEW) │ └── services/ # Singleton services │ ├── auth.service.ts │ ├── broker.service.ts │ ├── flow.service.ts │ ├── theme.service.ts │ ├── websocket.service.ts │ ├── execution.service.ts # Execution operations (NEW) │ └── test-case.service.ts # Test case operations (NEW) │ ├── common/ # Common components and utilities │ └── material/ # Angular Material configuration │ ├── environment/ # Environment configuration │ └── environment.ts │ ├── app.config.ts # Application configuration └── app.routes.ts # Main routes
core/servicesAuthServiceinject()AuthService.login()localStorage_currentUser_authStatusx-tokencyan-orangeComponentLoginComponentExecutionCreateComponentServiceAuthServiceExecutionServiceIUserFlowExecutionAuthStatusSocketEventsauth.service.tsflow-detail.component.tsexecution-create.component.ts__currentUser_coreBaseURLcurrentUserauthStatusEach component/service follows this structure:
component-name/ ├── component-name.component.ts ├── component-name.component.html └── component-name.component.css
tsconfig.jsonindex.tssignal()computed()src/styles.csssrc/theme.scss{ id: string; name: string; email: string; createdAt: Date; updatedAt: Date; }
{ id: string; name: string; type: string; documentationIds: string[]; documentations: Documentation[]; userId: string; createdAt: Date; updatedAt: Date; }
{ _id: string; _name: string; _uri: string; _status: string; _userId: string; _user: User; // ... more fields }
{ id: string; name: string; flowId: string; userId: string; trigger: ExecutionTrigger; timeout: number; orderMode: 'strict' | 'flexible'; version: number; createdAt: Date; updatedAt: Date; startedAt: Date | null; completedAt: Date | null; testCases: EventTestCase[]; status: ExecutionStatus; // 'created' | 'running' | 'succeeded' | 'failed' | 'cancelled' testCasesToRun: string[]; eventsOrder: { [key: string]: number }; timeoutTestEvents?: number; executionWindow?: number; }
{ type: 'external' | 'internalEvent'; eventId: string | null; payload?: any; }
{ id: string; eventId: string; type: 'contract' | 'response' | 'timing' | 'infrastructure'; eventOrder: number; name: string; description: string; status: TestCaseStatus; // 'created' | 'running' | 'passed' | 'failed' | 'timeout' | 'skipped' startAt: Date | null; endAt: Date | null; results: any | null; eventData: EventData; }
{ name: string; description: string; type: string; }
The application supports the following test case types:
infrastructure_validation: Validates exchange and routing key configuration
contract_validation: Validates message payload contracts
missing_event_detection: Detects missing events during execution
duplicate_message_detection: Detects duplicate messages
event_order_validation (NEW): Validates event execution order
orderMode: 'strict'checkingauthenticatednotAuthenticatednew-messagesocket-eventsbrokersexecutionsflowsBase URL:
http://localhost:3000/event-flow/api/v1POST /auth/loginPOST /auth/validateGET /brokersPOST /brokersPATCH /brokers/:idDELETE /brokers/:idPATCH /brokers/toggle-connection/:idGET /flows/by-userGET /executions/by-userPOST /executionsGET /executions/:idDELETE /executions/:idGET /executions/by-flow/:flowIdPOST /executions/run/:executionIdPOST /executions/stop/:executionIdGET /executions/test-casesx-token/dashboard/flows/executions/createstrictflexibleevent_order_validationstrictPOST /executions/dashboard/flows/executions/listinfrastructure_validationInfrastructureValidationResultComponentcontract_validationContractValidationResultComponentmissing_event_detectionMissingEventDetectionResultComponentduplicate_message_detectionDuplicateMessageDetectionResultComponentThis workflow ensures that
event_order_validationstrictScenario A: User selects
event_order_validationflexiblestrictScenario B: User changes orderMode to
flexibleevent_order_validationstrictReal-time validation: Triggers on both:
(selectionChange)(selectionChange)# Start development server npm start # or ng serve # Build in development mode with watch npm run watch # Build for production npm run build
# Run unit tests npm test # or ng test
# Generate component ng generate component component-name # Generate service ng generate service service-name # View schematics help ng generate --help
# Production build (optimized) ng build --configuration production # Development build ng build --configuration development
REST API Backend
environment.tsx-tokenWebSocket Server
environment.tswsURLAngular Material
cyan-orangeFile:
src/app/environment/environment.ts{ production: boolean; coreBaseURL: string; // REST API URL wsURL: string; // WebSocket server URL }
falseWebsocketServiceSocketEventsSocketEvents.executionslocalStorage'token'Path:
src/app/dashboard/components/flows/executions/execution-create/execution-create.component.tsKey Features:
event_order_validationKey Methods:
loadFlows()loadTestCases()onFlowSelected()addEventToOrder()drop()buildPayloadForm()onTestCasesChange()onOrderModeChange()validateEventOrderTestCase()onSubmit()Path:
src/app/dashboard/components/flows/executions/execution-list/execution-list.component.tsKey Features:
Key Methods:
getExecutions()subscribeToExecutionUpdates()runExecution()stopExecution()deleteExecution()selectExecution()getExecutionDuration()canRunExecution()canStopExecution()canDeleteExecution()isInfrastructureValidation()isContractValidation()All located in:
src/app/dashboard/components/flows/executions/test-case-results/InfrastructureValidationResultComponent
ContractValidationResultComponent
MissingEventDetectionResultComponent
DuplicateMessageDetectionResultComponent
Path:
src/app/core/services/execution.service.tsMethods:
getExecutions()createExecution(execution)getExecutionById(id)deleteExecution(id)getByFlowId(flowId)runExecution(executionId, customTimeout?)stopExecution(executionId)Path:
src/app/core/services/test-case.service.tsMethods:
getTestCases()