grafana-treemap-panel
grafana-treemap-panel copied to clipboard
Published
20 hours ago •
grafana
grafana
tiles do not respect field override value mappings
I'm trying to use field overrides to make my treemap more human-friendly, and I'm getting inconsistent results.
For demo purposes I made two field overrides, with one value mapping in each. The mapping just adds a ! suffix to make it clear when the override is being respected:
I also added those fields to the tooltip:
When rendering the labels for each tile, the override is not respected:
I expected to see kube-system! and coredns! there.
However, the tooltip does show the expected value mappings:
Looking briefly at the code, I think the difference is in <TreemapPanel>. It calls a display() function for the tooltip:
https://github.com/grafana/grafana-treemap-panel/blob/main/src/TreemapPanel.tsx#L101
but not for the node name:
https://github.com/grafana/grafana-treemap-panel/blob/main/src/TreemapPanel.tsx#L133
| Key | Value |
|---|---|
| Panel | marcusolsson-treemap-panel @ 9.3.2-45041 (07be773161) |
| Grafana | 9.3.2-45041 (07be773161) // Pro |
Panel debug snapshot dashboard
{
"panels": [
{
"id": 2,
"gridPos": {
"h": 13,
"w": 15,
"x": 0,
"y": 0
},
"type": "marcusolsson-treemap-panel",
"title": "Reproduced with embedded data",
"datasource": {
"type": "grafana",
"uid": "grafana"
},
"description": "overrides value mappings are not respected",
"fieldConfig": {
"defaults": {
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"color": {
"mode": "thresholds"
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "namespace"
},
"properties": [
{
"id": "mappings",
"value": [
{
"type": "value",
"options": {
"kube-system": {
"text": "kube-system!",
"index": 0
}
}
}
]
}
]
},
{
"matcher": {
"id": "byName",
"options": "deployment"
},
"properties": [
{
"id": "mappings",
"value": [
{
"type": "value",
"options": {
"coredns": {
"text": "coredns!",
"index": 0
}
}
}
]
}
]
}
]
},
"options": {
"tiling": "treemapSquarify",
"colorByField": "Value",
"groupByField": "namespace",
"labelFields": [
"namespace",
"deployment"
],
"sizeField": "Value",
"textField": "deployment"
},
"targets": [
{
"refId": "A",
"datasource": {
"type": "grafana",
"uid": "grafana"
},
"queryType": "snapshot",
"snapshot": [
{
"schema": {
"refId": "A",
"meta": {
"type": "timeseries-many",
"custom": {
"resultType": "matrix"
},
"executedQueryString": "Expr: sum by (namespace, deployment) (kube_deployment_spec_replicas{namespace!=\"nalb-cp\"})\nStep: 1m0s",
"preferredVisualisationType": "table"
},
"fields": [
{
"name": "Time",
"type": "time",
"config": {}
},
{
"name": "deployment",
"config": {
"filterable": true
},
"type": "string"
},
{
"name": "namespace",
"config": {
"filterable": true
},
"type": "string"
},
{
"name": "Value",
"type": "number",
"config": {}
}
]
},
"data": {
"values": [
[
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000,
1671032640000,
1671032700000,
1671032760000,
1671032820000,
1671032880000,
1671032940000
],
[
"aad-pod-identity-mic",
"aad-pod-identity-mic",
"aad-pod-identity-mic",
"aad-pod-identity-mic",
"aad-pod-identity-mic",
"aad-pod-identity-mic",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager-cainjector",
"cert-manager-cainjector",
"cert-manager-cainjector",
"cert-manager-cainjector",
"cert-manager-cainjector",
"cert-manager-cainjector",
"cert-manager-webhook",
"cert-manager-webhook",
"cert-manager-webhook",
"cert-manager-webhook",
"cert-manager-webhook",
"cert-manager-webhook",
"coredns",
"coredns",
"coredns",
"coredns",
"coredns",
"coredns",
"coredns-autoscaler",
"coredns-autoscaler",
"coredns-autoscaler",
"coredns-autoscaler",
"coredns-autoscaler",
"coredns-autoscaler",
"grafana-agent-traces",
"grafana-agent-traces",
"grafana-agent-traces",
"grafana-agent-traces",
"grafana-agent-traces",
"grafana-agent-traces",
"helm-controller",
"helm-controller",
"helm-controller",
"helm-controller",
"helm-controller",
"helm-controller",
"image-automation-controller",
"image-automation-controller",
"image-automation-controller",
"image-automation-controller",
"image-automation-controller",
"image-automation-controller",
"image-reflector-controller",
"image-reflector-controller",
"image-reflector-controller",
"image-reflector-controller",
"image-reflector-controller",
"image-reflector-controller",
"ingress-nginx-controller",
"ingress-nginx-controller",
"ingress-nginx-controller",
"ingress-nginx-controller",
"ingress-nginx-controller",
"ingress-nginx-controller",
"konnectivity-agent",
"konnectivity-agent",
"konnectivity-agent",
"konnectivity-agent",
"konnectivity-agent",
"konnectivity-agent",
"kustomize-controller",
"kustomize-controller",
"kustomize-controller",
"kustomize-controller",
"kustomize-controller",
"kustomize-controller",
"metrics-server",
"metrics-server",
"metrics-server",
"metrics-server",
"metrics-server",
"metrics-server",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-operator",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"monitoring-kube-prometheus-stack-kube-state-metrics",
"notification-controller",
"notification-controller",
"notification-controller",
"notification-controller",
"notification-controller",
"notification-controller",
"source-controller",
"source-controller",
"source-controller",
"source-controller",
"source-controller",
"source-controller"
],
[
"aad-pod-identity",
"aad-pod-identity",
"aad-pod-identity",
"aad-pod-identity",
"aad-pod-identity",
"aad-pod-identity",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"cert-manager",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"ingress-nginx",
"ingress-nginx",
"ingress-nginx",
"ingress-nginx",
"ingress-nginx",
"ingress-nginx",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"kube-system",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"monitoring",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system",
"flux-system"
],
[
21,
21,
21,
21,
21,
21,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
22,
22,
22,
22,
22,
22,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
21,
21,
21,
21,
21,
21,
22,
22,
22,
22,
22,
22,
11,
11,
11,
11,
11,
11,
22,
22,
22,
22,
22,
22,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11,
11
]
]
}
}
]
}
]
},
{
"gridPos": {
"h": 7,
"w": 9,
"x": 15,
"y": 0
},
"id": 5,
"options": {
"content": "<table width=\"100%\">\n <tr>\n <th width=\"2%\">Panel</th>\n <td >marcusolsson-treemap-panel @ 9.3.2-45041 (07be773161)</td>\n </tr>\n <tr>\n <th>Queries</th>\n <td>A[prometheus]</td>\n </tr>\n \n <tr><th>Data</th><td> 1 frames, 4 fields, 108 rows </td></tr>\n \n <tr>\n <th>Grafana</th>\n <td>9.3.2-45041 (07be773161) // Pro</td>\n </tr>\n </table>",
"mode": "html"
},
"title": "Debug info",
"type": "text"
},
{
"id": 6,
"title": "Original Panel JSON",
"type": "text",
"gridPos": {
"h": 13,
"w": 9,
"x": 15,
"y": 7
},
"options": {
"content": "{\n \"id\": 96,\n \"gridPos\": {\n \"h\": 8,\n \"w\": 24,\n \"x\": 0,\n \"y\": 47\n },\n \"type\": \"marcusolsson-treemap-panel\",\n \"title\": \"Treemap override demo\",\n \"datasource\": {\n \"uid\": \"grafanacloud-prom\",\n \"type\": \"prometheus\"\n },\n \"description\": \"overrides value mappings are not respected\",\n \"fieldConfig\": {\n \"defaults\": {\n \"mappings\": [],\n \"thresholds\": {\n \"mode\": \"absolute\",\n \"steps\": [\n {\n \"color\": \"green\",\n \"value\": null\n },\n {\n \"color\": \"red\",\n \"value\": 80\n }\n ]\n },\n \"color\": {\n \"mode\": \"thresholds\"\n }\n },\n \"overrides\": [\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"namespace\"\n },\n \"properties\": [\n {\n \"id\": \"mappings\",\n \"value\": [\n {\n \"type\": \"value\",\n \"options\": {\n \"kube-system\": {\n \"text\": \"kube-system!\",\n \"index\": 0\n }\n }\n }\n ]\n }\n ]\n },\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"deployment\"\n },\n \"properties\": [\n {\n \"id\": \"mappings\",\n \"value\": [\n {\n \"type\": \"value\",\n \"options\": {\n \"coredns\": {\n \"text\": \"coredns!\",\n \"index\": 0\n }\n }\n }\n ]\n }\n ]\n }\n ]\n },\n \"options\": {\n \"tiling\": \"treemapSquarify\",\n \"colorByField\": \"Value\",\n \"groupByField\": \"namespace\",\n \"labelFields\": [\n \"namespace\",\n \"deployment\"\n ],\n \"sizeField\": \"Value\",\n \"textField\": \"deployment\"\n },\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"prometheus\",\n \"uid\": \"grafanacloud-prom\"\n },\n \"editorMode\": \"code\",\n \"expr\": \"sum by (namespace, deployment) (kube_deployment_spec_replicas{namespace!=\\\"nalb-cp\\\"})\",\n \"format\": \"table\",\n \"legendFormat\": \"__auto\",\n \"range\": true,\n \"refId\": \"A\"\n }\n ]\n}",
"mode": "code",
"code": {
"language": "json",
"showLineNumbers": true,
"showMiniMap": true
}
}
},
{
"id": 3,
"title": "Data from panel above",
"type": "table",
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"gridPos": {
"h": 7,
"w": 15,
"x": 0,
"y": 13
},
"options": {
"showTypeIcons": true
},
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"panelId": 2,
"withTransforms": true,
"refId": "A"
}
]
}
],
"schemaVersion": 37,
"title": "Debug: Treemap override demo // 2022-12-14 15:50:02",
"tags": [
"debug",
"debug-marcusolsson-treemap-panel"
],
"time": {
"from": "2022-12-14T15:45:02.104Z",
"to": "2022-12-14T15:50:02.104Z"
}
}
Confirming that Value Mappings are broken in TreeMap. In my case, I am trying to use Regex to make the data more human readable and the settings are not being used. Identical settings in a table visualization work.
