Dashboard DNS - Dreamhost

Um dashboard moderno e funcional para visualizar e gerenciar registros DNS através da API do Dreamhost.

🚀 Funcionalidades

• Visualização Completa: Lista todos os registros DNS de forma organizada
• Filtros Avançados: Filtre por zona, tipo de registro ou busca textual
• Ordenação: Ordene por qualquer coluna (registro, tipo, valor, zona, etc.)
• Paginação: Navegue pelos registros com controle de itens por página
• Exportação Excel: Exporte os dados filtrados para CSV/Excel
• Interface Moderna: Design responsivo e intuitivo
• Rate Limiting: Proteção contra abuso da API
• Auto-refresh: Atualização automática dos dados a cada 5 minutos
• Tratamento de Erros: Retry automático e notificações de erro

🛠️ Tecnologias Utilizadas

• Backend: Node.js + Express.js
• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• API: Dreamhost API
• Bibliotecas:
  • axios - Requisições HTTP
  • express-rate-limit - Rate limiting
  • cors - CORS support

📋 Pré-requisitos

• Node.js (versão 14 ou superior)
• NPM ou Yarn
• Chave de API do Dreamhost

🔧 Instalação

1. Clone o repositório:

git clone <url-do-repositorio>
cd dh

2. Instale as dependências:

npm install

3. Configure as variáveis de ambiente:

# Copie o arquivo de exemplo
cp .env.example .env

# Edite o arquivo .env e adicione sua chave da API Dreamhost
# DREAMHOST_API_KEY=sua_chave_dreamhost_aqui

⚠️ Importante: Obtenha sua chave da API em: https://panel.dreamhost.com/?tree=home.api

4. Inicie o servidor:

npm start

5. Acesse o dashboard:

http://localhost:3000

📊 API Endpoints

GET /api/dns-records

Retorna todos os registros DNS com estatísticas.

Resposta:

{
  "success": true,
  "data": [
    {
      "record": "example.com",
      "type": "A",
      "value": "192.168.1.1",
      "zone": "example.com",
      "comment": "",
      "editable": true,
      "account_id": "123456"
    }
  ],
  "stats": {
    "total": 100,
    "byType": { "A": 50, "CNAME": 30, "MX": 20 },
    "byZone": { "example.com": 80, "test.com": 20 },
    "editable": 75
  },
  "timestamp": "2024-01-01T12:00:00.000Z"
}

GET /api/dns-records/:zone

Retorna registros DNS de uma zona específica.

GET /api/stats

Retorna estatísticas gerais dos registros DNS.

🎨 Interface do Usuario

Características da UI:

• Design Moderno: Interface limpa com gradientes e glassmorphism
• Responsiva: Funciona perfeitamente em desktop, tablet e mobile
• Cards de Estatísticas: Visão geral rápida dos dados
• Tabela Interativa: Ordenação, filtros e paginação
• Notificações Toast: Feedback visual para ações do usuário
• Loading States: Indicadores de carregamento elegantes

Filtros Disponíveis:

• Por Zona: Dropdown com todas as zonas disponíveis
• Por Tipo: Filtro por tipo de registro (A, CNAME, MX, etc.)
• Busca Textual: Busca em registro, valor e comentário
• Limpar Filtros: Botão para resetar todos os filtros

Funcionalidades da Tabela:

• Ordenação: Clique nos cabeçalhos para ordenar
• Paginação: 25, 50, 100 registros por página ou todos
• Badges Coloridos: Tipos de registro com cores distintas
• Tooltips: Informações completas ao passar o mouse
• Responsiva: Scroll horizontal em telas pequenas

📤 Exportação para Excel

A funcionalidade de exportação permite:

• Exportar dados filtrados atual
• Formato CSV compatível com Excel
• Encoding UTF-8 com BOM para caracteres especiais
• Nome do arquivo com data atual
• Notificação de sucesso/erro

Atalhos de Teclado:

• Ctrl + E: Exportar dados
• Ctrl + R ou F5: Atualizar dados
• Escape: Limpar filtros

🔒 Segurança e Rate Limiting

Rate Limits Implementados:

• Geral: 100 requests por IP a cada 15 minutos
• API Dreamhost: 10 requests por minuto (mais restritivo)
• Retry Logic: Tentativas automáticas com backoff exponencial
• Timeout: 30 segundos para requisições à API

Tratamento de Erros:

• Retry automático em caso de falha
• Mensagens de erro amigáveis
• Logs detalhados no console
• Graceful degradation

🚀 Recursos Avançados

Auto-refresh:

• Atualização automática a cada 5 minutos
• Indicador visual de última atualização
• Possibilidade de atualização manual

Performance:

• Debounce na busca textual (300ms)
• Paginação para grandes volumes de dados
• Cache de filtros para melhor UX
• Lazy loading de dados

Acessibilidade:

• Suporte a leitores de tela
• Navegação por teclado
• Contraste adequado
• Textos alternativos

📱 Responsividade

O dashboard é totalmente responsivo e se adapta a:

• Desktop: Layout completo com todas as funcionalidades
• Tablet: Layout adaptado com navegação otimizada
• Mobile: Interface compacta com scroll horizontal na tabela

🐛 Troubleshooting

Problemas Comuns:

1. Erro de API Key:

   • Verifique se a chave está correta no server.js
   • Confirme se a chave tem permissões para DNS

2. Rate Limit Atingido:

   • Aguarde o tempo especificado na mensagem
   • Reduza a frequência de atualizações

3. Dados não Carregam:

   • Verifique a conexão com a internet
   • Confirme se a API do Dreamhost está funcionando
   • Verifique os logs do servidor

4. Exportação não Funciona:

   • Verifique se há dados para exportar
   • Confirme se o navegador permite downloads

📝 Logs e Monitoramento

O servidor gera logs detalhados para:

• Requisições à API Dreamhost
• Erros e tentativas de retry
• Rate limiting
• Performance de requisições

🔄 Atualizações Futuras

Possíveis melhorias:

• Edição de registros DNS
• Histórico de mudanças
• Notificações por email
• Dashboard de métricas
• Backup automático
• API própria para integração

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🤝 Contribuição

Contribuições são bem-vindas! Por favor:

1. Faça um fork do projeto
2. Crie uma branch para sua feature
3. Commit suas mudanças
4. Push para a branch
5. Abra um Pull Request

📞 Suporte

Para suporte ou dúvidas:

• Abra uma issue no GitHub
• Consulte a documentação da API Dreamhost
• Verifique os logs do servidor

---

Desenvolvido com ❤️ para facilitar o gerenciamento de DNS no Dreamhost