如何黏在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;
  }
`);