c59c18de17 feat: add server online history tab with date-grouped chip wall (#97)
* feat(server-detail): add online history tab

Render per-server online periods from GET /api/v1/server/:id/online-history:
summary card (current status, online rate, total in window, last active),
daily online-time bars, and the raw period list. Window selector offers
1d/7d/30d and locks options beyond the server's max_days; guests hitting
the 1d cap see a login hint. i18n keys added for all locales (zh-CN/zh-TW
translated, others fall back to English for Weblate).

* fix(online-history): keep selector pills above the sliding indicator

The active-indicator overlay sits at z-10 and intercepted clicks on the
day pills; wrap pills at z-20 like the existing PeriodSelector.

* feat(online-history): render daily online as 24h timeline with hover tooltips

每日在线卡片从整日占比进度条改为 0:00–24:00 整轴时间条:
每个在线时段按当日时刻定位为高亮分段,hover 显示起止时间与时长;
进行中时段以亮色高亮。卡片顶部新增共享刻度(0:00 / 12:00 / 24:00)。

* feat(online-history): regroup periods by day as expandable chip wall

Rework the Online tab per the chip-wall design: periods are grouped by
panel-timezone day with per-day totals, defaulting to the latest day with
"Expand more" revealing up to ten more groups per click, plus an
Online/Offline switch that derives offline chips as the window complement.

- respond to the backend panel timezone (timezone/tz_offset): dayjs 1.11
  .tz(input, zone) ignores explicit offsets, so offset-bearing timestamps
  are parsed first and converted afterwards; naive date strings keep the
  zone-parse path (panelDay)
- guests falling back automatically: a rejected days>1 request locks 7d/30d
  and retries at 1d instead of surfacing only a login prompt
- fix day-selector indicator landing on the wrong pill: useActiveIndicator
  refs are stored by index, pass the map index not the day value
- disable Node experimental webstorage in vitest workers: Node >=25 ships a
  broken global localStorage that shadows the jsdom one
- 14 locales: tabSwitch.Online + serverOnlineHistory.*

* feat(online-history): boxed summary stats with desktop/mobile layouts

* fix(online-history): align offline gaps, DST coordinates and ongoing chips

- extract pure timeline/grouping helpers into src/lib/online-history.ts
- clamp offline complements to day and window boundaries, so a gap can no
  longer run into a later day's first online session
- use wall-clock coordinates and true next-midnight boundaries on DST days
- label only the segment ending at the live session end as Ongoing
- keep group totals equal to the visible chips for cross-day sessions
- keep period chips on one line and render next-midnight as 24:00
- add regression tests for multi-day offline gaps, window_start/window_end,
  spring-forward/fall-back geometry and ongoing clipping

* style(online-history): lighten summary metrics and shorten rate bar

* feat(online-history): refine UI and unify daily history rendering

---------

Co-authored-by: Sam5440 <Sam5440@users.noreply.github.com>
Co-authored-by: hamster1963 <1410514192@qq.com>
2026-10-22 12:01:21 +08:00
2025-12-28 18:05:02 +08:00
2025-12-28 18:05:02 +08:00
2025-12-28 18:05:02 +08:00
2024-12-04 11:11:21 +08:00
2025-12-28 18:05:02 +08:00
2025-12-28 18:05:02 +08:00
2025-12-28 18:05:02 +08:00

Caution

有关项目问题与意见请移步https://github.com/hamster1963/nezha-dash 交流

Note

此项目为 nezha-dash 的官方实现,作为哪吒监控的默认前端,功能上可能与 nezha-dash 有所不同。 https://github.com/hamster1963/nezha-dash

本地调整 UI

使用 Node.js >= 22、pnpm >= 11,在项目目录运行:

pnpm install
MOCK_NEZHA_COUNT=6 pnpm dev:mock

该命令同时启动本地 mock API(8008 端口)和 Vite,使用仓库 .cert 下的 HTTPS 证书。打开终端显示的地址(通常为 https://localhost:5173);若浏览器提示本地证书不受信任,允许访问本地开发地址。

进入 /server/1,点击「在线 / Online」标签。在线历史支持 1/7/30 天切换、时间轴提示、在线/离线时段和「展开更多」。数据按当前时间生成,使用 Asia/Shanghai 时区;查询窗口是最近 N × 24 小时,因此每日列表通常会包含首尾两个不完整日期。

详情页 预览场景
/server/1、/server/6 正常在线,包含短暂掉线和跨日会话
/server/2 持续在线,在线率 100%
/server/3 当前离线,包含进行中的离线时段
/server/4 无在线历史,在线率 0%,最后活跃显示 N/A
/server/5 频繁掉线,用于查看密集时段标签和换行

主要样式位于 src/components/ServerDetailOnlineHistory.tsx 的 className,保存后自动热更新;桌面与手机布局的切换点是 768px。修改 mock 脚本后需重启 pnpm dev:mock,按 Ctrl+C 可停止前端和 mock 服务。

在线历史 mock 允许查询最多 30 天数据,无需真实后端或登录。不要同时运行占用 8008 端口的后端;省略 MOCK_NEZHA_COUNT 时仍使用原有的 3000 节点规模。

S
Description
No description provided
Readme Apache-2.0
2.8 MiB
0 Stars 1 Watchers 0 Forks
Languages
TypeScript 98.3%
JavaScript 0.9%
CSS 0.6%
HTML 0.2%