Editando dashboard Grafana com CSS

Como personalizar um dashboard Grafana com CSS

Eventualmente temos a necessidade de personalizar alguns elementos da aparência dos dashboards Grafana, porém não estão disponíveis pelas opções normais de configuração dos panels.

Uma alternativa “hack” que pode ser utilizado para esses casos, é a edição diretamente do CSS do dashboard, permitindo um nível de personalização que vai além do tradicional previsto como opções de configuração dos panels.

Esse tipo de configuração pode gerar efeitos indesejados no visual do seu dashboard, então utilize somente como um último recurso e para configurações pontuais. Após qualquer edição de CSS realize diversos testes com seu dashbaord para validar os efeitos.

Configuração necessária

O Grafana vem por padrão com uma opção que desabilita essa possibilidade, o motivo é a segurança, ao permitir que o Grafana interprete código CSS e/ou Javascript nos text panels, você pode estar vulnerável a ataques do tipo XSS “Cross-site scripting”.

Para permitir o uso desse recurso é necessário habilitar a opção disable_sanitize_html, configurando como True logo abaixo da sessão [panels] no arquivo de configuração grafana.ini , após alterar essa configuração e reiniciar o serviço do Grafana, ele já deve estar apto a aceitar esse tipo de configuração.

Editando CSS

Para conseguirmos editar o CSS do dashboard usaremos um painel do tipo text sem título e com a transparência ativa, fazendo com que fique invisível no dashboard, sua função será apenas sobrescrever o CSS.

Exemplo prático 1 — Alterar o tamanho da fonte do título de todos os panels do dashboard

Utilizando o recurso de inspecionar elemento do navegador, podemos verificar que os títulos de todos os panels possuem a classe panel-title-text

No painel invisível que criamos no passo anterior, vamos definir um novo estilo para essa classe, utilizando css.

<style>
  .panel-title-text{
    font-size:24px
  }
</style>

Como resultado temos todos os painel desse dashboard com o tamanho da fonte do título em 24px, configuração que hoje não tem disponível para ser feita pela interface do Grafana.

Exemplo prático 2 — Alterar a cor do título do painel 2

Agora vamos imaginar que você quer um título personalizado para o painel 2, onde além do tamanho da fonte em 24px, também gostaria que a cor dele fosse vermelho.

Novamente, utilizando o recurso de inspecionar elementos do navegador, conseguimos identificar que o panel em questão é um componente react que possui um id, vamos utilizar dessa vez um seletor CSS para estilizar apenas o título desse panel, capturando o elemento com a classe panel-title-text que seja filho do elemento com o id panel-4.

<style>
  .panel-title-text{
    font-size:24px;
  }
  #panel-4 .panel-title-text{
    font-size:24px;
    color:red;
  }
</style>

O resultado obtido nesse caso, são dois panels com o título estilizado individualmente.

Esse recurso pode ser utilizado para estilizar outros elementos e componentes do dashboard, onde as configurações nativas do Grafana ainda não permitem tal configuração. Muito cuidado ao utilizar esse hack, pois ele pode quebrar layout e outras partes do dashboard se utilizado indevidamente, utilize apenas como um último recurso e sempre teste antes de colocar em produção.

Conclusão

Nesse artigo foi apresentado um método para personalizar o CSS de dashboards do Grafana, permitindo expandir as possibilidades de personalização, com um conhecimento básico de CSS é possível ir além do que a interface do Grafana permite atualmente.