Plugins 〉Tree View


Developer

Peter Gillich

Sign up to receive occasional product news and updates:


Grafana Cloud
Grafana Cloud
  • Grafana, of course
  • 10k series Prometheus metrics
  • 50 GB logs
  • 50 GB traces
  • 2,232 app o11y host hours
  • ...and more
Create free account

No credit card needed, ever.


Panel
community

Tree View

  • Overview
  • Installation
  • Change log
  • Related content

Grafana Tree Panel Plugin

Build

This panel plugin shows a tree from records, provided by a datasource. The plugin is optized and tested with JSON API datasource.

This plugin presents JSON API responses, for example Kubernetes resources received from Kubernetes API. A possible production environment is described at https://github.com/pgillich/grafana-kubernetes.

Example screenshot about a Kubernetes Namespace:

2 panels

Screenshot about a panel editor:

simple-editor

Datasource

All values from datasource are converted to string. The object type is converted to JSON string. The best datasource is JSON API, but other datasources may also be used, for example TestData Logs:

TestData, Logs

The number of values in fields must be same, so missing values must be substituted. JSON API supports JSONata, so it's possible.

Example JSONata expression for Kubernetes API, which substitutes the missing values (appName, containerState) and generates string about lists (containerImage, containerState):

$map(items, function($v) {{"namespace": $v.metadata.namespace, "name": $v.metadata.name, "appName": $v.metadata.labels."app.kubernetes.io/name" ? $v.metadata.labels."app.kubernetes.io/name" : ($v.metadata.labels."app" ? $v.metadata.labels."app" : "-"), "statusPhase": $v.status.phase, "containerCount": $count($v.spec.containers), "containerImage": $join($v.spec.containers[*].image, " "), "containerState": $v.status.containerStatuses[*].state ? $string($v.status.containerStatuses[*].state) : "-"}})

If Grafana runs outside of the Kubernetes cluster, a kubectl proxy command can create API endpoint for JSON API in order to access the cluster:

kubectl proxy --address 0.0.0.0 --accept-hosts='.*' --reject-methods=POST,PUT,PATCH -v5

It's highly recommended to use same JSONata expression in field definition, only the selected field should be different, for example:

Query editor 1

Query editor 2

Panel Options

Option descriptions can be read on the panel option editor:

Panel options

The default template engine is a simple and fast ${field}-style expression processor, for example:

${statusPhase}
${namespace}
${appName} ${name}
${containerImage}

If a more complex template engine is needed, Handlebars can be used, which is a {{field}}-style engine, for example:

handlebars-options

Screenshot about a panel editor, with Handlebars engine:

handlebars-editor

Handlebars extensions

Pod info

An additional function is added to Handlebars, for having better information about Kubernetes Pods. It's complex to evaluate the STATUS and other kubectl get pod -o wide columns from Kubernetes API responses, so the printPod() function was ported to TypeScript. The syntax is: {{printPodColumn <whole_pod> "<column>"}}, where <whole_pod> the field, which contains the whole pod, <column> is the kubectl get pod -o wide column name, for example:

  • NAME
  • READY
  • STATUS
  • RESTARTS
  • AGE
  • IP
  • NODE
  • NOMINATED_NODE
  • READINESS_GATES
  • MESSAGE

The AGE behaves a little bit different: it's a little bit more precise. The MESSAGE column contains additional info (reason) about the STATUS. Example for printPodColumn:

{{printPodColumn rawPod "STATUS"}}
{{namespace}}
{{appName}} {{name}}
{{containerImage}} {{printPodColumn rawPod "MESSAGE"}}

Example JSONata datasource expression for above template:

$map(items, function($v) {{"rawPod": $v, "namespace": $v.metadata.namespace, "name": $v.metadata.name, "appName": $v.metadata.labels."app.kubernetes.io/name" ? $v.metadata.labels."app.kubernetes.io/name" : ($v.metadata.labels."app" ? $v.metadata.labels."app" : "-"), "statusPhase": $v.status.phase, "containerCount": $count($v.spec.containers), "containerImage": $join($v.spec.containers[*].image, " "), "containerState": $v.status.containerStatuses[*].state ? $string($v.status.containerStatuses[*].state) : "-"}})

Example screenshot for comparing Pod status info form raw Kubernetes API and from printPodColumn function:

simple-handlebars

Example Dashboards

Example dashboards can be found in examples.

  • Namespace Pods.json Pods of a selected Namespace, Simple template engine
  • All Pods.json Pods of all Namespaces, Handlebars template engine with kubectl columns.

Creating Issues

Please attach sample json file(s) to the new Issue.

Contributing

See more details in CONTRIBUTING.md.

Installing Tree View on Grafana Cloud:

For more information, visit the docs on plugin installation.

Installing on a local Grafana:

For local instances, plugins are installed and updated via a simple CLI command. Plugins are not updated automatically, however you will be notified when updates are available right within your Grafana.

1. Install the Panel

Use the grafana-cli tool to install Tree View from the commandline:

grafana-cli plugins install 

The plugin will be installed into your grafana plugins directory; the default is /var/lib/grafana/plugins. More information on the cli tool.

2. Add the Panel to a Dashboard

Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.

To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.

Changelog

<!-- 0.1.9 START -->

0.1.9 (2022-06-)

Features and enhancements

Bug fixes

  • Remove kubernetes/client-node dependency
  • Handling empty and undefined JSON list

<!-- 0.1.9 END -->

<!-- 0.1.8 START -->

0.1.8 (2022-02-)

Features and enhancements

  • Add Handlebars template engine.
  • Add generated @kubernetes/client-node model to the source code
  • Add kubectl get pod -o wide-like column evaluating to Handlebars template engine.

Bug fixes

  • Better handling empty JSON list
  • Kubernetes developer info

<!-- 0.1.8 END -->

<!-- 0.1.7 START -->

0.1.7 (2022-05-26)

Features and enhancements

Signed plugin.

Bug fixes

<!-- 0.1.6 START -->

0.1.6 (2022-02-01)

The first version to send it to Grafana for jury.

Features and enhancements

Bug fixes

<!-- 0.1.6 END -->