Dashboards (NOC e TV) Novo na 7.2

Visão geral

O ambiente Dashboards permite criar painéis sob medida para o seu NOC, no estilo de ferramentas como Grafana, mas alimentado diretamente pelos dados que o Ravi Monitor já coleta: sensores, dispositivos, OLTs, concentradoras, DNS e Flow. O posicionamento é livre, pixel a pixel, como num editor de desenho: não há grade rígida de blocos.

Casos de uso típicos:

• Telão do NOC com o status geral da rede: grid de status, lista de alertas e gauges de tráfego.
• TV da recepção ou da loja rodando um slideshow rotativo de painéis.
• Painel de uma OLT com a colmeia de ONUs sobre a planta do POP (imagem de fundo).
• Painel multi-site consolidando dados de vários servidores Ravi (fontes remotas).
• Mapa de topologia com linhas de conexão animadas mostrando o tráfego entre equipamentos.

Conceitos essenciais

Acesso e permissões

• O item Dashboard fica no menu superior principal. Para abrir a galeria e o editor, o grupo de acesso do usuário precisa ter a permissão de Dispositivos habilitada (qualquer nível). Usuário Master sempre tem acesso.
• As Configurações do módulo (engrenagem da galeria) exigem nível administrativo da permissão de Dispositivos (o usuário Master sempre atende a esse nível). Ser do tipo Admin, por si só, não basta: o acesso depende do nível da permissão de Dispositivos do grupo.
• Não há restrição por plano de assinatura no ambiente Dashboards.
• O editor exige tela de computador ou tablet: em telas pequenas ele exibe o aviso Editor não disponível no mobile com o botão Voltar aos Dashboards. A galeria e o viewer funcionam normalmente no celular.

A galeria

A tela Dashboards é a porta de entrada do ambiente. No topo ficam o botão Novo Dashboard (que vira Novo Slideshow quando a aba Slideshows está ativa), a engrenagem de Configurações do módulo e uma barra de estatísticas com o total de dashboards, de widgets, de slideshows e a última edição em tempo relativo.

• Abas Dashboards e Slideshows, com contadores. A aba ativa fica memorizada no navegador.
• Alternador de Modo de visualização: Cards ou Lista, também memorizado.
• Cada card traz uma pré-visualização em miniatura gerada das posições reais dos widgets, respeitando o tema do painel: você reconhece o dashboard antes de abrir. No hover aparecem Visualizar (abre o viewer em nova aba) e Editar. O card também mostra a contagem de widgets, a resolução e o tempo desde a última edição, além da lixeira de Excluir (com confirmação).

Criar um dashboard

1. Na galeria, clique em Novo Dashboard.
2. Preencha o Nome (ex.: NOC Principal) e, se quiser, a Descrição.
3. Escolha a Resolucao por um preset (Full HD 1920×1080 é o padrão; há 2K QHD, 4K UHD e HD 720p) ou informe Largura (px) e Altura (px) manualmente.
4. Defina o Tema: Escuro (Recomendado para NOC) ou Claro.
5. Defina a Atualizacao Automatica: Desativada, 10 segundos, 30 segundos (padrão), 1 minuto ou 5 minutos.
6. Clique em Criar Dashboard. O sistema abre o editor direto no painel novo.

Editor visual

O editor é onde o painel ganha forma. Ele desenha o canvas com aceleração gráfica, mantendo-se estável com dezenas de widgets e em uso 24/7. A tela se divide em três áreas:

• Esquerda: a árvore de Dispositivos, com seletor de Fonte, busca e botão Recarregar (detalhes na próxima seção).
• Centro: a barra de ferramentas e o canvas.
• Direita: o painel Widgets (paleta para adicionar por clique, organizada nas categorias Dados, Visualização e Estáticos), que dá lugar ao painel Propriedades quando um widget ou conector está selecionado.

Barra de ferramentas

Trabalhando no canvas

• Mover e redimensionar: arraste o widget para mover; use as alças nos cantos e bordas para redimensionar (cada tipo tem um tamanho mínimo).
• Seleção múltipla: arraste um retângulo de seleção no fundo vazio, ou use Ctrl+A para selecionar todos. Com vários selecionados, o painel Seleção Múltipla oferece Excluir Selecionados.
• Botões do widget selecionado: no cabeçalho do widget aparecem atalhos para conectar, duplicar, mover para frente ou para trás (ordem de sobreposição real) e excluir.
• Duplicar cria uma cópia com o sufixo "(copia)".
• Posicionamento em cascata: widgets adicionados pela paleta entram no canvas sem colidir com os existentes.
• Excluir pede confirmação no modal Excluir Widget; até salvar, dá para reverter com Ctrl+Z.

Atalhos de teclado

Propriedades do Dashboard

O botão Propriedades do Dashboard abre um modal com quatro abas:

Clique em Aplicar para ver o efeito no canvas; as mudanças só persistem quando você clica em Salvar no dashboard (exceção: o upload da imagem de fundo é gravado imediatamente no envio). Cada dashboard guarda uma única imagem de fundo: um novo upload substitui a anterior daquele painel. Usos típicos: planta do POP, mapa da cidade ou logo do provedor como marca d'água (opacidade baixa).

Árvore de dispositivos

A árvore da esquerda é o jeito mais rápido de criar widgets já ligados aos dados certos. Ela lista a raiz com grupos, dispositivos e sensores (com ícones por tipo de sensor) e, na fonte Local (Este Sistema), as categorias irmãs OLTs, Concentradoras, Servidores DNS e Flow (com a visão geral e os exportadores).

• A busca filtra a árvore em tempo real; Recarregar refaz a topologia.
• O seletor Fonte alterna entre Local (Este Sistema) e as fontes remotas cadastradas. Ao trocar, a árvore passa a navegar a topologia do servidor remoto. A escolha fica memorizada no navegador.

Duplo-clique: criação guiada

1. Localize o item na árvore (um sensor, dispositivo, grupo, OLT, concentradora, servidor DNS ou o Flow).
2. Dê duplo-clique no item. Abre o modal Adicionar Widget com os widgets compatíveis com aquele tipo de item.
3. Clique no widget desejado. Ele entra no canvas já com a fonte e o alvo preenchidos, e o painel de propriedades abre automaticamente para os ajustes finais.

Widgets oferecidos por tipo de item:

Widgets

São 19 tipos de widget, divididos entre widgets de dados (mostram valores ao vivo ou histórico) e widgets estáticos ou de apoio (relógio, texto, imagem, formas). Todos podem ser adicionados pela paleta da direita ou pelo duplo-clique na árvore.

Widgets de dados

Widgets estáticos e de apoio

Propriedades comuns a todo widget

Com um widget selecionado, o painel Propriedades traz os grupos:

• Informações Básicas: Nome (com botão de cor do título e um "olho" para esconder ou mostrar o título na visualização; no editor o título sempre aparece, a escolha vale só no viewer), Tipo, ID e Largura e Altura numéricas.
• Fonte de Dados (em parte dos widgets de dados: Estatistica, Velocimetro, gráficos, Sunburst, Card Dispositivo e Gráfico Colmeia; nos demais, a origem é definida nas configurações específicas do widget): Fonte (Local (Este Sistema) ou uma remota), Tipo de Dados (sensor, dispositivo, grupo, OLT ou concentradora, filtrado pelo que o widget aceita) e Selecionar o item com busca.
• Animação de entrada, com efeitos por tipo de widget (contagem crescente, fade, slide, cascata de dígitos, varredura de arco e outros; há a opção Sem animação). Roda no carregamento e a cada atualização do viewer.
• Estilo: Cor de Fundo (com opção Transparente), Cor da Borda, Espessura da Borda (1 a 10 px) e Raio da Borda (0 a 30 px).
• Ações: Duplicar e Excluir.

Topologia e conectores

Conectores são linhas ou setas que ligam dois widgets no canvas, transformando o dashboard num mapa de rede: cada equipamento vira um card e as linhas mostram os enlaces, podendo exibir o tráfego ao vivo sobre a linha.

Criar um conector

1. Clique em Conectar Widgets na barra de ferramentas (ou no botão de conexão do widget selecionado). O editor entra no modo conector e mostra a instrução Clique em dois widgets para conectar.
2. Clique no widget de origem e depois no widget de destino. A linha é criada.
3. Para cancelar o modo conector, pressione Esc.

Propriedades do conector

Clicar numa linha seleciona o conector e abre suas propriedades no painel da direita:

No viewer, os valores exibidos nos conectores são atualizados junto com o refresh do dashboard.

Modo TV (viewer)

O viewer é a página de exibição em tela cheia, com dados ao vivo: é o que fica aberto no telão do NOC ou na TV. Abra pelo botão Visualizar (na galeria ou no editor) ou cole a URL direto no navegador da TV:

https://seu-servidor/dashboard/viewer.php?id=N

• O dashboard é renderizado na proporção exata e escalado automaticamente para caber na tela.
• Controles flutuantes aparecem ao passar o mouse: Fullscreen (F), Atualizar (R) e Editar (volta ao editor). Teclas: F para tela cheia, R para atualizar, Esc sai da tela cheia.
• Um selo Atualizado: mostra o horário da última atualização de dados.
• A atualização automática segue o intervalo configurado no dashboard; a cada ciclo, todos os widgets com fonte configurada e os conectores são re-consultados.
• O viewer respeita o tema do dashboard (escuro ou claro), não o tema do sistema.
• Placeholders amigáveis: widget de dados sem fonte mostra Configure a fonte de dados; fonte remota fora do ar mostra Fonte indisponível (e o widget volta sozinho quando ela retorna); gráfico sem histórico mostra "Sem dados no período selecionado".

Slideshows

Um slideshow é uma playlist de dashboards que roda sozinha em loop, ideal para uma TV alternar entre vários painéis (backbone, OLTs, Flow) sem intervenção. A gestão fica na aba Slideshows da galeria.

Criar um slideshow

1. Na galeria, abra a aba Slideshows e clique em Novo Slideshow.
2. Preencha o Nome e, se quiser, a Descrição.
3. Defina o Delay (segundos): o tempo de exibição de cada slide, de 5 a 300 segundos (padrão 30).
4. Escolha a Transicao: Fade, Slide ou Zoom.
5. Defina o Acesso: Privado (somente logado), Público ou Protegido por senha (o campo Senha aparece).
6. Em Dashboards, clique em Adicionar Dashboard para montar a lista (os slides são exibidos na ordem em que foram adicionados; para reordenar, remova e adicione novamente).
7. Clique em Salvar.

Cada card de slideshow mostra uma pilha em miniatura dos dashboards incluídos, a contagem, o delay e o tipo de acesso, com as ações Editar, Copiar URL (copia a URL do player para colar na TV) e Excluir.

O player

https://seu-servidor/dashboard/slideshow.php?id=N

• Cada dashboard roda em tela cheia com dados ao vivo, avançando sozinho no tempo configurado, com a transição escolhida e loop infinito.
• Controles aparecem ao passar o mouse: anterior, play e pause, próximo, indicadores de slide clicáveis, contador "1/N", nome do slide e barra de progresso.
• Acesso Privado: só usuário logado consegue abrir. Protegido por senha: o visitante vê a tela "Digite a senha para acessar" com o botão Entrar; a liberação vale para a sessão do navegador. Público: abre direto.

Fontes remotas

Fontes de dados remotas permitem que um único dashboard consolide informações de vários servidores Ravi Monitor: a matriz e as filiais, ou um servidor por POP, tudo num telão só. A gestão fica na tela Fontes de Dados (também acessível pela aba Fontes de Dados dentro das configurações do módulo, na engrenagem da galeria).

A tela mostra um card fixo Local (Sistema), o próprio servidor, marcado como Padrao e sempre disponível, e a lista de Fontes Remotas com o status de cada uma (conectado, erro ou offline) e o horário do último teste.

Cadastrar uma fonte remota

1. No servidor remoto, gere um token de acesso da API (a dica da própria tela: obtenha o token em Configurações, na área de API do servidor remoto).
2. No servidor local, abra Fontes de Dados e clique em Nova Fonte de Dados.
3. Preencha o Nome (ex.: Filial Sao Paulo) e, se quiser, a Descricao.
4. Informe a URL do servidor: apenas a URL principal, o caminho da API é adicionado automaticamente.
5. Cole o Token de Acesso e ajuste o Timeout (segundos) se necessário (padrão 10). Deixe Ativo marcado.
6. Clique em Testar Conexao: em caso de sucesso aparece "Conexao bem sucedida!" com a versão do servidor remoto. Salve.

Como funciona

• Os widgets nunca falam direto com o servidor remoto: o servidor local faz o papel de intermediário, consulta o remoto e devolve os dados ao navegador. Não há configuração de CORS ou firewall no lado do navegador.
• No editor, o seletor Fonte da árvore de dispositivos alterna para a fonte remota, e a árvore passa a navegar a topologia daquele servidor (grupos, dispositivos e sensores; as categorias de OLTs, Concentradoras, Servidores DNS e Flow aparecem apenas na fonte local). O duplo-clique funciona igual: o widget nasce apontando para o dado remoto.
• O status da fonte é atualizado a cada consulta real: se a fonte falhar, ela aparece com erro automaticamente. Se cair, os widgets que dependem dela mostram Fonte indisponível e voltam sozinhos quando ela retorna, sem travar o restante do painel.

Configurações do módulo Nível administrativo

A engrenagem da galeria abre as configurações do ambiente (disponível para o usuário Master ou para quem tem nível administrativo da permissão de Dispositivos), com as abas Configurações e Fontes de Dados: