Grafana variables Dashboard トップの固定方法 (sticky on top)

Grafanaはダッシュボードで柔軟なフィルタリングを可能にする変数を提供します。ただし、デフォルトでは変数（変数）はダッシュボードの上部に固定されていません。ただし、必要に応じてダッシュボードの上部に固定する必要がある場合があります。継続的に上下にスクロールせずにフィルタリングを有効にするには、この問題を解決するために、次の方法で問題を解決できます。

回避策

*問題を解決するには、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;
  }
`);