@qwickapps/server 1.1.9 → 1.3.0

package/ui/src/dashboard/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Dashboard Module
+ *
+ * Exports the dashboard widget system for dynamic dashboard customization.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+// Legacy context-based widget system (for backwards compatibility)
+export {
+  DashboardWidgetProvider,
+  useDashboardWidgets,
+  useRegisterWidget,
+  type DashboardWidget,
+  type DashboardWidgetProviderProps,
+} from './DashboardWidgetRegistry';
+
+export { DashboardWidgetRenderer } from './DashboardWidgetRenderer';
+
+// New plugin-based widget system
+export {
+  WidgetComponentRegistryProvider,
+  useWidgetComponentRegistry,
+  type WidgetComponent,
+  type WidgetComponentRegistryProviderProps,
+} from './WidgetComponentRegistry';
+
+export { PluginWidgetRenderer } from './PluginWidgetRenderer';
+
+// Built-in widgets
+export { ServiceHealthWidget } from './widgets';
+
+// Built-in widget component map (component name -> React component function)
+// Product code should use getBuiltInWidgetComponents() to get the full list with JSX
+export { builtInWidgetComponents, getBuiltInWidgetComponents } from './builtInWidgets';

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

@@ -0,0 +1,140 @@
+/**
+ * Service Health Widget
+ *
+ * Displays health check status with latency for all registered health checks.
+ * This is a built-in widget provided by qwickapps-server.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Card, CardContent, Chip } from '@mui/material';
+import { GridLayout, Text } from '@qwickapps/react-framework';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import WarningIcon from '@mui/icons-material/Warning';
+import { api, HealthResponse } from '../../api/controlPanelApi';
+
+function getStatusIcon(status: string) {
+  switch (status) {
+    case 'healthy':
+      return <CheckCircleIcon sx={{ fontSize: 24, color: 'var(--theme-success)' }} />;
+    case 'degraded':
+      return <WarningIcon sx={{ fontSize: 24, color: 'var(--theme-warning)' }} />;
+    case 'unhealthy':
+      return <ErrorIcon sx={{ fontSize: 24, color: 'var(--theme-error)' }} />;
+    default:
+      return <WarningIcon sx={{ fontSize: 24, color: 'var(--theme-text-secondary)' }} />;
+  }
+}
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'healthy':
+      return 'var(--theme-success)';
+    case 'degraded':
+      return 'var(--theme-warning)';
+    case 'unhealthy':
+      return 'var(--theme-error)';
+    default:
+      return 'var(--theme-text-secondary)';
+  }
+}
+
+/** Get grid columns count (1-4) based on item count */
+function getGridColumns(count: number): 1 | 2 | 3 | 4 {
+  if (count <= 1) return 1;
+  if (count === 2) return 2;
+  if (count === 3) return 3;
+  return 4;
+}
+
+/**
+ * Service Health Widget Component
+ */
+export function ServiceHealthWidget() {
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchHealth = async () => {
+      try {
+        const data = await api.getHealth();
+        setHealth(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch health');
+      }
+    };
+
+    fetchHealth();
+    const interval = setInterval(fetchHealth, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+        <CardContent>
+          <Text variant="body2" customColor="var(--theme-error)" content={error} />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const healthChecks = health ? Object.entries(health.checks) : [];
+
+  if (healthChecks.length === 0) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+        <CardContent>
+          <Text variant="body2" customColor="var(--theme-text-secondary)" content="No health checks configured" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Determine grid columns based on number of health checks (max 4)
+  const columns = getGridColumns(healthChecks.length);
+
+  return (
+    <GridLayout columns={columns} spacing="medium" equalHeight>
+      {healthChecks.map(([name, check]) => (
+        <Card key={name} sx={{ bgcolor: 'var(--theme-surface)' }}>
+          <CardContent>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              {getStatusIcon(check.status)}
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Text
+                  variant="body1"
+                  fontWeight="500"
+                  content={name.charAt(0).toUpperCase() + name.slice(1)}
+                  customColor="var(--theme-text-primary)"
+                />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                  <Chip
+                    label={check.status}
+                    size="small"
+                    sx={{
+                      bgcolor: getStatusColor(check.status) + '20',
+                      color: getStatusColor(check.status),
+                      fontSize: '0.75rem',
+                      height: 20,
+                    }}
+                  />
+                  {check.latency !== undefined && (
+                    <Text
+                      variant="caption"
+                      content={`${check.latency}ms`}
+                      customColor="var(--theme-text-secondary)"
+                    />
+                  )}
+                </Box>
+              </Box>
+            </Box>
+          </CardContent>
+        </Card>
+      ))}
+    </GridLayout>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Built-in Dashboard Widgets
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { ServiceHealthWidget } from './ServiceHealthWidget';

package/ui/src/pages/DashboardPage.tsx

@@ -1,38 +1,19 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Box,
   Card,
   CardContent,
+  CardActionArea,
   Typography,
-  Grid,
   CircularProgress,
   Chip,
 } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
 import WarningIcon from '@mui/icons-material/Warning';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import MemoryIcon from '@mui/icons-material/Memory';
-import StorageIcon from '@mui/icons-material/Storage';
 import { api, HealthResponse, InfoResponse } from '../api/controlPanelApi';
-
-function formatUptime(ms: number): string {
-  const seconds = Math.floor(ms / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-
-  if (days > 0) {
-    return `${days}d ${hours % 24}h ${minutes % 60}m`;
-  }
-  if (hours > 0) {
-    return `${hours}h ${minutes % 60}m`;
-  }
-  if (minutes > 0) {
-    return `${minutes}m ${seconds % 60}s`;
-  }
-  return `${seconds}s`;
-}
+import { DashboardWidgetRenderer, PluginWidgetRenderer } from '../dashboard';
 
 function getStatusIcon(status: string) {
   switch (status) {
@@ -61,6 +42,7 @@ function getStatusColor(status: string): string {
 }
 
 export function DashboardPage() {
+  const navigate = useNavigate();
   const [health, setHealth] = useState<HealthResponse | null>(null);
   const [info, setInfo] = useState<InfoResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -119,7 +101,7 @@ export function DashboardPage() {
         Real-time overview of {info?.product || 'your service'}
       </Typography>
 
-      {/* Status Banner */}
+      {/* Service Status Banner - clickable to navigate to Health page */}
       <Card
         sx={{
           mb: 4,
@@ -127,138 +109,35 @@ export function DashboardPage() {
           border: `2px solid ${getStatusColor(health?.status || 'unknown')}`,
         }}
       >
-        <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            {getStatusIcon(health?.status || 'unknown')}
-            <Box>
-              <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
-                Service Status: {health?.status?.charAt(0).toUpperCase()}{health?.status?.slice(1)}
-              </Typography>
-              <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                Last updated: {health?.timestamp ? new Date(health.timestamp).toLocaleString() : 'N/A'}
-              </Typography>
-            </Box>
-          </Box>
-          <Chip
-            label={`${healthyCount}/${totalCount} checks passing`}
-            sx={{
-              bgcolor: getStatusColor(health?.status || 'unknown') + '20',
-              color: getStatusColor(health?.status || 'unknown'),
-            }}
-          />
-        </CardContent>
-      </Card>
-
-      {/* Stats Grid */}
-      <Grid container spacing={3} sx={{ mb: 4 }}>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <AccessTimeIcon sx={{ color: 'var(--theme-primary)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Uptime
+        <CardActionArea onClick={() => navigate('/health')}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              {getStatusIcon(health?.status || 'unknown')}
+              <Box>
+                <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+                  Service Status: {health?.status?.charAt(0).toUpperCase()}{health?.status?.slice(1)}
                 </Typography>
-              </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-primary)' }}>
-                {health ? formatUptime(health.uptime) : 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <CheckCircleIcon sx={{ color: 'var(--theme-success)' }} />
                 <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Health Checks
+                  Click to view detailed health information
                 </Typography>
               </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-success)' }}>
-                {healthyCount}/{totalCount}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <MemoryIcon sx={{ color: 'var(--theme-warning)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Version
-                </Typography>
-              </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
-                {info?.version || 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
+            </Box>
+            <Chip
+              label={`${healthyCount}/${totalCount} checks passing`}
+              sx={{
+                bgcolor: getStatusColor(health?.status || 'unknown') + '20',
+                color: getStatusColor(health?.status || 'unknown'),
+              }}
+            />
+          </CardContent>
+        </CardActionArea>
+      </Card>
 
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <StorageIcon sx={{ color: 'var(--theme-info)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Product
-                </Typography>
-              </Box>
-              <Typography variant="h5" sx={{ color: 'var(--theme-text-primary)' }}>
-                {info?.product || 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
+      {/* Plugin widgets (from server-side widget contributions) */}
+      <PluginWidgetRenderer />
 
-      {/* Health Checks Detail */}
-      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
-        <CardContent>
-          <Typography variant="h6" sx={{ mb: 3, color: 'var(--theme-text-primary)' }}>
-            Health Checks
-          </Typography>
-          <Grid container spacing={2}>
-            {healthChecks.map(([name, check]) => (
-              <Grid size={{ xs: 12, sm: 6, md: 4 }} key={name}>
-                <Box
-                  sx={{
-                    p: 2,
-                    borderRadius: 1,
-                    bgcolor: 'var(--theme-background)',
-                    border: `1px solid ${getStatusColor(check.status)}40`,
-                  }}
-                >
-                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      {getStatusIcon(check.status)}
-                      <Typography sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
-                        {name}
-                      </Typography>
-                    </Box>
-                    {check.latency !== undefined && (
-                      <Chip
-                        label={`${check.latency}ms`}
-                        size="small"
-                        sx={{ bgcolor: 'var(--theme-surface)', color: 'var(--theme-text-secondary)' }}
-                      />
-                    )}
-                  </Box>
-                  {check.error && (
-                    <Typography variant="caption" sx={{ color: 'var(--theme-error)' }}>
-                      {check.error}
-                    </Typography>
-                  )}
-                </Box>
-              </Grid>
-            ))}
-          </Grid>
-        </CardContent>
-      </Card>
+      {/* Legacy widgets from context (for backwards compatibility) */}
+      <DashboardWidgetRenderer />
     </Box>
   );
 }