Integrate Real‑Time Prometheus Pod Metrics into Probius Using ECharts

In a previous article we integrated Kubernetes into the Probius task system. After deployment, users still needed to view container metrics in Grafana. This tutorial explains how to embed Prometheus‑collected pod monitoring directly into Probius to streamline the workflow.

Getting Data

Prometheus provides two APIs:

query

for a single point in time and

query_range

for a time series. For the monitoring feature we need

query_range

.

Endpoint:

<code>GET /api/v1/query_range</code>

Supported parameters:

query : Prometheus expression string

start : Start time (RFC3339 or Unix timestamp)

end : End time (RFC3339 or Unix timestamp)

step : Interval, e.g.,

15s

timeout : Request timeout

Python client example to fetch POD metrics:

<code>class PrometheusApi:
    def __init__(self, range=1):
        self.domain = "https://prometheus.ops-coffee.cn"
        self.nowtime = datetime.datetime.now(datetime.timezone.utc)
        self.start_time = self.nowtime - datetime.timedelta(hours=int(range))

    def get_pod_metric(self, namespace, pod):
        _data = {"datetime": [], "cpu": {}, "memory": {}, "bandwidth": {}, "iops": {}}
        params = {
            "query": "sum(node_namespace_pod_container:container_cpu_usage_seconds_total:sum_irate{namespace='%s', pod='%s'}) by (container)" % (namespace, pod),
            "start": self.start_time.isoformat(),
            "end": self.nowtime.isoformat(),
            "step": "60s"
        }
        rc = requests.get(self.domain + '/api/v1/query_range', params=params)
        for c in rc.json().get('data').get('result'):
            _data['cpu'][c['metric']['container']] = [j[1] for j in c['values']]
        return True, 200, _data
</code>

If you are unfamiliar with Prometheus expressions, you can copy them from Grafana charts. Note that Prometheus stores timestamps in UTC, so conversion to local time may be required.

Chart Display

After obtaining the data, we use ECharts to render line charts. The following HTML layout hosts the selectors and chart containers:

<code>&lt;div class="tab-pane" id="tab-monitor"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="input-group"&gt;
        &lt;div class="input-group-btn"&gt;&lt;button class="btn btn-default"&gt;选择实例&lt;/button&gt;&lt;/div&gt;
        &lt;select class="form-control" id="id_pod_monitor" onchange="getPodMonitor()"&gt;&lt;option value=""&gt;------&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
      &lt;div class="input-group"&gt;
        &lt;div class="input-group-btn"&gt;&lt;button class="btn btn-default"&gt;时间范围&lt;/button&gt;&lt;/div&gt;
        &lt;select class="form-control" id="id_pod_monitor_time" onchange="getPodMonitor()"&gt;
          &lt;option value="1" selected="selected"&gt;最近1小时&lt;/option&gt;
          &lt;option value="4"&gt;最近4小时&lt;/option&gt;
          &lt;option value="24"&gt;最近24小时&lt;/option&gt;
          &lt;option value="48"&gt;最近48小时&lt;/option&gt;
          &lt;option value="72"&gt;最近72小时&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      &lt;div class="pull-right"&gt;
        &lt;button class="btn btn-default" onclick="getPodMonitor()"&gt;&lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt; 刷新&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" style="margin-top:10px;"&gt;
    &lt;div class="col-md-6" id="id_chart_cpu" style="position: relative; height: 300px;"&gt;&lt;/div&gt;
    &lt;div class="col-md-6" id="id_chart_memory" style="position: relative; height: 300px;"&gt;&lt;/div&gt;
    &lt;div class="col-md-6" id="id_chart_bandwidth" style="position: relative; height: 300px;"&gt;&lt;/div&gt;
    &lt;div class="col-md-6" id="id_chart_iops" style="position: relative; height: 300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code>

JavaScript initializes the charts and fetches data from the backend:

<code>var chart_cpu = echarts.init(document.getElementById('id_chart_cpu')),
    chart_memory = echarts.init(document.getElementById('id_chart_memory')),
    chart_bandwidth = echarts.init(document.getElementById('id_chart_bandwidth')),
    chart_iops = echarts.init(document.getElementById('id_chart_iops'));

function getPodMonitor() {
  var pod = $('#id_pod_monitor').val(), range = $('#id_pod_monitor_time').val();
  $.get('/kubeops/namespace/{{ namespace }}/pod/' + pod + '/monitor/?range=' + range + '&format=json', function(data) {
    if (data.state) {
      let cpu_legend = [], cpu_series = [];
      $.each(data.data.cpu, function(k, v) {
        cpu_legend.push(k);
        cpu_series.push({data: v, name: k, type: 'line'});
      });
      chart_cpu.setOption({
        title: {text: 'CPU使用(单位:core)'},
        tooltip: {trigger: 'axis'},
        legend: {data: cpu_legend},
        xAxis: {data: data.data.datetime},
        yAxis: {type: 'value'},
        series: cpu_series
      });
    }
  });
}
</code>

ECharts is used with simple line charts; no extra decorations are added. With this implementation, Probius now provides built‑in POD monitoring, turning a small but useful feature into a fully integrated part of the system.