Alert Rule Threshold Builder — Live-Validated Monitoring Rule Form with Sentence Preview

<div class="demo">
  <div class="rule-card">
    <h3>New alert rule</h3>

    <div class="rule-row">
      <label>Metric</label>
      <select id="metricSelect">
        <option value="cpu" data-unit="%" data-max="100">CPU usage</option>
        <option value="latency" data-unit="ms" data-max="5000">P95 latency</option>
        <option value="errors" data-unit="/min" data-max="1000">Error rate</option>
        <option value="disk" data-unit="%" data-max="100">Disk usage</option>
      </select>
    </div>

    <div class="rule-row">
      <label>Condition</label>
      <select id="operatorSelect">
        <option value="above">is above</option>
        <option value="below">is below</option>
      </select>
    </div>

    <div class="rule-row">
      <label>Threshold</label>
      <div class="threshold-input">
        <input type="number" id="thresholdInput" value="85" min="0" />
        <span class="unit" id="unitLabel">%</span>
      </div>
    </div>

    <div class="rule-row">
      <label>For at least</label>
      <select id="durationSelect">
        <option value="1">1 minute</option>
        <option value="5" selected>5 minutes</option>
        <option value="15">15 minutes</option>
        <option value="60">1 hour</option>
      </select>
    </div>

    <div class="rule-row">
      <label>Notify</label>
      <select id="channelSelect">
        <option value="#on-call-eng">#on-call-eng (Slack)</option>
        <option value="#platform-alerts">#platform-alerts (Slack)</option>
        <option value="pagerduty">PagerDuty escalation</option>
      </select>
    </div>

    <div class="preview" id="preview" role="status" aria-live="polite"></div>

    <div class="rule-errors" id="ruleErrors" role="alert"></div>

    <button class="save-btn" id="saveBtn">Save alert rule</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.rule-card { width: 360px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
h3 { font-size: 14.5px; font-weight: 800; color: #111827; }

.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule-row label { font-size: 12.5px; font-weight: 600; color: #64748b; flex-shrink: 0; }
.rule-row select { flex: 1; max-width: 200px; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 12.5px; font-family: inherit; color: #111827; background: #fff; }
.rule-row select:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

.threshold-input { flex: 1; max-width: 200px; display: flex; align-items: center; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.threshold-input input { flex: 1; border: none; padding: 8px 10px; font-size: 12.5px; font-family: inherit; width: 0; }
.threshold-input input:focus-visible { outline: none; }
.threshold-input:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.threshold-input .unit { padding: 0 10px; font-size: 11.5px; font-weight: 700; color: #94a3b8; background: #f8fafc; align-self: stretch; display: flex; align-items: center; }

.preview { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #3730a3; line-height: 1.6; font-weight: 600; }

.rule-errors { font-size: 11.5px; color: #dc2626; font-weight: 600; min-height: 1px; }

.save-btn { background: #4f46e5; color: #fff; border: none; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.save-btn:hover { background: #4338ca; }
.save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

const metricSelect = document.getElementById('metricSelect');
const operatorSelect = document.getElementById('operatorSelect');
const thresholdInput = document.getElementById('thresholdInput');
const unitLabel = document.getElementById('unitLabel');
const durationSelect = document.getElementById('durationSelect');
const channelSelect = document.getElementById('channelSelect');
const preview = document.getElementById('preview');
const ruleErrors = document.getElementById('ruleErrors');
const saveBtn = document.getElementById('saveBtn');

const metricLabels = {
  cpu: 'CPU usage',
  latency: 'P95 latency',
  errors: 'Error rate',
  disk: 'Disk usage',
};

const durationLabels = {
  '1': '1 minute',
  '5': '5 minutes',
  '15': '15 minutes',
  '60': '1 hour',
};

function currentMetricOption() {
  return metricSelect.options[metricSelect.selectedIndex];
}

function syncUnit() {
  const opt = currentMetricOption();
  unitLabel.textContent = opt.dataset.unit;
  thresholdInput.max = opt.dataset.max;
}

function validate() {
  const errors = [];
  const value = Number(thresholdInput.value);
  const max = Number(currentMetricOption().dataset.max);

  if (thresholdInput.value === '' || Number.isNaN(value)) {
    errors.push('Threshold must be a number.');
  } else if (value < 0) {
    errors.push('Threshold cannot be negative.');
  } else if (value > max) {
    errors.push(`Threshold cannot exceed ${max}${currentMetricOption().dataset.unit} for this metric.`);
  }

  return errors;
}

function render() {
  syncUnit();
  const errors = validate();
  ruleErrors.textContent = errors.join(' ');
  saveBtn.disabled = errors.length > 0;

  if (errors.length === 0) {
    const metric = metricLabels[metricSelect.value];
    const op = operatorSelect.value === 'above' ? 'is above' : 'is below';
    const unit = currentMetricOption().dataset.unit;
    const duration = durationLabels[durationSelect.value];
    const channel = channelSelect.options[channelSelect.selectedIndex].textContent;
    preview.textContent = `Alert when ${metric} ${op} ${thresholdInput.value}${unit} for at least ${duration} → notify ${channel}`;
  } else {
    preview.textContent = 'Fix the errors below to preview this rule.';
  }
}

[metricSelect, operatorSelect, thresholdInput, durationSelect, channelSelect].forEach((el) => {
  el.addEventListener('input', render);
  el.addEventListener('change', render);
});

saveBtn.addEventListener('click', () => {
  if (saveBtn.disabled) return;
  saveBtn.textContent = 'Rule saved ✓';
  setTimeout(() => { saveBtn.textContent = 'Save alert rule'; }, 1400);
});

render();