如何基于Prometheus统计特定时段请求数并在React中生成日维度图表

一、实现10天每日请求数的正确PromQL #

直接用increase(osori_requests_total[10d])只会返回10天的总增量（单个值），无法得到每日数据点。要实现按天展示的效果，需结合范围查询和步长设置：

1. 基础查询语句（按需分组）：

sum by (method, status_code) (increase(osori_requests_total[1d]))

• increase(osori_requests_total[1d])：自动处理计数器重置，计算单天内的请求增量
• sum by (method, status_code)：按请求方法、状态码分组汇总，不需要分组可直接去掉这部分

2. 关键参数设置：
   发起查询时指定step=86400（86400秒=1天），Prometheus会按每天一个时间节点，计算该节点前1天的增量，最终返回10个对应每日的数据点。

二、指定具体日期范围的查询方法 #

通过Prometheus的HTTP API发起范围查询时，传入start和end参数（值为Unix时间戳，单位秒）即可限定日期范围：

示例：查询2024-05-01至2024-05-10的每日数据 #

1. 转换日期为Unix时间戳：
   • 2024-05-01 00:00 → 1714521600
   • 2024-05-10 23:59 → 1715385540
2. React中请求示例（用axios）：

import axios from 'axios';

const fetchDailyRequests = async () => {
  const prometheusApi = 'http://你的Prometheus地址/api/v1/query_range';
  const queryParams = {
    query: 'sum by (method, status_code) (increase(osori_requests_total[1d]))',
    start: 1714521600,
    end: 1715385540,
    step: 86400
  };
  const res = await axios.get(prometheusApi, { params: queryParams });
  // 转换为图表可用格式
  return res.data.data.result.map(item => ({
    metric: `${item.metric.method} ${item.metric.status_code}`,
    data: item.values.map(([ts, val]) => ({
      date: new Date(ts * 1000).toLocaleDateString(),
      count: parseFloat(val)
    }))
  }));
};

三、React渲染图表的注意事项 #

• 选合适的图表库：比如recharts或echarts-for-react，方便处理时间轴和多系列数据（不同method/status_code的请求数）
• 补全空数据：若某天无请求，Prometheus不会返回对应点，需手动补0或留空，保证X轴日期连续
• 数值类型转换：Prometheus返回的数值是字符串，需转为数字类型再传入图表

内容的提问来源于stack exchange，提问作者yjlee