跳至正文

如何粘在Grafana变量Dashboard的顶部(粘在顶部)

Grafana 提供了可以在仪表板中进行灵活过滤的变量。但是,默认情况下,变量并不固定在仪表板的顶部。但是,根据您的需要,它可能需要固定在仪表板的顶部。为了能够在不不断上下滚动的情况下使用过滤,可以通过以下一些方法来解决此问题:

解决

  • 解决这个问题有一个办法,就是额外编写js代码。
    • 解决浏览器层面的问题:可以使用扩展Tampermonkey添加js代码。
    • Grafana 中已解决的问题:您可以使用 Grafana 的动态文本面板添加 js 代码。
  • 我使用动态文本面板添加了js代码。
  • 只需将以下代码添加到动态文本面板即可。
  • 请参阅问题https://github.com/grafana/grafana/issues/11166
    • 在原始源代码中,使用了 section[aria-label="Dashboard submenu"],但是将填充应用于不需要的面板时存在问题,因此 main > div:nth-child(2) > div使用了 :nth -child(3)
// ==UserScript==
// @name Grafana Sticky Variable Bar
// @namespace <insert here url>
// @version 0.6
// @description Makes the variable bar sticky in view and edit screens
// @author gem85247
// @match <insert here url>/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// @run-at document-idle
// ==/UserScript==

function GM_addStyle(css) {
const style = document.getElementById("GM_addStyleBy8626") || (function () {
const style = document.createElement('style');
style.type = 'text/css';
style.id = "GM_addStyleBy8626";
document.head.appendChild(style);
return style;
})();
const sheet = style.sheet;
sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}

GM_addStyle(`
section[aria-label="Dashboard submenu"] {
position: fixed;
top: 81px;
left: 0;
z-index: 100;
width: 100%;
display: flex;
padding: 8px 8px 0px 16px;
-webkit-box-align: center;
align-items: center;
box-shadow: rgb(0, 0, 0) 0px 0.6px 1.5px, rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.23) 0px 5px 10px;
background: rgb(24, 27, 31);
}
`);

GM_addStyle(`
main > div:nth-child(2) > div:nth-child(3){
margin-top: 40px;
}
`);