add visual alert for order service latency

services/api-gateway/src/index.ts

@@ -70,6 +70,13 @@ app.use('/api/metrics/inventory', createProxyMiddleware({
     pathRewrite: { '^/api/metrics/inventory': '/metrics' }
 }));
 
+// Service Stats (Custom)
+app.use('/api/stats/orders', createProxyMiddleware({
+    target: ORDER_SERVICE_URL,
+    changeOrigin: true,
+    pathRewrite: { '^/api/stats/orders': '/stats' }
+}));
+
 app.get('/health', (req, res) => {
     res.json({ status: 'API Gateway UP' });
 });

services/frontend/src/App.tsx

@@ -51,6 +51,20 @@ function App() {
         return () => clearInterval(interval);
     }, []);
 
+    const [avgLatency, setAvgLatency] = useState<number>(0);
+
+    useEffect(() => {
+        const statsInterval = setInterval(async () => {
+            try {
+                const res = await axios.get(`${API_GATEWAY_URL}/stats/orders`);
+                setAvgLatency(res.data.averageLatency);
+            } catch (e) {
+                console.error("Failed to fetch stats");
+            }
+        }, 2000);
+        return () => clearInterval(statsInterval);
+    }, []);
+
     const [queuedOrderIds, setQueuedOrderIds] = useState<string[]>([]);
 
     useEffect(() => {
@@ -158,6 +172,13 @@ function App() {
                 <div className={`status-badge ${health.order === 'UP' ? 'CONFIRMED' : 'FAILED'}`}>
                     Order Service: {health.order}
                 </div>
+                <div className={`status-badge`} style={{
+                    backgroundColor: avgLatency > 0.1 ? 'var(--danger)' : 'var(--success)',
+                    color: 'white',
+                    transition: 'background-color 0.3s'
+                }}>
+                    Avg Latency (30s): {avgLatency.toFixed(2)}s
+                </div>
             </div>
 
             <div className="card">

services/order-service/src/index.ts

@@ -75,6 +75,38 @@ app.use((req, res, next) => {
     next();
 });
 
+// Rolling Window Stats for Alerting
+const WINDOW_SIZE_MS = 30000;
+let requestDurations: { time: number, duration: number }[] = [];
+
+// Periodic Cleanup
+setInterval(() => {
+    const now = Date.now();
+    requestDurations = requestDurations.filter(r => now - r.time <= WINDOW_SIZE_MS);
+}, 5000);
+
+app.use((req, res, next) => {
+    const start = Date.now();
+    res.on('finish', () => {
+        const duration = (Date.now() - start) / 1000; // in seconds
+        requestDurations.push({ time: Date.now(), duration });
+    });
+    next();
+});
+
+// Stats Endpoint
+app.get('/stats', (req, res) => {
+    const now = Date.now();
+    // Ensure we are looking at fresh data (though cleanup runs periodically)
+    const validDurations = requestDurations.filter(r => now - r.time <= WINDOW_SIZE_MS);
+
+    const count = validDurations.length;
+    const totalDuration = validDurations.reduce((sum, r) => sum + r.duration, 0);
+    const average = count > 0 ? totalDuration / count : 0;
+
+    res.json({ averageLatency: average, requestCount: count });
+});
+
 // Health Check
 app.get('/health', async (req: Request, res: Response) => {
     try {