185 lines
8.4 KiB
YAML
185 lines
8.4 KiB
YAML
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\"}" }]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|