From 2c408289f8358e83301ebaf9bface058f1a6a9b4 Mon Sep 17 00:00:00 2001
From: Julien Pivotto <roidelapluie@o11y.eu>
Date: Thu, 19 Jan 2023 11:33:54 +0100
Subject: [PATCH] Add stabilizing to UI

Signed-off-by: Julien Pivotto <roidelapluie@o11y.eu>
---
 rules/alerting.go                                | 11 ++++++-----
 web/api/v1/api.go                                | 16 +++++++++-------
 .../react-app/src/pages/alerts/AlertContents.tsx |  1 +
 .../src/pages/alerts/CollapsibleAlertPanel.tsx   |  7 ++++++-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/rules/alerting.go b/rules/alerting.go
index 9ff3e8fc3..ac89049e7 100644
--- a/rules/alerting.go
+++ b/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)
diff --git a/web/api/v1/api.go b/web/api/v1/api.go
index 29532bceb..f560693d4 100644
--- a/web/api/v1/api.go
+++ b/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
 		}
 	}
 
diff --git a/web/ui/react-app/src/pages/alerts/AlertContents.tsx b/web/ui/react-app/src/pages/alerts/AlertContents.tsx
index 2837399f7..a619f69fc 100644
--- a/web/ui/react-app/src/pages/alerts/AlertContents.tsx
+++ b/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 {
diff --git a/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx b/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx
index 1951f0f20..676046efd 100644
--- a/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx
+++ b/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>