docs(observability): add grafana integration docs along with sample d…

…ashboards (#1997) * docs(observability): add grafana integration docs along with sample dashboards Signed-off-by: Pratyush Singhal <psinghal20@gmail.com> * refactor(docs): move grafana docs to site directory, remove unneccessary prometheus envoyproxy config and add images for dashboards in doc Signed-off-by: Pratyush Singhal <psinghal20@gmail.com> * chore(docs): fix markdown lint error in grafana docs Signed-off-by: Pratyush Singhal <psinghal20@gmail.com> * chore(docs): add title section in grafana docs Signed-off-by: Pratyush Singhal <psinghal20@gmail.com> --------- Signed-off-by: Pratyush Singhal <psinghal20@gmail.com>
envoyproxy · Oct 19, 2023 · 23c91a6 · 23c91a6
1 parent f203fe5
commit 23c91a6
Show file tree

Hide file tree

Showing 8 changed files with 4,914 additions and 0 deletions.
diff --git a/examples/grafana/dashboards/envoy-clusters.json b/examples/grafana/dashboards/envoy-clusters.json
diff --git a/examples/grafana/dashboards/envoy-global.json b/examples/grafana/dashboards/envoy-global.json
diff --git a/examples/grafana/dashboards/envoy-pod-resource.json b/examples/grafana/dashboards/envoy-pod-resource.json
@@ -0,0 +1,229 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": 6,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "PBFA97CFB590B2093"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 0,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "auto",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "PBFA97CFB590B2093"
+          },
+          "editorMode": "code",
+          "exemplar": false,
+          "expr": "sum by(pod) (container_memory_working_set_bytes{container=~\"envoy\"}/1000000)",
+          "instant": false,
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Memory Working Set Envoy Pods(mb)",
+      "transformations": [],
+      "type": "timeseries"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "PBFA97CFB590B2093"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 0,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "auto",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "id": 1,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "PBFA97CFB590B2093"
+          },
+          "editorMode": "builder",
+          "expr": "sum by(pod) (rate(container_cpu_usage_seconds_total{container=\"envoy\"}[5m]))",
+          "instant": false,
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "CPU Usage Envoy Pods",
+      "type": "timeseries"
+    }
+  ],
+  "refresh": "",
+  "schemaVersion": 38,
+  "style": "dark",
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-5m",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Envoy Pod Memory and CPU Usage",
+  "uid": "f2279235-80b7-4c85-84f4-f25a3bf3eac0",
+  "version": 2,
+  "weekStart": ""
+}
diff --git a/examples/grafana/helm-values.yaml b/examples/grafana/helm-values.yaml
@@ -0,0 +1,12 @@
+datasources:
+  datasources.yaml:
+    apiVersion: 1
+    datasources:
+      - name: Prometheus
+        type: prometheus
+        url: http://prometheus-server
+
+adminPassword: admin
+
+service:
+  type: LoadBalancer
diff --git a/site/content/en/latest/user/grafana-integration.md b/site/content/en/latest/user/grafana-integration.md
@@ -0,0 +1,60 @@
+---
+title: "Visualising metrics using Grafana"
+---
+# Visualising metrics using Grafana
+
+Envoy Gateway provides support for exposing Envoy Proxy metrics to a Prometheus instance.
+This guide shows you how to visualise the metrics exposed to prometheus using grafana.
+
+## Prerequisites
+
+Follow the steps from the [Quickstart Guide](quickstart.md) to install Envoy Gateway and the example manifest.
+Before proceeding, you should be able to query the example backend using HTTP.
+
+Follow the steps from the [Proxy Observability](proxy-observability.md#Metrics) to enable prometheus metrics.
+
+[Prometheus](https://prometheus.io) is used to scrape metrics from the Envoy Proxy instances. Install Prometheus:
+
+```shell
+helm repo add prometheus-community https://prometheus-community.github.io/helm-charts
+helm repo update
+helm upgrade --install prometheus prometheus-community/prometheus -n monitoring --create-namespace
+```
+
+[Grafana](https://grafana.com/grafana/) is used to visualise the metrics exposed by the envoy proxy instances.
+Install Grafana:
+
+```shell
+helm repo add grafana https://grafana.github.io/helm-charts
+helm repo update
+helm upgrade --install grafana grafana/grafana -f https://raw.githubusercontent.com/envoyproxy/gateway/latest/examples/grafana/helm-values.yaml -n monitoring --create-namespace
+```
+
+Expose endpoints:
+
+```shell
+GRAFANA_IP=$(kubectl get svc grafana -n monitoring -o jsonpath='{.status.loadBalancer.ingress[0].ip}')
+```
+
+## Connecting Grafana with Prometheus datasource
+To visualise metrics from Prometheus, we have to connect Grafana with Prometheus. If you installed Grafana from the command
+from prerequisites sections, the prometheus datasource should be already configured.
+
+You can also add the data source manually by following the instructions from [Grafana Docs](https://grafana.com/docs/grafana/latest/datasources/prometheus/configure-prometheus-data-source/).
+
+## Accessing Grafana
+You can access the Grafana instance by visiting `http://{GRAFANA_IP}`, derived in prerequisites.
+
+To log in to Grafana, use the credentials `admin:admin`.
+
+Envoy Gateway has examples of dashboard for you to get started:
+### [Envoy Global](https://raw.githubusercontent.com/envoyproxy/gateway/latest/examples/dashboards/envoy-global.json)
+![Envoy Global](/img/envoy-global-dashboard.png)
+
+### [Envoy Clusters]((https://raw.githubusercontent.com/envoyproxy/gateway/latest/examples/dashboards/envoy-clusters.json))
+![Envoy Clusters](/img/envoy-clusters-dashboard.png)
+
+### [Envoy Pod Resources]((https://raw.githubusercontent.com/envoyproxy/gateway/latest/examples/dashboards/envoy-pod-resource.json))
+![Envoy Pod Resources](/img/envoy-pod-resources-dashboard.png)
+
+You can load the above dashboards in your Grafana to get started. Please refer to Grafana docs for [importing dashboards](https://grafana.com/docs/grafana/latest/dashboards/manage-dashboards/#import-a-dashboard).
diff --git a/site/static/img/envoy-clusters-dashboard.png b/site/static/img/envoy-clusters-dashboard.png
diff --git a/site/static/img/envoy-global-dashboard.png b/site/static/img/envoy-global-dashboard.png
diff --git a/site/static/img/envoy-pod-resources-dashboard.png b/site/static/img/envoy-pod-resources-dashboard.png