show warning icon if alert has been firing for more than 7 days

sapcc · Oct 14, 2021 · 86672eb · 86672eb
1 parent 57978c2
commit 86672eb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/components/AlertItem.js b/src/components/AlertItem.js
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, {useState} from 'react'
 import moment from 'moment'
 import { Markup } from 'interweave'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import AlertActionButtons from './AlertActionButtons'
 import AlertLinks from './AlertLinks'
@@ -44,6 +45,10 @@ const AlertItem = React.memo(({
 
   const silences = useSilences(alert.status, silencesKeyPayload)
 
+  const firingSince = moment(alert.startsAt)
+  const now = moment()
+  const daysFiring = now.diff(firingSince, "days")
+
   return (
     <tr className={alert.labels.severity} >
       <td className="text-nowrap">
@@ -76,7 +81,12 @@ const AlertItem = React.memo(({
 
         <AlertLabels labels={alert.labels} labelSettings={labelSettings}/>
       </td>
-      <td>{moment(alert.startsAt).format('DD.MM.YYYY HH:mm:ss')}</td>
+      <td>
+        {firingSince.format('DD.MM.YYYY HH:mm:ss ')}
+        { daysFiring > 7 &&
+          <FontAwesomeIcon icon="exclamation-triangle" className="warning-icon" title="This alert has been firing for more than 7 days!" fixedWidth />
+        }
+      </td>
       <td>
         <AlertStatus 
           status={alert.status} 

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -147,6 +147,10 @@ button {
     background: rgba(255, 255, 255, 0.5);
     color: lighten($danger, 5);
   }
+
+  .warning-icon {
+    color: lighten($danger, 25);
+  }
 }
 
 .warning td {
@@ -170,6 +174,10 @@ button {
     background: rgba(255, 255, 255, 0.8);
     color: darken($warning, 15);
   }
+
+  .warning-icon {
+    color: darken($warning, 10);;
+  }
 }
 
 .info td {
@@ -193,6 +201,10 @@ button {
     background: rgba(255, 255, 255, 0.5);
     color: darken($info, 20);
   }
+
+  .warning-icon {
+    color: darken($info, 10);
+  }
 }
 
 .resolved td {