fix: Adding speaker icon to a noisy alert (#5223)

Signed-off-by: DolevNe <[email protected]>
Signed-off-by: Shahar Glazner <[email protected]>
Co-authored-by: dolevne <[email protected]>
Co-authored-by: Shahar Glazner <[email protected]>

Author: 3 people

keep-ui/app/(keep)/dashboard/widget-types/preset/widget-alerts-table.tsx

@@ -67,7 +67,7 @@ const WidgetAlertsTable: React.FC<WidgetAlertsTableProps> = ({
         renderHeader: () => <div className="min-w-4"></div>,
         renderValue: (alert: any) => (
           <Icon
-            icon={getStatusIcon(alert.status)}
+            icon={getStatusIcon(alert.status, alert.isNoisy)}
             size="sm"
             color={getStatusColor(alert.status)}
             className="!p-0"

keep-ui/shared/lib/status-utils.ts

@@ -3,23 +3,25 @@ import {
   CheckCircleIcon,
   CircleStackIcon,
   PauseIcon,
+  SpeakerWaveIcon,
 } from "@heroicons/react/24/outline";
 import { IoIosGitPullRequest } from "react-icons/io";
 
 /**
  * Maps an alert/incident status string to the appropriate icon component
  * 
  * @param status - The status string to convert to an icon
+ * @param isNoisy - Whether the alert is noisy (optional)
  * @returns A React icon component based on the status
  * 
  * @example
  * const AlertIcon = getStatusIcon("firing");
  * // Returns ExclamationCircleIcon
  */
-export const getStatusIcon = (status: string) => {
+export const getStatusIcon = (status: string, isNoisy?: boolean) => {
   switch (status.toLowerCase()) {
     case "firing":
-      return ExclamationCircleIcon;
+      return isNoisy ? SpeakerWaveIcon : ExclamationCircleIcon;
     case "resolved":
       return CheckCircleIcon;
     case "acknowledged":

keep-ui/widgets/alerts-table/lib/alert-table-utils.tsx

@@ -453,7 +453,7 @@ export const useAlertTableCols = (
       cell: (context) => (
         <div className="flex items-center justify-center">
           <Icon
-            icon={getStatusIcon(context.getValue())}
+            icon={getStatusIcon(context.getValue(), context.row.original.isNoisy)}
             size="sm"
             color={getStatusColor(context.getValue())}
             className="!p-0 h-32px w-32px"

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "keep"
-version = "0.46.3"
+version = "0.46.4"
 description = "Alerting. for developers, by developers."
 authors = ["Keep Alerting LTD"]
 packages = [{include = "keep"}]