fix: Noisy presets do not play sound (#4979)

Author: skynetigor

keep-ui/features/presets/create-or-update-preset/ui/preset-controls.tsx

@@ -42,6 +42,7 @@ export const PresetControls: React.FC<PresetControlsProps> = ({
 
         <div className="flex items-center gap-2">
           <Switch
+            data-testid="is-noisy-switch"
             id="noisy"
             checked={isNoisy}
             onChange={() => setIsNoisy(!isNoisy)}

keep-ui/features/presets/custom-preset-links/ui/CustomPresetAlertLinks.tsx

@@ -16,9 +16,6 @@ import {
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { AiOutlineSound } from "react-icons/ai";
-// Using dynamic import to avoid hydration issues with react-player
-import dynamic from "next/dynamic";
-const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
 // import css
 import "./CustomPresetAlertLink.css";
 import clsx from "clsx";
@@ -27,6 +24,7 @@ import { usePresetActions } from "@/entities/presets/model/usePresetActions";
 import { usePresetPolling } from "@/entities/presets/model/usePresetPolling";
 import { usePresetAlertsCount } from "../model/usePresetAlertsCount";
 import { FireIcon } from "@heroicons/react/24/outline";
+import { PresetsNoise } from "./PresetsNoise";
 
 type AlertPresetLinkProps = {
   preset: Preset;
@@ -214,18 +212,7 @@ export const CustomPresetAlertLinks = ({
           />
         ))}
       </SortableContext>
-      {/* React Player for playing alert sound */}
-      <ReactPlayer
-        // TODO: cache the audio file fiercely
-        url="/music/alert.mp3"
-        playing={anyNoisyNow}
-        volume={0.5}
-        loop={true}
-        width="0"
-        height="0"
-        playsinline
-        className="absolute -z-10"
-      />
+      <PresetsNoise presets={presets}></PresetsNoise>
     </DndContext>
   );
 };

keep-ui/features/presets/custom-preset-links/ui/PresetsNoise.tsx

@@ -0,0 +1,78 @@
+import { Preset } from "@/entities/presets/model";
+import { useMemo } from "react";
+import { useApi } from "@/shared/lib/hooks/useApi";
+import useSWR from "swr";
+import { AlertsQuery } from "@/entities/alerts/model";
+// Using dynamic import to avoid hydration issues with react-player
+import dynamic from "next/dynamic";
+import clsx from "clsx";
+const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
+
+interface PresetsNoiseProps {
+  presets: Preset[];
+}
+
+export const PresetsNoise = ({ presets }: PresetsNoiseProps) => {
+  const api = useApi();
+  const noisyPresets = useMemo(
+    () => presets?.filter((preset) => preset.is_noisy),
+    [presets]
+  );
+
+  const { data: shouldDoNoise } = useSWR(
+    () =>
+      api.isReady() && noisyPresets
+        ? noisyPresets.map((noisyPreset) => noisyPreset.id)
+        : null,
+    async () => {
+      let shouldDoNoise = false;
+
+      // Iterate through noisy presets and find first that has an Alert that should trigger noise
+      for (let noisyPreset of noisyPresets) {
+        const noisyAlertsCelRules = [
+          "status == 'firing' && deleted == false && dismissed == false",
+          noisyPreset.options.find((opt) => opt.label == "CEL")?.value,
+        ];
+        const query: AlertsQuery = {
+          cel: noisyAlertsCelRules.map((cel) => `(${cel})`).join(" && "),
+          limit: 0,
+          offset: 0,
+        };
+
+        const { count: matchingAlertsCount } = await api.post(
+          "/alerts/query",
+          query
+        );
+        shouldDoNoise = !!matchingAlertsCount;
+
+        if (shouldDoNoise) {
+          break;
+        }
+      }
+
+      return shouldDoNoise;
+    }
+  );
+
+  /* React Player for playing alert sound */
+  return (
+    <div
+      data-testid="noisy-presets-audio-player"
+      className={clsx("absolute -z-10", {
+        playing: shouldDoNoise,
+      })}
+    >
+      <ReactPlayer
+        // TODO: cache the audio file fiercely
+        url="/music/alert.mp3"
+        playing={shouldDoNoise}
+        volume={0.5}
+        loop={true}
+        width="0"
+        height="0"
+        playsinline
+        className="absolute -z-10"
+      />
+    </div>
+  );
+};

tests/e2e_tests/incidents_alerts_tests/test_filtering_sort_search_on_alerts.py

@@ -753,6 +753,52 @@ def filter_lambda(alert):
             alert_property_name,
             None,
         )
+        # check that alerts noise is not playing
+        expect(
+            browser.locator("[data-testid='noisy-presets-audio-player'].playing")
+        ).to_have_count(0)
+    except Exception:
+        save_failure_artifacts(browser, log_entries=[])
+        raise
+
+
+def test_adding_new_noisy_preset(
+    browser: Page,
+    setup_test_data,
+    setup_page_logging,
+    failure_artifacts,
+):
+    try:
+        current_alerts = query_alerts(cell_query="", limit=1000)["results"]
+        init_test(browser, current_alerts, max_retries=3)
+
+        # Give the page a moment to process redirects
+        browser.wait_for_timeout(500)
+
+        # Wait for navigation to complete to either signin or providers page
+        # (since we might get redirected automatically)
+        browser.wait_for_load_state("networkidle")
+        cel_input_locator = browser.locator(".alerts-cel-input")
+        cel_input_locator.click()
+        browser.keyboard.type("name.contains('high')")
+        browser.keyboard.press("Enter")
+        browser.wait_for_timeout(500)
+        browser.locator("[data-testid='save-preset-button']").click()
+        preset_form_locator = browser.locator("[data-testid='preset-form']")
+        preset_form_locator.locator("[data-testid='preset-name-input']").fill(
+            "Test noisy preset"
+        )
+        preset_form_locator.locator("[data-testid='is-noisy-switch']").click()
+        preset_form_locator.locator("[data-testid='save-preset-button']").click()
+        expect(
+            browser.locator("[data-testid='noisy-presets-audio-player'].playing")
+        ).to_have_count(1)
+        browser.reload()
+
+        # check that it's still playing after reloading
+        expect(
+            browser.locator("[data-testid='noisy-presets-audio-player'].playing")
+        ).to_have_count(1)
     except Exception:
         save_failure_artifacts(browser, log_entries=[])
         raise