+
+ {[1, 2, 3, 4].map((i) => (
+
+ ))}
+
+
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+ ))}
+
+
+ {/* Page header */}
+
+
+
+ Dashboard
+
+
+
+ Real-time monitoring of all connected IoT devices
+
+
+
+ {!socketConnected && (
+
+ Live updates paused
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ── Device monitoring grid ── */}
+ {/* Main content: keep the grid as the primary focus */}
+
+ {/* Empty state when the server returned no rows */}
+ {data.length === 0 ? (
+
+ ) : (
+
+
+
+ {
+ const color =
+ props.status === 'Critical'
+ ? 'text-red-600'
+ : props.status === 'Warning'
+ ? 'text-amber-600'
+ : 'text-slate-800'
+
+ return (
+
+ {Number(props.readingValue).toFixed(2)}
+
+ )
+ }}
+ />
+ {
+ const s = props.signalStrength
+ const barColor = s >= 75 ? 'bg-emerald-500' : s >= 50 ? 'bg-amber-400' : 'bg-red-400'
+ return (
+
+
+ {[1, 2, 3, 4].map((bar) => (
+
= bar * 25 ? barColor : 'bg-slate-200'}`}
+ style={{ height: `${bar * 3 + 2}px` }}
+ />
+ ))}
+
+
{s}%
+
+ )
+ }}
+ />
+
{
+ const pct = Math.round(props.batteryLevel)
+ const barColor = pct > 50 ? 'bg-emerald-500' : pct > 20 ? 'bg-amber-400' : 'bg-red-500'
+ const textColor = pct > 50 ? 'text-emerald-600' : pct > 20 ? 'text-amber-600' : 'text-red-600'
+ return (
+
+ )
+ }}
+ />
+
+
+ )
+}
diff --git a/use-cases/Iot-monitoring-sample/client/src/pages/Reports.tsx b/use-cases/Iot-monitoring-sample/client/src/pages/Reports.tsx
new file mode 100644
index 0000000..3385b21
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/pages/Reports.tsx
@@ -0,0 +1,312 @@
+/**
+ * Reports Page
+ * Summary reports with export functionality
+ */
+
+import { useState, useEffect, useRef } from 'react'
+import {
+ GridComponent,
+ ColumnsDirective,
+ ColumnDirective,
+ Inject,
+ Page,
+ Sort,
+ ExcelExport,
+ PdfExport
+} from '@syncfusion/ej2-react-grids'
+import { apiService } from '../services/apiService'
+
+interface ReportData {
+ sensorType: string
+ totalDevices: number
+ averageReading: number
+ maxReading: number
+ minReading: number
+ avgBattery: number
+}
+
+export default function Reports() {
+ const [reportData, setReportData] = useState
([])
+ const [isLoading, setIsLoading] = useState(true)
+
+ const gridRef = useRef(null)
+
+ const fetchReports = async () => {
+ setIsLoading(true)
+
+ try {
+ const data = await apiService.getReports()
+ setReportData(data)
+ } catch (error) {
+ console.error('Failed to fetch reports:', error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ fetchReports()
+ }, [])
+
+ const handleExcelExport = () => {
+ gridRef.current?.excelExport()
+ }
+
+ const handlePdfExport = () => {
+ gridRef.current?.pdfExport()
+ }
+
+ if (isLoading) {
+ return (
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+
+
+
+ {[1, 2, 3, 4, 5].map((i) => (
+
+ ))}
+
+
+ {/* Page Header */}
+
+
Reports
+
+ Summarized device and sensor analytics
+
+
+
+ {/* Summary Cards */}
+
+ {[
+ {
+ label: 'Total Monitored Devices',
+ value: totalDevices.toLocaleString(),
+ color: 'text-blue-600',
+ icon: '📡'
+ },
+ {
+ label: 'Avg Reading (All Sensors)',
+ value: avgReading.toFixed(2),
+ color: 'text-violet-600',
+ icon: '📊'
+ },
+ {
+ label: 'Fleet Avg Battery',
+ value: `${avgBattAll.toFixed(1)}%`,
+ color: 'text-emerald-600',
+ icon: '🔋'
+ }
+ ].map((card) => (
+
+
+
{card.icon}
+
+
+ {card.label}
+
+
+
+
+ {card.value}
+
+
+ ))}
+
+
+ {/* Reports Grid */}
+
+ {/* Grid Header */}
+
+
+
+ Sensor Type Summary
+
+
+
+ {reportData.length} Sensor Types
+
+
+
+
+
+
+
+
+ Export Excel
+
+
+
+
+
+
+ Export PDF
+
+
+
+
+
+
+
+
+
+
+
+ {reportData.length} sensor types •{' '}
+ {totalDevices.toLocaleString()} monitored devices
+
+
+
+ {/* Breakdown */}
+
+
+
+ Sensor Type Breakdown
+
+
+
+
+ {reportData.map((report) => {
+ const badge =
+ report.avgBattery > 60
+ ? 'bg-emerald-50 text-emerald-600'
+ : report.avgBattery > 30
+ ? 'bg-amber-50 text-amber-600'
+ : 'bg-red-50 text-red-600'
+
+ return (
+
+
+
+ {report.sensorType}
+
+
+
+ {report.totalDevices} devices • Avg{' '}
+ {report.averageReading.toFixed(2)} • Range{' '}
+ {report.minReading.toFixed(1)} -{' '}
+ {report.maxReading.toFixed(1)}
+
+
+
+
+ {report.avgBattery.toFixed(1)}%
+
+
+ )
+ })}
+
+
+
> {
+ result: T[]
+ count: number
+}
+
+// ------------------------------------------------------------------
+// Fetch devices — called from Dashboard dataStateChange handler
+// ------------------------------------------------------------------
+
+export async function fetchDeviceGridData(state: GridRequestState): Promise {
+ const params = new URLSearchParams({
+ skip: String(state.skip),
+ take: String(state.take),
+ sortBy: state.sortBy,
+ sortDirection: state.sortDirection,
+ searchValue: state.searchValue,
+ })
+
+ // Send preserved where tree to server for correct multi-predicate evaluation
+ // The where tree includes complex filter groups from multi-select checkbox filters
+ if (state.where && state.where.length > 0) {
+ params.set('where', JSON.stringify(state.where))
+ } else if (state.filters && state.filters.length > 0) {
+ // Fallback to flat filters if where tree is not available
+ params.set('filters', JSON.stringify(state.filters))
+ }
+
+
+ const response = await fetch(`${API_BASE_URL}/devices/grid?${params}`)
+ if (!response.ok) {
+ throw new Error(`Grid fetch failed: ${response.status} ${response.statusText}`)
+ }
+ return response.json() as Promise
+}
+
+// ------------------------------------------------------------------
+// Fetch alerts — called from Alerts page dataStateChange handler
+// ------------------------------------------------------------------
+
+export async function fetchAlertGridData(
+ state: GridRequestState,
+ startDate?: Date,
+ endDate?: Date
+): Promise {
+ const params: Record = {
+ skip: String(state.skip),
+ take: String(state.take),
+ sortBy: state.sortBy,
+ sortDirection: state.sortDirection,
+ searchValue: state.searchValue,
+ }
+
+ // Send where tree for complex multi-select filtering (e.g., multiple severity levels)
+ if (state.where && state.where.length > 0) {
+ params['where'] = JSON.stringify(state.where)
+ } else if (state.filters && state.filters.length > 0) {
+ params['filters'] = JSON.stringify(state.filters)
+ }
+
+ if (startDate && endDate) {
+ params['startDate'] = startDate.toISOString()
+ params['endDate'] = endDate.toISOString()
+ }
+
+ // Indicate if this is a virtual scroll request (for row virtualization > 100 records)
+ if (state.isVirtualScroll) {
+ params['virtualScroll'] = 'true'
+ }
+
+ const response = await fetch(`${API_BASE_URL}/alerts/grid?${new URLSearchParams(params)}`)
+ if (!response.ok) {
+ throw new Error(`Alerts fetch failed: ${response.status} ${response.statusText}`)
+ }
+ return response.json() as Promise
+}
+
+// ------------------------------------------------------------------
+// Parse dataStateChange event args -> GridRequestState
+// ------------------------------------------------------------------
+export function parseGridState(args: {
+ skip?: number
+ take?: number
+ sorted?: Array<{ name: string; direction: string }>
+ where?: unknown[]
+ action?: { requestType: string; searchString?: string }
+ searchString?: string
+}): GridRequestState {
+ const skip = args.skip ?? 0
+ const take = args.take ?? 12
+
+ let sortBy = ''
+ let sortDirection: 'ascending' | 'descending' = 'ascending'
+
+ if (args.sorted && args.sorted.length > 0) {
+ sortBy = args.sorted[0].name ?? ''
+ sortDirection =
+ String(args.sorted[0].direction ?? 'ascending').toLowerCase() === 'descending'
+ ? 'descending'
+ : 'ascending'
+ }
+
+ let searchValue =
+ args.searchString ??
+ (args.action?.requestType === 'searching' ? (args.action.searchString ?? '') : '')
+
+ searchValue = searchValue.trim().toLowerCase()
+ const requestType = args.action?.requestType ?? ''
+ const isVirtualScroll = requestType === 'virtualscroll'
+
+ // Preserve the original Syncfusion where tree for correct multi-predicate evaluation.
+ // The where array may contain:
+ // - Simple predicates: { field, operator, value, matchCase }
+ // - Nested groups: { predicates: [...], condition: 'and'|'or' }
+ // Example multi-select: multiple severity values are OR'd within a group,
+ // then AND'd with other column filters.
+ const where = (Array.isArray(args.where) ? args.where : []) as PredicateNode[]
+ const filters: FilterPredicate[] = []
+
+ return {
+ skip,
+ take,
+ sortBy,
+ sortDirection,
+ searchValue,
+ filters,
+ where,
+ isVirtualScroll,
+ requestType,
+ }
+}
+
+// ------------------------------------------------------------------
+// Filter choice data sources (for filter dropdowns)
+// ------------------------------------------------------------------
+
+/**
+ * Get ALL filtered device records for filter dropdown distinct values.
+ *
+ */
+export async function fetchDeviceGridDataForFilterChoices(
+ state: GridRequestState
+): Promise {
+ const params = new URLSearchParams({
+ skip: '0',
+ take: String(999999), // Unlimited — get all matching records
+ sortBy: state.sortBy,
+ sortDirection: state.sortDirection,
+ searchValue: state.searchValue,
+ })
+
+ if (state.where && state.where.length > 0) {
+ params.set('where', JSON.stringify(state.where))
+ } else if (state.filters && state.filters.length > 0) {
+ params.set('filters', JSON.stringify(state.filters))
+ }
+
+ const response = await fetch(`${API_BASE_URL}/devices/grid?${params}`)
+ if (!response.ok) {
+ throw new Error(`Filter choices fetch failed: ${response.status} ${response.statusText}`)
+ }
+ return response.json() as Promise
+}
diff --git a/use-cases/Iot-monitoring-sample/client/src/services/apiService.ts b/use-cases/Iot-monitoring-sample/client/src/services/apiService.ts
new file mode 100644
index 0000000..8fd2de5
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/services/apiService.ts
@@ -0,0 +1,147 @@
+/**
+ * API Service
+ *
+ * Thin fetch wrapper with:
+ * - per-request timeout (default 8s)
+ * - server-availability tracking: when a request fails we expose a
+ * callback so the UI can render an "offline" state and stop the
+ * request loop
+ */
+
+const API_BASE_URL = 'http://localhost:3001/api'
+const DEFAULT_TIMEOUT_MS = 8000
+
+export interface GridQueryParams {
+ skip?: number
+ take?: number
+ sortBy?: string
+ sortDirection?: 'ascending' | 'descending'
+ searchValue?: string
+}
+
+export interface AlertsQueryParams extends GridQueryParams {
+ startDate?: string
+ endDate?: string
+}
+
+type ServerStatusListener = (online: boolean) => void
+
+class ApiServiceClass {
+ private serverOnline = true
+ private listeners: Set = new Set()
+ // In-flight requests are aborted on disconnect to avoid leaks.
+ private activeControllers: Set = new Set()
+
+ /** Subscribe to server-online state changes. Returns an unsubscribe fn. */
+ onServerStatusChange(listener: ServerStatusListener): () => void {
+ this.listeners.add(listener)
+ listener(this.serverOnline)
+ return () => {
+ this.listeners.delete(listener)
+ }
+ }
+
+ private setServerOnline(online: boolean) {
+ if (this.serverOnline === online) return
+ this.serverOnline = online
+ if (!online) this.cancelAll()
+ this.listeners.forEach((l) => {
+ try {
+ l(online)
+ } catch {
+ /* ignore */
+ }
+ })
+ }
+
+ private cancelAll() {
+ for (const c of this.activeControllers) {
+ try {
+ c.abort()
+ } catch {
+ /* ignore */
+ }
+ }
+ this.activeControllers.clear()
+ }
+
+ /** True when the last request succeeded. Useful for retry buttons. */
+ isServerOnline(): boolean {
+ return this.serverOnline
+ }
+
+ private async fetchJson(url: string, init?: RequestInit): Promise {
+ const controller = new AbortController()
+ this.activeControllers.add(controller)
+ const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS)
+ try {
+ const response = await fetch(url, { ...init, signal: controller.signal })
+ clearTimeout(timer)
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status} ${response.statusText}`)
+ }
+ this.setServerOnline(true)
+ return response.json()
+ } catch (err) {
+ clearTimeout(timer)
+ this.setServerOnline(false)
+ throw err
+ } finally {
+ this.activeControllers.delete(controller)
+ }
+ }
+
+ private toQueryString(params: object): string {
+ const qs = new URLSearchParams()
+ Object.entries(params as Record).forEach(([key, value]) => {
+ if (value !== undefined && value !== null && value !== '') {
+ qs.append(key, String(value))
+ }
+ })
+ return qs.toString()
+ }
+
+ async getDevices(params: GridQueryParams) {
+ return this.fetchJson(`${API_BASE_URL}/devices/grid?${this.toQueryString(params)}`)
+ }
+
+ async updateDevice(deviceId: string, data: Record) {
+ return this.fetchJson(`${API_BASE_URL}/devices/${deviceId}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(data),
+ })
+ }
+
+ async getSummary() {
+ return this.fetchJson(`${API_BASE_URL}/devices/summary`)
+ }
+
+ async getAlerts(params: AlertsQueryParams) {
+ return this.fetchJson(`${API_BASE_URL}/alerts/grid?${this.toQueryString(params)}`)
+ }
+
+ async updateAlertStatus(alertId: string, status: string) {
+ return this.fetchJson(`${API_BASE_URL}/alerts/${encodeURIComponent(alertId)}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ status }),
+ })
+ }
+
+ async deleteAlert(alertId: string) {
+ return this.fetchJson(`${API_BASE_URL}/alerts/${encodeURIComponent(alertId)}`, {
+ method: 'DELETE',
+ })
+ }
+
+ async getAnalytics() {
+ return this.fetchJson(`${API_BASE_URL}/analytics`)
+ }
+
+ async getReports() {
+ return this.fetchJson(`${API_BASE_URL}/reports`)
+ }
+}
+
+export const apiService = new ApiServiceClass()
diff --git a/use-cases/Iot-monitoring-sample/client/src/services/socketService.ts b/use-cases/Iot-monitoring-sample/client/src/services/socketService.ts
new file mode 100644
index 0000000..e527f90
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/services/socketService.ts
@@ -0,0 +1,239 @@
+/**
+ * Socket Service
+ * Reusable React Socket.IO client with automatic reconnect.
+ *
+ * - Subscriptions are stored in a Map keyed by event name
+ * - Server-triggered events only fire when the socket is actually connected
+ * - Connection state listeners are notified on every change so the UI
+ * can render a clean "offline / reconnecting" state.
+ */
+
+import { io, Socket } from 'socket.io-client'
+
+class SocketServiceClass {
+ private socket: Socket | null = null
+ private subscriptions: Map = new Map()
+ private isConnected = false
+ private reconnectAttempts = 0
+ private maxReconnectAttempts = 10
+ private connectionStateListeners: Array<(connected: boolean) => void> = []
+ private url: string = 'http://localhost:3001'
+ // private url = (import.meta.env.VITE_API_URL || '').replace('/api', '')
+
+ /**
+ * Subscribe to connection state changes
+ * Returns unsubscribe function
+ */
+ onConnectionStateChange(callback: (connected: boolean) => void): () => void {
+ this.connectionStateListeners.push(callback)
+ // Immediately notify of current state
+ callback(this.isConnected)
+ return () => {
+ const idx = this.connectionStateListeners.indexOf(callback)
+ if (idx > -1) this.connectionStateListeners.splice(idx, 1)
+ }
+ }
+
+ /**
+ * Notify all listeners of connection state change
+ */
+ private notifyConnectionStateChange(): void {
+ this.connectionStateListeners.forEach((cb) => {
+ try {
+ cb(this.isConnected)
+ } catch (error) {
+ console.error('Error in connection state listener:', error)
+ }
+ })
+ }
+
+ /**
+ * Connect to Socket.IO server
+ */
+ connect(url: string = 'http://localhost:3001'): Promise {
+ //connect(url = this.url): Promise {
+ return new Promise((resolve, reject) => {
+ // If a socket already exists and is connected, do nothing
+ if (this.socket && this.isConnected) {
+ resolve()
+ return
+ }
+
+ // If a previous socket exists, tear it down first
+ if (this.socket) {
+ try {
+ this.socket.removeAllListeners()
+ this.socket.disconnect()
+ } catch {
+ /* ignore */
+ }
+ this.socket = null
+ }
+
+ this.url = url
+
+ try {
+ this.socket = io(url, {
+ reconnection: true,
+ reconnectionDelay: 1500,
+ reconnectionDelayMax: 8000,
+ reconnectionAttempts: this.maxReconnectAttempts,
+ transports: ['websocket', 'polling'],
+ timeout: 8000,
+ })
+
+ this.socket.on('connect', () => {
+ console.log('[Socket] connected:', this.socket?.id)
+ this.isConnected = true
+ this.reconnectAttempts = 0
+ this.notifyConnectionStateChange()
+ resolve()
+ })
+
+ this.socket.on('disconnect', (reason) => {
+ console.log('[Socket] disconnected:', reason)
+ this.isConnected = false
+ this.notifyConnectionStateChange()
+ })
+
+ this.socket.on('reconnect', () => {
+ console.log('[Socket] reconnected')
+ this.isConnected = true
+ this.reconnectAttempts = 0
+ this.notifyConnectionStateChange()
+ })
+
+ this.socket.on('reconnect_attempt', () => {
+ this.reconnectAttempts++
+ console.log(`[Socket] reconnecting... attempt ${this.reconnectAttempts}`)
+ })
+
+ this.socket.on('connect_error', (error) => {
+ // Only log the first few errors to avoid flooding the console
+ if (this.reconnectAttempts < 3) {
+ console.warn('[Socket] connect error:', error.message)
+ }
+ this.isConnected = false
+ this.notifyConnectionStateChange()
+ if (this.reconnectAttempts === 1) {
+ // Reject the initial connect promise so callers can show
+ // a graceful "server unavailable" state.
+ reject(error)
+ }
+ })
+
+ // Forward server-pushed events to subscribers — but ONLY when
+ // the socket is actually connected. This prevents the
+ // `socketService.triggerSubscribers` map from dispatching stale
+ // events after the server has gone down.
+ this.socket.on('device_update', (data) => {
+ if (!this.isConnected) return
+ this.triggerSubscribers('device_update', data)
+ })
+ this.socket.on('anomaly_detected', (data) => {
+ if (!this.isConnected) return
+ this.triggerSubscribers('anomaly_detected', data)
+ })
+ this.socket.on('summary_update', (data) => {
+ if (!this.isConnected) return
+ this.triggerSubscribers('summary_update', data)
+ })
+ } catch (error) {
+ console.error('[Socket] connection failed:', error)
+ reject(error)
+ }
+ })
+ }
+
+ /**
+ * Disconnect from Socket.IO server
+ */
+ disconnect(): void {
+ if (this.socket) {
+ try {
+ this.socket.removeAllListeners()
+ this.socket.disconnect()
+ } catch {
+ /* ignore */
+ }
+ this.socket = null
+ }
+ this.isConnected = false
+ this.subscriptions.clear()
+ this.notifyConnectionStateChange()
+ }
+
+ /**
+ * Subscribe to event
+ */
+ subscribe(event: string, callback: Function): void {
+ if (!this.subscriptions.has(event)) {
+ this.subscriptions.set(event, [])
+ }
+ // Prevent duplicate subscriptions for the same callback
+ const list = this.subscriptions.get(event)!
+ if (!list.includes(callback)) {
+ list.push(callback)
+ }
+ }
+
+ /**
+ * Unsubscribe from event
+ */
+ unsubscribe(event: string, callback: Function): void {
+ const subscribers = this.subscriptions.get(event)
+ if (subscribers) {
+ const index = subscribers.indexOf(callback)
+ if (index > -1) {
+ subscribers.splice(index, 1)
+ }
+ }
+ }
+
+ /**
+ * Emit event to server
+ */
+ emit(event: string, data?: any): void {
+ if (this.socket && this.isConnected) {
+ this.socket.emit(event, data)
+ }
+ }
+
+ /**
+ * Trigger all subscribers for an event
+ */
+ private triggerSubscribers(event: string, data: any): void {
+ const subscribers = this.subscriptions.get(event) || []
+ for (const callback of subscribers) {
+ try {
+ callback(data)
+ } catch (error) {
+ console.error(`[Socket] error in subscriber for ${event}:`, error)
+ }
+ }
+ }
+
+ /**
+ * Get connection status
+ */
+ getIsConnected(): boolean {
+ return this.isConnected
+ }
+
+ /**
+ * Get socket ID
+ */
+ getSocketId(): string | undefined {
+ return this.socket?.id
+ }
+
+ /**
+ * Get the configured URL (useful for debugging)
+ */
+ getUrl(): string {
+ return this.url
+ }
+}
+
+// Export singleton instance
+export const socketService = new SocketServiceClass()
diff --git a/use-cases/Iot-monitoring-sample/client/src/utils/constants.ts b/use-cases/Iot-monitoring-sample/client/src/utils/constants.ts
new file mode 100644
index 0000000..21998ef
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/utils/constants.ts
@@ -0,0 +1,26 @@
+/**
+ * Application Constants
+ */
+
+export const SENSOR_TYPES = ['Temperature', 'Pressure', 'Humidity', 'Voltage', 'Flow', 'Vibration']
+
+export const LOCATIONS = ['Factory A', 'Factory B', 'Warehouse', 'Plant 1', 'Plant 2']
+
+export const DEVICE_STATUSES = {
+ Normal: { color: '#10b981', bg: '#ecfdf5', label: 'Normal' },
+ Warning: { color: '#f59e0b', bg: '#fffbeb', label: 'Warning' },
+ Critical: { color: '#ef4444', bg: '#fef2f2', label: 'Critical' }
+}
+
+export const SEVERITY_LEVELS = {
+ High: { color: '#ef4444', bg: '#fef2f2' },
+ Medium: { color: '#f59e0b', bg: '#fffbeb' },
+ Low: { color: '#3b82f6', bg: '#eff6ff' },
+ Critical: { color: '#7c3aed', bg: '#faf5ff' }
+}
+
+export const GRID_PAGE_SIZES = [12, 24, 48, 96]
+
+export const CHARTS_REFRESH_INTERVAL = 30000 // 30 seconds
+
+export const SOCKET_UPDATE_INTERVAL = 2500 // 2.5 seconds
diff --git a/use-cases/Iot-monitoring-sample/client/src/utils/dateUtils.ts b/use-cases/Iot-monitoring-sample/client/src/utils/dateUtils.ts
new file mode 100644
index 0000000..59c5224
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/utils/dateUtils.ts
@@ -0,0 +1,47 @@
+/**
+ * Date Utilities
+ * Helper functions for date manipulation and formatting
+ */
+
+export const formatDate = (date: Date | string): string => {
+ const d = new Date(date)
+ return d.toLocaleString('en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ })
+}
+
+export const getDateRange = (rangeType: 'today' | 'yesterday' | 'last7days' | 'custom') => {
+ const now = new Date()
+ const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+
+ switch (rangeType) {
+ case 'today':
+ return {
+ startDate: today,
+ endDate: new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)
+ }
+ case 'yesterday':
+ const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
+ return {
+ startDate: yesterday,
+ endDate: new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)
+ }
+ case 'last7days':
+ const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+ return {
+ startDate: sevenDaysAgo,
+ endDate: now
+ }
+ default:
+ return { startDate: today, endDate: now }
+ }
+}
+
+export const toISOString = (date: Date | string): string => {
+ return new Date(date).toISOString()
+}
diff --git a/use-cases/Iot-monitoring-sample/client/src/vite-env.d.ts b/use-cases/Iot-monitoring-sample/client/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// >
+ * state = 'NORMAL' | 'EXCEEDED'
+ */
+ this.deviceStateMap = new Map()
+
+ /**
+ * Map — last time we emitted an alert
+ * for this pair. Used as a final dedup safety net.
+ */
+ this.lastEmittedAt = new Map()
+
+ this.cleanupTimer = setInterval(() => this.cleanupStaleEntries(), CLEANUP_INTERVAL_MS)
+ }
+
+ /**
+ * Initialise a device's state when it joins the system.
+ * Without this the first reading would be misinterpreted as a crossing.
+ */
+ seedDevice(deviceId, alertType) {
+ if (!this.deviceStateMap.has(deviceId)) {
+ this.deviceStateMap.set(deviceId, new Map())
+ }
+ const inner = this.deviceStateMap.get(deviceId)
+ if (!inner.has(alertType)) {
+ inner.set(alertType, { state: 'NORMAL' })
+ }
+ }
+
+ /**
+ * Check whether a new alert should be emitted for a (device, alertType)
+ * pair given the latest reading.
+ *
+ * Returns { shouldEmit, isClearTransition }.
+ * - shouldEmit=true and isClearTransition=false → create a new alert
+ * - shouldEmit=false and isClearTransition=true → silent state reset
+ * - shouldEmit=false and isClearTransition=false → no-op
+ */
+ evaluate(device, alertType, threshold) {
+ const value = this._extractValue(device, alertType)
+ if (value == null || !Number.isFinite(value)) {
+ return { shouldEmit: false, isClearTransition: false }
+ }
+
+ const deviceId = device.deviceId
+ this.seedDevice(deviceId, alertType)
+ const slot = this.deviceStateMap.get(deviceId).get(alertType)
+
+ const upper = threshold + HYSTERESIS
+ const lower = threshold - HYSTERESIS
+
+ const currentlyExceeded = value > upper
+ const isRecovery = value <= lower
+
+ if (slot.state === 'NORMAL') {
+ if (currentlyExceeded) {
+ // Crossing event. Final dedup safety net: if we've emitted
+ // an alert for this pair within DEDUP_WINDOW_MS, skip.
+ if (this._recentlyEmitted(deviceId, alertType)) {
+ slot.state = 'EXCEEDED'
+ return { shouldEmit: false, isClearTransition: false }
+ }
+ slot.state = 'EXCEEDED'
+ this.lastEmittedAt.set(this._dedupKey(deviceId, alertType), Date.now())
+ return { shouldEmit: true, isClearTransition: false }
+ }
+ return { shouldEmit: false, isClearTransition: false }
+ }
+
+ // slot.state === 'EXCEEDED'
+ if (isRecovery) {
+ slot.state = 'NORMAL'
+ return { shouldEmit: false, isClearTransition: true }
+ }
+
+ // Still exceeded — suppress noise.
+ return { shouldEmit: false, isClearTransition: false }
+ }
+
+ /**
+ * Get the relevant numeric value for an alert type.
+ * Currently supports TEMPERATURE_THRESHOLD and BATTERY_LOW.
+ */
+ _extractValue(device, alertType) {
+ switch (alertType) {
+ case 'TEMPERATURE_THRESHOLD':
+ return Number(device.readingValue)
+ case 'BATTERY_LOW':
+ return Number(device.batteryLevel)
+ default:
+ return null
+ }
+ }
+
+ _dedupKey(deviceId, alertType) {
+ return `${deviceId}::${alertType}`
+ }
+
+ _recentlyEmitted(deviceId, alertType) {
+ const key = this._dedupKey(deviceId, alertType)
+ const ts = this.lastEmittedAt.get(key)
+ if (!ts) return false
+ return Date.now() - ts < DEDUP_WINDOW_MS
+ }
+
+ /**
+ * Remove dedup keys that are older than the dedup window.
+ */
+ cleanupStaleEntries() {
+ const cutoff = Date.now() - DEDUP_WINDOW_MS
+ for (const [key, ts] of this.lastEmittedAt) {
+ if (ts < cutoff) this.lastEmittedAt.delete(key)
+ }
+ }
+
+ /**
+ * Drop all state for a device (e.g. when it leaves the fleet).
+ */
+ clearDevice(deviceId) {
+ this.deviceStateMap.delete(deviceId)
+ }
+
+ /**
+ * Drop everything (e.g. on a fleet reset).
+ */
+ clearAll() {
+ this.deviceStateMap.clear()
+ this.lastEmittedAt.clear()
+ }
+
+ /**
+ * Stop the cleanup timer.
+ */
+ dispose() {
+ if (this.cleanupTimer) {
+ clearInterval(this.cleanupTimer)
+ this.cleanupTimer = null
+ }
+ }
+}
diff --git a/use-cases/Iot-monitoring-sample/server/services/DeviceService.js b/use-cases/Iot-monitoring-sample/server/services/DeviceService.js
new file mode 100644
index 0000000..29043d4
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/server/services/DeviceService.js
@@ -0,0 +1,552 @@
+/**
+ * Device Service
+ * Enhanced Custom Binding server-side data layer.
+ *
+ * Features:
+ * - Paging, sorting, filtering and searching happen here. The Grid
+ * never receives a full dataset.
+ * - Predicate tree parsing for multi-select checkbox filters
+ * (handles nested OR/AND conditions correctly)
+ * - Status is derived from readingValue vs threshold (plus hysteresis band)
+ * - Anomaly detection delegates to AlertManager
+ *
+ * Filtering order: Filter → Search → Sort → Skip/Take (Virtualization)
+ * This ensures correct total counts for virtual scroll engine
+ */
+
+import { Alert } from '../models/Device.js'
+
+// ------------------------------------------------------------------
+// Predicate evaluation — handles single predicates
+// ------------------------------------------------------------------
+
+/**
+ * Evaluate a single predicate against an item.
+ * Supports operators: equal, notequal, contains, startswith, endswith,
+ * greaterthan, greaterthanorequal, lessthan, lessthanorequal
+ */
+function evaluatePredicate(item, predicate) {
+ const { field, operator, value, matchCase } = predicate
+
+ let itemValue = item[field]
+ let filterValue = value
+
+ if (typeof itemValue === 'string') {
+ itemValue = matchCase ? itemValue : itemValue.toLowerCase()
+ filterValue = matchCase ? String(filterValue) : String(filterValue ?? '').toLowerCase()
+ } else if (typeof itemValue === 'number') {
+ filterValue = Number(filterValue)
+ }
+
+ switch (operator) {
+ case 'equal':
+ return itemValue == filterValue
+ case 'notequal':
+ return itemValue != filterValue
+ case 'contains':
+ return typeof itemValue === 'string' && itemValue.includes(filterValue)
+ case 'startswith':
+ return typeof itemValue === 'string' && itemValue.startsWith(filterValue)
+ case 'endswith':
+ return typeof itemValue === 'string' && itemValue.endsWith(filterValue)
+ case 'greaterthan':
+ return itemValue > filterValue
+ case 'greaterthanorequal':
+ return itemValue >= filterValue
+ case 'lessthan':
+ return itemValue < filterValue
+ case 'lessthanorequal':
+ return itemValue <= filterValue
+ default:
+ return true
+ }
+}
+
+// ------------------------------------------------------------------
+// Predicate tree evaluation — handles complex nested structures
+// ------------------------------------------------------------------
+
+/**
+ * Recursively evaluate a Syncfusion where tree (preserved structure with nested groups/conditions).
+ * Handles:
+ * - Leaf nodes: { field, operator, value, matchCase }
+ * - Nested groups: { predicates: [...], condition: 'and'|'or' }
+ * - Multi-select filters: multiple values OR'd within a group, then AND'd with other groups
+ *
+ * Example multi-select filter on 'severity' with values ['High', 'Critical']:
+ * {
+ * predicates: [
+ * { field: 'severity', operator: 'equal', value: 'High' },
+ * { field: 'severity', operator: 'equal', value: 'Critical' }
+ * ],
+ * condition: 'or'
+ * }
+ *
+ * When combined with another column filter on 'deviceName':
+ * [
+ * { predicates: [...severity filter...], condition: 'or' },
+ * { field: 'deviceName', operator: 'contains', value: 'Sensor' }
+ * ]
+ * These are AND'd at the top level.
+ */
+function evaluateWhereTree(item, node) {
+ if (!node || typeof node !== 'object') return true
+
+ // Nested group: evaluate all child predicates, combine via condition
+ if (Array.isArray(node.predicates) && node.predicates.length > 0) {
+ const condition = node.condition || 'and'
+ const results = node.predicates.map((child) => evaluateWhereTree(item, child))
+
+ if (condition === 'or') {
+ // OR: at least one child must be true
+ return results.some((r) => r === true)
+ } else {
+ // AND (default): all children must be true
+ return results.every((r) => r === true)
+ }
+ }
+
+ // Leaf node: single predicate
+ if (node.field !== undefined) {
+ return evaluatePredicate(item, node)
+ }
+
+ return true
+}
+
+/**
+ * Apply column filters to data using where tree (complex nested predicates).
+ * Order of operations:
+ * 1. Apply column filters (from where tree or flat filters)
+ * 2. Apply global search
+ * 3. Apply sorting
+ * 4. Apply skip/take (for paging or virtualization)
+ *
+ * This method returns the filtered & sorted data.
+ * The caller must handle skip/take for virtualization.
+ */
+function applyFilters(data, filters, whereTree) {
+ if (!filters || filters.length === 0) {
+ // If whereTree is provided, use it for evaluation (preserves grouping/nesting)
+ if (whereTree && whereTree.length > 0) {
+ return data.filter((item) => {
+ // whereTree is an array of predicates/groups at the top level
+ // These are implicitly AND-combined
+ const results = whereTree.map((node) => evaluateWhereTree(item, node))
+ return results.every((r) => r === true)
+ })
+ }
+ return data
+ }
+
+ if (whereTree && whereTree.length > 0) {
+ // Prefer whereTree over flat filters (preserves grouping semantics)
+ return data.filter((item) => {
+ const results = whereTree.map((node) => evaluateWhereTree(item, node))
+ return results.every((r) => r === true)
+ })
+ }
+
+ // Fallback to flat filters (backward compatibility)
+ // Filters are evaluated in order, with `predicate` controlling combination:
+ // - 'or' => accumulated OR passed
+ // - default or 'and' => accumulated AND passed
+ return data.filter((item) => {
+ let result = false
+ for (let i = 0; i < filters.length; i++) {
+ const pred = filters[i]
+ const passed = evaluatePredicate(item, pred)
+ if (i === 0) {
+ result = passed
+ } else if (pred.predicate === 'or') {
+ result = result || passed
+ } else {
+ result = result && passed
+ }
+ }
+ return result
+ })
+}
+
+// ------------------------------------------------------------------
+// Status derivation
+// ------------------------------------------------------------------
+
+/**
+ * Derive a device's status from its current readingValue vs threshold.
+ * Uses a small hysteresis band to keep the status from flapping right
+ * around the threshold.
+ */
+function deriveStatus(readingValue, threshold) {
+ if (readingValue == null || threshold == null) return 'Normal'
+ if (readingValue > threshold + 2) return 'Critical'
+ if (readingValue > threshold) return 'Warning'
+ return 'Normal'
+}
+
+// ------------------------------------------------------------------
+// DeviceService
+// ------------------------------------------------------------------
+
+export class DeviceService {
+ constructor() {
+ this.devices = []
+ this.alerts = []
+ this.alertIdCounter = 1
+ }
+
+ setDevices(devices) {
+ this.devices = devices
+ }
+
+ getDevices() {
+ return this.devices
+ }
+
+ // ------------------------------------------------------------------
+ // Custom Binding — devices grid with virtual scroll support
+ // ------------------------------------------------------------------
+ /**
+ * Get paginated, filtered, sorted, searched devices.
+ * Supports virtual scroll requests for large datasets.
+ *
+ * Filter order:
+ * 1. Apply column filters (where tree with multi-predicate support)
+ * 2. Apply global search
+ * 3. Apply sorting
+ * 4. Apply skip/take (virtualization or regular paging)
+ *
+ * Returns { result: [...], count: totalAfterFilterButBeforePaging }
+ * The count is used by the virtual scroll engine to know the total filtered size.
+ */
+ getDevicesForGrid(
+ skip = 0,
+ take = 12,
+ sortBy = '',
+ sortDirection = 'ascending',
+ searchValue = '',
+ filters = [],
+ whereTree = null,
+ virtualScroll = false
+ ) {
+ let data = [...this.devices]
+
+ // 1. FILTER: Apply column filters (where tree for multi-select support)
+ if ((filters && filters.length > 0) || (whereTree && whereTree.length > 0)) {
+ data = applyFilters(data, filters, whereTree)
+ }
+
+ // 2. SEARCH: Apply global search
+ if (searchValue && searchValue.trim()) {
+ const q = searchValue.toLowerCase()
+ data = data.filter(
+ (d) =>
+ d.deviceId.toLowerCase().includes(q) ||
+ d.deviceName.toLowerCase().includes(q) ||
+ d.location.toLowerCase().includes(q) ||
+ d.sensorType.toLowerCase().includes(q) ||
+ d.status.toLowerCase().includes(q)
+ )
+ }
+
+ // 3. SORT: Apply sorting
+ if (sortBy) {
+ data.sort((a, b) => {
+ let av = a[sortBy]
+ let bv = b[sortBy]
+ if (typeof av === 'string') {
+ av = av.toLowerCase()
+ bv = bv.toLowerCase()
+ }
+ if (av < bv) return sortDirection === 'ascending' ? -1 : 1
+ if (av > bv) return sortDirection === 'ascending' ? 1 : -1
+ return 0
+ })
+ }
+
+ // 4. VIRTUALIZATION/PAGING: Apply skip/take
+ // totalCount is the size after filtering but before paging
+ // This is required by the virtual scroll engine
+ const totalCount = data.length
+ const result = data.slice(skip, skip + take)
+
+ return { result, count: totalCount }
+ }
+
+ getDeviceById(deviceId) {
+ return this.devices.find((d) => d.deviceId === deviceId)
+ }
+
+ updateDevice(deviceId, updatedFields) {
+ const idx = this.devices.findIndex((d) => d.deviceId === deviceId)
+ if (idx === -1) return null
+ this.devices[idx] = { ...this.devices[idx], ...updatedFields }
+ // Re-derive status if readingValue or threshold changed
+ const d = this.devices[idx]
+ d.status = deriveStatus(d.readingValue, d.threshold)
+ return d
+ }
+
+ getSummary() {
+ const totalDevices = this.devices.length
+ const onlineDevices = this.devices.filter((d) => d.status !== 'Critical').length
+ const criticalDevices = this.devices.filter((d) => d.status === 'Critical').length
+ const avgBattery = this.devices.length
+ ? Math.round(
+ (this.devices.reduce((s, d) => s + (d.batteryLevel || 0), 0) / this.devices.length) * 100
+ ) / 100
+ : 0
+ return { totalDevices, onlineDevices, criticalDevices, avgBattery }
+ }
+
+ // ------------------------------------------------------------------
+ // Anomaly detection
+ // ------------------------------------------------------------------
+
+ /**
+ * Returns an array of candidate alerts. The caller is expected to:
+ * 1. call `alertManager.evaluate(device, alertType, threshold)` for
+ * each candidate;
+ * 2. when `shouldEmit` is true, persist + broadcast;
+ * 3. when `isClearTransition` is true, no further action is needed
+ * — the state machine has been updated.
+ */
+ checkForAnomalies(device) {
+ const candidates = []
+ if (device.sensorType === 'Temperature' && Number.isFinite(device.readingValue) && Number.isFinite(device.threshold)) {
+ candidates.push({
+ alertType: 'TEMPERATURE_THRESHOLD',
+ threshold: device.threshold,
+ })
+ }
+ if (Number.isFinite(device.batteryLevel) && device.batteryLevel < 20) {
+ candidates.push({
+ alertType: 'BATTERY_LOW',
+ threshold: 20,
+ })
+ }
+ return candidates
+ }
+
+ /**
+ * Build a friendly message for a candidate alert.
+ */
+ buildAlertMessage(device, alertType) {
+ if (alertType === 'TEMPERATURE_THRESHOLD') {
+ return `Temperature exceeded threshold: ${device.readingValue.toFixed(1)}°C > ${device.threshold}°C`
+ }
+ if (alertType === 'BATTERY_LOW') {
+ return `Battery level critical: ${Math.round(device.batteryLevel)}%`
+ }
+ return `${alertType} triggered`
+ }
+
+ persistAlert(candidate) {
+ return this.createAlert(
+ candidate.deviceId,
+ candidate.deviceName,
+ candidate.location,
+ candidate.sensorType,
+ candidate.alertType,
+ candidate.severity,
+ candidate.message
+ )
+ }
+
+ createAlert(deviceId, deviceName, location, sensorType, alertType, severity, message) {
+ const alert = new Alert(
+ `ALT-${String(this.alertIdCounter++).padStart(6, '0')}`,
+ deviceId,
+ deviceName,
+ location,
+ sensorType,
+ alertType,
+ severity,
+ message,
+ new Date().toISOString()
+ )
+ // Ensure new alerts are Active by default
+ alert.status = 'Active'
+ this.alerts.push(alert)
+ return alert
+ }
+
+ /**
+ * Update an alert's status. If set to 'Resolved' the alert is removed
+ * from the active alerts collection so it no longer appears in the
+ * Active Alerts grid.
+ */
+ updateAlertStatus(alertId, status) {
+ const idx = this.alerts.findIndex((a) => a.alertId === alertId)
+ if (idx === -1) return null
+ if (status === 'Resolved') {
+ // Remove from active alerts
+ const removed = this.alerts.splice(idx, 1)[0]
+ return { removed }
+ }
+ this.alerts[idx].status = status
+ return { updated: this.alerts[idx] }
+ }
+
+ /**
+ * Permanently delete an alert and re-derive the linked device status
+ * from its current reading/threshold. Device rows are never deleted.
+ * Returns { removed, updatedDevice } or null if alertId is unknown.
+ */
+ deleteAlert(alertId) {
+ const idx = this.alerts.findIndex((a) => a.alertId === alertId)
+ if (idx === -1) return null
+
+ const [removed] = this.alerts.splice(idx, 1)
+ let updatedDevice = null
+
+ if (removed?.deviceId) {
+ const device = this.getDeviceById(removed.deviceId)
+ if (device) {
+ // Status always follows live reading vs threshold after alert removal
+ device.status = deriveStatus(device.readingValue, device.threshold)
+ device.lastUpdated = new Date().toISOString()
+ updatedDevice = {
+ deviceId: device.deviceId,
+ status: device.status,
+ readingValue: device.readingValue,
+ signalStrength: device.signalStrength,
+ batteryLevel: device.batteryLevel,
+ lastUpdated: device.lastUpdated,
+ }
+ }
+ }
+
+ return { removed, updatedDevice }
+ }
+
+ // ------------------------------------------------------------------
+ // Custom Binding — alerts grid with virtual scroll support
+ // ------------------------------------------------------------------
+ /**
+ * Get paginated, filtered, sorted, searched alerts.
+ * Automatically enables virtualization when total records > 100.
+ *
+ * Filter order:
+ * 1. Apply date range filter
+ * 2. Apply column filters (where tree with multi-predicate support)
+ * 3. Apply global search
+ * 4. Apply sorting
+ * 5. Apply skip/take (virtualization or regular paging)
+ *
+ * Returns { result: [...], count: totalAfterFilterButBeforePaging }
+ * The count is used by the virtual scroll engine to know the total filtered size.
+ *
+ * Virtualization is automatically enabled when total filtered count > 100
+ * (detected at the client by examining the total count).
+ */
+ getAlertsForGrid(
+ skip = 0,
+ take = 12,
+ sortBy = '',
+ sortDirection = 'ascending',
+ searchValue = '',
+ filters = [],
+ whereTree = null,
+ startDate = null,
+ endDate = null,
+ virtualScroll = false
+ ) {
+ let data = [...this.alerts]
+
+ // 1. DATE RANGE: Apply temporal filter first (if provided)
+ if (startDate && endDate) {
+ const start = new Date(startDate).getTime()
+ const end = new Date(endDate)
+ end.setHours(23, 59, 59, 999)
+ const endMs = end.getTime()
+ data = data.filter((a) => {
+ const t = new Date(a.timestamp).getTime()
+ return t >= start && t <= endMs
+ })
+ }
+
+ // 2. FILTER: Apply column filters (where tree for multi-select support)
+ if ((filters && filters.length > 0) || (whereTree && whereTree.length > 0)) {
+ data = applyFilters(data, filters, whereTree)
+ }
+
+ // 3. SEARCH: Apply global search
+ if (searchValue && searchValue.trim()) {
+ const q = searchValue.toLowerCase()
+ data = data.filter(
+ (a) =>
+ a.alertId.toLowerCase().includes(q) ||
+ a.deviceId.toLowerCase().includes(q) ||
+ a.deviceName.toLowerCase().includes(q) ||
+ a.location.toLowerCase().includes(q) ||
+ a.sensorType.toLowerCase().includes(q) ||
+ a.severity.toLowerCase().includes(q) ||
+ a.message.toLowerCase().includes(q)
+ )
+ }
+
+ // 4. SORT: Apply sorting
+ if (sortBy) {
+ data.sort((a, b) => {
+ let av = a[sortBy]
+ let bv = b[sortBy]
+ if (typeof av === 'string') {
+ av = av.toLowerCase()
+ bv = bv.toLowerCase()
+ }
+ if (av < bv) return sortDirection === 'ascending' ? -1 : 1
+ if (av > bv) return sortDirection === 'ascending' ? 1 : -1
+ return 0
+ })
+ }
+
+ // 5. VIRTUALIZATION/PAGING: Apply skip/take
+ // totalCount is the size after all filtering but before paging
+ // This is required by the virtual scroll engine
+ const totalCount = data.length
+ const result = data.slice(skip, skip + take)
+
+ return { result, count: totalCount }
+ }
+
+ // ------------------------------------------------------------------
+ // reports
+ // ------------------------------------------------------------------
+
+
+ getReports() {
+ const reportData = this.devices.reduce((acc, device) => {
+ const existing = acc.find((r) => r.sensorType === device.sensorType)
+ if (existing) {
+ existing.totalDevices++
+ existing.readings.push(device.readingValue)
+ existing.averageReading =
+ Math.round(
+ (existing.readings.reduce((a, b) => a + b, 0) / existing.readings.length) * 100
+ ) / 100
+ existing.maxReading = Math.max(...existing.readings)
+ existing.minReading = Math.min(...existing.readings)
+ existing.avgBattery += device.batteryLevel
+ } else {
+ acc.push({
+ sensorType: device.sensorType,
+ totalDevices: 1,
+ averageReading: device.readingValue,
+ maxReading: device.readingValue,
+ minReading: device.readingValue,
+ avgBattery: device.batteryLevel,
+ readings: [device.readingValue],
+ })
+ }
+ return acc
+ }, [])
+ reportData.forEach((report) => {
+ report.avgBattery = Math.round((report.avgBattery / report.totalDevices) * 100) / 100
+ delete report.readings
+ })
+ return reportData
+ }
+}
+
+export { deriveStatus }
diff --git a/use-cases/Iot-monitoring-sample/server/services/SocketService.js b/use-cases/Iot-monitoring-sample/server/services/SocketService.js
new file mode 100644
index 0000000..8364977
--- /dev/null
+++ b/use-cases/Iot-monitoring-sample/server/services/SocketService.js
@@ -0,0 +1,192 @@
+/**
+ * Socket Service
+ *
+ * Pushes incremental device updates to connected clients.
+ *
+ * Key changes from the previous version:
+ * - Status is DERIVED from readingValue vs threshold. It is no longer
+ * randomised, so the status does not flap on every poll.
+ * - Alerts are emitted only on threshold-CROSSING transitions, as
+ * decided by the AlertManager. Repeated readings that remain in
+ * the exceeded state are silently ignored.
+ * - Updates are throttled to once every ~3 seconds. The interval is
+ * stable (no random jitter per tick) to keep server load predictable.
+ * - The summary update is debounced: at most one summary_update is
+ * emitted per polling cycle.
+ */
+
+// Keep cadence snappy enough for visible "live" cells without flooding
+// the client (Dashboard flushes socket buffer every ~200ms).
+const TICK_INTERVAL_MS = 1500
+const UPDATE_FRACTION = 0.15 // update ~15% of devices per tick
+
+// Helper used to derive a status from a reading — must match the
+// logic used by DeviceService.du service.
+function deriveStatus(readingValue, threshold) {
+ if (readingValue == null || threshold == null) return 'Normal'
+ if (readingValue > threshold + 2) return 'Critical'
+ if (readingValue > threshold) return 'Warning'
+ return 'Normal'
+}
+
+export class SocketService {
+ constructor(io, deviceService, alertManager) {
+ this.io = io
+ this.deviceService = deviceService
+ this.alertManager = alertManager
+ this.updateInterval = null
+ }
+
+ initialize() {
+ this.io.on('connection', (socket) => {
+ console.log(`[Socket] client connected: ${socket.id}`)
+
+ socket.on('disconnect', () => {
+ console.log(`[Socket] client disconnected: ${socket.id}`)
+ })
+
+ socket.on('subscribe_device_updates', () => {
+ // Reserved for future use — currently every connected client
+ // receives updates.
+ })
+
+ socket.on('unsubscribe_device_updates', () => {
+ // Reserved for future use.
+ })
+ })
+
+ // Seed the AlertManager state for every existing device so the
+ // very first reading is not misinterpreted as a crossing.
+ for (const device of this.deviceService.getDevices()) {
+ const candidates = this.deviceService.checkForAnomalies(device)
+ for (const c of candidates) {
+ this.alertManager.seedDevice(device.deviceId, c.alertType)
+ }
+ }
+ }
+
+ startDeviceUpdates() {
+ if (this.updateInterval) return // already running
+
+ this.updateInterval = setInterval(() => {
+ this._tick().catch((err) => {
+ console.error('[Socket] tick error:', err)
+ })
+ }, TICK_INTERVAL_MS)
+ }
+
+ stopDeviceUpdates() {
+ if (this.updateInterval) {
+ clearInterval(this.updateInterval)
+ this.updateInterval = null
+ }
+ }
+
+ async _tick() {
+ const devices = this.deviceService.getDevices()
+ if (devices.length === 0) return
+
+ const updateCount = Math.max(1, Math.floor(devices.length * UPDATE_FRACTION))
+ let didMutateSummary = false
+ let batteryShifted = false
+
+ for (let i = 0; i < updateCount; i++) {
+ const randomIndex = Math.floor(Math.random() * devices.length)
+ const device = devices[randomIndex]
+ if (!device) continue
+
+ const oldBattery = device.batteryLevel
+ const oldStatus = device.status
+
+ // Simulate a realistic sensor reading — small drift around the
+ // current value, with occasional excursions. Critical: the
+ // status is *derived*, not random.
+ // const drift = (Math.random() - 0.5) * 1.5
+ // const excursionChance = 0.05 // 5% chance of a spike
+ // const spike = Math.random() < excursionChance
+ // ? device.threshold * (0.15 + Math.random() * 0.15) * (Math.random() < 0.5 ? 1 : -1)
+ // : 0
+
+ // device.readingValue = Math.max(
+ // 0,
+ // Math.round((device.readingValue + drift + spike) * 100) / 100
+ // )
+
+ const threshold = device.threshold;
+
+ const r = Math.random();
+
+ if (r < 0.70) {
+ // Normal (70%)
+ device.readingValue =
+ threshold * (0.55 + Math.random() * 0.30);
+ }
+ else if (r < 0.90) {
+ // Warning (20%)
+ device.readingValue =
+ threshold * (0.92 + Math.random() * 0.07);
+ }
+ else {
+ // Critical (10%)
+ device.readingValue =
+ threshold * (1.05 + Math.random() * 0.20);
+ }
+
+ device.readingValue =
+ Math.round(device.readingValue * 100) / 100;
+
+ device.status = deriveStatus(device.readingValue, threshold);
+ device.status = deriveStatus(device.readingValue, device.threshold)
+
+ // Signal strength: small random walk
+ device.signalStrength = Math.max(
+ 0,
+ Math.min(100, device.signalStrength + Math.round((Math.random() - 0.5) * 4))
+ )
+
+ // Realistic gradual battery drain
+ const drainRate = 0.1 + Math.random() * 0.4
+ device.batteryLevel = Math.max(0, Math.round((device.batteryLevel - drainRate) * 100) / 100)
+ device.lastUpdated = new Date().toISOString()
+
+ // Emit per-device delta
+ this.io.emit('device_update', {
+ deviceId: device.deviceId,
+ status: device.status,
+ readingValue: device.readingValue,
+ signalStrength: device.signalStrength,
+ batteryLevel: device.batteryLevel,
+ lastUpdated: device.lastUpdated,
+ })
+
+ // Anomaly detection via AlertManager (threshold-crossing state machine)
+ const candidates = this.deviceService.checkForAnomalies(device)
+ for (const candidate of candidates) {
+ const decision = this.alertManager.evaluate(device, candidate.alertType, candidate.threshold)
+ if (decision.shouldEmit) {
+ const alertRecord = this.deviceService.persistAlert({
+ deviceId: device.deviceId,
+ deviceName: device.deviceName,
+ location: device.location,
+ sensorType: device.sensorType,
+ alertType: candidate.alertType,
+ severity: candidate.alertType === 'TEMPERATURE_THRESHOLD' ? 'High' : 'High',
+ message: this.deviceService.buildAlertMessage(device, candidate.alertType),
+ })
+ this.io.emit('anomaly_detected', alertRecord)
+ }
+ // Clear transitions are intentionally silent — we don't fire a
+ // toast for "back to normal" to avoid alert noise.
+ }
+
+ if (Math.abs(oldBattery - device.batteryLevel) > 0.5) batteryShifted = true
+ if (oldStatus !== device.status) didMutateSummary = true
+ }
+
+ // Debounced summary update: at most one per tick, only when the
+ // summary has actually changed.
+ if (didMutateSummary || batteryShifted) {
+ this.io.emit('summary_update', this.deviceService.getSummary())
+ }
+ }
+}