@pixelated-tech/components 3.4.1 → 3.4.2

package/dist/components/admin/site-health/site-health-cloudwatch.integration.js

@@ -0,0 +1,142 @@
+/**
+ * CloudWatch Health Check Integration Services
+ * Server-side utilities for Route53 health check data retrieval via CloudWatch
+ */
+"use server";
+import { CloudWatchClient, GetMetricDataCommand } from '@aws-sdk/client-cloudwatch';
+import { RouteCache } from './site-health-cache';
+// Cache for health check data (15 minutes)
+const healthCheckCache = new RouteCache(15 * 60 * 1000);
+/**
+ * Get health check data for a site using CloudWatch metrics
+ */
+export async function getCloudwatchHealthCheckData(config, siteName, startDate, endDate) {
+    try {
+        // Check cache first
+        const cacheKey = `cloudwatch-${siteName}-${config.healthCheckId}-${startDate || 'default'}-${endDate || 'default'}`;
+        const cached = healthCheckCache.get(cacheKey);
+        if (cached) {
+            return { success: true, data: cached };
+        }
+        // Use CloudWatch to get historical health check data
+        const cloudWatchClient = new CloudWatchClient({
+            region: config.region || 'us-east-1'
+        });
+        // Set up date range
+        const endTime = endDate ? new Date(endDate) : new Date();
+        const startTime = startDate ? new Date(startDate) : new Date(endTime.getTime() - (30 * 24 * 60 * 60 * 1000)); // 30 days ago
+        // Add 1 day to end time to include the full end date
+        const endTimePlusOne = new Date(endTime);
+        endTimePlusOne.setDate(endTimePlusOne.getDate() + 1);
+        console.log(`CloudWatch: Fetching data for health check ${config.healthCheckId} from ${startTime.toISOString()} to ${endTimePlusOne.toISOString()}`);
+        const metricDataQuery = {
+            MetricDataQueries: [
+                {
+                    Id: 'healthCheckStatus',
+                    MetricStat: {
+                        Metric: {
+                            Namespace: 'AWS/Route53',
+                            MetricName: 'HealthCheckStatus',
+                            Dimensions: [
+                                {
+                                    Name: 'HealthCheckId',
+                                    Value: config.healthCheckId
+                                }
+                            ]
+                        },
+                        Period: 3600, // 1 hour intervals
+                        Stat: 'Average'
+                    },
+                    ReturnData: true
+                }
+            ],
+            StartTime: startTime,
+            EndTime: endTimePlusOne
+        };
+        const command = new GetMetricDataCommand(metricDataQuery);
+        const response = await cloudWatchClient.send(command);
+        console.log(`CloudWatch: Received ${response.MetricDataResults?.[0]?.Timestamps?.length || 0} data points`);
+        if (!response.MetricDataResults || response.MetricDataResults.length === 0) {
+            console.log(`CloudWatch: No metric data found for health check ${config.healthCheckId}`);
+            return {
+                success: false,
+                error: 'No health check metric data found'
+            };
+        }
+        const metricResult = response.MetricDataResults[0];
+        if (!metricResult.Timestamps || !metricResult.Values) {
+            console.log(`CloudWatch: No timestamps or values in metric data`);
+            return {
+                success: false,
+                error: 'No health check metric data available'
+            };
+        }
+        // Group data by date
+        const dateGroups = {};
+        metricResult.Timestamps.forEach((timestamp, index) => {
+            const date = timestamp.toISOString().split('T')[0]; // YYYY-MM-DD
+            const value = metricResult.Values[index];
+            if (!dateGroups[date]) {
+                dateGroups[date] = { success: 0, failure: 0 };
+            }
+            // CloudWatch returns 1 for healthy, 0 for unhealthy
+            if (value >= 0.5) { // Consider >= 0.5 as success
+                dateGroups[date].success++;
+            }
+            else {
+                dateGroups[date].failure++;
+            }
+        });
+        // Convert to data points
+        const data = Object.entries(dateGroups)
+            .map(([date, counts]) => {
+            const total = counts.success + counts.failure;
+            const successRate = total > 0 ? (counts.success / total) * 100 : 0;
+            return {
+                date,
+                successCount: counts.success,
+                failureCount: counts.failure,
+                totalChecks: total,
+                successRate: Math.round(successRate * 100) / 100 // Round to 2 decimal places
+            };
+        })
+            .sort((a, b) => a.date.localeCompare(b.date));
+        console.log(`CloudWatch: Processed ${data.length} date groups with data`);
+        // Fill in the date range with data points for each day
+        let filledData = [];
+        if (startDate && endDate) {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            const dataMap = new Map(data.map(d => [d.date, d]));
+            for (let date = new Date(start); date <= end; date.setDate(date.getDate() + 1)) {
+                const dateStr = date.toISOString().split('T')[0];
+                const existingData = dataMap.get(dateStr);
+                if (existingData) {
+                    filledData.push(existingData);
+                }
+                else {
+                    filledData.push({
+                        date: dateStr,
+                        successCount: 0,
+                        failureCount: 0,
+                        totalChecks: 0,
+                        successRate: 0
+                    });
+                }
+            }
+        }
+        else {
+            filledData = data;
+        }
+        // Cache the result
+        healthCheckCache.set(cacheKey, filledData);
+        return { success: true, data: filledData };
+    }
+    catch (error) {
+        console.error('CloudWatch error:', error);
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Failed to fetch health check data from CloudWatch'
+        };
+    }
+}

package/dist/components/admin/site-health/site-health-cloudwatch.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposedChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { SiteHealthTemplate } from './site-health-template';
+export function SiteHealthCloudwatch({ siteName, startDate, endDate }) {
+    const fetchCloudwatchData = async (site) => {
+        const params = new URLSearchParams({ siteName: site });
+        if (startDate)
+            params.append('startDate', startDate);
+        if (endDate)
+            params.append('endDate', endDate);
+        const response = await fetch(`/api/site-health/cloudwatch?${params.toString()}`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch CloudWatch data: ${response.status}`);
+        }
+        const result = await response.json();
+        if (!result.success) {
+            if (result.error?.includes('Health Check ID not configured')) {
+                throw new Error('Route53 Health Check ID not configured for this site');
+            }
+            else {
+                throw new Error(result.error || 'Failed to load CloudWatch health check data');
+            }
+        }
+        return result.data;
+    };
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "CloudWatch Uptime", columnSpan: 2, fetchData: fetchCloudwatchData, children: (data) => {
+            if (!data || data.length === 0) {
+                return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", children: "No uptime data available. Route53 health checks may not be configured to send metrics to CloudWatch." }) }));
+            }
+            // Check if all data points have zero checks (no actual data)
+            const hasActualData = data.some(point => point.totalChecks > 0);
+            if (!hasActualData) {
+                return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsxs("div", { className: "text-gray-500", children: ["Health check exists but has no metric data in CloudWatch for the selected period.", _jsx("br", {}), "Route53 health checks must be configured to send metrics to CloudWatch for historical data."] }) }));
+            }
+            return (_jsx("div", { children: _jsx("div", { style: { width: '100%', height: '400px', border: '1px solid #ddd' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, margin: { top: 40, right: 30, left: 20, bottom: 5 }, children: [_jsx("text", { x: "50%", y: 20, textAnchor: "middle", fontSize: "16", fontWeight: "bold", fill: "#374151", children: "CloudWatch Health Check Availability Over Time" }), _jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, angle: -45, textAnchor: "end", height: 60 }), _jsx(YAxis, { tick: { fontSize: 12 }, label: { value: 'Check Count', angle: -90, position: 'insideLeft' } }), _jsx(Tooltip, { formatter: (value, name) => [
+                                        value?.toLocaleString() || '0',
+                                        name || 'Unknown'
+                                    ], labelFormatter: (label) => `Date: ${label}` }), _jsx(Legend, { wrapperStyle: {
+                                        fontSize: '12px',
+                                        paddingTop: '10px'
+                                    } }), _jsx(Bar, { dataKey: "successCount", stackId: "checks", fill: "#10b981", name: "Successful Checks", radius: [2, 2, 0, 0] }), _jsx(Bar, { dataKey: "failureCount", stackId: "checks", fill: "#ef4444", name: "Failed Checks", radius: [2, 2, 0, 0] })] }, `cloudwatch-chart-${data.length}`) }) }) }));
+        } }));
+}

package/dist/components/cms/pixelated.linkedin1.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState, useEffect } from 'react';
 export function LinkedIn() {
     const [data, setData] = useState(null);

package/dist/index.js

@@ -88,6 +88,7 @@ export * from './components/admin/site-health/site-health-github';
 export * from './components/admin/site-health/site-health-google-analytics';
 export * from './components/admin/site-health/site-health-google-search-console';
 export * from './components/admin/site-health/site-health-on-site-seo';
+export * from './components/admin/site-health/site-health-cloudwatch';
 export * from './components/admin/site-health/seo-constants';
 export * from './components/admin/site-health/site-health-overview';
 export * from './components/admin/site-health/site-health-performance';

package/dist/index.server.js

@@ -14,6 +14,7 @@ export * from './components/admin/site-health/site-health-google-analytics.integ
 export * from './components/admin/site-health/site-health-google-search-console.integration';
 export * from './components/admin/site-health/site-health-indicators';
 export * from './components/admin/site-health/site-health-on-site-seo.integration';
+export * from './components/admin/site-health/site-health-cloudwatch.integration';
 export * from './components/admin/site-health/seo-constants';
 export * from './components/admin/site-health/site-health-security.integration';
 export * from './components/admin/site-health/site-health-performance';

package/dist/types/components/admin/site-health/site-health-cloudwatch.d.ts

@@ -0,0 +1,8 @@
+interface SiteHealthCloudwatchProps {
+    siteName: string;
+    startDate?: string;
+    endDate?: string;
+}
+export declare function SiteHealthCloudwatch({ siteName, startDate, endDate }: SiteHealthCloudwatchProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=site-health-cloudwatch.d.ts.map

package/dist/types/components/admin/site-health/site-health-cloudwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-health-cloudwatch.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-cloudwatch.tsx"],"names":[],"mappings":"AAcA,UAAU,yBAAyB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,yBAAyB,2CAiH/F"}

package/dist/types/components/admin/site-health/site-health-cloudwatch.integration.d.ts

@@ -0,0 +1,25 @@
+/**
+ * CloudWatch Health Check Integration Services
+ * Server-side utilities for Route53 health check data retrieval via CloudWatch
+ */
+export interface CloudwatchHealthCheckConfig {
+    healthCheckId: string;
+    region?: string;
+}
+export interface HealthCheckDataPoint {
+    date: string;
+    successCount: number;
+    failureCount: number;
+    totalChecks: number;
+    successRate: number;
+}
+export interface CloudwatchHealthCheckResponse {
+    success: boolean;
+    data?: HealthCheckDataPoint[];
+    error?: string;
+}
+/**
+ * Get health check data for a site using CloudWatch metrics
+ */
+export declare function getCloudwatchHealthCheckData(config: CloudwatchHealthCheckConfig, siteName: string, startDate?: string, endDate?: string): Promise<CloudwatchHealthCheckResponse>;
+//# sourceMappingURL=site-health-cloudwatch.integration.d.ts.map

package/dist/types/components/admin/site-health/site-health-cloudwatch.integration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-health-cloudwatch.integration.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-cloudwatch.integration.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAKD;;GAEG;AACH,wBAAsB,4BAA4B,CACjD,MAAM,EAAE,2BAA2B,EACnC,QAAQ,EAAE,MAAM,EAChB,SAAS,CAAC,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,MAAM,GACd,OAAO,CAAC,6BAA6B,CAAC,CAiJxC"}

package/dist/types/components/cms/pixelated.linkedin1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pixelated.linkedin1.d.ts","sourceRoot":"","sources":["../../../../src/components/cms/pixelated.linkedin1.js"],"names":[],"mappings":"AAEA,oEAiGC"}
+{"version":3,"file":"pixelated.linkedin1.d.ts","sourceRoot":"","sources":["../../../../src/components/cms/pixelated.linkedin1.js"],"names":[],"mappings":"AAGA,oEAiGC"}

package/dist/types/index.d.ts

@@ -87,6 +87,7 @@ export * from "./components/admin/site-health/site-health-github";
 export * from "./components/admin/site-health/site-health-google-analytics";
 export * from "./components/admin/site-health/site-health-google-search-console";
 export * from "./components/admin/site-health/site-health-on-site-seo";
+export * from "./components/admin/site-health/site-health-cloudwatch";
 export * from "./components/admin/site-health/seo-constants";
 export * from "./components/admin/site-health/site-health-overview";
 export * from "./components/admin/site-health/site-health-performance";

package/dist/types/index.server.d.ts

@@ -10,6 +10,7 @@ export * from "./components/admin/site-health/site-health-google-analytics.integ
 export * from "./components/admin/site-health/site-health-google-search-console.integration";
 export * from "./components/admin/site-health/site-health-indicators";
 export * from "./components/admin/site-health/site-health-on-site-seo.integration";
+export * from "./components/admin/site-health/site-health-cloudwatch.integration";
 export * from "./components/admin/site-health/seo-constants";
 export * from "./components/admin/site-health/site-health-security.integration";
 export * from "./components/admin/site-health/site-health-performance";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelated-tech/components",
-	"version": "3.4.1",
+	"version": "3.4.2",
 	"private": false,
 	"author": {
 		"name": "Pixelated Technologies",
@@ -79,6 +79,7 @@
 		"build-webpack-rsync": "rsync -a --include='*' --include='*/' src/css dist/css"
 	},
 	"dependencies": {
+		"@aws-sdk/client-cloudwatch": "^3.958.0",
 		"@aws-sdk/client-route-53": "^3.958.0",
 		"date-fns": "^4.1.0",
 		"globals": "^17.0.0",