grafana 截图功能

grafana 截图功能

背景

现在日报，需要以一个图标的形式进行展示，在grafana监控已经完善的情况下，再使用代码绘制图标有些麻烦，进行拓展安装grafana-image-renderer插件，进行通过url的方式获取指定图标的指定时间截图。

方法1：使用docker-compose

1.创建 docker-compose.yml 内容如下

version: '2'
services:
  grafana:
    image: grafana/grafana:latest
    ports:
      - '3009:3000'
    environment:
      GF_RENDERING_SERVER_URL: http://renderer:8081/render
      GF_RENDERING_CALLBACK_URL: http://grafana:3000/
      GF_LOG_FILTERS: rendering:debug
    volumes:
      - "$PWD/png:/var/lib/grafana/png/"
      - "$PWD/grafana.db:/var/lib/grafana/grafana.db"
  renderer:
    image: grafana/grafana-image-renderer:latest
    ports:
      - 8081

2.进行启动

cat README.md

### 注意要在当前目录执行以下命令 
cd /opt/grafana

### 启动
docker-compose up -d

### 停止
docker-compose down

3. 访问 http://ip:3009/

方法2：运行 Grafana Docker 映像

1. 创建Dockerfile
   这里我根据官方的dockerfile做了Grafana镜像的版本固定为8.2.0,和解决了截图分享中文乱码问题

ARG GRAFANA_VERSION="8.2.0"

FROM grafana/grafana:${GRAFANA_VERSION}

USER root

ARG GF_INSTALL_IMAGE_RENDERER_PLUGIN="false"

ARG GF_GID="0"
ENV GF_PATHS_PLUGINS="/var/lib/grafana-plugins"

RUN mkdir -p "$GF_PATHS_PLUGINS" && \
    chown -R grafana:${GF_GID} "$GF_PATHS_PLUGINS"

RUN if [ $GF_INSTALL_IMAGE_RENDERER_PLUGIN = "true" ]; then \
    echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories && \
    echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories && \
    echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories && \
    apk --no-cache  upgrade && \
    apk add --no-cache udev ttf-opensans chromium && \
    apk add fontconfig mkfontscale wqy-zenhei --update-cache --repository http://dl-3.alpinelinux.org/alpine/edge/testing --allow-untrusted && \
    rm -rf /tmp/* && \
    rm -rf /usr/share/grafana/tools/phantomjs; \
fi

USER grafana

ENV GF_PLUGIN_RENDERING_CHROME_BIN="/usr/bin/chromium-browser"

RUN if [ $GF_INSTALL_IMAGE_RENDERER_PLUGIN = "true" ]; then \
    grafana-cli \
        --pluginsDir "$GF_PATHS_PLUGINS" \
        --pluginUrl https://github.com/grafana/grafana-image-renderer/releases/latest/download/plugin-linux-x64-glibc-no-chromium.zip \
        plugins install grafana-image-renderer; \
fi

ARG GF_INSTALL_PLUGINS=""

RUN if [ ! -z "${GF_INSTALL_PLUGINS}" ]; then \
    OLDIFS=$IFS; \
    IFS=','; \
    for plugin in ${GF_INSTALL_PLUGINS}; do \
        IFS=$OLDIFS; \
        if expr match "$plugin" '.*\;.*'; then \
            pluginUrl=$(echo "$plugin" | cut -d';' -f 1); \
            pluginInstallFolder=$(echo "$plugin" | cut -d';' -f 2); \
            grafana-cli --pluginUrl ${pluginUrl} --pluginsDir "${GF_PATHS_PLUGINS}" plugins install "${pluginInstallFolder}"; \
        else \
            grafana-cli --pluginsDir "${GF_PATHS_PLUGINS}" plugins install ${plugin}; \
        fi \
    done \
fi

2.进行build

docker build \
  --build-arg "GRAFANA_VERSION=latest" \
  --build-arg "GF_INSTALL_IMAGE_RENDERER_PLUGIN=true" \
  -t x602/grafana-custom:8.2.0 -f Dockerfile .

3.运行测试

docker run -d -p 3000:3000 --name=grafana x602/grafana-custom:8.2.0 

测试

1. 创建图表并进行分享 用户名密码默认（admin/admin）
   

   

2. 通过url保存图片
   这里访问的 from 和 to 是毫秒级别的时间戳

curl -o fuck.png -u admin:admin   \
"http://ip:3000/render/d-solo/idlS5qLnk/new-dashboard?orgId=1&from=`date -d "-6 hour" +%s`167&to=`date +%s`167&panelId=2&width=1000&height=500&tz=Asia%2FShanghai"

linux时间戳拓展

%date -d "-1 day"  +%s

date +%Y%m%d               #显示前天年月日 
date -d "+1 minutes" +%Y%m%d   #显示前一天的日期 
date -d "-1 day" +%Y%m%d   #显示后一天的日期 
date -d "-1 month" +%Y%m%d #显示上一月的日期 
date -d "+1 hour" +%s #下1小时 
date -d "-1 year" +%Y%m%d  #显示前一年的日期 
date -d "+1 year" +%Y%m%d  #显示下一年的日期

参考文档

官方文档1：https://grafana.com/grafana/plugins/grafana-image-renderer/
grafana 容器数据迁移的处理 : https://www.cnblogs.com/rongfengliang/p/14327261.html

官方文档2：https://grafana.com/docs/grafana/latest/installation/docker/#custom-image-with-grafana-image-renderer-plugin-pre-installed
官方dockerfile：https://github.com/grafana/grafana/blob/main/packaging/docker/custom/Dockerfile

时间戳计算工具：https://tool.lu/timestamp/
date命令手册：https://www.gnu.org/software/coreutils/manual/html_node/Examples-of-date.html

Dockerfile 导出 https://inetyoung.blog.csdn.net/article/details/106896963
截图中文乱码问题：http://leegorous.net/blog/2018/11/15/how-to-render-chinese-in-alpine-phantomjs/