@qwickapps/server 1.7.0 → 1.7.2

package/ui/src/dashboard/widgets/CacheMaintenanceWidget.tsx

@@ -0,0 +1,195 @@
+/**
+ * Cache Maintenance Widget
+ *
+ * Provides cache management operations:
+ * - View cache statistics
+ * - Clear cache (flush all keys)
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Alert,
+  Box,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+
+interface CacheStats {
+  connected: boolean;
+  keyCount: number;
+  usedMemory?: string;
+}
+
+export function CacheMaintenanceWidget() {
+  const [stats, setStats] = useState<CacheStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [flushing, setFlushing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const fetchStats = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/cache:default/stats');
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error('Cache plugin not configured');
+        }
+        throw new Error('Failed to fetch cache stats');
+      }
+      const data = await response.json();
+      setStats(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch cache stats');
+      setStats(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const handleFlushCache = async () => {
+    setConfirmOpen(false);
+    setFlushing(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch('/api/cache:default/flush', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to flush cache');
+      }
+
+      const data = await response.json();
+      setSuccess(
+        data.message + (data.deletedCount !== undefined ? ` (${data.deletedCount} keys deleted)` : '')
+      );
+
+      // Refresh stats
+      await fetchStats();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to flush cache');
+    } finally {
+      setFlushing(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Cache Management
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          View cache statistics and clear cache
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+
+        {success && (
+          <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(null)}>
+            {success}
+          </Alert>
+        )}
+
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+            <CircularProgress size={30} />
+          </Box>
+        ) : stats ? (
+          <Box sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+              <Typography variant="body2" color="text.secondary">
+                <strong>Status:</strong>
+              </Typography>
+              <Chip
+                size="small"
+                icon={stats.connected ? <CheckCircleIcon /> : <ErrorIcon />}
+                label={stats.connected ? 'Connected' : 'Disconnected'}
+                color={stats.connected ? 'success' : 'error'}
+              />
+            </Box>
+
+            <Typography variant="body2" color="text.secondary">
+              <strong>Key Count:</strong> {stats.keyCount.toLocaleString()}
+            </Typography>
+
+            {stats.usedMemory && (
+              <Typography variant="body2" color="text.secondary">
+                <strong>Memory Used:</strong> {stats.usedMemory}
+              </Typography>
+            )}
+          </Box>
+        ) : null}
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            startIcon={<RefreshIcon />}
+            onClick={fetchStats}
+            disabled={loading}
+          >
+            Refresh
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            size="small"
+            startIcon={flushing ? <CircularProgress size={16} color="inherit" /> : <DeleteIcon />}
+            onClick={() => setConfirmOpen(true)}
+            disabled={!stats || !stats.connected || flushing || loading}
+          >
+            Flush Cache
+          </Button>
+        </Box>
+
+        <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+          <DialogTitle>Flush Cache</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Are you sure you want to flush the cache? This will delete{' '}
+              {stats?.keyCount.toLocaleString()} keys. This action cannot be undone.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
+            <Button onClick={handleFlushCache} color="error" variant="contained">
+              Flush
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/DatabaseOpsWidget.tsx

@@ -0,0 +1,29 @@
+/**
+ * Database Operations Widget
+ *
+ * Provides database backup, restore, and maintenance operations.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, Typography, Alert } from '@mui/material';
+
+export function DatabaseOpsWidget() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Database Operations
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Backup, restore, and maintain database
+        </Typography>
+
+        <Alert severity="info">
+          Database operations UI coming soon. This will allow you to backup and restore your database.
+        </Alert>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/EnvironmentConfigWidget.tsx

@@ -0,0 +1,29 @@
+/**
+ * Environment Configuration Widget
+ *
+ * Displays and allows editing environment variables.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, Typography, Alert } from '@mui/material';
+
+export function EnvironmentConfigWidget() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Environment Configuration
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          View and manage environment variables
+        </Typography>
+
+        <Alert severity="info">
+          Environment configuration UI coming soon. This will allow you to view and edit environment variables.
+        </Alert>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/LogsMaintenanceWidget.tsx

@@ -0,0 +1,247 @@
+/**
+ * Logs Maintenance Widget
+ *
+ * Provides log management operations:
+ * - View log statistics
+ * - Clear log files
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Alert,
+  Box,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+interface LogSource {
+  name: string;
+  type: string;
+}
+
+interface LogStats {
+  totalLogs: number;
+  byLevel: {
+    debug: number;
+    info: number;
+    warn: number;
+    error: number;
+  };
+  fileSize: number;
+  fileSizeFormatted: string;
+  oldestLog: string | null;
+  newestLog: string | null;
+}
+
+export function LogsMaintenanceWidget() {
+  const [sources, setSources] = useState<LogSource[]>([]);
+  const [selectedSource, setSelectedSource] = useState<string>('');
+  const [stats, setStats] = useState<LogStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [clearing, setClearing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const fetchSources = async () => {
+    try {
+      const response = await fetch('/api/logs/sources');
+      if (!response.ok) throw new Error('Failed to fetch log sources');
+      const data = await response.json();
+      setSources(data.sources || []);
+      if (data.sources && data.sources.length > 0 && !selectedSource) {
+        setSelectedSource(data.sources[0].name);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch log sources');
+    }
+  };
+
+  const fetchStats = async () => {
+    if (!selectedSource) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/logs/stats?source=${selectedSource}`);
+      if (!response.ok) throw new Error('Failed to fetch log stats');
+      const data = await response.json();
+      setStats(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch log stats');
+      setStats(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSources();
+  }, []);
+
+  useEffect(() => {
+    if (selectedSource) {
+      fetchStats();
+    }
+  }, [selectedSource]);
+
+  const handleClearLogs = async () => {
+    setConfirmOpen(false);
+    setClearing(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch('/api/logs/clear', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ source: selectedSource }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to clear logs');
+      }
+
+      const data = await response.json();
+      setSuccess(data.message || 'Logs cleared successfully');
+
+      // Refresh stats
+      await fetchStats();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to clear logs');
+    } finally {
+      setClearing(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Log Management
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          View log statistics and clear log files
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+
+        {success && (
+          <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(null)}>
+            {success}
+          </Alert>
+        )}
+
+        <Box sx={{ mb: 2 }}>
+          <FormControl fullWidth size="small">
+            <InputLabel>Log Source</InputLabel>
+            <Select
+              value={selectedSource}
+              label="Log Source"
+              onChange={(e) => setSelectedSource(e.target.value)}
+              disabled={sources.length === 0}
+            >
+              {sources.map((source) => (
+                <MenuItem key={source.name} value={source.name}>
+                  {source.name} ({source.type})
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+            <CircularProgress size={30} />
+          </Box>
+        ) : stats ? (
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="body2" color="text.secondary">
+              <strong>Total Logs:</strong> {stats.totalLogs.toLocaleString()}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              <strong>File Size:</strong> {stats.fileSizeFormatted}
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+              <strong>By Level:</strong>
+            </Typography>
+            <Box sx={{ pl: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                Debug: {stats.byLevel.debug.toLocaleString()}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Info: {stats.byLevel.info.toLocaleString()}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Warn: {stats.byLevel.warn.toLocaleString()}
+              </Typography>
+              <Typography variant="body2" color="error">
+                Error: {stats.byLevel.error.toLocaleString()}
+              </Typography>
+            </Box>
+          </Box>
+        ) : null}
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            startIcon={<RefreshIcon />}
+            onClick={fetchStats}
+            disabled={!selectedSource || loading}
+          >
+            Refresh
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            size="small"
+            startIcon={clearing ? <CircularProgress size={16} color="inherit" /> : <DeleteIcon />}
+            onClick={() => setConfirmOpen(true)}
+            disabled={!selectedSource || clearing || loading}
+          >
+            Clear Logs
+          </Button>
+        </Box>
+
+        <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+          <DialogTitle>Clear Log File</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Are you sure you want to clear the "{selectedSource}" log file? This action cannot
+              be undone.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
+            <Button onClick={handleClearLogs} color="error" variant="contained">
+              Clear
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/SeedManagementWidget.tsx

@@ -0,0 +1,128 @@
+/**
+ * Seed Management Widget
+ *
+ * Displays available seed scripts and allows executing them.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  CircularProgress,
+  Alert,
+  Box,
+} from '@mui/material';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+
+interface SeedScript {
+  name: string;
+  path: string;
+  size: number;
+  createdAt: string;
+  modifiedAt: string;
+}
+
+export function SeedManagementWidget() {
+  const [seeds, setSeeds] = useState<SeedScript[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [executing, setExecuting] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchSeeds();
+  }, []);
+
+  const fetchSeeds = async () => {
+    try {
+      // TODO: Add proper API endpoint for seed discovery
+      // const response = await api.get('/maintenance/seeds/discover');
+      // setSeeds(response.seeds || []);
+      setSeeds([]);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch seeds');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const executeSeed = async (seedName: string) => {
+    setExecuting(seedName);
+    try {
+      // TODO: Add proper API endpoint for seed execution
+      // await api.post(`/maintenance/seeds/execute`, { name: seedName });
+      alert(`Seed ${seedName} executed successfully`);
+    } catch (err) {
+      alert(`Failed to execute seed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    } finally {
+      setExecuting(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent>
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+            <CircularProgress size={24} />
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Seed Management
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Manage and execute seed scripts
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        {seeds.length === 0 ? (
+          <Alert severity="info">No seed scripts found</Alert>
+        ) : (
+          <List>
+            {seeds.map((seed) => (
+              <ListItem
+                key={seed.name}
+                secondaryAction={
+                  <Button
+                    variant="contained"
+                    size="small"
+                    startIcon={executing === seed.name ? <CircularProgress size={16} /> : <PlayArrowIcon />}
+                    onClick={() => executeSeed(seed.name)}
+                    disabled={executing !== null}
+                  >
+                    Execute
+                  </Button>
+                }
+              >
+                <ListItemText
+                  primary={seed.name}
+                  secondary={`Modified: ${new Date(seed.modifiedAt).toLocaleDateString()}`}
+                />
+              </ListItem>
+            ))}
+          </List>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/ServiceControlWidget.tsx

@@ -0,0 +1,29 @@
+/**
+ * Service Control Widget
+ *
+ * Provides controls for starting, stopping, and restarting services.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, Typography, Alert } from '@mui/material';
+
+export function ServiceControlWidget() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Service Control
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Start, stop, and restart services
+        </Typography>
+
+        <Alert severity="info">
+          Service control functionality coming soon. This will allow you to manage service lifecycle.
+        </Alert>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/widgets/index.ts

@@ -10,3 +10,9 @@ export { AuthStatusWidget } from './AuthStatusWidget';
 export { NotificationsStatsWidget } from './NotificationsStatsWidget';
 export { CMSStatusWidget } from './CMSStatusWidget';
 export { CMSMaintenanceWidget } from './CMSMaintenanceWidget';
+export { SeedManagementWidget } from './SeedManagementWidget';
+export { ServiceControlWidget } from './ServiceControlWidget';
+export { EnvironmentConfigWidget } from './EnvironmentConfigWidget';
+export { DatabaseOpsWidget } from './DatabaseOpsWidget';
+export { LogsMaintenanceWidget } from './LogsMaintenanceWidget';
+export { CacheMaintenanceWidget } from './CacheMaintenanceWidget';

package/ui/src/pages/DashboardPage.tsx

@@ -133,8 +133,8 @@ export function DashboardPage() {
         </CardActionArea>
       </Card>
 
-      {/* Plugin widgets (from server-side widget contributions) */}
-      <PluginWidgetRenderer />
+      {/* Plugin widgets (from server-side widget contributions) - status widgets only */}
+      <PluginWidgetRenderer widgetType="status" />
 
       {/* Legacy widgets from context (for backwards compatibility) */}
       <DashboardWidgetRenderer />

package/ui/src/pages/MaintenancePage.tsx

@@ -21,7 +21,7 @@ export function MaintenancePage() {
       </Typography>
 
       {/* Render all maintenance widgets from plugins */}
-      <PluginWidgetRenderer defaultOnly={false} />
+      <PluginWidgetRenderer widgetType="maintenance" defaultOnly={true} />
     </Box>
   );
 }