Add State Timeline to Grafana Dashboard

[mayjs]

I played around with better visualizations of the OctoPrint state in Grafana. With the help of this stackoverflow answer, I was able to create this:

Maybe this would be worth adding to the Grafana example? I prefer it over the default line plot that is included.

This is not quite finished, since you'd need to add color mappings for the remaining possible states, but this is my current JSON for the panel:

{
  "datasource": {
    "uid": "${DATASOURCE}",
    "type": "prometheus"
  },
  "fieldConfig": {
    "defaults": {
      "custom": {
        "lineWidth": 0,
        "fillOpacity": 70,
        "spanNulls": false,
        "insertNulls": 3600000,
        "hideFrom": {
          "tooltip": false,
          "viz": false,
          "legend": false
        }
      },
      "color": {
        "mode": "continuous-GrYlRd"
      },
      "mappings": [
        {
          "options": {
            "Operational": {
              "color": "blue",
              "index": 1
            },
            "Printing": {
              "color": "green",
              "index": 0
            }
          },
          "type": "value"
        }
      ],
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {
            "color": "green",
            "value": null
          },
          {
            "color": "red",
            "value": 80
          }
        ]
      }
    },
    "overrides": []
  },
  "gridPos": {
    "h": 5,
    "w": 24,
    "x": 0,
    "y": 0
  },
  "id": 12,
  "options": {
    "mergeValues": true,
    "showValue": "auto",
    "alignValue": "center",
    "rowHeight": 0.9,
    "legend": {
      "showLegend": true,
      "displayMode": "list",
      "placement": "bottom"
    },
    "tooltip": {
      "mode": "single",
      "sort": "none",
      "maxHeight": 600
    }
  },
  "pluginVersion": "11.0.0",
  "targets": [
    {
      "datasource": {
        "type": "prometheus",
        "uid": "PBFA97CFB590B2093"
      },
      "editorMode": "builder",
      "expr": "octoprint_printer_state_info{}",
      "format": "table",
      "instant": false,
      "legendFormat": "__auto",
      "range": true,
      "refId": "A"
    }
  ],
  "title": "Printer State",
  "transformations": [
    {
      "id": "groupingToMatrix",
      "options": {
        "columnField": "instance",
        "rowField": "Time",
        "valueField": "state_string"
      }
    },
    {
      "id": "convertFieldType",
      "options": {
        "conversions": [
          {
            "destinationType": "time",
            "targetField": "Time\\instance"
          }
        ],
        "fields": {}
      }
    }
  ],
  "type": "state-timeline"
}

[tg44]

Sure, PR it.