[HDX-4769] feat(cli): terminal charting — dashboards TUI page and hdx chart command#2629
[HDX-4769] feat(cli): terminal charting — dashboards TUI page and hdx chart command#2629wrn14897 wants to merge 1 commit into
Conversation
…command Render dashboard tiles and ad-hoc queries as ANSI charts in the terminal, using the same renderChartConfig SQL pipeline as the web dashboards. - TUI Dashboards page (d key): picker, tile navigation, fullscreen, time-range editing, refresh; viewport-windowed tile fetching - hdx chart command for CLI/agent troubleshooting with three modes: saved tiles (-d/-t), ad-hoc builder (-s + --agg/--value/--where/ --group-by/--series), and ad-hoc raw SQL (--sql with $__timeFilter / $__timeInterval macros) - Display types: line, stacked bar, number, table, bar, pie, markdown - Time ranges: --since durations plus --from/--to (ISO, date-only, now-1h) - Agent-friendly output: --json rows+meta, ANSI colors auto-stripped when piping (--color auto|always|never), actionable errors with exit 1 - Silence @clickhouse/client logger (Ink patchConsole re-enabled it, spewing abort stacks over the TUI) and memoize client/metadata in App so re-renders don't abort in-flight tile queries - Align pre-commit knip with CI (exclude namespace-only findings that the CI workflow does not count) so clean commits are not blocked
🦋 Changeset detectedLatest commit: c221319 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
github-actions
Bot
added
the
review/tier-4
🔴 Tier 4 — CriticalTouches auth, data models, config, tasks, OTel pipeline, ClickHouse, or CI/CD. Why this tier:
Review process: Deep review from a domain expert. Synchronous walkthrough may be required. Stats
|
Greptile SummaryThis PR adds terminal charting support to the CLI. The main changes are:
Confidence Score: 4/5The charting path needs fixes for nullable numeric values and timestamp-field parity before merging.
packages/cli/src/shared/chartData.ts; packages/cli/src/shared/tileConfig.ts Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[hdx chart or DashboardPage] --> B[SavedChartConfig]
B --> C[fetchTileData]
C --> D[resolveTileConfig]
D --> E[convertTileConfigForQuery]
E --> F[queryChartConfig]
F --> G[chartData shaping]
G --> H[tileRender]
H --> I[ANSI chart output]
H --> J[JSON output]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[hdx chart or DashboardPage] --> B[SavedChartConfig]
B --> C[fetchTileData]
C --> D[resolveTileConfig]
D --> E[convertTileConfigForQuery]
E --> F[queryChartConfig]
F --> G[chartData shaping]
G --> H[tileRender]
H --> I[ANSI chart output]
H --> J[JSON output]
Reviews (1): Last reviewed commit: "feat(cli): add terminal charting — dashb..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const value = | ||
| typeof rawValue === 'number' | ||
| ? rawValue | ||
| : Number.parseFloat(String(rawValue)); | ||
|
|
||
| tsBucket[keyName] = value; |
There was a problem hiding this comment.
When a chart query returns NULL for a numeric cell, this parses it as NaN and stores it in the time bucket. The line renderer later turns non-finite points into 0, so nullable averages, quantiles, or raw SQL series can show a real drop to zero instead of missing data.
| connection: source.connection, | ||
| dateRange, | ||
| granularity, | ||
| timestampValueExpression: source.timestampValueExpression ?? '', |
There was a problem hiding this comment.
Builder charts resolve their query timestamp from timestampValueExpression, while the CLI guide says web-aligned source mapping should use displayedTimestampValueExpression for timestamp fields. On sources where those differ, the same dashboard tile or ad-hoc chart can bucket and filter on the lower-precision timestamp, producing results that do not match the web dashboard.
Context Used: packages/cli/AGENTS.md (source)
Deep ReviewTerminal charting for the CLI: new ✅ No critical issues found. 🟡 P2 — recommended
🔵 P3 nitpicks (3)
Reviewers (12): correctness, testing, maintainability, project-standards, agent-native, learnings-researcher, security, performance, reliability, adversarial, kieran-typescript, julik-frontend-races. Testing gaps:
|
E2E Test Results✅ All tests passed • 235 passed • 3 skipped • 1476s
Tests ran across 4 shards in parallel. |
wrn14897
changed the title
1 participant
Linear: HDX-4769
Why
When troubleshooting from the terminal — especially agent-driven investigations — there was no way to see the data. The CLI could search and tail events, but visualizing a metric ("did errors spike at deploy time?", "what does p95 latency look like?") required switching to the web UI. This PR brings dashboard tiles and ad-hoc charts into the terminal so an investigation loop (chart → spot the anomaly → narrow with
--where/hdx query/hdx stream) can happen entirely in the CLI.What
hdx chart— terminal charts for CLI/agent troubleshootingThree modes on one command, all flowing through the same
renderChartConfigSQL pipeline the web dashboards use (viaqueryChartConfiginherited from common-utils), so SQL and results match the web UI exactly — including metric-source query splitting/joining:--since 1h, or--from/--toaccepting ISO 8601, date-only, and relative (now-24h) — same parser as the TUI time-range editor--color auto|always|never),--jsonemits raw rows + column metadata, actionable errors with exit 1, help text written as agent documentationTUI Dashboards page (
dkey)Dashboard picker → tiles in grid order with j/k navigation, Enter for fullscreen,
ttime-range editor,rrefresh. Only tiles scrolled into view are mounted/queried (mirrors the web's viewport-gated fetching).Architecture
Chart renderers are pure functions (
data + dimensions → ANSI string) shared by the Ink TUI and the stdout command. Ports from the web app carry@sourcecomments and follow the existing CLI web-alignment convention:shared/tileConfig.tsDBDashboardPageTile config resolution +ChartUtilstransformsshared/tileRender.tsrenderChartContentdispatchshared/chartData.tsformatResponseForTimeChart/ categorical shapingshared/formatNumber.tsformatNumber(numbro) + number-format resolutionFixes along the way
@clickhouse/clientinternal logger (ClickHouseLogLevel.OFF): Ink'spatchConsolere-enabled console output thatsilenceLogshad suppressed, spewing abort stack traces over the TUI whenever an in-flight tile query was legitimately cancelledAppso re-renders don't churn data-fetch effectsmainTesting
tileConfigresolution incl. metric/raw-SQL/trace sampling paths, granularity parity with the web's 80-bucket cap, ad-hoc flag → config building, ANSI stripping)--json, all three color modes, error paths, and the TUI page via ptytsc --noEmit,yarn ci:lint, changeset includedNew deps (CLI devDependencies, bundled):
asciichart(zero-dep line plots),numbro(number formatting parity with the web).Demo