Notification Rule Builder

Card-based notification rules with inline sentence composition. Each card defines a condition, action, and throttling strategy using chained pill-style dropdowns and inputs.

Notification Rule Card

A notification rule composed as readable inline sentences. Condition/action/throttling rows adapt reactively — selecting a dropdown value changes which subsequent segments appear.

When to use: Building alert configuration UIs where users define rules for policy violations, thresholds, or event-driven notifications.

Active

Condition :

Action :

Throttling :

Inactive

Condition :

Action :

Throttling :

MDC

<template>
  <div class="flex flex-col gap-6">
    <AlertConfig
      v-for="(rule, i) in rules"
      :key="i"
      v-model="rules[i]"
      @delete="rules.splice(i, 1)"
    />
  </div>
</template>

<script setup>
const rules = ref([
  {
    active: true,
    conditionType: 'every',
    actionType: 'http',
    httpMethod: 'POST',
    httpUrl: 'http://',
    throttleType: 'none',
  },
  {
    active: false,
    conditionType: 'threshold',
    conditionOperator: 'exceed',
    conditionThreshold: 100,
    conditionTimeValue: 1,
    conditionTimeUnit: 'hour',
    actionType: 'slack',
    slackDestination: 'slack',
    throttleType: 'rate-limit',
    throttleCount: 1,
    throttleInterval: 5,
    throttleUnit: 'minutes',
  },
])
</script>