the-tip-top-backend/grafana-http-panel.json

{
  "annotations": {
    "list": []
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 1,
  "id": null,
  "links": [],
  "panels": [
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": { "mode": "palette-classic" },
          "custom": {
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 15,
            "gradientMode": "opacity",
            "hideFrom": { "legend": false, "tooltip": false, "viz": false },
            "lineInterpolation": "smooth",
            "lineWidth": 2,
            "pointSize": 5,
            "scaleDistribution": { "type": "linear" },
            "showPoints": "never",
            "spanNulls": false,
            "stacking": { "group": "A", "mode": "none" },
            "thresholdsStyle": { "mode": "off" }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [{ "color": "green", "value": null }]
          },
          "unit": "reqps"
        },
        "overrides": [
          {
            "matcher": { "id": "byRegexp", "options": ".*Frontend.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "blue", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*Backend.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "green", "mode": "fixed" } }]
          }
        ]
      },
      "gridPos": { "h": 10, "w": 24, "x": 0, "y": 0 },
      "id": 1,
      "options": {
        "legend": {
          "calcs": ["mean", "max", "sum"],
          "displayMode": "table",
          "placement": "bottom",
          "showLegend": true
        },
        "tooltip": { "mode": "multi", "sort": "desc" }
      },
      "targets": [
        {
          "expr": "sum(rate(http_requests_total{job=\"backend\"}[1m]))",
          "legendFormat": "Backend - Total",
          "refId": "A"
        },
        {
          "expr": "sum(rate(http_requests_total{job=\"frontend\"}[1m]))",
          "legendFormat": "Frontend - Total",
          "refId": "B"
        }
      ],
      "title": "Historique HTTP - Requêtes/sec",
      "type": "timeseries"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": { "mode": "palette-classic" },
          "custom": {
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "bars",
            "fillOpacity": 80,
            "gradientMode": "none",
            "hideFrom": { "legend": false, "tooltip": false, "viz": false },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": { "type": "linear" },
            "showPoints": "never",
            "spanNulls": false,
            "stacking": { "group": "A", "mode": "normal" },
            "thresholdsStyle": { "mode": "off" }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [{ "color": "green", "value": null }]
          },
          "unit": "short"
        },
        "overrides": [
          {
            "matcher": { "id": "byRegexp", "options": ".*2[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "green", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*3[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "blue", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*4[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "yellow", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*5[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "red", "mode": "fixed" } }]
          }
        ]
      },
      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 10 },
      "id": 2,
      "options": {
        "legend": {
          "calcs": ["sum"],
          "displayMode": "table",
          "placement": "right",
          "showLegend": true
        },
        "tooltip": { "mode": "multi", "sort": "desc" }
      },
      "targets": [
        {
          "expr": "sum(increase(http_requests_total{job=\"backend\"}[5m])) by (status_code)",
          "legendFormat": "Backend {{status_code}}",
          "refId": "A"
        }
      ],
      "title": "Backend - HTTP par Status Code",
      "type": "timeseries"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": { "mode": "palette-classic" },
          "custom": {
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "bars",
            "fillOpacity": 80,
            "gradientMode": "none",
            "hideFrom": { "legend": false, "tooltip": false, "viz": false },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": { "type": "linear" },
            "showPoints": "never",
            "spanNulls": false,
            "stacking": { "group": "A", "mode": "normal" },
            "thresholdsStyle": { "mode": "off" }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [{ "color": "green", "value": null }]
          },
          "unit": "short"
        },
        "overrides": [
          {
            "matcher": { "id": "byRegexp", "options": ".*2[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "green", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*3[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "blue", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*4[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "yellow", "mode": "fixed" } }]
          },
          {
            "matcher": { "id": "byRegexp", "options": ".*5[0-9]{2}.*" },
            "properties": [{ "id": "color", "value": { "fixedColor": "red", "mode": "fixed" } }]
          }
        ]
      },
      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 10 },
      "id": 3,
      "options": {
        "legend": {
          "calcs": ["sum"],
          "displayMode": "table",
          "placement": "right",
          "showLegend": true
        },
        "tooltip": { "mode": "multi", "sort": "desc" }
      },
      "targets": [
        {
          "expr": "sum(increase(http_requests_total{job=\"frontend\"}[5m])) by (status_code)",
          "legendFormat": "Frontend {{status_code}}",
          "refId": "A"
        }
      ],
      "title": "Frontend - HTTP par Status Code",
      "type": "timeseries"
    }
  ],
  "refresh": "10s",
  "schemaVersion": 38,
  "style": "dark",
  "tags": ["http", "thetiptop"],
  "templating": {
    "list": [
      {
        "current": {},
        "hide": 0,
        "includeAll": false,
        "label": "Prometheus",
        "multi": false,
        "name": "DS_PROMETHEUS",
        "options": [],
        "query": "prometheus",
        "refresh": 1,
        "regex": "",
        "skipUrlSync": false,
        "type": "datasource"
      }
    ]
  },
  "time": { "from": "now-1h", "to": "now" },
  "timepicker": {},
  "timezone": "browser",
  "title": "Historique HTTP - TheTipTop",
  "uid": "historique-http-thetiptop",
  "version": 1
}