Skip to content

A
argus-board
Commit df7677af by jiangxd2016
Options

release: v1.2.4

parent f9af7b3b
Showing with 2584 additions and 384 deletions
README.md
# argus-board-react # @grafana/vue
基于 React 的可嵌入监控仪表盘 Web Component。 Grafana Vue **单一入口包**：Dashboard 嵌入、面板、数据源、UI、runtime。
## 快速开始 `public/app` 与外部宿主请只依赖本包。
构建产物包含三个文件：
| 文件 | 说明 |
|------|------|
| `dist/argus-board.js` | IIFE 格式，直接用 `<script>` 引入 |
| `dist/argus-board.es.js` | ES Module 格式，用于 `import` |
| `dist/style.css` | 样式文件，两种方式都需要引入 |
### IIFE（`<script>` 标签）
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/style.css" />
</head>
<body>
<argus-board style="width:100%;height:100vh;display:block;"></argus-board>
<script src="dist/argus-board.js"></script>
</body>
</html>
```
### ES Module（`import`）
```js
import 'dist/style.css';
import 'dist/argus-board.es.js';
// 注册完成后即可使用 <argus-board> 标签
document.body.innerHTML = '<argus-board style="width:100%;height:100vh;display:block;"></argus-board>';
```
或在 Vue / React 等框架中：
```js
// main.js / main.ts
import 'dist/style.css';
import 'dist/argus-board.es.js';
```
```html
<!-- 任意组件模板中 -->
<argus-board style="width:100%;height:600px;display:block;"></argus-board>
```
---
## 配置方式
`<argus-board>` 支持两种配置方式，可混合使用：
- **HTML Attribute**：适合简单标量值（布尔、枚举、短字符串），可在 HTML 中静态声明
- **JS Property**：适合大型 JSON 数据（仪表盘配置、预设列表、数据源列表），直接赋值给元素属性，避免 HTML 膨胀
**优先级：JS Property > HTML Attribute**
---
## 配置属性（HTML Attributes）
适合简单标量值，属性变化时组件自动重新渲染。
### 基础配置
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `hide-header` | `"true" \| "false"` | `"false"` | 是否隐藏顶部工具栏 |
| `can-edit` | `"true" \| "false"` | `"true"` | 是否允许进入编辑模式 |
| `theme` | `"dark" \| "light"` | — | 主题，不传时使用用户上次选择 |
| `lang` | `"zh" \| "en"` | `"zh"` | 界面语言 |
### 初始状态
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `locked` | `"true" \| "false"` | — | 初始是否锁定（查看模式）。`true` = 查看，`false` = 编辑，不传时使用上次状态 |
| `editing-panel` | `string` | — | 初始打开编辑器的面板 ID，仅挂载时生效一次 |
### 仪表盘数据
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `initial-config` | `string`（JSON） | — | 初始加载的仪表盘 JSON 字符串，传入时替换默认面板，仅挂载时生效一次。格式见下方说明 |
| `render-default-dashboard` | `"true" \| "false"` | `"true"` | 没有 `initial-config` 时是否渲染内置默认示例面板。设为 `"false"` 时显示空白画布 |
| `presets` | `string`（JSON 数组） | — | 预设列表，用户可从下拉菜单加载。格式见下方说明 |
**`initial-config` 格式：**
```json
{
"title": "我的仪表盘",
"panels": { ... },
"layouts": [ ... ],
"variables": [ ... ]
}
```
> 可通过页面右上角"导出"按钮获取当前仪表盘的 JSON，直接作为 `initial-config` 的值传入。
**`presets` 格式：**
```json
[
{ "label": "网络设备面板", "config": "{...仪表盘JSON字符串...}" },
{ "label": "服务器监控", "config": "{...仪表盘JSON字符串...}" }
]
```
> 下拉菜单中始终包含内置"默认模板"选项，用户自定义预设追加在其后。
### 数据源
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `datasource-config` | `string`（JSON 数组） | — | 数据源配置列表，格式见下方说明 |
**`datasource-config` 格式：**
```json
[
{
"type": "zabbix",
"uid": "zabbix-prod",
"url": "https://zabbix.example.com",
"token": "your-api-token",
"name": "生产 Zabbix",
"default": true
},
{
"type": "argus",
"uid": "argus-main",
"url": "https://argus.example.com",
"token": "your-api-token",
"name": "Argus 主集群"
}
]
```
- `type`：数据源类型，支持 `"zabbix"` / `"argus"`
- `uid`：唯一标识，用于面板绑定；不填时自动用数组下标作为 uid
- `default`：标记为默认数据源，新建查询时优先选中
---
## JS Property API ## 安装
大型 JSON 数据推荐通过 JS 属性赋值，不写入 HTML attribute，避免 DOM 膨胀。 ```bash
pnpm add @grafana/vue vue pinia
| 属性 | 类型 | 对应 attribute |
|------|------|----------------|
| `element.initialConfig` | `DashboardConfig \| string \| undefined` | `initial-config` |
| `element.presets` | `PresetConfig[] \| undefined` | `presets` |
| `element.datasourceConfig` | `DataSourceConfig[] \| null` | `datasource-config` |
赋值后组件立即重新渲染，JS Property 优先级高于同名 attribute。
`initialConfig` 接受对象或 JSON 字符串，传对象时内部自动 `JSON.stringify`。
```js
const board = document.querySelector('argus-board');
// 直接传对象，无需手动 JSON.stringify
board.initialConfig = {
title: '我的仪表盘',
panels: { ... },
layouts: [ ... ],
};
// 也可以传 JSON 字符串（如从接口直接拿到的响应体）
const res = await fetch('/api/dashboard/1');
board.initialConfig = await res.text();
// 设置数据源（无需 JSON.stringify）
board.datasourceConfig = [
{ type: 'zabbix', uid: 'z1', url: 'https://zabbix.example.com', token: 'xxx', name: 'Zabbix', default: true }
];
// 设置预设列表
board.presets = [
{ label: '网络设备面板', config: networkDashboardJson },
{ label: '服务器监控', config: serverDashboardJson },
];
```
---
## 事件
### `save`
用户点击"保存"按钮时触发，携带当前仪表盘的完整 JSON。
```js
const board = document.querySelector('argus-board');
board.addEventListener('save', (e) => {
const json = e.detail.json; // 仪表盘 JSON 字符串
// 持久化到后端...
});
```
事件属性：`bubbles: true, composed: true`，可穿透 Shadow DOM 冒泡。
---
## 完整示例
### 空白画布（不渲染默认面板）
```html
<argus-board
render-default-dashboard="false"
locked="true">
</argus-board>
```
### 加载已保存的仪表盘
```html
<argus-board
id="board"
locked="true"
render-default-dashboard="false">
</argus-board>
<script>
fetch('/api/dashboard/1').then(r => r.text()).then(json => {
document.getElementById('board').setAttribute('initial-config', json);
});
</script>
``` ```
### 带数据源 + 保存回调 ## 快速开始
```html
<argus-board
id="board"
theme="dark"
locked="true"
datasource-config='[{"type":"zabbix","uid":"z1","url":"https://zabbix.example.com","token":"xxx","name":"Zabbix","default":true}]'>
</argus-board>
<script>
document.getElementById('board').addEventListener('save', async (e) => {
await fetch('/api/dashboard/save', {
method: 'POST',
body: e.detail.json,
headers: { 'Content-Type': 'application/json' }
});
});
</script>
```
### 带预设的嵌入场景 ```ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { DashboardViewer } from '@grafana/vue';
import { bootstrapGrafanaVue } from '@grafana/vue/register';
```html // Registers core plugins, kicks off heavy plugins, BootData, theme, backend mode.
<argus-board bootstrapGrafanaVue();
render-default-dashboard="false"
presets='[{"label":"网络设备","config":"{...}"},{"label":"服务器","config":"{...}"}]'>
</argus-board>
``` ```
--- ```vue
<template>
## 查询选项配置（Query Options） <DashboardViewer
:dashboard="dashboardJson"
每个面板支持 `queryOptions` 字段，对应 Query Editor 工具栏下方的 "Query options" 折叠区域： :datasources="datasources"
theme="dark"
| 字段 | 类型 | 说明 | />
|------|------|------| </template>
| `queryOptions.maxDataPoints` | `number` | 覆盖面板默认 maxDataPoints（默认值：1000）。影响降采样步长 |
| `queryOptions.minIntervalMs` | `number` | 查询最小间隔（ms），0 = 不限制 |
| `queryOptions.relativeTime` | `string` | 相对时间覆盖，如 `"1h"`、`"30m"`，将查询窗口向前偏移 |
| `queryOptions.timeShift` | `string` | 时间偏移，如 `"1h"`，将 from/to 整体平移 |
`queryOptions.minIntervalMs` 输入框支持 `s / m / h / ms` 后缀（例如 `"30s"` = 30000ms）。
`Interval` 行为只读，显示当前计算值：`ceil((to - from) * 1000 / maxDataPoints)`。
---
## 表格面板配置（Table Panel）
表格面板支持以下 `PanelConfig` 字段：
| 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `tableShowHeader` | `boolean` | `true` | 是否显示列标题 |
| `tableCellHeight` | `'small' \| 'medium' \| 'large'` | `'medium'` | 行高 |
| `tableFrozenColumns` | `number` | `0` | 左侧冻结列数 |
| `tableColumnFilter` | `boolean` | `false` | 启用列过滤器 |
| `tableWrapText` | `boolean` | `false` | 文本换行 |
| `tableEnablePagination` | `boolean` | `false` | 启用分页 |
| `tablePageSize` | `number` | `20` | 每页行数（`tableEnablePagination` 为 `true` 时生效） |
| `tableFooterEnabled` | `boolean` | `false` | 显示底部统计行 |
| `tableFooterReducers` | `string[]` | `[]` | 底部聚合函数，取第一个值作为统计方式，支持所有 Grafana ReducerID |
| `tableFooterFields` | `string[]` | `undefined` | 参与底部计算的字段名；空/未设置 = 所有数值字段 |
| `tableMinColumnWidth` | `number` | `100` | 列最小宽度 |
| `tableColumnOverrides` | `Record<string, TableColumnOverride>` | `{}` | 按列名覆盖显示配置 |
### `tableFooterReducers` 支持的值
| 分组 | 值 |
|------|----|
| Standard | `lastNotNull`, `last`, `firstNotNull`, `first`, `min`, `max`, `mean`, `sum`, `count`, `range` |
| Extended | `median`, `stdDev`, `variance`, `delta`, `diff`, `diffperc`, `step`, `logmin`, `countAll`, `changeCount`, `distinctCount` |
| Boolean | `allIsZero`, `allIsNull` |
| Percentile | `p1`–`p99` |
### `TableColumnOverride` 字段
| 字段 | 类型 | 说明 |
|------|------|------|
| `hidden` | `boolean` | 隐藏该列 |
| `label` | `string` | 覆盖列标题显示名 |
| `width` | `number` | 固定列宽（px） |
| `alignment` | `'auto' \| 'left' \| 'center' \| 'right'` | 列对齐方式 |
| `displayMode` | `TableCellDisplayMode` | 单元格显示模式 |
| `wrapText` | `boolean` | 该列文本换行 |
| `valueRegex` | `{ pattern: string; replace: string }` | 正则替换单元格值 |
**`displayMode` 支持的值：** `auto`, `colored-text`, `colored-background`, `gauge`, `data-links`, `json-view`, `pill`
```json
{
"type": "table",
"title": "API 请求日志",
"tableFooterEnabled": true,
"tableFooterReducers": ["mean"],
"tableColumnOverrides": {
"latency": { "displayMode": "gauge", "label": "延迟 (ms)" },
"status": { "alignment": "center" },
"endpoint": { "width": 200 }
}
}
``` ```
--- ## 入口
## 变量配置弹窗
在编辑模式下（`isEditing === true`），`VariableBar` 右侧会显示 ⚙ 设置图标。点击后弹出变量配置弹窗，支持： | Import | 说明 |
| --- | --- |
| `@grafana/vue` | 组件 + API（无自动注册副作用） |
| `@grafana/vue/register` | `bootstrapGrafanaVue` + `registerBuiltinPlugins` / `registerHeavyPlugins` |
- 查看、新增、编辑、删除所有仪表盘变量 ## 主要组件
- 支持类型：`custom`、`query`、`textbox`、`datasource`、`constant`
- 所有修改在点击"保存"后统一提交，取消则丢弃草稿
### VariableConfig 新增字段 | 组件 | 场景 |
| --- | --- |
| **DashboardViewer** | 传入 dashboard JSON + datasources 配置嵌入整页 |
| **PanelHost** | 传入 `PanelData` 渲染单面板 |
| **DashboardPage** | 完整应用内仪表盘页 |
| **GButton / GInput / …** | 设计体系 UI |
| 字段 | 类型 | 说明 | 完整文档见仓库：
|------|------|------|
| `description` | `string?` | 变量描述 |
| `showOnDashboard` | `'label-and-value' \| 'value' \| 'nothing'` | 显示模式，`nothing` 时自动设置 `hide: true` |
| `customOptions` | `Array<{text, value}>?` | custom 类型选项（替代 customValues 字符串） |
| `dsType` | `string?` | datasource 类型的数据源类型 |
| `constantValue` | `string?` | constant 类型的常量值 |
--- - [docs/components.md](../../docs/components.md) — 组件用法（含数据源配置）
- [docs/packages/dashboard-viewer.md](../../docs/packages/dashboard-viewer.md) — Viewer 详解
## 开发 ## 构建
```bash ```bash
npm install pnpm --filter @grafana/vue build
npm run dev # 开发模式 # 或
npm run build # 构建 Web Component pnpm build:vue
npm run lint # 代码检查
``` ```
dist/.build-info.json 0 → 100644
{
"name": "@grafana/vue",
"version": "1.2.0",
"builtAt": "2026-07-24T08:13:55.691Z",
"mode": "library-esm-single-file",
"entries": {
"index": "src/index.ts",
"register": "src/register.ts"
}
}
\ No newline at end of file
dist/argus-board.es.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/argus-board.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/editor.worker-BhziHrDZ.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/editor.worker-BhziHrDZ.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/index.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/index.d.ts 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/index.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/index.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/register.css 0 → 100644
.g-button[data-v-087259e6] {
border-radius: var(--grafana-radius, 6px);
}
.g-button.ant-btn-default[data-v-087259e6] {
background: var(--grafana-panel-bg);
border-color: var(--grafana-border-color-medium, var(--grafana-border));
color: var(--grafana-text-primary, var(--grafana-text));
}
.g-button.ant-btn-default[data-v-087259e6]:hover {
background: var(--grafana-action-hover) !important;
border-color: var(--grafana-border-color-medium, var(--grafana-border));
color: var(--grafana-text-primary, var(--grafana-text));
}
.g-button.ant-btn-primary[data-v-087259e6] {
background: var(--grafana-primary-main, var(--grafana-primary));
border-color: var(--grafana-primary-main, var(--grafana-primary));
color: var(--grafana-primary-contrast, #fff);
}
.g-button.ant-btn-primary[data-v-087259e6]:hover {
filter: brightness(1.05);
}
.g-button.ant-btn-text[data-v-087259e6] {
color: var(--grafana-text-primary, var(--grafana-text));
}
.g-button.ant-btn-text[data-v-087259e6]:hover {
background: var(--grafana-action-hover) !important;
}
.g-button.ant-btn-dangerous[data-v-087259e6] {
background: var(--grafana-error-main, var(--grafana-error));
border-color: var(--grafana-error-main, var(--grafana-error));
}
.g-select[data-v-75041926] {
width: 100%;
min-width: 96px;
}
.g-select[data-v-75041926] .ant-select-selector {
background: var(--grafana-input-bg) !important;
border-color: var(--grafana-border) !important;
color: var(--grafana-text) !important;
border-radius: 4px !important;
min-height: 28px !important;
}
.g-select[data-v-75041926] .ant-select-selection-item,
.g-select[data-v-75041926] .ant-select-selection-placeholder {
color: var(--grafana-text) !important;
line-height: 26px !important;
}
.g-select[data-v-75041926] .ant-select-arrow {
color: var(--grafana-text-secondary);
}
/* Scope group headers (MatchersUI) */
.g-select[data-v-75041926] .ant-select-item-group {
color: var(--grafana-text-secondary);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
[data-v-75041926] .ant-select-item-option-active,[data-v-75041926] .ant-select-item-option-selected {
background: var(--grafana-action-hover) !important;
}
.g-icon[data-v-eaa1ba73] {
display: inline-block;
vertical-align: middle;
fill: currentColor;
flex-shrink: 0;
}
.g-icon[data-v-eaa1ba73] path,
.g-icon[data-v-eaa1ba73] circle,
.g-icon[data-v-eaa1ba73] rect {
fill: currentColor;
}
.is-spin[data-v-eaa1ba73] {
animation: g-icon-spin-eaa1ba73 1s linear infinite;
}
@keyframes g-icon-spin-eaa1ba73 {
to {
transform: rotate(360deg);
}
}
.g-icon-missing[data-v-eaa1ba73] {
display: inline-block;
width: 1em;
text-align: center;
opacity: 0.5;
}
[data-v-b06821cd] .ant-input,[data-v-b06821cd] .ant-input-affix-wrapper {
background: var(--grafana-input-bg, var(--grafana-panel-bg)) !important;
border-color: var(--grafana-border-color-medium, var(--grafana-border)) !important;
color: var(--grafana-text-primary, var(--grafana-text)) !important;
border-radius: var(--grafana-radius, 6px);
}
[data-v-b06821cd] .ant-input::placeholder {
color: var(--grafana-text-secondary);
}
[data-v-b06821cd] .ant-input:hover,[data-v-b06821cd] .ant-input-affix-wrapper:hover {
border-color: var(--grafana-border-color-strong, var(--grafana-border-strong, var(--grafana-border))) !important;
}
[data-v-b06821cd] .ant-input:focus,[data-v-b06821cd] .ant-input-affix-wrapper-focused {
border-color: var(--grafana-primary-main, var(--grafana-primary)) !important;
box-shadow: 0 0 0 2px var(--grafana-action-focus, var(--grafana-hover));
}
[data-v-b06821cd] .ant-input[disabled],[data-v-b06821cd] .ant-input-affix-wrapper-disabled {
background: var(--grafana-action-disabled-bg, transparent) !important;
color: var(--grafana-action-disabled-text, var(--grafana-text-secondary)) !important;
}
.g-code-editor[data-v-9304afbe] {
width: 100%;
min-height: 80px;
border: 1px solid var(--grafana-border);
border-radius: 2px;
overflow: hidden;
background: var(--grafana-input-bg, var(--grafana-panel-bg));
}
.g-code-editor__monaco[data-v-9304afbe] {
width: 100%;
height: 100%;
min-height: 180px;
}
.g-code-editor__fallback[data-v-9304afbe] {
width: 100%;
height: 100%;
background: var(--grafana-input-bg, var(--grafana-panel-bg));
color: var(--grafana-text);
border: 0;
padding: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
resize: vertical;
}
.g-inline-field[data-v-e9723eaf] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
min-height: 32px;
}
.g-inline-field.grow[data-v-e9723eaf] {
width: 100%;
}
.g-inline-field.grow .g-inline-field__control[data-v-e9723eaf] {
flex: 1;
}
.g-inline-field.disabled[data-v-e9723eaf] {
opacity: 0.55;
pointer-events: none;
}
.g-inline-field__label[data-v-e9723eaf] {
flex-shrink: 0;
color: var(--grafana-text-secondary);
font-size: 12px;
text-align: right;
}
.req[data-v-e9723eaf] {
color: var(--grafana-error);
margin-left: 2px;
}
.tip[data-v-e9723eaf] {
display: inline-flex;
width: 14px;
height: 14px;
margin-left: 4px;
border-radius: 50%;
border: 1px solid var(--grafana-border);
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--grafana-text-secondary);
cursor: help;
}
.g-inline-field__control[data-v-e9723eaf] {
min-width: 0;
}
.g-alert[data-v-3dfe15aa] {
display: flex;
gap: 8px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid var(--grafana-border);
background: var(--grafana-panel-bg);
color: var(--grafana-text);
margin-bottom: 8px;
}
.g-alert.is-info[data-v-3dfe15aa] {
border-color: var(--grafana-primary);
background: var(--grafana-primary-transparent, var(--grafana-hover));
}
.g-alert.is-success[data-v-3dfe15aa] {
border-color: var(--grafana-success);
background: var(--grafana-success-transparent, var(--grafana-hover));
}
.g-alert.is-warning[data-v-3dfe15aa] {
border-color: var(--grafana-warning);
background: var(--grafana-warning-transparent, var(--grafana-hover));
}
.g-alert.is-error[data-v-3dfe15aa] {
border-color: var(--grafana-error);
background: var(--grafana-error-transparent, var(--grafana-hover));
}
.g-alert__title[data-v-3dfe15aa] {
font-weight: 600;
margin-bottom: 2px;
}
.g-alert__body[data-v-3dfe15aa] {
flex: 1;
min-width: 0;
font-size: 13px;
}
.g-alert__close[data-v-3dfe15aa] {
border: none !important;
background: transparent !important;
color: var(--grafana-text-secondary) !important;
cursor: pointer;
font-size: 16px;
}
.geomap--crop .geomap__map[data-v-d4291708] {
overflow: hidden;
border-radius: 4px;
}
.geomap__sun[data-v-d4291708] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
mix-blend-mode: multiply;
}
.geomap__legend[data-v-d4291708] {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 2;
margin: 0;
padding: 6px 8px;
list-style: none;
background: var(--grafana-bg-elevated, rgba(0, 0, 0, 0.55));
border: 1px solid var(--grafana-border);
border-radius: 2px;
font-size: 11px;
color: var(--grafana-text);
}
.geomap__legend li[data-v-d4291708] {
display: flex;
align-items: center;
gap: 6px;
margin: 2px 0;
}
.geomap__legend i[data-v-d4291708] {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.geomap[data-v-d4291708] {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
min-height: 80px;
position: relative;
box-sizing: border-box;
}
.geomap__map[data-v-d4291708],
.geomap__fallback[data-v-d4291708] {
flex: 1;
min-height: 80px;
width: 100%;
border-radius: 2px;
overflow: hidden;
position: relative;
background: #0a0a0a;
}
.map[data-v-d4291708] {
width: 100%;
height: 100%;
display: block;
}
.geomap__fallback-hint[data-v-d4291708] {
position: absolute;
left: 8px;
bottom: 8px;
font-size: 10px;
opacity: 0.7;
color: var(--grafana-text-secondary);
pointer-events: none;
}
.meta[data-v-d4291708] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
font-size: 11px;
opacity: 0.75;
margin-top: 4px;
color: var(--grafana-text-secondary);
line-height: 1.3;
}
.meta .sep[data-v-d4291708] {
opacity: 0.45;
}
.geomap__demo-badge[data-v-d4291708] {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
font-size: 10px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(61, 113, 217, 0.22);
border: 1px solid rgba(61, 113, 217, 0.45);
color: #8ab8ff;
pointer-events: none;
}
.geomap__tooltip[data-v-d4291708] {
position: absolute;
top: 8px;
left: 8px;
background: rgba(20, 22, 28, 0.94);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
padding: 4px 8px;
font-size: 11px;
z-index: 4;
pointer-events: none;
max-width: 60%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.geomap__debug[data-v-d4291708] {
position: absolute;
bottom: 28px;
right: 8px;
font-size: 10px;
background: rgba(0, 0, 0, 0.6);
padding: 2px 6px;
border-radius: 2px;
z-index: 3;
color: #c7c8c9;
}
.geomap__measure[data-v-d4291708] {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
display: flex;
gap: 6px;
align-items: center;
background: rgba(20, 22, 28, 0.92);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
padding: 4px 8px;
font-size: 11px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.geomap__measure button[data-v-d4291708] {
background: var(--grafana-primary);
color: #fff;
border: 0;
border-radius: 3px;
padding: 3px 8px;
cursor: pointer;
font-size: 11px;
line-height: 1.2;
}
.geomap__measure button[data-v-d4291708]:hover {
filter: brightness(1.08);
}
/* Grafana geomap globalStyles (dark theme classic) */
.geomap[data-v-d4291708] .ol-control {
background-color: rgb(17, 18, 23);
border-radius: 2px;
padding: 2px;
}
.geomap[data-v-d4291708] .ol-control {
background-color: transparent !important;
padding: 0 !important;
}
.geomap[data-v-d4291708] .ol-control button {
color: rgb(204, 204, 220) !important;
/* Grafana secondary.main dual-measured */
background-color: rgb(44, 47, 53) !important;
width: 22px !important;
height: 22px !important;
font-size: 16px !important;
margin: 1px !important;
border: none !important;
border-radius: 2px !important;
line-height: 20px !important;
cursor: pointer;
}
.geomap[data-v-d4291708] .ol-zoom {
top: 8px !important;
left: 8px !important;
}
.geomap[data-v-d4291708] .ol-control button:hover,
.geomap[data-v-d4291708] .ol-control button:focus {
color: rgb(255, 255, 255);
background-color: rgb(52, 58, 68);
}
.geomap[data-v-d4291708] .ol-zoom {
top: 8px;
left: 8px;
}
.geomap[data-v-d4291708] .ol-attribution {
background: transparent !important;
bottom: 0;
right: 0;
font-size: 10px;
}
.geomap[data-v-d4291708] .ol-attribution {
background: transparent !important;
box-shadow: none !important;
}
.geomap[data-v-d4291708] .ol-attribution ul {
display: none !important;
}
.geomap[data-v-d4291708] .ol-attribution button {
display: none !important;
}
.geomap-layers-editor[data-v-d7bf9066] {
display: flex;
flex-direction: column;
gap: 10px;
}
.head[data-v-d7bf9066] {
display: flex;
justify-content: space-between;
align-items: center;
}
.layer-card[data-v-d7bf9066] {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(255, 255, 255, 0.02);
}
.layer-head[data-v-d7bf9066] {
display: flex;
gap: 6px;
align-items: center;
}
.row[data-v-d7bf9066] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
}
.row label[data-v-d7bf9066] {
opacity: 0.8;
min-width: 64px;
}
.row.cols[data-v-d7bf9066] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
.row.cols > div[data-v-d7bf9066] {
display: flex;
flex-direction: column;
gap: 4px;
}
.switch-row[data-v-d7bf9066] {
display: flex;
align-items: center;
gap: 8px;
}
.status[data-v-0240222c] {
font-size: 12px;
}
.status-bar[data-v-19115f34] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.ic[data-v-19115f34] {
display: inline-flex;
opacity: 0.85;
}
.compact .ic[data-v-19115f34] {
font-size: 12px;
}
.wrap[data-v-b41be292] {
width: 100%;
overflow: auto;
}
.tbl[data-v-b41be292] {
width: 100%;
border-collapse: collapse;
font-size: inherit;
table-layout: fixed;
}
.tbl th[data-v-b41be292],
.tbl td[data-v-b41be292] {
border-bottom: 1px solid var(--border-weak, #333);
padding: 4px 6px;
text-align: left;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tbl th.sortable[data-v-b41be292] {
cursor: pointer;
}
.resizer[data-v-b41be292] {
position: absolute;
right: 0;
top: 0;
width: 6px;
height: 100%;
cursor: col-resize;
}
.sev[data-v-b41be292] {
display: inline-block;
min-width: 18px;
text-align: center;
border-radius: 3px;
padding: 0 4px;
}
.tag[data-v-b41be292] {
display: inline-block;
background: rgba(255, 255, 255, 0.06);
margin-right: 4px;
padding: 0 4px;
border-radius: 3px;
border: 0;
color: inherit;
cursor: pointer;
font-size: 11px;
}
.actions button[data-v-b41be292] {
margin-right: 4px;
}
.ack[data-v-b41be292] {
opacity: 0.85;
}
.is-new[data-v-b41be292] {
animation: blink-b41be292 1.2s ease-in-out infinite;
}
@keyframes blink-b41be292 {
50% {
outline: 1px solid rgba(255, 176, 32, 0.8);
}
}
.pager[data-v-b41be292] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 12px;
}
.sub[data-v-b41be292] {
opacity: 0.7;
font-size: 11px;
white-space: normal;
}
.desc-nl[data-v-b41be292] {
white-space: normal;
}
.ack-count[data-v-b41be292] {
cursor: help;
}
.sev[data-v-2244911d] {
display: inline-block;
min-width: 18px;
text-align: center;
border-radius: 3px;
padding: 0 4px;
font-size: 11px;
}
.list[data-v-28b6c6e0] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.card[data-v-28b6c6e0] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 8px 10px 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.sev-bar[data-v-28b6c6e0] {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
.name[data-v-28b6c6e0] {
font-weight: 600;
}
.meta[data-v-28b6c6e0] {
opacity: 0.7;
font-size: 11px;
}
.blink[data-v-28b6c6e0] {
animation: blink-28b6c6e0 1.2s ease-in-out infinite;
}
@keyframes blink-28b6c6e0 {
50% {
box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.85);
}
}
.acks[data-v-28b6c6e0] {
font-size: 11px;
opacity: 0.75;
}
.url[data-v-28b6c6e0] {
font-size: 11px;
}
.maint[data-v-28b6c6e0] {
font-size: 12px;
}
.tl-wrap[data-v-f4373cba] {
width: 100%;
}
.empty[data-v-f4373cba] {
margin: 0;
font-size: 12px;
opacity: 0.7;
}
.acks[data-v-83362a58] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
li[data-v-83362a58] {
font-size: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.empty[data-v-83362a58] {
opacity: 0.7;
font-size: 12px;
}
.tag[data-v-33c2d20f] {
display: inline-block;
background: rgba(255, 255, 255, 0.06);
margin-right: 4px;
padding: 0 4px;
border-radius: 3px;
font-size: 11px;
}
.details[data-v-2b135c62] {
border-top: 1px solid var(--border-weak, #333);
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
header[data-v-2b135c62] {
display: flex;
justify-content: space-between;
align-items: center;
}
h4[data-v-2b135c62],
h5[data-v-2b135c62] {
margin: 0;
}
.desc[data-v-2b135c62] {
font-size: 12px;
}
.block[data-v-2b135c62] {
font-size: 12px;
}
.plain[data-v-2b135c62] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.plain code[data-v-2b135c62] {
margin-left: 6px;
opacity: 0.8;
}
.empty[data-v-2b135c62] {
opacity: 0.65;
margin: 0;
}
time[data-v-2b135c62] {
opacity: 0.7;
margin-right: 6px;
}
.modal[data-v-4f3b17fc] {
border: 1px solid #666;
padding: 8px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
gap: 8px;
}
button[data-v-4f3b17fc] {
margin-right: 8px;
}
label[data-v-4f3b17fc] {
font-size: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.row[data-v-4f3b17fc] {
flex-direction: row;
align-items: center;
gap: 8px;
}
.sev-radios[data-v-4f3b17fc] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hint[data-v-4f3b17fc] {
margin: 0;
font-size: 11px;
opacity: 0.75;
}
.modal[data-v-7e46303a] {
border: 1px solid #666;
padding: 8px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
gap: 8px;
}
button[data-v-7e46303a] {
margin-right: 8px;
}
.err[data-v-7e46303a] {
color: var(--grafana-error-text, var(--grafana-error));
}
.empty[data-v-7e46303a] {
opacity: 0.7;
font-size: 12px;
}
.meta[data-v-7e46303a] {
margin: 0;
font-size: 12px;
display: grid;
gap: 4px;
}
.meta div[data-v-7e46303a] {
display: flex;
gap: 8px;
}
.meta dt[data-v-7e46303a] {
opacity: 0.7;
min-width: 40px;
}
.meta dd[data-v-7e46303a] {
margin: 0;
}
select[data-v-7e46303a] {
min-width: 220px;
}
.zbx-problems[data-v-a4b2e9d4] {
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.toolbar[data-v-a4b2e9d4] {
display: flex;
gap: 8px;
align-items: center;
}
.error[data-v-a4b2e9d4] {
color: var(--grafana-error-text, var(--grafana-error));
}
.ok[data-v-a4b2e9d4] {
color: #6ccf8e;
}
.notice[data-v-a4b2e9d4] {
color: #ffb020;
font-size: 12px;
}
.empty[data-v-a4b2e9d4] {
opacity: 0.75;
padding: 12px;
}
.pager[data-v-a4b2e9d4] {
display: flex;
gap: 8px;
align-items: center;
}
.sev-editor[data-v-3ad6848a] {
display: flex;
flex-direction: column;
gap: 6px;
}
.row[data-v-3ad6848a] {
display: grid;
grid-template-columns: 90px 1fr 20px auto;
gap: 8px;
align-items: center;
}
.name[data-v-3ad6848a] {
font-size: 12px;
opacity: 0.85;
}
.swatch[data-v-3ad6848a] {
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.reset-cols[data-v-1745230d] {
display: flex;
align-items: center;
gap: 8px;
}
.hint[data-v-1745230d] {
font-size: 11px;
opacity: 0.7;
}
.zbx-fn[data-v-4ab2902e] {
display: flex;
flex-direction: column;
gap: 8px;
}
.row[data-v-4ab2902e] {
display: flex;
gap: 8px;
max-width: 280px;
}
.fn-row[data-v-4ab2902e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 6px;
border-radius: 4px;
border: 1px solid transparent;
}
.fn-row[data-v-4ab2902e]:hover {
background: rgba(204, 204, 220, 0.06);
border-color: rgba(204, 204, 220, 0.12);
}
.fn-row--unknown[data-v-4ab2902e] {
border-color: rgba(255, 115, 131, 0.45);
}
.fn-main[data-v-4ab2902e] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1;
}
.fn-name--error[data-v-4ab2902e] {
color: var(--grafana-error-text, var(--grafana-error));
}
.fn-toolbar[data-v-4ab2902e] {
display: flex;
opacity: 0.35;
transition: opacity 0.15s ease;
}
.fn-row:hover .fn-toolbar[data-v-4ab2902e],
.fn-row:focus-within .fn-toolbar[data-v-4ab2902e] {
opacity: 1;
}
.unknown-hint[data-v-4ab2902e] {
font-size: 11px;
color: var(--grafana-error-text, var(--grafana-error));
}
.host-tag-editor[data-v-7aa10521] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 200px;
}
.toolbar[data-v-7aa10521] {
display: flex;
align-items: center;
gap: 8px;
}
.host-tag-row[data-v-7aa10521] {
display: grid;
grid-template-columns: minmax(100px, 1.2fr) minmax(110px, 1fr) minmax(
100px,
1fr
) 32px;
gap: 6px;
align-items: center;
}
.inline-field[data-v-b1be77e5] {
display: flex;
align-items: center;
margin: 0 4px 4px 0;
min-width: 0;
}
.inline-field--grow[data-v-b1be77e5] {
flex: 1 1 auto;
}
.inline-field__label[data-v-b1be77e5] {
display: flex;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 32px;
border-radius: 2px;
font-size: 12px;
flex-shrink: 0;
color: var(--grafana-text-secondary);
box-sizing: border-box;
}
.inline-field__text[data-v-b1be77e5] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline-field__tip[data-v-b1be77e5] {
display: inline-flex;
opacity: 0.75;
}
.inline-field__control[data-v-b1be77e5] {
flex: 1 1 auto;
min-width: 120px;
max-width: 320px;
}
.inline-field--grow .inline-field__control[data-v-b1be77e5] {
max-width: none;
}
.inline-field-row[data-v-e9095d9e] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin-bottom: 2px;
}
.inline-field-row__filler[data-v-e9095d9e] {
display: inline-block;
height: 32px;
margin: 0 0 4px 0;
border-radius: 2px;
flex: 1 1 auto;
min-width: 40px;
max-width: 160px;
}
.lld[data-v-31767cc1] {
display: flex;
flex-direction: column;
gap: 6px;
}
label[data-v-31767cc1] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.err[data-v-31767cc1] {
color: var(--grafana-error);
font-size: 12px;
margin: 0;
}
.hint[data-v-31767cc1] {
color: var(--grafana-text-secondary);
font-size: 12px;
margin: 0;
}
.metric-picker[data-v-ac0f0c02] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lbl[data-v-ac0f0c02] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.hint[data-v-ac0f0c02] {
margin: 0;
font-size: 11px;
opacity: 0.7;
}
.picker-error[data-v-ac0f0c02] {
margin: 0;
font-size: 11px;
color: var(--grafana-error-text, var(--grafana-error));
}
.has-error[data-v-ac0f0c02] .g-select {
border-color: var(--grafana-error-text, var(--grafana-error));
}
.fields[data-v-4026e5eb] {
display: flex;
flex-direction: column;
gap: 4px;
}
.vmp[data-v-64b71318] {
display: grid;
gap: 6px;
color: var(--grafana-text);
}
.vmp-selected[data-v-64b71318] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.vmp-list[data-v-64b71318] {
max-height: 280px;
overflow: auto;
border: 1px solid var(--grafana-border);
border-radius: 6px;
background: var(--grafana-input-bg);
}
.vmp-row[data-v-64b71318] {
display: flex;
align-items: center;
width: 100%;
padding: 0 10px;
border: 0;
background: transparent;
color: var(--grafana-text);
text-align: left;
cursor: pointer;
font-size: 13px;
}
.vmp-row[data-v-64b71318]:hover {
background: var(--grafana-table-row-hover-bg, var(--grafana-hover));
}
.vmp-row.active[data-v-64b71318] {
background: var(--grafana-table-row-selected-bg, var(--grafana-action-selected, var(--grafana-hover)));
}
.vmp-label[data-v-64b71318] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vmp-empty[data-v-64b71318] {
padding: 12px;
text-align: center;
color: var(--grafana-text-secondary);
font-size: 12px;
}
.vmp-footer[data-v-64b71318] {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--grafana-text-secondary);
}
.vmp-warn[data-v-64b71318] {
color: var(--grafana-warning-text, var(--grafana-warning));
}
.vmp-more[data-v-64b71318] {
border: 1px solid var(--grafana-border);
background: var(--grafana-panel-bg);
color: var(--grafana-text);
border-radius: 6px;
padding: 2px 8px;
cursor: pointer;
}
.vmp-count[data-v-64b71318] {
margin-left: auto;
}
.vmp-spacer[data-v-64b71318] {
width: 100%;
pointer-events: none;
}
.filter-picker[data-v-3cf479da] {
display: flex;
flex-direction: column;
gap: 4px;
}
.lbl[data-v-3cf479da] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.hint[data-v-3cf479da] {
margin: 0;
font-size: 11px;
opacity: 0.7;
}
.cascade[data-v-bc850fdd] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.fields[data-v-0d88475b] {
display: flex;
flex-direction: column;
gap: 8px;
}
label[data-v-0d88475b] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.row[data-v-0d88475b] {
display: flex;
align-items: center;
gap: 8px;
}
.fields[data-v-422148e0] {
display: flex;
flex-direction: column;
gap: 6px;
}
label[data-v-422148e0] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.fields[data-v-b65b5880] {
display: flex;
flex-direction: column;
gap: 6px;
}
.fields[data-v-9e1c71cd] {
display: flex;
flex-direction: column;
gap: 8px;
}
label[data-v-9e1c71cd] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.row[data-v-9e1c71cd] {
display: flex;
align-items: center;
gap: 8px;
}
.fields[data-v-e28f273d] {
display: flex;
flex-direction: column;
gap: 4px;
}
.fields[data-v-65d7b236] {
display: flex;
flex-direction: column;
gap: 8px;
}
.editor-alert[data-v-300ed766] {
display: flex;
gap: 10px;
align-items: flex-start;
border-radius: 6px;
padding: 10px 12px;
font-size: 12px;
border: 1px solid transparent;
}
.editor-alert--warning[data-v-300ed766] {
color: #ffb020;
background: rgba(255, 176, 32, 0.08);
border-color: rgba(255, 176, 32, 0.35);
}
.editor-alert--info[data-v-300ed766] {
color: #6e9fff;
background: rgba(110, 159, 255, 0.08);
border-color: rgba(110, 159, 255, 0.35);
}
.editor-alert--error[data-v-300ed766] {
color: var(--grafana-error-text, var(--grafana-error));
background: rgba(255, 115, 131, 0.08);
border-color: rgba(255, 115, 131, 0.35);
}
.editor-alert__icon[data-v-300ed766] {
flex-shrink: 0;
line-height: 1.4;
}
.editor-alert__body[data-v-300ed766] {
min-width: 0;
}
.editor-alert__title[data-v-300ed766] {
display: block;
margin-bottom: 2px;
}
.editor-alert__msg[data-v-300ed766] {
margin: 0;
opacity: 0.95;
line-height: 1.4;
}
.opts[data-v-06e7e1b4] {
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid rgba(204, 204, 220, 0.12);
padding-top: 8px;
}
.opts-toggle[data-v-06e7e1b4] {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
padding: 4px 0;
font-size: 12px;
text-align: left;
}
.chev[data-v-06e7e1b4] {
width: 12px;
opacity: 0.8;
}
.summary[data-v-06e7e1b4] {
opacity: 0.75;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary.muted[data-v-06e7e1b4] {
opacity: 0.45;
}
.opts-body[data-v-06e7e1b4] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0 0;
}
.empty[data-v-06e7e1b4] {
display: none;
}
.zbx-qe[data-v-63f24bf1] {
display: flex;
flex-direction: column;
gap: 8px;
}
.zbx-cfg[data-v-43b4b06f] {
display: flex;
flex-direction: column;
gap: var(--grafana-spacing-2, 8px);
max-width: 560px;
width: 100%;
color: var(--grafana-text);
background: transparent;
}
.section[data-v-43b4b06f] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 0 16px;
margin-bottom: 8px;
border: 0;
border-bottom: 1px solid var(--grafana-border-weak, var(--border-weak));
border-radius: 0;
background: transparent;
}
.section[data-v-43b4b06f]:last-child {
border-bottom: 0;
}
.section h4[data-v-43b4b06f] {
margin: 0 0 8px;
font-size: 14px;
color: var(--grafana-text);
}
.section h5[data-v-43b4b06f] {
margin: 12px 0 4px;
font-size: 12px;
font-weight: 600;
color: var(--grafana-text-secondary);
}
.row[data-v-43b4b06f] {
display: flex;
align-items: center;
gap: 8px;
color: inherit;
font-size: 12px;
}
.err[data-v-43b4b06f] {
color: var(--grafana-error-text, var(--grafana-error));
font-size: 12px;
margin: 0;
}
.cred-field[data-v-43b4b06f] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.cred-field[data-v-43b4b06f] input,
.cred-field[data-v-43b4b06f] .g-input {
flex: 1;
}
.tip-wrap[data-v-43b4b06f] {
display: inline-flex;
color: var(--grafana-text-secondary);
cursor: help;
}
.cred-status[data-v-43b4b06f] {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--grafana-text-secondary);
}
.cred-status .configured[data-v-43b4b06f] {
color: var(--grafana-success-text, var(--grafana-success));
}
.sr-only[data-v-43b4b06f] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.adv-toggle[data-v-43b4b06f] {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
padding: 4px 0;
text-align: left;
width: 100%;
}
.adv-toggle[data-v-43b4b06f]:focus-visible {
outline: 2px solid var(--grafana-focus-outline, var(--grafana-primary));
outline-offset: 2px;
border-radius: 2px;
}
.adv-toggle h4[data-v-43b4b06f] {
margin: 0;
}
.chevron[data-v-43b4b06f] {
transition: transform 0.15s ease;
color: var(--grafana-text-secondary);
}
.chevron.is-open[data-v-43b4b06f] {
transform: rotate(90deg);
}
.adv-body[data-v-43b4b06f] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
@media (max-width: 600px) {
.zbx-cfg[data-v-43b4b06f] {
max-width: 100%;
}
}
.var-qe[data-v-d3cd6955] {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 560px;
}
label[data-v-d3cd6955] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.row[data-v-d3cd6955] {
display: flex;
align-items: center;
gap: 8px;
}
.legacy[data-v-d3cd6955] {
border: 1px solid rgba(255, 176, 32, 0.4);
background: rgba(255, 176, 32, 0.08);
border-radius: 6px;
padding: 8px 10px;
font-size: 12px;
}
.legacy code[data-v-d3cd6955] {
display: block;
margin: 4px 0;
word-break: break-all;
}
.legacy p[data-v-d3cd6955] {
margin: 0;
opacity: 0.85;
}
.anno-qe[data-v-6a0e5f1b] {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 720px;
}
label[data-v-6a0e5f1b] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.row[data-v-6a0e5f1b] {
display: flex;
align-items: center;
gap: 8px;
}
.tbl[data-v-52987685] {
width: 100%;
border-collapse: collapse;
}
.tbl th[data-v-52987685],
.tbl td[data-v-52987685] {
border-bottom: 1px solid #333;
padding: 4px 6px;
text-align: left;
font-size: 12px;
}
.sev[data-v-52987685] {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
color: #fff;
font-size: 11px;
}
.ro[data-v-52987685] {
opacity: 0.6;
}
button[data-v-52987685] {
margin-right: 4px;
}
.list[data-v-8c6eb442] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.list li[data-v-8c6eb442] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
cursor: pointer;
}
.sev[data-v-8c6eb442] {
padding: 1px 6px;
border-radius: 3px;
color: #fff;
font-size: 11px;
}
.title[data-v-8c6eb442] {
font-weight: 600;
}
.meta[data-v-8c6eb442] {
opacity: 0.7;
font-size: 11px;
}
.detail[data-v-42ce578f] {
margin-top: 8px;
border-top: 1px solid #333;
padding-top: 8px;
font-size: 12px;
}
.detail table[data-v-42ce578f] {
border-collapse: collapse;
}
.detail td[data-v-42ce578f] {
padding: 2px 6px;
border-bottom: 1px solid #333;
}
.err[data-v-42ce578f] {
color: #f66;
}
a[data-v-42ce578f] {
margin-left: 8px;
}
.block[data-v-42ce578f] {
margin-top: 8px;
}
.span-tree[data-v-42ce578f] {
list-style: none;
padding: 0;
margin: 0;
}
.span-tree li[data-v-42ce578f] {
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.muted[data-v-42ce578f] {
opacity: 0.7;
margin-left: 6px;
}
.sub[data-v-42ce578f] {
font-size: 11px;
opacity: 0.8;
margin-top: 2px;
word-break: break-all;
}
.signoz-issues[data-v-921da130] {
overflow: auto;
font-size: 12px;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.toolbar[data-v-921da130] {
display: flex;
gap: 12px;
align-items: center;
}
.pager[data-v-921da130] {
display: flex;
gap: 8px;
align-items: center;
}
.notice[data-v-921da130] {
opacity: 0.8;
}
.err[data-v-921da130] {
color: #f66;
}
.confirm[data-v-921da130] {
border: 1px solid #666;
padding: 8px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
}
.confirm button[data-v-921da130] {
margin-right: 8px;
}
.field-key-select[data-v-de824783] {
flex: 1;
min-width: 160px;
}
.err[data-v-de824783] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
margin: 2px 0 0;
}
.group-by[data-v-8436cf39] {
display: flex;
gap: 6px;
align-items: center;
flex: 1;
}
.groupby-field-select[data-v-959f1373] {
flex: 1;
min-width: 0;
}
.fn-ed[data-v-1ad190f2] {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.fn-row[data-v-1ad190f2] {
display: flex;
gap: 6px;
align-items: center;
}
.warn[data-v-1ad190f2] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
margin: 0;
}
.multi-agg[data-v-af460cc0] {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.row[data-v-af460cc0] {
display: flex;
gap: 6px;
align-items: center;
}
.expr-agg[data-v-77f32c7d] {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.expr-agg-row[data-v-77f32c7d] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.qb-label[data-v-77f32c7d] {
font-size: 12px;
color: var(--grafana-text-secondary);
font-weight: 500;
white-space: nowrap;
}
.qb-flex[data-v-77f32c7d] {
flex: 1;
min-width: 0;
}
.qb-metrics-agg-grid[data-v-1d3e0cd0] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
border: 1px solid var(--grafana-border, var(--border-weak));
border-radius: var(--grafana-radius, 4px);
overflow: hidden;
}
.qb-metrics-agg-cell[data-v-1d3e0cd0] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-right: 1px solid var(--grafana-border, var(--border-weak));
border-bottom: 1px solid var(--grafana-border, var(--border-weak));
min-width: 0;
}
.qb-metrics-agg-cell[data-v-1d3e0cd0]:nth-child(2n) {
border-right: none;
}
.qb-metrics-agg-cell[data-v-1d3e0cd0]:nth-last-child(-n + 2) {
border-bottom: none;
}
.qb-label[data-v-1d3e0cd0] {
font-size: 12px;
color: var(--grafana-text-secondary);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.qb-flex[data-v-1d3e0cd0] {
flex: 1;
min-width: 0;
}
.qb-addons-bar[data-v-88bb0a01] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px 8px;
flex-wrap: wrap;
}
.qb-addon-btn[data-v-88bb0a01] {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid var(--grafana-border, var(--border-weak));
border-radius: 3px;
padding: 2px 8px;
font-size: 12px;
color: var(--grafana-text-secondary);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.qb-addon-btn[data-v-88bb0a01]:hover {
background: var(--grafana-action-hover, var(--grafana-hover));
border-color: var(--grafana-primary);
color: var(--grafana-primary);
}
.qb-addon-btn--active[data-v-88bb0a01] {
background: var(--grafana-primary-transparent, var(--grafana-hover));
border-color: var(--grafana-primary);
color: var(--grafana-primary);
font-weight: 500;
}
.lqs[data-v-eacfa99b] {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
min-width: 0;
flex: 1;
}
.lqs-editor-wrap[data-v-eacfa99b] {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--grafana-border-weak, var(--grafana-border));
border-radius: 2px;
background: var(--grafana-panel-bg);
padding: 0 10px;
min-height: 32px;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.lqs-editor-wrap[data-v-eacfa99b]:focus-within {
border-color: var(--grafana-primary, #1664ff);
box-shadow: 0 0 0 2px
color-mix(in srgb, var(--grafana-primary, #1664ff) 16%, transparent);
}
.lqs-editor-wrap--error[data-v-eacfa99b] {
border-color: var(--grafana-error-text, #ef4444);
}
.lqs-lead[data-v-eacfa99b] {
font-size: 16px;
color: var(--grafana-text-secondary, #86909c);
flex-shrink: 0;
line-height: 1;
}
.lqs-editor[data-v-eacfa99b] {
flex: 1;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font-family: SFMono-Regular, Consolas, Monaco, monospace;
font-size: 13px;
color: var(--grafana-text-primary, var(--grafana-text));
height: 30px;
line-height: 30px;
}
.lqs-editor[data-v-eacfa99b]::placeholder {
color: #c0c4cc;
font-family: inherit;
font-size: 12px;
}
.lqs-status[data-v-eacfa99b] {
font-size: 14px;
cursor: pointer;
flex-shrink: 0;
font-weight: 700;
}
.lqs-status--error[data-v-eacfa99b] {
color: #ef4444;
}
.lqs-dropdown {
margin: 0;
padding: 4px 0;
list-style: none;
border: 1px solid var(--grafana-border-weak, var(--grafana-border));
border-radius: 6px;
background: var(--grafana-panel-bg);
box-shadow: 0 8px 24px rgba(31, 41, 51, 0.16);
max-height: 320px;
overflow: auto;
min-width: 320px;
font-family: SFMono-Regular, Consolas, Monaco, monospace;
}
.lqs-dropdown-loading {
padding: 8px 12px;
font-size: 12px;
color: var(--grafana-text-secondary);
}
.lqs-dropdown-item {
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 12px;
color: var(--grafana-text-primary, var(--grafana-text));
cursor: pointer;
border-left: 2px solid transparent;
font-size: 13px;
}
.lqs-dropdown-item:hover,
.lqs-dropdown-item--active {
background: var(
--grafana-primary-transparent,
var(--grafana-hover)
) !important;
color: var(--grafana-primary) !important;
font-weight: 600;
border-left-color: var(--grafana-primary);
}
.lqs-dropdown-item-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lqs-dropdown-item-meta {
margin-left: auto;
font-size: 11px;
color: var(--grafana-text-secondary);
font-style: normal;
text-transform: none;
}
.filter-expr-editor[data-v-2d171e85] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.err[data-v-2d171e85] {
margin: 0;
font-size: 12px;
color: var(--grafana-error-text, var(--grafana-error));
}
.qb-elements[data-v-96356868] {
position: relative;
margin-left: 40px;
display: flex;
flex-direction: column;
gap: 0;
}
.qb-elements[data-v-96356868]::before {
content: "";
position: absolute;
left: -20px;
top: 0;
bottom: 18px;
width: 1px;
background: repeating-linear-gradient(
to bottom,
var(--grafana-border, #d0d3d9),
var(--grafana-border, #d0d3d9) 4px,
transparent 4px,
transparent 8px
);
}
.qb-elements > .qb-row[data-v-96356868],
.qb-elements > .qb-addons-content[data-v-96356868],
.qb-elements > .qb-addons-bar[data-v-96356868] {
position: relative;
}
.qb-elements > .qb-row[data-v-96356868]::before,
.qb-elements > .qb-addons-content[data-v-96356868]::before,
.qb-elements > .qb-addons-bar[data-v-96356868]::before {
content: "";
position: absolute;
left: -20px;
top: 18px;
width: 16px;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--grafana-border, #d0d3d9),
var(--grafana-border, #d0d3d9) 4px,
transparent 4px,
transparent 8px
);
}
.qb-row[data-v-96356868] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.qb-row--filter[data-v-96356868] {
padding: 5px 10px;
}
.qb-row--agg[data-v-96356868] {
padding: 6px 10px;
}
.qb-sel-metric[data-v-96356868] {
width: 260px;
max-width: 40%;
flex-shrink: 0;
}
.qb-filter-input[data-v-96356868] {
flex: 1;
min-width: 160px;
}
.qb-source[data-v-96356868] {
width: 120px;
}
.qb-flex[data-v-96356868] {
flex: 1;
min-width: 0;
}
.qb-label[data-v-96356868] {
font-size: 12px;
color: var(--grafana-text-secondary, var(--grafana-text-secondary));
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.qb-metrics-agg-grid[data-v-96356868] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
border: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-radius: 4px;
overflow: hidden;
}
.qb-metrics-agg-cell[data-v-96356868] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-right: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-bottom: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
min-width: 0;
}
.qb-metrics-agg-cell[data-v-96356868]:nth-child(2n) {
border-right: none;
}
.qb-metrics-agg-cell[data-v-96356868]:nth-last-child(-n + 2) {
border-bottom: none;
}
.qb-addons-content[data-v-96356868] {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-radius: 4px;
margin: 4px 10px 0;
overflow: hidden;
background: var(
--grafana-panel-bg,
var(
--grafana-background-secondary,
var(--grafana-bg-secondary, var(--grafana-panel-bg))
)
);
}
.qb-addon-cell[data-v-96356868] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-right: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-bottom: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
min-width: 0;
}
.qb-addon-cell[data-v-96356868]:nth-child(2n) {
border-right: none;
}
.qb-addon-cell--full[data-v-96356868] {
grid-column: 1 / -1;
border-right: none;
}
.qb-more-grid[data-v-96356868] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
padding: 0;
}
.qb-more-grid .qb-metrics-agg-cell[data-v-96356868] {
border-color: var(
--grafana-border,
var(--grafana-border-weak, var(--grafana-border))
);
}
.qb-addons-bar[data-v-96356868] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px 8px;
flex-wrap: wrap;
}
.qb-addon-btn[data-v-96356868] {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-radius: 3px;
padding: 2px 8px;
font-size: 12px;
color: var(--grafana-text-secondary, var(--grafana-text-secondary));
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.qb-addon-btn[data-v-96356868]:hover {
background: var(--grafana-action-hover, var(--grafana-hover));
border-color: var(--grafana-primary);
color: var(--grafana-primary);
}
.qb-addon-btn--active[data-v-96356868] {
background: var(--grafana-primary-transparent, var(--grafana-hover));
border-color: var(--grafana-primary);
color: var(--grafana-primary);
font-weight: 500;
}
.qb-meta-err[data-v-96356868] {
color: var(--grafana-error-text, var(--grafana-error));
font-size: 12px;
padding: 4px 10px;
}
.qb-meta-loading[data-v-96356868] {
font-size: 12px;
opacity: 0.7;
padding: 2px 10px;
}
.qb-warn[data-v-96356868] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
}
.sr-only[data-v-96356868] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.qb-sel-metric[data-v-96356868] {
width: 240px;
flex-shrink: 0;
}
.qb-sel-metric[data-v-96356868] .ant-select-selector {
min-height: 32px !important;
border-radius: 2px !important;
border-color: var(--grafana-border) !important;
}
.qb-lqs[data-v-96356868] {
flex: 1;
min-width: 0;
}
.qb-metric-option[data-v-96356868] {
display: flex;
align-items: center;
width: 100%;
gap: 8px;
}
.qb-metric-name[data-v-96356868] {
flex: 1;
font-size: 13px;
color: var(--grafana-text);
font-family: SFMono-Regular, Consolas, Monaco, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qb-metric-type[data-v-96356868] {
font-size: 11px;
color: var(--grafana-text-secondary);
background: var(--grafana-bg-secondary, var(--grafana-panel-bg));
border-radius: 3px;
padding: 0 5px;
text-transform: uppercase;
letter-spacing: 0.4px;
flex-shrink: 0;
}
.qb-row--filter[data-v-96356868] {
gap: 6px;
padding: 5px 10px;
background: transparent;
align-items: center;
}
.signoz-builder-fields[data-v-af9483d6] {
min-width: 0;
}
.formula-fields[data-v-493000e4] {
display: flex;
flex-direction: column;
gap: 6px;
}
.row[data-v-493000e4] {
display: flex;
gap: 8px;
align-items: center;
}
.row label[data-v-493000e4] {
width: 88px;
flex-shrink: 0;
opacity: 0.8;
}
.err[data-v-493000e4] {
color: var(--grafana-error-text, var(--grafana-error));
font-size: 12px;
}
.raw-qe[data-v-fc4435e8] {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.row[data-v-fc4435e8] {
display: flex;
gap: 6px;
align-items: flex-start;
}
.diag[data-v-fc4435e8] {
color: var(--grafana-error-text, var(--grafana-error));
font-size: 12px;
}
.trace-op[data-v-f0fb0a41] {
display: flex;
flex-direction: column;
gap: 6px;
}
.row[data-v-f0fb0a41] {
display: flex;
gap: 8px;
align-items: center;
}
.row label[data-v-f0fb0a41] {
width: 96px;
font-size: 12px;
color: #888;
flex-shrink: 0;
}
.join[data-v-8d63785f] {
display: flex;
flex-direction: column;
gap: 6px;
}
.row[data-v-8d63785f] {
display: flex;
gap: 8px;
align-items: center;
}
.row label[data-v-8d63785f] {
width: 48px;
font-size: 12px;
color: var(--text-secondary, #888);
}
.qb-body[data-v-9aca9681] {
display: flex;
flex-direction: column;
background: var(--grafana-panel-bg, var(--grafana-panel-bg));
border: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
margin-bottom: 8px;
overflow: hidden;
}
.qb-body--disabled[data-v-9aca9681] {
opacity: 0.45;
}
.qb-body--disabled .qb-body-inner[data-v-9aca9681] {
pointer-events: none;
}
.qb-body.collapsed[data-v-9aca9681] {
/* class used by tests */
}
.qb-row[data-v-9aca9681] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.qb-row--where[data-v-9aca9681] {
padding: 5px 10px 5px 12px;
min-height: 36px;
background: var(--grafana-panel-bg, var(--grafana-panel-bg));
}
.qb-row--filter[data-v-9aca9681] {
padding: 6px 10px;
margin-left: 40px;
}
.qb-raw-row[data-v-9aca9681] {
border-top: 1px solid
var(--grafana-border, var(--grafana-border-weak, var(--grafana-border)));
color: var(--grafana-text-primary, var(--grafana-text));
}
.qb-chip[data-v-9aca9681] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
font-family: SFMono-Regular, Consolas, Monaco, monospace;
color: var(--grafana-primary);
background: var(--grafana-primary-transparent, var(--grafana-hover));
letter-spacing: 0.3px;
}
.qb-chip--formula[data-v-9aca9681] {
color: #7c3aed;
background: #f5f3ff;
}
.qb-type-badge[data-v-9aca9681] {
font-size: 12px;
opacity: 0.8;
padding: 0 6px;
}
.qb-sel-signal[data-v-9aca9681] {
width: 110px;
}
.qb-sel-mode[data-v-9aca9681] {
width: 130px;
}
.qb-spacer[data-v-9aca9681] {
flex: 1;
min-width: 8px;
}
.qb-row-actions[data-v-9aca9681] {
display: inline-flex;
align-items: center;
gap: 2px;
}
.qb-btn-icon[data-v-9aca9681] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--grafana-text-secondary, var(--grafana-text-secondary));
cursor: pointer;
font-size: 14px;
}
.qb-btn-icon[data-v-9aca9681]:hover {
background: #f0f5ff;
color: var(--grafana-primary);
}
.qb-btn-icon--danger[data-v-9aca9681]:hover {
background: var(--grafana-panel-bg) 1f0;
color: #f56c6c;
}
.qb-btn-icon[data-v-9aca9681]:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.qb-collapse-btn[data-v-9aca9681] {
font-size: 14px;
}
.qb-warn[data-v-9aca9681] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
padding: 2px 12px 6px 48px;
}
.qb-label[data-v-9aca9681] {
font-size: 12px;
color: var(--grafana-text-secondary);
font-weight: 500;
white-space: nowrap;
}
.qb-flex[data-v-9aca9681] {
flex: 1;
min-width: 0;
}
.subq-note[data-v-9aca9681] {
font-size: 12px;
opacity: 0.85;
}
.hidden-anchors[data-v-9aca9681] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* compat with older tests */
.query-row.disabled[data-v-9aca9681] {
opacity: 0.45;
}
.qb-mode-badge[data-v-9aca9681] {
font-size: 11px;
color: var(--grafana-text-secondary);
border: 1px solid var(--grafana-border-weak, var(--grafana-border));
border-radius: 3px;
padding: 2px 6px;
text-transform: none;
}
.signoz-builder-editor[data-v-2a339bb2] {
display: flex;
flex-direction: column;
padding: 8px 10px 0;
gap: 0;
min-width: 0;
}
.signoz-query-type-tabs[data-v-73ad8c79] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-bottom: 1px solid var(--grafana-border-weak, var(--grafana-border));
background: var(--grafana-background-primary, var(--grafana-panel-bg));
}
.signoz-qtt-tab[data-v-73ad8c79] {
appearance: none;
border: 1px solid var(--grafana-border-weak, var(--grafana-border));
background: transparent;
color: var(--grafana-text-secondary);
border-radius: 3px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
}
.signoz-qtt-tab[data-v-73ad8c79]:hover:not(:disabled) {
background: var(--grafana-action-hover, var(--grafana-hover));
color: var(--grafana-text-primary, var(--grafana-text));
}
.signoz-qtt-tab--active[data-v-73ad8c79] {
border-color: var(--grafana-primary);
color: var(--grafana-primary);
font-weight: 600;
background: var(--grafana-primary-transparent, var(--grafana-hover));
}
.signoz-qtt-tab--disabled[data-v-73ad8c79],
.signoz-qtt-tab[data-v-73ad8c79]:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.signoz-qtt-legacy[data-v-73ad8c79] {
margin: 4px 0 0;
width: 100%;
font-size: 12px;
color: var(--grafana-warning-text, var(--grafana-warning));
}
.signoz-qe[data-v-82079c89] {
display: flex;
flex-direction: column;
gap: 0;
font-size: 13px;
color: var(--grafana-text-primary, var(--grafana-text));
background: var(--grafana-background-primary, var(--grafana-panel-bg));
border: 1px solid var(--grafana-border-weak, var(--grafana-border));
border-radius: 6px;
overflow: hidden;
}
.qe-toolbar[data-v-82079c89] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 8px 12px;
color: var(--grafana-text-primary, var(--grafana-text));
border-bottom: 1px solid var(--grafana-border-weak, var(--grafana-border));
background: var(
--grafana-background-secondary,
var(--grafana-bg-secondary, transparent)
);
}
.qe-toolbar-note[data-v-82079c89] {
font-size: 12px;
color: var(--grafana-text-secondary, var(--grafana-text-disabled));
}
.qe-request-type[data-v-82079c89] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qe-rt-label[data-v-82079c89] {
font-size: 12px;
color: var(--grafana-text-secondary);
white-space: nowrap;
}
.qb-footer[data-v-82079c89] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid var(--grafana-border-weak, var(--grafana-border));
flex-wrap: wrap;
}
.qb-footer-spacer[data-v-82079c89] {
flex: 1;
}
.qb-add-btn[data-v-82079c89] {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px dashed var(--grafana-primary);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
color: var(--grafana-primary);
cursor: pointer;
}
.qb-add-btn[data-v-82079c89]:hover {
background: var(--grafana-primary-transparent, var(--grafana-hover));
}
.err[data-v-82079c89] {
color: var(--grafana-error-text, var(--grafana-error));
padding: 6px 12px;
}
.warn[data-v-82079c89] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
padding: 4px 12px;
}
.signoz-cfg[data-v-3a3dee0f] {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 640px;
}
label[data-v-3a3dee0f] {
font-size: 12px;
color: var(--grafana-text-secondary);
}
.health[data-ok="true"][data-v-3a3dee0f] {
color: #6ccf8e;
}
.health[data-ok="false"][data-v-3a3dee0f] {
color: var(--grafana-error-text, var(--grafana-error));
}
.block[data-v-3a3dee0f] {
color: var(--grafana-error-text, var(--grafana-error));
font-size: 12px;
font-weight: 600;
}
.hint[data-v-3a3dee0f] {
font-size: 11px;
opacity: 0.7;
overflow: auto;
max-height: 120px;
}
label[data-v-96cf0d9a] {
font-size: 12px;
color: var(--grafana-text-secondary);
display: block;
margin-top: 6px;
}
.warn[data-v-96cf0d9a] {
color: var(--grafana-warning-text, var(--grafana-warning));
font-size: 12px;
margin-top: 8px;
}
label[data-v-5fb7503e] {
font-size: 12px;
color: var(--grafana-text-secondary);
display: block;
margin-top: 6px;
}
.hint[data-v-5fb7503e] {
color: var(--grafana-text-secondary);
font-size: 12px;
margin-top: 8px;
}
dist/register.d.ts 0 → 100644
/**
* Side-effect plugin registration + browser bootstrap for @grafana/vue.
*/
export declare function registerBuiltinPlugins(): void;
export declare function registerHeavyPlugins(): Promise<void> | void;
export declare function isBuiltinPluginsRegistered(): boolean;
export declare function isHeavyPluginsRegistered(): boolean;
export declare function bootstrapGrafanaVue(): void;
dist/register.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/register.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/stats-es.html deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
{ {
"name": "argus-board", "name": "@grafana/vue",
"version": "0.1.11", "version": "1.2.4",
"type": "module", "type": "module",
"main": "./dist/argus-board.js", "main": "./src/index.ts",
"module": "./dist/argus-board.es.js",
"exports": { "exports": {
".": { ".": "./src/index.ts",
"import": "./dist/argus-board.es.js", "./register": "./src/register.ts",
"default": "./dist/argus-board.js" "./package.json": "./package.json"
},
"./dist/style.css": "./dist/style.css"
}, },
"files": [ "files": [
"dist/", "dist",
"lib/", "src",
"README.md", "README.md",
"LICENSE" "package.json"
], ],
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.2.6", "ant-design-vue": "4.2.6",
"@grafana/data": "^11.2.3", "axios": "1.13.2",
"@visx/gradient": "^3.12.0", "dayjs": "1.11.21",
"@visx/group": "^3.12.0", "pinia": "^3.0.3",
"@visx/shape": "^3.12.0", "vue-grid-layout-v3": "^3.1.2",
"allotment": "1.20.5", "vue-router": "^4.5.1",
"antd": "^5.11.0", "uplot": "^1.6.32",
"classnames": "^2.5.1", "ol": "10.4.0",
"dayjs": "^1.11.10", "@prometheus-io/lezer-promql": "0.308.0",
"lodash-es": "^4.17.21", "@lezer/common": "^1.5.1",
"lucide-react": "^1.14.0", "@ant-design/icons-vue": "7.0.1"
"react": "^18.2.0", },
"react-dom": "^18.2.0", "peerDependencies": {
"react-grid-layout": "^1.3.4", "vue": "^3.5.0"
"react-virtuoso": "^4.18.6", },
"tinycolor2": "^1.6.0", "description": "Grafana Vue single entry package — dashboard, panels, datasources, UI, runtime",
"uplot": "1.6.31", "license": "AGPL-3.0-only"
"uuid": "^14.0.0",
"zustand": "^5.0.11"
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment