Hintergrund von Grafana Dashboard in VIS entfernen

RkcCorian

@spacerx Ahhh, vielen Dank! Ich nutze ganze Dashboards. Folgendes geht jetzt als mygrafana.css...

@charset "UTF-8";

:root {
   color-scheme: none !important;
}

body {
   background: transparent !important;
}

Marko_P

Also ich habe es jetzt anders gemacht

ich bin nach dieser Anleitung vorgegangen

https://github.com/grafana/grafana/discussions/38165

Pfad: /usr/share/grafana/public/views/index.html
in Zeile 2 (bei mir) nach ><style> suchen und einfügen

:root { color-scheme: none !important; }
body.dashboard-solo { background: none; }

<!doctype html><html lang="de"><head>[[ if and .CSPEnabled .IsDevelopmentEnv ]]<meta http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>[[ end ]]<meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width"/><meta name="theme-color" content="#000"/><title>[[.AppTitle]]</title><base href="[[.AppSubUrl]]/"/><link rel="icon" type="image/png" href="[[.FavIcon]]"/><link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]"/><link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28"/>[[ if eq .Theme "light" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.light.1d77523c18081c26d59e.css"/>[[ else if eq .Theme "dark" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.dark.14180bda173a5cc72267.css"/>[[ end ]]<script nonce="[[.Nonce]]">performance.mark('frontend_boot_css_time_seconds');</script><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="msapplication-TileColor" content="#2b5797"/><meta name="msapplication-config" content="public/img/browserconfig.xml"/></head><body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]"><style>
 	:root { color-scheme: none !important; }
   body.dashboard-solo { background: none; }
   .preloader {
       height: 100%;
       flex-direction: column;
       display: flex;
       justify-content: center;
       align-items: center;

     }

     .preloader__enter {
       opacity: 0;
       animation-name: preloader-fade-in;
       animation-iteration-count: 1;
       animation-duration: 0.9s;
       animation-delay: 1.35s;
       animation-fill-mode: forwards;
     }

     .preloader__bounce {
       text-align: center;
       animation-name: preloader-bounce;
       animation-duration: 0.9s;
       animation-iteration-count: infinite;
     }

     .preloader__logo {
       display: inline-block;
       animation-name: preloader-squash;
       animation-duration: 0.9s;
       animation-iteration-count: infinite;
       width: 60px;
       height: 60px;
       background-repeat: no-repeat;
       background-size: contain;
       background-image: url('[[.LoadingLogo]]');
     }

     .preloader__text {
       margin-top: 16px;
       font-weight: 500;
       font-size: 14px;
       font-family: Sans-serif;
       opacity: 0;
       animation-name: preloader-fade-in;
       animation-duration: 0.9s;
       animation-delay: 1.8s;
       animation-fill-mode: forwards;
     }

     .theme-light .preloader__text {
       color: #52545c;
     }

     .theme-dark .preloader__text {
       color: #d8d9da;
     }

     @keyframes preloader-fade-in {
       0% {
         opacity: 0;
         /*animation-timing-function: linear;*/
         animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
       }
       100% {
         opacity: 1;
       }
     }

     @keyframes preloader-bounce {
       from,
       to {
         transform: translateY(0px);
         animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
       }
       50% {
         transform: translateY(-50px);
         animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
       }
     }

     @keyframes preloader-squash {
       0% {
         transform: scaleX(1.3) scaleY(0.8);
         animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
         transform-origin: bottom center;
       }
       15% {
         transform: scaleX(0.75) scaleY(1.25);
         animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
         transform-origin: bottom center;
       }
       55% {
         transform: scaleX(1.05) scaleY(0.95);
         animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
         transform-origin: top center;
       }
       95% {
         transform: scaleX(0.75) scaleY(1.25);
         animation-timing-function: cubic-bezier(0, 0, 0, 1);
         transform-origin: bottom center;
       }
       100% {
         transform: scaleX(1.3) scaleY(0.8);
         transform-origin: bottom center;
         animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
       }
     }

     /* Fail info */
     .preloader__text--fail {
       display: none;
     }

     /* stop logo animation */
     .preloader--done .preloader__bounce,
     .preloader--done .preloader__logo {
       animation-name: none;
       display: none;
     }

     .preloader--done .preloader__logo,
     .preloader--done .preloader__text {
       display: none;
       color: #ff5705 !important;
       font-size: 15px;
     }

     .preloader--done .preloader__text--fail {
       display: block;
     }

     [ng\:cloak],
     [ng-cloak],
     .ng-cloak {
       display: none !important;
     }</style><div class="preloader"><div class="preloader__enter"><div class="preloader__bounce"><div class="preloader__logo"></div></div></div><div class="preloader__text">Loading Grafana</div><div class="preloader__text preloader__text--fail"><p><strong>If you're seeing this Grafana has failed to load its application files</strong><br/><br/></p><p>1. This could be caused by your reverse proxy settings.<br/><br/>2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not using a reverse proxy make sure to set serve_from_sub_path to true.<br/><br/>3. If you have a local dev build make sure you build frontend using: yarn start, or yarn build<br/><br/>4. Sometimes restarting grafana-server can help<br/><br/>5. Check if you are using a non-supported browser. For more information, refer to the list of <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">supported browsers</a>.</p></div><script nonce="[[.Nonce]]">// Check to see if browser is not supported by Grafana
       // Source file in app/core/utils/browser.ts & tests make edits there and copy compiled typescript here
       function checkBrowserCompatibility() {
         var isIE = navigator.userAgent.indexOf('MSIE') > -1;
         var isEdge = navigator.userAgent.indexOf('Edge/') > -1 || navigator.userAgent.indexOf('Edg/') > -1;
         var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

         /* Check for
         <= IE11 (Trident 7)
         Edge <= 16
         Firefox <= 64
         Chrome <= 54
         */
         var isEdgeVersion = /Edge\/([0-9.]+)/.exec(navigator.userAgent);

         if (isIE && parseFloat(/Trident\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 7) {
           return false;
         } else if (
           isEdge &&
           ((isEdgeVersion && parseFloat(isEdgeVersion[1]) <= 16) ||
             parseFloat(/Edg\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 16)
         ) {
           return false;
         } else if (isFirefox && parseFloat(/Firefox\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 64) {
           return false;
         } else if (isChrome && parseFloat(/Chrome\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 54) {
           return false;
         }

         return true;
       }

       if (!checkBrowserCompatibility()) {
         alert('Your browser is not fully supported, please try newer version.');
       }</script></div><div id="reactRoot"></div><script nonce="[[.Nonce]]">window.grafanaBootData = {
       user: [[.User]],
       settings: [[.Settings]],
       navTree: [[.NavTree]],
       themePaths: {
         light: '[[.ContentDeliveryURL]]public/build/grafana.light.1d77523c18081c26d59e.css',
         dark: '[[.ContentDeliveryURL]]public/build/grafana.dark.14180bda173a5cc72267.css'
       }
     };

     // Set theme to match system only on startup.
     // Do not react to changes in system theme after startup.
     if (window.grafanaBootData.user.theme === "system") {
       document.body.classList.remove("theme-system");
       var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
       var cssLink = document.createElement("link");
       cssLink.rel = 'stylesheet';

       if (darkQuery.matches) {
         document.body.classList.add("theme-dark");
         cssLink.href = window.grafanaBootData.themePaths.dark;
         window.grafanaBootData.user.lightTheme = false;
       } else {
         document.body.classList.add("theme-light");
         cssLink.href = window.grafanaBootData.themePaths.light;
         window.grafanaBootData.user.lightTheme = true;
       }
       document.head.appendChild(cssLink);
     }

     window.__grafana_load_failed = function() {
       var preloader = document.getElementsByClassName("preloader");
       if (preloader.length) {
         preloader[0].className = "preloader preloader--done";
       }
     }

     // In case the js files fails to load the code below will show an info message.
     window.onload = function() {
       if (window.__grafana_app_bundle_loaded) {
         return;
       }
       window.__grafana_load_failed();
     };

     [[if .ContentDeliveryURL]]
       window.public_cdn_path = '[[.ContentDeliveryURL]]public/build/';
     [[end]]
     [[if .Nonce]]
       window.nonce = '[[.Nonce]]';
     [[end]]</script>[[if .GoogleTagManagerId]]<script nonce="[[.Nonce]]">dataLayer = [
       {
         IsSignedIn: '[[.User.IsSignedIn]]',
         Email: '[[.User.Email]]',
         Name: '[[.User.Name]]',
         UserId: '[[.User.Id]]',
         OrgId: '[[.User.OrgId]]',
         OrgName: '[[.User.OrgName]]',
       },
     ];</script><noscript><iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript><script nonce="[[.Nonce]]">(function (w, d, s, l, i) {
       w[l] = w[l] || [];
       w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
       var f = d.getElementsByTagName(s)[0],
         j = d.createElement(s),
         dl = l != 'dataLayer' ? '&l=' + l : '';
       j.async = true;
       j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
       f.parentNode.insertBefore(j, f);
     })(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');</script>[[end]]<script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/runtime.abe7fb813bed3fe11f58.js"></script><script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/8683.9259ad853ca27103e2cc.js"></script><script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/5226.48dbd59a341e1b9072d3.js"></script><script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/5302.4d5cb84855a9594c7d9c.js"></script><script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/2077.a35416a524fb1433fe6e.js"></script><script nonce="[[.Nonce]]" src="[[.ContentDeliveryURL]]public/build/app.7885149575f6aa51eb86.js"></script><script nonce="[[.Nonce]]">performance.mark('frontend_boot_js_done_time_seconds');</script></body></html>

? Offline

Moin,

ich bitte schon mal um Entschuldigung, ich habe nicht alles gelesen.
Vielleicht wurde das ja schon vorgeschlagen, erwähnt, aber ich bin letztens auf ein Grafana-Plugin gestoßen, das sehr interessant ausschaut, um in Panel oder Dashboards den Hintergrund zu ändern.
Vielleicht hilf es ja dem einen oder anderen

Hier geht es zum Plugin -> https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel/
Installation ist easy

VG
Bernd

Pamf

Hat jemand von Euch unter der aktuellen Grafana-Version 10.x einen transparenten Hintergrund realisieren können? Bei mir funktioniert das Boom-Theme nicht, ebenso nicht die custom css.

bloop

@pamf
Ja, geht mit der index.html.
Ist im Beitrag beschrieben.

Pamf

@bloop Wo mache ich dann den Fehler?

In /usr/share/grafana/public/views/index.html:

...<meta name="msapplication-config" content="public/img/browserconfig.xml"/><link rel="stylesheet" href="http://192.168.178.65:8082/vis.0/mygrafana.css" type="text/css"></head>...

in mygrafana.css:

@charset "UTF-8";
 
:root {
   color-scheme: none !important;
}
 
body {
   background: transparent !important;
}

Dann diese Datei über den Dateimanager in VIS hochladen:

Ablageort mygrafana.png

Es gibt keine Änderung bei den eingebetteten Grafana-dashboards, auch nicht bei den reinen Panels

bloop

@pamf
Hast du auch diene IP Addresse im index.html eingegeben?
Es sieht für mich nach er IP Addresse im Guide aus.

Pamf

@bloop Danke für den Versuch mir Hoffnung zu geben Leider ist die IP korrekt, dass ist mein IoBroker.

bloop

@pamf
Ich musste nach dem Upgrade von 9 auf 10 bei mir lediglich wieder die index.html anpassen anschließend hat es wieder einwandfrei funktioniert.

meine mygrafana.css sieht jedoch etwas anders aus.

@charset "UTF-8";
 
 :root {
	color-scheme: none !important;
}
.panel-container {
    background-color: transparent !important; 

}

Noch etwas:
Wenn du die .css via Dateiupload in über VIS aktualisierst nicht den selben Dateinamen verwenden und selbstverständlich in der index.html auch den Dateinamen anpassen. Da hat es bei mir auch mehrmals gehackt.

Pamf

@bloop Hab alles nochmal versucht, auch mit anderem Dateinamen. Leider kein Erfolg. Ich gebe es erstmal auf damit, so schlimm ists ja auch nicht. Danke trottdem

saeft_2003

@feuersturm sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

Über die Theme Datei habe ich keine Möglichkeit gefunden den Rand zu entfernen bzw. diesen einzufärben.
Ich habe aber durch diese Quelle (https://community.grafana.com/t/how-to-share-panel-without-background-color/9909/4) einen anderen Weg gefunden der funktioniert

1. index.html von Grafana verändern

Pfad: usr\share\grafana\public\views\index.html

vor </head> folgendes hinzufügen
<link rel="stylesheet" href="http://192.xxx.xxx.xxx:8082/vis.0/mygrafana.css" type="text/css">
Die hier angezogene mygrafana.css Datei wird im folgenden Schritt erstellt

2. mygrafana.css

Datei mygrafana.css mit folgendem Inhalt erstellen (Die Farbwerte passt ihr einfach nach euren Wünschen an.)
@charset "UTF-8";
 
.panel-container {
    background-color: #3cbaa7 !important; /*Hintergrundfarbe vom Container*/
    border: 0px solid #3cbaa7 !important;
}
 
.dashboard-container{
    background-color: #561c8c !important; /*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
}
Datei über ioBroker VIS Editor mit dem Dateimanager "Menüpunkt "Setup → Dateimanager" hochladen. Erst danach ist die Datei auch wirklich für Grafana erreichbar

Wenn Änderungen an der mygrafana.css Datei vorgenommen werden, muss zuerst die css Datei wieder über den Dateimanager gelöscht werden und danach die neue Version der mygrafana.css hochgeladen werden

3. Grafana neu starten

Damit die Änderungen in der index.hmtl wirksam werden muss Grafana gestoppt und wieder gestartet werden

service grafana-server stop

service grafana-server start

Ergebnis

Die in der css Datei eingestellten Farben werden angewendet, wenn ihr das Dashboard über ein iframe + Link einbindet oder wenn ihr in Grafana den "Direct link rendered image" nutzt.

Kurze Frage dazu. Ich habe grafana 8 in einer VM laufen. Hier funktioniert das ganze wi du es beschrieben hast. Jetzt habe ich ein LXC mit grafana 10 erstellt. Dort habe ich es genauso versucht, leider ohne Erfolg. Mach ich etwas falsch oder geht es unter grafana 10 so nicht mehr?

Feuersturm

@saeft_2003 Ich hab es mit Grafana10 noch nicht wieder ausprobiert, kann dir daher leider nicht sagen ob es weiterhin gehen sollte oder ob die Änderung mittlerweile anders aussehen muss.

saeft_2003

@feuersturm

OK. Gibt es unter grafana 10 eine andere Möglichkeit den Hintergrund transparent oder eine feste Farbe zu machen?

Feuersturm

@saeft_2003 ich bin da aktuell raus, da ich in meiner vis kein grafana mehr einbette. Hab es nicht wirklich genutzt und daher ist es raus geflogen.

bloop

@saeft_2003 Ich habe Grafana 10 am laufen und es funktioniert.
Musste nach dem Upgrade allerdings die index.html erneut anpassen.

weiterhin zu finden unter:
/usr/share/grafana/public/views/index.html

<link rel="stylesheet" href="http://IPvonIobroker/vis.0/mygrafana4.css" type="text/css">

saeft_2003

@bloop

Cool danke das muss ich ausprobieren!

saeft_2003

@bloop sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

@saeft_2003 Ich habe Grafana 10 am laufen und es funktioniert.
Musste nach dem Upgrade allerdings die index.html erneut anpassen.

weiterhin zu finden unter:
/usr/share/grafana/public/views/index.html
<link rel="stylesheet" href="http://IPvonIobroker/vis.0/mygrafana4.css" type="text/css">

Geht bei mir nicht mit meiner css.

Postest du bitte mal die Datei mygrafana4.css

bloop

@saeft_2003
Besteht lediglich aus:

@charset "UTF-8";
 
 :root {
	color-scheme: none !important;
}
.panel-container {
    background-color: transparent !important; 

}

index.html:

<!doctype html><html lang="en"><head>[[ if and .CSPEnabled .IsDevelopmentEnv ]]<meta http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>[[ end ]]<meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width"/><meta name="theme-color" content="#000"/><title>[[.AppTitle]]</title><base href="[[.AppSubUrl]]/"/><link rel="icon" type="image/png" href="[[.FavIcon]]"/><link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]"/><link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28"/>[[ if eq .ThemeType "light" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.light.469af479381f2d6cb442.css"/>[[ else if eq .ThemeType "dark" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.dark.886efb710af4d17a895d.css"/>[[ end ]]<script nonce="[[.Nonce]]">performance.mark('frontend_boot_css_time_seconds');</script><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="msapplication-TileColor" content="#2b5797"/><meta name="msapplication-config" content="public/img/browserconfig.xml"/>

<link rel="stylesheet" href="http://IPAdresse/vis.0/mygrafana4.css" type="text/css">

</head>

<body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]"><style>

body.dashboard-solo { background: none !important; }

.preloader__enter {
        opacity: 0;
        animation-name: preloader-fade-in;
        animation-iteration-count: 1;
        animation-duration: 0.9s;
        animation-delay: 1.35s;
        animation-fill-mode: forwards;
      }

      .preloader__bounce {
        text-align: center;
        animation-name: preloader-bounce;
        animation-duration: 0.9s;
        animation-iteration-count: infinite;
      }

usw.

saeft_2003

@bloop

bei mir will es nicht funktionieren. Wenn ich die index datei von dir übernehme zerhaut es mir die ganzen charts... Wenn ich den head abschnitt von meiner grafana 8 index datei nehme startet grafna 10 nicht mehr.

So hab ich es jetzt aber der Hintergrund beibt der originale,

Index:

<!DOCTYPE html>
<html lang="[[.User.Language]]">
  <head>
    [[ if and .CSPEnabled .IsDevelopmentEnv ]]
    <!-- Cypress overwrites CSP headers in HTTP requests, so this is required for e2e tests-->
    <meta  http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>
    [[ end ]]
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <meta name="theme-color" content="#000" />

    <title>[[.AppTitle]]</title>

    <base href="[[.AppSubUrl]]/" />

    <link rel="icon" type="image/png" href="[[.FavIcon]]" />
    <link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
    <link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />

    <!-- If theme is "system", we inject the stylesheets with javascript further down the page -->
    [[ if eq .ThemeType "light" ]]
    <link rel="stylesheet" href="[[.ContentDeliveryURL]][[.Assets.CSSLight]]" />
    [[ else if eq .ThemeType "dark" ]]
    <link rel="stylesheet" href="[[.ContentDeliveryURL]][[.Assets.CSSDark]]" />
    [[ end ]]

    <script nonce="[[.Nonce]]">
      performance.mark('frontend_boot_css_time_seconds');
    </script>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-TileColor" content="#2b5797" />
    <meta name="msapplication-config" content="public/img/browserconfig.xml" />
    <link rel="stylesheet" href="http://192.168.178.90:8082/vis.0/mygrafana2.css" type="text/css">
  </head>

CSS:

@charset "UTF-8";

 

 :root {

	color-scheme: none !important;

}

.panel-container {

    background-color: transparent !important; 

 

}

Hast du noch eine Idee was ich probieren kann?

bloop

@saeft_2003
Hast du mal versucht

body.dashboard-solo { background: none !important; }

unter Style einzufügen?

<body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]"><style>
 
body.dashboard-solo { background: none !important; }
 
.preloader__enter {
        opacity: 0;

Ebenfalls würde ich die mygrafana.css komplett löschen. Vis neu starten anschließend neu hochladen und Grafana neu starten.

NEWS

Hintergrund von Grafana Dashboard in VIS entfernen

Support us

727

32.4k

81.4k

1.3m