@pixelated-tech/components 3.3.5 → 3.4.0

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

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+export function SiteHealthSecurity({ siteName }) {
+    const fetchSecurityData = useCallback(async (site) => {
+        // Fetch PSI data for best practices security audits
+        const psiResponse = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
+        const psiResult = await psiResponse.json();
+        return {
+            psiData: psiResult.success ? psiResult.data : undefined
+        };
+    }, []);
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Security", fetchData: fetchSecurityData, children: (data) => {
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const getAuditScoreIcon = (score) => {
+                return getScoreIndicator(score).icon;
+            };
+            // Helper function to display audit item details
+            const formatAuditItem = (item, auditTitle) => {
+                // Handle URLs
+                if (item.url && typeof item.url === 'string') {
+                    return item.url;
+                }
+                // Handle sources (like JavaScript files)
+                if (item.source && typeof item.source === 'string') {
+                    return item.source;
+                }
+                // Handle text descriptions
+                if (item.text && typeof item.text === 'string') {
+                    return item.text;
+                }
+                // Handle entities (like "Google Tag Manager")
+                if (item.entity && typeof item.entity === 'string') {
+                    return item.entity;
+                }
+                // Handle nodes with selectors
+                if (item.node && typeof item.node === 'object' && 'selector' in item.node) {
+                    return `Element: ${item.node.selector}`;
+                }
+                // Handle nodes with snippets
+                if (item.node && typeof item.node === 'object' && 'snippet' in item.node) {
+                    const snippet = item.node.snippet;
+                    return `Element: ${snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet}`;
+                }
+                // Handle origins (like domains)
+                if (item.origin && typeof item.origin === 'string') {
+                    return item.origin;
+                }
+                // Handle labels
+                if (item.label && typeof item.label === 'string') {
+                    return item.label;
+                }
+                // Handle numeric values with units
+                if (item.value && typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                    const value = item.value;
+                    return `${value.value}${item.unit || ''}`;
+                }
+                // Handle statistics
+                if (item.statistic && typeof item.statistic === 'string' && item.value) {
+                    if (typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                        const value = item.value;
+                        return `${item.statistic}: ${value.value}`;
+                    }
+                    return item.statistic;
+                }
+                // Handle timing data with more context
+                if (item.duration && typeof item.duration === 'number') {
+                    const duration = item.duration;
+                    let context = '';
+                    if (item.url && typeof item.url === 'string') {
+                        context = ` for ${item.url}`;
+                    }
+                    else if (item.source && typeof item.source === 'string') {
+                        context = ` for ${item.source}`;
+                    }
+                    else if (item.name && typeof item.name === 'string') {
+                        context = ` for ${item.name}`;
+                    }
+                    return `${duration.toFixed(2)}ms${context}`;
+                }
+                // Handle response times
+                if (item.responseTime && typeof item.responseTime === 'number') {
+                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+                    return `${item.responseTime.toFixed(2)}ms response time${url}`;
+                }
+                // Handle start/end times
+                if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
+                    const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
+                    const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
+                    const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
+                    return `${start}ms - ${end}ms${url}`;
+                }
+                // Handle transfer size with timing
+                if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
+                    const size = (item.transferSize / 1024).toFixed(1);
+                    const time = item.duration.toFixed(2);
+                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+                    return `${size} KB in ${time}ms${url}`;
+                }
+                // Handle main thread time
+                if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
+                    return `${item.mainThreadTime.toFixed(1)}ms`;
+                }
+                // For other objects, try to find a meaningful display
+                if (item.group && typeof item.group === 'string') {
+                    return item.group;
+                }
+                if (item.type && typeof item.type === 'string') {
+                    return item.type;
+                }
+                // If we can't find anything meaningful, provide a generic description
+                // This handles raw timing data that might be from various performance metrics
+                if (typeof item === 'number') {
+                    let context = '';
+                    if (auditTitle) {
+                        if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                            context = ' server response';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                            context = ' network request';
+                        }
+                        else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                            context = ' render blocking';
+                        }
+                        else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                            context = ' JavaScript';
+                        }
+                        else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                            context = ' media resource';
+                        }
+                    }
+                    return `${item.toFixed(2)}ms${context}`;
+                }
+                if (item.value && typeof item.value === 'number') {
+                    const unit = item.unit || 'ms';
+                    let context = '';
+                    if (auditTitle && unit === 'ms') {
+                        if (auditTitle.toLowerCase().includes('server')) {
+                            context = ' server time';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network')) {
+                            context = ' network time';
+                        }
+                    }
+                    return `${item.value.toFixed(2)}${unit}${context}`;
+                }
+                return 'Details available';
+            };
+            const psiData = data?.psiData?.[0];
+            if (!psiData) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No security data available for this site." }));
+            }
+            if (psiData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", psiData.error] }));
+            }
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", psiData.url] }), psiData.scores['best-practices'] !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Best Practices Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(psiData.scores['best-practices']) }, children: [Math.round((psiData.scores['best-practices'] || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: `${(psiData.scores['best-practices'] || 0) * 100}%`,
+                                            backgroundColor: getScoreColor(psiData.scores['best-practices'])
+                                        } }) })] }) })), psiData.categories['best-practices'] && psiData.categories['best-practices'].audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Security Best Practices" }), _jsx("div", { className: "space-y-2", children: psiData.categories['best-practices'].audits
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .sort((a, b) => (b.score || 0) - (a.score || 0))
+                                    .slice(0, 20)
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 0.9 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(psiData.timestamp).toLocaleString()] })] }));
+        } }));
+}

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

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+export function SiteHealthSEO({ siteName }) {
+    const fetchSEOData = useCallback(async (site) => {
+        const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch SEO data');
+        }
+        return result;
+    }, []);
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - SEO", fetchData: fetchSEOData, children: (data) => {
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const getAuditScoreIcon = (score) => {
+                return getScoreIndicator(score).icon;
+            };
+            // Helper function to display audit item details
+            const formatAuditItem = (item, auditTitle) => {
+                // Handle URLs
+                if (item.url && typeof item.url === 'string') {
+                    return item.url;
+                }
+                // Handle sources (like JavaScript files)
+                if (item.source && typeof item.source === 'string') {
+                    return item.source;
+                }
+                // Handle text descriptions
+                if (item.text && typeof item.text === 'string') {
+                    return item.text;
+                }
+                // Handle entities (like "Google Tag Manager")
+                if (item.entity && typeof item.entity === 'string') {
+                    return item.entity;
+                }
+                // Handle nodes with selectors
+                if (item.node && typeof item.node === 'object' && 'selector' in item.node) {
+                    return `Element: ${item.node.selector}`;
+                }
+                // Handle nodes with snippets
+                if (item.node && typeof item.node === 'object' && 'snippet' in item.node) {
+                    const snippet = item.node.snippet;
+                    return `Element: ${snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet}`;
+                }
+                // Handle origins (like domains)
+                if (item.origin && typeof item.origin === 'string') {
+                    return item.origin;
+                }
+                // Handle labels
+                if (item.label && typeof item.label === 'string') {
+                    return item.label;
+                }
+                // Handle numeric values with units
+                if (item.value && typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                    const value = item.value;
+                    return `${value.value}${item.unit || ''}`;
+                }
+                // Handle statistics
+                if (item.statistic && typeof item.statistic === 'string' && item.value) {
+                    if (typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                        const value = item.value;
+                        return `${item.statistic}: ${value.value}`;
+                    }
+                    return item.statistic;
+                }
+                // Handle timing data with audit context
+                if (typeof item === 'number') {
+                    let context = '';
+                    if (auditTitle) {
+                        if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                            context = ' server response';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                            context = ' network request';
+                        }
+                        else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                            context = ' render blocking';
+                        }
+                        else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                            context = ' JavaScript';
+                        }
+                        else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                            context = ' media resource';
+                        }
+                    }
+                    return `${item.toFixed(2)}ms${context}`;
+                }
+                if (item.value && typeof item.value === 'number') {
+                    const unit = item.unit || 'ms';
+                    let context = '';
+                    if (auditTitle && unit === 'ms') {
+                        if (auditTitle.toLowerCase().includes('server')) {
+                            context = ' server time';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network')) {
+                            context = ' network time';
+                        }
+                    }
+                    return `${item.value.toFixed(2)}${unit}${context}`;
+                }
+                // If we can't find anything meaningful, show a generic message
+                return 'Details available';
+            };
+            if (!data?.data || data.data.length === 0) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No SEO data available for this site." }));
+            }
+            const siteData = data.data[0];
+            if (siteData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
+            }
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), siteData.scores.seo !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "SEO Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(siteData.scores.seo) }, children: [Math.round((siteData.scores.seo || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: `${(siteData.scores.seo || 0) * 100}%`,
+                                            backgroundColor: getScoreColor(siteData.scores.seo)
+                                        } }) })] }) })), siteData.categories.seo && siteData.categories.seo.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "SEO Issues & Recommendations" }), _jsx("div", { className: "space-y-2", children: siteData.categories.seo.audits
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .sort((a, b) => (b.score || 0) - (a.score || 0))
+                                    .slice(0, 20)
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 1.0 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
+        } }));
+}

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

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { PageGridItem } from '../../general/semantic';
+export function SiteHealthTemplate({ siteName, title, children, fetchData, enableCacheControl = false, columnSpan = 1 }) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let isMounted = true;
+        const loadData = async () => {
+            if (!siteName) {
+                if (isMounted) {
+                    setData(null);
+                    setLoading(false);
+                    setError(null);
+                }
+                return;
+            }
+            if (isMounted) {
+                setLoading(true);
+                setError(null);
+            }
+            try {
+                // Check for cache control from URL query parameters
+                const urlParams = new URLSearchParams(window.location.search);
+                const cacheParam = urlParams.get('cache');
+                const useCache = enableCacheControl ? (cacheParam !== 'false') : true;
+                const result = await fetchData(siteName, useCache);
+                if (isMounted) {
+                    setData(result);
+                    setError(null);
+                }
+            }
+            catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err.message : 'Failed to load data');
+                    setData(null);
+                }
+            }
+            finally {
+                if (isMounted) {
+                    setLoading(false);
+                }
+            }
+        };
+        loadData();
+        return () => {
+            isMounted = false;
+        };
+    }, [siteName, fetchData]);
+    // If no site selected, show nothing
+    if (!siteName) {
+        return null;
+    }
+    // If title is provided, render the complete card structure
+    if (title) {
+        return (_jsxs(PageGridItem, { className: "health-card", columnSpan: columnSpan, children: [_jsx("h2", { className: "health-card-title", children: title }), _jsx("div", { className: "health-card-content", children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (children(data)) })] }));
+    }
+    // Legacy mode: render content directly without wrapper
+    return (_jsx(_Fragment, { children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (children(data)) }));
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,29 @@
+import { Route53Client, GetHealthCheckStatusCommand } from '@aws-sdk/client-route-53';
+export async function checkUptimeHealth(healthCheckId) {
+    try {
+        // Simple Route 53 call (global service, no region needed)
+        const client = new Route53Client({});
+        const response = await client.send(new GetHealthCheckStatusCommand({
+            HealthCheckId: healthCheckId,
+        }));
+        const rawStatus = response.HealthCheckObservations?.[0]?.StatusReport?.Status;
+        const status = rawStatus?.toLowerCase().includes('success') ? 'Healthy' :
+            rawStatus?.toLowerCase().includes('failure') ? 'Unhealthy' : 'Unknown';
+        return {
+            status: 'success',
+            data: {
+                status
+            }
+        };
+    }
+    catch (error) {
+        console.error('Uptime check failed:', error);
+        return {
+            status: 'success', // Return success with unknown status to match API behavior
+            data: {
+                status: 'Unknown',
+                message: 'Check failed'
+            }
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SiteHealthTemplate } from './site-health-template';
+export function SiteHealthUptime({ siteName }) {
+    const fetchUptimeData = async (site) => {
+        const response = await fetch(`/api/site-health/uptime?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error('Failed to load health status');
+        }
+        return result;
+    };
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Health Status", fetchData: fetchUptimeData, children: (data) => {
+            if (!data) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No uptime data available for this site." }));
+            }
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", data.url] }), _jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Site Status" }), _jsx("div", { className: "health-score-value", style: {
+                                        color: data.status === 'Healthy' ? '#10b981' :
+                                            data.status === 'Unhealthy' ? '#ef4444' : '#f59e0b'
+                                    }, children: data.status }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: data.status === 'Healthy' ? '100%' :
+                                                data.status === 'Unhealthy' ? '10%' : '50%',
+                                            backgroundColor: data.status === 'Healthy' ? '#10b981' :
+                                                data.status === 'Unhealthy' ? '#ef4444' : '#f59e0b'
+                                        } }) })] }) }), data.message && (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: {
+                                    color: data.status === 'Healthy' ? '#10b981' :
+                                        data.status === 'Unhealthy' ? '#ef4444' : '#f59e0b'
+                                }, children: data.status === 'Healthy' ? '✓' : data.status === 'Unhealthy' ? '✗' : '⚠' }), _jsx("div", { className: "health-audit-content", children: _jsx("span", { className: "health-audit-title", children: data.message }) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));
+        } }));
+}