@qwickapps/server 1.5.2 → 1.6.1

package/src/plugins/health/HealthManagementPage.tsx

@@ -0,0 +1,320 @@
+/**
+ * Health Check Management Page Component
+ * Full dashboard for monitoring all health checks with detailed status and history
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { DataTable, StatCard, type Column } from '@qwickapps/react-framework';
+
+export interface HealthManagementPageProps {
+  apiPrefix?: string;
+}
+
+interface HealthCheckResult {
+  name: string;
+  type: string;
+  status: 'healthy' | 'unhealthy' | 'degraded';
+  latency?: number;
+  message?: string;
+  lastChecked: string;
+  details?: Record<string, unknown>;
+}
+
+interface HealthSummary {
+  overall: 'healthy' | 'unhealthy' | 'degraded';
+  totalChecks: number;
+  healthyChecks: number;
+  unhealthyChecks: number;
+  degradedChecks: number;
+  checks: HealthCheckResult[];
+}
+
+export const HealthManagementPage: React.FC<HealthManagementPageProps> = ({
+  apiPrefix = '/api/plugins/health',
+}) => {
+  const [summary, setSummary] = useState<HealthSummary | null>(null);
+  const [selectedCheck, setSelectedCheck] = useState<HealthCheckResult | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchHealth = async () => {
+    try {
+      const response = await fetch(`${apiPrefix}/summary`);
+      if (response.ok) {
+        const data = await response.json();
+        setSummary(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch health:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchHealth();
+    const interval = setInterval(fetchHealth, 10000);
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  const checkColumns: Column<HealthCheckResult>[] = [
+    {
+      key: 'name',
+      label: 'Name',
+      sortable: true,
+      render: (_value, row) => (
+        <button
+          onClick={() => setSelectedCheck(row)}
+          className="text-blue-600 dark:text-blue-400 hover:underline text-left font-medium"
+        >
+          {row.name}
+        </button>
+      ),
+    },
+    {
+      key: 'type',
+      label: 'Type',
+      sortable: true,
+      render: (_value, row) => (
+        <span className="inline-block px-2 py-1 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
+          {row.type}
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      sortable: true,
+      render: (_value, row) => (
+        <span
+          className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+            row.status === 'healthy'
+              ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+              : row.status === 'degraded'
+              ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'
+              : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
+          }`}
+        >
+          {row.status}
+        </span>
+      ),
+    },
+    {
+      key: 'latency',
+      label: 'Latency',
+      sortable: true,
+      render: (_value, row) => {
+        if (!row.latency) return <span className="text-gray-400">-</span>;
+        return (
+          <span
+            className={
+              row.latency < 100
+                ? 'text-green-600 dark:text-green-400'
+                : row.latency < 500
+                ? 'text-yellow-600 dark:text-yellow-400'
+                : 'text-red-600 dark:text-red-400'
+            }
+          >
+            {row.latency}ms
+          </span>
+        );
+      },
+    },
+    {
+      key: 'lastChecked',
+      label: 'Last Checked',
+      sortable: true,
+      render: (_value, row) => {
+        const date = new Date(row.lastChecked);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+
+        if (seconds < 60) return `${seconds}s ago`;
+        if (minutes < 60) return `${minutes}m ago`;
+        return date.toLocaleString();
+      },
+    },
+    {
+      key: 'message',
+      label: 'Message',
+      render: (_value, row) => (
+        <span className="text-sm text-gray-600 dark:text-gray-400 truncate max-w-xs block">
+          {row.message || '-'}
+        </span>
+      ),
+    },
+  ];
+
+  if (!summary) {
+    return (
+      <PluginManagementPage
+        title="Service Health"
+        description="Monitor health status of all services"
+        breadcrumbs={[
+          { label: 'Control Panel', href: '/cpanel' },
+          { label: 'Plugins', href: '/cpanel/plugins' },
+          { label: 'Health' },
+        ]}
+        loading={loading}
+      >
+        <div className="text-center text-gray-500 dark:text-gray-400 py-12">
+          No health check data available
+        </div>
+      </PluginManagementPage>
+    );
+  }
+
+  return (
+    <PluginManagementPage
+      title="Service Health"
+      description="Monitor health status of all services and dependencies"
+      breadcrumbs={[
+        { label: 'Control Panel', href: '/cpanel' },
+        { label: 'Plugins', href: '/cpanel/plugins' },
+        { label: 'Health' },
+      ]}
+      loading={loading}
+      actions={[
+        {
+          label: 'Refresh',
+          onClick: fetchHealth,
+          variant: 'secondary',
+        },
+      ]}
+    >
+      {/* Summary Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+        <StatCard
+          label="Overall Status"
+          value={summary.overall.toUpperCase()}
+          status={
+            summary.overall === 'healthy' ? 'healthy' :
+            summary.overall === 'degraded' ? 'warning' : 'error'
+          }
+        />
+        <StatCard
+          label="Total Checks"
+          value={summary.totalChecks}
+          status="info"
+        />
+        <StatCard
+          label="Healthy"
+          value={summary.healthyChecks}
+          status="healthy"
+        />
+        <StatCard
+          label="Degraded"
+          value={summary.degradedChecks}
+          status={summary.degradedChecks > 0 ? 'warning' : 'info'}
+        />
+        <StatCard
+          label="Unhealthy"
+          value={summary.unhealthyChecks}
+          status={summary.unhealthyChecks > 0 ? 'error' : 'info'}
+        />
+      </div>
+
+      {/* Health Checks Table */}
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+        <DataTable
+          columns={checkColumns}
+          data={summary.checks}
+          emptyMessage="No health checks configured"
+          getRowKey={(row) => row.name}
+        />
+      </div>
+
+      {/* Health Check Details Modal */}
+      {selectedCheck && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-screen overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                Health Check Details
+              </h3>
+              <button
+                onClick={() => setSelectedCheck(null)}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Close
+              </button>
+            </div>
+
+            <dl className="space-y-4">
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Name</dt>
+                <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{selectedCheck.name}</dd>
+              </div>
+
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Type</dt>
+                <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">{selectedCheck.type}</dd>
+              </div>
+
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Status</dt>
+                <dd className="mt-1">
+                  <span
+                    className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                      selectedCheck.status === 'healthy'
+                        ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+                        : selectedCheck.status === 'degraded'
+                        ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'
+                        : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
+                    }`}
+                  >
+                    {selectedCheck.status}
+                  </span>
+                </dd>
+              </div>
+
+              {selectedCheck.latency && (
+                <div>
+                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Latency</dt>
+                  <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                    {selectedCheck.latency}ms
+                  </dd>
+                </div>
+              )}
+
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Last Checked</dt>
+                <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                  {new Date(selectedCheck.lastChecked).toLocaleString()}
+                </dd>
+              </div>
+
+              {selectedCheck.message && (
+                <div>
+                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Message</dt>
+                  <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                    {selectedCheck.message}
+                  </dd>
+                </div>
+              )}
+
+              {selectedCheck.details && Object.keys(selectedCheck.details).length > 0 && (
+                <div>
+                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Details</dt>
+                  <dd className="mt-1">
+                    <pre className="p-4 bg-gray-100 dark:bg-gray-900 rounded overflow-x-auto">
+                      <code className="text-sm text-gray-900 dark:text-gray-100">
+                        {JSON.stringify(selectedCheck.details, null, 2)}
+                      </code>
+                    </pre>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+      )}
+    </PluginManagementPage>
+  );
+};
+
+export default HealthManagementPage;

package/src/plugins/health/HealthStatusWidget.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * HealthStatusWidget Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { HealthStatusWidget } from './HealthStatusWidget';
+
+describe('HealthStatusWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state initially', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    render(<HealthStatusWidget apiPrefix="/api/health" />);
+
+    expect(screen.getByText(/Service Health Loading/)).toBeInTheDocument();
+  });
+
+  it('fetches and displays healthy summary', async () => {
+    const mockSummary = {
+      overall: 'healthy' as const,
+      totalChecks: 5,
+      healthyChecks: 5,
+      unhealthyChecks: 0,
+      degradedChecks: 0,
+      checks: [],
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockSummary,
+    });
+
+    render(<HealthStatusWidget apiPrefix="/api/health" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Service Health')).toBeInTheDocument();
+      expect(screen.getByText(/Total Checks: 5/)).toBeInTheDocument();
+      expect(screen.getByText(/Healthy: 5/)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith('/api/health/summary');
+  });
+
+  it('displays degraded state', async () => {
+    const mockSummary = {
+      overall: 'degraded' as const,
+      totalChecks: 5,
+      healthyChecks: 3,
+      unhealthyChecks: 0,
+      degradedChecks: 2,
+      checks: [],
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockSummary,
+    });
+
+    render(<HealthStatusWidget apiPrefix="/api/health" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Degraded: 2/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays unhealthy state', async () => {
+    const mockSummary = {
+      overall: 'unhealthy' as const,
+      totalChecks: 5,
+      healthyChecks: 2,
+      unhealthyChecks: 3,
+      degradedChecks: 0,
+      checks: [],
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockSummary,
+    });
+
+    render(<HealthStatusWidget apiPrefix="/api/health" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Unhealthy: 3/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays error state when fetch fails', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+      new Error('Failed to fetch health')
+    );
+
+    render(<HealthStatusWidget apiPrefix="/api/health" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Service Health')).toBeInTheDocument();
+    }, { timeout: 2000 });
+  });
+});

package/src/plugins/health/HealthStatusWidget.tsx

@@ -0,0 +1,134 @@
+/**
+ * Health Check Status Widget Component
+ * Displays aggregated health status of all registered health checks
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  PluginStatusWidget,
+  type PluginStatusWidgetProps,
+} from '@qwickapps/server/ui';
+
+export interface HealthStatusWidgetProps {
+  apiPrefix?: string;
+}
+
+interface HealthCheckResult {
+  name: string;
+  status: 'healthy' | 'unhealthy' | 'degraded';
+  latency?: number;
+  message?: string;
+  lastChecked: string;
+}
+
+interface HealthSummary {
+  overall: 'healthy' | 'unhealthy' | 'degraded';
+  totalChecks: number;
+  healthyChecks: number;
+  unhealthyChecks: number;
+  degradedChecks: number;
+  checks: HealthCheckResult[];
+}
+
+export const HealthStatusWidget: React.FC<HealthStatusWidgetProps> = ({
+  apiPrefix = '/api/plugins/health',
+}) => {
+  const [summary, setSummary] = useState<HealthSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchHealth = async () => {
+      try {
+        const response = await fetch(`${apiPrefix}/summary`);
+        if (!response.ok) throw new Error('Failed to fetch health');
+        const data = await response.json();
+        setSummary(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchHealth();
+    const interval = setInterval(fetchHealth, 10000); // Refresh every 10s
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  if (loading) {
+    return (
+      <PluginStatusWidget
+        title="Service Health"
+        status="healthy"
+        loading={true}
+      />
+    );
+  }
+
+  if (error || !summary) {
+    return (
+      <PluginStatusWidget
+        title="Service Health"
+        status="error"
+        message={error || 'Failed to load health status'}
+      />
+    );
+  }
+
+  const widgetStats: PluginStatusWidgetProps['stats'] = [
+    {
+      label: 'Total Checks',
+      value: summary.totalChecks,
+      status: 'info',
+    },
+    {
+      label: 'Healthy',
+      value: summary.healthyChecks,
+      status: 'healthy',
+    },
+    {
+      label: 'Degraded',
+      value: summary.degradedChecks,
+      status: summary.degradedChecks > 0 ? 'warning' : 'info',
+    },
+    {
+      label: 'Unhealthy',
+      value: summary.unhealthyChecks,
+      status: summary.unhealthyChecks > 0 ? 'error' : 'info',
+    },
+  ];
+
+  const overallStatus: PluginStatusWidgetProps['status'] =
+    summary.overall === 'healthy' ? 'healthy' :
+    summary.overall === 'degraded' ? 'warning' : 'error';
+
+  return (
+    <PluginStatusWidget
+      title="Service Health"
+      status={overallStatus}
+      stats={widgetStats}
+      message={
+        summary.unhealthyChecks > 0
+          ? `${summary.unhealthyChecks} service(s) unhealthy`
+          : summary.degradedChecks > 0
+          ? `${summary.degradedChecks} service(s) degraded`
+          : 'All services operational'
+      }
+      actions={[
+        {
+          label: 'View Details',
+          onClick: () => {
+            window.location.href = '/cpanel/plugins/health';
+          },
+          variant: 'secondary',
+        },
+      ]}
+    />
+  );
+};
+
+export default HealthStatusWidget;

package/src/plugins/health/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Health Check Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { HealthStatusWidget } from './HealthStatusWidget.js';
+export type { HealthStatusWidgetProps } from './HealthStatusWidget.js';
+export { HealthManagementPage } from './HealthManagementPage.js';
+export type { HealthManagementPageProps } from './HealthManagementPage.js';

package/src/plugins/index.ts

@@ -7,9 +7,31 @@
 export { createHealthPlugin } from './health-plugin.js';
 export type { HealthPluginConfig } from './health-plugin.js';
 
+export { createCMSPlugin } from './cms/index.js';
+export type { CMSPluginConfig } from './cms/index.js';
+
 export { createLogsPlugin } from './logs-plugin.js';
 export type { LogsPluginConfig } from './logs-plugin.js';
 
+export { createMaintenancePlugin } from './maintenance-plugin.js';
+export type { MaintenancePluginConfig } from './maintenance-plugin.js';
+export {
+  MaintenanceManagementPage,
+  MaintenanceStatusWidget,
+  SeedManagementPage,
+  SeedList,
+  SeedExecutorUI,
+  SeedHistory,
+} from './maintenance/index.js';
+export type {
+  MaintenanceManagementPageProps,
+  MaintenanceStatusWidgetProps,
+  SeedManagementPageProps,
+  SeedListProps,
+  SeedExecutorProps,
+  SeedHistoryProps,
+} from './maintenance/index.js';
+
 export { createConfigPlugin } from './config-plugin.js';
 export type { ConfigPluginConfig } from './config-plugin.js';
 
@@ -31,6 +53,7 @@ export {
   createAuthPluginFromEnv,
   getAuthStatus,
   setAuthConfigStore,
+  registerAuthConfigRoutes,
   postgresAuthConfigStore,
   isAuthenticated,
   getAuthenticatedUser,
@@ -109,6 +132,32 @@ export type {
   PostgresBanStoreConfig,
 } from './bans/index.js';
 
+// API Keys plugin (M2M authentication, depends on Users)
+export {
+  createApiKeysPlugin,
+  getApiKeysStore,
+  verifyApiKey,
+  createApiKey,
+  listApiKeys,
+  getApiKey,
+  updateApiKey,
+  deleteApiKey,
+  postgresApiKeyStore,
+  bearerTokenAuth,
+} from './api-keys/index.js';
+export type {
+  ApiKeysPluginConfig,
+  ApiKeyStore,
+  ApiKey,
+  ApiKeyWithPlaintext,
+  ApiKeyScope,
+  ApiKeyType,
+  CreateApiKeyParams,
+  UpdateApiKeyParams,
+  PostgresApiKeyStoreConfig,
+  ApiKeysApiConfig,
+} from './api-keys/index.js';
+
 // Entitlements plugin
 export {
   createEntitlementsPlugin,