Documentation Grafana documentation Observability as Code JSON schema v2 layout schema

layout

There are four layout options offering two types of panel control:

Panel layout options

These options control the size and position of panels:

• GridLayoutKind - Corresponds to the Custom option in the UI. You define panel size and panel positions using x- and y- settings.
• AutoGridLayoutKind - Corresponds to the Auto grid option in the UI. Panel size and position are automatically set based on column and row parameters.

Panel grouping options

These options control the grouping of panels:

• RowsLayoutKind - Groups panels into rows.
• TabsLayoutKind - Groups panels into tabs.

GridLayoutKind

The grid layout allows you to manually size and position grid items by setting the height, width, x, and y of each item. This layout corresponds to the Custom option in the UI.

Following is the JSON for a default grid layout, a grid layout item, and a grid layout row:

json Copy

    "kind": "GridLayout",
    "spec": {
      "items": [
        {
          "kind": "GridLayoutItem",
          "spec": {
            "element": {...},
            "height": 0,
            "width": 0,
            "x": 0,
            "y": 0
          }
        },
        {
          "kind": "GridLayoutRow",
          "spec": {
            "collapsed": false,
            "elements": [],
            "title": "",
            "y": 0
          }
        },
      ]
    }

GridLayoutKind consists of:

• kind: “GridLayout”
• spec: GridLayoutSpec
  • items: GridLayoutItemKind or GridLayoutRowKind
    • GridLayoutItemKind
      • kind: “GridLayoutItem”
      • spec: GridLayoutItemSpec
    • GridLayoutRowKind
      • kind: “GridLayoutRow”
      • spec: GridLayoutRowSpec

GridLayoutItemSpec

The following table explains the usage of the grid layout item JSON fields:

RepeatOptions

The following table explains the usage of the repeat option JSON fields:

GridLayoutRowSpec

The following table explains the usage of the grid layout row JSON fields:

RowRepeatOptions

AutoGridLayoutKind

With an auto grid, Grafana sizes and positions your panels for the best fit based on the column and row constraints that you set. This layout corresponds to the Auto grid option in the UI.

Following is the JSON for a default auto grid layout and a grid layout item:

json Copy

    "kind": "AutoGridLayout",
    "spec": {
      "columnWidthMode": "standard",
      "fillScreen": false,
      "items": [
        {
          "kind": "AutoGridLayoutItem",
          "spec": {
            "element": {...},
          }
        }
      ],
      "maxColumnCount": 3,
      "rowHeightMode": "standard"
    }

AutoGridLayoutKind consists of:

• kind: “AutoGridLayout”
• spec: AutoGridLayoutSpec

AutoGridLayoutSpec

The following table explains the usage of the auto grid layout JSON fields:

AutoGridLayoutItemSpec

The following table explains the usage of the auto grid layout item JSON fields:

AutoGridRepeatOptions

The following table explains the usage of the auto grid repeat option JSON fields:

ConditionalRenderingGroupSpec

ConditionalRenderingVariableSpec

ConditionalRenderingDataSpec

ConditionalRenderingTimeRangeSizeSpec

RowsLayoutKind

The RowsLayoutKind is one of two options that you can use to group panels. You can nest any other kind of layout inside a layout row. Rows can also be nested in auto grids or tabs.

Following is the JSON for a default rows layout row:

json Copy

    "kind": "RowsLayout",
    "spec": {
      "rows": [
        {
          "kind": "RowsLayoutRow",
          "spec": {
            "layout": {
              "kind": "GridLayout", // Can also be AutoGridLayout or TabsLayout
              "spec": {...}
            },
            "title": ""
          }
        }
      ]
    }

RowsLayoutKind consists of:

• kind: RowsLayout
• spec: RowsLayoutSpec
  • rows: RowsLayoutRowKind
    • kind: RowsLayoutRow
    • spec: RowsLayoutRowSpec

RowsLayoutRowSpec

The following table explains the usage of the rows layout row JSON fields:

TabsLayoutKind

The TabsLayoutKind is one of two options that you can use to group panels. You can nest any other kind of layout inside a tab. Tabs can also be nested in auto grids or rows.

Following is the JSON for a default tabs layout tab and a tab:

json Copy

    "kind": "TabsLayout",
    "spec": {
      "tabs": [
        {
          "kind": "TabsLayoutTab",
          "spec": {
            "layout": {
              "kind": "GridLayout", // Can also be AutoGridLayout or RowsLayout
              "spec": {...}
            },
            "title": "New tab"
          }
        }
      ]
    }

TabsLayoutKind consists of:

• kind: TabsLayout
  • spec: TabsLayoutSpec
    • tabs: TabsLayoutTabKind
      • kind: TabsLayoutTab
      • spec: TabsLayoutTabSpec

TabsLayoutTabSpec

The following table explains the usage of the tabs layout tab JSON fields: