layout
有四种 layout 选项,提供两种面板控制类型
面板布局选项
这些选项控制面板的大小和位置
- GridLayoutKind - 对应于 UI 中的 **Custom**(自定义)选项。您使用 x 和 y 设置定义面板大小和位置。
- AutoGridLayoutKind - 对应于 UI 中的 **Auto grid**(自动网格)选项。面板大小和位置根据列和行参数自动设置。
面板分组选项
这些选项控制面板的分组
- RowsLayoutKind - 将面板分组到行中。
- TabsLayoutKind - 将面板分组到 Tab 中。
GridLayoutKind
网格布局允许您通过设置每个项的高度、宽度、x 和 y 来手动调整网格项的大小和位置。此布局对应于 UI 中的 **Custom**(自定义)选项。
以下是默认网格布局、网格布局项和网格布局行的 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:
GridLayoutItemKind
或GridLayoutRowKind
- GridLayoutItemKind
- kind: “GridLayoutItem”
- spec: GridLayoutItemSpec
- GridLayoutRowKind
- kind: “GridLayoutRow”
- spec: GridLayoutRowSpec
- GridLayoutItemKind
- items:
GridLayoutItemSpec
下表解释了网格布局项 JSON 字段的用法
名称 | 用法 |
---|---|
x | 整数。项在 x 轴上的位置。 |
y | 整数。项在 y 轴上的位置。 |
宽度 | 项的宽度(像素)。 |
高度 | 项的高度(像素)。 |
元素 | ElementReference 。对 dashboard.spec.elements 中 PanelKind 的引用,表示为 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
"kind": "AutoGridLayout",
"spec": {
"columnWidthMode": "standard",
"fillScreen": false,
"items": [
{
"kind": "AutoGridLayoutItem",
"spec": {
"element": {...},
}
}
],
"maxColumnCount": 3,
"rowHeightMode": "standard"
}
AutoGridLayoutKind
包含
- kind: “AutoGridLayout”
- spec: AutoGridLayoutSpec
AutoGridLayoutSpec
下表解释了自动网格布局 JSON 字段的用法
名称 | 用法 |
---|---|
最大列数? | 数字。默认为 3 。 |
列宽模式 | 选项有: narrow (窄)、standard (标准)、wide (宽)和 custom (自定义)。默认为 standard 。 |
列宽? | 数字 |
行高模式 | 选项有: short (短)、standard (标准)、tall (高)和 custom (自定义)。默认为 standard 。 |
行高? | 数字 |
填充屏幕? | 布尔值。默认为 false 。 |
项 | AutoGridLayoutItemKind 。包含
|
AutoGridLayoutItemSpec
下表解释了自动网格布局项 JSON 字段的用法
名称 | 用法 |
---|---|
元素 | ElementReference 。对 dashboard.spec.elements 中 PanelKind 的引用,表示为 JSON Schema 引用。 |
重复? | AutoGridRepeatOptions。配置的重复选项(如果有)。 |
条件渲染? | ConditionalRenderingGroupKind 。隐藏或显示面板的规则(如果有)。包含
|
AutoGridRepeatOptions
下表解释了自动网格重复选项 JSON 字段的用法
名称 | 用法 |
---|---|
模式 | RepeatMode - “variable” |
值 | 字符串 |
ConditionalRenderingGroupSpec
名称 | 用法 |
---|---|
可见性 | 选项有 show(显示)和 hide(隐藏) |
条件 | 选项有 and(与)和 or(或) |
项 | 选项有
|
ConditionalRenderingVariableSpec
名称 | 用法 |
---|---|
变量 | 字符串 |
运算符 | 选项有 equals(等于)和 notEquals(不等于) |
值 | 字符串 |
ConditionalRenderingDataSpec
名称 | 类型 |
---|---|
值 | 布尔值 |
ConditionalRenderingTimeRangeSizeSpec
名称 | 类型 |
---|---|
值 | 字符串 |
RowsLayoutKind
RowsLayoutKind
是用于分组面板的两种选项之一。您可以在布局行内嵌套任何其他类型的布局。行也可以嵌套在自动网格或 Tab 中。
以下是默认行布局行的 JSON
"kind": "RowsLayout",
"spec": {
"rows": [
{
"kind": "RowsLayoutRow",
"spec": {
"layout": {
"kind": "GridLayout", // Can also be AutoGridLayout or TabsLayout
"spec": {...}
},
"title": ""
}
}
]
}
RowsLayoutKind
包含
- kind: RowsLayout
- spec: RowsLayoutSpec
- rows: RowsLayoutRowKind
- kind: RowsLayoutRow
- spec: RowsLayoutRowSpec
- rows: RowsLayoutRowKind
RowsLayoutRowSpec
下表解释了行布局行 JSON 字段的用法
名称 | 用法 |
---|---|
标题? | 行的标题。 |
折叠 | 布尔值。行是否已折叠。 |
隐藏头部? | 布尔值。行头部是否隐藏或显示。 |
全屏? | 布尔值。行是否占满整个屏幕。 |
条件渲染? | ConditionalRenderingGroupKind 。隐藏或显示行的规则(如果有)。包含
|
重复? | RowRepeatOptions。配置的重复选项(如果有)。 |
layout | 支持的布局有 |
TabsLayoutKind
TabsLayoutKind
是用于分组面板的两种选项之一。您可以在 Tab 内嵌套任何其他类型的布局。Tab 也可以嵌套在自动网格或行中。
以下是默认 Tab 布局 Tab 的 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
- tabs: TabsLayoutTabKind
- kind: TabsLayoutTab
- spec: TabsLayoutTabSpec
- tabs: TabsLayoutTabKind
- spec: TabsLayoutSpec
TabsLayoutTabSpec
下表解释了 Tab 布局 Tab JSON 字段的用法
名称 | 用法 |
---|---|
标题? | Tab 的标题。 |
layout | 支持的布局有 |
条件渲染? | ConditionalRenderingGroupKind 。隐藏或显示面板的规则(如果有)。包含
|