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

package/src/components/etl-monitor/renderers/EtlMonitorWidget.tsx

@@ -0,0 +1,97 @@
+/**
+ * ETL Monitor Widget
+ * The single implementation of "render one ETL monitor as a dashboard
+ * widget": parse/adapt the display config, overlay presentation metadata,
+ * wrap in MonitorWidgetCard chrome (refresh + kebab) and render through
+ * the shared MonitorRenderer. Used by BOTH the legacy ETL dashboard and
+ * the generic dashboard renderer so their output cannot drift.
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { ETLMonitorDto, MonitorDataResponse } from '../../../types/etl-monitor';
+import { parseDisplayConfig, adaptLegacyConfigToV2 } from '../../../utils/etl-monitor';
+import { MonitorRenderer } from './MonitorRenderer';
+import { MonitorWidgetCard } from './monitor-widget-card.component';
+import ETLMonitorCardShell, { CardEmptyState } from '../etl-monitor-card-shell.component';
+
+export interface EtlMonitorWidgetProps {
+    monitor: ETLMonitorDto;
+    data?: MonitorDataResponse;
+    error?: string;
+    loading: boolean;
+    onRefresh: () => void;
+    /** 1-based index within its dashboard section — renders "<position>. <Name>" */
+    position?: number;
+    /** Widget header title; defaults to the monitor name (dashboard slot titleOverride wins) */
+    title?: string;
+    /** Base URL of the monitor builder for the kebab "Edit monitor" action */
+    editBaseUrl?: string;
+}
+
+export function EtlMonitorWidget({
+    monitor,
+    data,
+    error,
+    loading,
+    onRefresh,
+    position,
+    title,
+    editBaseUrl = '/admin/etl-monitors/builder',
+}: EtlMonitorWidgetProps) {
+    const navigate = useNavigate();
+
+    const displayTitle = `${typeof position === 'number' ? `${position}. ` : ''}${title ?? monitor.name}`;
+
+    const config = React.useMemo(() => {
+        const parsed = parseDisplayConfig(monitor.displayConfigJson);
+        const base = parsed.version === 2
+            ? parsed.config
+            : adaptLegacyConfigToV2(monitor.displayConfigJson, monitor.monitorType);
+        if (!base) return null;
+        return {
+            ...base,
+            presentation: {
+                ...(base.presentation || {}),
+                title: displayTitle,
+                description: monitor.description,
+            },
+        };
+    }, [monitor.displayConfigJson, monitor.monitorType, monitor.description, displayTitle]);
+
+    if (!config) {
+        return (
+            <ETLMonitorCardShell
+                title={displayTitle}
+                loading={loading}
+                error={error}
+                onRefresh={onRefresh}
+                size="lg"
+            >
+                <CardEmptyState message="Invalid monitor configuration" />
+            </ETLMonitorCardShell>
+        );
+    }
+
+    return (
+        <MonitorWidgetCard
+            loading={loading}
+            onRefresh={onRefresh}
+            actions={[
+                {
+                    label: 'Edit monitor',
+                    onClick: () => navigate(`${editBaseUrl}?mode=edit&monitor=${monitor.uuid}`),
+                },
+            ]}
+        >
+            <MonitorRenderer
+                config={config}
+                data={data?.rawResponse}
+                loading={loading}
+                error={error ?? null}
+            />
+        </MonitorWidgetCard>
+    );
+}
+
+export default EtlMonitorWidget;

package/src/components/etl-monitor/renderers/MetricsGridRenderer.tsx

@@ -0,0 +1,2 @@
+import MetricsGridRenderer from './components/metrics-grid-renderer';
+export default MetricsGridRenderer;

package/src/components/etl-monitor/renderers/MonitorRenderer.tsx

@@ -0,0 +1,175 @@
+/**
+ * Monitor Renderer - Base Component
+ *
+ * Main entry point for rendering ETL monitor components
+ * Dispatches to specific renderer based on component type
+ */
+
+import React from 'react';
+import StatusCardRenderer from './StatusCardRenderer';
+import SummaryCardRenderer from './SummaryCardRenderer';
+import ProgressRenderer from './ProgressRenderer';
+import TableRenderer from './TableRenderer';
+import MetricsGridRenderer from './MetricsGridRenderer';
+import ErrorLogRenderer from './ErrorLogRenderer';
+import DetailsRenderer from './DetailsRenderer';
+import LogRenderer from './components/log-renderer';
+import TimeSeriesRenderer from './components/time-series-renderer';
+import type { DisplayConfigV2 } from '../../../types/etl-monitor/etl-monitor-v2.types';
+import { transformDataToFields, isDataEmpty, transformArrayDataToRows } from './data-transformer';
+import styles from './monitor-renderers.scss';
+
+interface MonitorRendererProps {
+  config: DisplayConfigV2;
+  data?: any;
+  loading?: boolean;
+  error?: string | null;
+}
+
+/**
+ * Map component types to their renderers
+ */
+const COMPONENT_RENDERERS: Record<string, React.FC<any>> = {
+  STATUS_CARD: StatusCardRenderer,
+  SUMMARY_CARD: SummaryCardRenderer,
+  PROGRESS: ProgressRenderer,
+  DATA_TABLE: TableRenderer,
+  TABLE: TableRenderer,
+  METRICS_GRID: MetricsGridRenderer,
+  ERROR_LOG: ErrorLogRenderer,
+  DETAILS: DetailsRenderer,
+  LOG: LogRenderer,
+  TIME_SERIES: TimeSeriesRenderer,
+};
+
+/**
+ * Empty state component
+ */
+function EmptyState({ config }: { config: DisplayConfigV2 }) {
+  const emptyConfig = config.emptyState;
+  const tone = emptyConfig?.tone || 'neutral';
+
+  return (
+    <div className={styles['monitor-empty-state']}>
+      <div className={[styles['monitor-empty-state__icon'], styles[`monitor-empty-state__icon--${tone}`]].join(' ')}>
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+          <circle cx="24" cy="24" r="20" stroke="currentColor" strokeWidth="2.5" fill="none"/>
+          <path d="M16 24L22 30L32 18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </div>
+      <h4 className={styles['monitor-empty-state__title']}>
+        {emptyConfig?.title || 'No Data'}
+      </h4>
+      <p className={styles['monitor-empty-state__description']}>
+        {emptyConfig?.description || 'No data available at this time.'}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Loading state component
+ */
+function LoadingState() {
+  return (
+    <div className={styles['monitor-loading-state']}>
+      <div className={styles['monitor-loading-state__spinner']} />
+      <p className={styles['monitor-loading-state__text']}>Loading monitor data...</p>
+    </div>
+  );
+}
+
+/**
+ * Error state component
+ */
+function ErrorState({ error }: { error: string }) {
+  return (
+    <div className={styles['monitor-error-state']}>
+      <div className={styles['monitor-error-state__icon']}>
+        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+          <circle cx="16" cy="16" r="14" stroke="#da1e28" strokeWidth="2" fill="none"/>
+          <path d="M16 10V16M16 20V22" stroke="#da1e28" strokeWidth="2" strokeLinecap="round"/>
+        </svg>
+      </div>
+      <h4 className={styles['monitor-error-state__title']}>Unable to Load Monitor</h4>
+      <p className={styles['monitor-error-state__description']}>{error}</p>
+    </div>
+  );
+}
+
+/**
+ * Fallback component for unknown types
+ */
+function FallbackRenderer({ config, data }: { config: DisplayConfigV2; data?: any }) {
+  return (
+    <div className={styles['monitor-fallback']}>
+      <div className={styles['monitor-fallback__header']}>
+        <h5>{config.presentation?.title || 'Monitor'}</h5>
+      </div>
+      <div className={styles['monitor-fallback__content']}>
+        <p className={styles['monitor-fallback__note']}>
+          Component type <code>{config.component}</code> is not yet supported.
+        </p>
+        {data && (
+          <pre className={styles['monitor-fallback__data']}>
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Main Monitor Renderer Component
+ */
+export function MonitorRenderer({ config, data, loading, error }: MonitorRendererProps) {
+  const Renderer = COMPONENT_RENDERERS[config.component];
+
+  // Handle loading state
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  // Handle error state
+  if (error) {
+    return <ErrorState error={error} />;
+  }
+
+  // Check if data is empty
+  const isEmpty = isDataEmpty(data, config);
+
+  // Handle empty state
+  if (isEmpty) {
+    return <EmptyState config={config} />;
+  }
+
+  // Handle unknown component type
+  if (!Renderer) {
+    return <FallbackRenderer config={config} data={data} />;
+  }
+
+  // Path-resolved, semantically formatted fields for every component
+  const fields = transformDataToFields(data, config);
+
+  // Simple renderers (single-value components) take fields + raw data;
+  // row-based components additionally receive resolved rows
+  const simpleRenderers = ['STATUS_CARD', 'SUMMARY_CARD', 'PROGRESS'];
+  if (simpleRenderers.includes(config.component)) {
+    return <Renderer config={config} fields={fields} data={data} />;
+  }
+
+
+  // For table-like components, also provide array data
+  const arrayData = ['TABLE', 'DATA_TABLE', 'ERROR_LOG', 'LOG', 'TIME_SERIES'].includes(config.component)
+    ? transformArrayDataToRows(data, config)
+    : null;
+
+  // Render the specific component with formatted fields
+  return <Renderer config={config} fields={fields} arrayData={arrayData} rawData={data} />;
+}
+
+export default MonitorRenderer;
+
+// Export error and empty state components for use by other renderers
+export { EmptyState as MonitorEmpty, ErrorState as MonitorError };

package/src/components/etl-monitor/renderers/ProgressRenderer.tsx

@@ -0,0 +1,2 @@
+import ProgressRenderer from './components/progress-renderer';
+export default ProgressRenderer;

package/src/components/etl-monitor/renderers/StatusCardRenderer.tsx

@@ -0,0 +1,2 @@
+import StatusCardRenderer from './components/status-card-renderer';
+export default StatusCardRenderer;

package/src/components/etl-monitor/renderers/SummaryCardRenderer.tsx

@@ -0,0 +1,2 @@
+import SummaryCardRenderer from './components/summary-card-renderer';
+export default SummaryCardRenderer;

package/src/components/etl-monitor/renderers/TableRenderer.tsx

@@ -0,0 +1,2 @@
+import TableRenderer from './components/table-renderer';
+export default TableRenderer;

package/src/components/etl-monitor/renderers/component-icons.tsx

@@ -0,0 +1,33 @@
+/**
+ * Shared icon-name → Carbon icon map for componentConfig.icons
+ * (metric tiles, time-series headers, etc.)
+ */
+
+import React from 'react';
+import {
+  Document,
+  Timer,
+  ChartLine,
+  Time,
+  Grid,
+  ChartBar,
+  Badge,
+  Calendar,
+} from '@carbon/icons-react';
+
+type IconComponent = React.ComponentType<{ size?: number | string }>;
+
+export const TILE_ICONS: Record<string, IconComponent> = {
+  document: Document,
+  timer: Timer,
+  trend: ChartLine,
+  clock: Time,
+  grid: Grid,
+  chart: ChartBar,
+  badge: Badge,
+  calendar: Calendar,
+};
+
+export function getTileIcon(name?: string): IconComponent | undefined {
+  return name ? TILE_ICONS[name] : undefined;
+}

package/src/components/etl-monitor/renderers/components/details-renderer.tsx

@@ -0,0 +1,195 @@
+/**
+ * Details Renderer
+ * Renders DETAILS/ERROR_LOG component type
+ */
+
+import React from 'react';
+import { StructuredListWrapper, StructuredListBody, StructuredListRow, StructuredListCell, Tag } from '@carbon/react';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { formatRelativeTime } from '../../../../utils/etl-monitor/value-formatters.util';
+
+interface DetailsRendererProps {
+  config: DisplayConfigV2;
+  fields?: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    statusTone?: string;
+    statusMap?: Record<string, any>;
+    order?: number;
+    format?: any;
+    path?: string;
+  }>;
+  arrayData?: any;
+  rawData?: any;
+  data?: any;
+}
+
+export function DetailsRenderer({ config, fields, data }: DetailsRendererProps) {
+  // Fields are provided by MonitorRenderer's data-transformer path; fall back
+  // to transforming data here if a caller passes raw data instead
+  const derivedFields = fields || (data ? transformDataToFields(data, config) : []);
+  const visibleFields = (derivedFields || []).filter((f) => !f.hidden);
+  const isErrorLog = config.component === 'ERROR_LOG';
+
+  return (
+    <div className={styles['details-renderer']}>
+      <div className={styles['details-renderer__header']}>
+        {config.presentation?.title && (
+          <h4 className={styles['details-renderer__title']}>{config.presentation.title}</h4>
+        )}
+      </div>
+
+      {visibleFields.length === 0 ? (
+        <div className={styles['details-renderer__empty']}>No details to display</div>
+      ) : (
+        <StructuredListWrapper>
+          <StructuredListBody>
+            {visibleFields.map((field) => (
+              <StructuredListRow key={field.key}>
+                <StructuredListCell style={{ width: '40%' }}>
+                  <strong>{field.label}</strong>
+                </StructuredListCell>
+                <StructuredListCell>
+                  {isErrorLog && field.type === 'STATUS' ? (
+                    <Tag type={field.value === 'ERROR' ? 'red' : 'gray'}>
+                      {field.formattedValue}
+                    </Tag>
+                  ) : field.type === 'STATUS' && field.statusTone ? (
+                    <Tag type={field.statusTone === 'success' ? 'green' : field.statusTone === 'critical' ? 'red' : field.statusTone === 'warning' ? 'purple' : 'gray'}>
+                      {field.formattedValue}
+                    </Tag>
+                  ) : field.type === 'TIMESTAMP' && field.format?.timestamp?.display ? (
+                    <span className={styles['details-renderer__timestamp']}>
+                      <span className={styles['details-renderer__value']}>{field.formattedValue}</span>
+                      <span className={styles['details-renderer__timestamp-sub']}>
+                        {formatRelativeTime(field.value)}
+                      </span>
+                    </span>
+                  ) : (
+                    <span className={styles['details-renderer__value']}>{field.formattedValue}</span>
+                  )}
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListBody>
+        </StructuredListWrapper>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Transform raw data into formatted fields for details renderer
+ */
+export function transformDataToFields(data: any, config: DisplayConfigV2) {
+  if (!data || typeof data !== 'object') return [];
+
+  const fields: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    statusTone?: string;
+    statusMap?: Record<string, any>;
+    order?: number;
+    format?: any;
+    path?: string;
+  }> = [];
+
+  // If config defines field mappings, apply them
+  if (config.fields && Array.isArray(config.fields)) {
+    for (const fieldConfig of config.fields) {
+      const value = resolveFieldValue(data, fieldConfig.key);
+
+      // Determine status tone if this is a STATUS field with statusMap
+      let statusTone = 'neutral';
+      if (fieldConfig.type === 'STATUS' && fieldConfig.statusMap && value != null) {
+        const stringValue = String(value);
+        const mapping = fieldConfig.statusMap[stringValue];
+        statusTone = mapping?.tone || 'neutral';
+      }
+
+      fields.push({
+        key: fieldConfig.key,
+        label: fieldConfig.label || fieldConfig.key,
+        value,
+        formattedValue: formatFieldValue(value, fieldConfig),
+        type: fieldConfig.type || 'string',
+        primary: fieldConfig.primary || false,
+        hidden: fieldConfig.hidden || false,
+        statusTone,
+        statusMap: fieldConfig.statusMap,
+        order: fieldConfig.order,
+      });
+    }
+  } else {
+    // Otherwise, use all data properties
+    Object.keys(data).forEach((key, index) => {
+      const value = data[key];
+      fields.push({
+        key,
+        label: key,
+        value,
+        formattedValue: value,
+        type: typeof value,
+        primary: index === 0,
+        hidden: false,
+        order: index,
+      });
+    });
+  }
+
+  return fields;
+}
+
+/**
+ * Resolve field value from data object using key path
+ */
+function resolveFieldValue(data: any, key: string): any {
+  if (!data || !key) return undefined;
+
+  const keys = key.split('.');
+  let value = data;
+
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = value[k];
+    } else {
+      return undefined;
+    }
+  }
+
+  return value;
+}
+
+/**
+ * Format field value based on field configuration
+ */
+function formatFieldValue(value: any, fieldConfig: any): any {
+  if (value === null || value === undefined) return '-';
+
+  if (fieldConfig.type === 'date' && value) {
+    try {
+      return new Date(value).toLocaleDateString();
+    } catch {
+      return value;
+    }
+  }
+
+  if (fieldConfig.type === 'boolean') {
+    return value ? 'Yes' : 'No';
+  }
+
+  return value;
+}
+
+export default DetailsRenderer;

package/src/components/etl-monitor/renderers/components/error-log-renderer.tsx

@@ -0,0 +1,104 @@
+/**
+ * Error Log Renderer
+ * Displays error logs in a table format
+ */
+
+import React from 'react';
+import { DataTable, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow } from '@carbon/react';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { formatSemanticValue } from '../data-transformer';
+
+interface ErrorLogRendererProps {
+  config: DisplayConfigV2;
+  fields?: Record<string, any>[];
+  arrayData?: any[];
+  rawData?: any;
+}
+
+/**
+ * Error Log Renderer Component
+ * Displays error logs with timestamp, level, and message
+ */
+export function ErrorLogRenderer({ config, arrayData, rawData }: ErrorLogRendererProps) {
+  // Accept array data, a raw array, or a single object; Carbon DataTable needs row ids
+  const source = arrayData && arrayData.length > 0
+    ? arrayData
+    : Array.isArray(rawData)
+      ? rawData
+      : rawData && typeof rawData === 'object'
+        ? [rawData]
+        : [];
+
+  const logs = source.map((row: any, index: number) => {
+    const formatted: any = {
+      ...row,
+      id: String(row?.id ?? row?._id ?? index),
+    };
+    // Format cells per semantic type so timestamps/durations read like the widgets
+    config.fields?.forEach((field: any) => {
+      if (field.type && field.type !== 'TEXT' && formatted[field.key] != null) {
+        formatted[field.key] = formatSemanticValue(formatted[field.key], field);
+      }
+    });
+    return formatted;
+  });
+
+  if (!logs || logs.length === 0) {
+    return (
+      <div className={styles['error-log-empty']}>
+        <p>No error logs available</p>
+      </div>
+    );
+  }
+
+  // Headers keyed by field.key (matching the row objects) with label text
+  const headers = (config.fields?.length
+    ? config.fields.map((field: any) => ({ key: field.key, header: field.label || field.key }))
+    : [
+        { key: 'timestamp', header: 'Timestamp' },
+        { key: 'level', header: 'Level' },
+        { key: 'message', header: 'Message' },
+      ]
+  ).map((header: any) => ({
+    key: header.key,
+    header: header.header,
+  }));
+
+  return (
+    <div className={styles['error-log-renderer']}>
+      {config.presentation?.title && (
+        <h4 className={styles['error-log-renderer__title']}>{config.presentation.title}</h4>
+      )}
+
+      <DataTable rows={logs} headers={headers}>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                      {(header as any).header || (header as any).key}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+}
+
+export default ErrorLogRenderer;

package/src/components/etl-monitor/renderers/components/index.ts

@@ -0,0 +1,6 @@
+export { default as StatusCardRenderer } from './status-card-renderer';
+export { default as SummaryCardRenderer } from './summary-card-renderer';
+export { default as ProgressRenderer } from './progress-renderer';
+export { default as TableRenderer } from './table-renderer';
+export { default as MetricsGridRenderer } from './metrics-grid-renderer';
+export { default as DetailsRenderer } from './details-renderer';