# Grafana Ricing -- Design System Alignment

## Context

The Grafana instance at stats.irc.now uses stock Grafana styling: default rainbow colors (blue, green, orange, yellow, purple, red), all UI features enabled (Explore, Alerting, News, Help, Snapshots), and no alignment with the irc.now design system. The goal is to strip it down to a clean dashboard viewer and remap all colors to the design system palette.

## Approach

Config + dashboard JSON changes only. No custom CSS, no custom Grafana image.

## Files to Modify

1. `deploy/monitoring/grafana.yaml` -- copy from worktree, add feature disablement config
2. `deploy/monitoring/grafana-dashboard.yaml` -- admin dashboard (20 panels), remap colors
3. `deploy/monitoring/grafana-dashboard-public.yaml` -- copy from worktree, remap colors

## Step 1: Grafana CR -- Disable Features

Add to `spec.config` in `grafana.yaml`:

```yaml
    explore:
      enabled: "false"
    alerting:
      enabled: "false"
    unified_alerting:
      enabled: "false"
    news:
      news_feed_enabled: "false"
    snapshots:
      enabled: "false"
    analytics:
      reporting_enabled: "false"
      check_for_updates: "false"
      check_for_plugin_updates: "false"
    help:
      enabled: "false"
    users:
      default_theme: dark
      viewers_can_edit: "false"
```

## Step 2: Color Palette Mapping

Design system colors used for Grafana:

| Token | Hex | Grafana Use |
|-------|-----|-------------|
| `--g` (brand green) | `#5CA882` | Primary stats, primary series |
| `--g2` (green light) | `#72C09A` | Secondary stats, secondary series |
| `--na` (nick A) | `#68AA82` | Growth metrics, "good" threshold |
| `--nb` (nick B) | `#AA9E68` | Pastes, "warning" threshold |
| `--nc` (nick C) | `#68A0AA` | Images, cool contrast |
| `--nd` (nick D) | `#AA68A0` | Logins, "bad" threshold |
| `--ne` (nick E) | `#88AA58` | Bots, HTTP bot service |

## Step 3: Public Dashboard (6 panels)

| Panel | Current | New Hex |
|-------|---------|---------|
| Users (stat) | `blue` | `#5CA882` |
| Active Users 24h (stat) | `green` | `#72C09A` |
| Pastes (stat) | `orange` | `#AA9E68` |
| Images (stat) | `yellow` | `#68A0AA` |
| Users Over Time (timeseries) | defaults | Total=#5CA882, Active=#72C09A |
| Content Over Time (timeseries) | defaults | Pastes=#AA9E68, Images=#68A0AA, Bots=#88AA58 |

Timeseries panels get `fieldConfig.overrides` with fixed colors per series.

## Step 4: Admin Dashboard (20 panels)

**Stat panels:**

| Panel | Current | New Hex |
|-------|---------|---------|
| Users | `blue` | `#5CA882` |
| Active Users 24h | `green` | `#72C09A` |
| Logins | `purple` | `#AA68A0` |
| Pastes | `orange` | `#AA9E68` |
| Images | `yellow` | `#68A0AA` |
| Bots | `red` | `#88AA58` |
| MRR | `green` | `#5CA882` |
| Subscriptions | `green` | `#72C09A` |
| Signups 7d | `blue` | `#68AA82` |

**Multi-step threshold panels:**

| Panel | Steps | New Colors |
|-------|-------|------------|
| Bots Running (gauge) | good/warn/bad | `#68AA82` / `#AA9E68` / `#AA68A0` |
| Conversion Rate | low/healthy | `#AA9E68` / `#5CA882` |
| Churn Rate | good/warn/bad | `#68AA82` / `#AA9E68` / `#AA68A0` |

**Timeseries panels -- per-series overrides:**

| Panel | Series -> Color |
|-------|-----------------|
| Users Over Time | Total=#5CA882, Active=#72C09A |
| Content Over Time | Pastes=#AA9E68, Images=#68A0AA, Bots=#88AA58 |
| Storage | Pastes=#AA9E68, Images=#68A0AA |
| IRC Bouncer | Networks=#5CA882, Channels=#AA9E68, Active=#72C09A |
| HTTP Requests | web-api=#5CA882, txt=#AA9E68, pics=#68A0AA, bot=#88AA58 |
| HTTP Latency | web-api=#5CA882, txt=#AA9E68, pics=#68A0AA, bot=#88AA58 |
| Revenue Over Time | MRR=#5CA882, Subscriptions=#72C09A |

**Pie chart (Users by Plan):** free=#68AA82, pro=#5CA882

## Step 5: Deploy and Verify

```bash
# Copy worktree files to main branch deploy/monitoring/
# (grafana.yaml, grafana-dashboard-public.yaml)

# Apply
oc apply -f deploy/monitoring/grafana.yaml -n irc-josie-cloud
oc apply -f deploy/monitoring/grafana-dashboard.yaml -n irc-josie-cloud
oc apply -f deploy/monitoring/grafana-dashboard-public.yaml -n irc-josie-cloud
```

**Verify at https://stats.irc.now:**
- No Explore, Alerting, News, Help, or Snapshots in sidebar
- Dark theme active
- Viewers cannot enter edit mode
- All stat panels show design system greens/golds/teals, no Grafana rainbow
- Timeseries use nick palette consistently across dashboards
- Gauge/threshold panels use green->gold->mauve progression
- Data still renders correctly (no broken panels)