how-to-make-grafana-variables-sticky-on-top

---

---

Grafana variables Dashboard 상단 고정 방법 (sticky on top)

Grafana는 대시보드에서 유연한 필터링을 가능하게 하는 variables(변수)를 제공합니다. 그러나 기본적으로 variables(변수)는 대시보드(Dashboard)의 상단에 고정되지 않습니다. 하지만, 필요에 따라서는 대시보드의 상단에 고정되어야 하는 경우가 있습니다. 지속적으로 위아래로 스크롤을 하지 않고 필터링을 사용할 수 있도록 하기 위해, 이 문제를 해결하기 위해 다음과 같은 방법으로 문제를 해결할 수 있습니다.

해결 방법

• 문제를 해결하기 위해서는 js 코드를 추가로 작성하는 방법이 있습니다.
  • 브라우저 단에서 문제 해결 : 확장 프로그램인 Tampermonkey를 사용하여 js 코드를 추가할 수 있습니다.
  • Grafana 단에서 문제 해결 : Grafana의 Dynamic Text Panel을 사용하여 js 코드를 추가할 수 있습니다.
• 저는 Dynamic Text Panel을 사용하여 js 코드를 추가하였습니다.
• 아래의 코드를 Dynamic Text Panel에 추가하면 됩니다.
• https://github.com/grafana/grafana/issues/11166 이슈를 참고하였습니다.
  • 원래 출처의 코드에서는 section[aria-label="Dashboard submenu"]를 사용하였지만, 원하지 않은 패널에서 padding 이 적용되는 문제가 있어서, 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;
  }
`);