@qwickapps/server 1.6.0 → 1.6.1

package/src/plugins/logs/LogsStatusWidget.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * LogsStatusWidget 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 { LogsStatusWidget } from './LogsStatusWidget';
+
+describe('LogsStatusWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state initially', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    render(<LogsStatusWidget apiPrefix="/api/logs" />);
+
+    expect(screen.getByText(/Application Logs Loading/)).toBeInTheDocument();
+  });
+
+  it('fetches and displays stats successfully', async () => {
+    const mockStats = {
+      totalLogs: 5000,
+      byLevel: {
+        debug: 1000,
+        info: 3500,
+        warn: 400,
+        error: 100,
+      },
+      fileSize: '25MB',
+      health: 'warning' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<LogsStatusWidget apiPrefix="/api/logs" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Application Logs')).toBeInTheDocument();
+      expect(screen.getByText(/Total Logs: 5000/)).toBeInTheDocument();
+      expect(screen.getByText(/Errors: 100/)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith('/api/logs/stats');
+  });
+
+  it('displays no errors state', async () => {
+    const mockStats = {
+      totalLogs: 1000,
+      byLevel: {
+        debug: 100,
+        info: 800,
+        warn: 100,
+        error: 0,
+      },
+      fileSize: '5MB',
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<LogsStatusWidget apiPrefix="/api/logs" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Errors: 0/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays all log metrics', async () => {
+    const mockStats = {
+      totalLogs: 10000,
+      byLevel: {
+        debug: 2000,
+        info: 7000,
+        warn: 500,
+        error: 500,
+      },
+      fileSize: '50MB',
+      health: 'error' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<LogsStatusWidget apiPrefix="/api/logs" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Total Logs: 10000/)).toBeInTheDocument();
+      expect(screen.getByText(/Errors: 500/)).toBeInTheDocument();
+      expect(screen.getByText(/Warnings: 500/)).toBeInTheDocument();
+      expect(screen.getByText(/Log File Size: 50MB/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays error state when fetch fails', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+      new Error('Failed to fetch stats')
+    );
+
+    render(<LogsStatusWidget apiPrefix="/api/logs" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Application Logs')).toBeInTheDocument();
+    }, { timeout: 2000 });
+  });
+});

package/src/plugins/logs/LogsStatusWidget.tsx

@@ -0,0 +1,123 @@
+/**
+ * Logs Status Widget Component
+ * Displays log statistics and recent error count
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  PluginStatusWidget,
+  type PluginStatusWidgetProps,
+} from '@qwickapps/server/ui';
+
+export interface LogsStatusWidgetProps {
+  apiPrefix?: string;
+}
+
+interface LogStats {
+  totalLogs: number;
+  byLevel: {
+    debug: number;
+    info: number;
+    warn: number;
+    error: number;
+  };
+  fileSize: string;
+  health: 'healthy' | 'warning' | 'error';
+}
+
+export const LogsStatusWidget: React.FC<LogsStatusWidgetProps> = ({
+  apiPrefix = '/api/plugins/logs',
+}) => {
+  const [stats, setStats] = useState<LogStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await fetch(`${apiPrefix}/stats`);
+        if (!response.ok) throw new Error('Failed to fetch stats');
+        const data = await response.json();
+        setStats(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000); // Refresh every 30s
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  if (loading) {
+    return (
+      <PluginStatusWidget
+        title="Application Logs"
+        status="healthy"
+        loading={true}
+      />
+    );
+  }
+
+  if (error || !stats) {
+    return (
+      <PluginStatusWidget
+        title="Application Logs"
+        status="error"
+        message={error || 'Failed to load log stats'}
+      />
+    );
+  }
+
+  const widgetStats: PluginStatusWidgetProps['stats'] = [
+    {
+      label: 'Total Logs',
+      value: stats.totalLogs,
+      status: 'info',
+    },
+    {
+      label: 'Errors',
+      value: stats.byLevel.error,
+      status: stats.byLevel.error > 10 ? 'error' : stats.byLevel.error > 0 ? 'warning' : 'healthy',
+    },
+    {
+      label: 'Warnings',
+      value: stats.byLevel.warn,
+      status: stats.byLevel.warn > 20 ? 'warning' : 'info',
+    },
+    {
+      label: 'Log File Size',
+      value: stats.fileSize,
+      status: 'info',
+    },
+  ];
+
+  return (
+    <PluginStatusWidget
+      title="Application Logs"
+      status={stats.health}
+      stats={widgetStats}
+      message={
+        stats.byLevel.error > 0
+          ? `${stats.byLevel.error} error(s) logged`
+          : 'No errors'
+      }
+      actions={[
+        {
+          label: 'View Logs',
+          onClick: () => {
+            window.location.href = '/cpanel/plugins/logs';
+          },
+          variant: 'secondary',
+        },
+      ]}
+    />
+  );
+};
+
+export default LogsStatusWidget;

package/src/plugins/logs/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Logs Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { LogsStatusWidget } from './LogsStatusWidget.js';
+export type { LogsStatusWidgetProps } from './LogsStatusWidget.js';
+export { LogsManagementPage } from './LogsManagementPage.js';
+export type { LogsManagementPageProps } from './LogsManagementPage.js';

package/src/plugins/logs-plugin.ts

@@ -81,10 +81,10 @@ export function createLogsPlugin(config: LogsPluginConfig = {}): Plugin {
     async onStart(_pluginConfig: PluginConfig, registry: PluginRegistry): Promise<void> {
       const logger = registry.getLogger('logs');
 
-      // Register /logs/sources route
+      // Register /sources route (slug prefix added automatically by framework)
       registry.addRoute({
         method: 'get',
-        path: '/logs/sources',
+        path: '/sources',
         pluginId: 'logs',
         handler: (_req: Request, res: Response) => {
           const sources = getSources();
@@ -97,10 +97,10 @@ export function createLogsPlugin(config: LogsPluginConfig = {}): Plugin {
         },
       });
 
-      // Register /logs route
+      // Register root route (slug prefix added automatically by framework)
       registry.addRoute({
         method: 'get',
-        path: '/logs',
+        path: '/',
         pluginId: 'logs',
         handler: (req: Request, res: Response) => {
           try {
@@ -135,10 +135,10 @@ export function createLogsPlugin(config: LogsPluginConfig = {}): Plugin {
         },
       });
 
-      // Register /logs/stats route
+      // Register /stats route (slug prefix added automatically by framework)
       registry.addRoute({
         method: 'get',
-        path: '/logs/stats',
+        path: '/stats',
         pluginId: 'logs',
         handler: (req: Request, res: Response) => {
           try {

package/src/plugins/maintenance/MaintenanceManagementPage.tsx

@@ -0,0 +1,193 @@
+/**
+ * Maintenance Management Page Component
+ * Provides operational tools for CMS applications
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { StatCard } from '@qwickapps/react-framework';
+import { Card, CardContent, Typography } from '@mui/material';
+
+export interface MaintenanceManagementPageProps {
+  apiPrefix?: string;
+}
+
+interface MaintenanceStatus {
+  status: 'ok' | 'error';
+  features: {
+    seeds: boolean;
+    serviceControl: boolean;
+    envManagement: boolean;
+    databaseOps: boolean;
+  };
+  config: {
+    scriptsPath: string;
+    envFilePath: string;
+    backupsPath: string;
+  };
+}
+
+export const MaintenanceManagementPage: React.FC<MaintenanceManagementPageProps> = ({
+  apiPrefix = '/api/plugins/maintenance',
+}) => {
+  const [status, setStatus] = useState<MaintenanceStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchStatus = async () => {
+    try {
+      const response = await fetch(`${apiPrefix}/status`);
+      if (response.ok) {
+        const data = await response.json();
+        setStatus(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch maintenance status:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+  }, [apiPrefix]);
+
+  return (
+    <PluginManagementPage
+      title="Maintenance & Operations"
+      description="Operational tools for managing your CMS application"
+      breadcrumbs={[
+        { label: 'Control Panel', href: '/cpanel' },
+        { label: 'Plugins', href: '/cpanel/plugins' },
+        { label: 'Maintenance' },
+      ]}
+      loading={loading}
+    >
+      {/* Feature Status Overview */}
+      {status && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          <StatCard
+            label="Seed Management"
+            value={status.features.seeds ? 'Enabled' : 'Disabled'}
+            status={status.features.seeds ? 'healthy' : 'info'}
+          />
+          <StatCard
+            label="Service Control"
+            value={status.features.serviceControl ? 'Enabled' : 'Disabled'}
+            status={status.features.serviceControl ? 'healthy' : 'info'}
+          />
+          <StatCard
+            label="Environment Variables"
+            value={status.features.envManagement ? 'Enabled' : 'Disabled'}
+            status={status.features.envManagement ? 'healthy' : 'info'}
+          />
+          <StatCard
+            label="Database Operations"
+            value={status.features.databaseOps ? 'Enabled' : 'Disabled'}
+            status={status.features.databaseOps ? 'healthy' : 'info'}
+          />
+        </div>
+      )}
+
+      {/* Feature Sections */}
+      <div className="space-y-6">
+        {/* Seed Management */}
+        {status?.features.seeds && (
+          <Card>
+            <CardContent>
+              <Typography variant="h6">Seed Management</Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Manage database seed scripts
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Seed management UI will be implemented in issue #702
+              </Typography>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Service Control */}
+        {status?.features.serviceControl && (
+          <Card>
+            <CardContent>
+              <Typography variant="h6">Service Control</Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Start, stop, and restart services
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Service control UI will be implemented in issue #703
+              </Typography>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Environment Variables */}
+        {status?.features.envManagement && (
+          <Card>
+            <CardContent>
+              <Typography variant="h6">Environment Variables</Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                View and manage environment configuration
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Environment variable management UI will be implemented in issue #704
+              </Typography>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Database Operations */}
+        {status?.features.databaseOps && (
+          <Card>
+            <CardContent>
+              <Typography variant="h6">Database Operations</Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Backup and restore database operations
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Database operations UI will be implemented in issue #705
+              </Typography>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Configuration Info */}
+      {status && (
+        <div className="mt-6">
+          <Card>
+            <CardContent>
+              <Typography variant="h6">Configuration</Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Current maintenance plugin configuration
+              </Typography>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Scripts Path:</span>
+                  <code className="text-sm text-gray-900 dark:text-gray-100">
+                    {status.config.scriptsPath}
+                  </code>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Environment File:</span>
+                  <code className="text-sm text-gray-900 dark:text-gray-100">
+                    {status.config.envFilePath}
+                  </code>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Backups Path:</span>
+                  <code className="text-sm text-gray-900 dark:text-gray-100">
+                    {status.config.backupsPath}
+                  </code>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </PluginManagementPage>
+  );
+};
+
+export default MaintenanceManagementPage;

package/src/plugins/maintenance/MaintenanceStatusWidget.tsx

@@ -0,0 +1,120 @@
+/**
+ * Maintenance Status Widget Component
+ * Displays system operational status and available features
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  PluginStatusWidget,
+  type PluginStatusWidgetProps,
+} from '@qwickapps/server/ui';
+
+export interface MaintenanceStatusWidgetProps {
+  apiPrefix?: string;
+}
+
+interface MaintenanceStatus {
+  status: 'ok' | 'error';
+  features: {
+    seeds: boolean;
+    serviceControl: boolean;
+    envManagement: boolean;
+    databaseOps: boolean;
+  };
+}
+
+export const MaintenanceStatusWidget: React.FC<MaintenanceStatusWidgetProps> = ({
+  apiPrefix = '/api/plugins/maintenance',
+}) => {
+  const [status, setStatus] = useState<MaintenanceStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const response = await fetch(`${apiPrefix}/status`);
+        if (!response.ok) throw new Error('Failed to fetch maintenance status');
+        const data = await response.json();
+        setStatus(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 60000); // Refresh every 60s
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  if (loading) {
+    return (
+      <PluginStatusWidget
+        title="Maintenance & Operations"
+        status="healthy"
+        loading={true}
+      />
+    );
+  }
+
+  if (error || !status) {
+    return (
+      <PluginStatusWidget
+        title="Maintenance & Operations"
+        status="error"
+        message={error || 'Failed to load maintenance status'}
+      />
+    );
+  }
+
+  const enabledFeatures = Object.entries(status.features).filter(([_, enabled]) => enabled);
+  const featureCount = enabledFeatures.length;
+
+  const widgetStats: PluginStatusWidgetProps['stats'] = [
+    {
+      label: 'Features Enabled',
+      value: featureCount,
+      status: 'info',
+    },
+    {
+      label: 'Seed Management',
+      value: status.features.seeds ? 'ON' : 'OFF',
+      status: status.features.seeds ? 'healthy' : 'info',
+    },
+    {
+      label: 'Service Control',
+      value: status.features.serviceControl ? 'ON' : 'OFF',
+      status: status.features.serviceControl ? 'healthy' : 'info',
+    },
+    {
+      label: 'Database Ops',
+      value: status.features.databaseOps ? 'ON' : 'OFF',
+      status: status.features.databaseOps ? 'healthy' : 'info',
+    },
+  ];
+
+  return (
+    <PluginStatusWidget
+      title="Maintenance & Operations"
+      status={status.status === 'ok' ? 'healthy' : 'error'}
+      stats={widgetStats}
+      message={`${featureCount} of 4 features enabled`}
+      actions={[
+        {
+          label: 'Manage',
+          onClick: () => {
+            window.location.href = '/cpanel/plugins/maintenance';
+          },
+          variant: 'secondary',
+        },
+      ]}
+    />
+  );
+};
+
+export default MaintenanceStatusWidget;