Comment coller en haut du tableau de bord des variables Grafana (collant en haut)

Grafana fournit des variables qui permettent un filtrage flexible dans les tableaux de bord. Cependant, par défaut, les variables ne sont pas fixées en haut du tableau de bord. Cependant, selon vos besoins, il faudra peut-être l'épingler en haut du tableau de bord. Pour pouvoir utiliser le filtrage sans faire défiler constamment de haut en bas, voici quelques façons de contourner ce problème :

Résolution

• Pour résoudre le problème, il existe un moyen d'écrire du code js supplémentaire.
  • Résolvez le problème au niveau du navigateur : vous pouvez ajouter du code js en utilisant l'extension Tampermonkey.
  • Problème résolu dans Grafana : vous pouvez ajouter du code js à l'aide du panneau de texte dynamique de Grafana.
• J'ai ajouté du code js à l'aide du Dynamic Text Panel.
• Ajoutez simplement le code ci-dessous au panneau de texte dynamique.
• Reportez-vous au problème https://github.com/grafana/grafana/issues/11166.
  • Dans le code source d'origine, section[aria-label="Dashboard submenu"] était utilisé, mais il y avait un problème avec le remplissage appliqué aux panneaux indésirables, donc main > div:nth-child(2) > div :nth -child(3) a été utilisé.

// ==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;
  }
`);