A network operations center (NOC) dashboard for monitoring and managing infrastructure through Atera RMM. Built with React, Vite, Tailwind CSS, and Recharts.
| Dark Mode | Light Mode |
|---|---|
| Overview with KPI cards, charts, and alert table | Full light theme support with toggle |
- KPI cards — Total agents (online/offline breakdown), active alerts, open tickets, pending tickets, customer count
- Agents by Customer — Horizontal bar chart showing device distribution
- Online vs Offline — Stacked bar chart per customer
- Alert Trend — 12-month stacked area chart by severity (Critical, Warning, Information)
- Ticket Trend — 12-month line chart
- Tickets by Source — Donut chart (Email, Alert, Phone, Scheduled, Chat, Web)
- OS Distribution — Horizontal bar chart of Windows/Linux versions
- Active Alerts Table — Severity indicator, title, device, customer, relative timestamp
- Searchable and filterable table of all managed agents
- Filter by customer, online/offline status
- Sort by any column (name, customer, OS, IP, RAM, last seen)
- Pagination (25 per page)
- Search across name, customer, IP, and logged-in user
- Active alerts displayed as expanded cards with alert messages
- Severity badges (Critical = red, Information = blue)
- Recent alerts timeline (last 50) in a sortable table
- Filter by severity and customer
- Tickets by Status donut chart (Open, Closed, Pending, Deleted, Merged, Resolved)
- Tickets by Priority bar chart
- Open and pending tickets table with status/priority badges
- Filter by status, priority, and customer
- Card grid layout with customer details
- Agent count and ticket count per customer
- Domain, address, phone, and customer-since date
- Dark/light mode — Dark-first NOC aesthetic with full light mode support
- Collapsible sidebar — Icon-only mode for more screen space
- Active alert badge — Count indicator on the Alerts nav item
- Responsive — Works on desktop and tablet viewports
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build | Vite |
| Styling | Tailwind CSS 3 + shadcn/ui |
| Charts | Recharts |
| Routing | wouter (hash-based) |
| Data Fetching | TanStack React Query |
| Icons | Lucide React |
| Backend | Express (serves static build) |
The dashboard reads pre-exported JSON files from client/public/data/. These are generated by the companion atera-connector tool, which pulls live data from the Atera API v3.
| File | Contents |
|---|---|
summary.json |
KPIs and distribution breakdowns |
agents.json |
All managed agents with hardware/OS/network details |
active-alerts.json |
Currently active (non-archived) alerts |
recent-alerts.json |
Last 50 alerts for the timeline |
open-tickets.json |
Open and pending tickets |
customers.json |
Customer profiles with metadata |
alert-trend.json |
Monthly alert counts by severity (12 months) |
ticket-trend.json |
Monthly ticket volume (12 months) |
- Node.js 18+
- npm
git clone https://github.com/brianatalliance/atera-dashboard.git
cd atera-dashboard
npm installnpm run devOpens at http://localhost:5000. Vite handles hot reload for frontend changes.
npm run build
NODE_ENV=production node dist/index.cjsUse the atera-connector CLI to re-export fresh data from Atera:
python3 atera_api.py list-agents --all-pages --output json --quiet > data/agents.json
python3 atera_api.py list-alerts --all-pages --output json --quiet > data/alerts.json
# ... etc.Or run the full export script to regenerate all dashboard JSON files.
atera-dashboard/
├── client/
│ ├── public/data/ # Static JSON data files
│ ├── src/
│ │ ├── components/
│ │ │ ├── DashboardLayout.tsx # Sidebar + header + theme toggle
│ │ │ ├── PerplexityAttribution.tsx
│ │ │ └── ui/ # shadcn/ui components
│ │ ├── hooks/
│ │ │ ├── use-data.ts # Data fetching hooks + TypeScript interfaces
│ │ │ └── use-chart-theme.ts # Theme-aware chart colors
│ │ ├── pages/
│ │ │ ├── overview.tsx
│ │ │ ├── agents.tsx
│ │ │ ├── alerts.tsx
│ │ │ ├── tickets.tsx
│ │ │ └── customers.tsx
│ │ ├── App.tsx # Router setup
│ │ └── index.css # Tailwind + NOC theme variables
│ └── index.html
├── server/ # Express server
├── shared/ # Shared schema
├── package.json
└── tailwind.config.ts
- perplexity-windows-xpc — Perplexity AI for Windows — PowerShell, system tray, Office integration
- perplexity-xpc — PerplexityXPC broker service, tray app, MCP server management
- perplexity-connector — Perplexity Sonar API connector — CLI, streaming, async, structured output
- atera-connector — Atera RMM API v3 connector — Python CLI with full CRUD support
- synology-connector — Synology DSM Web API connector — 40 CLI actions across 10 modules
- udm-nspawn-pki — Two-tier PKI in systemd-nspawn on UniFi Dream Machine Pro
- wireguard-vpn-spk — WireGuard VPN Tunnel SPK for Synology DS220+ (userspace wireguard-go)
- nas-git-sync — Automated GitHub to Synology NAS repo sync script
- React — UI component framework
- Vite — Frontend build tool and dev server
- Tailwind CSS — Utility-first styling
- Recharts — Chart library for KPI visualizations
- Atera RMM — The RMM platform powering the data
Brian Vicente — Network Coordinator & Cybersecurity Admin
Built with Perplexity Computer