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

package/src/components/etl-monitor/renderers/monitor-widget-card.component.tsx

@@ -0,0 +1,54 @@
+/**
+ * Monitor Widget Card
+ * Shared dashboard chrome around a rendered monitor widget:
+ * refresh + kebab actions overlaid on the widget header.
+ * Used by the ETL dashboard and the builder's preview surfaces so the
+ * preview is exactly what the dashboard renders — no separate styling.
+ */
+
+import React from 'react';
+import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { Renew as Refresh } from '@carbon/icons-react';
+import styles from './monitor-widget-card.scss';
+
+export interface MonitorWidgetMenuAction {
+  label: string;
+  onClick: () => void;
+}
+
+interface MonitorWidgetCardProps {
+  children: React.ReactNode;
+  loading?: boolean;
+  onRefresh?: () => void;
+  actions?: MonitorWidgetMenuAction[];
+}
+
+export function MonitorWidgetCard({ children, loading = false, onRefresh, actions }: MonitorWidgetCardProps) {
+  return (
+    <div className={styles['monitor-widget-card']}>
+      <div className={styles['monitor-widget-card__actions']}>
+        {onRefresh && (
+          <Button
+            kind="ghost"
+            size="sm"
+            hasIconOnly
+            renderIcon={Refresh}
+            iconDescription="Refresh"
+            onClick={onRefresh}
+            disabled={loading}
+          />
+        )}
+        {actions && actions.length > 0 && (
+          <OverflowMenu flipped ariaLabel="Monitor actions">
+            {actions.map((action) => (
+              <OverflowMenuItem key={action.label} itemText={action.label} onClick={action.onClick} />
+            ))}
+          </OverflowMenu>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default MonitorWidgetCard;

package/src/components/etl-monitor/renderers/monitor-widget-card.scss

@@ -0,0 +1,16 @@
+/**
+ * Monitor Widget Card Styles (dashboard chrome)
+ */
+
+.monitor-widget-card {
+  position: relative;
+
+  &__actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.75rem;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,227 @@
+/**
+ * V2 Monitor Renderer
+ * Renders monitors using schema version 2 configuration
+ */
+
+import React from 'react';
+import type { ETLMonitorDto } from '../../../types/etl-monitor';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../types/etl-monitor/etl-monitor-v2.types';
+import { StatusCardRenderer } from './components/status-card-renderer';
+import { SummaryCardRenderer } from './components/summary-card-renderer';
+import { MetricsGridRenderer } from './components/metrics-grid-renderer';
+import { ProgressRenderer } from './components/progress-renderer';
+import { TableRenderer } from './components/table-renderer';
+import { DetailsRenderer } from './components/details-renderer';
+import { MonitorError, MonitorEmpty } from './monitor-renderer';
+
+interface V2MonitorRendererProps {
+  monitor: ETLMonitorDto;
+  data?: any;
+  loading?: boolean;
+  error?: string;
+}
+
+/**
+ * Parse display configuration
+ */
+function parseDisplayConfig(monitor: ETLMonitorDto): DisplayConfigV2 | null {
+  if (!monitor.displayConfigJson) return null;
+
+  try {
+    return JSON.parse(monitor.displayConfigJson);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Resolve field value from data using JSONPath
+ */
+function resolveFieldValue(data: any, field: any): any {
+  if (!data) return null;
+
+  const path = field.path || '$.' + field.key;
+
+  // Simple JSONPath resolution for common patterns
+  if (path === '$' || path === '$.') {
+    return data;
+  }
+
+  // Handle $.field.name pattern
+  if (path.startsWith('$.')) {
+    const parts = path.substring(2).split('.');
+    let value = data;
+    for (const part of parts) {
+      if (value && typeof value === 'object' && part in value) {
+        value = value[part];
+      } else {
+        return null;
+      }
+    }
+    return value;
+  }
+
+  // Handle array path $.data[*].field (simplified)
+  if (path.includes('[*]')) {
+    const [arrayPath, fieldPath] = path.split('[*].');
+    if (arrayPath.endsWith('[*]')) {
+      const arrayKeyName = arrayPath.substring(2, arrayPath.length - 3);
+      const array = data[arrayKeyName];
+      if (Array.isArray(array)) {
+        return array.map((item: any) => fieldPath ? item[fieldPath] : item);
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Format field value based on type
+ */
+function formatFieldValue(value: any, field: any): any {
+  if (value === null || value === undefined) {
+    return field.defaultValue || null;
+  }
+
+  switch (field.type) {
+    case 'TIMESTAMP':
+      if (typeof value === 'number') {
+        return new Date(value).toLocaleString();
+      }
+      return value;
+
+    case 'DURATION':
+      if (typeof value === 'number') {
+        // Assume milliseconds, convert to human readable
+        const seconds = Math.floor(value / 1000);
+        if (seconds < 60) return `${seconds}s`;
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}m ${remainingSeconds}s`;
+      }
+      return value;
+
+    case 'PERCENTAGE':
+      if (typeof value === 'number') {
+        return `${Math.round(value)}%`;
+      }
+      return value;
+
+    case 'NUMBER':
+    case 'INTEGER':
+    case 'DECIMAL':
+      if (typeof value === 'number' && field.format?.decimals !== undefined) {
+        return value.toFixed(field.format.decimals);
+      }
+      return value;
+
+    case 'BOOLEAN':
+      return value ? 'Yes' : 'No';
+
+    case 'STATUS':
+      // Status formatting handled by component
+      return value;
+
+    default:
+      return value;
+  }
+}
+
+/**
+ * V2 Monitor Renderer Component
+ */
+export function V2MonitorRenderer({ monitor, data, loading, error }: V2MonitorRendererProps) {
+  const config = parseDisplayConfig(monitor);
+
+  if (!config) {
+    return <MonitorError error="Invalid display configuration" />;
+  }
+
+  if (loading) {
+    return <div className={styles['monitor-loading']}>Loading...</div>;
+  }
+
+  if (error) {
+    return <MonitorError error={error} />;
+  }
+
+  // Check if we have data to display
+  const hasData = data && typeof data === 'object';
+
+  if (!hasData) {
+    return <MonitorEmpty config={config} />;
+  }
+
+  // Resolve and format field values
+  const fieldValues = config.fields?.map((field) => {
+    const value = resolveFieldValue(data, field);
+    const formattedValue = formatFieldValue(value, field);
+
+    // Determine status tone for STATUS fields
+    let statusTone = 'neutral';
+    if (field.type === 'STATUS' && field.statusMap && value != null) {
+      const stringValue = String(value);
+      const mapping = field.statusMap[stringValue];
+      statusTone = mapping?.tone || 'neutral';
+    }
+
+    return {
+      key: field.key,
+      label: field.label,
+      value: value,
+      formattedValue: formattedValue,
+      type: field.type,
+      primary: field.primary || false,
+      hidden: field.hidden || false,
+      path: field.path,
+      statusTone: field.type === 'STATUS' ? statusTone : undefined,
+      statusMap: field.statusMap,
+      order: field.order,
+    };
+  }) || [];
+
+  // Prepare array data for table components
+  let arrayData = undefined;
+  if (config.component === 'TABLE' || config.component === 'DATA_TABLE' || config.component === 'ERROR_LOG') {
+    const arrayPath = config.data?.arrayPath || '$.data';
+    if (arrayPath.startsWith('$.')) {
+      const path = arrayPath.substring(2);
+      arrayData = path.split('.').reduce((obj: any, key: string) => obj?.[key], data);
+      if (!Array.isArray(arrayData)) {
+        arrayData = [data];
+      }
+    } else {
+      arrayData = Array.isArray(data) ? data : [data];
+    }
+  }
+
+  // Render based on component type
+  switch (config.component) {
+    case 'STATUS_CARD':
+      return <StatusCardRenderer config={config} fields={fieldValues} />;
+
+    case 'SUMMARY_CARD':
+      return <SummaryCardRenderer config={config} fields={fieldValues} />;
+
+    case 'METRICS_GRID':
+      return <MetricsGridRenderer config={config} fields={fieldValues} />;
+
+    case 'PROGRESS':
+      return <ProgressRenderer config={config} fields={fieldValues} />;
+
+    case 'TABLE':
+    case 'DATA_TABLE':
+      return <TableRenderer config={config} fields={fieldValues} arrayData={arrayData} />;
+
+    case 'DETAILS':
+    case 'ERROR_LOG':
+      return <DetailsRenderer config={config} fields={fieldValues} arrayData={arrayData} rawData={data} />;
+
+    default:
+      return <SummaryCardRenderer config={config} fields={fieldValues} />;
+  }
+}
+
+export default V2MonitorRenderer;

package/src/components/import-export/artifact-groups.ts

@@ -0,0 +1,153 @@
+import type { CarbonIconType } from '@carbon/icons-react';
+import {
+    Analytics,
+    Book,
+    ChartBar,
+    ColorPalette,
+    DataBase,
+    Document,
+    Folder,
+    Group,
+    List,
+    Settings,
+    UserMultiple,
+} from '@carbon/icons-react';
+
+import { listAgeCategoriesWithGroups } from '../../resources/agegroup/agegroups.api';
+import { listDashboards } from '../../resources/dashboard/dashboard.api';
+import { listETLMonitors } from '../../resources/etl-monitor/etl-monitor.api';
+import { listETLSources } from '../../resources/etl-source/etl-source.api';
+import { listIndicators } from '../../resources/indicator/indicators.api';
+import { listLinelistReports } from '../../resources/linelist/linelist-reports.api';
+import { listReportCategories } from '../../resources/report-category/report-category.api';
+import { listReportLibraries } from '../../resources/report-library/report-library.api';
+import { listSections } from '../../resources/report-section/report-sections.api';
+import { listReports } from '../../resources/report/reports.api';
+import { listThemes } from '../../resources/theme/data-theme.api';
+
+/** Scan state of a single artifact group on the Import / Export page. */
+export type ArtifactEntry = {
+    /** Number of artifacts found, null while scanning. */
+    count: number | null;
+    status: 'loading' | 'ready' | 'empty' | 'error';
+};
+
+export type ArtifactGroupDef = {
+    key: string;
+    label: string;
+    /** Drives the Type filter and the Artifact Summary panel. */
+    kind: 'metadata' | 'reports';
+    Icon: CarbonIconType;
+    /** Resolves how many artifacts exist for this group (existing list APIs). */
+    count: (signal?: AbortSignal) => Promise<number>;
+    /** Page that manages this group's artifacts. */
+    path: string;
+};
+
+const countOf =
+    (fn: (signal?: AbortSignal) => Promise<unknown[]>) =>
+    (signal?: AbortSignal) =>
+        fn(signal).then((items) => items.length);
+
+export const ARTIFACT_GROUPS: ArtifactGroupDef[] = [
+    {
+        key: 'ageCategories',
+        label: 'Age Categories',
+        kind: 'metadata',
+        Icon: Group,
+        count: countOf(listAgeCategoriesWithGroups),
+        path: '/admin/age-categories',
+    },
+    {
+        key: 'ageGroups',
+        label: 'Age Groups',
+        kind: 'metadata',
+        Icon: UserMultiple,
+        count: (signal) =>
+            listAgeCategoriesWithGroups(signal).then((categories) =>
+                categories.reduce((sum, category) => sum + (category.ageGroups?.length ?? 0), 0),
+            ),
+        path: '/admin/age-groups',
+    },
+    {
+        key: 'categories',
+        label: 'Categories',
+        kind: 'metadata',
+        Icon: Folder,
+        count: countOf((signal) => listReportCategories(undefined, signal)),
+        path: '/admin/report-categories',
+    },
+    {
+        key: 'dashboards',
+        label: 'Dashboards',
+        kind: 'metadata',
+        Icon: ChartBar,
+        count: countOf((signal) => listDashboards(undefined, signal)),
+        path: '/admin/dashboards',
+    },
+    {
+        key: 'etlMonitors',
+        label: 'ETL Monitors',
+        kind: 'metadata',
+        Icon: Settings,
+        count: countOf((signal) => listETLMonitors(undefined, signal)),
+        path: '/admin/etl-monitors',
+    },
+    {
+        key: 'etlSources',
+        label: 'ETL Sources',
+        kind: 'metadata',
+        Icon: DataBase,
+        count: countOf((signal) => listETLSources(undefined, signal)),
+        path: '/admin/etl-sources',
+    },
+    {
+        key: 'indicators',
+        label: 'Indicators',
+        kind: 'metadata',
+        Icon: Analytics,
+        count: countOf((signal) => listIndicators(undefined, signal)),
+        path: '/indicators',
+    },
+    {
+        key: 'library',
+        label: 'Library',
+        kind: 'metadata',
+        Icon: Book,
+        count: countOf((signal) => listReportLibraries(undefined, signal)),
+        path: '/admin/report-library',
+    },
+    {
+        key: 'sections',
+        label: 'Sections',
+        kind: 'metadata',
+        Icon: List,
+        count: countOf((signal) => listSections(undefined, signal)),
+        path: '/sections',
+    },
+    {
+        key: 'themes',
+        label: 'Themes',
+        kind: 'metadata',
+        Icon: ColorPalette,
+        count: countOf((signal) => listThemes(undefined, signal)),
+        path: '/admin/themes',
+    },
+    // Reports
+    {
+        key: 'aggregateReports',
+        label: 'Aggregate Reports',
+        kind: 'reports',
+        Icon: Document,
+        count: countOf((signal) => listReports(undefined, signal)),
+        path: '/reports',
+    },
+    {
+        key: 'linelistReports',
+        label: 'Line-list Reports',
+        kind: 'reports',
+        Icon: Document,
+        count: countOf((signal) => listLinelistReports(undefined, signal)),
+        path: '/linelist',
+    },
+];