Customização gráfica do Grafana, testada para as versões 7.x. É 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.
Preferencialmente é indicado usar uma VM Linux (o tutorial está usando um Ubuntu 20.04) para o ambiente de desenvolvimento descrito abaixo.
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.9.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
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):
git checkout v7.5.7
Instalar dependências do frontend usando o yarn:
yarn install --pure-lockfile
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
Arquivo de Marca: public/app/core/components/Branding/Branding.tsx
- Você pode alterar as opções abaixo de “export class Branding” para alterar os textos:
- Você pode adicionar suas imagens em public/img e alterar o caminho dos img nos Logos destacados abaixo:
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”.
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