feat: integrate frontend with backend API endpoints

- Add CORS support to backend server for frontend communication
- Update API base URL from HTTPS to HTTP (localhost:8080)
- Fix TypeScript interface property naming (camelCase vs snake_case)
- Update StatusCard and StatusTable components to use correct property names
- Enable real-time monitoring dashboard with live data updates
- Successfully connect React frontend to ASP.NET Core backend

🤖 Generated with [Claude Code](https://claude.ai/code)

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

Author: hemanandr

ThingConnect.Pulse.Server/Program.cs

@@ -41,6 +41,18 @@ public static void Main(string[] args)
         builder.Services.AddScoped<IRollupService, RollupService>();
         builder.Services.AddHostedService<RollupBackgroundService>();
 
+        // Add CORS
+        builder.Services.AddCors(options =>
+        {
+            options.AddPolicy("AllowFrontend", policy =>
+            {
+                policy.WithOrigins("https://localhost:55610", "http://localhost:55610", "https://localhost:5173", "http://localhost:5173")
+                      .AllowAnyHeader()
+                      .AllowAnyMethod()
+                      .AllowCredentials();
+            });
+        });
+
         builder.Services.AddControllers(options =>
         {
             options.InputFormatters.Insert(0, new PlainTextInputFormatter());
@@ -71,6 +83,8 @@ public static void Main(string[] args)
 
         app.UseHttpsRedirection();
 
+        app.UseCors("AllowFrontend");
+
         app.UseAuthorization();
 
 

ThingConnect.Pulse.Server/obj/Debug/net8.0/ThingConnect.Pulse.Server.AssemblyInfo.cs

@@ -14,7 +14,7 @@
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyCopyrightAttribute("Copyright © ThingConnect")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+3a294e086be93bc15b5733ca48ac4615085a8245")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+c33b462d292456639bcdab9dc1aeb21dc3905be7")]
 [assembly: System.Reflection.AssemblyProductAttribute("ThingConnect Pulse")]
 [assembly: System.Reflection.AssemblyTitleAttribute("ThingConnect.Pulse.Server")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]

ThingConnect.Pulse.Server/obj/Debug/net8.0/ThingConnect.Pulse.Server.AssemblyInfoInputs.cache

@@ -1 +1 @@
-8a1fb2df661e673303a0c0d596ddad65f1dfa609647534d72b076f8c4a02743e
+75baa4a277ba113daa8bc7c085331d1e439c901812cbcd2e6d1c0a410954db4b

thingconnect.pulse.client/.env

@@ -1,7 +1,7 @@
 # Development environment variables for ThingConnect Pulse Frontend
 
 # Backend API Configuration  
-VITE_API_BASE_URL=https://localhost:7057
+VITE_API_BASE_URL=http://localhost:8080
 VITE_API_TIMEOUT=30000
 
 # Development Settings

thingconnect.pulse.client/obj/Debug/package.g.props

@@ -17,6 +17,7 @@
     <PackageJsonDependenciesMonacoEditorReact Condition="$(PackageJsonDependenciesMonacoEditorReact) == ''">^4.7.0</PackageJsonDependenciesMonacoEditorReact>
     <PackageJsonDependenciesTanstackReactQuery Condition="$(PackageJsonDependenciesTanstackReactQuery) == ''">^5.84.2</PackageJsonDependenciesTanstackReactQuery>
     <PackageJsonDependenciesAxios Condition="$(PackageJsonDependenciesAxios) == ''">^1.11.0</PackageJsonDependenciesAxios>
+    <PackageJsonDependenciesDateFns Condition="$(PackageJsonDependenciesDateFns) == ''">^4.1.0</PackageJsonDependenciesDateFns>
     <PackageJsonDependenciesLodash Condition="$(PackageJsonDependenciesLodash) == ''">^4.17.21</PackageJsonDependenciesLodash>
     <PackageJsonDependenciesLucideReact Condition="$(PackageJsonDependenciesLucideReact) == ''">^0.541.0</PackageJsonDependenciesLucideReact>
     <PackageJsonDependenciesLuxon Condition="$(PackageJsonDependenciesLuxon) == ''">^3.7.1</PackageJsonDependenciesLuxon>

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

@@ -4,7 +4,7 @@
 export interface Group {
   id: string
   name: string
-  parent_id?: string | null
+  parentId?: string | null
   color?: string | null
 }
 
@@ -15,10 +15,10 @@ export interface Endpoint {
   type: 'icmp' | 'tcp' | 'http'
   host: string
   port?: number | null
-  http_path?: string | null
-  http_match?: string | null
-  interval_seconds: number
-  timeout_ms: number
+  httpPath?: string | null
+  httpMatch?: string | null
+  intervalSeconds: number
+  timeoutMs: number
   retries: number
   enabled: boolean
 }
@@ -31,8 +31,8 @@ export interface SparklinePoint {
 export interface LiveStatusItem {
   endpoint: Endpoint
   status: 'up' | 'down' | 'flapping'
-  rtt_ms?: number | null
-  last_change_ts: string
+  rttMs?: number | null
+  lastChangeTs: string
   sparkline: SparklinePoint[]
 }
 

thingconnect.pulse.client/src/components/status/StatusCard.tsx

@@ -20,14 +20,14 @@ export function StatusCard({ item }: StatusCardProps) {
     }
   }
 
-  const formatRTT = (rtt?: number | null) => {
-    if (rtt == null) return '-'
-    return `${rtt}ms`
+  const formatRTT = (rttMs?: number | null) => {
+    if (rttMs == null) return '-'
+    return `${rttMs}ms`
   }
 
-  const formatLastChange = (timestamp: string) => {
+  const formatLastChange = (lastChangeTs: string) => {
     try {
-      return formatDistanceToNow(new Date(timestamp), { addSuffix: true })
+      return formatDistanceToNow(new Date(lastChangeTs), { addSuffix: true })
     } catch {
       return 'Unknown'
     }
@@ -91,18 +91,18 @@ export function StatusCard({ item }: StatusCardProps) {
             <Text 
               fontFamily="mono" 
               fontSize="xs"
-              color={item.rtt_ms ? 'inherit' : 'gray.400'}
+              color={item.rttMs ? 'inherit' : 'gray.400'}
               data-testid="card-endpoint-rtt"
             >
-              {formatRTT(item.rtt_ms)}
+              {formatRTT(item.rttMs)}
             </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)}
+              {formatLastChange(item.lastChangeTs)}
             </Text>
           </HStack>
         </VStack>

thingconnect.pulse.client/src/components/status/StatusTable.tsx

@@ -22,14 +22,14 @@ export function StatusTable({ items, isLoading }: StatusTableProps) {
     }
   }
 
-  const formatRTT = (rtt?: number | null) => {
-    if (rtt == null) return '-'
-    return `${rtt}ms`
+  const formatRTT = (rttMs?: number | null) => {
+    if (rttMs == null) return '-'
+    return `${rttMs}ms`
   }
 
-  const formatLastChange = (timestamp: string) => {
+  const formatLastChange = (lastChangeTs: string) => {
     try {
-      return formatDistanceToNow(new Date(timestamp), { addSuffix: true })
+      return formatDistanceToNow(new Date(lastChangeTs), { addSuffix: true })
     } catch {
       return 'Unknown'
     }
@@ -144,16 +144,16 @@ export function StatusTable({ items, isLoading }: StatusTableProps) {
                 <Text 
                   fontFamily="mono" 
                   fontSize="sm"
-                  color={item.rtt_ms ? 'inherit' : 'gray.400'}
+                  color={item.rttMs ? 'inherit' : 'gray.400'}
                   data-testid="endpoint-rtt"
                 >
-                  {formatRTT(item.rtt_ms)}
+                  {formatRTT(item.rttMs)}
                 </Text>
               </Table.Cell>
 
               <Table.Cell>
                 <Text fontSize="sm" color="gray.600" _dark={{ color: 'gray.400' }}>
-                  {formatLastChange(item.last_change_ts)}
+                  {formatLastChange(item.lastChangeTs)}
                 </Text>
               </Table.Cell>