Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rick Spencer, InfluxData
Wojciech Kocjan, InfluxData
Visualizing InfluxDB 2.0
dashboards
© 2020 InfluxData. All rights reserved. 2
Disclaimer
● Projects mentioned in this presentations are not officially
support...
© 2020 InfluxData. All rights reserved. 3
Software Engineer, InfluxData
Wojciech Kocjan
Wojciech is an engineer with 10 ye...
© 2020 InfluxData. All rights reserved. 4
Head of Platform, InfluxData
Rick Spencer
Rick is the head of platform at Influx...
InfluxDB Dashboards can be used for more than just viewing your
dashboards in the InfluxDB web UI
Dashboards are exposed v...
© 2020 InfluxData. All rights reserved. 6
Dashboards and cells for defining views
● Generic enough to show most informatio...
© 2020 InfluxData. All rights reserved. 7
Dashboards and cells - other use cases
● Use same definitions of dashboards and ...
© 2020 InfluxData. All rights reserved. 8
Visualizing dashboards outside of InfluxDB UI
● Rendering dashboards as images
○...
© 2020 InfluxData. All rights reserved. 9
What we wanted to do (and did!)
Render a large subset of InfluxDB
dashboards on ...
© 2020 InfluxData. All rights reserved. 10
Where we want to get to
● Use giraffe and browsers as foundation for visualizat...
Rendering InfluxDB 2.0 dashboards as images
InfluxDB dashboard renderer
© 2020 InfluxData. All rights reserved. 12
Rendering dashboards as images
Dashboard as displayed when using the
InfluxDB 2...
© 2020 InfluxData. All rights reserved. 13
But wait ... there’s more
Dashboard as displayed when using the
InfluxDB 2.0 fr...
© 2020 InfluxData. All rights reserved. 14
Project and goals
● Render (a subset of) InfluxDB 2.0 dashboards as images
○ Gi...
© 2020 InfluxData. All rights reserved. 15
Current status
● Code status
○ Up to date code is on GitHub, container image on...
© 2020 InfluxData. All rights reserved. 16
Current status - future plans
● Dashboard cells not currently rendered properly...
© 2020 InfluxData. All rights reserved. 17
Technology stack
● Python 3.x
○ Very generic language that I wanted to get more...
Flutter based framework for building apps with InfluxDB-based data
Flux Mobile
© 2020 InfluxData. All rights reserved. 19
Viewing dashboards using mobile apps
Dashboard as displayed when using the
Infl...
© 2020 InfluxData. All rights reserved. 20
Project and goals
● Library to embed a small set of InfluxDB dashboards in Flut...
© 2020 InfluxData. All rights reserved. 21
Technology stack
● Flutter and Dart
○ Dart is a JVM-based language, Flutter pro...
© 2020 InfluxData. All rights reserved. 22
What’s in the Library
1. API class with Query and Write functions built in
2. Q...
© 2020 InfluxData. All rights reserved. 23
References and links
● InfluxDB Dashboard Renderer
https://github.com/wojciechk...
Thank you!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Download to read offline

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

  1. 1. Rick Spencer, InfluxData Wojciech Kocjan, InfluxData Visualizing InfluxDB 2.0 dashboards
  2. 2. © 2020 InfluxData. All rights reserved. 2 Disclaimer ● Projects mentioned in this presentations are not officially supported by InfluxData ● However, source code for all of the code and projects mentioned in our slides are open source and we will be providing links to projects’ pages and downloadable artifacts
  3. 3. © 2020 InfluxData. All rights reserved. 3 Software Engineer, InfluxData Wojciech Kocjan Wojciech is an engineer with 10 years of experience with public cloudsand multiple years of experience with containers and Kubernetes. Currently an engineer at InfluxData, working on InfluxDB Cloud 2 and automation of its deployments.
  4. 4. © 2020 InfluxData. All rights reserved. 4 Head of Platform, InfluxData Rick Spencer Rick is the head of platform at InfluxData, where his responsibilities include leadership of core storage engine, developer tooling and running InfluxDB Cloud 2.0 on Kubernetes in multiple clouds and regions
  5. 5. InfluxDB Dashboards can be used for more than just viewing your dashboards in the InfluxDB web UI Dashboards are exposed via API
  6. 6. © 2020 InfluxData. All rights reserved. 6 Dashboards and cells for defining views ● Generic enough to show most information in a visual way ○ Useful for rendering status on different types of display device ○ Define how your data should be shown once and view it anywhere ● InfluxDB has a complete API for dashboards and their cells ○ Getting all dashboards and cells in a dashboard ○ Labels can be used to select a specific dashboard ○ Modifying dashboards also possible (but out of scope for our project)
  7. 7. © 2020 InfluxData. All rights reserved. 7 Dashboards and cells - other use cases ● Use same definitions of dashboards and cells for other things ○ Alerting based on dashboards and cells ■ Could be based on color definitions or additional columns that report checks ■ Unification of what is shown and what is monitored ○ Defining views for multiple types of applications ■ Websites, mobile apps and industrial status boards ■ Easier to manage views across different types of solutions ● Add domain-specific extensions or definitions ○ Outputting and formatting datetime columns ○ Custom messages on top of numeric value - showing 1/0 as YES/NO ○ Custom display modes - such as OHLC for financial data
  8. 8. © 2020 InfluxData. All rights reserved. 8 Visualizing dashboards outside of InfluxDB UI ● Rendering dashboards as images ○ Ability to generate an image from a (subset of) InfluxDB dashboards ○ Configurable inputs and outputs - i.e. time range, resolution, DPI ○ Use cases ■ Showing up to date status on e-ink displays ■ Using TVs or other types of monitors to indicate status ■ Send alert notification with current status - i.e. via email, on Slack / MS Teams ● Mobile applications - Flux Mobile ○ Built with Dart and Flutter ; support for iOS and Android ○ Framework for showing data from InfluxDB in your application ○ Multiple examples of how to use the package in your own apps
  9. 9. © 2020 InfluxData. All rights reserved. 9 What we wanted to do (and did!) Render a large subset of InfluxDB dashboards on multiple types of devices: ● large screen TV ● e-ink display ● phone ● tablet
  10. 10. © 2020 InfluxData. All rights reserved. 10 Where we want to get to ● Use giraffe and browsers as foundation for visualization ○ Re-use what the InfluxDB UI is using instead of duplicating code ○ Ability to visualize dashboards in same way as in the browser ○ Support for all types of dashboard cells is hard - giraffe has it built-in ● Render headless browser ○ Use a headless browser, render dashboards in it and take screenshot ○ Support a set of options - dark or light mode, resolution, DPI settings ● Embed web browser in mobile apps ○ Embed giraffe as a web view component in mobile apps ○ Simplify the process of embedding giraffe for iOS and Android
  11. 11. Rendering InfluxDB 2.0 dashboards as images InfluxDB dashboard renderer
  12. 12. © 2020 InfluxData. All rights reserved. 12 Rendering dashboards as images Dashboard as displayed when using the InfluxDB 2.0 frontend Same dashboard when rendered using the InfluxDB dashboard renderer
  13. 13. © 2020 InfluxData. All rights reserved. 13 But wait ... there’s more Dashboard as displayed when using the InfluxDB 2.0 frontend Same dashboard rendered as black and white, shown on an 9,7” e-ink display
  14. 14. © 2020 InfluxData. All rights reserved. 14 Project and goals ● Render (a subset of) InfluxDB 2.0 dashboards as images ○ Give it a URL to InfluxDB, a token and a dashboard ○ Outputs an image with dashboard and its cells rendered ○ Written in Python and published on GitHub ● Began as weekend project for an e-ink display ○ I wanted to show my InfluxDB dashboard on an e-ink display ○ Adapted to a more generic solution - rendering black and white, grayscale and color images, with various DPI and dimensions ; support for dark and light modes ○ Currently also a web server that can take inputs and render different types of dashboards
  15. 15. © 2020 InfluxData. All rights reserved. 15 Current status ● Code status ○ Up to date code is on GitHub, container image on DockerHub ○ Support for variables, sets defaults for time range and window period ○ No apparent memory leaks or issues with long running processes ○ Using it personally on a day basis for last 6 months ● Rendering of large subset of InfluxDB dashboard cells ○ Background and/or foreground colors and value ranges ○ Dark and light mode ; support for various DPI settings ○ Support for multiple queries and multiple tables ○ Multiple cell types: Single Stat, Graph,Graph + Single Stat, Gauge
  16. 16. © 2020 InfluxData. All rights reserved. 16 Current status - future plans ● Dashboard cells not currently rendered properly ○ Heatmap ○ Histogram ○ Scatter ○ Table ○ Note cell ● Other functionality that I plan on improving ○ Missing labels for horizontal axis ○ Perform multiple queries in parallel way to speed up rendering time ○ Improve support for subsets of colors - such as color e-ink displays
  17. 17. © 2020 InfluxData. All rights reserved. 17 Technology stack ● Python 3.x ○ Very generic language that I wanted to get more experience in ○ Cross-platform - works on Windows, macOS and Linux (including RPi) ○ Writing a web server with flask is a no-brainer ● Matplotlib ○ Excellent library for Python for visualization of data ○ Before working on the renderer, I used it in ad-hoc manner ● Container image ○ Simplifies running the renderer and allows it to be run in Kubernetes
  18. 18. Flutter based framework for building apps with InfluxDB-based data Flux Mobile
  19. 19. © 2020 InfluxData. All rights reserved. 19 Viewing dashboards using mobile apps Dashboard as displayed when using the InfluxDB 2.0 frontend Similar dashboard rendered on an Android device (showing cells vertically, not using regular layout)
  20. 20. © 2020 InfluxData. All rights reserved. 20 Project and goals ● Library to embed a small set of InfluxDB dashboards in Flutter ○ Framework for showing data from InfluxDB in your application ○ Multiple examples of how to use the package in your own apps ○ Written in Dart and Flutter ; published on GitLab ● Started as project to simply show air quality on a smartphone ○ The initial idea was to write an app that shows current air quality from InfluxDB ; grew to building SDK for InfluxDB, to be used in apps ○ Supports a subset of InfluxDB dashboards and cell types, provides interactive dashboards ○ Project still in early stages, but usable on iOS and Android
  21. 21. © 2020 InfluxData. All rights reserved. 21 Technology stack ● Flutter and Dart ○ Dart is a JVM-based language, Flutter provides UI ○ Cross-platform non-HTML based framework for mobile apps ○ Supports iOS and Android ○ Work on support for desktop operating systems also in progress
  22. 22. © 2020 InfluxData. All rights reserved. 22 What’s in the Library 1. API class with Query and Write functions built in 2. Query, Table, Row, and Point classes for creating custom applications 3. GUI components for user management, dashboards, line graphs, single-stat cells, and colors for RAD development
  23. 23. © 2020 InfluxData. All rights reserved. 23 References and links ● InfluxDB Dashboard Renderer https://github.com/wojciechka/influxdb-dashboard-renderer https://hub.docker.com/repository/docker/wojciechka/influxdb-dashboard-renderer ● Flux Mobile https://gitlab.com/rickspencer3/flux-mobile ● Article: How to Display Your InfluxDB Dashboards on E-Ink https://thenewstack.io/how-to-display-your-influxdb-dashboards-on-e-ink/
  24. 24. Thank you!

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Views

Total views

248

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

6

Shares

0

Comments

0

Likes

0

×