Criando e Editando Dashboards

Criar um dashboard novo e ajustar um existente são feitos no mesmo lugar: o editor visual do Meus Dashboards. Esta página cobre os dois fluxos do começo ao fim, desde o clique em Novo Dashboard até o Salvar que devolve você para a lista.

A página de lista (em Observar & Explorar → Meus Dashboards) é o ponto de partida. O editor abre em uma tela própria, em /dashboard-edit.html?id=X, fora do layout normal do app. É lá que você arrasta widgets, configura métricas, define cores e escolhe o intervalo de tempo.

Onde cada coisa mora

O editor é só para construir e ajustar. O modo visualização (/dashboard_view?id=X) é o que o resto do tenant vê quando o dashboard fica pronto. Os dois compartilham os mesmos widgets, mas o editor mostra grade, paleta e painel de propriedades; a visualização só renderiza o resultado. Compartilhamento e publicação são tratados na próxima sub-página.

Criando um dashboard novo

O ponto de partida é o botão Novo Dashboard no canto superior direito da lista de Meus Dashboards. Ele abre uma modal pequena com um único campo obrigatório.

A modal Criar Novo Dashboard pede o Nome do Novo Dashboard. O placeholder sugere "Meu Dashboard", mas troque por algo que descreva o objetivo do painel: Operação Loja Online, Saúde Banco de Dados Produção, KPIs Diretoria são exemplos bons. Esse é o nome que vai aparecer na lista, na aba do navegador e no topo da página de visualização.

Confirme em Criar Dashboard. A modal fecha e o editor abre direto no novo dashboard, com o canvas vazio e a paleta de widgets à esquerda.

Visibilidade inicial

Por padrão, todo dashboard novo nasce como Privado: só você enxerga. A mudança para Organização, Compartilhado ou Público é feita depois, na visualização ou pelo menu de ações da lista. Veja Compartilhar e visualizar.

Você ainda pode renomear o dashboard depois (clique no nome no topo do editor, ou no título quando estiver no modo visualização). Mas pegar um bom nome na criação economiza confusão na lista mais tarde.

O editor visual

O editor é uma tela própria com três colunas lado a lado. Cada uma tem uma função específica.

Coluna	Função
Paleta de widgets (esquerda)	Catálogo de widgets disponíveis, agrupados em categorias. Click adiciona ao canvas.
Canvas (centro)	Área de trabalho. Sistema de grade onde os widgets ficam dispostos.
Painel de propriedades (direita)	Configuração do widget selecionado ou do dashboard como um todo, com tabs para Geral, Métricas, Tempo, Cores, Fundo, Grade e Filtros.

Header do editor

A barra superior do editor tem:

• Nome do dashboard (clicável e editável inline).
• Indicador Canvas mostrando que você está na tela principal de edição.
• Salvar: grava o estado atual no servidor.
• Pré-visualizar: abre o dashboard no modo visualização em uma nova aba sem sair do editor.
• Voltar: retorna para a lista de Meus Dashboards. Se houver mudanças não salvas, o navegador avisa antes.

Sistema de grade

O canvas usa uma grade de 24 colunas com altura livre. Quando você arrasta ou redimensiona um widget, ele encaixa automaticamente na grade mais próxima (snap). Isso evita pixels soltos e mantém o alinhamento entre widgets parecidos.

Cada unidade de grade é proporcional à largura da tela. Em telas largas, 24 colunas dão widgets confortáveis; em telas estreitas, os widgets continuam encaixados, mas ficam menores. O tamanho mínimo aceito por widget é 2×2 unidades de grade.

Pense em blocos de 6 ou 8 colunas

Para um layout que respira, planeje os widgets em frações claras das 24 colunas: linhas com quatro widgets de 6, três de 8, dois de 12. Misturar tamanhos quebrados (5, 7, 9) tende a deixar buracos visuais na grade.

A paleta de widgets

A paleta esquerda agrupa os widgets disponíveis em quatro categorias:

Geral

Widget	Para que serve
Texto	Título, sub-título, instrução ou qualquer bloco de texto livre. Suporta formatação simples e usa como rótulo para seções do dashboard.
Tabela	Lista de itens de métrica ou de alerta, com colunas configuráveis e paginação interna.
Imagem	Imagem estática (logo do cliente, planta baixa, diagrama de topologia). Recorta e ajusta na configuração.
Alarme	Painel de alertas em tempo real filtrados pelos critérios escolhidos (severidade, tags, hosts).
Área	Forma de fundo para agrupar widgets visualmente. Não tem dado por trás, é só desenho.

Formas

Widgets sem dado, usados como decoração ou separadores visuais:

• Círculo
• Retângulo

Combine com o widget Área para criar zonas no dashboard (por exemplo, um retângulo de fundo cinza claro envolvendo todos os gráficos de banco de dados).

Medidores

Widget	Indicado para
Medidor	Valor único com escala circular. Bom para indicadores fechados (uso de CPU, ocupação de disco).
Medidor Linear	Mesma ideia em barra horizontal ou vertical. Ocupa menos espaço quando você precisa de vários lado a lado.

Gráficos

Widget	Quando usar
Gráfico de Área	Série temporal preenchida. Bom para volume acumulado.
Gráfico de Linhas	Série temporal simples. Padrão para tendência de métricas técnicas.
Gráfico de Barras	Barras horizontais. Comparativo de categorias quando o rótulo é longo.
Gráfico de Colunas	Barras verticais. Comparativo quando o rótulo cabe na horizontal.
Gráfico de Pizza	Distribuição de partes do todo. Use para até 5 categorias.
Gráfico de Rosca	Pizza com furo no centro. Mesma regra, mas dá espaço para um número grande no meio.

Adicionar e remover

Click no widget na paleta adiciona ao canvas, com tamanho padrão e no primeiro espaço livre. Para remover um widget, selecione no canvas e use a tecla Delete, ou clique no ícone de lixeira que aparece quando o widget está selecionado.

Widget começa vazio

Adicionar um widget é só o primeiro passo. Sem métrica configurada, o gráfico fica em branco e a tabela mostra "sem dados". A configuração da fonte de dados é feita na tab Métricas do painel direito. Veja a sub-página dedicada Widgets em detalhe.

Arrastar e redimensionar widgets

Depois do widget no canvas, dois movimentos básicos:

• Mover: arraste pelo header do widget (a barra de cima onde aparece o título). O cursor vira a mão de "grab" e você posiciona em qualquer ponto da grade. Quando solta, o widget encaixa no quadrado mais próximo.
• Redimensionar: arraste pelos cantos do widget. A largura e a altura mudam em incrementos de unidade de grade. O mínimo é 2×2.

Widgets podem se sobrepor visualmente durante o arraste, mas, ao soltar, o editor reposiciona se necessário para evitar colisão. Se você quer dois widgets exatamente alinhados, posicione um, depois o segundo pegando a coluna ou linha do primeiro como referência.

Edite vários widgets parecidos copiando

Para repetir um gráfico com fonte de dados parecida: configure o primeiro, depois adicione um novo do mesmo tipo na paleta e copie as configurações (métrica, intervalo, cores). Salve antes de cada bloco para não perder o trabalho.

Painel de propriedades

A coluna da direita muda de conteúdo conforme o que está selecionado. Se nenhum widget está selecionado, ela mostra as propriedades do dashboard inteiro (fundo, grade, filtros globais). Se há um widget selecionado, ela mostra as propriedades daquele widget.

As tabs disponíveis variam por tipo de widget, mas o conjunto completo é:

Tab Geral

• Nome: identificador interno do widget (útil para referenciar em filtros globais).
• Título: o texto que aparece na barra superior do widget na visualização. Pode deixar vazio para um widget sem título visível.

Exemplo de uso: o Nome é "cpu_prod_db", o Título é "CPU média - Banco de Dados Produção".

Tab Métricas

A tab mais densa. É onde você define de onde vem o dado que o widget vai mostrar. Inclui:

• Seleção de hosts (origem fixa, lista digitada ou filtro de dashboard).
• Padrão de métricas (wildcard, ex: Status* pega todas as métricas que começam com Status).
• Agregação (somar tudo, média, máximo) quando o widget mostra um valor único.
• Métricas personalizadas para casos específicos.

Como o conteúdo dessa tab muda muito por tipo de widget e é o que dá vida ao dashboard, ela tem uma sub-página dedicada com cada combinação: Widgets em detalhe.

Tab Configurações da Tabela ou do Gráfico

Aparece só para widgets de tabela e de gráfico:

• Linhas por Página (tabela): 10, 20, 25, 50.
• Filtro Top X (tabela): mostrar os maiores valores ou os menores valores, com contagem ajustável.
• Configurações do Gráfico (gráficos): legenda, eixos, formato de número.

Tab Intervalo de Tempo

Define o período que o widget vai consultar. As opções predefinidas são:

Opção	Descrição
Última 1 hora	Padrão para a maioria dos widgets novos.
Últimas 3 horas	Boa para investigar um incidente da manhã que estende para o início da tarde.
Últimas 6 horas	Cobre meio turno.
Últimas 12 horas	Padrão para dashboards de turno inteiro.
Últimas 24 horas	Visão de dia completo.
Intervalo personalizado	Data e hora de início e término digitadas manualmente.

Cada widget pode ter o intervalo próprio ou herdar o intervalo do dashboard inteiro (configurado na visualização, no header do dashboard). Por padrão, o widget herda do dashboard. Se você fixa um intervalo no widget, ele ignora a escolha do dashboard.

Quando fixar o intervalo no widget

Use intervalo fixo só para widgets que sempre precisam mostrar o mesmo período independente da escolha do usuário. Por exemplo: um widget de "SLA do mês corrente" deve mostrar o mês mesmo se o usuário troca o dashboard para "Última 1 hora". Para tudo mais, deixe o widget herdar.

Tab Configurações de Cor

• Cor Padrão: cor base que o widget usa quando não há limite de cor atingido. Aceita hex (#3B82F6) ou seletor visual.
• Limites de Cor (Thresholds): define faixas de valor com cores diferentes. Útil em medidores e em valores numéricos. Exemplo: até 70% verde, 70 a 90% amarelo, acima de 90% vermelho.

Os limites são organizados em Grupos quando o widget tem múltiplas séries. Cada grupo recebe seus próprios limites, e cada limite tem valor mínimo, valor máximo e a cor associada.

Tab Fundo

Aplicada ao dashboard inteiro, não a um widget:

• Cor de Fundo: cor sólida atrás do canvas.
• Imagem de Fundo: upload de uma imagem que vira plano de fundo. Bom para dashboards com fundo decorativo (planta baixa, diagrama). Após enviar, use Recortar Imagem, Girar Esquerda/Direita, Ajustar e Restaurar para enquadrar.
• Remover Fundo: tira a imagem e volta ao fundo neutro.

Tab Grade

Também aplicada ao dashboard inteiro:

• Cor da Grade: cor das linhas guia que aparecem só no editor. No modo visualização a grade some, mas a cor escolhida ajuda quem está construindo a ver melhor o alinhamento.

Tab Filtros Globais

Filtros que afetam todos os widgets do dashboard ao mesmo tempo. Exemplo: um filtro global de host prod-* faz todos os widgets só considerarem hosts cujo nome começa com prod-. Útil em dashboards multi-cliente, onde a mesma estrutura é reusada trocando só o filtro.

Há também os Filtros Personalizados (custom filters): filtros que o usuário pode alternar no widget na visualização. Você define a lista de opções no editor, e quem visualiza usa um dropdown para trocar.

Intervalos de tempo no dashboard

O intervalo de tempo do dashboard como um todo é decidido no modo visualização, no header (Última 1 hora, 3 horas, 6 horas, 12 horas, 24 horas, 7 a 30 dias, intervalo personalizado). Aqui no editor você pode prever esse intervalo escolhendo no painel direito, mas a escolha final do usuário acontece na visualização.

Cada widget pode:

• Herdar do dashboard (padrão): o intervalo escolhido pelo usuário aplica.
• Ter intervalo fixo: o widget sempre mostra esse período, independente da escolha do usuário.

A escolha por widget é feita na tab Intervalo de Tempo do painel de propriedades quando o widget está selecionado.

Salvando

O botão Salvar no header do editor grava o estado atual no servidor. O salvamento é manual: até clicar em Salvar, suas mudanças ficam só no navegador. Se você fechar a aba sem salvar, perde tudo (o navegador avisa antes).

Sem controle de edição concorrente

Hoje o editor não tem versionamento nem detecção de edição simultânea. Se duas pessoas abrem o mesmo dashboard no editor ao mesmo tempo, a última que clicar em Salvar sobrescreve a primeira. Combine antes com a equipe quem está mexendo, ou edite em horários diferentes. Para dashboards compartilhados de uso intenso, considere duplicar o dashboard e trabalhar na cópia.

Depois do save, o editor permanece aberto e você pode continuar editando. Para sair de vez, use Voltar no header (vai para /my_dashboards) ou Pré-visualizar (abre a visualização em uma nova aba).

O que é gravado

• Posição e tamanho de cada widget.
• Configuração de cada widget (métricas, intervalo, cores, etc).
• Propriedades do dashboard (fundo, grade, filtros globais).
• Nome do dashboard.

O que não é gravado pelo Salvar do editor

• Visibilidade (Privado, Organização, Compartilhado, Público): trocada na visualização, pelo menu de configuração de compartilhamento.
• Tags do dashboard: editadas pelo botão Editar Tags da linha na lista.
• Status publicado: gerenciado fora do editor.

Editar um dashboard existente

Para abrir um dashboard que já existe no editor, você tem dois caminhos:

Pela lista

1. Vá em Observar & Explorar → Meus Dashboards.
2. Localize o dashboard na lista.
3. No menu de três pontos da linha, escolha Editar Dashboard.

Pelo modo visualização

1. Abra o dashboard na visualização (/dashboard_view?id=X).
2. No header, clique em Editar.

Os dois caminhos abrem o editor com o estado atual do dashboard, no canvas, paleta e painel de propriedades como esperado.

Permissões para editar

Quem você é	O que pode editar
Owner (criador)	Tudo: conteúdo, nome, visibilidade, compartilhamento, publicação, tags, exclusão.
Compartilhado com você (Shared user)	Só o conteúdo (widgets, layout, métricas, cores). Não pode trocar visibilidade nem adicionar/remover compartilhados.
Colaborador do tenant	Mesmo nível de Shared user em dashboards visíveis na organização.
Visualizador (Público)	Só consegue ver, sem botão Editar.

Se o botão Editar não aparece, você não tem permissão. Peça ao owner para te incluir no compartilhamento, ou para duplicar o dashboard e te passar uma cópia.

Histórico de quem editou

Não há registro detalhado de quem editou o quê. A lista mostra Criado Por (autor original) e a data de criação, mas não rastreia edições subsequentes. Para times grandes, combine convenções de nome ou use tags como responsavel:douglas para deixar claro.

Próximos passos

• Widgets em detalhe

  ---

  Cada tipo de widget tem suas opções de fonte de dados, agregação e formatação. Veja a referência completa.

  Abrir Widgets

• Compartilhar e visualizar

  ---

  Visibilidade, publicação, modo visualização e auto-atualização do dashboard pronto.

  Ver Compartilhar e visualizar

• Lista de Meus Dashboards

  ---

  Voltar para a lista com busca, filtros, favoritos e tags dos dashboards do tenant.

  Voltar para Meus Dashboards