feat: implement Issue #18 - Live Board Page with real-time monitoring dashboard

- Add API types aligned with OpenAPI spec for /api/status/live
- Create StatusService for live endpoint data fetching
- Build React Query hook with 5-second auto-refresh
- Implement responsive StatusTable for desktop with sortable columns
- Create StatusCard component for mobile-friendly card layout
- Add StatusFilters for group filtering and endpoint search
- Build StatusPagination with page size controls
- Create MiniSparkline component for status history visualization
- Update Dashboard page with complete live monitoring interface
- Add TypeScript strict compliance and ESLint fixes
- Install date-fns for time formatting utilities

🎯 Ready for backend API integration with /api/status/live endpoint

🚀 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

Author: hemanandr

.claude/settings.local.json

@@ -9,7 +9,8 @@
       "Bash(dotnet clean:*)",
       "mcp__chakra-ui__get_component_example",
       "Bash(npm run build:*)",
-      "Bash(npm run lint)"
+      "Bash(npm run lint)",
+      "mcp__chakra-ui__list_components"
     ],
     "deny": [],
     "ask": []

thingconnect.pulse.client/package-lock.json

@@ -18,6 +18,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.84.2",
     "axios": "^1.11.0",
+    "date-fns": "^4.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.541.0",
     "luxon": "^3.7.1",

thingconnect.pulse.client/package.json

@@ -0,0 +1,29 @@
+import { apiClient } from '../client'
+import type { PagedLive, LiveStatusParams } from '../types'
+
+export class StatusService {
+  static async getLiveStatus(params: LiveStatusParams = {}): Promise<PagedLive> {
+    const searchParams = new URLSearchParams()
+    
+    if (params.group) {
+      searchParams.append('group', params.group)
+    }
+    
+    if (params.search) {
+      searchParams.append('search', params.search)
+    }
+    
+    if (params.page) {
+      searchParams.append('page', params.page.toString())
+    }
+    
+    if (params.pageSize) {
+      searchParams.append('pageSize', params.pageSize.toString())
+    }
+
+    const queryString = searchParams.toString()
+    const url = `/api/status/live${queryString ? `?${queryString}` : ''}`
+    
+    return apiClient.get<PagedLive>(url)
+  }
+}

thingconnect.pulse.client/src/api/services/status.service.ts

@@ -1,30 +1,50 @@
 // API Types based on OpenAPI specification
 // This file contains TypeScript interfaces for the Pulse API responses
 
-export interface LiveEndpoint {
+export interface Group {
   id: string
   name: string
+  parent_id?: string | null
+  color?: string | null
+}
+
+export interface Endpoint {
+  id: string
+  name: string
+  group: Group
+  type: 'icmp' | 'tcp' | 'http'
   host: string
-  group?: string
-  status: 'UP' | 'DOWN' | 'FLAPPING'
-  rtt?: number
-  lastCheck?: string
-  sparkline?: number[]
-  config: {
-    type: 'ICMP' | 'TCP' | 'HTTP' | 'HTTPS'
-    port?: number
-    path?: string
-    timeout?: number
-    interval?: number
-  }
+  port?: number | null
+  http_path?: string | null
+  http_match?: string | null
+  interval_seconds: number
+  timeout_ms: number
+  retries: number
+  enabled: boolean
 }
 
-export interface PagedLive {
-  data: LiveEndpoint[]
+export interface SparklinePoint {
+  ts: string
+  s: 'u' | 'd'
+}
+
+export interface LiveStatusItem {
+  endpoint: Endpoint
+  status: 'up' | 'down' | 'flapping'
+  rtt_ms?: number | null
+  last_change_ts: string
+  sparkline: SparklinePoint[]
+}
+
+export interface PageMeta {
   page: number
   pageSize: number
-  totalCount: number
-  totalPages: number
+  total: number
+}
+
+export interface PagedLive {
+  meta: PageMeta
+  items: LiveStatusItem[]
 }
 
 export interface StateChange {

thingconnect.pulse.client/src/api/types.ts

@@ -0,0 +1,57 @@
+import { Box } from '@chakra-ui/react'
+import type { SparklinePoint } from '@/api/types'
+
+interface MiniSparklineProps {
+  data: SparklinePoint[]
+  width?: number
+  height?: number
+}
+
+export function MiniSparkline({ data, width = 80, height = 20 }: MiniSparklineProps) {
+  if (!data || data.length === 0) {
+    return (
+      <Box w={width} h={height} bg="gray.100" _dark={{ bg: 'gray.700' }} borderRadius="sm" />
+    )
+  }
+
+  // Create points for the SVG path
+  const points = data.map((point, index) => {
+    const x = (index / (data.length - 1)) * width
+    const y = point.s === 'u' ? height * 0.2 : height * 0.8 // Up points near top, down points near bottom
+    return `${x},${y}`
+  }).join(' ')
+
+  return (
+    <Box w={width} h={height}>
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+        {/* Background */}
+        <rect width={width} height={height} fill="transparent" />
+        
+        {/* Status line */}
+        <polyline
+          points={points}
+          fill="none"
+          stroke={data[data.length - 1]?.s === 'u' ? '#10B981' : '#EF4444'}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        
+        {/* Status dots */}
+        {data.map((point, index) => {
+          const x = (index / (data.length - 1)) * width
+          const y = point.s === 'u' ? height * 0.2 : height * 0.8
+          return (
+            <circle
+              key={`${point.ts}-${index}`}
+              cx={x}
+              cy={y}
+              r="1.5"
+              fill={point.s === 'u' ? '#10B981' : '#EF4444'}
+            />
+          )
+        })}
+      </svg>
+    </Box>
+  )
+}

thingconnect.pulse.client/src/components/charts/MiniSparkline.tsx

@@ -0,0 +1,112 @@
+import { Text, Badge, HStack, VStack, Card } from '@chakra-ui/react'
+import { MiniSparkline } from '@/components/charts/MiniSparkline'
+import { formatDistanceToNow } from 'date-fns'
+import { useNavigate } from 'react-router-dom'
+import type { LiveStatusItem } from '@/api/types'
+
+interface StatusCardProps {
+  item: LiveStatusItem
+}
+
+export function StatusCard({ item }: StatusCardProps) {
+  const navigate = useNavigate()
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'up': return 'green'
+      case 'down': return 'red'
+      case 'flapping': return 'yellow'
+      default: return 'gray'
+    }
+  }
+
+  const formatRTT = (rtt?: number | null) => {
+    if (rtt == null) return '-'
+    return `${rtt}ms`
+  }
+
+  const formatLastChange = (timestamp: string) => {
+    try {
+      return formatDistanceToNow(new Date(timestamp), { addSuffix: true })
+    } catch {
+      return 'Unknown'
+    }
+  }
+
+  const handleClick = () => {
+    void navigate(`/endpoints/${item.endpoint.id}`)
+  }
+
+  return (
+    <Card.Root
+      cursor="pointer"
+      _hover={{ 
+        transform: 'translateY(-2px)', 
+        shadow: 'md',
+        borderColor: 'blue.200',
+        _dark: { borderColor: 'blue.600' }
+      }}
+      onClick={handleClick}
+      data-testid={`status-card-${item.endpoint.id}`}
+      transition="all 0.2s"
+      size="sm"
+    >
+      <Card.Body>
+        <VStack align="stretch" gap={3}>
+          {/* Header with status and name */}
+          <HStack justify="space-between" align="start">
+            <VStack align="start" gap={1} flex="1">
+              <Text fontWeight="semibold" fontSize="sm" data-testid="card-endpoint-name">
+                {item.endpoint.name}
+              </Text>
+              <Text fontSize="xs" color="gray.600" _dark={{ color: 'gray.400' }}>
+                {item.endpoint.group.name}
+              </Text>
+            </VStack>
+            
+            <Badge
+              colorPalette={getStatusColor(item.status)}
+              variant="subtle"
+              textTransform="uppercase"
+              fontSize="xs"
+              data-testid={`card-status-badge-${item.status}`}
+            >
+              {item.status}
+            </Badge>
+          </HStack>
+
+          {/* Host and RTT */}
+          <HStack justify="space-between" align="center">
+            <HStack gap={1} flex="1">
+              <Text fontFamily="mono" fontSize="xs" data-testid="card-endpoint-host">
+                {item.endpoint.host}
+              </Text>
+              {item.endpoint.port && (
+                <Text fontSize="xs" color="gray.500">
+                  :{item.endpoint.port}
+                </Text>
+              )}
+            </HStack>
+            
+            <Text 
+              fontFamily="mono" 
+              fontSize="xs"
+              color={item.rtt_ms ? 'inherit' : 'gray.400'}
+              data-testid="card-endpoint-rtt"
+            >
+              {formatRTT(item.rtt_ms)}
+            </Text>
+          </HStack>
+
+          {/* Sparkline and last change */}
+          <HStack justify="space-between" align="center">
+            <MiniSparkline data={item.sparkline} width={60} height={16} />
+            <Text fontSize="xs" color="gray.500">
+              {formatLastChange(item.last_change_ts)}
+            </Text>
+          </HStack>
+        </VStack>
+      </Card.Body>
+    </Card.Root>
+  )
+}