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

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

@@ -0,0 +1,284 @@
+/**
+ * Data Source Step Styles
+ */
+
+.data-source-step {
+  padding: 1.5rem;
+
+  &__header {
+    margin-bottom: 2rem;
+
+    h2 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+    }
+  }
+
+  &__description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+    line-height: 1.5;
+  }
+
+  &__auth-config {
+    padding: 0.5rem 0;
+  }
+
+  &__auth-description {
+    font-size: 0.875rem;
+    color: #6b7280;
+    padding: 0.5rem 0;
+  }
+
+  &__actions {
+    padding: 1rem 0;
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  &__test-result {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  &__test-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #16a34a;
+    font-weight: 500;
+    font-size: 0.875rem;
+
+    svg {
+      color: #22c55e;
+    }
+  }
+
+  &__test-details {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #374151;
+    font-size: 0.875rem;
+  }
+
+  &__test-time {
+    color: #6b7280;
+    font-size: 0.8125rem;
+  }
+
+  &__response-preview {
+    margin-top: 1.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  &__response-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+
+    h4 {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #374151;
+    }
+  }
+
+  &__response-code {
+    margin: 0;
+    padding: 1rem;
+    font-size: 0.8125rem;
+    color: #374151;
+    background-color: #ffffff;
+    overflow-x: auto;
+    font-family: 'IBM Plex Mono', 'Monaco', 'Courier New', monospace;
+    line-height: 1.5;
+  }
+
+  &__detected-fields {
+    margin-top: 1.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  &__detected-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+
+    h4 {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #374151;
+    }
+  }
+
+  &__detected-count {
+    font-size: 0.8125rem;
+    color: #6b7280;
+  }
+
+  &__fields-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+    background-color: #ffffff;
+
+    th {
+      text-align: left;
+      padding: 0.75rem 1rem;
+      font-weight: 600;
+      color: #374151;
+      border-bottom: 2px solid #e5e7eb;
+      background-color: #f9fafb;
+    }
+
+    td {
+      padding: 0.75rem 1rem;
+      color: #374151;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    code {
+      background-color: #f3f4f6;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+      color: #dc2626;
+      font-family: 'IBM Plex Mono', 'Monaco', 'Courier New', monospace;
+    }
+  }
+}
+
+// Dark theme support
+[data-theme='dark'] .data-source-step {
+  &__header {
+    h2 {
+      color: #f3f4f6;
+    }
+  }
+
+  &__description {
+    color: #9ca3af;
+  }
+
+  &__auth-description {
+    color: #9ca3af;
+  }
+
+  &__test-result {
+    background-color: rgba(22, 163, 74, 0.1);
+    border-color: rgba(22, 163, 74, 0.3);
+  }
+
+  &__test-details {
+    color: #d1d5db;
+  }
+
+  &__test-time {
+    color: #9ca3af;
+  }
+
+  &__response-preview,
+  &__detected-fields {
+    border-color: #374151;
+  }
+
+  &__response-header,
+  &__detected-header {
+    background-color: #1f2937;
+    border-color: #374151;
+
+    h4 {
+      color: #f3f4f6;
+    }
+  }
+
+  &__response-code {
+    color: #d1d5db;
+    background-color: #111827;
+  }
+
+  &__detected-count {
+    color: #9ca3af;
+  }
+
+  &__fields-table {
+    background-color: #1f2937;
+
+    th {
+      color: #f3f4f6;
+      background-color: #374151;
+      border-color: #4b5563;
+    }
+
+    td {
+      color: #d1d5db;
+      border-color: #374151;
+    }
+
+    code {
+      background-color: #374151;
+      color: #f87171;
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 672px) {
+  .data-source-step {
+    padding: 1rem;
+
+    &__header {
+      h2 {
+        font-size: 1.125rem;
+      }
+    }
+
+    .cds--stack.cds--stack--horizontal {
+      flex-direction: column;
+      gap: 1.5rem !important;
+
+      > div {
+        width: 100% !important;
+        flex: 1 !important;
+      }
+    }
+
+    &__test-details {
+      flex-wrap: wrap;
+    }
+
+    &__fields-table {
+      font-size: 0.8125rem;
+
+      th, td {
+        padding: 0.5rem 0.75rem;
+      }
+    }
+  }
+}

package/src/components/etl-monitor/builder/steps/design-samples.ts

@@ -0,0 +1,278 @@
+/**
+ * Sample configurations + data for the Design step option cards.
+ * Each sample renders through the real MonitorRenderer so the picker shows
+ * exactly the component (and styling) the dashboard will render.
+ */
+
+import type { DisplayConfigV2, MonitorComponentType } from '../../../../types/etl-monitor';
+
+const MINUTE = 60 * 1000;
+
+export interface DesignSample {
+  config: DisplayConfigV2;
+  data: any;
+}
+
+export function getDesignSample(type: MonitorComponentType): DesignSample {
+  switch (type) {
+    case 'STATUS_CARD':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'STATUS_CARD',
+          presentation: { title: 'ETL Module Health', description: 'ETL module is operational.' },
+          fields: [
+            {
+              key: 'status', label: 'Status', path: '$.status', type: 'STATUS', primary: true,
+              statusMap: {
+                UP: { label: 'Running', tone: 'success' },
+                DOWN: { label: 'Stopped', tone: 'critical' },
+              },
+            },
+            { key: 'lastUpdated', label: 'Last checked', path: '$.lastUpdated', type: 'TIMESTAMP' },
+          ],
+        },
+        data: { status: 'UP', lastUpdated: Date.now() - 2 * MINUTE },
+      };
+
+    case 'METRICS_GRID':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'METRICS_GRID',
+          presentation: { title: 'ETL Monitor', description: 'Current run summary' },
+          componentConfig: {
+            icon: 'chart',
+            icons: {
+              executionId: 'badge',
+              runDuration: 'clock',
+              progress: 'trend',
+              missedSchedule: 'calendar',
+            },
+            iconColors: {
+              executionId: '#24a148',
+              runDuration: '#8A3FFC',
+              progress: '#0F62FE',
+              missedSchedule: '#F1C21B',
+            },
+            valueColors: {
+              progress: '#198038',
+            },
+          },
+          fields: [
+            {
+              key: 'executionId', label: 'Execution ID', path: '$.executionId', type: 'INTEGER',
+              description: 'Run #',
+            },
+            {
+              key: 'runDuration', label: 'Run Duration', path: '$.runDuration', type: 'DURATION',
+              description: 'Duration',
+            },
+            {
+              key: 'progress', label: 'Progress', path: '$.progress', type: 'PERCENTAGE',
+              description: 'Complete',
+            },
+            {
+              key: 'missedSchedule', label: 'Missed Schedule', path: '$.missedSchedule', type: 'DURATION',
+              description: 'Behind',
+            },
+            {
+              key: 'lastUpdated', label: 'Updated', path: '$.lastUpdated', type: 'TIMESTAMP',
+            },
+          ],
+        },
+        data: {
+          executionId: 17,
+          runDuration: 8927000,
+          progress: 100,
+          missedSchedule: 5280000,
+          lastUpdated: Date.now() - 2 * MINUTE,
+        },
+      };
+
+    case 'PROGRESS':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'PROGRESS',
+          componentConfig: { stageFieldKey: 'stage' },
+          fields: [
+            { key: 'progress', label: 'Progress', path: '$.progress', type: 'PERCENTAGE', primary: true },
+            { key: 'stage', label: 'Current Stage', path: '$.stage', type: 'TEXT' },
+          ],
+        },
+        data: { progress: 100, stage: 'Completed' },
+      };
+
+    case 'TABLE':
+    case 'DATA_TABLE':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'TABLE',
+          componentConfig: {
+            maxRows: 5,
+            viewAllUrl: '#',
+            viewAllLabel: 'View all executions',
+          },
+          fields: [
+            {
+              key: 'started', label: 'Started', path: '$.started', type: 'TIMESTAMP',
+              format: { timestamp: { display: 'datetime' } },
+            },
+            { key: 'duration', label: 'Duration', path: '$.duration', type: 'DURATION' },
+            {
+              key: 'result', label: 'Result', path: '$.result', type: 'STATUS',
+              statusMap: {
+                SUCCESS: { label: 'SUCCESS', tone: 'success' },
+                FAILED: { label: 'FAILED', tone: 'critical' },
+              },
+            },
+          ],
+        },
+        data: [
+          { started: Date.now() - 60 * MINUTE, duration: 8927000, result: 'SUCCESS' },
+          { started: Date.now() - 150 * MINUTE, duration: 1523000, result: 'SUCCESS' },
+          { started: Date.now() - 300 * MINUTE, duration: 1523000, result: 'SUCCESS' },
+        ],
+      };
+
+    case 'ERROR_LOG':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'ERROR_LOG',
+          fields: [
+            {
+              key: 'time', label: 'Time', path: '$.time', type: 'TIMESTAMP',
+              format: { timestamp: { display: 'time' } },
+            },
+            {
+              key: 'severity', label: 'Severity', path: '$.severity', type: 'STATUS',
+              statusMap: {
+                CRITICAL: { label: 'CRITICAL', tone: 'critical' },
+                WARNING: { label: 'WARNING', tone: 'warning' },
+              },
+            },
+            { key: 'message', label: 'Message', path: '$.message', type: 'TEXT' },
+          ],
+        },
+        data: [
+          { time: Date.now() - 45 * MINUTE, severity: 'CRITICAL', message: 'Connection timeout' },
+          { time: Date.now() - 90 * MINUTE, severity: 'WARNING', message: 'Retry attempted' },
+        ],
+      };
+
+    case 'DETAILS':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'DETAILS',
+          fields: [
+            {
+              key: 'status', label: 'status', path: '$.status', type: 'STATUS',
+              statusMap: { UP: { label: 'UP', tone: 'success' } },
+            },
+            { key: 'module', label: 'module', path: '$.module', type: 'TEXT' },
+            { key: 'description', label: 'description', path: '$.description', type: 'TEXT' },
+            {
+              key: 'timestamp', label: 'timestamp', path: '$.timestamp', type: 'TIMESTAMP',
+              format: { timestamp: { display: 'datetime' } },
+            },
+          ],
+        },
+        data: {
+          status: 'UP',
+          module: 'ugandareportstetl',
+          description: 'Uganda Reports ETL Module',
+          timestamp: Date.now() - 5 * MINUTE,
+        },
+      };
+
+    case 'SUMMARY_CARD':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'SUMMARY_CARD',
+          fields: [
+            {
+              key: 'completionStatus', label: 'Completion Status', path: '$.completionStatus', type: 'STATUS',
+              statusMap: { SUCCESS: { label: 'SUCCESS', tone: 'success' } },
+            },
+            {
+              key: 'transactionStatus', label: 'Transaction Status', path: '$.transactionStatus', type: 'STATUS',
+              statusMap: { COMPLETED: { label: 'COMPLETED', tone: 'success' } },
+            },
+          ],
+        },
+        data: { completionStatus: 'SUCCESS', transactionStatus: 'COMPLETED' },
+      };
+
+    case 'LOG':
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'LOG',
+          componentConfig: { maxRows: 5 },
+          fields: [
+            {
+              key: 'time', label: 'Time', path: '$.time', type: 'TIMESTAMP',
+              format: { timestamp: { display: 'time' } },
+            },
+            { key: 'event', label: 'Event', path: '$.event', type: 'TEXT' },
+          ],
+        },
+        data: [
+          { time: Date.now() - 40 * MINUTE, event: 'Execution started' },
+          { time: Date.now() - 32 * MINUTE, event: 'Data extraction completed' },
+          { time: Date.now() - 18 * MINUTE, event: 'Transformation completed' },
+          { time: Date.now() - 5 * MINUTE, event: 'Load completed' },
+        ],
+      };
+
+    case 'TIME_SERIES': {
+      const now = Date.now();
+      const values = [
+        8920000, 8610000, 8360000, 8480000, 8120000, 8240000,
+        8900000, 9250000, 9030000, 8927000,
+      ];
+      const series = values.map((value, i) => ({
+        time: now - (values.length - 1 - i) * 36 * MINUTE,
+        value,
+      }));
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'TIME_SERIES',
+          presentation: { title: 'Execution Duration' },
+          componentConfig: {
+            icons: { duration: 'timer' },
+            deltaLabel: 'vs previous period',
+          },
+          fields: [
+            {
+              key: 'time', label: 'Time', path: '$.time', type: 'TIMESTAMP',
+              format: { timestamp: { display: 'time' } },
+            },
+            { key: 'value', label: 'Duration', path: '$.value', type: 'DURATION', primary: true },
+          ],
+        },
+        data: series,
+      };
+    }
+
+    default:
+      return {
+        config: {
+          schemaVersion: 2,
+          component: 'TIME_SERIES',
+          fields: [
+            { key: 'average', label: 'Average', path: '$.average', type: 'TEXT' },
+            { key: 'max', label: 'Max', path: '$.max', type: 'TEXT' },
+            { key: 'trend', label: 'Trend', path: '$.trend', type: 'TEXT' },
+          ],
+        },
+        data: { average: '2.3s', max: '5.1s', trend: '↑ 12%' },
+      };
+  }
+}