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

package/src/components/etl-monitor/etl-monitor-dashboard.scss

@@ -0,0 +1,148 @@
+/**
+ * ETL Monitor Dashboard Styles
+ * Main dashboard for displaying all ETL monitors
+ */
+
+.etl-monitor-dashboard {
+  padding: 1.5rem;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+
+    h2 {
+      margin: 0;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #161616;
+    }
+
+    p {
+      margin: 0.5rem 0 0 0;
+      font-size: 0.875rem;
+      color: #525252;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  &__filters {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  &__filter {
+    min-width: 150px;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  &__empty {
+    text-align: center;
+    padding: 4rem 2rem;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+
+    h3 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: #525252;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: #6f6f6f;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+  }
+
+  &__section {
+    margin-bottom: 2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    h3 {
+      margin: 0 0 1rem 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #262626;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    &__count {
+      font-size: 0.75rem;
+      font-weight: 400;
+      color: #6f6f6f;
+      background-color: #f4f4f4;
+      padding: 0.125rem 0.5rem;
+      border-radius: 12px;
+    }
+  }
+
+  [data-theme='dark'] & {
+    &__header h2 {
+      color: #f4f4f4;
+    }
+
+    &__header p {
+      color: #8d8d8d;
+    }
+
+    &__section h3 {
+      color: #f4f4f4;
+    }
+
+    &__section__count {
+      background-color: #262626;
+      color: #8d8d8d;
+    }
+
+    &__empty {
+      background-color: #1a1a1a;
+
+      h3, p {
+        color: #8d8d8d;
+      }
+    }
+  }
+}
+
+/* V2 monitor card: chrome actions overlay the widget header */
+.etl-monitor-v2-card {
+  position: relative;
+
+  &__actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.75rem;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+}

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

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Tag, InlineLoading, Tile } from '@carbon/react';
+import { Activity as Pulse, Warning } from '@carbon/icons-react';
+import { fetchMonitorData } from '../../resources/etl-monitor/etl-monitor.api';
+import type { ETLMonitorDto, MonitorDataResponse } from '../../types/etl-monitor/etl-monitor.types';
+
+/**
+ * Compact ETL Monitor Status Card for use in dashards and landing pages
+ */
+export default function ETLMonitorStatusCard({ monitor }: { monitor: ETLMonitorDto }) {
+    const [data, setData] = React.useState<MonitorDataResponse | null>(null);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const loadData = React.useCallback(async () => {
+        if (!monitor.uuid) return;
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const result = await fetchMonitorData(monitor.uuid);
+            setData(result);
+        } catch (e: any) {
+            setError(e?.message || 'Failed to load');
+        } finally {
+            setLoading(false);
+        }
+    }, [monitor.uuid]);
+
+    React.useEffect(() => {
+        loadData();
+
+        // Auto-refresh based on monitor interval
+        const interval = setInterval(() => {
+            loadData();
+        }, (monitor.refreshInterval || 30) * 1000);
+
+        return () => clearInterval(interval);
+    }, [loadData, monitor.refreshInterval]);
+
+    // Get primary status indicator
+    const primaryStatus = React.useMemo(() => {
+        if (!data?.data || data.data.length === 0) return null;
+
+        // Look for a status badge or running indicator
+        const statusItem = data.data.find((d) =>
+            d.key === 'running' ||
+            d.key === 'status' ||
+            d.key === 'isRunning' ||
+            d.header?.toLowerCase().includes('status') ||
+            d.header?.toLowerCase().includes('running')
+        );
+
+        if (statusItem) {
+            const isRunning = statusItem.value === true || statusItem.value === 'true' || String(statusItem.value).toLowerCase() === 'running';
+            return {
+                running: isRunning,
+                label: statusItem.displayValue || String(statusItem.value),
+            };
+        }
+
+        // Fallback to first item
+        return {
+            running: false,
+            label: data.data[0].displayValue || String(data.data[0].value),
+        };
+    }, [data]);
+
+    // Get progress value if available
+    const progressValue = React.useMemo(() => {
+        if (!data?.data) return null;
+
+        const progressItem = data.data.find((d) =>
+            d.key === 'progress' ||
+            d.key === 'progressPercentage' ||
+            d.key === 'completion'
+        );
+
+        if (progressItem && typeof progressItem.value === 'number') {
+            return progressItem.value;
+        }
+
+        return null;
+    }, [data]);
+
+    if (loading && !data) {
+        return (
+            <Tile style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <Pulse size={16} />
+                <span style={{ fontSize: '0.875rem' }}>{monitor.name}</span>
+                <InlineLoading />
+            </Tile>
+        );
+    }
+
+    if (error) {
+        return (
+            <Tile style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <Warning size={16} style={{ color: 'var(--cds-text-error, #da1e28)' }} />
+                <span style={{ fontSize: '0.875rem' }}>{monitor.name}</span>
+                <Tag type="red">Error</Tag>
+            </Tile>
+        );
+    }
+
+    if (!primaryStatus) {
+        return (
+            <Tile style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <Pulse size={16} />
+                <span style={{ fontSize: '0.875rem' }}>{monitor.name}</span>
+                <Tag type="gray">No data</Tag>
+            </Tile>
+        );
+    }
+
+    return (
+        <Tile
+            style={{
+                padding: '1rem',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                cursor: 'pointer',
+                transition: 'background 0.2s',
+            }}
+            onClick={() => window.location.hash = '#/etl-dashboard'}
+        >
+            <Pulse
+                size={16}
+                style={{
+                    color: primaryStatus.running
+                        ? 'var(--cds-interactive-01, #0f62fe)'
+                        : 'var(--cds-success-01, #24a148)',
+                    animation: primaryStatus.running ? 'pulse 2s infinite' : 'none',
+                }}
+            />
+            <span style={{ fontSize: '0.875rem' }}>{monitor.name}</span>
+
+            {progressValue !== null && (
+                <Tag type={progressValue >= 100 ? 'green' : 'blue'}>
+                    {progressValue.toFixed(0)}%
+                </Tag>
+            )}
+
+            <Tag
+                type={
+                    primaryStatus.running
+                        ? 'blue'
+                        : 'green'
+                }
+            >
+                {primaryStatus.label}
+            </Tag>
+        </Tile>
+    );
+}
+
+/**
+ * ETL Monitor Status Row - Shows multiple monitors in a compact row
+ */
+export function ETLMonitorStatusRow({ maxItems = 3 }: { maxItems?: number }) {
+    const [monitors, setMonitors] = React.useState<ETLMonitorDto[]>([]);
+    const [loading, setLoading] = React.useState(false);
+
+    React.useEffect(() => {
+        const loadMonitors = async () => {
+            setLoading(true);
+            try {
+                const { listActiveETLMonitors } = await import('../../resources/etl-monitor/etl-monitor.api');
+                const data = await listActiveETLMonitors();
+                setMonitors(data.slice(0, maxItems));
+            } catch (e) {
+                console.error('Failed to load monitors', e);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadMonitors();
+    }, [maxItems]);
+
+    if (loading || monitors.length === 0) return null;
+
+    return (
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            {monitors.map((monitor) => (
+                <ETLMonitorStatusCard key={monitor.uuid} monitor={monitor} />
+            ))}
+        </div>
+    );
+}