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

package/src/views/etl-monitor-builder/add-monitor-modal.component.tsx

@@ -0,0 +1,210 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  Button,
+  TextInput,
+  TextArea,
+  Select,
+  SelectItem,
+  Layer,
+  Tag,
+} from '@carbon/react';
+import { Play, Close } from '@carbon/icons-react';
+import styles from './add-monitor-modal.component.scss';
+
+interface AddMonitorModalProps {
+  onClose: () => void;
+  onSave: () => void;
+}
+
+const MONITOR_TYPES = [
+  { value: 'CUSTOM_SQL', label: 'Custom SQL' },
+  { value: 'BASE_INDICATOR', label: 'Base Indicator' },
+  { value: 'STATUS_CARD', label: 'Status Card' },
+  { value: 'METRICS_GRID', label: 'Metrics Grid' },
+  { value: 'PROGRESS', label: 'Progress' },
+  { value: 'TABLE', label: 'Table' },
+  { value: 'DETAILS', label: 'Details' },
+];
+
+export const AddMonitorModal: React.FC<AddMonitorModalProps> = ({ onClose, onSave }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    monitorType: 'CUSTOM_SQL',
+    sqlQuery: '',
+    description: '',
+    tags: [] as string[],
+  });
+
+  const [tagInput, setTagInput] = useState('');
+  const [queryResults, setQueryResults] = useState<any>(null);
+  const [isRunningQuery, setIsRunningQuery] = useState(false);
+
+  const handleRunQuery = async () => {
+    if (!formData.sqlQuery.trim()) {
+      return;
+    }
+
+    setIsRunningQuery(true);
+    try {
+      // TODO: Implement actual query execution
+      // For now, simulate a delay and show placeholder results
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setQueryResults({ success: true, data: [] });
+    } catch (error) {
+      setQueryResults({ success: false, error: 'Query failed' });
+    } finally {
+      setIsRunningQuery(false);
+    }
+  };
+
+  const handleAddTag = () => {
+    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
+      setFormData({ ...formData, tags: [...formData.tags, tagInput.trim()] });
+      setTagInput('');
+    }
+  };
+
+  const handleSave = async () => {
+    // TODO: Implement actual save logic
+    console.log('Saving monitor:', formData);
+    await onSave();
+  };
+
+  const isFormValid = formData.name.trim() && formData.sqlQuery.trim();
+
+  return (
+    <Modal
+      open
+      onRequestClose={onClose}
+      size="lg"
+      className={styles.modal}
+      modalHeading=""
+      preventCloseOnClickOutside
+    >
+      <div className={styles.modalHeader}>
+        <h2 className={styles.modalTitle}>Add New Monitor</h2>
+        <Button
+          kind="ghost"
+          renderIcon={Close}
+          iconDescription="Close"
+          onClick={onClose}
+          hasIconOnly
+        />
+      </div>
+
+      <ModalBody className={styles.modalBody}>
+        <Layer className={styles.formGroup}>
+          <label className={styles.label}>Monitor Name</label>
+          <TextInput
+            id="monitorName"
+            placeholder="Enter monitor name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            labelText=""
+          />
+        </Layer>
+
+        <Layer className={styles.formGroup}>
+          <label className={styles.label}>Monitor Type</label>
+          <Select
+            id="monitorType"
+            labelText=""
+            value={formData.monitorType}
+            onChange={(e) => setFormData({ ...formData, monitorType: e.target.value })}
+          >
+            {MONITOR_TYPES.map((type) => (
+              <SelectItem key={type.value} value={type.value} text={type.label}>
+                {type.label}
+              </SelectItem>
+            ))}
+          </Select>
+        </Layer>
+
+        <Layer className={styles.formGroup}>
+          <label className={styles.label}>SQL Query</label>
+          <TextArea
+            id="sqlQuery"
+            placeholder="Enter your SQL query here..."
+            value={formData.sqlQuery}
+            onChange={(e) => setFormData({ ...formData, sqlQuery: e.target.value })}
+            labelText=""
+            rows={6}
+            className={styles.sqlTextArea}
+          />
+          <div className={styles.queryActions}>
+            <Button
+              kind="tertiary"
+              renderIcon={Play}
+              onClick={handleRunQuery}
+              disabled={!formData.sqlQuery.trim() || isRunningQuery}
+              size="sm"
+            >
+              {isRunningQuery ? 'Running...' : 'Run Query'}
+            </Button>
+          </div>
+          {queryResults && (
+            <div className={styles.queryResults}>
+              {queryResults.success ? (
+                <p className={styles.successText}>✓ Query executed successfully</p>
+              ) : (
+                <p className={styles.errorText}>✗ Query failed: {queryResults.error}</p>
+              )}
+            </div>
+          )}
+        </Layer>
+
+        <Layer className={styles.formGroup}>
+          <label className={styles.label}>Description</label>
+          <TextArea
+            id="description"
+            placeholder="Enter description..."
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            labelText=""
+            rows={3}
+          />
+        </Layer>
+
+        <Layer className={styles.formGroup}>
+          <label className={styles.label}>Tags</label>
+          <div className={styles.tagInputContainer}>
+            <TextInput
+              id="tags"
+              placeholder="Enter tags separated by commas"
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ',') {
+                  e.preventDefault();
+                  handleAddTag();
+                }
+              }}
+              labelText=""
+            />
+          </div>
+          {formData.tags.length > 0 && (
+            <div className={styles.tagsContainer}>
+              {formData.tags.map((tag) => (
+                <Tag key={tag} type="cool-gray">
+                  {tag}
+                </Tag>
+              ))}
+            </div>
+          )}
+        </Layer>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <Button kind="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button kind="primary" onClick={handleSave} disabled={!isFormValid}>
+          Create Monitor
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};

package/src/views/etl-monitor-builder/etl-monitor-builder.component.scss

@@ -0,0 +1,157 @@
+@import '~@openmrs/esm-styleguide/src/variables.scss';
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-10;
+  min-height: 300px;
+}
+
+.emptyStateContent {
+  text-align: center;
+  max-width: 400px;
+}
+
+.emptyStateTitle {
+  @include carbon--type-style('productive-heading-03');
+  color: $text-01;
+  margin: 0 0 $spacing-03 0;
+}
+
+.emptyStateBody {
+  @include carbon--type-style('productive-body-01');
+  color: $text-02;
+  margin: 0 0 $spacing-05 0;
+}
+
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: $spacing-05;
+  background-color: $ui-01;
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-07;
+  padding: $spacing-06 $spacing-08;
+  background: $ui-01;
+  border-radius: 8px;
+}
+
+.headerContent {
+  flex: 1;
+}
+
+.title {
+  @include carbon--type-style('productive-heading-05');
+  color: $text-01;
+  margin: 0 0 $spacing-03 0;
+  font-weight: 600;
+}
+
+.subtitle {
+  @include carbon--type-style('productive-body-01');
+  color: $text-02;
+  margin: 0;
+  max-width: 600px;
+}
+
+.searchBar {
+  margin-bottom: $spacing-06;
+  padding: 0 $spacing-08;
+}
+
+.searchInputWrapper {
+  display: flex;
+  align-items: center;
+  background: $field-01;
+  border: 1px solid $ui-04;
+  border-radius: 4px;
+  padding: 0 $spacing-05;
+  max-width: 500px;
+  transition: border-color 0.2s;
+
+  &:focus-within {
+    border-color: $focus;
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.2);
+  }
+}
+
+.searchIcon {
+  color: $text-03;
+  margin-right: $spacing-03;
+}
+
+.searchInput {
+  border: none;
+  background: transparent;
+  padding: $spacing-04 0;
+  font-size: 0.875rem;
+  width: 100%;
+  outline: none;
+  color: $text-01;
+
+  &::placeholder {
+    color: $text-03;
+  }
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  color: $text-03;
+}
+
+/* Table Styles */
+.nameCell {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-01;
+}
+
+.monitorName {
+  @include carbon--type-style('productive-body-01');
+  color: $text-01;
+  font-weight: 500;
+}
+
+.monitorDescription {
+  @include carbon--type-style('label-01');
+  color: $text-03;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+.statusCell {
+  display: flex;
+  align-items: center;
+  gap: $spacing-03;
+}
+
+.statusDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.statusText {
+  @include carbon--type-style('productive-body-01');
+  color: $text-01;
+}
+
+.actionsCell {
+  display: flex;
+  align-items: center;
+  gap: $spacing-02;
+}

package/src/views/etl-monitor-builder/etl-monitor-builder.component.tsx

@@ -0,0 +1,252 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Button,
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Tooltip,
+  Layer,
+} from '@carbon/react';
+import { Add, Edit, Delete, Search } from '@carbon/icons-react';
+import { AddMonitorModal } from './add-monitor-modal.component';
+import { useETLMonitorBuilder } from './etl-monitor-builder.store';
+import styles from './etl-monitor-builder.component.scss';
+
+interface EmptyStateProps {
+  header: string;
+  body: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ header, body, action }) => (
+  <div className={styles.emptyState}>
+    <div className={styles.emptyStateContent}>
+      <h3 className={styles.emptyStateTitle}>{header}</h3>
+      <p className={styles.emptyStateBody}>{body}</p>
+      {action && (
+        <Button kind="primary" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
+    </div>
+  </div>
+);
+
+export const ETLMonitorBuilder: React.FC = () => {
+  const { monitors, loading, error, deleteMonitor, fetchMonitors } = useETLMonitorBuilder();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredMonitors = useMemo(() => {
+    if (!searchQuery) return monitors;
+    return monitors.filter(
+      (monitor) =>
+        monitor.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        monitor.description?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [monitors, searchQuery]);
+
+  const handleDelete = async (monitorId: string) => {
+    if (confirm('Are you sure you want to delete this monitor?')) {
+      await deleteMonitor(monitorId);
+      await fetchMonitors();
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'active':
+        return '#198038'; // green
+      case 'inactive':
+        return '#8d8d8d'; // gray
+      case 'error':
+        return '#da1e28'; // red
+      default:
+        return '#0f62fe'; // blue
+    }
+  };
+
+  const getMonitorTypeLabel = (type: string) => {
+    const typeLabels: Record<string, string> = {
+      CUSTOM_SQL: 'Custom SQL',
+      BASE_INDICATOR: 'Base Indicator',
+      STATUS_CARD: 'Status Card',
+      METRICS_GRID: 'Metrics Grid',
+      PROGRESS: 'Progress',
+      TABLE: 'Table',
+      DETAILS: 'Details',
+    };
+    return typeLabels[type] || type;
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <p>Loading monitors...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <EmptyState
+        header="Error loading monitors"
+        body={error}
+        action={{
+          label: 'Retry',
+          onClick: () => fetchMonitors(),
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {/* Header Section */}
+      <div className={styles.header}>
+        <div className={styles.headerContent}>
+          <h1 className={styles.title}>ETL Monitor Builder</h1>
+          <p className={styles.subtitle}>
+            Create and manage custom ETL monitors to track your data pipelines and system health
+          </p>
+        </div>
+        <Button kind="primary" renderIcon={Add} onClick={() => setIsModalOpen(true)}>
+          New Monitor
+        </Button>
+      </div>
+
+      {/* Search Bar */}
+      <div className={styles.searchBar}>
+        <div className={styles.searchInputWrapper}>
+          <Search size={16} className={styles.searchIcon} />
+          <input
+            type="text"
+            placeholder="Search monitors by name, description, or tags..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className={styles.searchInput}
+          />
+        </div>
+      </div>
+
+      {/* Monitors Table */}
+      {filteredMonitors.length === 0 ? (
+        <EmptyState
+          header="No monitors found"
+          body={
+            searchQuery
+              ? 'Try adjusting your search criteria'
+              : 'Get started by creating your first ETL monitor'
+          }
+          action={
+            !searchQuery
+              ? {
+                  label: 'Create Monitor',
+                  onClick: () => setIsModalOpen(true),
+                }
+              : undefined
+          }
+        />
+      ) : (
+        <Layer>
+          <DataTable
+            rows={filteredMonitors.map((monitor) => ({
+              id: monitor.uuid,
+              name: (
+                <div className={styles.nameCell}>
+                  <span className={styles.monitorName}>{monitor.name}</span>
+                  {monitor.description && (
+                    <Tooltip align="bottom" label={monitor.description}>
+                      <span className={styles.monitorDescription}>{monitor.description}</span>
+                    </Tooltip>
+                  )}
+                </div>
+              ),
+              type: getMonitorTypeLabel(monitor.monitorType),
+              status: (
+                <div className={styles.statusCell}>
+                  <span
+                    className={styles.statusDot}
+                    style={{ backgroundColor: getStatusColor(monitor.active ? 'active' : 'inactive') }}
+                  />
+                  <span className={styles.statusText}>{monitor.active ? 'Active' : 'Inactive'}</span>
+                </div>
+              ),
+              updated: monitor.dateChanged
+                ? new Date(monitor.dateChanged).toLocaleDateString()
+                : '-',
+              actions: (
+                <div className={styles.actionsCell}>
+                  <Button
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={Edit}
+                    iconDescription="Edit"
+                    hasIconOnly
+                    onClick={() => {/* TODO: Implement edit */}}
+                  />
+                  <Button
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={Delete}
+                    iconDescription="Delete"
+                    hasIconOnly
+                    onClick={() => handleDelete(monitor.uuid)}
+                  />
+                </div>
+              ),
+            }))}
+            headers={[
+              { key: 'name', header: 'Name' },
+              { key: 'type', header: 'Type' },
+              { key: 'status', header: 'Status' },
+              { key: 'updated', header: 'Last Updated' },
+              { key: 'actions', header: 'Actions' },
+            ]}
+          >
+            {({ rows, headers, getHeaderProps, getTableProps }) => (
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header, i) => (
+                      <TableHeader key={i} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell, i) => (
+                        <TableCell key={i}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </DataTable>
+        </Layer>
+      )}
+
+      {/* Add Monitor Modal */}
+      {isModalOpen && (
+        <AddMonitorModal
+          onClose={() => setIsModalOpen(false)}
+          onSave={async () => {
+            await fetchMonitors();
+            setIsModalOpen(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};