Status Message Implementation

Status Message System Implementation

Overview

Implemented a comprehensive status message system to track the lifecycle of requests from Angular frontend through Node.js to Rust backend, displaying real-time status updates in an expandable/collapsible widget at the bottom of the screen.

Components Created

1. Status Message Service

File: frontend-ng/src/app/common/status-message.service.ts

  • Purpose: Centralized service to manage status messages
  • Features:
    • BehaviorSubject for reactive message updates
    • Stores last 50 messages
    • Message interface with timestamp, type, stage, and metadata
    • Methods: addMessage(), updateMessage(), clearMessages()

Message Stages:

  • sending - Message being sent to backend
  • received - Backend received the message
  • processing - Backend processing the message
  • completed - Processing completed successfully
  • failed - Processing failed

2. Status Widget Component

Files:

  • frontend-ng/src/app/common/status-widget/status-widget.component.ts
  • frontend-ng/src/app/common/status-widget/status-widget.component.html
  • frontend-ng/src/app/common/status-widget/status-widget.component.scss

Features:

  • Uses Ignite UI IgxExpansionPanel for expand/collapse functionality
  • Fixed position at bottom of screen
  • Auto-expands when new messages arrive
  • Color-coded messages by type (info, success, warning, error)
  • Material icons for visual feedback
  • Timestamp display in HH:mm:ss format
  • Clear all messages button
  • Dark theme support
  • Responsive design with max-height and scrolling

Backend Updates

3. Node.js Backend (nsqreaderwriter.js)

File: backend-node/app/jobs/nsqreaderwriter.js

Changes:

  • Added status message emission before publishing to NSQ
  • Sends status via WebSocket to client using cid field
  • Message includes: message text, type, stage, messageId, cid, timestamp

Status Message Example:

{
    message: `Backend processing: Message ID ${requestData.id}`,
    type: 'info',
    stage: 'sending',
    messageId: requestData.id,
    cid: requestData.cid,
    timestamp: new Date().toISOString()
}

4. Rust Backend (main.rs)

File: backend-rust/src/main.rs

Changes:

  • Added status message publication when message is received
  • Publishes to same topic as response messages
  • Uses existing NSQ producer
  • Includes message ID and cid for client routing

Status Message Example:

{
    "message": "Rust backend received: Message ID {id}",
    "type": "info",
    "stage": "received",
    "messageId": message.id,
    "cid": message.cid,
    "timestamp": "2025-11-24T...",
    "stopic": "status_message"
}

Frontend Integration

5. Analytics Service Updates

File: frontend-ng/src/app/analytics.service.ts

Changes:

  1. Imported StatusMessageService
  2. Added dependency injection in constructor
  3. Added status message before sending request to backend
  4. Added listener for status_message topic from backend

Message Flow:

  1. User triggers analytics request
  2. Angular service sends status: “Sending request…”
  3. Node.js receives, sends status: “Backend processing…”
  4. Rust receives, sends status: “Rust backend received…”
  5. All status messages appear in widget

6. App Module Updates

File: frontend-ng/src/app/app.module.ts

Changes:

  • Imported StatusWidgetComponent
  • Imported IgxExpansionPanelModule
  • Added StatusWidgetComponent to declarations
  • Added IgxExpansionPanelModule to imports

7. Nav Bar Integration

File: frontend-ng/src/app/nav/nav-bar.component.html

Changes:

  • Added <status-widget></status-widget> before closing </main> tag
  • Widget positioned at bottom of screen via CSS

WebSocket Communication Flow

┌─────────────────┐
│  Angular Client │
│  (cid = socket) │
└────────┬────────┘
         │ 1. Request (with cid)
         ▼
┌─────────────────┐
│   Node.js NSQ   │ ──→ Status: "Sending to backend"
│  Reader/Writer  │
└────────┬────────┘
         │ 2. Publish to NSQ
         ▼
┌─────────────────┐
│  Rust Backend   │ ──→ Status: "Received at Rust"
│   (NSQ Topic)   │
└────────┬────────┘
         │ 3. Process & Publish Response
         ▼
┌─────────────────┐
│   Node.js NSQ   │ ──→ Forward to WebSocket (using cid)
│     Reader      │
└────────┬────────┘
         │ 4. Emit to socket.id === cid
         ▼
┌─────────────────┐
│  Angular Client │ ──→ Display in Status Widget
│ Status Widget   │
└─────────────────┘

UI Features

Status Widget Display

  • Header: Shows count of messages and latest message preview
  • Expand/Collapse: Click header or icon to toggle
  • Message List:
    • Icon indicating stage (send, done, sync, check_circle, error)
    • Timestamp in monospace font
    • Stage badge (SENDING, RECEIVED, PROCESSING, etc.)
    • Message text and optional details
  • Color Coding:
    • Blue border: Info messages
    • Green border: Success messages
    • Orange border: Warning messages
    • Red border: Error messages
  • Actions: Clear all button to remove all messages

Styling

  • Fixed at bottom of viewport (z-index: 1000)
  • White background with shadow
  • Max height 400px with scrolling
  • Smooth transitions and hover effects
  • Dark theme compatible

Testing

To test the implementation:

  1. Frontend Build: Navigate to frontend-ng and build

    cd frontend-ng
npm install
ng serve

  2. Backend Services: Ensure Node.js and Rust backends are running

    # Node.js
cd backend-node
npm start

# Rust
cd backend-rust
cargo run

  3. Trigger Request:

    • Go to Analytics page
    • Select an asset or portfolio
    • Request analysis
    • Watch status widget for messages:
      • “Sending request: …” (Angular)
      • “Backend processing: …” (Node.js)
      • “Rust backend received: …” (Rust)

Benefits

  1. Visibility: Users see exactly what’s happening with their requests
  2. Debugging: Developers can track message flow through the system
  3. User Experience: Real-time feedback reduces perceived wait time
  4. Error Tracking: Failed stages are clearly identified
  5. Non-Intrusive: Widget stays collapsed until needed
  6. Persistent: Messages remain visible until cleared

Future Enhancements

  1. Filter by Type: Add buttons to filter messages by type/stage
  2. Export: Allow exporting messages for debugging
  3. Message Details: Expand individual messages to show full payload
  4. Sound Notifications: Optional audio alerts for errors
  5. Auto-Clear: Automatically remove old messages after timeout
  6. Search: Search through message history
  7. Performance Metrics: Show request duration and processing time
Follow Us: