Grafana: 支持带有模板变量的播放列表

创建于 2014-09-08 · 132评论 · 资料来源: grafana/grafana

我给你举个简单的例子：
我们有一个配置了 $HOST 变量的仪表板。
我们有一个使用 aws.$HOST.request.count 的图表
查看仪表板时，我们可以选择 Host1、Host2 等，显示适当的指标。
现在，把它变成一个播放列表会很好，这样 Grafana 每分钟都会显示每个主机的指标。

当我们有两个或更多过滤器时，事情会变得有点复杂。有很多组合，仪表板观察者可能对其中一些组合不感兴趣。
出于这个原因，最好有一种方法来选择用户感兴趣的过滤器/变量组合列表。然后播放列表将循环浏览这些组合并显示具有适当指标的仪表板。
还可以在播放列表中为时间范围选择不同的组合（例如，过去 6 小时、过去 24 小时等）也很好。

aredashboard prioritnice-to-have typfeature-request

资料来源

costimuraru

👍162

最有用的评论

:cake: 本期 5 周年纪念。

我们可以得到更新吗？

brmurphy 于 2019-09-24

👍31 🎉12 😄8

所有132条评论

@costimuraru非常好的建议！

torkelo 于 2014-09-08

:+1: 将使播放列表功能更加有用

catacgc 于 2014-09-08

：+1：需要此功能，因为您没有那么大的屏幕来放置所有图形。

ghost 于 2014-09-09

:+1: 事实上，这个功能对于像我们这样的项目来说非常有用，因为我们有许多仪表板可以压缩在一个屏幕中。

mdfecioru 于 2014-09-09

这确实听起来非常有用，但在开始播放列表视图中公开变量和时间设置也非常复杂和耗时（并在仪表板加载/循环中实现处理这些设置和设置变量等的逻辑）。所以它肯定会是一个未来优先考虑的功能，但不能被挤进 v1.8

torkelo 于 2014-09-09

感谢@torkelo ，继续努力！

costimuraru 于 2014-09-10

:+1: 有这个功能会很棒

mixomat 于 2014-10-21

虽然这是在开发队列中 - 无论如何要在 url 中指定模板变量？我现在至少可以使用浏览器扩展程序来轮换一堆网址。

rishid 于 2015-01-20

👍1

@rishid是的，使用?var-<variable_name>=value

torkelo 于 2015-01-20

👍1

+1，我也对这个功能请求很感兴趣

bbinet 于 2015-02-17

languitar 于 2015-03-12

pip77 于 2015-03-17

+1 使用模板，这是必须的。

magmax 于 2015-08-06

公关快来了...

@costimuraru我已经为一个变量实现了播放列表，现在正在研究多变量组合。实施应该很快。选择不同的时间范围可能是在此之上的升级功能。对于这次迭代，我只是在做模板变量组合播放列表。

utkarshcmu 于 2015-09-28

太棒了， @utkarshcmu ！

costimuraru 于 2015-09-28

这是 PR - #2841 和一些截图：

转到“模板”，现在您应该能够看到全新的“播放列表”选项卡：
screen shot 2015-09-29 at 3 14 13 am

单击播放列表选项卡，您应该会看到以下屏幕，其中列出了所有变量。
screen shot 2015-09-29 at 3 14 16 am

我从 3 个变量中选择了 2 个，然后单击“开始”。（我选择 2 的原因是因为我想播放这 2 个变量的所有组合，保持第 3 个固定。请注意：固定变量将获得它们的默认保存值）。
screen shot 2015-09-29 at 3 14 22 am

现在您可以看到我保持第一个变量不变，播放列表将以第二个和第三个变量的所有可能组合开始。
screen shot 2015-09-29 at 3 14 36 am

如果需要，请提供反馈和更改。

utkarshcmu 于 2015-09-28

👍1

真棒@utkarshcmu

timgriffiths 于 2015-09-29

干得好！不确定是否将播放列表功能作为模板设置中的选项卡。已经有一个播放列表视图，为模板化仪表板构建播放列表应该是该视图的一部分。

torkelo 于 2015-09-29

同意@torkelo ，我会将其作为播放列表视图的一部分。这更有意义。 :)

utkarshcmu 于 2015-09-29

现在可以从播放列表视图触发基于模板变量的播放列表。应按照以下步骤启动播放列表：

点击播放列表：
screen shot 2015-09-30 at 10 59 44 am

您将看到以下播放列表视图，其中包含选择播放列表类型的附加选项：
screen shot 2015-09-30 at 10 59 50 am
对于基于仪表板的播放列表，一切都相同。

现在对于基于模板变量的播放列表，您需要从下拉菜单中选择“变量”：
screen shot 2015-09-30 at 11 07 37 am

然后，您将根据模板变量搜索需要为其运行播放列表的仪表板并选择它：
screen shot 2015-09-30 at 11 00 13 am

选择仪表板后，将自动显示模板变量列表：
screen shot 2015-09-30 at 11 00 16 am

现在下一步是选择要用于运行播放列表的模板变量，然后单击开始：
screen shot 2015-09-30 at 11 00 44 am

在这里，您可以使用基于模板变量的播放列表：
screen shot 2015-09-30 at 11 00 51 am

让我知道你们对播放列表视图中的这一变化有何看法。

utkarshcmu 于 2015-09-30

看起来挺好的

torkelo 于 2015-09-30

mtanda 于 2015-11-08

+1，有关此功能的任何消息@utkarshcmu吗？

evandro-portugal 于 2016-01-25

@evandro-portugal 我为 grafana 实现了播放列表功能，但之前没有合并。我想现在我必须重做一些工作，因为代码已经改变了很多。

utkarshcmu 于 2016-01-26

@utkarshcmu是的，我在哪里可以得到你最后的代码？我想看看并尝试为我做一些事情，在我的情况下这是一个高优先级，我只需要让变量在每个周期结束时改变位置，然后我可以做一些事情直到我们得到你的分支合并

evandro-portugal 于 2016-01-27

@evandro-葡萄牙
这是旧代码：
请转到我的 Grafana 分支 - https://github.com/justforkit/grafana
并尝试从“可变播放列表”分支构建 Grafana

utkarshcmu 于 2016-01-27

@utkarshcmu ，谢谢，我会研究一下代码，你打算重新编写代码吗？否则，如果我为我现在正在使用的 grafana 的实际主分支修复它，我可以分享我的工作。我现在有几个假期（这里是狂欢节）并计划与它一起玩

evandro-portugal 于 2016-02-05

@evandro-portugal 当然，如果您愿意，可以继续返工。我不打算在这里工作至少一个星期。享受嘉年华。 :)

utkarshcmu 于 2016-02-05

@torkelo这个功能可以合并到核心grafana吗？对于使用不同的模板变量播放相同的仪表板，这似乎是一个非常有用的增强功能。

digrich 于 2016-06-17

此外，如果@bergquist / @torkelo同意合并此功能，我可以重新编写我以前的 PR 代码，使其与最新的 Grafana 代码兼容。

utkarshcmu 于 2016-06-17

👍3

@digrich你是什么意思合并？这不是 PR :)

torkelo 于 2016-06-17

我试图引用@utkarshcmu的旧 PR(#2841)，但正如他在上一条评论中提到的，他必须返工并提交新的 PR。

digrich 于 2016-06-17

ryancurrah 于 2016-06-29

嗨@torkelo 。在等待这个有用的功能时，我想寻找任何解决方法。

是否可以基于脚本化仪表板构建类似于播放列表的内容？

这个脚本化仪表板应该能够加载其他模板化仪表板并以某种方式传递变量，也许来自 url？

toni-moreno 于 2016-07-22

HormyAJP 于 2016-08-26

半年过去了，有没有这方面的消息？

GhostLyrics 于 2017-01-11

没消息：（

torkelo 于 2017-01-11

看起来我需要花一些时间来处理这个功能请求！

utkarshcmu 于 2017-01-11

👍4

pete7863 于 2017-01-17

def324 于 2017-01-24

eyablonowitz 于 2017-01-26

lmt73 于 2017-02-15

由于您可以通过 URL 传递变量，我的临时解决方案是这个简单的 iframe carousel/rotator html 页面，我称之为 Grafana Dashboards carousel。

您只需要指定BASE_URL和dashboards_list数组，其中包含要显示的仪表板。

czerasz 于 2017-02-16

这是一个稍微不相关的问题，但有没有办法在仪表板上有一个“下一个”/“上一个”主机（或真正模板化的变量）按钮？
当我想使用下拉菜单手动滚动一整套主机时变得非常麻烦。

Keeper-of-the-Keys 于 2017-02-16

这里有什么动作吗？我们所有的仪表板都是模板化的 - 因此没有模板功能/传递变量的可能性，播放列表功能对我们来说基本上无法使用。

davidkarlsen 于 2017-04-16

👍10

rm-jamotion 于 2017-04-21

jakekeeys 于 2017-05-24

labsilva 于 2017-07-07

dkutny 于 2017-08-08

A11oW 于 2017-08-11

veerok 于 2017-08-11

Farit-Biktimirov 于 2017-08-11

ghost 于 2017-08-11

tapokshot 于 2017-08-11

ivkalita 于 2017-08-11

oynovichkova 于 2017-08-11

jerrdasur 于 2017-08-11

tanist-jon 于 2017-09-09

+1， @utkarshcmu你还在研究这个吗？如果没有，我会尝试一下，但我对 Grafana 开发还很陌生

thattolleyguy 于 2017-10-12

@thattolleyguy - 伙计，我现在不再做这个了。

utkarshcmu 于 2017-10-13

+1
一个建议，因为仪表板更长，我们也可以自动滚动。否则，大多数面板仍隐藏在播放列表中（在电视上）

deepujain 于 2017-10-27

aaronwald99 于 2017-11-15

linpopilan 于 2017-12-15

reyjrar 于 2017-12-26

有关于此功能的消息吗？

这样的作品竟然被扔进了垃圾桶，真是太神奇了。

olo-dw 于 2018-01-09

我没有时间做这件事。我也不太熟悉 grafana 代码，所以如果其他人有兴趣，请随意使用。如果没有，我会在有时间的时候尝试一下。

thattolleyguy 于 2018-01-09

paulopaim 于 2018-01-24

brice86 于 2018-01-31

plrunner 于 2018-02-06

@torkelo有机

davidkarlsen 于 2018-02-09

@davidkarlsen没有此功能的拉取请求，我们处于测试阶段，因此不太可能。功能请求不会得到实施，除非有人处理它们，并且不知道有人在做这件事。

torkelo 于 2018-02-09

啊 - 我有点快 - 似乎https://github.com/grafana/grafana/pull/2841走了很远但后来被放弃了;-(

davidkarlsen 于 2018-02-09

iDemonix 于 2018-04-10

👍1

klems 于 2018-04-16

lgarvey 于 2018-05-01

foxmask 于 2018-05-17

👍1

fdimuccio 于 2018-06-14

在播放列表中使用仪表板 PLUS 查询字符串怎么样？
这将“自动”添加所有变量和时间范围。

在我的例子中，这将是
?orgId=1&var-DATACENTER=dc1&var-FQDN=All&from=now-2d&to=now

rdxmb 于 2018-07-17

发生了什么……花了将近 4 年的时间，而且该功能没有添加主代码……太荒谬了

Tea-NT 于 2018-07-20

👍2

那是必须的！

endersonmaia 于 2018-08-22

👍1

sotona- 于 2018-08-27

👍2

我不明白为什么这样的功能还没有发布......

devlounge 于 2018-09-04

zlosim 于 2018-09-11

sramshaw-driver 于 2018-09-28

这个功能有什么进展吗？这是必须的。没有这个，播放列表几乎和没用一样好，至少在我的情况下。

sunpraveen 于 2018-10-24

我也想看到这个功能 - 目前我不得不为此复制仪表板

0x4c6565 于 2018-10-24

与上面相同，我不得不复制多个屏幕才能使播放列表可用。这个功能会很棒。

rsarg85 于 2018-10-25

👍1

KHiis 于 2018-11-06

KeNaCo 于 2018-11-29

f0rcas 于 2018-12-13

theimdal 于 2019-01-03

lgarvey 于 2019-01-03

michaelgoconnor 于 2019-01-04

bgaifullin 于 2019-01-29

ericzumba 于 2019-01-31

KuroObi 于 2019-02-07

yburke94 于 2019-02-12

dabde 于 2019-02-27

flavioab 于 2019-03-01

mick2004 于 2019-03-06

matejuh 于 2019-03-07

gaizeror 于 2019-03-07

看到这个功能有多少兴趣，很遗憾没有取得进展。
@costimuraru @utkarshcmu ，你知道这个请求的状态吗？我们应该考虑等待这个功能，还是应该寻找替代方案？

samuel-begin 于 2019-03-12

👀2

只是插嘴说我们真的很喜欢合并这个功能！

liamdo 于 2019-04-24

这个月我再试一次！

utkarshcmu 于 2019-04-24

🎉13

如果您需要使用参数显示多个仪表板，一种解决方法是创建一个 html 文件，在 iframe 中显示仪表板，并使用简单的 JS 脚本旋转它们。这就是我用来在我的 raspi 上旋转 grafana 仪表板的东西。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Grafana dashboard rotator</title>

    <style>
        #title {
            position: fixed;
            right: 20px;
            top: 10px;
            color: rgba(255, 0, 0, 0.5);
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            font-weight: bold;
            font-size: 6em;
            font-family: sans-serif;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        #timer {
            position: fixed;
            bottom: 10px;
            right: 20px;
            color: rgba(255, 0, 0, 0.5);
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            font-weight: bold;
            font-size: 2em;
            font-family: sans-serif;
            margin: 0;
        }
    </style>
</head>

<body>

    <h1 id="title"></h1>
    <iframe x-name="SLA PROD EU" src="https://mygrafana.example.com/services-availability?orgId=1&var-ds=Graphite-EU&var-env=prod-eu&var-package=cds-red-bull-high-touch&var-service=All&refresh=30s&from=now-1h&to=now"></iframe>
    <iframe x-name="SLA PROD US" src="https://mygrafana.example.com/services-availability?services-availability?from=now-1h&orgId=1&refresh=30s&to=now&var-ds=Graphite&var-env=prod&var-package=cds-cds&var-service=All"></iframe>
    <iframe x-name="REQUESTS EU" src="https://mygrafana.example.com/services-details?orgId=1&from=now-24h&to=now&var-ds=Graphite-EU&var-env=prod-eu&var-service=All&refresh=30s"></iframe>

    <small id="timer"></small>
    <!-- ROUND ROBIN SCRIPT -->
    <script>

        ; (function (globals) {

            //UMD
            if (typeof define !== 'undefined' && define.amd) { //require.js / AMD
                define([], function () {
                    return rr
                })
            } else if (typeof module !== 'undefined' && module.exports) { //CommonJS
                module.exports = rr
            } else { //script / browser
                globals.rr = rr
            }

            function rr(arr, lastIndex) {
                if (!Array.isArray(arr)) throw new Error("Input is not an array.")
                if (arr.length === 0) return null

                if (arr._rr == null) {
                    arr._rr = 0
                    return arr[0]
                }

                if (arr.length === 1)
                    return arr[0]

                if (typeof lastIndex == 'number')
                    arr._rr = lastIndex

                //is outside of range?
                if (arr._rr >= arr.length - 1 || arr._rr < 0) {
                    arr._rr = 0
                    return arr[0]
                } else {
                    arr._rr += 1
                    return arr[arr._rr]
                }
            }

            rr.splice = function (arr, idx, len) {
                if (!Array.isArray(arr)) throw new Error("Input is not an array.")
                if (arr.length === 0) return

                arr.splice(idx, len);

                if (arr._rr == null) {
                    arr._rr = 0
                    return;
                }

                if (arr._rr >= idx)
                    arr._rr -= 1
            }

            rr.spliceCurrent = function (arr, len) {
                rr.splice(arr, arr._rr, len)
            }

        })(this);
    </script>


    <!-- ROTATOR -->
    <script>
        const interval = 10000; //dashboard switch interval
        const initializingTime = 60000; //initializing time
        const iframes = document.getElementsByTagName('iframe')
        const arr = [...iframes];
        let last = null;

        let count = initializingTime / 1000;
        document.getElementById('title').innerText = `Initializing... (${count}s)`

        const initializingTimer = setInterval(() => {
            count = count > 0 ? count -= 1 : 0;
            document.getElementById('title').innerText = `Initializing... (${count}s)`
        }, 1000)


        let switcherTimer;
        const switcher = () => {
            if (switcherTimer) {
                clearInterval(switcherTimer);
            }

            let count = interval / 1000;
            switcherTimer = setInterval(() => {
                count = count > 0 ? count -= 1 : 0;
                document.getElementById('timer').innerText = `(${count}s)`
            }, 1000)

            const curr = rr(arr)
            curr.scrollIntoView();
            document.getElementById('title').innerText = `${curr.attributes['x-name'].value} (${arr._rr + 1}/${arr.length})`
        }

        setTimeout(() => {
            clearInterval(initializingTimer);

            document.getElementById('title').innerText = `${arr[0].attributes['x-name'].value} (1/${arr.length}) `

            switcher();
            setInterval(switcher, interval)

        }, initializingTime /*give dashboards some time to load*/)

    </script>


    <script>
        //Interval to refresh whole page once per 2 hours. To prevent memory leaks.
        setInterval(() => {
            window.location.reload()
        }, 7200000)
    </script>

</body>

</html>

您可以在 iframe 的 src 属性中设置特定的仪表板 url。

    <iframe x-name="SLA PROD EU" src="https://mygrafana.example.com/services-availability?orgId=1&var-ds=Graphite-EU&var-env=prod-eu&var-package=cds-red-bull-high-touch&var-service=All&refresh=30s&from=now-1h&to=now"></iframe>

旋转间隔在const interval = 10000以毫秒为单位设置。
当然，您也可以添加更多 iframe。