n9e/fe

Nightingale frontend

fe's Issues

team add user, turning pages, the selection of the number of pages is invalid

select 20，not effective

日志分析功能，个别索引查询时前端报错

数据源变量支持正则过滤

https://answer.flashcat.cloud/questions/10010000000002723

饼图和蜂窝图支持阈值设置

https://answer.flashcat.cloud/questions/10010000000001225

barGauge 下钻方案

barGauge 下钻采取点击进度条的方式, 是否可行?

仪表盘分享页面，筛选时间显示utc时间

操作步骤：

1. 在仪表盘页面，使用右上角的时间筛选功能选择起始时间和结束时间筛选时间段（不要选择最近xx时间）
2. 随便选择一个图表，点击分享
   预期：
   在分享页面，右上角使用预设的时区显示时间段，和仪表盘页面时间显示一致
   实际：
   在分享页面，右上角使用了utc时区显示了时间段

注意：
需在仪表盘的页面设置时间段才会出现，如果直接在分享页面设置时间段正常。

特定步骤下，即时查询bug，可复现

chrome 版本：112.0.5615.138
n9e 版本：6.0 ga11
复现步骤：
1

记得点 确定
2

3.

4.这时候再查询就不行了

5. 必须浏览器刷新了，不知道是不是操作逻辑有问题

仪表盘变量值不能为空

变量值不能为空，会自动填充一个不相关的值。

bug:夜莺大盘override无法删除

https://answer.flashcat.cloud/questions/10010000000001128

feat: 大盘 stat pie hexbin 等非时序图支持下钻链接

#18
ccfos/nightingale#1218

下钻链接里变量格式

1. 适配大盘变量，例如 ${var_name}
2. 支持关联对应序列的 labels 值
   • series name：${__field.__name__}
   • label value: ${__field.labels.label_name}

时序图堆叠模式 tooltips 排序不生效

告警规则 - 规则配置 中默认使用 Metrics

目前添加告警规则的 规则配置中使用的是 Host

是否可以改成使用 Metrics 比较通用呢?

Host 应该是使用的 对象列表 . 目前没有使用 pushgw 上报，所以没有这个 列表

支持 grafana 内置变量

如 $__interval 等

https://answer.flashcat.cloud/questions/10010000000001188

告警规则，新增和编辑报错

日志分析界面优化「需求」

日志分析：
选择索引及字段等信息后，查询到的日志信息，仅占屏幕三分之一到四分之一，阅读空间太小了，不便于阅读，尤其是多查询时。
希望能优化日志显示界面。
比如：将左侧做一个弹入弹出功能？全屏显示？

npm install failure

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.0" from the root project
npm ERR! peer react@">=16.8.4" from @ant-design/[email protected]
npm ERR! node_modules/@ant-design/graphs
npm ERR! @ant-design/graphs@"^1.3.6" from the root project
npm ERR! 62 more (@ant-design/icons, @ant-design/plots, @icons/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-ace
npm ERR! react-ace@"^8.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-ace
npm ERR! react-ace@"^8.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

在新标签中打开监控大盘标签能否显示大盘名称

在新标签中打开监控大盘，标签能否显示大盘名称。否则开多个大盘，都是一个标签名称无法快速找到自己需要查看的大盘。

另外，能否支持页面多开的功能，目前右击菜单无法选择在新标签中打开

elasticsearch查询中过滤条件查询结果不对

比如我想要查询 ip地址为172.27.8.9 并且 logtype是slow的所有日志，输入如下查询：ip:172.27.8.9 and logtype:slow 或者 172.27.8.9 and slow；但是结果不对，我在kibana上面查询的结果是没问题的

v6 迁移大盘 全局数据源 环境变量 获取不到值

1. 迁移 v6 仪表盘.
2. 配置了 全局 数据源环境变量.
3. 选择 指定得 数据源 可以获取到值 , 但是是用 变量获取到值.

初始化白屏

你好，执行完 install 之后 run dev正常，页面空白，这个是什么问题？

执行npm run build 好像是卡住了

npm 8.3.1
node 16.14.0

订阅规则支持显示告警级别

订阅规则这里，重新定义级别后能否支持显示告警级别

时序堆积图 能否可以根据值进行排序。（鼠标放上去的弹窗那里）

Hexbin的tips 优化建议

Hexbin的tips 默认展示指标的所有的label， 显得比较复杂，是否可以加入定制化的功能

dashborad 分享异常

版本：<= ga.4
https://answer.flashcat.cloud/questions/10010000000001128

编辑信息，保存成功后刷新当前数据列表，不要重新跳转到第1页

新增：跳转到第1页
编辑：不改变current

执行告警自愈报错：no host

通知设置无法删除，ssl判断前端没有展示

n9e ga13的版本webhook bug

1. ssl跳过验证不会保存
2. 设置webhook之后无法删除，必须存在一个webhook才能保存

fe项目打完包后利用nginx访问报错：Unexpected token '<', "<!-- ~ "... is not valid JSON

确保nginx配置没有问题，正常访问同目录下其他文件可以访问，访问fe项目会报错：Unexpected token '<', "<!-- ~ "... is not valid JSON，
大家有遇到过吗？

时序图在开关堆叠后显示的数据不对

前端版本：v5.15.0
原始图形：

切换成堆叠：

再关闭堆叠：

标签页数据未精确过滤匹配

如图所示的现象：
vm标签页里面有vminsert标签 和 vimselect标签 的数据，vminsert标签有自己的监控指标，vmselect同理。

优化建议：
按当前的逻辑，要么全部在vm标签页，就不要有vminsert vmslect标签出现，
要么vm标签只有vm精确匹配开头指标，vminsert开头的出现在vminsert标签。

PS:之前有反馈过此问题，看样子V6版本没修复。以上是个人建议，如果与你们的理念冲突请忽略。

v5升级v6后大盘no data，提示：bad_data: 1:33: parse error: unexpected identifier "s342" in label matching, expected "," or "}"

刚刚从v5升级到v6.0.0-ga.4.1，上去监控大盘查看数据显示nodata，点击编辑进入编辑页面后又有数据了，过一段时间再打开大盘再次显示nodata，最后找到原因是大盘迁移后第一次进入默认的大盘变量会自动给你带上引号，导致出现报错：bad_data: 1:33: parse error: unexpected identifier "s342" in label matching, expected "," or "}"；重新选择变量，问题解决，再次进入大盘也不会出现问题

分页页码需要做的明显一些

https://answer.flashcat.cloud/questions/10010000000000863

【需求】N9E日志分析->即时查询功能，索引框 搜索提示默认增加 “前缀*“索引以及查询展示时间显示为东八区时间

监控仪表盘

仪表监控盘--> 在我切换project 变量值时，ident 值还停留在上次project 对应的主机列表中，输入框选中的的ident没有跟着 project切换而变化， 这个需要优化下吗？

版本: 6.0.0-ga.4

屏蔽了告警规则 显示有点问题

如下:

es 会支持 数据流 的索引 读取方式吗？

官方文档是这个

https://www.elastic.co/guide/en/elasticsearch/reference/8.8/data-streams.html

目前这边读取出来的是 .ds-logs-xxxxx 的索引。

希望能支持 data-streams 的索引读取.

[需求] 时间序列图当 Legend 显示模式调整成列表时，希望能在右侧显示出对应的指标值

当 Legend 较多的时候，后面的指标会被隐藏掉，导致无法看到所有的数据。

但把 Legend 调整成列表并放在右侧时，可以上面滚动，能看到所有的 Legend，但是对应的指标值又看不到了，希望当 Legend 为列表模式时，能在右侧显示出对应的指标值。这样即使 Legend 较多，但在 dashboard 上能通过上下滚动，看到所有的指标值。

日志分析--即时查询

请帮忙看下，即时查询出来的数据, 柱状图对应的时间是错误的

请问：loki数据源能支持么

我看新的版本日志分析->即时查询，数据源类型有Loki，但是系统配置->数据源中没有Loki

nginx 访问/monitor无法转发成功

想通过nginx转发请求，按如下配置“nginx 配置”可以正常通过根访问到程序。我看咱们前端代码都是绝对路径，如果想通过/monitor 、/monitor/api/n9e 访问到资源，是否可以通过nginx实现？还是必须修改前端代码？

前端版本：5.14.1
后端版本：v5.14.0-da5dd683d684901389336f96c55ae58837b9230e

nginx 配置
server {
listen 80;
server_name 0.0.0.0;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_connect_timeout 60;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_pass http://172.16.0.27:10000;
}
location ^~ /api/n9e {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_connect_timeout 60;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_pass http://172.16.0.27:10000/api/n9e;
}
}

能否统一提示，有些模块提示的中文，有些模块提示的英文

能否统一提示，有些模块提示的中文，有些模块提示的英文

v6-ga4 添加 es 数据源报错

添加 ES 数据源 返回 400 错误

• ui 返回错误

request url:https://dev-elasticsearch.dr.cn/api/v1/query?query=1%2B1 failed code:400

• 日志报错

ERROR router/router_datasource.go:114 Error making request: 400

bug:夜莺蜂窝图数值一样会冲突

https://answer.flashcat.cloud/questions/10010000000001239

[vite] Failed to load source map for /src/pages/dashboard/Detail/dark.antd.less.

npm run dev
本地访问http://localhost:8765/，页面无法展示

登录页面无限重定向

服务端设置 AnonymousAccess.PromQuerier=false时, 进入登录页面, 出现不停重定向到登录页的情况.
发现是登录页调用/api/n9e/datasource/brief, 返回401后重定向到登录页

时序图支持值为负数的值的展示

类似于Grafana, 支持以0 为坐标轴, 往下堆叠

npm build Failed

#0 49.47 src/pages/alertRules/Form/Rule/Rule/Log/index.tsx(26,48): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/alertRules/Form/Rule/Rule/Log/index.tsx(27,52): error TS2307: Cannot find module 'plus:/datasource/elasticsearch' or its corresponding type declarations.
#0 49.47 src/pages/alertRules/Form/Rule/Rule/Metric/index.tsx(27,41): error TS2307: Cannot find module 'plus:/datasource/clickHouse' or its corresponding type declarations.
#0 49.47 src/pages/alertRules/Form/Rule/Rule/Metric/index.tsx(28,39): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/pages/alertRules/Form/Rule/Rule/index.tsx(21,38): error TS2307: Cannot find module 'plus:/datasource/anomaly' or its corresponding type declarations.
#0 49.47 src/pages/alertRulesBuiltin/index.tsx(93,21): error TS2345: Argument of type 'number | RuleCateType | (() => IterableIterator<RuleCateType>) | (() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }) | ... 30 more ... | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[])' is not assignable to parameter of type 'SetStateAction<RuleCateType | undefined>'.
#0 49.47   Type 'number' is not assignable to type 'SetStateAction<RuleCateType | undefined>'.
#0 49.47 src/pages/dashboard/Editor/QueryEditor/index.tsx(5,43): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/dashboard/Editor/QueryEditor/index.tsx(6,40): error TS2307: Cannot find module 'plus:/datasource/zabbix' or its corresponding type declarations.
#0 49.47 src/pages/dashboard/Editor/QueryEditor/index.tsx(7,42): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/pages/dashboard/Renderer/datasource/useQuery.tsx(28,41): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/dashboard/Renderer/datasource/useQuery.tsx(29,38): error TS2307: Cannot find module 'plus:/datasource/zabbix' or its corresponding type declarations.
#0 49.47 src/pages/dashboard/Renderer/datasource/useQuery.tsx(30,40): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/pages/dashboardBuiltin/index.tsx(76,21): error TS2345: Argument of type 'number | BoardCateType | (() => IterableIterator<BoardCateType>) | (() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }) | ... 30 more ... | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[])' is not assignable to parameter of type 'SetStateAction<BoardCateType | undefined>'.
#0 49.47   Type 'number' is not assignable to type 'SetStateAction<BoardCateType | undefined>'.
#0 49.47 src/pages/event/LogsDetail/index.tsx(1,40): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/event/LogsDetail/index.tsx(2,44): error TS2307: Cannot find module 'plus:/datasource/elasticsearch' or its corresponding type declarations.
#0 49.47 src/pages/event/Preview/index.tsx(7,43): error TS2307: Cannot find module 'plus:/datasource/anomaly' or its corresponding type declarations.
#0 49.47 src/pages/event/Preview/index.tsx(8,52): error TS2307: Cannot find module 'plus:/datasource/elasticsearch' or its corresponding type declarations.
#0 49.47 src/pages/event/Preview/index.tsx(9,48): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/event/Preview/index.tsx(10,49): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/pages/event/detail.tsx(31,46): error TS2307: Cannot find module 'plus:/datasource/elasticsearch' or its corresponding type declarations.
#0 49.47 src/pages/event/detail.tsx(32,42): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/event/detail.tsx(33,41): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/pages/explorer/Explorer.tsx(28,39): error TS2307: Cannot find module 'plus:/datasource/aliyunSLS' or its corresponding type declarations.
#0 49.47 src/pages/explorer/Explorer.tsx(30,40): error TS2307: Cannot find module 'plus:/datasource/clickHouse' or its corresponding type declarations.
#0 49.47 src/pages/explorer/Explorer.tsx(31,36): error TS2307: Cannot find module 'plus:/datasource/zabbix' or its corresponding type declarations.
#0 49.47 src/pages/explorer/Explorer.tsx(32,38): error TS2307: Cannot find module 'plus:/datasource/influxDB' or its corresponding type declarations.
#0 49.47 src/routers/index.tsx(66,39): error TS2307: Cannot find module 'plus:/datasource/anomaly' or its corresponding type declarations.

Table 下钻方案

table的下钻要不要加到字段上，这里添加超链接的配置， 但是具体样式还没想好。

grafana 大盘导入问题收集

目前只支持导入 v8+ 版本的仪表盘配置，导入完的图表只支持夜莺目前支持的图表类型和功能
v6.2.0 + 已经不再对 grafana 版本限制，但是低于 v8 的版本导入后可能体验会比较差

以便快速排查问题，需要填写下面的信息

1. grafana 版本信息
2. 尽可能的详细描述下问题
3. grafana 大盘 json，建议上传文件或者以下面的可折叠的方式贴入 json

<details>
  <summary>Click to expand</summary>
  grafana dashboard json
</details>

目前导入后无法支持的配置和功能 （持续更新 2024-05-07）

1. 只支持导入 Prometheus 源的变量和图表配置
2. Table 图完全不支持
3. Transform 不支持
4. 单位部分支持
5. overrides 部分支持

chrome 浏览器即时查询页面 字体显示异常

chrome version：112.0.5615.138
n9e version:6.0 ga11

开起来像是浏览器不支持字体问题