Git Product home page Git Product logo

bujupah / yet-another-renderer Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 0.0 599 KB

Yet another grafana renderer backend that handles rendering of panels & dashboards to PNG/PDF/XLSX using a chromium headless browser

License: MIT License

JavaScript 0.23% Dockerfile 0.39% TypeScript 98.11% HTML 1.28%
grafana grafana-panel grafana-renderer puppeteer queue grafana-dashboards grafana-plugin pdf png xlsx

yet-another-renderer's Introduction

Yet another grafana-renderer

Yet another renderer

Stars Forks

License Issues Pull Requests Last Commit

Yet another grafana backend that handles rendering panels and dashboards to PNGs and PDFs using a headless browser (Chromium).

Why another grafana-image-renderer

This alternative plugin diverges from existing solutions by prioritizing efficiency, reducing dependencies, and enhancing functionality for remote server usage. It offers a streamlined approach to image rendering within Grafana, addressing specific pain points and providing additional features to cater to diverse user needs.

  • Supports PNG, PDF, and XLSX formats (in-progress)
  • Provides versatile options for image/pdf/excel generation
  • Enables users to choose the desired format based on their needs

Requirements

  • Node.js
  • Chrome (Chromium) browser
  • Supported operating systems: Linux, Windows, macOS
  • Grafana plugin: bujupah-renderer-app (optional)

Todos

  • Single Panel screenshot
  • Multiple Panels screenshot
  • Dashboard screenshot
  • Single Panel PDF
  • Multi Panel PDF
  • Dashboard PDF
  • Panel Excel
  • Multi Panel Excel
  • Dashboard Excel
  • Unit tests

Getting started

Run in docker

Docker images are published at Docker Hub.

The following example shows how you can run Grafana and the remote HTTP rendering service in two separate Docker containers using Docker Compose.

Create a docker-compose.yml with the following content:

version: "2"

services:
  grafana:
    image: grafana/grafana:latest
    ports:
      - "3000:3000"
    environment:
      GF_RENDERING_SERVER_URL: http://renderer:8081/render
      GF_RENDERING_CALLBACK_URL: http://grafana:3000/
      GF_LOG_FILTERS: rendering:debug
      # Renderer options
      GF_RENDERING_RENDERER_TOKEN: ${GRAFANA_RENDER_AUTH_TOKEN} # Can use the new grafana renderer auth token
      GF_RENDERING_CONCURRENT_RENDER_REQUEST_LIMIT: 100
  renderer:
    image: bujupah/yet-another-renderer:latest
    environment:
      RENDER_PORT: 8081
      RENDER_CONCURRENCY: 5
      RENDER_AUTH_SECRET_TOKEN: ${GRAFANA_RENDER_AUTH_TOKEN} # Can use the new grafana renderer auth token
environment:
  GRAFANA_RENDER_AUTH_TOKEN: "your_security_key_here" # remove this or set it to - to disable it

Next, run docker compose.

docker-compose up


Run in local

To get started, clone the repository and then navigate into the project folder.

git clone https://github.com/bujupah/yet-another-renderer
cd yet-another-renderer

Next, you can install the required dependencies using one of the following package managers:

npm install
# yarn install
# pnpm install

Subsequently, install the new headless/chrome for puppeteer you can run the following command. This command uses @puppeteer/browser to download the latest chrome binary.

npm run get:chrome
# yarn get:chrome
# pnpm get:chrome

Finally, to build the renderer simply go with the following command..

npm run build
# yarn build
# pnpm build

Performance & Security

Memory and stuff

A substantial amount of memory is necessary for rendering images due to the resource-intensive nature of the process. It is advised to have at least 16GB of available memory on the system to accommodate these requirements.

Fortunately, we've implemented a queueing system to address this challenge. This system effectively manages the workload by queuing requests and initiating the rendering process once resources become available. As a result, it alleviates the strain on the application and ensures that requests are handled efficiently, even during peak periods.

Security

Re-using the same feature Grafana provided to address the security issues.
Please read the security section in readme from grafana-image-renderer repository. https://github.com/grafana/grafana-image-renderer#security


Get involved

If you're interested to get involved to the project:

  • Join the community discussions on GitHub Discussions to share feedback and ideas.
  • Report bugs or suggest feature requests via GitHub Issues.
  • Contribute to the development by submitting pull requests or participating in discussions.

License

This plugin is licensed under the MIT License, allowing for flexibility in usage and modification.

yet-another-renderer's People

Contributors

bujupah avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

yet-another-renderer's Issues

Add github automation

Add github workflows

  • PR Automation
  • PR Checks
  • Github webpage
  • Auto labelling
  • Build and release
  • Check for security vulnerabilities

where is docker-images ?

bujupah/yet-another-renderer:lates is not found .

And I will rebuild the image, it occured the err: pull node:alpine3.19 timeout.

Add more documentations

Todo docs enhancements:

  • Add apis to docs
  • Add panel png rendering to docs
  • Add multi panel png rendering to docs
  • Add dashboard png rendering to docs
  • Add panel pdf rendering to docs
  • Add multi panel pdf rendering to docs
  • Add dashboard pdf rendering to docs
  • Add pdf cover to docs
  • Add env variables & configuration docs

Add github templates

Add github templates

  • Pull request template
  • New bug report template
  • Feature requests template
  • Report a security vulnerability template
  • Change logs template

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.