How can I change the grafana icon after I've built from source?

1

I’ve built from source and I’m running my Grafana server locally with community.grafana.com. For some reason, I can’t get changes to /public/img/grafana_icon.svg to register with the site, and when I change the html file from
<img src="public/img/grafana_icon.svg"></img>
to
<img src="public/img/my_logo.png"></img>
it changes the icon to a broken image link: see here. I have also tried to replace grafana_icon.svg with a random svg I got off of the internet by moving the random svg to the file and renaming it grafana_icon.svg, but this makes no change on the site. Does anyone know of a way to change the Grafana logo in the top left of the dahsboard?

2

Are you just modifying the Grafana release or are you building from source?

Are you sure the link is correct? If you right click on it and open the image in a new tab, does it work? Here is the logo from Grafana’s demo site as an example.

3

I built from source. What do you mean the link? I am using relative paths to grab the image rather than links to external images. Here is what all I have tried:

(All of these steps were taken while running both grunt watch and bra run)

  • Downloading a random .svg file from the internet called dapper_jack_orange.svg, then doing cp ~/Documents/downloads/.../dapper_jack_black.svg ~/go/src/github.com/grafana/grafana/public/img/grafana_icon.svg. I made sure that the changes were made by going into the img folder and typing eog grafana_icon.svg. What showed up was the picture of the pumpkin from dapper_jack_orange.svg. I refresh the page and the original grafana icon persists even though it no longer exists in the source files. I tried this with at least 5 different .svg files that came installed in public/img/ when I grabbed grafana. All files acted in the same way - regardless of what I changed the actual image to, it would display the original image that no longer existed in source.

  • I tried downloading a random .png from the web, scaling it to 30x30 in gimp, and changing the image link from grafana_icon.svg to the my_logo.png in the relevant html file (I believe it is navbar.html). This displays the broken image that I posted above. I tried a few different images with file names that did not exist in the original public/img/ directory, and they all provide broken links.

  • I tried taking page_header_line.png, one of the original .png files from public/img/ and inserting it into the html file in place of grafana_icon.svg, and it worked. It displayed the page_header_line.png image as the top left logo rather than the grafana icon. I then tried to alter page_headerline.png in gimp, saving the file, and refreshing the page. It continued to display page_header_line.png without any of the changes I had made. Note that after any change I made to an image, I checked to make sure the changes were actually made by running eog filename.

  • I tried all of the above steps after disconnecting from the internet, thinking that maybe the images were somehow being pulled from an online repository based on filename. This produced the exact same results.

It seems to me like the icon and possibly all of the images from public/img/ are somehow protected, or I’m an idiot and there is a simple solution here that I am missing.

4

Two things to try:

  1. Check that the direct link to the image works: http://grafana.staged-by-discourse.com/public/img/grafana_icon.svg

  2. Make sure your browser is not caching the icon. Check the disable cache checkbox in Chrome Dev Tools:

    While the Chrome Dev Tools are open, click and hold on the refresh button to do a hard reload and empty the cache:

Or just test on a different browser to make sure it is not caching.

5

I just tried using a direct link to an external source (some random dog image I googled) and it displays. However, it displays the alt text until I click on the icon and then it will display the image.

Now for your steps:

  1. http://grafana.staged-by-discourse.com/public/img/grafana_icon.svg produces the grafana logo. Why is this? That does not match what I have stored in the source files.
  2. Emptying the cache and hard reloading does not change the icon to what I have saved in ~/go/src/github.com/grafana/grafana/public/img/grafana_icon.svg
6

Does the direct link show your new logo or does it show the Grafana logo?

7

Now for your steps:

http://grafana.staged-by-discourse.com/public/img/grafana_icon.svg produces the grafana logo. Why is this? That does not match what I have stored in the source files.
8

You have run grunt and generated all the Grafana content in the public_gen directory? If you check the public_gen/img/grafana_icon.svg file is it your file?

9

I have been changing the files in the public folder and not the public_gen directory. I believe you told me on stackoverflow to make my changes to the public directory because the public_gen directory gets overwritten. Should I be making my changes to the public_gen directory?

10

No, but you have to run grunt or the file will not get copied over to public_gen.

The reasons for why you should not change the file in public_gen are:

  • public_gen is ignored in the gitignore so you will not be able to commit your change to git.
  • If you ever make another change, JavaScript or css and then run grunt to build the JS and CSS files then your change will get overwritten.
11

What do you mean I have to run grunt? I run grunt watch every time I make a change to any of the files that affect the front-end. It does not then make that change to the corresponding file in public_gen. Are you saying I should I be running grunt instead?

12

no, same thing pretty much except in this case with images. I just tested myself. Changed the svg file and ran grunt and it worked. grunt watch does not seem to copy image files (as they are hardly ever changed).

13

So if I now run grunt it will make the changes to public_gen so that it matches public?

14

Yes, grunt without a task parameter specified runs the default build task which builds everything front end-related. grunt watch runs a subset of the build task which is much faster and is what we use when developing.

15

Hey guys, i’m having the same problem but i didnt understand about public_gen and grunt…
grunt means like chmod at the archive perhaps ?!

16

Grunt is a build tool for JavaScript (like make). When you build the source files (that are mostly TypeScript), it outputs the result (plain JavaScript that a browser can execute) to public_gen.

17

Hi, I have bee doing the same thing, I wanna change the HTML, CSS, back end, front end. But when whenever I change something, it gets reflected for the 1st time when I run “npm run build” and then “yarn watch”, but after another update when I build it again, everything gets vanished. I am not sure what I am missing. Can you guide?
I am changing the files in public folder.

18

Hi daniellee,
I have installed Grafana 6.6.2 as standalone on Ubuntu.
What if I changed a code in typescript files in public/app/core/services. How do I built it? I dont want to build it from source code.

19

If you don’t want to build from source code then you will have to search and replace in the generated JavaScript files (plain JavaScript is generated from TypeScript in the build step). Those files are located in the public/build folder.

1 Like