Dashboard Auto-Layout

Grafana Dashboards
, ,
1
  • What Grafana version and what operating system are you using?

v9.5.0-cloud.4.a016665c

  • What are you trying to achieve?

For my dashboard panels to be in n columns — let’s say 2 for this example. For example, adding 6 panels should result in 3 rows of 2 equally sized panels.

  • How are you trying to achieve it?

Via a Terraform template, which is part of the problem :wink:

When I add them in this way, I do not know how many panels there will be, and so can not predict the x, y coordinates of gridPos. I’ve tried:

      "gridPos": {
        "h": 10,
        "w": 12,
        "x": 0,
        "y": 0
      },

attempting to set "w": 12 to equal half the columns, as the documentation states, but this still doesn’t solve the problem of the x and y coordinates needing to be set. I’ve tried leaving those out too, but that makes no difference.

  • What happened?

All panels are stacked on top of each other, no matter their width.

  • What did you expect to happen?

  • Can you copy/paste the configuration(s) that you are having problems with?

I’ll just paste an example panel section, since it should illustrate the issue well (the ${} variables are for Terraform to fill in):

    {
      "title": "${this_function} Concurrent Executions",
      "type": "timeseries",
      "datasource": {
        "type": "cloudwatch",
        "uid": "${datasource_uid}"
      },
      "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": 10,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom",
          "showLegend": true
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "cloudwatch",
            "uid": "${datasource_uid}"
          },
          "dimensions": {
            "FunctionName": "${application_name}-${this_function}"
          },
          "expression": "",
          "id": "",
          "label": "",
          "logGroups": [],
          "matchExact": true,
          "metricEditorMode": 0,
          "metricName": "ConcurrentExecutions",
          "metricQueryType": 0,
          "namespace": "AWS/Lambda",
          "period": "",
          "queryMode": "Metrics",
          "refId": "A",
          "region": "default",
          "sqlExpression": "",
          "statistic": "Average"
        }
      ]
    },
2

Hi @afrazahmadzadeh,

Thanks for opening this post.

I do not have expertise with Terraform, but we do have this documentation on how to use it:

Also, Terraform also has some more documentation as well on Grafana and its various flavours e.g. OSS, Enterprise, Cloud etc.

I hope this helps.

3

Thanks @usman.ahmad, but my mention of Terraform was an unintended red herring. The Terraform templating is working as expected.

What I need to figure out is how to get the panel layout to work in something like a n*2 grid — i.e. variable number of rows, with 2 columns. The issue seems to be that the dashboard expects a panel’s x, y coordinates to be hardcoded, which I obviously can’t do when templating a variable number of panels.

4

Thanks @afrazahmadzadeh,

For providing more detailed feedback.

I had a chance to talk to the Engineering folks and currently, we have a tool called
Grafonnet in which developers have written a function that calculates the X/Y for an arbitrary number of panels: util - Grafonnet

Also, If you want to have it in another language, would suggest taking a look at the code and trying to replicate it: grafonnet/grid.libsonnet at main · grafana/grafonnet · GitHub

Please note that this tool is still experimental so if you encounter any issues, feel free to report them under the GitHub issues section.