apiVersion: v1
kind: ConfigMap
metadata:
  name: svc-story-crater-frontend-dashboard
  namespace: logging
  labels:
    grafana_dashboard: "1"
  annotations:
    grafana_folder: "Story Crater Frontend"
data:
  svc-story-crater-frontend.json: |
    {
      "title": "Story Crater Frontend — Service Overview",
      "uid": "svc-story-crater-frontend",
      "schemaVersion": 39,
      "timezone": "browser",
      "time": { "from": "now-6h", "to": "now" },
      "refresh": "30s",
      "panels": [
        {
          "id": 1, "title": "Row: Availability & Golden Signals", "type": "row",
          "collapsed": true, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 0 },
          "panels": [
            {
              "id": 2, "title": "Up", "type": "stat",
              "gridPos": { "h": 4, "w": 6, "x": 0, "y": 1 },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "fieldConfig": {
                "defaults": {
                  "color": { "mode": "thresholds" },
                  "mappings": [
                    { "type": "value", "options": { "0": { "text": "DOWN", "color": "red" }, "1": { "text": "UP", "color": "green" } } }
                  ],
                  "thresholds": { "mode": "absolute", "steps": [ { "value": null, "color": "red" }, { "value": 1, "color": "green" } ] }
                }
              },
              "targets": [{ "expr": "min(up{job=\"story-crater-frontend\"})" }]
            },
            {
              "id": 3, "title": "HTTP request rate by status", "type": "timeseries",
              "gridPos": { "h": 8, "w": 9, "x": 6, "y": 1 },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "sum(rate(story_crater_frontend_http_requests_total[5m])) by (status)", "legendFormat": "{{status}}" }]
            },
            {
              "id": 4, "title": "Error rate % (5xx)", "type": "timeseries",
              "gridPos": { "h": 8, "w": 9, "x": 15, "y": 1 },
              "fieldConfig": { "defaults": { "unit": "percent" } },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "sum(rate(story_crater_frontend_http_requests_total{status=~\"5..\"}[5m])) / sum(rate(story_crater_frontend_http_requests_total[5m])) * 100" }]
            },
            {
              "id": 5, "title": "Request duration p50/p95/p99", "type": "timeseries",
              "gridPos": { "h": 8, "w": 12, "x": 0, "y": 9 },
              "fieldConfig": { "defaults": { "unit": "ms" } },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [
                { "expr": "histogram_quantile(0.50, sum(rate(story_crater_frontend_http_request_duration_ms_bucket[5m])) by (le))", "legendFormat": "p50" },
                { "expr": "histogram_quantile(0.95, sum(rate(story_crater_frontend_http_request_duration_ms_bucket[5m])) by (le))", "legendFormat": "p95" },
                { "expr": "histogram_quantile(0.99, sum(rate(story_crater_frontend_http_request_duration_ms_bucket[5m])) by (le))", "legendFormat": "p99" }
              ]
            }
          ]
        },
        {
          "id": 10, "title": "Row: Resource Usage", "type": "row",
          "collapsed": true, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 1 },
          "panels": [
            {
              "id": 11, "title": "CPU by pod", "type": "timeseries",
              "gridPos": { "h": 8, "w": 8, "x": 0, "y": 2 },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "sum(rate(container_cpu_usage_seconds_total{namespace=\"story-crater-frontend\"}[5m])) by (pod)", "legendFormat": "{{pod}}" }]
            },
            {
              "id": 12, "title": "Memory by pod", "type": "timeseries",
              "gridPos": { "h": 8, "w": 8, "x": 8, "y": 2 },
              "fieldConfig": { "defaults": { "unit": "bytes" } },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "sum(container_memory_working_set_bytes{namespace=\"story-crater-frontend\"}) by (pod)", "legendFormat": "{{pod}}" }]
            },
            {
              "id": 13, "title": "Restart rate by pod", "type": "timeseries",
              "gridPos": { "h": 8, "w": 8, "x": 16, "y": 2 },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "sum(rate(kube_pod_container_status_restarts_total{namespace=\"story-crater-frontend\"}[15m])) by (pod)", "legendFormat": "{{pod}}" }]
            }
          ]
        },
        {
          "id": 20, "title": "Row: Web Vitals", "type": "row",
          "collapsed": true, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 2 },
          "panels": [
            {
              "id": 21, "title": "LCP p75 (Largest Contentful Paint)", "type": "timeseries",
              "gridPos": { "h": 7, "w": 6, "x": 0, "y": 3 },
              "fieldConfig": {
                "defaults": {
                  "unit": "ms",
                  "thresholds": {
                    "mode": "absolute",
                    "steps": [
                      { "value": null, "color": "green" },
                      { "value": 2500, "color": "orange" },
                      { "value": 4000, "color": "red" }
                    ]
                  }
                }
              },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "histogram_quantile(0.75, story_crater_frontend_web_vitals_lcp_ms)", "legendFormat": "LCP p75" }]
            },
            {
              "id": 22, "title": "FID p75 (First Input Delay)", "type": "timeseries",
              "gridPos": { "h": 7, "w": 6, "x": 6, "y": 3 },
              "fieldConfig": {
                "defaults": {
                  "unit": "ms",
                  "thresholds": {
                    "mode": "absolute",
                    "steps": [
                      { "value": null, "color": "green" },
                      { "value": 100, "color": "orange" },
                      { "value": 300, "color": "red" }
                    ]
                  }
                }
              },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "histogram_quantile(0.75, story_crater_frontend_web_vitals_fid_ms)", "legendFormat": "FID p75" }]
            },
            {
              "id": 23, "title": "CLS (Cumulative Layout Shift)", "type": "timeseries",
              "gridPos": { "h": 7, "w": 6, "x": 12, "y": 3 },
              "fieldConfig": {
                "defaults": {
                  "thresholds": {
                    "mode": "absolute",
                    "steps": [
                      { "value": null, "color": "green" },
                      { "value": 0.1, "color": "orange" },
                      { "value": 0.25, "color": "red" }
                    ]
                  }
                }
              },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "max(story_crater_frontend_web_vitals_cls)", "legendFormat": "CLS" }]
            },
            {
              "id": 24, "title": "INP p75 (Interaction to Next Paint)", "type": "timeseries",
              "gridPos": { "h": 7, "w": 6, "x": 18, "y": 3 },
              "fieldConfig": {
                "defaults": {
                  "unit": "ms",
                  "thresholds": {
                    "mode": "absolute",
                    "steps": [
                      { "value": null, "color": "green" },
                      { "value": 200, "color": "orange" },
                      { "value": 500, "color": "red" }
                    ]
                  }
                }
              },
              "datasource": { "type": "prometheus", "uid": "prometheus" },
              "targets": [{ "expr": "histogram_quantile(0.75, story_crater_frontend_web_vitals_inp_ms)", "legendFormat": "INP p75" }]
            }
          ]
        },
        {
          "id": 30, "title": "Row: Logs", "type": "row",
          "collapsed": true, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 3 },
          "panels": [
            {
              "id": 31, "title": "Recent logs", "type": "logs",
              "gridPos": { "h": 10, "w": 24, "x": 0, "y": 4 },
              "datasource": { "type": "loki", "uid": "loki" },
              "targets": [{ "expr": "{namespace=\"story-crater-frontend\"}" }]
            }
          ]
        }
      ]
    }
