Solar webProxy: A Evolução do 'Graf' - Substituindo o Grafana com Foco no Cliente

Olá, Habr! Somos Alexander Saveliev, engenheiro de software, e Vladislav Bulygin, desenvolvedor sênior da GK "Solar". Juntamente com nossa equipe de desenvolvimento, trabalhamos no front-end e back-end do Solar webProxy. O Solar webProxy é uma solução Secure Web Gateway (SWG) que oferece filtragem de tráfego para HTTP/HTTPS, SOCKS5, FTP, WS/WSS, além de realizar tarefas de verificação de arquivos e arquivos compactados criptografados. O sistema SWG da "Solar" implementa um controle robusto de usuários, o que exige uma solução própria para a exibição de diversas estatísticas sobre os usuários – informalmente, chamamos essa ferramenta de "Graf" (um nome de trabalho, para ser sincero 😊).

Anteriormente, já publicamos um artigo sobre como e por que decidimos desenvolver nossa própria alternativa ao Grafana. Após o lançamento da primeira versão do Graf, coletamos feedback dos clientes e lançamos a segunda versão no Solar webProxy 4.4. O resultado mais notável da atualização é a exportação de relatórios em PDF, que agora é 22 vezes mais rápida. Mas isso não é tudo. Vamos detalhar como decidimos por essa atualização e como a segunda versão do componente Graf foi desenvolvida internamente.

O que os clientes disseram sobre a primeira versão do Graf?

Na versão webProxy 4.1, lançamos a primeira versão do nosso componente interno Graf, como substituto do Grafana, para exibir estatísticas no painel principal. Coletamos feedback dos clientes para aprimorar a experiência do usuário. Para os clientes, não bastava apenas ter um análogo do Grafana; eles buscavam uma ferramenta flexível, rápida e gerenciável. Todas as áreas de melhoria identificadas – customização de widgets, alteração de painéis com diferentes níveis de acesso, aumento de performance e ampliação do número de fontes de dados – foram incorporadas na segunda versão do componente.

Veja o que ouvimos dos clientes após o lançamento da primeira versão do Graf e o que mudou na segunda versão:

• "Queremos decidir quais widgets ver e como organizá-los." Na versão 4.1 do Solar webProxy, havia apenas 2 widgets fixos no painel principal.

  • Mudança na versão 4.4: Grande quantidade de painéis, layout livre, arrastar e soltar e redimensionamento de widgets.

• "Diferentes administradores precisam de acesso diferente aos dados." Na primeira versão, todos os usuários tinham o mesmo conjunto de painéis.

  • Mudança na versão 4.4: Modelo de acesso baseado em papéis e compartilhamento ("sharing") de painéis específicos entre usuários.

• "Os dashboards carregavam mais lentamente do que o esperado." Todos os widgets enviavam uma requisição ao servidor, mesmo que não estivessem visíveis para o usuário.

  • Mudança na versão 4.4: Carregamento preguiçoso (lazy loading) via bloco Angular @defer – a requisição ao servidor só ocorre para os widgets que realmente aparecem na tela.

• "Vocês não trabalham apenas com ClickHouse. Incluam integração adicional com outros sistemas." Para isso, era necessária a integração com REST e Zabbix.

  • Mudança na versão 4.4: Compatibilidade com REST e Zabbix como fontes de dados para os widgets.

• Exportação para PDF (via Puppeteer, com screenshots da página) era lenta e frequentemente "quebrava" o layout.

  • Mudança na versão 4.4: Exportação via Node.js + pdfmake – 22 vezes mais rápida, de acordo com testes de carga internos.

Essas mudanças estabeleceram a base para a escalabilidade futura do componente Graf, responsável pela exibição de estatísticas. Para saber como a equipe redesenhou os widgets, implementou suporte para novas fontes de dados e combateu as requisições "cegas", continue lendo.

Descrição da Segunda Versão do Componente Graf para Exibição de Estatísticas

No Solar webProxy 4.4, redesenhamos completamente as seções "Painel", "Estatísticas" e "Monitoramento", eliminando a dependência do Grafana. Agora, na página principal do sistema, o usuário pode criar qualquer número de painéis. Cada um deles contém widgets de um conjunto disponível (ver Figura 3). Para adicionar um novo widget a um painel, basta selecionar a opção desejada na lista. A lista de widgets inclui seções temáticas como estatísticas (exibição de estatísticas de usuários em gráficos e tabelas), administração (informações detalhadas sobre o status do sistema), monitoramento (exibição de dados do Zabbix em gráficos), entre outras. Os widgets podem ser facilmente movidos, removidos e redimensionados.

Os administradores têm acesso à exportação de widgets individuais em CSV, XLS, SVG, e do painel inteiro em formato PDF. Agora, eles também podem configurar o acesso compartilhado a um painel com outros usuários. As seções "Estatísticas" e "Monitoramento" também foram migradas para o novo Graf. "Estatísticas" contém painéis pré-configurados com dados agregados sobre os usuários, enquanto "Monitoramento" exibe dados sobre o status e a carga nos nós do sistema provenientes do Zabbix.

Como Isso Funciona Tecnicamente?

A segunda versão do componente Graf é implementada em Angular no front-end e Scala no back-end. As configurações dos painéis são armazenadas no formato HOCON e transferidas para o front-end em formato JSON. O HOCON foi escolhido por ser mais conveniente para trabalhar, graças à sua formatação e capacidade de comentários. Um painel é composto por um identificador, nome, lista de widgets (panels), filtros (params) e permissões necessárias para sua operação. Por sua vez, widgets, filtros e colunas de tabelas são representados por arquivos individuais no mesmo formato HOCON, que são automaticamente inseridos no JSON gerado para o front-end.

Um widget pode ter seus próprios filtros (params). O administrador agora pode filtrar os dados exibidos em uma tabela ou gráfico de um widget: por exemplo, por um período específico, lista de usuários, protocolos de transferência de dados, etc. Um filtro dentro de um widget tem prioridade maior do que um filtro do painel. Qualquer filtro pode ser extraído de um widget para o painel e ter seu efeito aplicado a todos os widgets do espaço de trabalho. Esse esquema permite uma configuração de filtros extremamente flexível em um único painel. Na configuração, há também o parâmetro query.source, que descreve de onde os dados são obtidos – por exemplo, do ClickHouse ou de uma requisição REST. O parâmetro attr define as propriedades para a renderização no front-end: tamanho, coordenadas, etc.

Para a movimentação e redimensionamento de widgets, utilizamos a biblioteca GridStack, que se integra bem com Angular e oferece todas as funcionalidades necessárias "out-of-the-box". Para a renderização de gráficos, utilizamos a biblioteca D3.js, com a qual é possível desenhar qualquer gráfico vetorial em formato SVG. Toda a lógica de renderização foi isolada em uma biblioteca separada, utilizada tanto no front-end (aplicativo Angular) quanto no back-end (Node.js) – para exportação de widgets e painéis em PDF.

Após a criação da estrutura, cada widget solicita seus dados do back-end de forma independente e constrói o gráfico, a tabela ou outra estrutura, dependendo das configurações. Ele é encapsulado em um bloco @defer, que o carrega apenas quando ele aparece na tela do usuário. É assim que eliminamos as requisições "cegas": um widget não carregado não faz requisição de dados ao servidor, reduzindo a carga tanto no cliente quanto no servidor.

Agora, sobre a exportação em PDF. No Grafana, isso era feito com Puppeteer, que carregava a página com o serviço de exibição de estatísticas, tirava screenshots e os salvava em PDF. Isso era lento e frequentemente causava problemas de layout. Na nova versão do Graf, screenshots e navegadores não são mais necessários. Os gráficos são construídos pela mesma biblioteca D3.js utilizada no front-end, e o Node.js utiliza a biblioteca JSDOM para suportar a renderização de gráficos SVG. Ela emula a maior parte da API do navegador em modo headless. Como resultado, a reformatação dos painéis em PDF é realizada com a biblioteca pdfmake. Essa substituição resultou em uma aceleração de 22 vezes na exportação, de acordo com nossos testes de carga.

Primeiros Resultados da Implementação

O lançamento do Solar webProxy 4.4 com o novo Graf ocorreu no início de 2026. Os primeiros feedbacks dos clientes destacaram uma área para crescimento: muitos usuários estavam acostumados com a interface semelhante ao Grafana e nem sempre entendiam imediatamente como trabalhar com as novas estatísticas. A equipe do Solar webProxy planeja tornar a transição mais suave nas próximas versões. Uma das opções é adicionar um "Product Onboarding" em uma das próximas versões, ou seja, uma introdução gradual e educativa à interface e dicas interativas.

Conclusão

A segunda versão do Graf é uma resposta às demandas específicas dos clientes: painéis flexíveis, controle de acesso, carregamento preguiçoso de widgets, integração com novas fontes de dados e exportação em PDF, que se tornou 22 vezes mais rápida. Esperamos que a segunda versão do Graf seja útil para todos os nossos clientes que precisam obter informações sobre o funcionamento do sistema em tempo real. Planejamos adicionar novos tipos de gráficos e continuar aprimorando a experiência do usuário no futuro.