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

package/src/components/admin/etl-sources-page.component.tsx

@@ -0,0 +1,355 @@
+import React from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableHeader,
+  DataTableSkeleton,
+  InlineNotification,
+  Modal,
+  Search,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextArea,
+  TextInput,
+  Toggle,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/icons-react';
+import Header from '../shared/header/header.component';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+import {
+  createETLSource,
+  deleteETLSource,
+  ETLSourceDto,
+  listETLSources,
+  SaveETLSourcePayload,
+  updateETLSource,
+} from '../../resources/etl-source/etl-source.api';
+
+type FormState = {
+  name: string;
+  code: string;
+  description: string;
+  tablePatterns: string;
+  schemaName: string;
+  sourceType: string;
+  active: boolean;
+};
+
+const headers: DataTableHeader[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'code', header: 'Code' },
+  { key: 'schemaName', header: 'Schema' },
+  { key: 'sourceType', header: 'Source Type' },
+  { key: 'status', header: 'Status' },
+  { key: 'actions', header: 'Actions' },
+];
+
+const emptyForm: FormState = {
+  name: '',
+  code: '',
+  description: '',
+  tablePatterns: '',
+  schemaName: '',
+  sourceType: '',
+  active: true,
+};
+
+export default function ETLSourcesPage() {
+  const { has: hasPrivilege } = useReportBuilderPrivileges();
+  const canEditSource = hasPrivilege(RB.ETLSOURCE_ADD, RB.ETLSOURCE_EDIT);
+  const canDeleteSource = hasPrivilege(RB.ETLSOURCE_PURGE);
+  const [q, setQ] = React.useState('');
+  const [rows, setRows] = React.useState<ETLSourceDto[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [open, setOpen] = React.useState(false);
+  const [mode, setMode] = React.useState<'create' | 'edit'>('create');
+  const [editing, setEditing] = React.useState<ETLSourceDto | null>(null);
+  const [form, setForm] = React.useState<FormState>(emptyForm);
+  const [saving, setSaving] = React.useState(false);
+
+  const load = React.useCallback(async (signal?: AbortSignal) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listETLSources(q, signal);
+      setRows(data);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to load ETL sources');
+    } finally {
+      setLoading(false);
+    }
+  }, [q]);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    load(ac.signal);
+    return () => ac.abort();
+  }, [load]);
+
+  const openCreate = () => {
+    setMode('create');
+    setEditing(null);
+    setForm(emptyForm);
+    setOpen(true);
+  };
+
+  const openEdit = (row: ETLSourceDto) => {
+    setMode('edit');
+    setEditing(row);
+    setForm({
+      name: row.name ?? '',
+      code: row.code ?? '',
+      description: row.description ?? '',
+      tablePatterns: row.tablePatterns ?? '',
+      schemaName: row.schemaName ?? '',
+      sourceType: row.sourceType ?? '',
+      active: row.active ?? true,
+    });
+    setOpen(true);
+  };
+
+  const onSave = async () => {
+    if (!form.name.trim()) return;
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload: SaveETLSourcePayload = {
+        name: form.name.trim(),
+        code: form.code.trim() || undefined,
+        description: form.description.trim() || undefined,
+        tablePatterns: form.tablePatterns.trim() || undefined,
+        schemaName: form.schemaName.trim() || undefined,
+        sourceType: form.sourceType.trim() || undefined,
+        active: form.active,
+      };
+
+      if (mode === 'create') {
+        await createETLSource(payload);
+      } else if (editing?.uuid) {
+        await updateETLSource(editing.uuid, payload);
+      }
+
+      setOpen(false);
+      const ac = new AbortController();
+      await load(ac.signal);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to save ETL source');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const onDelete = async (row: ETLSourceDto) => {
+    if (!row?.uuid) return;
+    const yes = window.confirm(`Retire ETL source "${row.name}"?`);
+    if (!yes) return;
+
+    try {
+      await deleteETLSource(row.uuid);
+      const ac = new AbortController();
+      await load(ac.signal);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to retire ETL source');
+    }
+  };
+
+  const tableRows = rows.map((row) => ({
+    id: row.uuid,
+    name: row.name,
+    code: row.code || '—',
+    schemaName: row.schemaName || '—',
+    sourceType: row.sourceType || '—',
+    status: row.active === false || row.voided ? 'Inactive' : 'Active',
+    actions: '',
+  }));
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="ETL Sources"
+        subtitle="Manage ETL source definitions used by the report builder."
+        actions={
+          canEditSource ? (
+            <Button data-testid="etl-source-new" size="sm" renderIcon={Add} onClick={openCreate}>
+              New ETL Source
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <div style={{ padding: '0 1rem 1rem', display: 'grid', gap: '1rem' }}>
+        <Search
+          data-testid="etl-source-search"
+          size="lg"
+          labelText="Search"
+          placeholder="Search ETL sources…"
+          value={q}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+        />
+
+        {error ? <InlineNotification lowContrast kind="error" title="Error" subtitle={error} /> : null}
+
+        {loading ? (
+          <DataTableSkeleton rowCount={5} columnCount={6} showHeader={false} showToolbar={false} />
+        ) : (
+          <DataTable rows={tableRows} headers={headers}>
+            {({ rows: dtRows, headers, getHeaderProps, getRowProps }) => (
+              <TableContainer>
+                <Table useZebraStyles>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {dtRows.map((row) => {
+                      const original = rows.find((r) => r.uuid === row.id);
+                      return (
+                        <TableRow key={row.id} {...getRowProps({ row })}>
+                          <TableCell>{row.cells[0].value}</TableCell>
+                          <TableCell>{row.cells[1].value}</TableCell>
+                          <TableCell>{row.cells[2].value}</TableCell>
+                          <TableCell>{row.cells[3].value}</TableCell>
+                          <TableCell>
+                            {(original?.active === false || original?.voided) ? (
+                              <Tag type="gray">Inactive</Tag>
+                            ) : (
+                              <Tag type="green">Active</Tag>
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                              {canEditSource && (
+                                <Button
+                                  kind="ghost"
+                                  size="sm"
+                                  renderIcon={Edit}
+                                  iconDescription="Edit"
+                                  hasIconOnly
+                                  onClick={() => original && openEdit(original)}
+                                />
+                              )}
+                              {canDeleteSource && (
+                                <Button
+                                  kind="ghost"
+                                  size="sm"
+                                  renderIcon={TrashCan}
+                                  iconDescription="Retire"
+                                  hasIconOnly
+                                  onClick={() => original && onDelete(original)}
+                                />
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        )}
+      </div>
+
+      <Modal
+        open={open}
+        modalHeading={mode === 'create' ? 'New ETL Source' : 'Edit ETL Source'}
+        data-testid="etl-source-modal"
+        primaryButtonText={saving ? 'Saving…' : 'Save'}
+        secondaryButtonText="Cancel"
+        onRequestClose={() => !saving && setOpen(false)}
+        onRequestSubmit={onSave}
+        primaryButtonDisabled={saving || !form.name.trim()}
+      >
+        <Stack gap={5}>
+          <TextInput
+            id="etl-source-name"
+            data-testid="etl-source-name"
+            labelText="Name"
+            value={form.name}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, name: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-code"
+            data-testid="etl-source-code"
+            labelText="Code"
+            value={form.code}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, code: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-schema"
+            data-testid="etl-source-schema"
+            labelText="Schema Name"
+            value={form.schemaName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, schemaName: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-type"
+            data-testid="etl-source-type"
+            labelText="Source Type"
+            value={form.sourceType}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, sourceType: e.target.value }))
+            }
+          />
+
+          <TextArea
+            id="etl-source-description"
+            data-testid="etl-source-description"
+            labelText="Description"
+            rows={3}
+            value={form.description}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setForm((prev) => ({ ...prev, description: e.target.value }))
+            }
+          />
+
+          <TextArea
+            id="etl-source-table-patterns"
+            data-testid="etl-source-table-patterns"
+            labelText="Table Patterns"
+            helperText="Store table matching patterns as text."
+            rows={4}
+            value={form.tablePatterns}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setForm((prev) => ({ ...prev, tablePatterns: e.target.value }))
+            }
+          />
+
+          <Toggle
+            id="etl-source-active"
+            labelText="Active"
+            toggled={form.active}
+            onToggle={(checked: boolean) => setForm((prev) => ({ ...prev, active: checked }))}
+          />
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}

package/src/components/admin/etl-tasks-page.component.scss

@@ -0,0 +1,370 @@
+.page {
+  display: grid;
+  gap: 1.5rem;
+  padding: 0 1rem 2rem;
+}
+
+/* KPI strip — one line, equal widths that shrink as cards are added */
+.kpiGrid {
+  display: grid;
+  gap: 1rem;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(200px, 1fr);
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+
+.kpiCard {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: var(--cds-layer, #fff);
+  border: 1px solid var(--cds-border-subtle, #dee3ed);
+  border-radius: 8px;
+}
+
+.kpiIcon {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.kpiIconhealthy {
+  background: #ebfff0;
+  color: #009e47;
+}
+
+.kpiIconinfo {
+  background: var(--cds-layer-accent, #edf5ff);
+  color: var(--cds-link, #0f62fe);
+}
+
+.kpiIcondanger {
+  background: #fff1f1;
+  color: #da1e28;
+}
+
+.kpiIconneutral {
+  background: var(--cds-layer-accent, #edf0f4);
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.kpiText {
+  display: grid;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.kpiLabel {
+  font-size: 0.75rem;
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.kpiValue {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--cds-text-primary, #0a142e);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kpiSubtext {
+  font-size: 0.6875rem;
+  color: var(--cds-text-secondary, #525e78);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Toolbar */
+.toolbarControls {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.searchBox {
+  width: 220px;
+}
+
+/* Status filter tabs */
+.filterTabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #dee3ed);
+}
+
+.filterTab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  font-size: 0.8125rem;
+  color: var(--cds-text-secondary, #525e78);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--cds-text-primary, #0a142e);
+  }
+}
+
+.filterTabActive {
+  border-bottom-color: var(--cds-border-brand, #0f62fe);
+  color: var(--cds-text-primary, #0a142e);
+  font-weight: 600;
+}
+
+.countChip {
+  padding: 0 0.375rem;
+  border-radius: 8px;
+  background: var(--cds-layer-accent, #edf0f4);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+/* Live Execution empty state */
+.liveEmpty {
+  display: grid;
+  justify-items: center;
+  gap: 0.375rem;
+  padding: 2.5rem 2rem;
+  border: 1px solid var(--cds-border-subtle, #dee3ed);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.liveEmptyTitle {
+  margin: 0.5rem 0 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--cds-text-primary, #0a142e);
+}
+
+.liveEmptyHint {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--cds-text-secondary, #525e78);
+
+  strong {
+    color: var(--cds-text-primary, #0a142e);
+  }
+}
+
+.sectionHeading {
+  margin-bottom: 1rem;
+}
+
+.monitorsGrid {
+  display: grid;
+  gap: 1rem;
+  grid-auto-flow: column;
+  /* One row: every monitor shares the width equally, shrinking as the count
+     grows; below 220px the row scrolls instead of crushing the widgets */
+  grid-auto-columns: minmax(220px, 1fr);
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+
+.monitorMissingCard {
+  display: grid;
+  align-content: start;
+  gap: 0.375rem;
+  padding: 1.5rem;
+  border: 1px dashed var(--cds-border-subtle, #dee3ed);
+  border-radius: 8px;
+}
+
+.monitorMissingTitle {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cds-text-primary, #0a142e);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.monitorMissingHint {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.toolbarHeading {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--cds-text-primary, #0a142e);
+}
+
+.toolbarSubtext {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.tasksGrid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media (max-width: 67rem) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.taskCard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: var(--cds-layer, #fff);
+  border: 1px solid var(--cds-border-subtle, #dee3ed);
+  border-radius: 8px;
+}
+
+.cardHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.cardIcon {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: var(--cds-layer-accent, #edf5ff);
+  color: var(--cds-link, #0f62fe);
+}
+
+.cardIconMuted {
+  background: var(--cds-layer-accent, #edf0f4);
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.cardHeadText {
+  min-width: 0;
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--cds-text-primary, #0a142e);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardDescription {
+  margin: 0.375rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--cds-text-secondary, #525e78);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusPill {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.statusPillActive {
+  background: #ebfff0;
+  color: #009e47;
+}
+
+.statusPillInactive {
+  background: var(--cds-layer-accent, #edf0f4);
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.statusPillUnknown {
+  background: var(--cds-layer-accent, #edf0f4);
+  color: var(--cds-text-secondary, #525e78);
+  font-style: italic;
+}
+
+.metaRow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--cds-border-subtle, #dee3ed);
+}
+
+.metaItem {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.metaLabel {
+  font-size: 0.6875rem;
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.metaValue {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cds-text-primary, #0a142e);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.monitorMissing {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--cds-text-secondary, #525e78);
+}
+
+.executingStatus {
+  padding: 0.5rem 0 0;
+}
+
+.emptyState {
+  display: grid;
+  justify-items: center;
+  padding: 3rem 2rem;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.emptyStateIcon {
+  color: var(--cds-icon-secondary, #525e78);
+}