VictoriaMetrics vmui 测试用例详解查询执行、时间范围与 URL 参数的端到端验证指南【免费下载链接】VictoriaMetricsVictoriaMetrics: fast, cost-effective monitoring solution and time series database项目地址: https://gitcode.com/GitHub_Trending/vi/VictoriaMetricsVictoriaMetrics 的 Web UI 组件 vmuiVictoriaMetrics UI是面向指标查询、图表绘制与可视化分析的前端界面内置了查询编辑器、时间范围控制器、自动刷新、查询历史与可分享的 URL 参数等核心能力。本文以仓库中 app/vmui/packages/vmui/TESTCASES.md 收录的手工测试用例为骨架逐条拆解强制执行查询带自动刷新的时间范围查询历史绝对时间范围字段删除查询后的自动更新与URL 参数解析等场景的步骤与预期结果并结合 vmui 前端源码查询执行、状态管理、URL 序列化等实现说明其底层行为帮助测试人员、前端开发者与 vmui 使用者在本地复现、验证并深入理解这些交互逻辑。测试前置环境如何在本地运行 vmuiTESTCASES.md 中所有用例都基于本地开发服务器http://localhost:3000展开。vmui 前端位于 app/vmui/packages/vmui其package.json中定义了以下常用脚本{ name: vmui, version: 0.1.0, private: true, type: module, scripts: { prestart: npm run copy-metricsql-docs, start: vite, build: vite build, lint: eslint --format stylish src/**/*.{ts,tsx}, test: vitest run, typecheck: tsc --noEmit } }在app/vmui/packages/vmui目录下依次执行依赖安装与启动命令即可开启开发环境npm install npm run start浏览器访问http://localhost:3000后即可按本文用例逐项验证。需要注意的是prestart会先把仓库根目录 docs/MetricsQL.md 复制到src/assets/MetricsQL.md供查询编辑器内联展示 MetricsQL 函数文档使用开发模式下页面改动会热更新编辑源码后无需手动重启。vmui 前端基于 PreactReact 兼容层 Vite 构建图表渲染使用 uPlot时间处理使用 dayjsURL 状态同步使用qs库见 app/vmui/packages/vmui/package.json。所有用例均以执行步骤 预期结果的形式组织下面逐一展开。用例 1强制执行查询Force execution of a queries测试步骤点击Execute query按钮点击Refresh dashboard图标在查询输入框中按Enter键。预期结果以上每一步都会向服务端发送一次查询请求并渲染出新的数据。源码印证该用例验证的是 vmui 中查询触发途径的完备性——三种交互入口都必须可靠地触发请求。查询请求的实际发送逻辑位于 app/vmui/packages/vmui/src/hooks/useFetchQuery.ts请求 URL 由fetchUrl的useMemo生成图表Chart模式下调用getQueryRangeUrl构造GET /api/v1/query_range请求非图表模式Table/Code则调用getQueryUrl构造/api/v1/query即时查询请求见 app/vmui/packages/vmui/src/api/query-range.ts请求通过throttledFetchData debounce(fetchData, 300)做 300ms 防抖合并短时间内多次触发只发送一次有效请求请求以POST方式提交method: POSTbody 为 URLSearchParams并受AbortController管理当新请求到来时会 abort 队列中尚未完成的旧请求见 useFetchQuery.ts保证界面始终呈现最新一次查询的结果。因此点击按钮、点击刷新图标、在查询框按回车三种方式最终都会走入同一条fetchData链路并重新拉取数据。若勾选了nocachenocache1或开启查询追踪trace1生成的请求 URL 还会附加对应参数详见 query-range.ts。用例 2带自动刷新的时间范围Time Range with auto refresh测试步骤设置绝对时间范围Absolute time range启用自动刷新Auto refresh修改自动刷新间隔Delay auto refresh禁用自动刷新Disable auto refresh。预期结果整个过程中已设置的时间范围保持不变。源码印证该用例的核心断言是自动刷新只影响重新查询不应篡改用户手工选定的时间范围。时间状态由 app/vmui/packages/vmui/src/state/time/reducer.ts 管理其中与刷新相关的是两个 actionRUN_QUERY根据当前相对时间relativeTime与已选时长duration重新计算 periodRUN_QUERY_TO_NOW以当前时刻为结束点、保持原时长计算新的 periodgetTimeperiodForDuration(state.duration)。当用户设置了绝对时间范围后reducer 会将其归一化为 duration end 的组合SET_PERIOD分支中通过getDurationFromPeriod计算时长、getTimeperiodForDuration重建 period并同时把relativeTime置为none。这意味着后续任何刷新到当前时刻的触发都以保持原时长与结束点为前提不会把用户选定的绝对区间改写成别的区间——这正是本用例预期结果的实现来源。测试时若发现绝对时间范围在开启/调整/关闭自动刷新后被改变即可判定为缺陷。用例 3查询历史Query history测试步骤依次执行查询1、2、3在查询输入框聚焦状态下按Ctrl ArrowUp/Ctrl ArrowDown快捷键切换历史。预期结果查询值按执行顺序切换保留执行顺序Ctrl ArrowUp切换到上一条prevCtrl ArrowDown切换到下一条next。源码印证查询历史由 app/vmui/packages/vmui/src/components/QueryHistory/utils.ts 中的getUpdatedHistory维护每次执行新查询时把值追加到values数组末尾并更新index游标历史长度受MAX_QUERIES_HISTORY限制超出时从头部shift()丢弃最旧的记录见 utils.ts。相关上限常量定义在 app/vmui/packages/vmui/src/constants/graph.tsexport const MAX_QUERY_FIELDS 10; export const MAX_QUERIES_HISTORY 25;即单个查询框最多保留最近 25 条历史。Ctrl ArrowUp/Ctrl ArrowDown本质上是对index游标的前后移动向上取前一条index-1向下取后一条index1从而严格保持按执行顺序浏览。此外历史还会持久化到浏览器 localStoragekey 为METRICS_QUERY_HISTORY在 QueryHistory.tsx 的弹窗中分为Session history会话历史、Saved history已保存历史、Favorite queries收藏查询三个页签展示收藏变更会通过setFavoriteQueriesToStorage回写存储见 QueryHistory.tsx。用例 4绝对时间范围字段Absolute time range fields测试步骤打开Time range controls时间范围控件修改From或Until中的任意一个时间值点击Apply应用。预期结果修改其中一个字段时另一个字段的值不会随之改变两个字段彼此独立。源码印证该用例防止的是联动式日期选择器常出现的副作用——修改起始时间却意外改写了截止时间。vmui 的绝对时间范围输入由 app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector 系列组件实现From起始与Until截止各自维护独立的时间输入值点击Apply后通过SET_PERIODaction 一次性提交完整的TimePeriod包含start、end、step三元组。reducer 在SET_PERIOD分支中仅根据提交的 to/from 计算时长与区间不会反向回写任一字段因此两个输入框在修改过程中保持互不干扰见 reducer.ts。用例 5删除查询后的自动更新Auto update after query delete测试步骤添加多条查询Add multiple query执行这些查询删除其中一条查询。预期结果删除查询后图表会自动更新无需手动再次执行。源码印证vmui 支持最多MAX_QUERY_FIELDS 10条并行查询。查询状态表达式列表保存在 app/vmui/packages/vmui/src/state/query/reducer.ts 的query: string[]数组中。删除一条查询会派发SET_QUERYaction 更新该数组进而使useFetchQuery中fetchUrl的useMemo重新计算其依赖项包含query数组见 useFetchQuery.ts随后useEffect检测到fetchUrl变化即自动重新发起请求。这就是删除查询 → 图表自动更新的完整链路同时throttledFetchData的 300ms 防抖与旧请求 abort 机制保证了快速连续操作下的稳定性。用例 6vmui 自有 URL 参数解析Query URL params测试步骤在浏览器打开带如下查询参数的 vmui 页面示例中为两个查询面板 g0 与 g1?g0.range_input1dg0.end_input2022-10-26T14%3A00%3A00g0.step_input180g0.relative_timenoneg0.tabchartg0.expr1g1.range_input1dg1.end_input2022-10-26T14%3A00%3A00g1.step_input180g1.relative_timenoneg1.tabchartg1.expr2#/预期结果执行两条查询参数为query1与2start1666706400end1666792800step取自Step value字段取决于屏幕宽度页面展示两条查询1和2时间范围为2022-10-25 16:00:00至2022-10-26 16:00:00按 UTC2 时区换算展示Table标签页。源码印证URL 参数解析集中在 app/vmui/packages/vmui/src/utils/query-string.tsgetQueryStringValue使用qs库解析window.location.hash.split(?)[1]即参数存放在 URL 的 hash 片段中#/路由之前的?...部分getQueryArray通过正则/g\d\.expr/g统计查询面板数量上限截断为MAX_QUERY_FIELDS并为每个面板读取g{i}.expr表达式见 query-string.ts。时间状态初始化时同样读取 URLgetInitialTimeState会取g0.range_input作为默认时长、g0.end_input作为默认结束时间、g0.relative_time作为相对时间标识见 reducer.ts。由此g0.range_input1d→ 时长 1 天g0.end_input2022-10-26T14:00:00UTC→ 结束点对应1666792800秒时间戳起点1666706400即一天前文档标注的UTC2为撰写用例时的本地时区换算结果实际展示值取决于测试机器所在时区g0.tabchart指示默认标签页但该用例中参数仅设置了range_input与expr而未设置g0.tabtable最终预期却要求展示Table标签——测试时需注意tab参数的取值约定用例原始 URL 中 g0.tabchart 与预期Display tab Table存在出入这正体现了该用例对URL 驱动 UI 状态行为的回归验证意图实际以代码中tab参数映射为准。step 参数则体现了 vmui 的自适应步长设计当g0.step_input未命中默认值时useFetchQuery中defaultStep通过getStepFromDuration(end - start, isHistogramState, displayType)依据时间跨度与图表类型自动推算见 useFetchQuery.ts这正是预期结果中step 取决于屏幕宽度的技术来源。用例 7Prometheus 兼容 URL 参数Prometheus query URL params测试步骤在浏览器打开带以下参数的页面两条 Prometheus 风格查询?g0.exprnode_arp_entriesg0.tab1g0.stacked0g0.range_input30mg0.end_input2021-09-11%2000%3A00%3A00g0.moment_input2021-09-11%2000%3A00%3A00g0.step_input6g1.exprnode_cpu_guest_seconds_totalg1.tab1g1.stacked0g1.range_input30mg1.end_input2022-12-01%2014%3A00%3A00g1.moment_input2022-12-01%2014%3A00%3A00g1.step_input6预期结果展示两条查询node_arp_entries与node_cpu_guest_seconds_total时间范围从2021-09-11 01:30:00到2021-09-11 02:00:00按 UTC2 时区换算展示Table标签页。源码印证本用例与用例 6 共享同一套 URL 解析机制query-string.ts区别在于表达式为真实的指标名node_arp_entries、node_cpu_guest_seconds_total验证 URL 可承载任意合法 PromQL/MetricsQL 表达式额外携带g0.stacked0、g0.moment_input等参数其中moment_input对应查询时刻moment输入stacked控制图表是否堆叠进一步验证了UI 状态与 URL 双向同步的完整性range_input30m与end_input2021-09-11 00:00:00组合出 30 分钟窗口换算后即为预期的 01:30–02:00 区间。这套参数的同步写入逻辑在 app/vmui/packages/vmui/src/hooks/useSearchParamsFromObject.ts 中实现通过URLSearchParams对比前后参数差异仅在真正变化时才调用setSearchParams更新地址栏 hashreplace: !hadParams保证首次加载不产生新的历史记录见 useSearchParamsFromObject.ts。这意味着用户在界面上修改查询、时间、标签页后URL 会实时反映当前状态反过来通过 URL 分享或书签即可精确还原同一查询场景——这是 vmui 支持可分享查询的基础能力。用例矩阵速查表用例核心交互关键预期对应源码1. 强制执行查询Execute query / Refresh dashboard / Enter三种途径均触发新请求并刷新数据useFetchQuery.ts2. 带自动刷新的时间范围设置绝对时间 开关/调整自动刷新时间范围保持不变state/time/reducer.ts3. 查询历史依次执行 CtrlArrowUp/Down按执行顺序前后切换历史components/QueryHistory/utils.ts4. 绝对时间范围字段修改 From / Until 任一字段另一字段不被联动修改TimeSelector5. 删除查询后自动更新多查询删除其一图表自动重新渲染state/query/reducer.ts useFetchQuery.ts6. vmui 自有 URL 参数携带 g0/g1 参数的 URL 直达双查询、时间戳与 Step 正确解析utils/query-string.ts7. Prometheus 兼容 URL 参数携带 Prometheus 风格参数的 URL 直达双查询、时区换算后的时间范围正确hooks/useSearchParamsFromObject.ts执行测试时的注意事项时区换算用例 6、7 中标注的时间均为UTC2时区下的换算结果2022-10-25 16:00:00、2021-09-11 01:30:00等实际断言时应以测试环境时区重新换算时间戳1666706400/1666792800才是稳定不变的服务端事实Step 值当 URL 未显式指定 step 时vmui 依据时间跨度与图表类型自动推算因此同一 URL 在不同屏幕宽度下渲染出的 step 可能不同验证时勿将固定值作为硬性断言请求可观测性开启浏览器 DevTools 的 Network 面板可观察到用例 1 中三次操作对应的/api/v1/query_range请求若启用了查询追踪trace响应中还会附带 Trace 数据可在Trace页面进一步查看服务依赖vmui 前端默认请求自身所在服务serverUrl 可配置执行用例前需确保已有一个 VictoriaMetrics 实例在http://localhost:3000可访问否则查询会返回Please check your serverURL settings and confirm server availability类错误见 useFetchQuery.ts。以上 7 组用例共同覆盖了 vmui 查询面板最核心的交互闭环查询触发 → 时间范围 → 历史切换 → 多查询管理 → URL 状态直达。测试人员可直接按 TESTCASES.md 的步骤逐条执行前端开发者则可以结合本文给出的源码映射在出现回归时快速定位到对应的状态 reducer、查询 Hook 或 URL 工具模块。【免费下载链接】VictoriaMetricsVictoriaMetrics: fast, cost-effective monitoring solution and time series database项目地址: https://gitcode.com/GitHub_Trending/vi/VictoriaMetrics创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
VictoriaMetrics vmui 测试用例详解：查询执行、时间范围与 URL 参数的端到端验证指南
VictoriaMetrics vmui 测试用例详解查询执行、时间范围与 URL 参数的端到端验证指南【免费下载链接】VictoriaMetricsVictoriaMetrics: fast, cost-effective monitoring solution and time series database项目地址: https://gitcode.com/GitHub_Trending/vi/VictoriaMetricsVictoriaMetrics 的 Web UI 组件 vmuiVictoriaMetrics UI是面向指标查询、图表绘制与可视化分析的前端界面内置了查询编辑器、时间范围控制器、自动刷新、查询历史与可分享的 URL 参数等核心能力。本文以仓库中 app/vmui/packages/vmui/TESTCASES.md 收录的手工测试用例为骨架逐条拆解强制执行查询带自动刷新的时间范围查询历史绝对时间范围字段删除查询后的自动更新与URL 参数解析等场景的步骤与预期结果并结合 vmui 前端源码查询执行、状态管理、URL 序列化等实现说明其底层行为帮助测试人员、前端开发者与 vmui 使用者在本地复现、验证并深入理解这些交互逻辑。测试前置环境如何在本地运行 vmuiTESTCASES.md 中所有用例都基于本地开发服务器http://localhost:3000展开。vmui 前端位于 app/vmui/packages/vmui其package.json中定义了以下常用脚本{ name: vmui, version: 0.1.0, private: true, type: module, scripts: { prestart: npm run copy-metricsql-docs, start: vite, build: vite build, lint: eslint --format stylish src/**/*.{ts,tsx}, test: vitest run, typecheck: tsc --noEmit } }在app/vmui/packages/vmui目录下依次执行依赖安装与启动命令即可开启开发环境npm install npm run start浏览器访问http://localhost:3000后即可按本文用例逐项验证。需要注意的是prestart会先把仓库根目录 docs/MetricsQL.md 复制到src/assets/MetricsQL.md供查询编辑器内联展示 MetricsQL 函数文档使用开发模式下页面改动会热更新编辑源码后无需手动重启。vmui 前端基于 PreactReact 兼容层 Vite 构建图表渲染使用 uPlot时间处理使用 dayjsURL 状态同步使用qs库见 app/vmui/packages/vmui/package.json。所有用例均以执行步骤 预期结果的形式组织下面逐一展开。用例 1强制执行查询Force execution of a queries测试步骤点击Execute query按钮点击Refresh dashboard图标在查询输入框中按Enter键。预期结果以上每一步都会向服务端发送一次查询请求并渲染出新的数据。源码印证该用例验证的是 vmui 中查询触发途径的完备性——三种交互入口都必须可靠地触发请求。查询请求的实际发送逻辑位于 app/vmui/packages/vmui/src/hooks/useFetchQuery.ts请求 URL 由fetchUrl的useMemo生成图表Chart模式下调用getQueryRangeUrl构造GET /api/v1/query_range请求非图表模式Table/Code则调用getQueryUrl构造/api/v1/query即时查询请求见 app/vmui/packages/vmui/src/api/query-range.ts请求通过throttledFetchData debounce(fetchData, 300)做 300ms 防抖合并短时间内多次触发只发送一次有效请求请求以POST方式提交method: POSTbody 为 URLSearchParams并受AbortController管理当新请求到来时会 abort 队列中尚未完成的旧请求见 useFetchQuery.ts保证界面始终呈现最新一次查询的结果。因此点击按钮、点击刷新图标、在查询框按回车三种方式最终都会走入同一条fetchData链路并重新拉取数据。若勾选了nocachenocache1或开启查询追踪trace1生成的请求 URL 还会附加对应参数详见 query-range.ts。用例 2带自动刷新的时间范围Time Range with auto refresh测试步骤设置绝对时间范围Absolute time range启用自动刷新Auto refresh修改自动刷新间隔Delay auto refresh禁用自动刷新Disable auto refresh。预期结果整个过程中已设置的时间范围保持不变。源码印证该用例的核心断言是自动刷新只影响重新查询不应篡改用户手工选定的时间范围。时间状态由 app/vmui/packages/vmui/src/state/time/reducer.ts 管理其中与刷新相关的是两个 actionRUN_QUERY根据当前相对时间relativeTime与已选时长duration重新计算 periodRUN_QUERY_TO_NOW以当前时刻为结束点、保持原时长计算新的 periodgetTimeperiodForDuration(state.duration)。当用户设置了绝对时间范围后reducer 会将其归一化为 duration end 的组合SET_PERIOD分支中通过getDurationFromPeriod计算时长、getTimeperiodForDuration重建 period并同时把relativeTime置为none。这意味着后续任何刷新到当前时刻的触发都以保持原时长与结束点为前提不会把用户选定的绝对区间改写成别的区间——这正是本用例预期结果的实现来源。测试时若发现绝对时间范围在开启/调整/关闭自动刷新后被改变即可判定为缺陷。用例 3查询历史Query history测试步骤依次执行查询1、2、3在查询输入框聚焦状态下按Ctrl ArrowUp/Ctrl ArrowDown快捷键切换历史。预期结果查询值按执行顺序切换保留执行顺序Ctrl ArrowUp切换到上一条prevCtrl ArrowDown切换到下一条next。源码印证查询历史由 app/vmui/packages/vmui/src/components/QueryHistory/utils.ts 中的getUpdatedHistory维护每次执行新查询时把值追加到values数组末尾并更新index游标历史长度受MAX_QUERIES_HISTORY限制超出时从头部shift()丢弃最旧的记录见 utils.ts。相关上限常量定义在 app/vmui/packages/vmui/src/constants/graph.tsexport const MAX_QUERY_FIELDS 10; export const MAX_QUERIES_HISTORY 25;即单个查询框最多保留最近 25 条历史。Ctrl ArrowUp/Ctrl ArrowDown本质上是对index游标的前后移动向上取前一条index-1向下取后一条index1从而严格保持按执行顺序浏览。此外历史还会持久化到浏览器 localStoragekey 为METRICS_QUERY_HISTORY在 QueryHistory.tsx 的弹窗中分为Session history会话历史、Saved history已保存历史、Favorite queries收藏查询三个页签展示收藏变更会通过setFavoriteQueriesToStorage回写存储见 QueryHistory.tsx。用例 4绝对时间范围字段Absolute time range fields测试步骤打开Time range controls时间范围控件修改From或Until中的任意一个时间值点击Apply应用。预期结果修改其中一个字段时另一个字段的值不会随之改变两个字段彼此独立。源码印证该用例防止的是联动式日期选择器常出现的副作用——修改起始时间却意外改写了截止时间。vmui 的绝对时间范围输入由 app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector 系列组件实现From起始与Until截止各自维护独立的时间输入值点击Apply后通过SET_PERIODaction 一次性提交完整的TimePeriod包含start、end、step三元组。reducer 在SET_PERIOD分支中仅根据提交的 to/from 计算时长与区间不会反向回写任一字段因此两个输入框在修改过程中保持互不干扰见 reducer.ts。用例 5删除查询后的自动更新Auto update after query delete测试步骤添加多条查询Add multiple query执行这些查询删除其中一条查询。预期结果删除查询后图表会自动更新无需手动再次执行。源码印证vmui 支持最多MAX_QUERY_FIELDS 10条并行查询。查询状态表达式列表保存在 app/vmui/packages/vmui/src/state/query/reducer.ts 的query: string[]数组中。删除一条查询会派发SET_QUERYaction 更新该数组进而使useFetchQuery中fetchUrl的useMemo重新计算其依赖项包含query数组见 useFetchQuery.ts随后useEffect检测到fetchUrl变化即自动重新发起请求。这就是删除查询 → 图表自动更新的完整链路同时throttledFetchData的 300ms 防抖与旧请求 abort 机制保证了快速连续操作下的稳定性。用例 6vmui 自有 URL 参数解析Query URL params测试步骤在浏览器打开带如下查询参数的 vmui 页面示例中为两个查询面板 g0 与 g1?g0.range_input1dg0.end_input2022-10-26T14%3A00%3A00g0.step_input180g0.relative_timenoneg0.tabchartg0.expr1g1.range_input1dg1.end_input2022-10-26T14%3A00%3A00g1.step_input180g1.relative_timenoneg1.tabchartg1.expr2#/预期结果执行两条查询参数为query1与2start1666706400end1666792800step取自Step value字段取决于屏幕宽度页面展示两条查询1和2时间范围为2022-10-25 16:00:00至2022-10-26 16:00:00按 UTC2 时区换算展示Table标签页。源码印证URL 参数解析集中在 app/vmui/packages/vmui/src/utils/query-string.tsgetQueryStringValue使用qs库解析window.location.hash.split(?)[1]即参数存放在 URL 的 hash 片段中#/路由之前的?...部分getQueryArray通过正则/g\d\.expr/g统计查询面板数量上限截断为MAX_QUERY_FIELDS并为每个面板读取g{i}.expr表达式见 query-string.ts。时间状态初始化时同样读取 URLgetInitialTimeState会取g0.range_input作为默认时长、g0.end_input作为默认结束时间、g0.relative_time作为相对时间标识见 reducer.ts。由此g0.range_input1d→ 时长 1 天g0.end_input2022-10-26T14:00:00UTC→ 结束点对应1666792800秒时间戳起点1666706400即一天前文档标注的UTC2为撰写用例时的本地时区换算结果实际展示值取决于测试机器所在时区g0.tabchart指示默认标签页但该用例中参数仅设置了range_input与expr而未设置g0.tabtable最终预期却要求展示Table标签——测试时需注意tab参数的取值约定用例原始 URL 中 g0.tabchart 与预期Display tab Table存在出入这正体现了该用例对URL 驱动 UI 状态行为的回归验证意图实际以代码中tab参数映射为准。step 参数则体现了 vmui 的自适应步长设计当g0.step_input未命中默认值时useFetchQuery中defaultStep通过getStepFromDuration(end - start, isHistogramState, displayType)依据时间跨度与图表类型自动推算见 useFetchQuery.ts这正是预期结果中step 取决于屏幕宽度的技术来源。用例 7Prometheus 兼容 URL 参数Prometheus query URL params测试步骤在浏览器打开带以下参数的页面两条 Prometheus 风格查询?g0.exprnode_arp_entriesg0.tab1g0.stacked0g0.range_input30mg0.end_input2021-09-11%2000%3A00%3A00g0.moment_input2021-09-11%2000%3A00%3A00g0.step_input6g1.exprnode_cpu_guest_seconds_totalg1.tab1g1.stacked0g1.range_input30mg1.end_input2022-12-01%2014%3A00%3A00g1.moment_input2022-12-01%2014%3A00%3A00g1.step_input6预期结果展示两条查询node_arp_entries与node_cpu_guest_seconds_total时间范围从2021-09-11 01:30:00到2021-09-11 02:00:00按 UTC2 时区换算展示Table标签页。源码印证本用例与用例 6 共享同一套 URL 解析机制query-string.ts区别在于表达式为真实的指标名node_arp_entries、node_cpu_guest_seconds_total验证 URL 可承载任意合法 PromQL/MetricsQL 表达式额外携带g0.stacked0、g0.moment_input等参数其中moment_input对应查询时刻moment输入stacked控制图表是否堆叠进一步验证了UI 状态与 URL 双向同步的完整性range_input30m与end_input2021-09-11 00:00:00组合出 30 分钟窗口换算后即为预期的 01:30–02:00 区间。这套参数的同步写入逻辑在 app/vmui/packages/vmui/src/hooks/useSearchParamsFromObject.ts 中实现通过URLSearchParams对比前后参数差异仅在真正变化时才调用setSearchParams更新地址栏 hashreplace: !hadParams保证首次加载不产生新的历史记录见 useSearchParamsFromObject.ts。这意味着用户在界面上修改查询、时间、标签页后URL 会实时反映当前状态反过来通过 URL 分享或书签即可精确还原同一查询场景——这是 vmui 支持可分享查询的基础能力。用例矩阵速查表用例核心交互关键预期对应源码1. 强制执行查询Execute query / Refresh dashboard / Enter三种途径均触发新请求并刷新数据useFetchQuery.ts2. 带自动刷新的时间范围设置绝对时间 开关/调整自动刷新时间范围保持不变state/time/reducer.ts3. 查询历史依次执行 CtrlArrowUp/Down按执行顺序前后切换历史components/QueryHistory/utils.ts4. 绝对时间范围字段修改 From / Until 任一字段另一字段不被联动修改TimeSelector5. 删除查询后自动更新多查询删除其一图表自动重新渲染state/query/reducer.ts useFetchQuery.ts6. vmui 自有 URL 参数携带 g0/g1 参数的 URL 直达双查询、时间戳与 Step 正确解析utils/query-string.ts7. Prometheus 兼容 URL 参数携带 Prometheus 风格参数的 URL 直达双查询、时区换算后的时间范围正确hooks/useSearchParamsFromObject.ts执行测试时的注意事项时区换算用例 6、7 中标注的时间均为UTC2时区下的换算结果2022-10-25 16:00:00、2021-09-11 01:30:00等实际断言时应以测试环境时区重新换算时间戳1666706400/1666792800才是稳定不变的服务端事实Step 值当 URL 未显式指定 step 时vmui 依据时间跨度与图表类型自动推算因此同一 URL 在不同屏幕宽度下渲染出的 step 可能不同验证时勿将固定值作为硬性断言请求可观测性开启浏览器 DevTools 的 Network 面板可观察到用例 1 中三次操作对应的/api/v1/query_range请求若启用了查询追踪trace响应中还会附带 Trace 数据可在Trace页面进一步查看服务依赖vmui 前端默认请求自身所在服务serverUrl 可配置执行用例前需确保已有一个 VictoriaMetrics 实例在http://localhost:3000可访问否则查询会返回Please check your serverURL settings and confirm server availability类错误见 useFetchQuery.ts。以上 7 组用例共同覆盖了 vmui 查询面板最核心的交互闭环查询触发 → 时间范围 → 历史切换 → 多查询管理 → URL 状态直达。测试人员可直接按 TESTCASES.md 的步骤逐条执行前端开发者则可以结合本文给出的源码映射在出现回归时快速定位到对应的状态 reducer、查询 Hook 或 URL 工具模块。【免费下载链接】VictoriaMetricsVictoriaMetrics: fast, cost-effective monitoring solution and time series database项目地址: https://gitcode.com/GitHub_Trending/vi/VictoriaMetrics创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
