How to get Prometheus metric value using Vue.js?

Question

Vue.js

Hello, just trying the Prometheus service monitoring system and the Vue.js framework.
How to get metric value using Vue.js? There is a process_cpu_seconds_total
metric In the Prometheus console I see a request process_cpu_seconds_total{instance="localhost:9090",job="prometheus"} I want to create a page where the value of this metric will be displayed. Tell me how to implement it?

Answer 1

You need to use fetch or, for example, axios, to get data from Prometheus http api: https://prometheus.io/docs/prometheus/latest/query... and then do whatever you want with them. For example, assign a variable from data, which is displayed in the template. Then it will be displayed on the page.