Skip to content

refactor: Add ChartContainer component with toolbar #1560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pulpdrew merged 5 commits into from
Jan 7, 2026
Merged

refactor: Add ChartContainer component with toolbar #1560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1dff08
refactor: Add ChartContainer component with toolbar
pulpdrew Jan 6, 2026
29f5a6a
feat: disable optimization indicator for alert threshold chart
pulpdrew Jan 7, 2026
e5f29b0
fix: Add keys to items in ChartContainer toolbars
pulpdrew Jan 7, 2026
4376e19
Merge remote-tracking branch 'origin/main' into drew/chart-container-…
pulpdrew Jan 7, 2026
378adc9
feat: Add ChartContainer to HeatmapChart
pulpdrew Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/olive-turkeys-look.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---

refactor: Add ChartContainer component with toolbar
228 changes: 94 additions & 134 deletions packages/app/src/ClickhousePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { DisplayType } from '@hyperdx/common-utils/dist/types';
import {
Box,
Button,
Flex,
Grid,
Group,
SegmentedControl,
Expand Down Expand Up @@ -59,11 +58,9 @@ function InfrastructureTab({
return (
<Grid mt="md">
<Grid.Col span={6}>
<ChartBox style={{ minHeight: 400 }}>
<Text size="sm" mb="sm">
CPU Usage (Cores)
</Text>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title="CPU Usage (Cores)"
config={{
select: [
{
Expand All @@ -80,17 +77,16 @@ function InfrastructureTab({
connection,
dateRange: searchedTimeRange,
timestampValueExpression: 'event_time',
displayType: DisplayType.Line,
}}
onTimeRangeSelect={onTimeRangeSelect}
/>
</ChartBox>
</Grid.Col>
<Grid.Col span={6}>
<ChartBox style={{ minHeight: 400 }}>
<Text size="sm" mb="sm">
Memory Usage
</Text>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title="Memory Usage"
config={{
select: [
{
Expand All @@ -106,17 +102,16 @@ function InfrastructureTab({
connection,
dateRange: searchedTimeRange,
timestampValueExpression: 'event_time',
displayType: DisplayType.Line,
}}
onTimeRangeSelect={onTimeRangeSelect}
/>
</ChartBox>
</Grid.Col>
<Grid.Col span={6}>
<ChartBox style={{ minHeight: 400 }}>
<Text size="sm" mb="sm">
Disk
</Text>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title="Disk"
config={{
select: [
{
Expand All @@ -140,17 +135,16 @@ function InfrastructureTab({
connection,
dateRange: searchedTimeRange,
timestampValueExpression: 'event_time',
displayType: DisplayType.Line,
}}
onTimeRangeSelect={onTimeRangeSelect}
/>
</ChartBox>
</Grid.Col>
<Grid.Col span={6}>
<ChartBox style={{ minHeight: 400 }}>
<Text size="sm" mb="sm">
S3 Requests
</Text>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title="S3 Requests"
config={{
select: [
{
Expand Down Expand Up @@ -192,20 +186,25 @@ function InfrastructureTab({
where: '',
dateRange: searchedTimeRange,
timestampValueExpression: 'event_time',
displayType: DisplayType.Line,
}}
onTimeRangeSelect={onTimeRangeSelect}
/>
</ChartBox>
</Grid.Col>
<Grid.Col span={6}>
<ChartBox style={{ minHeight: 400 }}>
<Text size="sm" mb="xs">
Network
</Text>
<Text size="xs" mb="sm">
Network activity for the entire machine, not only Clickhouse.
</Text>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title={
<>
<Text size="sm" mb="xs">
Network
</Text>
<Text size="xs" mb="sm">
Network activity for the entire machine, not only Clickhouse.
</Text>
</>
}
config={{
select: [
{
Expand All @@ -223,6 +222,7 @@ function InfrastructureTab({
connection,
dateRange: searchedTimeRange,
timestampValueExpression: 'event_time',
displayType: DisplayType.Line,
}}
onTimeRangeSelect={onTimeRangeSelect}
/>
Expand All @@ -248,32 +248,34 @@ function InsertsTab({
return (
<Grid mt="md">
<Grid.Col span={12}>
<ChartBox style={{ minHeight: 400 }}>
<Group justify="space-between" align="center" mb="sm">
<Text size="sm">
Insert{' '}
{insertsBy === 'queries'
? 'Queries'
: insertsBy === 'rows'
? 'Rows'
: 'Bytes'}{' '}
Per Table
</Text>
<SegmentedControl
size="xs"
value={insertsBy ?? 'queries'}
onChange={value => {
// @ts-ignore
setInsertsBy(value);
}}
data={[
{ label: 'Queries', value: 'queries' },
{ label: 'Rows', value: 'rows' },
{ label: 'Bytes', value: 'bytes' },
]}
/>
</Group>
<ChartBox style={{ height: 400 }}>
<DBTimeChart
title={
<Text size="sm">
Insert{' '}
{insertsBy === 'queries'
? 'Queries'
: insertsBy === 'rows'
? 'Rows'
: 'Bytes'}{' '}
Per Table
</Text>
}
toolbarPrefix={[
<SegmentedControl
size="xs"
value={insertsBy ?? 'queries'}
onChange={value => {
// @ts-ignore
setInsertsBy(value);
}}
data={[
{ label: 'Queries', value: 'queries' },
{ label: 'Rows', value: 'rows' },
{ label: 'Bytes', value: 'bytes' },
]}
/>,
]}
config={{
select:
insertsBy === 'queries'
Expand Down Expand Up @@ -306,6 +308,7 @@ function InsertsTab({
where: '',
timestampValueExpression: 'event_time',
dateRange: searchedTimeRange,
displayType: DisplayType.Line,
filters: [
{
type: 'sql_ast',
Expand All @@ -322,11 +325,9 @@ function InsertsTab({
</ChartBox>
</Grid.Col>
<Grid.Col span={12}>
<ChartBox style={{ minHeight: 200, height: 200 }}>
<Group justify="space-between" align="center" mb="sm">
<Text size="sm">Max Active Parts per Partition</Text>
</Group>
<ChartBox style={{ height: 200 }}>
<DBTimeChart
title="Max Active Parts per Partition"
config={{
select: [
{
Expand Down Expand Up @@ -354,15 +355,19 @@ function InsertsTab({
</Grid.Col>
<Grid.Col span={12}>
<ChartBox style={{ height: 400 }}>
<Text size="sm" mb="sm">
Active Parts Per Partition
</Text>
<Text size="xs" mb="md">
Recommended to stay under 300, ClickHouse will automatically
throttle inserts after 1,000 parts per partition and stop inserts at
3,000 parts per partition.
</Text>
<DBTableChart
title={
<>
<Text size="sm" mb="sm">
Active Parts Per Partition
</Text>
<Text size="xs" mb="md">
Recommended to stay under 300, ClickHouse will automatically
throttle inserts after 1,000 parts per partition and stop
inserts at 3,000 parts per partition.
</Text>
</>
}
config={{
dateRange: searchedTimeRange,
select: [
Expand Down Expand Up @@ -496,6 +501,29 @@ function ClickhousePage() {
];
}, [latencyFilter]);

const heatmapToolbarItems = useMemo(() => {
if (latencyFilter.latencyMin != null || latencyFilter.latencyMax != null) {
return [
<Button
key="heatmap-reset-latency-filter"
size="xs"
variant="subtle"
onClick={() => {
// Clears the min/max latency filters that are used to filter the query results
setLatencyFilter({
latencyMin: null,
latencyMax: null,
});
// Updates the URL state and triggers a new data fetch
onSearch(DEFAULT_INTERVAL);
}}
>
Reset
</Button>,
];
}
}, [latencyFilter, onSearch, setLatencyFilter]);

return (
<Box p="sm" data-testid="clickhouse-dashboard-page">
<OnboardingModal requireSource={false} />
Expand Down Expand Up @@ -554,75 +582,11 @@ function ClickhousePage() {
</Tabs.List>
<Tabs.Panel value="selects">
<Grid mt="md">
{/* <Grid.Col span={12}>
<ChartBox style={{ minHeight: 300, height: 300 }}>
<Group justify="space-between" align="center" mb="md">
<Text size="sm" ms="xs">
Select P95 Query Latency
</Text>
<SegmentedControl
size="xs"
data={[
{ label: 'Latency', value: 'latency' },
{ label: 'Throughput', value: 'throughput' },
{ label: 'Errors', value: 'errors' },
]}
/>
</Group>
<DBTimeChart
config={{
select: [
{
aggFn: 'quantile',
level: 0.95,
valueExpression: 'query_duration_ms',
aggCondition: '',
alias: `"Query P95 (ms)"`,
},
],
displayType: DisplayType.Line,
dateRange: searchedTimeRange,
connection,
timestampValueExpression: 'event_time',
from,
granularity: 'auto',
where: `query_kind='Select' AND (
type='ExceptionWhileProcessing' OR type='QueryFinish'
)`,
filters,
}}
onTimeRangeSelect={(start, end) => {
onTimeRangeSelect(start, end);
}}
/>
</ChartBox>
</Grid.Col> */}
<Grid.Col span={12}>
<ChartBox style={{ height: 250 }}>
<Flex justify="space-between" align="center">
<Text size="sm" ms="xs">
Query Latency
</Text>
{latencyFilter.latencyMin != null ||
latencyFilter.latencyMax != null ? (
<Button
size="xs"
variant="subtle"
onClick={() => {
// Clears the min/max latency filters that are used to filter the query results
setLatencyFilter({
latencyMin: null,
latencyMax: null,
});
// Updates the URL state and triggers a new data fetch
onSearch(DEFAULT_INTERVAL);
}}
>
Reset
</Button>
) : null}
</Flex>
<DBHeatmapChart
title="Query Latency"
toolbarSuffix={heatmapToolbarItems}
config={{
displayType: DisplayType.Heatmap,
select: [
Expand Down Expand Up @@ -656,11 +620,8 @@ function ClickhousePage() {
</Grid.Col>
<Grid.Col span={12}>
<ChartBox style={{ height: 400 }}>
<Text size="sm" mb="md">
Query Count by Table
</Text>

<DBTimeChart
title="Query Count by Table"
config={{
select: [
{
Expand Down Expand Up @@ -688,6 +649,7 @@ function ClickhousePage() {
)`,
filters,
limit: { limit: 1000 }, // TODO: Cut off more intelligently
displayType: DisplayType.Line,
}}
onTimeRangeSelect={(start, end) => {
onTimeRangeSelect(start, end);
Expand All @@ -697,10 +659,8 @@ function ClickhousePage() {
</Grid.Col>
<Grid.Col span={12}>
<ChartBox style={{ height: 400 }}>
<Text size="sm" mb="md">
Most Time Consuming Query Patterns
</Text>
<DBTableChart
title="Most Time Consuming Query Patterns"
config={{
select: [
{
Expand Down
Loading
Loading