Add stabilizing to UI

Signed-off-by: Julien Pivotto <roidelapluie@o11y.eu>

rules/alerting.go

@@ -536,11 +536,12 @@ func (r *AlertingRule) sendAlerts(ctx context.Context, ts time.Time, resendDelay
 
 func (r *AlertingRule) String() string {
 	ar := rulefmt.Rule{
-		Alert:       r.name,
-		Expr:        r.vector.String(),
-		For:         model.Duration(r.holdDuration),
-		Labels:      r.labels.Map(),
-		Annotations: r.annotations.Map(),
+		Alert:         r.name,
+		Expr:          r.vector.String(),
+		For:           model.Duration(r.holdDuration),
+		KeepFiringFor: model.Duration(r.keepFiringFor),
+		Labels:        r.labels.Map(),
+		Annotations:   r.annotations.Map(),
 	}
 
 	byt, err := yaml.Marshal(ar)

web/api/v1/api.go

@@ -1115,7 +1115,7 @@ type Alert struct {
 	Annotations     labels.Labels `json:"annotations"`
 	State           string        `json:"state"`
 	ActiveAt        *time.Time    `json:"activeAt,omitempty"`
-	KeepFiringSince *time.Time    `json:"keep_firing_since,omitempty"`
+	KeepFiringSince *time.Time    `json:"keepFiringSince,omitempty"`
 	Value           string        `json:"value"`
 }
 
@@ -1139,12 +1139,14 @@ func rulesAlertsToAPIAlerts(rulesAlerts []*rules.Alert) []*Alert {
 	apiAlerts := make([]*Alert, len(rulesAlerts))
 	for i, ruleAlert := range rulesAlerts {
 		apiAlerts[i] = &Alert{
-			Labels:          ruleAlert.Labels,
-			Annotations:     ruleAlert.Annotations,
-			State:           ruleAlert.State.String(),
-			ActiveAt:        &ruleAlert.ActiveAt,
-			KeepFiringSince: &ruleAlert.KeepFiringSince,
-			Value:           strconv.FormatFloat(ruleAlert.Value, 'e', -1, 64),
+			Labels:      ruleAlert.Labels,
+			Annotations: ruleAlert.Annotations,
+			State:       ruleAlert.State.String(),
+			ActiveAt:    &ruleAlert.ActiveAt,
+			Value:       strconv.FormatFloat(ruleAlert.Value, 'e', -1, 64),
+		}
+		if !ruleAlert.KeepFiringSince.IsZero() {
+			apiAlerts[i].KeepFiringSince = &ruleAlert.KeepFiringSince
 		}
 	}
 

web/ui/react-app/src/pages/alerts/AlertContents.tsx

@@ -29,6 +29,7 @@ export interface Alert {
   value: string;
   annotations: Record<string, string>;
   activeAt: string;
+  keepFiringSince: string;
 }
 
 interface RuleGroup {

web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx

@@ -96,9 +96,14 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
                           </td>
                           <td>
                             <h5 className="m-0">
-                              <Badge color={alertColors[alert.state] + ' text-uppercase'} className="px-3">
+                              <Badge color={alertColors[alert.state] + ' text-uppercase'} className="px-3 mr-1">
                                 {alert.state}
                               </Badge>
+                              {alert.keepFiringSince && (
+                                <Badge color="secondary" className="px-3">
+                                  Stabilizing
+                                </Badge>
+                              )}
                             </h5>
                           </td>
                           <td>{alert.activeAt}</td>