Cómo pegarse en la parte superior del Panel de variables de Grafana (pegajoso en la parte superior)

Grafana proporciona variables que permiten un filtrado flexible en paneles. Sin embargo, de forma predeterminada, las variables no están fijadas en la parte superior del Panel. Sin embargo, dependiendo de sus necesidades, es posible que deba fijarlo en la parte superior del tablero. Para poder utilizar el filtrado sin tener que desplazarse constantemente hacia arriba y hacia abajo, aquí hay algunas formas de solucionar este problema:

Resolución

• Para resolver el problema, hay una manera de escribir código js adicional.
  • Resuelva el problema a nivel del navegador: puede agregar código js usando la extensión Tampermonkey.
  • Problema resuelto en Grafana: puedes agregar código js usando el panel de texto dinámico de Grafana.
• Agregué código js usando el Panel de texto dinámico.
• Simplemente agregue el siguiente código al Panel de texto dinámico.
• Consulte el problema https://github.com/grafana/grafana/issues/11166.
  • En el código fuente original, se usaba section[aria-label="Dashboard submenu"], pero había un problema al aplicar relleno a paneles no deseados, por lo que main > div:nth-child(2) > div Se utilizó :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;
  }
`);