Threshold Configurator

Monitoring

Configuration

Enterprise

Visual rule builder for configuring exception detection thresholds. Define metrics, conditions, time windows, severity levels, and notification channels with real-time testing.

Preview

Build and test threshold rules with instant feedback

Threshold Configuration

Define rules for exception detection

Metric

Condition

Threshold Value

Time Window

Alert Severity

Notification Channels

Rule Preview

Alert when [metric] is greater than [value] for 15m

Pre-configured Rule

Start with pre-filled configuration values

Threshold Configuration

Define rules for exception detection

Metric

Condition

Threshold Value

Time Window

Alert Severity

Notification Channels

Rule Preview

Alert when Response Time is greater than 500 for 15m

Configuration Options

Available operators, time windows, severities, and channels

Operators

> Greater than
< Less than
>= Greater or equal
<= Less or equal

Time Windows

5m, 15m, 30m
1h, 4h, 1d

Severities

Critical
Warning
Attention
Info

Channels

Email
Slack
SMS
Push

Props

ThresholdConfigurator component API reference

Prop	Type	Default	Description
`metrics`	`Metric[]`	`Default metrics`	Available metrics to configure thresholds for
`initialValues`	`Partial<ThresholdConfig>`	—	Initial configuration values to pre-populate the form
`onSave`	`(config: ThresholdConfig) => void`	—	Callback when the save button is clicked
`onTest`	`(config: ThresholdConfig) => TestResult \| Promise<TestResult>`	—	Callback for testing the rule against current metrics
`className`	`string`	—	Additional CSS classes

Metric Type

interface Metric {
  id: string           // Unique identifier
  name: string         // Display name
  currentValue?: number // Current value for testing
}

ThresholdConfig Type

interface ThresholdConfig {
  metric: string       // Selected metric ID
  operator: string     // Comparison operator (>, <, >=, <=)
  threshold: string    // Threshold value
  timeWindow: string   // Time window (5m, 15m, 30m, 1h, 4h, 1d)
  severity: string     // Alert severity (critical, warning, attention, info)
  channels: string[]   // Notification channels (email, slack, sms, push)
}

TestResult Type

interface TestResult {
  triggered: boolean   // Whether the threshold would trigger
  currentValue: number // Current value used for testing
}

Usage

Import and implementation example

import { ThresholdConfigurator, type Metric, type ThresholdConfig } from '@/blocks/monitoring/threshold-configurator'

const metrics: Metric[] = [
  { id: 'response-time', name: 'Response Time', currentValue: 245 },
  { id: 'memory', name: 'Memory Usage', currentValue: 72 },
  { id: 'cpu', name: 'CPU Usage', currentValue: 45 },
]

export default function Example() {
  const handleSave = (config: ThresholdConfig) => {
    console.log('Saving threshold config:', config)
    // Save to backend
  }

  const handleTest = (config: ThresholdConfig) => {
    console.log('Testing threshold:', config)
    // Return test result
    return {
      triggered: true,
      currentValue: 520,
    }
  }

  return (
    <ThresholdConfigurator
      metrics={metrics}
      initialValues={{
        metric: 'response-time',
        operator: '>',
        threshold: '500',
        timeWindow: '15m',
        severity: 'warning',
        channels: ['email', 'slack'],
      }}
      onSave={handleSave}
      onTest={handleTest}
    />
  )
}

Built With

5 components

This block uses the following UI components from the design system:

Alert Button Input Select ToggleGroup

Features

Built-in functionality

Visual rule builder: Form-based interface for configuring complex threshold rules
Multiple operators: Greater than, less than, and equal to conditions
Time windows: Configure evaluation periods from 5 minutes to 1 day
Severity levels: Critical, warning, attention, and info with color-coded indicators
Multi-channel notifications: Email, Slack, SMS, and push notifications
Real-time preview: See how your rule translates to plain English
Test functionality: Test rules against current metrics before saving
Visual feedback: Color-coded test results showing trigger status
Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="form" on configurator containeraria-label for form sectionsaria-pressed on toggle group itemsaria-describedby for rule preview

Keyboard Navigation

Key	Action
`Tab`	Navigate between form fields and buttons
`Enter / Space`	Activate buttons or toggle selections
`Arrow Keys`	Navigate within toggle groups

Notes

Form labels are properly associated with inputs
Severity levels use semantic color coding with text labels
Rule preview provides plain-English description of the configuration
Test results are announced with appropriate color and icon feedback
All toggle groups support keyboard navigation

Related Components

AlertSystem AnomalyCard ExceptionDashboard PolicyEditor