@OlegBagirov

Как с помощью Vue.js получить значение метрики Prometheus?

Здравствуйте, только пробую систему мониторинга сервисов Prometheus и фреймворк Vue.js.
Как с помощью Vue.js получить значение метрики?
Есть метрика process_cpu_seconds_total
В консоли Prometheus вижу запрос process_cpu_seconds_total{instance="localhost:9090",job="prometheus"}
Хочу создать страницу где будет отображаться значение этой метрики.
Подскажите, как это реализовать?
  • Вопрос задан
  • 381 просмотр
Решения вопроса 2
Fragster
@Fragster
помогло? отметь решением!
Нужно с помощью fetch или, например, axios, получить данные из http api прометея: https://prometheus.io/docs/prometheus/latest/query... и дальше делать с ними что угодно. Например присвоить переменной из data, которая выведена в шаблон. Тогда оно отобразится на странице.
Ответ написан
Комментировать
@OlegBagirov Автор вопроса
Антон Антон большое спасибо за разъяснение! разобрался, все заработало.

<html>
  <head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="prometheus">
      {{ process_cpu_seconds_total }}
    </div>
    <script>
    var app = new Vue({
        el: '#prometheus',
        data() {                                      
          return {
              process_cpu_seconds_total: null
          }
        },
        mounted() {                                  
             axios
                .get('http://localhost:9090/api/v1/query?query=process_cpu_seconds_total')
                .then(response => (this.info = response.data.data.result[0].value[1]))		            
          }
         }
      });
    </script>
  </body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы