feat: add ability to customize alert frequency (#4697)

frontend/public/locales/en-GB/alerts.json

@@ -112,6 +112,7 @@
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
 	"field_unit": "Threshold unit",
 	"text_alert_on_absent": "Send a notification if data is missing for",
+	"text_alert_frequency": "Run alert every",
 	"text_for": "minutes",
 	"selected_query_placeholder": "Select query"
 }

frontend/public/locales/en/alerts.json

@@ -112,6 +112,7 @@
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
 	"field_unit": "Threshold unit",
 	"text_alert_on_absent": "Send a notification if data is missing for",
+	"text_alert_frequency": "Run alert every",
 	"text_for": "minutes",
 	"selected_query_placeholder": "Select query"
 }

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -1,5 +1,6 @@
 import {
 	Checkbox,
+	Collapse,
 	Form,
 	InputNumber,
 	InputNumberProps,
@@ -24,7 +25,12 @@ import {
 import { EQueryType } from 'types/common/dashboard';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { FormContainer, InlineSelect, StepHeading } from './styles';
+import {
+	FormContainer,
+	InlineSelect,
+	StepHeading,
+	VerticalLine,
+} from './styles';
 
 function RuleOptions({
 	alertDef,
@@ -238,42 +244,72 @@ function RuleOptions({
 							/>
 						</Form.Item>
 					</Space>
-					<Space direction="horizontal" align="center">
+					<Collapse>
-						<Form.Item noStyle name={['condition', 'alertOnAbsent']}>
+						<Collapse.Panel header={t('More options')} key="1">
-							<Checkbox
+							<Space direction="vertical" size="large">
-								checked={alertDef?.condition?.alertOnAbsent}
+								<VerticalLine>
-								onChange={(e): void => {
+									<Space direction="horizontal" align="center">
-									setAlertDef({
+										<Typography.Text>{t('text_alert_frequency')}</Typography.Text>
-										...alertDef,
+										<Form.Item noStyle name={['condition', 'frequency']}>
-										condition: {
+											<InputNumber
-											...alertDef.condition,
+												defaultValue={1}
-											alertOnAbsent: e.target.checked,
+												min={1}
-										},
+												value={alertDef?.frequency}
-									});
+												onChange={(value): void => {
-								}}
+													setAlertDef({
-							/>
+														...alertDef,
-						</Form.Item>
+														frequency: Number(value) || 0,
-						<Typography.Text>{t('text_alert_on_absent')}</Typography.Text>
+													});
+												}}
+												type="number"
+												onWheel={(e): void => e.currentTarget.blur()}
+											/>
+										</Form.Item>
+										<Typography.Text>{t('text_for')}</Typography.Text>
+									</Space>
+								</VerticalLine>
 
-						<Form.Item noStyle name={['condition', 'absentFor']}>
+								<VerticalLine>
-							<InputNumber
+									<Space direction="horizontal" align="center">
-								min={1}
+										<Form.Item noStyle name={['condition', 'alertOnAbsent']}>
-								value={alertDef?.condition?.absentFor}
+											<Checkbox
-								onChange={(value): void => {
+												checked={alertDef?.condition?.alertOnAbsent}
-									setAlertDef({
+												onChange={(e): void => {
-										...alertDef,
+													setAlertDef({
-										condition: {
+														...alertDef,
-											...alertDef.condition,
+														condition: {
-											absentFor: Number(value) || 0,
+															...alertDef.condition,
-										},
+															alertOnAbsent: e.target.checked,
-									});
+														},
-								}}
+													});
-								type="number"
+												}}
-								onWheel={(e): void => e.currentTarget.blur()}
+											/>
-							/>
+										</Form.Item>
-						</Form.Item>
+										<Typography.Text>{t('text_alert_on_absent')}</Typography.Text>
-						<Typography.Text>{t('text_for')}</Typography.Text>
+
-					</Space>
+										<Form.Item noStyle name={['condition', 'absentFor']}>
+											<InputNumber
+												min={1}
+												value={alertDef?.condition?.absentFor}
+												onChange={(value): void => {
+													setAlertDef({
+														...alertDef,
+														condition: {
+															...alertDef.condition,
+															absentFor: Number(value) || 0,
+														},
+													});
+												}}
+												type="number"
+												onWheel={(e): void => e.currentTarget.blur()}
+											/>
+										</Form.Item>
+										<Typography.Text>{t('text_for')}</Typography.Text>
+									</Space>
+								</VerticalLine>
+							</Space>
+						</Collapse.Panel>
+					</Collapse>
 				</Space>
 			</FormContainer>
 		</>

frontend/src/container/FormAlertRules/styles.ts

@@ -67,6 +67,13 @@ export const SeveritySelect = styled(Select)`
 	width: 25% !important;
 `;
 
+export const VerticalLine = styled.div`
+	border-left: 2px solid #e8e8e8; /* Adjust color and thickness as desired */
+	padding-left: 20px; /* Adjust spacing to content as needed */
+	margin-left: 20px; /* Adjust margin as desired */
+	height: 100%; /* Adjust based on your layout needs */
+`;
+
 export const InputSmall = styled(Input)`
 	width: 40% !important;
 `;

frontend/src/pages/AlertList/index.tsx

@@ -12,6 +12,11 @@ function AllAlertList(): JSX.Element {
 			children: <TriggeredAlerts />,
 		},
 		// {
+		// 	label: 'Planned Downtime',
+		// 	key: 'Planned Downtime',
+		// 	// children: <PlannedDowntime />,
+		// },
+		// {
 		// 	label: 'Map Alert Channels',
 		// 	key = 'Map Alert Channels',
 		// 	children: <MapAlertChannels />,

frontend/src/types/api/alerts/def.ts

@@ -14,6 +14,7 @@ export interface AlertDef {
 	alertType?: string;
 	alert?: string;
 	ruleType?: string;
+	frequency?: number | undefined;
 	condition: RuleCondition;
 	labels?: Labels;
 	annotations?: Labels;

pkg/query-service/rules/manager.go

@@ -525,7 +525,7 @@ func (m *Manager) prepareTask(acquireLock bool, r *PostableRule, taskName string
 		rules = append(rules, tr)
 
 		// create ch rule task for evalution
-		task = newTask(TaskTypeCh, taskName, taskNamesuffix, time.Duration(r.Frequency), rules, m.opts, m.prepareNotifyFunc())
+		task = newTask(TaskTypeCh, taskName, taskNamesuffix, time.Duration(r.Frequency*Duration(time.Minute)), rules, m.opts, m.prepareNotifyFunc())
 
 		// add rule to memory
 		m.rules[ruleId] = tr
@@ -547,7 +547,7 @@ func (m *Manager) prepareTask(acquireLock bool, r *PostableRule, taskName string
 		rules = append(rules, pr)
 
 		// create promql rule task for evalution
-		task = newTask(TaskTypeProm, taskName, taskNamesuffix, time.Duration(r.Frequency), rules, m.opts, m.prepareNotifyFunc())
+		task = newTask(TaskTypeProm, taskName, taskNamesuffix, time.Duration(r.Frequency*Duration(time.Minute)), rules, m.opts, m.prepareNotifyFunc())
 
 		// add rule to memory
 		m.rules[ruleId] = pr

pkg/query-service/rules/thresholdRule.go

@@ -713,7 +713,7 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 	zap.S().Debugf("ruleid:", r.ID(), "\t resultmap(potential alerts):", len(resultMap))
 
 	// if the data is missing for `For` duration then we should send alert
-	if r.ruleCondition.AlertOnAbsent && r.lastTimestampWithDatapoints.Add(r.Condition().AbsentFor).Before(time.Now()) {
+	if r.ruleCondition.AlertOnAbsent && r.lastTimestampWithDatapoints.Add(r.Condition().AbsentFor*time.Minute).Before(time.Now()) {
 		zap.S().Debugf("ruleid:", r.ID(), "\t msg: no data found for rule condition")
 		lbls := labels.NewBuilder(labels.Labels{})
 		if !r.lastTimestampWithDatapoints.IsZero() {