Last active
December 28, 2020 07:12
-
-
Save czerasz/569ed1f923b610efba91375eeb35d5ab to your computer and use it in GitHub Desktop.
Grafana Dashboards carousel/rotator/playlist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| body, html { | |
| margin: 0; padding: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| background: #141414; | |
| } | |
| .content { | |
| position: absolute; | |
| left: 0; right: 0; | |
| bottom: 0; top: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <iframe class="content" id="iframe1" src="" width="100%" height="100%" frameborder="0"></iframe> | |
| <iframe class="content" id="iframe2" src="" width="100%" height="100%" frameborder="0"></iframe> | |
| </body> | |
| <script type="text/javascript"> | |
| const TIMEOUT = 15000; // 15 seconds | |
| const BASE_URL = "<BASE URL>"; // Example: https://grafana.example.com | |
| const dashboards_list = [ | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-001&from=now-1h&to=now", | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-002&from=now-1h&to=now", | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-003&from=now-1h&to=now", | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-004&from=now-1h&to=now", | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-005&from=now-1h&to=now", | |
| // ... | |
| "/dashboard/db/node-exporter-single-server-dashboards-22?kiosk=true&var-server=vm-app-006&from=now-1h&to=now" | |
| ]; | |
| const iframe_1 = document.getElementById("iframe1"); | |
| const iframe_2 = document.getElementById("iframe2"); | |
| var index = 0; | |
| // Set initial values | |
| iframe_1.src = BASE_URL + dashboards_list[index]; | |
| iframe_1.style.zIndex = 1; | |
| iframe_2.style.zIndex = 0; | |
| function load_next_url() { | |
| index = (index + 1) % dashboards_list.length; | |
| select_bottom().src = BASE_URL + dashboards_list[index]; | |
| setTimeout(load_next_url, TIMEOUT); | |
| // Show next slide after 3 seconds | |
| setTimeout(change_order, 3000); | |
| } | |
| /** | |
| * Return iFrame which currently hidden - iFrame which has a lower z-index. | |
| * | |
| * @return {Element Object} iFrame DOM element | |
| */ | |
| function select_bottom() { | |
| if ( parseInt(iframe_1.style.zIndex, 10) > parseInt(iframe_2.style.zIndex, 10) ) { | |
| return iframe_2; | |
| } else { | |
| return iframe_1; | |
| } | |
| } | |
| /** | |
| * Switch order of the iFrames. | |
| * The iFrame from bottom will move on top. | |
| */ | |
| function change_order() { | |
| if ( parseInt(iframe_1.style.zIndex, 10) > parseInt(iframe_2.style.zIndex, 10) ) { | |
| iframe_1.style.zIndex = 0; | |
| iframe_2.style.zIndex = 1; | |
| } else { | |
| iframe_1.style.zIndex = 1; | |
| iframe_2.style.zIndex = 0; | |
| } | |
| } | |
| setTimeout(load_next_url, TIMEOUT); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment