@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/etl-monitor/builder/steps/preview-step.scss

@@ -0,0 +1,236 @@
+/**
+ * Preview & Publish Step Styles (reference: docs/image-series-monitor/stage5.png)
+ */
+
+.preview-step {
+  &__header {
+    margin-bottom: 1.5rem;
+
+    h2 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #161616;
+      letter-spacing: -0.01em;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: #525252;
+    }
+  }
+}
+
+/* Selected design's card identity above the live widget */
+.preview-design-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 5.5rem 0.875rem 0; // right padding keeps clear of the card actions
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 0.5rem;
+    flex-shrink: 0;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #161616;
+    letter-spacing: -0.01em;
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: #6b7280;
+    line-height: 1.4;
+  }
+}
+
+/* Configuration summary / checklist card */
+.preview-section {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+
+  h4 {
+    margin: 0 0 1.25rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #161616;
+  }
+
+  &__divider {
+    height: 1px;
+    background: #e0e0e0;
+    margin: 1.5rem 0;
+  }
+}
+
+.preview-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem 2rem;
+
+  &__item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    min-width: 0;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 0.5rem;
+    background: #f4f4f4;
+    color: #525252;
+    flex-shrink: 0;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__label {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+  }
+
+  &__value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+    word-break: break-word;
+  }
+}
+
+.preview-checklist {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem 2rem;
+
+  &__item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+  }
+
+  &__icon {
+    display: inline-flex;
+    margin-top: 0.125rem;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    &--pass svg {
+      color: #24a148;
+    }
+
+    &--fail svg {
+      color: #da1e28;
+    }
+  }
+
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+  }
+
+  &__sub {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+    margin-top: 0.125rem;
+    line-height: 1.4;
+  }
+}
+
+/* Bottom save row */
+.preview-save {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .preview-summary,
+  .preview-checklist {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dark theme */
+[data-theme='dark'] {
+  .preview-step__header {
+    h2 {
+      color: #f4f4f4;
+    }
+
+    p {
+      color: #8d8d8d;
+    }
+  }
+
+  .preview-section {
+    background: #1f2937;
+    border-color: #393939;
+
+    h4 {
+      color: #f4f4f4;
+    }
+
+    &__divider {
+      background: #393939;
+    }
+  }
+
+  .preview-summary__icon {
+    background: #393939;
+    color: #8d8d8d;
+  }
+
+  .preview-summary__label,
+  .preview-checklist__sub {
+    color: #8d8d8d;
+  }
+
+  .preview-summary__value,
+  .preview-checklist__label {
+    color: #f4f4f4;
+  }
+}
+
+[data-theme='dark'] {
+  .preview-design-head__title {
+    color: #f4f4f4;
+  }
+
+  .preview-design-head__desc {
+    color: #8d8d8d;
+  }
+}

package/src/components/etl-monitor/etl-monitor-card-shell.component.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+    Button,
+    InlineLoading,
+    InlineNotification,
+    OverflowMenu,
+    OverflowMenuItem,
+    Tile,
+} from '@carbon/react';
+import { Renew as Refresh, WarningFilled } from '@carbon/icons-react';
+import styles from './etl-monitor-card-shell.scss';
+
+/**
+ * Card Shell Component - Reusable wrapper for ETL monitor cards
+ * Provides consistent header, loading/error states, and refresh action
+ */
+interface ETLMonitorCardShellProps {
+    title: string;
+    children: React.ReactNode;
+    loading?: boolean;
+    error?: string;
+    onRefresh?: () => void;
+    refreshDisabled?: boolean;
+    extraActions?: React.ReactNode;
+    onEdit?: () => void;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export default function ETLMonitorCardShell({
+    title,
+    children,
+    loading = false,
+    error,
+    onRefresh,
+    refreshDisabled = false,
+    extraActions,
+    onEdit,
+    size = 'md',
+}: ETLMonitorCardShellProps) {
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
+
+    const handleRefresh = async () => {
+        if (!onRefresh || isRefreshing || refreshDisabled) return;
+        setIsRefreshing(true);
+        try {
+            await onRefresh();
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    return (
+        <Tile className={`${styles['etl-monitor-card-shell']} ${styles[`etl-monitor-card-shell--${size}`]}`}>
+            {/* Card Header */}
+            <div className={styles['etl-monitor-card-shell__header']}>
+                <h4 className={styles['etl-monitor-card-shell__title']}>{title}</h4>
+                <div className={styles['etl-monitor-card-shell__actions']}>
+                    {extraActions}
+                    {onRefresh && (
+                        <Button
+                            kind="ghost"
+                            size="sm"
+                            renderIcon={Refresh}
+                            iconDescription="Refresh"
+                            hasIconOnly
+                            onClick={handleRefresh}
+                            disabled={refreshDisabled || isRefreshing || loading}
+                        />
+                    )}
+                    {onEdit && (
+                        <OverflowMenu flipped ariaLabel="Monitor actions" size="sm">
+                            <OverflowMenuItem itemText="Edit monitor" onClick={onEdit} />
+                        </OverflowMenu>
+                    )}
+                </div>
+            </div>
+
+            {/* Card Content */}
+            <div className={styles['etl-monitor-card-shell__content']}>
+                {/* Loading State */}
+                {loading && (
+                    <div className={styles['etl-monitor-card-shell__loading']}>
+                        <InlineLoading description="Loading..." />
+                    </div>
+                )}
+
+                {/* Error State */}
+                {!loading && error && (
+                    <div className={styles['etl-monitor-card-shell__error']}>
+                        <InlineNotification
+                            lowContrast
+                            kind="error"
+                            title="Error"
+                            subtitle={error}
+                            hideCloseButton
+                        />
+                        {onRefresh && (
+                            <Button
+                                size="sm"
+                                kind="secondary"
+                                renderIcon={Refresh}
+                                onClick={handleRefresh}
+                                style={{ marginTop: '1rem' }}
+                            >
+                                Retry
+                            </Button>
+                        )}
+                    </div>
+                )}
+
+                {/* Normal Content */}
+                {!loading && !error && children}
+            </div>
+        </Tile>
+    );
+}
+
+/**
+ * Loading Skeleton for card content
+ */
+export function CardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
+    const skeletonLines = size === 'sm' ? 2 : size === 'md' ? 3 : 4;
+
+    return (
+        <div className={styles['etl-monitor-card-shell__skeleton']}>
+            {Array.from({ length: skeletonLines }).map((_, i) => (
+                <div key={i} className={styles['etl-monitor-card-shell__skeleton-line']} />
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Empty State for card content
+ */
+export function CardEmptyState({
+    icon,
+    message,
+    description,
+}: {
+    icon?: React.ReactNode;
+    message: string;
+    description?: string;
+}) {
+    return (
+        <div className={styles['etl-monitor-card-shell__empty']}>
+            {icon || <WarningFilled size={32} />}
+            <p className={styles['etl-monitor-card-shell__empty-message']}>{message}</p>
+            {description && (
+                <p className={styles['etl-monitor-card-shell__empty-description']}>{description}</p>
+            )}
+        </div>
+    );
+}

package/src/components/etl-monitor/etl-monitor-card-shell.scss

@@ -0,0 +1,103 @@
+/**
+ * ETL Monitor Card Shell Styles
+ * Wrapper component for individual monitor cards
+ */
+
+.etl-monitor-card-shell {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1rem;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #f0f0f0;
+
+    h4 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #161616;
+    }
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  &__status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+
+    &--active {
+      background-color: #198038;
+    }
+
+    &--inactive {
+      background-color: #6f6f6f;
+    }
+
+    &--error {
+      background-color: #da1e28;
+    }
+
+    &--warning {
+      background-color: #f1c21b;
+    }
+  }
+
+  &__content {
+    min-height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f0f0f0;
+    font-size: 0.75rem;
+    color: #6f6f6f;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  [data-theme='dark'] & {
+    background-color: #1a1a1a;
+    border-color: #393939;
+
+    &__header {
+      border-color: #262626;
+
+      h4 {
+        color: #f4f4f4;
+      }
+    }
+
+    &__footer {
+      border-color: #262626;
+      color: #8d8d8d;
+    }
+  }
+}

package/src/components/etl-monitor/etl-monitor-dashboard.component.tsx

@@ -0,0 +1,227 @@
+import React from 'react';
+import {
+    Button,
+    InlineLoading,
+    InlineNotification,
+    Stack,
+    Tile,
+    Tabs,
+    Tab,
+} from '@carbon/react';
+import { Renew as Refresh, Warning } from '@carbon/icons-react';
+import Header from '../shared/header/header.component';
+import { listActiveETLMonitors, fetchMonitorData } from '../../resources/etl-monitor/etl-monitor.api';
+import type { ETLMonitorDto, MonitorDataResponse } from '../../types/etl-monitor/etl-monitor.types';
+import { EtlMonitorWidget } from './renderers/EtlMonitorWidget';
+import styles from './etl-monitor-dashboard.scss';
+
+/**
+ * Main ETL Monitor Dashboard Component
+ */
+export default function ETLMonitorDashboard() {
+    const [monitors, setMonitors] = React.useState<ETLMonitorDto[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    // Store data for each monitor
+    const [monitorData, setMonitorData] = React.useState<Record<string, MonitorDataResponse>>({});
+    const [monitorErrors, setMonitorErrors] = React.useState<Record<string, string>>({});
+    const [monitorLoading, setMonitorLoading] = React.useState<Record<string, boolean>>({});
+
+    const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
+
+    const loadMonitors = React.useCallback(async (signal?: AbortSignal) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await listActiveETLMonitors(signal);
+            setMonitors(data);
+        } catch (e: any) {
+            setError(e?.message ?? 'Failed to load monitors');
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        loadMonitors(ac.signal);
+        return () => ac.abort();
+    }, [loadMonitors]);
+
+    // Load data for all monitors
+    const loadAllMonitorData = React.useCallback(async () => {
+        if (monitors.length === 0) return;
+
+        const newLoading: Record<string, boolean> = {};
+        const newData: Record<string, MonitorDataResponse> = {};
+        const newErrors: Record<string, string> = {};
+
+        await Promise.all(monitors.map(async (monitor) => {
+            if (!monitor.uuid) return;
+            newLoading[monitor.uuid] = true;
+            setMonitorLoading((prev) => ({ ...prev, [monitor.uuid]: true }));
+
+            try {
+                const data = await fetchMonitorData(monitor.uuid);
+                newData[monitor.uuid] = data;
+                setMonitorData((prev) => ({ ...prev, [monitor.uuid]: data }));
+                setMonitorErrors((prev) => {
+                    const next = { ...prev };
+                    delete next[monitor.uuid];
+                    return next;
+                });
+            } catch (e: any) {
+                newErrors[monitor.uuid] = e?.message ?? 'Failed to load data';
+                setMonitorErrors((prev) => ({ ...prev, [monitor.uuid]: e?.message ?? 'Failed to load data' }));
+            } finally {
+                setMonitorLoading((prev) => ({ ...prev, [monitor.uuid]: false }));
+            }
+        }));
+    }, [monitors]);
+
+    React.useEffect(() => {
+        loadAllMonitorData();
+    }, [loadAllMonitorData]);
+
+    // Auto-refresh based on monitor intervals
+    React.useEffect(() => {
+        if (monitors.length === 0) return;
+
+        // Find the minimum refresh interval
+        const minInterval = Math.min(...monitors.map((m) => m.refreshInterval || 30));
+
+        const interval = setInterval(() => {
+            loadAllMonitorData();
+        }, minInterval * 1000);
+
+        return () => clearInterval(interval);
+    }, [monitors, loadAllMonitorData]);
+
+    // Get unique categories
+    const categories = React.useMemo(() => {
+        const cats = new Set(monitors.map((m) => m.category).filter(Boolean));
+        return Array.from(cats) as string[];
+    }, [monitors]);
+
+    // Filter monitors by category
+    const filteredMonitors = React.useMemo(() => {
+        if (!selectedCategory) return monitors;
+        return monitors.filter((m) => m.category === selectedCategory);
+    }, [monitors, selectedCategory]);
+
+    // Group monitors by category
+    const groupedMonitors = React.useMemo(() => {
+        const groups: Record<string, ETLMonitorDto[]> = {};
+        filteredMonitors.forEach((monitor) => {
+            const cat = monitor.category || 'Uncategorized';
+            if (!groups[cat]) groups[cat] = [];
+            groups[cat].push(monitor);
+        });
+        return groups;
+    }, [filteredMonitors]);
+
+    const refreshMonitor = () => {
+        loadAllMonitorData();
+    };
+
+    const refreshAll = () => {
+        loadAllMonitorData();
+    };
+
+    if (loading) {
+        return (
+            <Stack gap={5}>
+                <Header title="ETL Monitor Dashboard" subtitle="Loading monitors..." />
+                <InlineLoading description="Loading ETL monitors..." style={{ padding: '2rem' }} />
+            </Stack>
+        );
+    }
+
+    if (error) {
+        return (
+            <Stack gap={5}>
+                <Header title="ETL Monitor Dashboard" subtitle="Monitor your ETL processes" />
+                <InlineNotification lowContrast kind="error" title="Error" subtitle={error} />
+            </Stack>
+        );
+    }
+
+    if (monitors.length === 0) {
+        return (
+            <Stack gap={5}>
+                <Header
+                    title="ETL Monitor Dashboard"
+                    subtitle="No ETL monitors configured. Create monitors in the admin section."
+                />
+                <Tile style={{ padding: '2rem', textAlign: 'center' }}>
+                    <Warning size={48} style={{ marginBottom: '1rem' }} />
+                    <h3>No Monitors Configured</h3>
+                    <p style={{ color: 'var(--cds-text-secondary, #666)' }}>
+                        Go to the <strong>Admin</strong> section to create ETL monitors.
+                    </p>
+                </Tile>
+            </Stack>
+        );
+    }
+
+    return (
+        <Stack gap={5} className={styles['etl-monitor-dashboard']}>
+            <Header
+                title="ETL Monitor Dashboard"
+                subtitle="Real-time health monitoring for your ETL processes"
+                actions={
+                    <Button size="sm" renderIcon={Refresh} onClick={refreshAll}>
+                        Refresh All
+                    </Button>
+                }
+            />
+
+            {/* Category tabs */}
+            {categories.length > 0 && (
+                <div className={styles['etl-monitor-dashboard__tabs']}>
+                    <Tabs selectedIndex={selectedCategory ? categories.indexOf(selectedCategory) + 1 : 0}>
+                        <Tab onClick={() => setSelectedCategory(null)}>All</Tab>
+                        {categories.map((cat) => (
+                            <Tab key={cat} onClick={() => setSelectedCategory(cat)}>
+                                {cat} <span className={styles['etl-monitor-dashboard__tab-count']}>
+                                    {monitors.filter(m => m.category === cat).length}
+                                </span>
+                            </Tab>
+                        ))}
+                    </Tabs>
+                </div>
+            )}
+
+            {/* Monitors grouped by category */}
+            <div className={styles['etl-monitor-dashboard__content']}>
+                {Object.entries(groupedMonitors).map(([category, categoryMonitors]) => (
+                    <div key={category} className={styles['etl-monitor-dashboard__section']}>
+                        <div className={styles['etl-monitor-dashboard__section-header']}>
+                            <h3>{category}</h3>
+                            <span className={styles['etl-monitor-dashboard__section-count']}>
+                                {categoryMonitors.length} {categoryMonitors.length === 1 ? 'monitor' : 'monitors'}
+                            </span>
+                        </div>
+                        <div className={styles['etl-monitor-dashboard__grid']}>
+                            {categoryMonitors.map((monitor) => {
+                                if (!monitor.uuid) return null;
+
+                                return (
+                                    <EtlMonitorWidget
+                                        key={monitor.uuid}
+                                        monitor={monitor}
+                                        data={monitorData[monitor.uuid]}
+                                        error={monitorErrors[monitor.uuid]}
+                                        loading={!!monitorLoading[monitor.uuid]}
+                                        onRefresh={() => refreshMonitor()}
+                                    />
+                                );
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </Stack>
+    );
+}