Skip to content

A
argus-board
Commit 811a7832 by 五更
Options

release: vundefined

parent f9af7b3b
Showing with 297 additions and 269 deletions
README.md
# argus-board-react # argus-board-vue
基于 React 的可嵌入监控仪表盘 Web Component。 基于 Vue 3 的可嵌入监控仪表盘组件库。
## 快速开始 ## 构建产物
构建产物包含三个文件： ```
dist/
argus-board.es.js # ES Module，ant-design-vue 外置（宿主自备）
argus-board.js # IIFE，ant-design-vue 外置
argus-board.css # 样式
argus-board.bundled.es.js # ES Module，ant-design-vue 已内置
argus-board.bundled.js # IIFE，ant-design-vue 已内置
argus-board.bundled.css # 样式（bundled 版）
```
| 文件 | 说明 | **两个版本的区别：**
|------|------|
| `dist/argus-board.js` | IIFE 格式，直接用 `<script>` 引入 |
| `dist/argus-board.es.js` | ES Module 格式，用于 `import` |
| `dist/style.css` | 样式文件，两种方式都需要引入 |
### IIFE（`<script>` 标签） | 版本 | 文件 | ant-design-vue | 宿主需提供 |
|------|------|---------------|----------|
| 标准版 | `argus-board.es.js` | 外置，需宿主提供 | `vue` `pinia` `dayjs` `lodash` `ant-design-vue` |
| bundled 版 | `argus-board.bundled.es.js` | 已打包 | `vue` `pinia` `dayjs` `lodash` |
```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`） ### 在 Vue 3 项目中使用（标准版）
```js 宿主项目需安装 `ant-design-vue`：
import 'dist/style.css';
import 'dist/argus-board.es.js';
// 注册完成后即可使用 <argus-board> 标签 ```bash
document.body.innerHTML = '<argus-board style="width:100%;height:100vh;display:block;"></argus-board>'; npm install ant-design-vue
``` ```
或在 Vue / React 等框架中： ```ts
// main.ts
```js import 'ant-design-vue/dist/reset.css'
// main.js / main.ts import 'argus-board/dist/argus-board.css'
import 'dist/style.css';
import 'dist/argus-board.es.js';
``` ```
```html ```vue
<!-- 任意组件模板中 --> <script setup lang="ts">
<argus-board style="width:100%;height:600px;display:block;"></argus-board> import { ArgusBoard } from 'argus-board/dist/argus-board.es.js'
import type { ArgusBoardConfig } from 'argus-board/dist/argus-board.es.js'
const config: ArgusBoardConfig = {
hideHeader: false,
canEdit: true,
theme: null,
lang: 'zh',
isEditing: false,
initialEditingPanelId: null,
datasourceConfig: [
{
type: 'zabbix',
uid: 'zabbix-prod',
url: 'https://zabbix.example.com',
token: 'your-api-token',
name: '生产 Zabbix',
default: true,
},
],
}
function onSave(json: string) {
console.log('dashboard saved:', json)
}
</script>
<template>
<ArgusBoard
:config="config"
style="width: 100%; height: 100vh"
@save="onSave"
/>
</template>
``` ```
--- ### 在 Vue 3 项目中使用（bundled 版，宿主无 antd）
## 配置方式 ```ts
// main.ts
import 'argus-board/dist/argus-board.bundled.css'
```
```vue
<script setup lang="ts">
import { ArgusBoard } from 'argus-board/dist/argus-board.bundled.es.js'
</script>
```
`<argus-board>` 支持两种配置方式，可混合使用： ### IIFE（无构建工具环境）
- **HTML Attribute**：适合简单标量值（布尔、枚举、短字符串），可在 HTML 中静态声明 ```html
- **JS Property**：适合大型 JSON 数据（仪表盘配置、预设列表、数据源列表），直接赋值给元素属性，避免 HTML 膨胀 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/argus-board.css" />
</head>
<body>
<!-- 宿主提供 Vue、pinia、dayjs、lodash、ant-design-vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/ant-design-vue/dist/antd.min.js"></script>
**优先级：JS Property > HTML Attribute** <div id="app"></div>
<script src="dist/argus-board.js"></script>
<script>
const { createApp } = Vue
const { ArgusBoard } = window.ArgusBoard
createApp({
template: '<ArgusBoard :config="config" style="width:100%;height:100vh" @save="onSave" />',
components: { ArgusBoard },
setup() {
return {
config: {
canEdit: true,
lang: 'zh',
isEditing: false,
theme: null,
hideHeader: false,
initialEditingPanelId: null,
datasourceConfig: null,
},
onSave: (json) => console.log(json),
}
},
}).use(AntDesignVue).mount('#app')
</script>
</body>
</html>
```
--- ---
## 配置属性（HTML Attributes） ## ArgusBoardConfig
适合简单标量值，属性变化时组件自动重新渲染。 `ArgusBoard` 组件接收 `:config` prop，完整类型定义如下。
### 基础配置 ### 基础配置
| 属性 | 类型 | 默认值 | 说明 | | 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `hide-header` | `"true" \| "false"` | `"false"` | 是否隐藏顶部工具栏 | | `hideHeader` | `boolean` | `false` | 隐藏顶部工具栏 |
| `can-edit` | `"true" \| "false"` | `"true"` | 是否允许进入编辑模式 | | `canEdit` | `boolean` | `true` | 是否允许进入编辑模式，`false` 时强制锁定为查看模式 |
| `theme` | `"dark" \| "light"` | — | 主题，不传时使用用户上次选择 | | `theme` | `'dark' \| 'light' \| null` | `null` | 主题，`null` 时使用用户上次选择 |
| `lang` | `"zh" \| "en"` | `"zh"` | 界面语言 | | `lang` | `'zh' \| 'en' \| null` | `null`（默认 `zh`） | 界面语言 |
### 初始状态 ### 初始状态
| 属性 | 类型 | 默认值 | 说明 | | 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `locked` | `"true" \| "false"` | — | 初始是否锁定（查看模式）。`true` = 查看，`false` = 编辑，不传时使用上次状态 | | `isEditing` | `boolean \| null` | `null` | 初始编辑/查看模式，`null` 时使用组件内部默认值 |
| `editing-panel` | `string` | — | 初始打开编辑器的面板 ID，仅挂载时生效一次 | | `initialEditingPanelId` | `string \| null` | `null` | 挂载时自动打开指定面板的编辑器，仅生效一次 |
### 仪表盘数据 ### 仪表盘数据
| 属性 | 类型 | 默认值 | 说明 | | 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `initial-config` | `string`（JSON） | — | 初始加载的仪表盘 JSON 字符串，传入时替换默认面板，仅挂载时生效一次。格式见下方说明 | | `initialConfig` | `string` | — | 初始加载的仪表盘 JSON 字符串，仅挂载时生效一次 |
| `render-default-dashboard` | `"true" \| "false"` | `"true"` | 没有 `initial-config` 时是否渲染内置默认示例面板。设为 `"false"` 时显示空白画布 | | `renderDefaultDashboard` | `boolean` | `true` | 无 `initialConfig` 时是否渲染内置示例面板，`false` 显示空白画布 |
| `presets` | `string`（JSON 数组） | — | 预设列表，用户可从下拉菜单加载。格式见下方说明 | | `presets` | `PresetItem[]` | — | 预设列表，用户可从工具栏下拉菜单加载 |
| `onSave` | `(json: string) => void` | — | 用户点击"保存"时的回调，也可通过 `@save` 事件监听 |
**`initial-config` 格式：** **`initialConfig` 格式：**
```json ```json
{ {
"title": "我的仪表盘", "title": "我的仪表盘",
"panels": { ... }, "panels": { "...": "..." },
"layouts": [ ... ], "layouts": [],
"variables": [ ... ] "variables": []
} }
``` ```
> 可通过页面右上角"导出"按钮获取当前仪表盘的 JSON，直接作为 `initial-config` 的值传入。 > 通过工具栏 `... → 导出` 可获取当前仪表盘 JSON，直接用作 `initialConfig`。
**`presets` 格式：** **`PresetItem` 格式：**
```json ```ts
[ interface PresetItem {
{ "label": "网络设备面板", "config": "{...仪表盘JSON字符串...}" }, label: string // 下拉菜单显示名
{ "label": "服务器监控", "config": "{...仪表盘JSON字符串...}" } config: string // 仪表盘 JSON 字符串
}
```
```ts
presets: [
{ label: '网络设备面板', config: networkDashboardJson },
{ label: '服务器监控', config: serverDashboardJson },
] ]
``` ```
...@@ -118,78 +196,43 @@ import 'dist/argus-board.es.js'; ...@@ -118,78 +196,43 @@ import 'dist/argus-board.es.js';
### 数据源 ### 数据源
| 属性 | 类型 | 默认值 | 说明 | | 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `datasource-config` | `string`（JSON 数组） | — | 数据源配置列表，格式见下方说明 | | `datasourceConfig` | `DataSourceConfig[] \| null` | `null` | 数据源配置列表 |
**`datasource-config` 格式：** **`DataSourceConfig` 格式：**
```ts
interface DataSourceConfig {
type: 'zabbix' | 'argus'
uid: string // 唯一标识，面板绑定数据源时使用
url: string // 数据源服务地址
token: string // 鉴权 Token
name: string // 显示名称
default?: boolean // 标记为默认数据源，新建查询时优先选中
}
```
```json ```ts
[ datasourceConfig: [
{ {
"type": "zabbix", type: 'zabbix',
"uid": "zabbix-prod", uid: 'zabbix-prod',
"url": "https://zabbix.example.com", url: 'https://zabbix.example.com',
"token": "your-api-token", token: 'xxx',
"name": "生产 Zabbix", name: '生产 Zabbix',
"default": true default: true,
}, },
{ {
"type": "argus", type: 'argus',
"uid": "argus-main", uid: 'argus-main',
"url": "https://argus.example.com", url: 'https://argus.example.com',
"token": "your-api-token", token: 'xxx',
"name": "Argus 主集群" name: 'Argus 主集群',
} },
] ]
``` ```
- `type`：数据源类型，支持 `"zabbix"` / `"argus"`
- `uid`：唯一标识，用于面板绑定；不填时自动用数组下标作为 uid
- `default`：标记为默认数据源，新建查询时优先选中
---
## JS Property API
大型 JSON 数据推荐通过 JS 属性赋值，不写入 HTML attribute，避免 DOM 膨胀。
| 属性 | 类型 | 对应 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 },
];
```
--- ---
## 事件 ## 事件
...@@ -198,97 +241,129 @@ board.presets = [ ...@@ -198,97 +241,129 @@ board.presets = [
用户点击"保存"按钮时触发，携带当前仪表盘的完整 JSON。 用户点击"保存"按钮时触发，携带当前仪表盘的完整 JSON。
```js ```vue
const board = document.querySelector('argus-board'); <ArgusBoard :config="config" @save="handleSave" />
board.addEventListener('save', (e) => {
const json = e.detail.json; // 仪表盘 JSON 字符串
// 持久化到后端...
});
``` ```
事件属性：`bubbles: true, composed: true`，可穿透 Shadow DOM 冒泡。 ```ts
function handleSave(json: string) {
fetch('/api/dashboard/save', {
method: 'POST',
body: json,
headers: { 'Content-Type': 'application/json' },
})
}
```
--- ---
## 完整示例 ## 完整示例
### 空白画布（不渲染默认面板） ### 空白画布
```html ```vue
<argus-board <ArgusBoard
render-default-dashboard="false" :config="{
locked="true"> hideHeader: false,
</argus-board> canEdit: true,
renderDefaultDashboard: false,
isEditing: true,
lang: 'zh',
theme: null,
initialEditingPanelId: null,
datasourceConfig: null,
}"
style="width: 100%; height: 100vh"
/>
``` ```
### 加载已保存的仪表盘 ### 加载已保存的仪表盘
```html ```vue
<argus-board <script setup lang="ts">
id="board" import { ref, onMounted } from 'vue'
locked="true" import { ArgusBoard } from 'argus-board/dist/argus-board.es.js'
render-default-dashboard="false"> import type { ArgusBoardConfig } from 'argus-board/dist/argus-board.es.js'
</argus-board>
const config = ref<ArgusBoardConfig>({
<script> hideHeader: false,
fetch('/api/dashboard/1').then(r => r.text()).then(json => { canEdit: true,
document.getElementById('board').setAttribute('initial-config', json); isEditing: false,
}); lang: 'zh',
theme: null,
initialEditingPanelId: null,
datasourceConfig: null,
})
onMounted(async () => {
const json = await fetch('/api/dashboard/1').then(r => r.text())
config.value = { ...config.value, initialConfig: json }
})
async function handleSave(json: string) {
await fetch('/api/dashboard/1', {
method: 'POST',
body: json,
headers: { 'Content-Type': 'application/json' },
})
}
</script> </script>
```
### 带数据源 + 保存回调
```html <template>
<argus-board <ArgusBoard
id="board" :config="config"
theme="dark" style="width: 100%; height: 100vh"
locked="true" @save="handleSave"
datasource-config='[{"type":"zabbix","uid":"z1","url":"https://zabbix.example.com","token":"xxx","name":"Zabbix","default":true}]'> />
</argus-board> </template>
<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>
``` ```
### 带预设的嵌入场景 ### 暗色主题 + 数据源 + 预设
```vue
<script setup lang="ts">
import { ArgusBoard } from 'argus-board/dist/argus-board.es.js'
const config = {
hideHeader: false,
canEdit: true,
theme: 'dark' as const,
lang: 'zh' as const,
isEditing: false,
initialEditingPanelId: null,
renderDefaultDashboard: false,
datasourceConfig: [
{ type: 'zabbix' as const, uid: 'z1', url: 'https://zabbix.example.com', token: 'xxx', name: 'Zabbix', default: true },
],
presets: [
{ label: '网络设备', config: networkJson },
{ label: '服务器', config: serverJson },
],
}
</script>
```html <template>
<argus-board <ArgusBoard :config="config" style="width: 100%; height: 100vh" />
render-default-dashboard="false" </template>
presets='[{"label":"网络设备","config":"{...}"},{"label":"服务器","config":"{...}"}]'>
</argus-board>
``` ```
--- ---
## 查询选项配置（Query Options） ## 查询选项（Query Options）
每个面板支持 `queryOptions` 字段，对应 Query Editor 工具栏下方的 "Query options" 折叠区域： 每个面板支持 `queryOptions` 字段，对应 Query Editor 中的 "Query options" 区域：
| 字段 | 类型 | 说明 | | 字段 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `queryOptions.maxDataPoints` | `number` | 覆盖面板默认 maxDataPoints（默认值：1000）。影响降采样步长 | | `maxDataPoints` | `number` | 覆盖面板默认 maxDataPoints（默认 1000），影响降采样步长 |
| `queryOptions.minIntervalMs` | `number` | 查询最小间隔（ms），0 = 不限制 | | `minIntervalMs` | `number` | 查询最小间隔（ms），0 = 不限制 |
| `queryOptions.relativeTime` | `string` | 相对时间覆盖，如 `"1h"`、`"30m"`，将查询窗口向前偏移 | | `relativeTime` | `string` | 相对时间覆盖，如 `"1h"` `"30m"` |
| `queryOptions.timeShift` | `string` | 时间偏移，如 `"1h"`，将 from/to 整体平移 | | `timeShift` | `string` | 时间偏移，如 `"1h"`，将 from/to 整体平移 |
`queryOptions.minIntervalMs` 输入框支持 `s / m / h / ms` 后缀（例如 `"30s"` = 30000ms）。
`Interval` 行为只读，显示当前计算值：`ceil((to - from) * 1000 / maxDataPoints)`。
--- ---
## 表格面板配置（Table Panel） ## 表格面板配置（Table Panel）
表格面板支持以下 `PanelConfig` 字段：
| 字段 | 类型 | 默认值 | 说明 | | 字段 | 类型 | 默认值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `tableShowHeader` | `boolean` | `true` | 是否显示列标题 | | `tableShowHeader` | `boolean` | `true` | 是否显示列标题 |
...@@ -297,35 +372,22 @@ board.addEventListener('save', (e) => { ...@@ -297,35 +372,22 @@ board.addEventListener('save', (e) => {
| `tableColumnFilter` | `boolean` | `false` | 启用列过滤器 | | `tableColumnFilter` | `boolean` | `false` | 启用列过滤器 |
| `tableWrapText` | `boolean` | `false` | 文本换行 | | `tableWrapText` | `boolean` | `false` | 文本换行 |
| `tableEnablePagination` | `boolean` | `false` | 启用分页 | | `tableEnablePagination` | `boolean` | `false` | 启用分页 |
| `tablePageSize` | `number` | `20` | 每页行数（`tableEnablePagination` 为 `true` 时生效） | | `tablePageSize` | `number` | `20` | 每页行数 |
| `tableFooterEnabled` | `boolean` | `false` | 显示底部统计行 | | `tableFooterEnabled` | `boolean` | `false` | 显示底部统计行 |
| `tableFooterReducers` | `string[]` | `[]` | 底部聚合函数，取第一个值作为统计方式，支持所有 Grafana ReducerID | | `tableFooterReducers` | `string[]` | `[]` | 底部聚合函数，支持 `sum` `mean` `min` `max` `count` 等 |
| `tableFooterFields` | `string[]` | `undefined` | 参与底部计算的字段名；空/未设置 = 所有数值字段 | | `tableMinColumnWidth` | `number` | `100` | 列最小宽度（px） |
| `tableMinColumnWidth` | `number` | `100` | 列最小宽度 |
| `tableColumnOverrides` | `Record<string, TableColumnOverride>` | `{}` | 按列名覆盖显示配置 | | `tableColumnOverrides` | `Record<string, TableColumnOverride>` | `{}` | 按列名覆盖显示配置 |
### `tableFooterReducers` 支持的值 **`TableColumnOverride` 字段：**
| 分组 | 值 |
|------|----|
| 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` | 隐藏该列 | | `hidden` | `boolean` | 隐藏该列 |
| `label` | `string` | 覆盖列标题显示名 | | `label` | `string` | 覆盖列标题显示名 |
| `width` | `number` | 固定列宽（px） | | `width` | `number` | 固定列宽（px） |
| `alignment` | `'auto' \| 'left' \| 'center' \| 'right'` | 列对齐方式 | | `alignment` | `'auto' \| 'left' \| 'center' \| 'right'` | 列对齐 |
| `displayMode` | `TableCellDisplayMode` | 单元格显示模式 | | `displayMode` | `string` | 单元格模式：`auto` `colored-text` `colored-background` `gauge` `json-view` `pill` |
| `wrapText` | `boolean` | 该列文本换行 | | `wrapText` | `boolean` | 该列文本换行 |
| `valueRegex` | `{ pattern: string; replace: string }` | 正则替换单元格值 |
**`displayMode` 支持的值：** `auto`, `colored-text`, `colored-background`, `gauge`, `data-links`, `json-view`, `pill`
```json ```json
{ {
...@@ -334,8 +396,8 @@ board.addEventListener('save', (e) => { ...@@ -334,8 +396,8 @@ board.addEventListener('save', (e) => {
"tableFooterEnabled": true, "tableFooterEnabled": true,
"tableFooterReducers": ["mean"], "tableFooterReducers": ["mean"],
"tableColumnOverrides": { "tableColumnOverrides": {
"latency": { "displayMode": "gauge", "label": "延迟 (ms)" }, "latency": { "displayMode": "gauge", "label": "延迟 (ms)" },
"status": { "alignment": "center" }, "status": { "alignment": "center" },
"endpoint": { "width": 200 } "endpoint": { "width": 200 }
} }
} }
...@@ -343,31 +405,28 @@ board.addEventListener('save', (e) => { ...@@ -343,31 +405,28 @@ board.addEventListener('save', (e) => {
--- ---
## 变量配置弹窗 ## 变量
在编辑模式下（`isEditing === true`），`VariableBar` 右侧会显示 ⚙ 设置图标。点击后弹出变量配置弹窗，支持：
- 查看、新增、编辑、删除所有仪表盘变量
- 支持类型：`custom`、`query`、`textbox`、`datasource`、`constant`
- 所有修改在点击"保存"后统一提交，取消则丢弃草稿
### VariableConfig 新增字段 在编辑模式下，`VariableBar` 右侧显示 ⚙ 图标，点击后可新增、编辑、删除仪表盘变量。
| 字段 | 类型 | 说明 | 支持的变量类型：`custom` `query` `textbox` `datasource` `constant`
|------|------|------|
| `description` | `string?` | 变量描述 |
| `showOnDashboard` | `'label-and-value' \| 'value' \| 'nothing'` | 显示模式，`nothing` 时自动设置 `hide: true` |
| `customOptions` | `Array<{text, value}>?` | custom 类型选项（替代 customValues 字符串） |
| `dsType` | `string?` | datasource 类型的数据源类型 |
| `constantValue` | `string?` | constant 类型的常量值 |
--- ---
## 开发 ## 开发
```bash ```bash
npm install pnpm install
npm run dev # 开发模式
npm run build # 构建 Web Component # 本地预览（apps/board）
npm run lint # 代码检查 pnpm dev
# 类型检查
pnpm typecheck
# 构建库（antd 外置版）
pnpm build:lib
# 构建库（antd 内置版）
pnpm build:lib-bundled
``` ```
dist/argus-board.bundled.css 0 → 100644
.override-rule[data-v-2396374b]{border:1px solid var(--ant-color-border);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.override-rule-header[data-v-2396374b]{display:flex;align-items:center;gap:6px}.override-props[data-v-2396374b]{padding-left:8px;display:flex;flex-direction:column;gap:4px}.override-prop-row[data-v-2396374b]{display:flex;align-items:center;gap:6px}.legend-search-container[data-v-85a1707f]{flex-shrink:0;width:100%;padding-right:8px}.legend-search-input[data-v-85a1707f]{width:100%;font-size:12px;padding:6px 12px;border:1px solid var(--l2-border, #d9d9d9);border-radius:4px;background:var(--l1-background, #ffffff);color:var(--l2-foreground, #1f1f1f);box-sizing:border-box}.legend-container[data-v-85a1707f]{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;width:100%}.legend-container-bottom[data-v-85a1707f]{height:auto}.legend-container:has(.legend-item-focused) .legend-item[data-v-85a1707f]{opacity:.3}.legend-container:has(.legend-item-focused) .legend-item.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-empty-state[data-v-85a1707f]{font-size:12px;color:var(--l2-foreground);text-align:center;padding:2rem 0}.legend-virtuoso-container[data-v-85a1707f]{height:100%;width:100%}.legend-virtuoso-container-bottom[data-v-85a1707f]{height:auto}.virtuoso-grid-list[data-v-85a1707f]{min-width:0;display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(var(--legend-average-width, 240px),1fr));row-gap:4px;column-gap:12px}.virtuoso-grid-item[data-v-85a1707f]{min-width:0}.legend-virtuoso-container-right .virtuoso-grid-list[data-v-85a1707f]{grid-template-columns:1fr}.legend-virtuoso-container-single-row .virtuoso-grid-list[data-v-85a1707f]{grid-template-columns:repeat(auto-fit,minmax(var(--legend-average-width, 240px),max-content));justify-content:center}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar{width:.3rem}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar-track{background:transparent}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar-thumb{background:var(--l3-background, #f1f5f9);border-radius:.5rem}.legend-item[data-v-85a1707f]{display:flex;align-items:center;gap:6px;padding:4px 8px;max-width:100%;overflow:hidden;border-radius:4px;cursor:pointer}.legend-item-right[data-v-85a1707f]{width:100%}.legend-item-off[data-v-85a1707f]{opacity:.3;text-decoration:line-through;text-decoration-thickness:1px}.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-item-label-trigger[data-v-85a1707f]{display:flex;align-items:center;gap:6px;flex:1;min-width:0;cursor:pointer}.legend-marker[data-v-85a1707f]{border-width:2px;border-style:solid;border-radius:50%;min-width:11px;min-height:11px;width:11px;height:11px;flex-shrink:0;cursor:pointer;transition:transform .2s ease;position:relative}.legend-marker[data-v-85a1707f]:hover{transform:scale(1.2);box-shadow:0 0 0 2px #ffffff4d}.legend-marker[data-v-85a1707f]:active{transform:scale(.9)}.legend-label[data-v-85a1707f]{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;user-select:none}.legend-copy-button[data-v-85a1707f]{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;margin:0;border:none;color:var(--l2-foreground);cursor:pointer;border-radius:4px;visibility:hidden;opacity:0;transition:opacity .15s ease,color .15s ease;background:transparent}.legend-copy-button[data-v-85a1707f]:hover{color:var(--l1-foreground)}.legend-item[data-v-85a1707f]:hover{background:color-mix(in srgb,var(--l1-foreground) 5%,transparent)}.legend-item:hover .legend-copy-button[data-v-85a1707f]{visibility:visible;opacity:1}.legend-item-values[data-v-85a1707f]{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:4px;flex-shrink:0}.legend-item-value-badge[data-v-85a1707f]{display:inline-flex;align-items:center;gap:2px;font-size:11px;white-space:nowrap}.legend-item-value-key[data-v-85a1707f]{color:var(--l3-foreground, #888)}.legend-item-value-num[data-v-85a1707f]{color:var(--l2-foreground);font-variant-numeric:tabular-nums}.legend-table-mode[data-v-85a1707f]{overflow:auto}.legend-table-wrap[data-v-85a1707f]{width:100%;overflow:auto}.legend-table[data-v-85a1707f]{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}.legend-table-th[data-v-85a1707f]{padding:3px 8px;text-align:left;font-weight:500;font-size:11px;color:var(--l3-foreground, #888);border-bottom:1px solid var(--l2-border, rgba(255, 255, 255, .08));white-space:nowrap}.legend-table-th.legend-table-val-col[data-v-85a1707f]{text-align:right}.legend-table-row[data-v-85a1707f]{cursor:pointer}.legend-table-row[data-v-85a1707f]:hover{background:color-mix(in srgb,var(--l1-foreground, #d9d9d9) 5%,transparent)}.legend-table-row.legend-item-off[data-v-85a1707f]{opacity:.3;text-decoration:line-through;text-decoration-thickness:1px}.legend-table-row.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-table-td[data-v-85a1707f]{padding:3px 8px;font-variant-numeric:tabular-nums}.legend-table-td.legend-table-name-col .legend-item-label-trigger[data-v-85a1707f]{display:flex;align-items:center;gap:6px;min-width:0}.legend-table-td.legend-table-name-col .legend-label[data-v-85a1707f]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.legend-table-td.legend-table-val-col[data-v-85a1707f]{text-align:right;color:var(--l2-foreground);white-space:nowrap}.legend-table-name-col[data-v-85a1707f]{max-width:240px}.dark .legend-search-input[data-v-85a1707f]{background:var(--l1-background, #141414);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .legend-marker[data-v-85a1707f]:hover{box-shadow:0 0 0 2px #0000004d}.footer[data-v-75c52e2f]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-top:1px dashed var(--l2-border, #d9d9d9);background:var(--l1-background, #ffffff);border-radius:0 0 6px 6px}.dark .footer[data-v-75c52e2f]{background:var(--l1-background, #141414);border-top-color:var(--l2-border, #434343)}.hint-list[data-v-75c52e2f]{display:flex;flex-direction:column;gap:4px;padding:2px 8px;margin:0}.hint[data-v-75c52e2f]{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--l2-foreground, #1f1f1f);position:relative}.dark .hint[data-v-75c52e2f]{color:var(--l2-foreground, #ffffff)}.hint[data-active=false][data-v-75c52e2f]:before{content:"";position:absolute;top:50%;left:-12px;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--l2-foreground, #1f1f1f);opacity:.5}.dark .hint[data-active=false][data-v-75c52e2f]:before{background:var(--l2-foreground, #ffffff)}.kbd[data-v-75c52e2f]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--l3-background, #f0f0f0);color:var(--l2-foreground, #1f1f1f);border-radius:4px;font-family:monospace;font-size:11px;font-weight:600;border:1px solid var(--l2-border, #d9d9d9);box-shadow:0 1px 0 var(--l2-border, #d9d9d9)}.kbd.active[data-v-75c52e2f]{background:var(--ring, #1890ff);border-color:var(--ring, #1890ff);color:#fff;box-shadow:none}.dark .kbd[data-v-75c52e2f]{background:var(--l3-background, #2a2a2a);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343);box-shadow:0 1px 0 var(--l2-border, #434343)}.dark .kbd.active[data-v-75c52e2f]{background:var(--ring, #1890ff);border-color:var(--ring, #1890ff);color:#fff;box-shadow:none}.unpin-btn[data-v-75c52e2f]{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:10px;font-weight:500;color:var(--l2-foreground, #1f1f1f);background:transparent;border:1px solid var(--l2-border, #d9d9d9);border-radius:4px;cursor:pointer;transition:all .2s}.unpin-btn[data-v-75c52e2f]:hover{background:var(--l2-muted, #f5f5f5);border-color:var(--ring, #1890ff)}.dark .unpin-btn[data-v-75c52e2f]{color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .unpin-btn[data-v-75c52e2f]:hover{background:var(--l2-muted, #2a2a2a);border-color:var(--ring, #1890ff)}.tooltip-item[data-v-3b1d92d5]{display:flex;align-items:center;gap:8px;padding:6px;opacity:.7;font-weight:400}.tooltip-item[data-is-active=true][data-v-3b1d92d5]{opacity:1;font-weight:700}.tooltip-item-marker[data-v-3b1d92d5]{border-radius:50%;border-style:solid;border-width:2px;width:12px;height:12px;box-sizing:border-box;flex-shrink:0}.tooltip-item-content[data-v-3b1d92d5]{width:100%;display:flex;align-items:center;gap:8px;justify-content:space-between}.tooltip-item-label[data-v-3b1d92d5]{white-space:normal;overflow-wrap:anywhere}.tooltip-item-separator[data-v-3b1d92d5]{flex:1;border-width:.5px;border-style:dashed;min-width:24px;opacity:.5}.header-container[data-v-efb4cf97]{display:flex;flex-direction:column}.header-row[data-v-efb4cf97]{padding:8px 8px 0;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px}.header-status[data-v-efb4cf97]{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--callout-primary-title, #1890ff);flex-shrink:0}.header-pinned-item[data-v-efb4cf97]{padding:4px}.tooltip-list[data-v-fa17493a]{width:100%;padding:4px 2px 4px 4px;box-sizing:border-box}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar{width:.3rem}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar-track{background:transparent}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar-thumb{background:var(--bg-slate-100, #f1f5f9);border-radius:.5rem}.tooltip-container[data-v-4b92f289]{font-family:Inter,system-ui,sans-serif;font-size:12px;background:var(--l2-background, #ffffff);color:var(--l2-foreground, #1f1f1f);border-radius:6px;border:1px solid var(--l2-border, #d9d9d9);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;width:max-content;min-width:220px;max-width:320px}.tooltip-container.pinned[data-v-4b92f289]{border-color:var(--ring, #1890ff)}.tooltip-divider[data-v-4b92f289]{display:block;width:100%;height:1px;background-color:var(--l2-border, #d9d9d9)}.dark .tooltip-container[data-v-4b92f289]{background:var(--l2-background, #1f1f1f);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .tooltip-container.pinned[data-v-4b92f289]{border-color:var(--ring, #1890ff)}.dark .tooltip-divider[data-v-4b92f289]{background-color:var(--l2-border, #434343)}:root{--separator-border: rgba(128, 128, 128, .35);--sash-hover-transition-duration: .1s}._splitView_pzp7c_6{height:100%;overflow:hidden;position:relative;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13{height:100%;pointer-events:none;position:absolute;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13>._sash_pzp7c_13{pointer-events:auto}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24{height:100%;position:relative;white-space:nowrap;width:100%}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{overflow:hidden;position:absolute;white-space:initial}._splitView_pzp7c_6._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{width:100%}._splitView_pzp7c_6._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{height:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{background-color:var(--separator-border);content:" ";left:0;pointer-events:none;position:absolute;top:0;z-index:5}._splitView_pzp7c_6._separatorBorder_pzp7c_45._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:1px;width:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:100%;width:1px}:root{--focus-border: #007fd4;--sash-size: 8px;--sash-hover-size: 4px}._sash_j5cmb_7{position:absolute;z-index:35;touch-action:none;pointer-events:auto;text-align:initial}._sash_j5cmb_7._disabled_j5cmb_15{pointer-events:none}._sash_j5cmb_7._mac_j5cmb_19._vertical_j5cmb_19{cursor:col-resize}._sash_j5cmb_7._vertical_j5cmb_19._minimum_j5cmb_23{cursor:e-resize}._sash_j5cmb_7._vertical_j5cmb_19._maximum_j5cmb_27{cursor:w-resize}._sash_j5cmb_7._mac_j5cmb_19._horizontal_j5cmb_31{cursor:row-resize}._sash_j5cmb_7._horizontal_j5cmb_31._minimum_j5cmb_23{cursor:s-resize}._sash_j5cmb_7._horizontal_j5cmb_31._maximum_j5cmb_27{cursor:n-resize}._sash_j5cmb_7._disabled_j5cmb_15{cursor:default!important;pointer-events:none!important}._sash_j5cmb_7._vertical_j5cmb_19{cursor:ew-resize;top:0;width:var(--sash-size);height:100%}._sash_j5cmb_7._horizontal_j5cmb_31{cursor:ns-resize;left:0;width:100%;height:var(--sash-size)}._sash_j5cmb_7:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62{content:" ";height:calc(var(--sash-size) * 2);width:calc(var(--sash-size) * 2);z-index:100;display:block;cursor:all-scroll;position:absolute}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{cursor:nwse-resize}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{cursor:nesw-resize}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{left:calc(var(--sash-size) * -.5);top:calc(var(--sash-size) * -1)}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{left:calc(var(--sash-size) * -.5);bottom:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{top:calc(var(--sash-size) * -.5);left:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{top:calc(var(--sash-size) * -.5);right:calc(var(--sash-size) * -1)}._sash_j5cmb_7:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;transition:background-color var(--sash-hover-transition-duration) ease-out;background:transparent}._sash_j5cmb_7._vertical_j5cmb_19:before{width:var(--sash-hover-size);left:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._horizontal_j5cmb_31:before{height:var(--sash-hover-size);top:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._hover_j5cmb_126:before,._sash_j5cmb_7._active_j5cmb_127:before{background:var(--focus-border)}.panel-container[data-v-2c616ca4]{transition:box-shadow .2s}.panel-container[data-v-2c616ca4]:hover{box-shadow:0 2px 8px #0000001a}.log-viewer[data-v-22a0d40d]{display:flex;flex-direction:column;background:var(--ant-color-bg-container);border:1px solid var(--ant-color-border);border-radius:6px;overflow:hidden;font-family:monospace}.log-toolbar[data-v-22a0d40d]{display:flex;gap:8px;padding:8px;border-bottom:1px solid var(--ant-color-border);flex-shrink:0}.log-scroller[data-v-22a0d40d]{flex:1;overflow-y:auto}.log-entry[data-v-22a0d40d]{display:flex;gap:8px;padding:2px 8px;font-size:12px;line-height:18px;white-space:nowrap}.log-entry[data-v-22a0d40d]:hover{background:var(--ant-color-fill-quaternary)}.log-time[data-v-22a0d40d]{color:var(--ant-color-text-secondary);flex-shrink:0;width:80px}.log-level[data-v-22a0d40d]{flex-shrink:0;width:48px;font-weight:600;font-size:11px}.log-message[data-v-22a0d40d]{overflow:hidden;text-overflow:ellipsis;color:var(--ant-color-text)}.log-empty[data-v-22a0d40d]{padding:16px;text-align:center;color:var(--ant-color-text-secondary);font-size:12px}.service-topology[data-v-da85d863]{position:relative;overflow:hidden}.topology-empty[data-v-da85d863]{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ant-color-text-secondary);font-size:12px}.topology-node[data-v-da85d863]{cursor:pointer}.trace-waterfall[data-v-0212681c]{width:100%;font-size:12px;overflow:auto}.trace-empty[data-v-0212681c]{padding:16px;text-align:center;color:var(--ant-color-text-secondary)}.trace-header[data-v-0212681c],.trace-row[data-v-0212681c]{display:flex;align-items:center;gap:8px;padding:3px 8px;border-bottom:1px solid var(--ant-color-border-secondary)}.trace-header[data-v-0212681c]{font-weight:500;color:var(--ant-color-text-secondary);background:var(--ant-color-fill-quaternary)}.trace-name-col[data-v-0212681c]{width:240px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.trace-service[data-v-0212681c]{font-size:10px;color:var(--ant-color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-op[data-v-0212681c]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ant-color-text)}.trace-bar-col[data-v-0212681c]{flex:1;position:relative;height:16px}.trace-bar[data-v-0212681c]{position:absolute;top:2px;height:12px;border-radius:2px;min-width:2px;opacity:.85}.trace-dur-col[data-v-0212681c]{width:80px;flex-shrink:0;text-align:right;color:var(--ant-color-text-secondary);font-variant-numeric:tabular-nums}.kbd-key[data-v-94fb4749]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--ant-color-fill);color:var(--ant-color-text);border:1px solid var(--ant-color-border);border-radius:4px;font-family:monospace;font-size:11px;font-weight:600;box-shadow:0 1px 0 var(--ant-color-border);line-height:1}.panel-links-icon[data-v-6925a5a2]{display:inline-flex;align-items:center;color:var(--ant-color-text-secondary);text-decoration:none;opacity:.7;transition:opacity .15s}.panel-links-icon[data-v-6925a5a2]:hover{opacity:1;color:var(--ant-color-primary)}.viz-picker[data-v-1d0d144f]{padding:12px}.viz-picker-title[data-v-1d0d144f]{font-size:12px;font-weight:500;color:var(--ant-color-text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.viz-picker-grid[data-v-1d0d144f]{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}.viz-picker-item[data-v-1d0d144f]{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--ant-color-border);border-radius:6px;background:transparent;cursor:pointer;transition:all .15s;color:var(--ant-color-text)}.viz-picker-item[data-v-1d0d144f]:hover,.viz-picker-item--active[data-v-1d0d144f]{border-color:var(--ant-color-primary);background:var(--ant-color-primary-bg);color:var(--ant-color-primary)}.viz-picker-icon[data-v-1d0d144f]{font-size:20px}.viz-picker-label[data-v-1d0d144f]{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
dist/argus-board.bundled.es.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/argus-board.bundled.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/argus-board.css 0 → 100644
.override-rule[data-v-2396374b]{border:1px solid var(--ant-color-border);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.override-rule-header[data-v-2396374b]{display:flex;align-items:center;gap:6px}.override-props[data-v-2396374b]{padding-left:8px;display:flex;flex-direction:column;gap:4px}.override-prop-row[data-v-2396374b]{display:flex;align-items:center;gap:6px}.legend-search-container[data-v-85a1707f]{flex-shrink:0;width:100%;padding-right:8px}.legend-search-input[data-v-85a1707f]{width:100%;font-size:12px;padding:6px 12px;border:1px solid var(--l2-border, #d9d9d9);border-radius:4px;background:var(--l1-background, #ffffff);color:var(--l2-foreground, #1f1f1f);box-sizing:border-box}.legend-container[data-v-85a1707f]{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;width:100%}.legend-container-bottom[data-v-85a1707f]{height:auto}.legend-container:has(.legend-item-focused) .legend-item[data-v-85a1707f]{opacity:.3}.legend-container:has(.legend-item-focused) .legend-item.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-empty-state[data-v-85a1707f]{font-size:12px;color:var(--l2-foreground);text-align:center;padding:2rem 0}.legend-virtuoso-container[data-v-85a1707f]{height:100%;width:100%}.legend-virtuoso-container-bottom[data-v-85a1707f]{height:auto}.virtuoso-grid-list[data-v-85a1707f]{min-width:0;display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(var(--legend-average-width, 240px),1fr));row-gap:4px;column-gap:12px}.virtuoso-grid-item[data-v-85a1707f]{min-width:0}.legend-virtuoso-container-right .virtuoso-grid-list[data-v-85a1707f]{grid-template-columns:1fr}.legend-virtuoso-container-single-row .virtuoso-grid-list[data-v-85a1707f]{grid-template-columns:repeat(auto-fit,minmax(var(--legend-average-width, 240px),max-content));justify-content:center}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar{width:.3rem}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar-track{background:transparent}.legend-virtuoso-container[data-v-85a1707f]::-webkit-scrollbar-thumb{background:var(--l3-background, #f1f5f9);border-radius:.5rem}.legend-item[data-v-85a1707f]{display:flex;align-items:center;gap:6px;padding:4px 8px;max-width:100%;overflow:hidden;border-radius:4px;cursor:pointer}.legend-item-right[data-v-85a1707f]{width:100%}.legend-item-off[data-v-85a1707f]{opacity:.3;text-decoration:line-through;text-decoration-thickness:1px}.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-item-label-trigger[data-v-85a1707f]{display:flex;align-items:center;gap:6px;flex:1;min-width:0;cursor:pointer}.legend-marker[data-v-85a1707f]{border-width:2px;border-style:solid;border-radius:50%;min-width:11px;min-height:11px;width:11px;height:11px;flex-shrink:0;cursor:pointer;transition:transform .2s ease;position:relative}.legend-marker[data-v-85a1707f]:hover{transform:scale(1.2);box-shadow:0 0 0 2px #ffffff4d}.legend-marker[data-v-85a1707f]:active{transform:scale(.9)}.legend-label[data-v-85a1707f]{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;user-select:none}.legend-copy-button[data-v-85a1707f]{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;margin:0;border:none;color:var(--l2-foreground);cursor:pointer;border-radius:4px;visibility:hidden;opacity:0;transition:opacity .15s ease,color .15s ease;background:transparent}.legend-copy-button[data-v-85a1707f]:hover{color:var(--l1-foreground)}.legend-item[data-v-85a1707f]:hover{background:color-mix(in srgb,var(--l1-foreground) 5%,transparent)}.legend-item:hover .legend-copy-button[data-v-85a1707f]{visibility:visible;opacity:1}.legend-item-values[data-v-85a1707f]{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:4px;flex-shrink:0}.legend-item-value-badge[data-v-85a1707f]{display:inline-flex;align-items:center;gap:2px;font-size:11px;white-space:nowrap}.legend-item-value-key[data-v-85a1707f]{color:var(--l3-foreground, #888)}.legend-item-value-num[data-v-85a1707f]{color:var(--l2-foreground);font-variant-numeric:tabular-nums}.legend-table-mode[data-v-85a1707f]{overflow:auto}.legend-table-wrap[data-v-85a1707f]{width:100%;overflow:auto}.legend-table[data-v-85a1707f]{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}.legend-table-th[data-v-85a1707f]{padding:3px 8px;text-align:left;font-weight:500;font-size:11px;color:var(--l3-foreground, #888);border-bottom:1px solid var(--l2-border, rgba(255, 255, 255, .08));white-space:nowrap}.legend-table-th.legend-table-val-col[data-v-85a1707f]{text-align:right}.legend-table-row[data-v-85a1707f]{cursor:pointer}.legend-table-row[data-v-85a1707f]:hover{background:color-mix(in srgb,var(--l1-foreground, #d9d9d9) 5%,transparent)}.legend-table-row.legend-item-off[data-v-85a1707f]{opacity:.3;text-decoration:line-through;text-decoration-thickness:1px}.legend-table-row.legend-item-focused[data-v-85a1707f]{opacity:1}.legend-table-td[data-v-85a1707f]{padding:3px 8px;font-variant-numeric:tabular-nums}.legend-table-td.legend-table-name-col .legend-item-label-trigger[data-v-85a1707f]{display:flex;align-items:center;gap:6px;min-width:0}.legend-table-td.legend-table-name-col .legend-label[data-v-85a1707f]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.legend-table-td.legend-table-val-col[data-v-85a1707f]{text-align:right;color:var(--l2-foreground);white-space:nowrap}.legend-table-name-col[data-v-85a1707f]{max-width:240px}.dark .legend-search-input[data-v-85a1707f]{background:var(--l1-background, #141414);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .legend-marker[data-v-85a1707f]:hover{box-shadow:0 0 0 2px #0000004d}.footer[data-v-75c52e2f]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-top:1px dashed var(--l2-border, #d9d9d9);background:var(--l1-background, #ffffff);border-radius:0 0 6px 6px}.dark .footer[data-v-75c52e2f]{background:var(--l1-background, #141414);border-top-color:var(--l2-border, #434343)}.hint-list[data-v-75c52e2f]{display:flex;flex-direction:column;gap:4px;padding:2px 8px;margin:0}.hint[data-v-75c52e2f]{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--l2-foreground, #1f1f1f);position:relative}.dark .hint[data-v-75c52e2f]{color:var(--l2-foreground, #ffffff)}.hint[data-active=false][data-v-75c52e2f]:before{content:"";position:absolute;top:50%;left:-12px;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--l2-foreground, #1f1f1f);opacity:.5}.dark .hint[data-active=false][data-v-75c52e2f]:before{background:var(--l2-foreground, #ffffff)}.kbd[data-v-75c52e2f]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--l3-background, #f0f0f0);color:var(--l2-foreground, #1f1f1f);border-radius:4px;font-family:monospace;font-size:11px;font-weight:600;border:1px solid var(--l2-border, #d9d9d9);box-shadow:0 1px 0 var(--l2-border, #d9d9d9)}.kbd.active[data-v-75c52e2f]{background:var(--ring, #1890ff);border-color:var(--ring, #1890ff);color:#fff;box-shadow:none}.dark .kbd[data-v-75c52e2f]{background:var(--l3-background, #2a2a2a);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343);box-shadow:0 1px 0 var(--l2-border, #434343)}.dark .kbd.active[data-v-75c52e2f]{background:var(--ring, #1890ff);border-color:var(--ring, #1890ff);color:#fff;box-shadow:none}.unpin-btn[data-v-75c52e2f]{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:10px;font-weight:500;color:var(--l2-foreground, #1f1f1f);background:transparent;border:1px solid var(--l2-border, #d9d9d9);border-radius:4px;cursor:pointer;transition:all .2s}.unpin-btn[data-v-75c52e2f]:hover{background:var(--l2-muted, #f5f5f5);border-color:var(--ring, #1890ff)}.dark .unpin-btn[data-v-75c52e2f]{color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .unpin-btn[data-v-75c52e2f]:hover{background:var(--l2-muted, #2a2a2a);border-color:var(--ring, #1890ff)}.tooltip-item[data-v-3b1d92d5]{display:flex;align-items:center;gap:8px;padding:6px;opacity:.7;font-weight:400}.tooltip-item[data-is-active=true][data-v-3b1d92d5]{opacity:1;font-weight:700}.tooltip-item-marker[data-v-3b1d92d5]{border-radius:50%;border-style:solid;border-width:2px;width:12px;height:12px;box-sizing:border-box;flex-shrink:0}.tooltip-item-content[data-v-3b1d92d5]{width:100%;display:flex;align-items:center;gap:8px;justify-content:space-between}.tooltip-item-label[data-v-3b1d92d5]{white-space:normal;overflow-wrap:anywhere}.tooltip-item-separator[data-v-3b1d92d5]{flex:1;border-width:.5px;border-style:dashed;min-width:24px;opacity:.5}.header-container[data-v-efb4cf97]{display:flex;flex-direction:column}.header-row[data-v-efb4cf97]{padding:8px 8px 0;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px}.header-status[data-v-efb4cf97]{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--callout-primary-title, #1890ff);flex-shrink:0}.header-pinned-item[data-v-efb4cf97]{padding:4px}.tooltip-list[data-v-fa17493a]{width:100%;padding:4px 2px 4px 4px;box-sizing:border-box}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar{width:.3rem}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar-track{background:transparent}.tooltip-list[data-v-fa17493a]::-webkit-scrollbar-thumb{background:var(--bg-slate-100, #f1f5f9);border-radius:.5rem}.tooltip-container[data-v-4b92f289]{font-family:Inter,system-ui,sans-serif;font-size:12px;background:var(--l2-background, #ffffff);color:var(--l2-foreground, #1f1f1f);border-radius:6px;border:1px solid var(--l2-border, #d9d9d9);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;width:max-content;min-width:220px;max-width:320px}.tooltip-container.pinned[data-v-4b92f289]{border-color:var(--ring, #1890ff)}.tooltip-divider[data-v-4b92f289]{display:block;width:100%;height:1px;background-color:var(--l2-border, #d9d9d9)}.dark .tooltip-container[data-v-4b92f289]{background:var(--l2-background, #1f1f1f);color:var(--l2-foreground, #ffffff);border-color:var(--l2-border, #434343)}.dark .tooltip-container.pinned[data-v-4b92f289]{border-color:var(--ring, #1890ff)}.dark .tooltip-divider[data-v-4b92f289]{background-color:var(--l2-border, #434343)}:root{--separator-border: rgba(128, 128, 128, .35);--sash-hover-transition-duration: .1s}._splitView_pzp7c_6{height:100%;overflow:hidden;position:relative;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13{height:100%;pointer-events:none;position:absolute;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13>._sash_pzp7c_13{pointer-events:auto}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24{height:100%;position:relative;white-space:nowrap;width:100%}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{overflow:hidden;position:absolute;white-space:initial}._splitView_pzp7c_6._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{width:100%}._splitView_pzp7c_6._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{height:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{background-color:var(--separator-border);content:" ";left:0;pointer-events:none;position:absolute;top:0;z-index:5}._splitView_pzp7c_6._separatorBorder_pzp7c_45._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:1px;width:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:100%;width:1px}:root{--focus-border: #007fd4;--sash-size: 8px;--sash-hover-size: 4px}._sash_j5cmb_7{position:absolute;z-index:35;touch-action:none;pointer-events:auto;text-align:initial}._sash_j5cmb_7._disabled_j5cmb_15{pointer-events:none}._sash_j5cmb_7._mac_j5cmb_19._vertical_j5cmb_19{cursor:col-resize}._sash_j5cmb_7._vertical_j5cmb_19._minimum_j5cmb_23{cursor:e-resize}._sash_j5cmb_7._vertical_j5cmb_19._maximum_j5cmb_27{cursor:w-resize}._sash_j5cmb_7._mac_j5cmb_19._horizontal_j5cmb_31{cursor:row-resize}._sash_j5cmb_7._horizontal_j5cmb_31._minimum_j5cmb_23{cursor:s-resize}._sash_j5cmb_7._horizontal_j5cmb_31._maximum_j5cmb_27{cursor:n-resize}._sash_j5cmb_7._disabled_j5cmb_15{cursor:default!important;pointer-events:none!important}._sash_j5cmb_7._vertical_j5cmb_19{cursor:ew-resize;top:0;width:var(--sash-size);height:100%}._sash_j5cmb_7._horizontal_j5cmb_31{cursor:ns-resize;left:0;width:100%;height:var(--sash-size)}._sash_j5cmb_7:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62{content:" ";height:calc(var(--sash-size) * 2);width:calc(var(--sash-size) * 2);z-index:100;display:block;cursor:all-scroll;position:absolute}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{cursor:nwse-resize}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{cursor:nesw-resize}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{left:calc(var(--sash-size) * -.5);top:calc(var(--sash-size) * -1)}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{left:calc(var(--sash-size) * -.5);bottom:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{top:calc(var(--sash-size) * -.5);left:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{top:calc(var(--sash-size) * -.5);right:calc(var(--sash-size) * -1)}._sash_j5cmb_7:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;transition:background-color var(--sash-hover-transition-duration) ease-out;background:transparent}._sash_j5cmb_7._vertical_j5cmb_19:before{width:var(--sash-hover-size);left:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._horizontal_j5cmb_31:before{height:var(--sash-hover-size);top:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._hover_j5cmb_126:before,._sash_j5cmb_7._active_j5cmb_127:before{background:var(--focus-border)}.panel-container[data-v-2c616ca4]{transition:box-shadow .2s}.panel-container[data-v-2c616ca4]:hover{box-shadow:0 2px 8px #0000001a}.log-viewer[data-v-22a0d40d]{display:flex;flex-direction:column;background:var(--ant-color-bg-container);border:1px solid var(--ant-color-border);border-radius:6px;overflow:hidden;font-family:monospace}.log-toolbar[data-v-22a0d40d]{display:flex;gap:8px;padding:8px;border-bottom:1px solid var(--ant-color-border);flex-shrink:0}.log-scroller[data-v-22a0d40d]{flex:1;overflow-y:auto}.log-entry[data-v-22a0d40d]{display:flex;gap:8px;padding:2px 8px;font-size:12px;line-height:18px;white-space:nowrap}.log-entry[data-v-22a0d40d]:hover{background:var(--ant-color-fill-quaternary)}.log-time[data-v-22a0d40d]{color:var(--ant-color-text-secondary);flex-shrink:0;width:80px}.log-level[data-v-22a0d40d]{flex-shrink:0;width:48px;font-weight:600;font-size:11px}.log-message[data-v-22a0d40d]{overflow:hidden;text-overflow:ellipsis;color:var(--ant-color-text)}.log-empty[data-v-22a0d40d]{padding:16px;text-align:center;color:var(--ant-color-text-secondary);font-size:12px}.service-topology[data-v-da85d863]{position:relative;overflow:hidden}.topology-empty[data-v-da85d863]{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ant-color-text-secondary);font-size:12px}.topology-node[data-v-da85d863]{cursor:pointer}.trace-waterfall[data-v-0212681c]{width:100%;font-size:12px;overflow:auto}.trace-empty[data-v-0212681c]{padding:16px;text-align:center;color:var(--ant-color-text-secondary)}.trace-header[data-v-0212681c],.trace-row[data-v-0212681c]{display:flex;align-items:center;gap:8px;padding:3px 8px;border-bottom:1px solid var(--ant-color-border-secondary)}.trace-header[data-v-0212681c]{font-weight:500;color:var(--ant-color-text-secondary);background:var(--ant-color-fill-quaternary)}.trace-name-col[data-v-0212681c]{width:240px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.trace-service[data-v-0212681c]{font-size:10px;color:var(--ant-color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-op[data-v-0212681c]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ant-color-text)}.trace-bar-col[data-v-0212681c]{flex:1;position:relative;height:16px}.trace-bar[data-v-0212681c]{position:absolute;top:2px;height:12px;border-radius:2px;min-width:2px;opacity:.85}.trace-dur-col[data-v-0212681c]{width:80px;flex-shrink:0;text-align:right;color:var(--ant-color-text-secondary);font-variant-numeric:tabular-nums}.kbd-key[data-v-94fb4749]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--ant-color-fill);color:var(--ant-color-text);border:1px solid var(--ant-color-border);border-radius:4px;font-family:monospace;font-size:11px;font-weight:600;box-shadow:0 1px 0 var(--ant-color-border);line-height:1}.panel-links-icon[data-v-6925a5a2]{display:inline-flex;align-items:center;color:var(--ant-color-text-secondary);text-decoration:none;opacity:.7;transition:opacity .15s}.panel-links-icon[data-v-6925a5a2]:hover{opacity:1;color:var(--ant-color-primary)}.viz-picker[data-v-1d0d144f]{padding:12px}.viz-picker-title[data-v-1d0d144f]{font-size:12px;font-weight:500;color:var(--ant-color-text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.viz-picker-grid[data-v-1d0d144f]{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}.viz-picker-item[data-v-1d0d144f]{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--ant-color-border);border-radius:6px;background:transparent;cursor:pointer;transition:all .15s;color:var(--ant-color-text)}.viz-picker-item[data-v-1d0d144f]:hover,.viz-picker-item--active[data-v-1d0d144f]{border-color:var(--ant-color-primary);background:var(--ant-color-primary-bg);color:var(--ant-color-primary)}.viz-picker-icon[data-v-1d0d144f]{font-size:20px}.viz-picker-label[data-v-1d0d144f]{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
dist/argus-board.es.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/argus-board.js
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": "argus-board-vue",
"version": "0.1.11", "version": "undefined",
"type": "module", "type": "module",
"main": "./dist/argus-board.js",
"module": "./dist/argus-board.es.js",
"exports": {
".": {
"import": "./dist/argus-board.es.js",
"default": "./dist/argus-board.js"
},
"./dist/style.css": "./dist/style.css"
},
"files": [
"dist/",
"lib/",
"README.md",
"LICENSE"
],
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.2.6", "vue-allotment": "^0.2.0"
"@grafana/data": "^11.2.3",
"@visx/gradient": "^3.12.0",
"@visx/group": "^3.12.0",
"@visx/shape": "^3.12.0",
"allotment": "1.20.5",
"antd": "^5.11.0",
"classnames": "^2.5.1",
"dayjs": "^1.11.10",
"lodash-es": "^4.17.21",
"lucide-react": "^1.14.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-grid-layout": "^1.3.4",
"react-virtuoso": "^4.18.6",
"tinycolor2": "^1.6.0",
"uplot": "1.6.31",
"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