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

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

@@ -0,0 +1,86 @@
+/**
+ * Log / Timeline Renderer
+ * Renders the LOG component type: a vertical event timeline
+ * (dots + line, time left, event right) — reference card "Log / Timeline Card"
+ */
+
+import React from 'react';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { formatSemanticValue, resolveRowFieldValue } from '../data-transformer';
+import styles from '../monitor-renderers.scss';
+
+interface LogRendererProps {
+  config: DisplayConfigV2;
+  fields?: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+    path?: string;
+  }>;
+  arrayData?: any[];
+  rawData?: any;
+  data?: any;
+}
+
+/**
+ * Resolve a value from a row using the field path or key
+ * (shared resolver — understands root-relative envelope paths too)
+ */
+function getRowValue(row: any, field: any, arrayPath?: string): any {
+  return resolveRowFieldValue(row, field, arrayPath);
+}
+
+export function LogRenderer({ config, fields, arrayData, rawData }: LogRendererProps) {
+  const rows = arrayData && arrayData.length > 0
+    ? arrayData
+    : Array.isArray(rawData)
+      ? rawData
+      : rawData && typeof rawData === 'object'
+        ? [rawData]
+        : [];
+
+  const safeFields = fields || [];
+  const timeField = safeFields.find((f) => f.type === 'TIMESTAMP');
+  const messageField = safeFields.find((f) => f.type !== 'TIMESTAMP');
+  const maxRows = config.componentConfig?.maxRows || 10;
+
+  return (
+    <div className={styles['log-renderer']}>
+      {config.presentation?.title && (
+        <h4 className={styles['log-renderer__title']}>{config.presentation.title}</h4>
+      )}
+
+      {rows.length === 0 ? (
+        <div className={styles['log-renderer__empty']}>No events recorded</div>
+      ) : (
+        <ul className={styles['log-renderer__timeline']}>
+          {rows.slice(0, maxRows).map((row: any, index: number) => {
+            const rawTime = timeField ? getRowValue(row, timeField, config.data?.arrayPath) : undefined;
+            const timeText = rawTime != null
+              ? String(formatSemanticValue(rawTime, timeField))
+              : '—';
+            const rawMessage = messageField ? getRowValue(row, messageField, config.data?.arrayPath) : undefined;
+            const messageText = rawMessage != null && rawMessage !== ''
+              ? String(rawMessage)
+              : '—';
+
+            return (
+              <li key={row?.id ?? index} className={styles['log-renderer__entry']}>
+                <span className={styles['log-renderer__marker']} />
+                <span className={styles['log-renderer__time']}>{timeText}</span>
+                <span className={styles['log-renderer__message']}>{messageText}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default LogRenderer;

package/src/components/etl-monitor/renderers/components/metrics-grid-renderer.tsx

@@ -0,0 +1,133 @@
+/**
+ * Metrics Grid Renderer — Metric Summary Card
+ * Final design (docs/image-series-monitor/widgets/metrics_final.png):
+ * icon + title header, 2×2 tiles with colored icon tile LEFT and
+ * label / large value / supporting subtitle stacked right,
+ * TIMESTAMP fields become the "Updated Xm ago" footer.
+ */
+
+import React from 'react';
+import { Time } from '@carbon/icons-react';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { getTileIcon } from '../component-icons';
+import styles from '../monitor-renderers.scss';
+
+// Metric Card accent (Color & Icon System, cardsimages.png)
+const METRIC_ACCENT = '#8a3ffc';
+
+interface MetricsGridRendererProps {
+  config: DisplayConfigV2;
+  fields: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+    path?: string;
+    description?: string;
+    statusTone?: string;
+    statusMap?: Record<string, any>;
+  }>;
+  arrayData?: any;
+  rawData?: any;
+}
+
+export function MetricsGridRenderer({ config, fields }: MetricsGridRendererProps) {
+  const allFields = (fields || []).filter((f) => !f.hidden);
+  const componentConfig = config.componentConfig || {};
+  const icons = componentConfig.icons || {};
+  const iconColors = componentConfig.iconColors || {};
+  const valueColors = componentConfig.valueColors || {};
+
+  // A TIMESTAMP field becomes the "Updated Xm ago" footer, not a tile
+  const updatedField = allFields.find((f) => f.type === 'TIMESTAMP');
+  const visibleFields = allFields.filter((f) => f !== updatedField);
+
+  // Hero mode: a single metric renders large (Metric Card sheet: "Single metric (hero)")
+  const isHero = visibleFields.length === 1;
+
+  // Header: icon + title + subtitle ("ETL Monitor / Current run summary")
+  const HeaderIcon = getTileIcon(componentConfig.icon || 'chart');
+
+  return (
+    <div className={styles['metrics-grid-renderer']}>
+      {!isHero && (
+        <div className={styles['metrics-grid-renderer__head']}>
+          {HeaderIcon && (
+            <span
+              className={styles['metrics-grid-renderer__head-icon']}
+              style={{ backgroundColor: `${METRIC_ACCENT}1A`, color: METRIC_ACCENT }}
+            >
+              <HeaderIcon size={24} />
+            </span>
+          )}
+          <div className={styles['metrics-grid-renderer__head-text']}>
+            {config.presentation?.title && (
+              <h4 className={styles['metrics-grid-renderer__head-title']}>
+                {config.presentation.title}
+              </h4>
+            )}
+            {config.presentation?.description && (
+              <p className={styles['metrics-grid-renderer__head-sub']}>
+                {config.presentation.description}
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div
+        className={[
+          styles['metrics-grid-renderer__grid'],
+          isHero && styles['metrics-grid-renderer__grid--hero'],
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {visibleFields.map((field) => {
+          const IconComponent = getTileIcon(icons[field.key]);
+          const iconColor = iconColors[field.key];
+          const valueColor = valueColors[field.key];
+          const value = field.formattedValue ?? '—';
+
+          return (
+            <div key={field.key} className={styles['metrics-grid-renderer__tile']}>
+              {IconComponent && (
+                <span
+                  className={styles['metrics-grid-renderer__tile-icon']}
+                  style={iconColor ? { backgroundColor: `${iconColor}1A`, color: iconColor } : undefined}
+                >
+                  <IconComponent size={24} />
+                </span>
+              )}
+              <div className={styles['metrics-grid-renderer__tile-body']}>
+                <span className={styles['metrics-grid-renderer__tile-label']}>{field.label}</span>
+                <span
+                  className={styles['metrics-grid-renderer__tile-value']}
+                  style={valueColor ? { color: valueColor } : undefined}
+                >
+                  {value}
+                </span>
+                {field.description && (
+                  <span className={styles['metrics-grid-renderer__tile-sub']}>{field.description}</span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {updatedField?.formattedValue != null && (
+        <div className={styles['metrics-grid-renderer__footer']}>
+          <Time size={14} />
+          <span>Updated {updatedField.formattedValue}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MetricsGridRenderer;

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

@@ -0,0 +1,188 @@
+/**
+ * Progress Renderer
+ * Renders PROGRESS component type
+ */
+
+import React from 'react';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+
+interface ProgressRendererProps {
+  config: DisplayConfigV2;
+  fields?: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+  }>;
+  arrayData?: any;
+  rawData?: any;
+  data?: any;
+}
+
+export function ProgressRenderer({ config, fields, data }: ProgressRendererProps) {
+  // If fields are not provided but data is, transform data into fields
+  const derivedFields = fields || (data ? transformDataToFields(data, config) : []);
+  const safeFields = derivedFields || [];
+
+  const percentageField =
+    safeFields.find((f) => f.type === 'PERCENTAGE') ||
+    safeFields.find((f) => f.primary) ||
+    safeFields[0];
+
+  // Explicitly configured stage field, else the first TEXT field
+  // (e.g. "Current Stage" when stageFieldKey was not configured)
+  const stageField =
+    safeFields.find((f) => f.key === config.componentConfig?.stageFieldKey) ||
+    safeFields.find((f) => f.type === 'TEXT');
+
+  let percentage = 0;
+  const rawPercentage = percentageField?.value;
+  if (typeof rawPercentage === 'number') {
+    percentage = Math.min(100, Math.max(0, rawPercentage));
+  } else if (percentageField?.formattedValue != null) {
+    const parsed = parseFloat(String(percentageField.formattedValue).replace('%', ''));
+    if (!isNaN(parsed)) percentage = Math.min(100, Math.max(0, parsed));
+  }
+
+  const stage = stageField?.formattedValue;
+
+  return (
+    <div className={styles['monitor-progress']}>
+      <div className={styles['monitor-progress__header']}>
+        {config.presentation?.title && (
+          <h4 className={styles['monitor-progress__title']}>{config.presentation.title}</h4>
+        )}
+      </div>
+
+      <div className={styles['monitor-progress__body']}>
+        <div className={styles['monitor-progress__info']}>
+          <div className={styles['monitor-progress__percentage']}>{percentage}%</div>
+          <div className={styles['monitor-progress__stage']}>{stage || 'In Progress'}</div>
+        </div>
+
+        <div className={styles['monitor-progress__bar-container']}>
+          <div className={styles['monitor-progress__bar']} style={{ width: `${percentage}%` }}></div>
+        </div>
+
+        {safeFields.length > 2 && (
+          <div className={styles['monitor-progress__fields']}>
+            {safeFields
+              .filter((f) => f.key !== percentageField?.key && f.key !== stageField?.key && !f.hidden)
+              .slice(0, 3)
+              .map((field) => (
+                <div key={field.key} className={styles['monitor-progress__field']}>
+                  <span className={styles['monitor-progress__field-label']}>{field.label}:</span>
+                  <span className={styles['monitor-progress__field-value']}>{field.formattedValue}</span>
+                </div>
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Transform raw data into formatted fields for progress renderer
+ */
+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;
+    order?: number;
+  }> = [];
+
+  // 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);
+
+      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,
+        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 === 'percentage' && typeof value === 'number') {
+    return `${Math.round(value)}%`;
+  }
+
+  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 ProgressRenderer;

package/src/components/etl-monitor/renderers/components/status-card-renderer.tsx

@@ -0,0 +1,247 @@
+/**
+ * Status Card Renderer
+ * Reference widget style (docs/image-series-monitor/widgets):
+ * icon tile + title header, large tone-colored status with dot,
+ * description line, and footer meta slots.
+ */
+
+import React from 'react';
+import { Security, Time, Grid } from '@carbon/icons-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 StatusCardRendererProps {
+  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;
+  }>;
+  arrayData?: any;
+  rawData?: any;
+  data?: any;
+}
+
+export function StatusCardRenderer({ config, fields, rawData, data }: StatusCardRendererProps) {
+  // Use rawData first (from MonitorRenderer), then data (fallback), then transform
+  const dataToTransform = rawData || data;
+
+  // If fields are not provided but data is, transform data into fields
+  const derivedFields = fields || (dataToTransform ? transformDataToFields(dataToTransform, config) : []);
+  const safeFields = derivedFields || [];
+
+  const primaryField = safeFields.find((f) => f.primary);
+  const statusField = safeFields.find((f) => f.type === 'STATUS') || primaryField;
+
+  const statusValue = statusField?.formattedValue;
+
+  // Use pre-calculated tone from field, or determine from value
+  const tone = statusField?.statusTone || determineStatusTone(statusValue);
+
+  const title = config.presentation?.title || 'Status Monitor';
+  const description = config.presentation?.description;
+
+  // Remaining visible fields become footer meta slots
+  const metaFields = safeFields
+    .filter((f) => !f.hidden && f.key !== statusField?.key)
+    .slice(0, 3);
+
+  return (
+    <div className={[styles['status-card-premium'], styles[`status-card-premium--${tone}`]].join(' ')}>
+      {/* Header: icon tile + title + status pill */}
+      <div className={styles['status-card-premium__header']}>
+        <span className={styles['status-card-premium__icon-tile']}>
+          <Security size={22} />
+        </span>
+        <h3 className={styles['status-card-premium__title']}>{title}</h3>
+        {statusField && (
+          <span
+            className={[
+              styles['status-card-premium__pill'],
+              styles[`status-card-premium__pill--${tone}`],
+            ].join(' ')}
+          >
+            {statusValue || 'Unknown'}
+          </span>
+        )}
+      </div>
+
+      {/* Body: large status + dot, description */}
+      <div className={styles['status-card-premium__body']}>
+        <div className={styles['status-card-premium__status-row']}>
+          <span className={styles['status-card-premium__status-value']}>{statusValue || 'Unknown'}</span>
+          <span className={styles['status-card-premium__dot']} />
+        </div>
+        {description && <p className={styles['status-card-premium__description']}>{description}</p>}
+      </div>
+
+      {/* Footer meta slots (Module, Last checked, ...) */}
+      {metaFields.length > 0 && (
+        <div className={styles['status-card-premium__footer']}>
+          {metaFields.map((field) => (
+            <div key={field.key} className={styles['status-card-premium__meta']}>
+              <span className={styles['status-card-premium__meta-label']}>
+                {field.type === 'TIMESTAMP' ? <Time size={12} /> : <Grid size={12} />}
+                {field.label}
+              </span>
+              <span className={styles['status-card-premium__meta-value']}>{field.formattedValue ?? '—'}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Determine status tone from value
+ */
+function determineStatusTone(value: any): string {
+  if (!value) return 'neutral';
+
+  const stringValue = String(value).toUpperCase();
+
+  if (stringValue === 'UP' || stringValue === 'ACTIVE' || stringValue === 'SUCCESS' || stringValue === 'OK' || stringValue === 'HEALTHY') {
+    return 'success';
+  }
+  if (stringValue === 'DOWN' || stringValue === 'ERROR' || stringValue === 'FAILED' || stringValue === 'CRITICAL' || stringValue === 'UNHEALTHY') {
+    return 'critical';
+  }
+  if (stringValue === 'WARNING' || stringValue === 'DEGRADED') {
+    return 'warning';
+  }
+  if (stringValue === 'INFO' || stringValue === 'PENDING') {
+    return 'info';
+  }
+
+  return 'neutral';
+}
+
+/**
+ * Transform raw data into formatted fields for status card
+ */
+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>;
+  }> = [];
+
+  // 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);
+        // Try exact match first, then case-insensitive match
+        const mapping = fieldConfig.statusMap[stringValue] ||
+                       fieldConfig.statusMap[stringValue.toLowerCase()];
+        statusTone = mapping?.tone || determineStatusTone(value);
+      }
+
+      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,
+      });
+    }
+  } else {
+    // Otherwise, use all data properties
+    Object.keys(data).forEach((key, index) => {
+      const value = data[key];
+      fields.push({
+        key,
+        label: key,
+        value,
+        formattedValue: formatFieldValue(value, { type: typeof value }),
+        type: typeof value,
+        primary: index === 0,
+        hidden: false,
+        statusTone: determineStatusTone(value),
+      });
+    });
+  }
+
+  return fields;
+}
+
+/**
+ * Resolve field value from data object using key path
+ * Supports nested keys like 'user.name' and JSONPath like '$.status'
+ */
+function resolveFieldValue(data: any, key: string): any {
+  if (!data || !key) return undefined;
+
+  // Handle JSONPath-style keys (e.g., '$.status' or '$.user.name')
+  let path = key;
+  if (path.startsWith('$.')) {
+    path = path.slice(2); // Remove '$.' prefix
+  }
+
+  const keys = path.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 '-';
+
+  // For STATUS fields with statusMap, use the mapped label
+  if (fieldConfig.type === 'STATUS' && fieldConfig.statusMap && value != null) {
+    const stringValue = String(value);
+    // Try exact match first, then case-insensitive match
+    const mapping = fieldConfig.statusMap[stringValue] ||
+                   fieldConfig.statusMap[stringValue.toLowerCase()];
+    return mapping?.label || value;
+  }
+
+  // For TIMESTAMP fields, show relative time ("2 minutes ago" / "in 5 minutes")
+  if (fieldConfig.type === 'TIMESTAMP' && value) {
+    return formatRelativeTime(value, { pastOnly: true });
+  }
+
+  if (fieldConfig.type === 'boolean') {
+    return value ? 'Yes' : 'No';
+  }
+
+  return value;
+}
+
+export default StatusCardRenderer;