菜单
Grafana Cloud Enterprise 开源

layout

有四种 layout 选项,提供两种面板控制类型

面板布局选项

这些选项控制面板的大小和位置

  • GridLayoutKind - 对应于 UI 中的 **Custom**(自定义)选项。您使用 x 和 y 设置定义面板大小和位置。
  • AutoGridLayoutKind - 对应于 UI 中的 **Auto grid**(自动网格)选项。面板大小和位置根据列和行参数自动设置。

面板分组选项

这些选项控制面板的分组

GridLayoutKind

网格布局允许您通过设置每个项的高度、宽度、x 和 y 来手动调整网格项的大小和位置。此布局对应于 UI 中的 **Custom**(自定义)选项。

以下是默认网格布局、网格布局项和网格布局行的 JSON

json
    "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 包含

  • kind: “GridLayout”
  • spec: GridLayoutSpec
    • items: GridLayoutItemKindGridLayoutRowKind

GridLayoutItemSpec

下表解释了网格布局项 JSON 字段的用法

名称用法
x整数。项在 x 轴上的位置。
y整数。项在 y 轴上的位置。
宽度项的宽度(像素)。
高度项的高度(像素)。
元素ElementReference。对 dashboard.spec.elementsPanelKind 的引用,表示为 JSON Schema 引用。
重复?RepeatOptions。配置的重复选项(如果有)

RepeatOptions

下表解释了重复选项 JSON 字段的用法

名称用法
模式RepeatMode - “variable”
字符串
方向?选项有 h 表示水平,v 表示垂直。
每行最大数?整数

GridLayoutRowSpec

下表解释了网格布局行 JSON 字段的用法

名称用法
y整数。行在 y 轴上的位置
折叠布尔值。行是否已折叠
标题行标题
元素[...GridLayoutItemKind]。行中的网格项的 y 值将是相对于行的 y 值。这意味着在一个 y: 10 的行中,位于 y: 0 的面板在仪表盘中的位置将是 y: 11(行标题高度为 1)。
重复?RowRepeatOptions 配置的行重复选项(如果有)

RowRepeatOptions

名称用法
模式RepeatMode - “variable”
字符串

AutoGridLayoutKind

使用自动网格,Grafana 会根据您设置的列和行约束,自动调整面板的大小和位置以达到最佳匹配。此布局对应于 UI 中的 **Auto grid**(自动网格)选项。

以下是默认自动网格布局和自动网格布局项的 JSON

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

AutoGridLayoutKind 包含

AutoGridLayoutSpec

下表解释了自动网格布局 JSON 字段的用法

名称用法
最大列数?数字。默认为 3
列宽模式选项有: narrow(窄)、standard(标准)、wide(宽)和 custom(自定义)。默认为 standard
列宽?数字
行高模式选项有: short(短)、standard(标准)、tall(高)和 custom(自定义)。默认为 standard
行高?数字
填充屏幕?布尔值。默认为 false
AutoGridLayoutItemKind。包含

AutoGridLayoutItemSpec

下表解释了自动网格布局项 JSON 字段的用法

名称用法
元素ElementReference。对 dashboard.spec.elementsPanelKind 的引用,表示为 JSON Schema 引用。
重复?AutoGridRepeatOptions。配置的重复选项(如果有)。
条件渲染?ConditionalRenderingGroupKind。隐藏或显示面板的规则(如果有)。包含
AutoGridRepeatOptions

下表解释了自动网格重复选项 JSON 字段的用法

名称用法
模式RepeatMode - “variable”
字符串
ConditionalRenderingGroupSpec
名称用法
可见性选项有 show(显示)和 hide(隐藏)
条件选项有 and(与)和 or(或)
选项有
ConditionalRenderingVariableSpec
名称用法
变量字符串
运算符选项有 equals(等于)和 notEquals(不等于)
字符串
ConditionalRenderingDataSpec
名称类型
布尔值
ConditionalRenderingTimeRangeSizeSpec
名称类型
字符串

RowsLayoutKind

RowsLayoutKind 是用于分组面板的两种选项之一。您可以在布局行内嵌套任何其他类型的布局。行也可以嵌套在自动网格或 Tab 中。

以下是默认行布局行的 JSON

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

RowsLayoutKind 包含

  • kind: RowsLayout
  • spec: RowsLayoutSpec

RowsLayoutRowSpec

下表解释了行布局行 JSON 字段的用法

名称用法
标题?行的标题。
折叠布尔值。行是否已折叠。
隐藏头部?布尔值。行头部是否隐藏或显示。
全屏?布尔值。行是否占满整个屏幕。
条件渲染?ConditionalRenderingGroupKind。隐藏或显示行的规则(如果有)。包含
重复?RowRepeatOptions。配置的重复选项(如果有)。
layout支持的布局有

TabsLayoutKind

TabsLayoutKind 是用于分组面板的两种选项之一。您可以在 Tab 内嵌套任何其他类型的布局。Tab 也可以嵌套在自动网格或行中。

以下是默认 Tab 布局 Tab 的 JSON

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

TabsLayoutKind 包含

  • kind: TabsLayout
    • spec: TabsLayoutSpec

TabsLayoutTabSpec

下表解释了 Tab 布局 Tab JSON 字段的用法

名称用法
标题?Tab 的标题。
layout支持的布局有
条件渲染?ConditionalRenderingGroupKind。隐藏或显示面板的规则(如果有)。包含