111 lines
4.1 KiB
Markdown
111 lines
4.1 KiB
Markdown
# Ops Portal — Network Page Pattern
|
|
|
|
Created: 2026-07-08
|
|
Session: Built `/var/www/ops/network.html` — network infrastructure page for the ops portal
|
|
Domain: `ops.itpropartner.com`
|
|
Root: `/var/www/ops/`
|
|
|
|
## Page structure
|
|
|
|
| Section | Content |
|
|
|---|---|
|
|
| **Nav** | Shared via `fetch('/nav.html')` — nav partial already had the `/network.html` link |
|
|
| **Header** | Title "Network", status summary, last-updated timestamp, refresh button |
|
|
| **Network Health Overview** | 5-card grid: DNS Zones tracked, API Checks (ok/total), Routers tracked, Domains active, Overall health score |
|
|
| **MikroTik Routers** | Amber placeholder card + conditional backup history row from S3 data |
|
|
| **Ubiquiti / UISP** | Teal placeholder card |
|
|
| **DNS & Domains** | Live table from `data.cloudflare_zones` or `data.domains` with soft-coded fallback |
|
|
| **Network Health — Port & Service Checks** | Grid of API/port check cards |
|
|
|
|
## Reusable patterns
|
|
|
|
### 1. Fallback data for when collector is offline
|
|
|
|
When a page depends on data from a live collector that may be offline, provide a hardcoded fallback so the page is useful from day one:
|
|
|
|
```javascript
|
|
var KNOWN_ZONES = [
|
|
{ name: 'itpropartner.com', zone: '' },
|
|
{ name: 'nousresearch.com', zone: '' },
|
|
// ...
|
|
];
|
|
```
|
|
|
|
Render logic: prefer live data → fall back to known list → show "Pending" badges → the page always has content even if the data source is down.
|
|
|
|
### 2. Placeholder card pattern
|
|
|
|
Sections that aren't yet connected to a live data source use a `placeholder-card` with status badges:
|
|
|
|
```html
|
|
<div class="placeholder-card">
|
|
<div class="p-icon">🔄</div>
|
|
<div class="p-body">
|
|
<div class="p-title">Title of feature</div>
|
|
<div class="p-desc">Description of what will show when configured</div>
|
|
<div class="p-meta">
|
|
<span>Status: Not configured</span>
|
|
<span>Requires: API Key</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
Three color variants are defined:
|
|
- `.placeholder-card` (amber) — not yet configured
|
|
- `.placeholder-card.placeholder-teal` — setup required (teal accent)
|
|
- `.placeholder-card.placeholder-purple` — reserved for future use
|
|
|
|
### 3. Data-source-agnostic health grid
|
|
|
|
The health overview at the top fetches from multiple possible data paths:
|
|
|
|
| Metric | Data path priority |
|
|
|---|---|
|
|
| DNS Zones | `data.cloudflare_zones` → `data.domains` → `KNOWN_ZONES.length` |
|
|
| API Checks | `data.api_health` → `data.api_checks` → 0 |
|
|
| Routers | `data.routers` → 0 |
|
|
| Overall health | Weighted combination of zone status + API status |
|
|
|
|
This means the grid always renders something, even if only partial data is available.
|
|
|
|
### 4. S3 backup cross-section
|
|
|
|
When an S3 backup bucket name matches a section (e.g., "mikrotik-backups"), the section shows backup history inline:
|
|
|
|
```javascript
|
|
var s3Backups = getNested(data, 's3_backups', []);
|
|
for (var i = 0; i < s3Backups.length; i++) {
|
|
var bName = (b.name || b.bucket_name || b.bucket || '').toLowerCase();
|
|
if (bName.indexOf('mikrotik') !== -1) {
|
|
// Show backup row with last_upload, age color, status dot
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5. Plain CSS (no Tailwind CDN)
|
|
|
|
This page uses plain CSS with CSS custom properties — same dark theme variables as the rest of the portal but no Tailwind CDN dependency. This is an alternative approach to the Tailwind-heavy mockups listed elsewhere in this skill. Useful when:
|
|
- The page is deployed in production (not a mockup)
|
|
- Caching and no-external-dep is preferred
|
|
- The shared `ops.css` stylesheet pattern is in play
|
|
|
|
## Data flow
|
|
|
|
Fetches `/data/ops-status.json` on load + auto-refresh every 30s. Expects these fields:
|
|
|
|
```json
|
|
{
|
|
"cloudflare_zones": [{ "name": "...", "status": "active" }],
|
|
"api_health": [{ "name": "...", "status": "ok" }],
|
|
"network_checks": { "hostname": { "status": "reachable", "latency_ms": 42 } },
|
|
"routers": [{ "name": "...", "status": "..." }],
|
|
"domains": [{ "name": "...", "status": "...", "last_checked": "..." }],
|
|
"s3_backups": [{ "name|bucket_name|bucket": "...", "status": "ok", "last_upload": "..." }]
|
|
}
|
|
```
|
|
|
|
## File
|
|
|
|
- `/var/www/ops/network.html` — 920 lines, 30 KB, plain HTML+CSS+JS, no external dependencies
|