Customização da tela de Login do Grafana

Customização gráfica do Grafana, realizado na versão 7.5 e já testado na 8.0. É necessário editar o código fonte original fazer as alterações desejadas e refazer a minificação do JavaScript da aplicação do Grafana em ambiente de desenvolvimento para então copiar os mesmos para produção.

IMPORTANTE: A cada atualização do Grafana, os passos devem ser repetidos, uma vez que a atualização sobrescreve os arquivos alterados.

Preferencialmente é indicado usar uma VM Linux (o tutorial está usando um Ubuntu 20.04) para o ambiente de desenvolvimento descrito abaixo.

1) Instalar dependências:

Instale o Git:

sudo apt update
sudo apt install git

Faça o download da GoLang:

cd /tmp
curl -O https://storage.googleapis.com/golang/go1.16.3.linux-amd64.tar.gz
tar -xvf go1.16.3.linux-amd64.tar.gz
sudo chown -R root:root ./go
sudo mv go /usr/local

Ajustar arquivo de profile para as variáveis de ambiente, adicione ao final do arquivo “~/.profile”:

export GOPATH=$HOME/projetos/go
export PATH=$PATH:/usr/local/go/bin:$GOPATH/bin

Feche o terminal de trabalho que estiver usando (ou faça logout) e abra novamente para que funcione a atualização do profile, depois disso teste o comando:

go version

Download e instalação do Node.js, npm e yarn:

cd /tmp
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install build-essential libssl-dev nodejs
sudo npm install --global yarn

Depois disso teste os comandos:

node -v
npm -v
yarn -v

2) Buscar o fonte do Grafana, escolher a versão e instalar dependências:

Download do fonte:

cd ~/projetos/
git clone https://github.com/grafana/grafana.git

Escolha a versão do seu Grafana (v7.5.7 no meu exemplo — Uma atualização: o tutorial já foi testado e está funcionando na 8.0):

cd ~/projetos/grafana
git checkout v7.5.7

Instalar dependências do frontend usando o yarn:

yarn install --pure-lockfile

3) Rodar o ambiente de desenvolvimento:

Use dois terminais no linux ou duas conexões à VM, ambos na pasta do fonte do Grafana:

No primeiro terminal compile e execute o servidor de backend:

cd ~/projetos/grafana
make run

Deixe o servidor rodando nesse primeiro terminal, você vai saber que ele está rodando da forma certa quando o terminal parar na seguinte log:

INFO[06-08|22:13:40] HTTP Server Listen logger=http.server address=[::]:3000 protocol=http subUrl= socket=

No segundo terminal execute o yarn para a aplicação de frontend:

cd ~/projetos/grafana
yarn start

Deixe o yarn rodando nesse segundo terminal e aguarde (demora um pouco) ele dar a seguinte mensagem:

[./public/sass/grafana.dark.scss] 39 bytes {dark} [built] 
[./public/sass/grafana.light.scss] 39 bytes {light} [built] 
    + 6904 hidden modules 
No issues found.

Acesse o Grafana de desenvolvimento no browser o http://localhost:3000

4) Realizar as customizações:

Arquivo de Marca: public/app/core/components/Branding/Branding.tsx

1. Você pode alterar as opções abaixo de “export class Branding” para alterar os textos:

Para alterar os textos

2. Você pode adicionar suas imagens em public/img e alterar o caminho dos img nos Logos destacados abaixo:

Para alterar imagens

Para ver as mudanças no http://localhost:3000 a aplicação do frontend local deve ser reiniciada manualmente parando a mesma com Ctrl+C e executando novamente o “yarn start”.

5) Fazer a build final para produção

Após customizar, rode o ‘yarn start’ mais uma vez, pare o mesmo (Control+C) e certifique-se que a pasta public contem os seguintes dados:

cd ~/projetos/grafana
ls -w1 public                                                                             
app 
build 
dashboards 
emails 
fonts 
img 
robots.txt 
sass 
test 
vendor 
views

Substitua a pasta public do Grafana de produção pela nova e reinicie o serviço, abaixo eu mostro como fazer via ssh com scp, você pode fazer como preferir:

Copiar arquivos para diretório temporário no servidor:

scp -rv $GOPATH/src/github.com/grafana/grafana/public user@meu.servidor.grafana:/tmp

No servidor preparar a substituição:

ssh user@meu.servidor.grafana
cd /tmp
mv public/ public-novo/
mv public-novo/ /usr/share/grafana

Substituir a pasta e reiniciar o serviço:

service grafana-server stop
mv public/ public-velho/
mv public-novo public/
service grafana-server start

Rollback no caso de problemas:

service grafana-server stop
mv public/ public-novo/
mv public-velho/ public/
service grafana-server start

Resultado nas telas de login e logo da navegação: