So kleben Sie es oben auf das Grafana-Variablen-Dashboard (oben kleben)

Grafana stellt Variablen bereit, die eine flexible Filterung in Dashboards ermöglichen. Standardmäßig sind Variablen jedoch nicht oben im Dashboard fixiert. Abhängig von Ihren Anforderungen muss es jedoch möglicherweise oben im Dashboard angeheftet werden. Um die Filterung nutzen zu können, ohne ständig nach oben und unten scrollen zu müssen, gibt es folgende Möglichkeiten, dies zu umgehen:

Auflösung

• Um das Problem zu lösen, gibt es eine Möglichkeit, zusätzlichen JS-Code zu schreiben.
  • Lösen Sie das Problem auf Browserebene: Sie können JS-Code mithilfe der Erweiterung Tampermonkey hinzufügen.
  • Problem in Grafana gelöst: Sie können JS-Code mithilfe des dynamischen Textfelds von Grafana hinzufügen.
• Ich habe JS-Code mithilfe des Dynamic Text Panel hinzugefügt.
• Fügen Sie einfach den folgenden Code zum dynamischen Textfeld hinzu.
• Siehe das Problem https://github.com/grafana/grafana/issues/11166.
  • Im ursprünglichen Quellcode wurde „section[aria-label="Dashboard submenu"]verwendet, aber es gab ein Problem mit der Auffüllung unerwünschter Panels, alsomain > div:nth-child(2) > div :nth -child(3)` wurde verwendet.

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