Grafana: [Запрос ФУНКЦИИ] Воспроизведение звука при активации оповещения

в чем проблема? Просто добавьте себе веб-перехватчик, чтобы воспроизводить звук с помощью функции оповещения о веб-перехватчике;)

@flyersa

эй, лети,
никогда раньше не работал с вебхуками. любое предложение, с чего начать? :)

пожалуйста, покажите мне какой-нибудь пример, если вы проиграли звук

+1 за готовую функциональность для звука при новом оповещении в браузере

+1 я тоже на это надеюсь

+1

Это будет очень полезно

Думаю, это тоже будет хорошая функция. Поскольку мне это действительно нужно прямо сейчас. 🤣 🤣 🤣

Реализована ли функция воспроизведения звука?

Пожалуйста, реализуйте это !!!!!

+1

+1

+1

+1

После некоторых внутренних обсуждений мы согласились, что это не то, что мы хотим поддерживать в ядре Grafana. Но поскольку Grafana поддерживает плагины панели, можно разработать новый плагин, расширяющий панель списка предупреждений, или новый плагин для воспроизведения звуков предупреждений.

Но вы поддерживаете оповещения! Насколько сложно проигрывать .wav при мигании панели?

Я думаю, что он прав, это должно быть поддержано панелью, и я думаю, что это то, о чем мы просили, не ядро ​​Grafana, а ядро ​​панелей. Большинство из нас в любом случае использует панели по умолчанию.

Нам это тоже нужно! +1

@bergquist как насчет предупреждений с помощью уведомлений на рабочем столе, когда?

REOPEN Запрос функции. Новый год, свежие глаза. Пожалуйста.

+1

+1

+1

+1
определенно желаемая функция,
может быть, расширение Grafana Alerting API с комбинацией веб-перехватчика POST было бы хорошим подходом?

+1
Когда приборная панель Grafana проецируется в Control Room, NOC, SOC .... вместе с другими мониторами, важно иметь звуки, когда возникает предупреждение Grafana.

+1 реализовать это. Я запускаю графану на видеостене, контролируя критически важные системы. предупреждение, побуждающее меня взглянуть на стену, значительно ускорило бы время отклика!

+1
Это была бы очень полезная функция

+1 также наша компания считает, что это очень хорошая функция для разработки, которая поможет нам быстрее видеть предупреждения, особенно если вы работаете с большим количеством инструментов NOC.
@bergquist - есть ли шанс снова открыть его, когда его просят все больше и больше людей.
Я не думаю, что это очень сложно разработать, если вы устанавливаете порог (мин. Или макс.) И превышаете его, тогда будильник начнет запускать звук.
Жду вашего ответа.
Tnx
Укротитель

+1 мне это нужно

+1 Я удивлен, что у Grafana нет этой функции.

+1 Очень нужно использовать графану для мониторинга больших экранов.

+1
Нам это тоже нужно! :)

Это основная функция, она нам действительно нужна.

+1

+1

+1

+1

Это очень круто, это нам тоже нужно! :)

+1 это может быть очень полезно для мониторинга ИТ-систем вроде меня.

+1

+1 было бы здорово иметь. Grafana была сдерживающим фактором для руководства в течение многих лет, и такая особенность определенно является чем-то, чем стоит похвастаться.

+1

+1 должен иметь функцию :)

+1

+1
Если это необходимо очень срочно, мы можем внедрить динамический JavaScript для воспроизведения звука при предупреждении.

setInterval (function () {
AlertUsers ();
}, 60 * 1000);

function AlertUsers () {
if ($ ('div'). hasClass ('состояние предупреждения панели - предупреждение')) {
var audio = new Audio ('http://soundbible.com/grab.php?id=2142&type=mp3');
audio.play ();
}
}

Всем привет,
по основному от vini @Thx ему: D, я пишу небольшую активацию оповещения, которую вы можете включить / выключить в своем браузере.

Обычные правила предупреждений вызовут звуковой файл предупреждения + панели состояния будут предупреждать.

Изменения:

графана / общественные / просмотры / 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>

В конце файла (index.html) до закрытия тега / body и / html (после закрытия тега скрипта)
вставьте это:

если хотите, можете поместить это во внешний файл js.

Боже, это худший WYSIWYG, который я когда-либо видел. простите :-/

Приветствую,
7

Всем привет,
по основному от vini @thx к нему: D, я пишу небольшую активацию оповещения, которую вы можете включить / выключить в своем браузере.

Обычные правила предупреждений вызовут звуковой файл предупреждения + панели состояния будут предупреждать.

Изменения:

графана / общественные / просмотры / 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>

В конце файла (index.html) до закрытия тега / body и / html (после закрытия тега скрипта)
вставьте это:

если хотите, можете поместить это во внешний файл js.

Боже, это худший WYSIWYG, который я когда-либо видел. простите :-/

Приветствую,
7

@ 7lives83 Выглядит хорошо

Как насчет этого варианта?

@viniston :
Намного лучше :-)

Может вы хотите выложить код кнопки и куда добавить?

Спасибо,
Приветствую,
Максимум

Мы можем выбрать свой звук для оповещения

добавить ниже * 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

одно предложение:

если вы измените это:

у вас есть всплывающее меню :-), но это лишь очень маленький совет по стилю. не более :) отличная работа вини :)

одно предложение:

если вы измените это:

у вас есть всплывающее меню :-), но это лишь очень маленький совет по стилю. не более :) отличная работа вини :)

Классная штука Макс :)

И последняя особенность:

добавьте в этот момент:

<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 = "alerttonbtn"

добавьте в этот момент:

<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"

в

Ранее я реализовал функцию ниже. То есть выделить текущий статус

выглядит неплохо :)

Эй, ребята,
Я немного переработал нашу функцию, чтобы вы могли легко добавить ее в свою графану. Одна из новых функций заключается в том, что теперь мы устанавливаем файлы cookie, чтобы сохранить ваш последний выбор (будильник выключен).

Примечание. Файлы cookie должны быть активированы в вашем браузере !!

Завершить сборку:

• Все изменения вносятся в файл /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>

Приветствую всех,

приятно видеть это, у меня вопрос, а что, если звуковое оповещение есть на том же сервере с графаной, любой код должен измениться?

@ 7lives83
Привет, очень мило.
Можно ли использовать местные mp3. Я не могу заставить его работать

@ Yudhistir4

Приветствую всех,

приятно видеть это, у меня вопрос, а что, если звуковое оповещение есть на том же сервере с графаной, любой код должен измениться?

@ DS95

@ 7lives83
Привет, очень мило.
Можно ли использовать местные mp3. Я не могу заставить его работать

Надеюсь, Юд означает то же самое ?! :-)

Конечно. Вам нужно только изменить место назначения аудиофайла. Скопируйте ваши звуки в новый каталог звуков в вашей общей папке следующим образом:

ls-ltr:
-rw-r - r-- 1 root root 0 27 янв 13:10 test1.mp3
-rw-r - r-- 1 root root 0 27 янв 13:11 test2.mp3
[email protected] : / usr / share / grafana / public / звуки #

Теперь измените место назначения selectedSound (в этом примере я использую в качестве имени сервера yourmetricserver.localdomain.com <- вам нужно изменить его на имя вашего сервера, на котором сервер grafana активен):

var selectedSound = 1; var Sounds = {'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>

ЯВАСКРИПТ:
function PlaySound () {
var audio = new Audio ('публичные / звуки / carHorn.mp3');
audio.play ();
}

@ 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>

ЯВАСКРИПТ:
function PlaySound () {
var audio = new Audio ('публичные / звуки / carHorn.mp3');
audio.play ();
}

Извлеките прикрепленную папку и поместите ее в общую папку.
Sounds.zip