dynatrace-service-monitor-app

v1.0.0

Published

4 months ago

Dynatrace Custom App for Service Monitor - Real-time metrics visualization

0High
0Medium
0Low

kkborges

dynatrace app monitoring service-monitor grail dql

🎉 Dynatrace Service Monitor App

Status: ✅ Production Ready | Version: 1.0.0 | Progresso: 100% (4/4 Fases)

Aplicação React profissional para monitoramento de serviços via Dynatrace Grail API, com UI moderna, backend robusto, documentação completa e CI/CD automático.

🚀 Começar em 5 Minutos

# 1. Configure o ambiente
cp .env.example .env
# Edite .env com suas credenciais Dynatrace

# 2. Instale e inicie
npm install
npm start

# 3. Acesse
# http://localhost:3000

Precisa de instruções completas? Veja QUICK_START.md

📚 Documentação

Leia os guias na ordem:

| Arquivo | Tempo | Propósito | |---------|-------|----------| | 00_LEIA_PRIMEIRO.txt | 2 min | Visão geral rápida | | QUICK_START.md | 5 min | Configuração e início | | ARCHITECTURE.md | 15 min | Design e padrões | | DEPLOYMENT_GUIDE.md | 20 min | Deploy em produção | | TESTING_GUIDE.md | 20 min | Estratégia de testes | | BUILD_OPTIMIZATION.md | 15 min | Performance |

🎯 Funcionalidades

✅ Dashboard - Overview de todos os serviços
✅ Services - Monitoramento detalhado
✅ Alerts - Gerenciamento de alertas
✅ MTTR Analysis - Análise de tempo de recuperação
✅ Settings - Configuração customizável
✅ Real-time Data - Integração Dynatrace Grail
✅ Type-Safe - TypeScript strict mode
✅ Auto-refresh - Atualização automática configurável

📋 Configuração (3 Variáveis Obrigatórias)

Copie .env.example para .env e preencha:

REACT_APP_DT_ENVIRONMENT_ID=seu-id-aqui
REACT_APP_DT_API_TOKEN=seu-token-aqui
REACT_APP_DT_API_BASE=https://seu-env.dynatrace.com/api

Como encontrar:

Abra Dynatrace console
Vá em: Settings → Integration
Copie Environment ID
Crie novo API token com scopes: grail:data:read, metric:read

🚀 Deployment

Vercel (Recomendado)

npm i -g vercel
vercel --prod

Netlify

npm i -g netlify-cli
netlify deploy --prod

Docker

docker build -t dynatrace-app .
docker run -p 3000:3000 dynatrace-app

Servidor Tradicional

npm run build
serve -s build

Instruções completas: Veja DEPLOYMENT_GUIDE.md

🛠️ Desenvolvimento

Comandos Úteis

# Desenvolvimento
npm start           # Dev server (port 3000)
npm run lint        # Linting
npm run type-check  # TypeScript

# Testes
npm test            # Unit tests
npm test -- --watch # Watch mode

# Produção
npm run build       # Build otimizado
npm run build -- --analyze  # Análise de bundle

📊 Arquitetura

Apresentação (8 páginas)
      ↓
UI Components (30 componentes)
      ↓
Hooks & State (13 hooks + AppContext)
      ↓
Business Logic (dataFetcher, alertHandler, configManager)
      ↓
Utilities (errorHandler, dataTransformer, dateFormatter)
      ↓
Dynatrace API (8 DQL queries)

Detalhes: Veja ARCHITECTURE.md

✅ Checklist Antes de Deployar

[ ] .env configurado com credenciais
[ ] npm run lint sem erros
[ ] npm run type-check sem erros
[ ] npm test passando
[ ] npm run build com sucesso
[ ] Build size < 500 KB
[ ] Ler DEPLOYMENT_GUIDE.md
[ ] Secrets configurados na plataforma

🔐 Segurança

✅ Sem hardcoded secrets
✅ Environment variables
✅ HTTPS em produção
✅ Bearer token auth
✅ Error handling seguro
✅ CI/CD security scanning

📈 Performance

Bundle Size: < 500 KB (gzipped)
FCP: < 1.8s
LCP: < 2.5s
TTI: < 3.8s
Type Safety: 100%

🧪 Testing

Unit Tests: Jest + React Testing Library
Integration: Component + hooks
E2E: Cypress
Coverage Target: 75%+

Guia completo: Veja TESTING_GUIDE.md

🔄 CI/CD

GitHub Actions pipeline automático:

✅ Linting
✅ Type checking
✅ Unit tests
✅ Build production
✅ Security scanning
✅ E2E tests
✅ Deployment (main branch)

Setup: Configure secrets no GitHub (DT_ENVIRONMENT_ID, DT_API_TOKEN, DT_API_BASE)

📁 Estrutura do Projeto

dynatrace-service-monitor-app/
├─ src/
│  ├─ functions/         (dataFetcher, alertHandler, configManager)
│  ├─ utils/            (errorHandler, dataTransformer, dateFormatter)
│  ├─ contexts/         (AppContext + useReducer)
│  ├─ hooks/            (13 custom hooks)
│  ├─ types/            (11+ interfaces)
│  ├─ config/           (DQL queries, constants)
│  └─ index.tsx
├─ ui/app/
│  ├─ pages/           (8 pages)
│  ├─ components/      (30 components)
│  └─ styles/          (11 CSS modules)
├─ public/             (static assets)
├─ .github/workflows/  (CI/CD)
├─ DOCUMENTATION/      (Guias)
└─ package.json

💡 Recursos Úteis

❓ FAQ

P: Posso usar em produção?
R: Sim! 100% production-ready com type-safety, testes e documentação.

P: Preciso de backend?
R: Não! Conecta diretamente à API Dynatrace. É 100% frontend.

P: Como proteger o API token?
R: Use variáveis de ambiente. Nunca commita .env com secrets.

P: Qual é o melhor deployment?
R: Vercel é recomendado - fácil, grátis para pequenos projetos.

📞 Suporte

Verifique a documentação relevante
Consulte TROUBLESHOOTING em DEPLOYMENT_GUIDE.md
Revise exemplos em TESTING_GUIDE.md

📝 Resumos das Fases

FASE4_RESUMO_COMPLETO.md - Deploy & Documentation
PROJETO_COMPLETO_RESUMO.txt - Visão geral
INDICE_COMPLETO_PROJETO.txt - Índice

🎉 Pronto?

Próximo passo: Leia 00_LEIA_PRIMEIRO.txt

Bom desenvolvimento! 🚀

Versão: 1.0.0 | Última atualização: Dezembro 12, 2025 | Status: ✅ Production Ready