Grafana: [功能请求] 在警报激活时播放声音

问题出在哪儿？ 只需为自己添加一个 webhook 即可使用 webhook 警报功能播放声音；)

@flyersa

嘿飞，
以前从未使用过网络钩子。 任何建议从哪里开始？ :)

如果你播放声音，请给我看一些例子

+1 用于浏览器中新警报声音的开箱即用功能

+1 我也希望如此

+1

这将非常有帮助

我认为这也会是一个很好的功能。 因为我现在真的很需要它。 🤣🤣🤣

播放声音功能实现了吗？

请执行此操作！！！！

+1

+1

+1

+1

经过一些内部讨论，我们同意这不是我们希望在核心 Grafana 中支持的内容。 但由于 Grafana 支持面板插件，因此可以开发扩展警报列表面板的新插件或播放警报声音的新插件。

但你支持警报！ 面板闪烁时播放 .wav 有多难？

我认为他有这个观点，它应该在面板中得到支持，我认为这就是我们所要求的，不是 Grafana 核心，而是面板核心。 无论如何，我们大多数人都在使用默认面板。

我们也需要！ +1

@bergquist 何时使用桌面通知发出警报？

重新打开功能请求。 新的一年，新鲜的眼睛。 请。

+1

+1

+1

+1
绝对想要的功能，
也许Grafana Alerting API 的扩展与 POST webhook 的组合将是一个很好的方法？

+1
当 Grafana 仪表板与其他监视器一起投射到控制室、NOC、SOC 中时，当 Grafana 警报发生时发出声音是很有价值的。

+1 实现这一点。 我在视频墙监控关键系统上运行 grafana。 提示我抬头看墙的警报将大大有助于响应时间！

+1
这将是一个非常有用的功能

+1 我们公司也认为这是一个非常好的开发功能，如果您正在处理大量 NOC 工具，它将帮助我们更快地查看警报。
@bergquist - 随着越来越多的人要求它，任何重新打开它的机会。
如果您设置阈值（最小或最大）并且超过它，我认为开发它并不难，然后警报将开始发出声音。
找你回复。
Tnx
驯兽师

+1 我需要这个

+1 我很惊讶 Grafana 没有这个功能。

+1 非常有必要使用grafana来监控大屏幕。

+1
我们也需要这个！ :)

这是基本功能，我们确实需要这个。

+1

+1

+1

+1

这很酷，我们也需要这个！ :)

+1 监控像我这样的 IT 系统非常有用。

+1

+1 会很棒。 Grafana 多年来一直是管理层的威慑力量，像这样的功能绝对值得炫耀。

+1

+1 必须有功能 :)

+1

+1
如果非常迫切需要，那么我们可以注入动态 JavaScript 来在警报时播放声音

设置间隔（函数（）{
警报用户（）；
}, 60 * 1000);

功能警报用户（）{
if ($('div').hasClass('panel-alert-state--alerting')) {
var audio = new Audio('http://soundbible.com/grab.php?id=2142&type=mp3');
音频播放（）；
}
}

嗨，大家好，
从vini @Thx到他的基本信息：D，我写了一个小的警报激活，您可以在浏览器中打开/关闭它。

正常警报规则将触发警报声音文件 + 状态面板将发出警报。

变化：

grafana/public/views/index.html

<div class="main-view"> <- ADD AFTER THIS LINE

   <ul>

    <li><button style="background-color:#f44336;float:left;margin-left:5%;margin-right:5px;color:white;" onmousedown="clearInterval(stopalertt);stopalertt=false;">ALERT OFF</button>

    <button style="background-color:#4CAF50;color:white;" onmousedown="stopalertt=setInterval(AlertUsers, 5000);">ALERT ON</button></li>

    </ul>

在 /body 和 /html 标记关闭之前的文件 (index.html) 末尾（关闭脚本标记之后）
插入这个：

如果你愿意，你可以把它放在一个外部 js 文件中。

上帝，这是我见过的最糟糕的“所见即所得”。 对不起 ：-/

问候，
7

嗨，大家好，
从vini @thx到他的基本信息：D，我写了一个小的警报激活，您可以在浏览器中打开/关闭它。

正常警报规则将触发警报声音文件 + 状态面板将发出警报。

变化：

grafana/public/views/index.html

<div class="main-view"> <- ADD AFTER THIS LINE

   <ul>

    <li><button style="background-color:#f44336;float:left;margin-left:5%;margin-right:5px;color:white;" onmousedown="clearInterval(stopalertt);stopalertt=false;">ALERT OFF</button>

    <button style="background-color:#4CAF50;color:white;" onmousedown="stopalertt=setInterval(AlertUsers, 5000);">ALERT ON</button></li>

    </ul>

在 /body 和 /html 标记关闭之前的文件 (index.html) 末尾（关闭脚本标记之后）
插入这个：

如果你愿意，你可以把它放在一个外部 js 文件中。

上帝，这是我见过的最糟糕的“所见即所得”。 对不起 ：-/

问候，
7

@7lives83看起来不错

这个选项怎么样？

@维尼斯顿：
好多了 ：-）

也许您想发布按钮代码以及在哪里添加？

谢谢，
问候，
最大限度

我们可以选择我们的声音来提醒

在页脚内容下面添加*li *

         <li>

             <a href="javascript:void(0);" class="dropdown-alert-on">
               <a href="javascript:void(0);" class="sidemenu-item dropdown dropup alertondropbtn" onclick="alertOn()">
                  <i  class="fa fa-bell"></i>
                    Alert On
                </a>
              <div id="alertOnDropdown" class="dropdown-content-alert-on">
                <a href="javascript:void(0);" onclick="selectedSound=1;stopalert=setInterval(AlertUsers, 5000);">Analog Watch Alarm</a>
                <a href="javascript:void(0);" onclick="selectedSound=2;stopalert=setInterval(AlertUsers, 5000);">Busy Signal</a>
                <a href="javascript:void(0);" onclick="selectedSound=3;stopalert=setInterval(AlertUsers, 5000);">FogHorn Barge</a>
                <a href="javascript:void(0);" onclick="selectedSound=4;stopalert=setInterval(AlertUsers, 5000);">Metal Metronome</a>
                <a href="javascript:void(0);" onclick="selectedSound=5;stopalert=setInterval(AlertUsers, 5000);">Metronome</a>
                <a href="javascript:void(0);" onclick="selectedSound=6;stopalert=setInterval(AlertUsers, 5000);">Teeth Chatter</a>
                <a href="javascript:void(0);" onclick="selectedSound=7;stopalert=setInterval(AlertUsers, 5000);">Turkey Putt</a>
                <a href="javascript:void(0);" onclick="selectedSound=8;stopalert=setInterval(AlertUsers, 5000);">Store Door Chime</a>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" class="sidemenu-item dropdown dropup" onclick="clearInterval(stopalert);stopalert=false;console.log('Interval stopped', stopalert);" >
              <i class="fa fa-bell-o"></i>
              Alert Off
            </a>
          </li>

作品:) 风格不错的作品！ 谢谢@viniston

作品:) 风格不错的作品！ 谢谢@viniston
也谢谢@7lives83

一个建议：

如果你改变这个：

你有一个下拉菜单:-) 但这只是一个非常小的造型技巧。 不多了 :) 伟大的工作 vini :)

一个建议：

如果你改变这个：

你有一个下拉菜单:-) 但这只是一个非常小的造型技巧。 不多了 :) 伟大的工作 vini :)

很酷的东西 Max :)

最后一个功能：

此时添加：

<a href="javascript:void(0);" id="alertonbtn" class="sidemenu-item dropdown dropup alertondropbtn" onclick="alertOn()">
<i  class="fa fa-bell"></i>
Alert On
</a>

id="alertonbtn"

此时添加：

<a href="javascript:void(0);" id="alertoffbtn" class="sidemenu-item dropdown dropup" onclick="clearInterval(stopalert);stopalert=false;console.log('Interval stopped', stopalert);" >
<i class="fa fa-bell-o"></i>
Alert Off
</a>

id="alertoffbtn"

在里面

早些时候我已经实现了以下功能。 即突出当前状态

看起来挺好的 ：）

大家好，
我重新设计了我们的功能，因此您可以轻松地将其添加到您的 grafana 中。 一项新功能是，我们现在设置 cookie 以保存您的最后选择（警报开启）。

注意：必须在您的浏览器中激活 Cookies！！

完整的构建：

• 所有更改都在文件 /public/view/index.html 中进行：

1. 用这个替换页脚部分：

<footer class="footer">
          <div class="text-center">
            <ul>
                <li>

                         <a href="javascript:void(0);" class="dropdown-alert-on">
                           <a href="javascript:void(0);" id="alertonbtn" class="sidemenu-item dropdown dropup alertondropbtn" onclick='document.cookie = "alarm=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; document.cookie = "alarm=on;path=/";alertOn();checkifonoff();'>
                                  <i class="fa fa-bell"></i>
                                        Alert On
                                </a>
                          <div id="alertOnDropdown" class="dropdown-content-alert-on">
                                <a href="javascript:void(0);" onclick="selectedSound=1;">Standart (BIEP)</a>
                                <a href="javascript:void(0);" onclick="selectedSound=2;">Busy Signal</a>
                                <a href="javascript:void(0);" onclick="selectedSound=3;">FogHorn Barge</a>
                                <a href="javascript:void(0);" onclick="selectedSound=4;">Metal Metronome</a>
                                <a href="javascript:void(0);" onclick="selectedSound=5;">Metronome</a>
                                <a href="javascript:void(0);" onclick="selectedSound=6;">Teeth Chatter</a>
                                <a href="javascript:void(0);" onclick="selectedSound=7;">Turkey Putt</a>
                                <a href="javascript:void(0);" onclick="selectedSound=8;">Store Door Chime</a>
                          </div>
                        </a>
          </li>
                  <li>
             <a href="javascript:void(0);" id="alertoffbtn" class="sidemenu-item dropdown dropup" onclick='document.cookie = "alarm=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";document.cookie = "alarm=off;path=/";checkifonoff();' >
              <i class="fa fa-bell-o"></i>
              Alert Off
            </a>
          </li>
                [[if .NewGrafanaVersionExists]]
                    <li>
                <a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
                  New version available!
                </a>
              </li>
                [[end]]
                          </ul>
          </div>
        </footer>

1. 在</body>标签前添加：

<script>
var checkcookie = document.cookie;
console.log("Cookie-Check Inital:", checkcookie);
if (checkcookie === "") {
document.cookie = "alarm=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "alarm=on;path=/";
console.log("Cookie-Check-First-Set:", checkcookie);
}

var checkoffon = setInterval(checkifonoff,6000);
var selectedSound = 1; var sounds = { '1': 'https://www.soundjay.com/button/beep-04.mp3', '2': 'http://soundbible.com/grab.php?id=1072&type=mp3', '3': 'http://soundbible.com/grab.php?id=2142&type=mp3', '4': 'http://soundbible.com/grab.php?id=915&type=mp3', '5': 'http://soundbible.com/grab.php?id=914&type=mp3', '6': 'http://soundbible.com/grab.php?id=1344&type=mp3', '7': 'http://soundbible.com/grab.php?id=1318&type=mp3', '8': 'http://soundbible.com/grab.php?id=1599&type=mp3', };

function checkifonoff() {
var checkcookie = document.cookie;

if (checkcookie === "alarm=off"){
var stopalertbtn = document.getElementById('alertoffbtn');
var startalertbtn = document.getElementById('alertonbtn');
stopalertbtn.style.color= 'green';
startalertbtn.style.color= '#8e8e8e';
document.cookie = "alarm=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "alarm=off;path=/";
console.log("ALARM OFF", checkcookie);
}

if (checkcookie === "alarm=on") {
var startalertbtn = document.getElementById('alertonbtn');
var stopalertbtn = document.getElementById('alertoffbtn');
startalertbtn.style.color= 'green';
stopalertbtn.style.color= '#8e8e8e';
var audioPath = sounds[selectedSound]; if ($('div').hasClass('panel-alert-state--alerting')) { console.log('panel-alert-state--alerting'); var audio = new Audio(audioPath); audio.play(); } if ($('div').hasClass('panel-container st-card effect-hover error-state')) { console.log('panel-container st-card effect-hover error-state'); var audio = new Audio(audioPath); audio.play(); } if ($('div').hasClass('panel-container panel-transparent st-card effect-hover error-state')) { console.log('panel-container panel-transparent st-card effect-hover error-state'); var audio = new Audio(audioPath); audio.play(); }
document.cookie = "alarm=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "alarm=on;path=/";
console.log("ALARM ON", checkcookie);
}
}


function alertOn() {
document.getElementById("alertOnDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.alertondropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content-alert-on");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

</script>
<style>
        .dropdown-alert-on {
          position: relative;
          display: inline-block;
        }

        .dropdown-content-alert-on {
          display: none;
          position: absolute;
          background: #161719;
          min-width: 160px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
          border-bottom: 1px solid #444;
          bottom: 20px;
        }

        .dropdown-content-alert-on a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
                  padding: 8px 16px;
                font-size: 12px;
                color: #8e8e8e;
                margin-bottom: 4px;
                white-space: nowrap;
        }

        .dropdown-alert-on a:hover {background-color: #ddd;}

        .show {display: block;}

        .text-center {position: relative;}

        .footer {position: absolute;
                top:100%;
                padding: 0 0 0 0;}

        .is-react .footer {display: block;}
</style>

各位，

很高兴看到这个，我有一个问题，如果声音警报与 grafana 在同一台服务器上，任何代码都必须更改？

@7lives83
嘿，很不错。
是否可以使用本地mp3。 我不知道它工作

@Yudhistir4

各位，

很高兴看到这个，我有一个问题，如果声音警报与 grafana 在同一台服务器上，任何代码都必须更改？

@DS95

@7lives83
嘿，很不错。
是否可以使用本地mp3。 我不知道它工作

希望Yud的意思是一样的？！ :-)

当然。 您只需要更改音频文件目的地。 将您的声音复制到公共文件夹中的新声音目录中，如下所示：

ls-ltr：
-rw-r--r-- 1 根根 0 Jan 27 13:10 test1.mp3
-rw-r--r-- 1 根根 0 Jan 27 13:11 test2.mp3
[email protected] :/usr/share/grafana/public/sounds#

现在更改您 selectedSound 目标（在本例中，我使用作为服务器名称 yourmetricserver.localdomain.com <- 您需要将其更改为您的服务器名称，其中 grafana 服务器处于活动状态）：

var selectedSound = 1; var 声音 = { '1': ' https://yourmetricserver.localdomain.com/public/sounds/test1.mp3 ', '2': ' https://yourmetricserver.localdomain.com/public/sounds/test2.mp3 ', '3': ' https://yourmetricserver.localdomain.com/public/sounds/test3.mp3 ', '4': ' https://yourmetricserver.localdomain.com/public/sounds/test4.mp3 ',
.... };

@7lives83
嘿，很不错。
是否可以使用本地mp3。 我不知道它工作

你好，

请执行以下操作以播放本地 mp3 文件中的声音

var audio = new Audio('public/sounds/carHorn.mp3'); audio.play();

它是关于改变 mp3 文件的位置。 就是这样。 如果您需要更多帮助，我们随时准备为您提供帮助

例子：
HTML：
<a href="javascript:void(0);" class="dropdown-alert-on"> <a href="javascript:void(0);" class="sidemenu-item dropdown dropup alertondropbtn" onclick="PlaySound()"> <i class="fa fa-bell"></i> Play Sound </a>

爪哇脚本：
功能播放声音（）{
var audio = new Audio('public/sounds/carHorn.mp3');
音频播放（）；
}

@7lives83
嘿，很不错。
是否可以使用本地mp3。 我不知道它工作

你好，

请执行以下操作以播放本地 mp3 文件中的声音

var audio = new Audio('public/sounds/carHorn.mp3'); audio.play();

它是关于改变 mp3 文件的位置。 就是这样。 如果您需要更多帮助，我们随时准备为您提供帮助

例子：
HTML：
<a href="javascript:void(0);" class="dropdown-alert-on"> <a href="javascript:void(0);" class="sidemenu-item dropdown dropup alertondropbtn" onclick="PlaySound()"> <i class="fa fa-bell"></i> Play Sound </a>

爪哇脚本：
功能播放声音（）{
var audio = new Audio('public/sounds/carHorn.mp3');
音频播放（）；
}

请提取附加文件夹并将其放入公用文件夹中
声音.zip