Skip to content

Commit f9d9c14

Browse files
pulpdrewpulpdrew
committed
refactor: Add ChartContainer component with toolbar
1 parent e9650e8 commit f9d9c14

22 files changed

Lines changed: 891 additions & 745 deletions

‎packages/app/src/ClickhousePage.tsx‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,9 @@ function InfrastructureTab({
5959
return (
6060
<Grid mt="md">
6161
<Grid.Col span={6}>
62-
<ChartBox style={{ minHeight: 400 }}>
63-
<Text size="sm" mb="sm">
64-
CPU Usage (Cores)
65-
</Text>
62+
<ChartBox style={{ height: 400 }}>
6663
<DBTimeChart
64+
title="CPU Usage (Cores)"
6765
config={{
6866
select: [
6967
{
@@ -80,17 +78,16 @@ function InfrastructureTab({
8078
connection,
8179
dateRange: searchedTimeRange,
8280
timestampValueExpression: 'event_time',
81+
displayType: DisplayType.Line,
8382
}}
8483
onTimeRangeSelect={onTimeRangeSelect}
8584
/>
8685
</ChartBox>
8786
</Grid.Col>
8887
<Grid.Col span={6}>
89-
<ChartBox style={{ minHeight: 400 }}>
90-
<Text size="sm" mb="sm">
91-
Memory Usage
92-
</Text>
88+
<ChartBox style={{ height: 400 }}>
9389
<DBTimeChart
90+
title="Memory Usage"
9491
config={{
9592
select: [
9693
{
@@ -106,17 +103,16 @@ function InfrastructureTab({
106103
connection,
107104
dateRange: searchedTimeRange,
108105
timestampValueExpression: 'event_time',
106+
displayType: DisplayType.Line,
109107
}}
110108
onTimeRangeSelect={onTimeRangeSelect}
111109
/>
112110
</ChartBox>
113111
</Grid.Col>
114112
<Grid.Col span={6}>
115-
<ChartBox style={{ minHeight: 400 }}>
116-
<Text size="sm" mb="sm">
117-
Disk
118-
</Text>
113+
<ChartBox style={{ height: 400 }}>
119114
<DBTimeChart
115+
title="Disk"
120116
config={{
121117
select: [
122118
{
@@ -140,17 +136,16 @@ function InfrastructureTab({
140136
connection,
141137
dateRange: searchedTimeRange,
142138
timestampValueExpression: 'event_time',
139+
displayType: DisplayType.Line,
143140
}}
144141
onTimeRangeSelect={onTimeRangeSelect}
145142
/>
146143
</ChartBox>
147144
</Grid.Col>
148145
<Grid.Col span={6}>
149-
<ChartBox style={{ minHeight: 400 }}>
150-
<Text size="sm" mb="sm">
151-
S3 Requests
152-
</Text>
146+
<ChartBox style={{ height: 400 }}>
153147
<DBTimeChart
148+
title="S3 Requests"
154149
config={{
155150
select: [
156151
{
@@ -192,20 +187,25 @@ function InfrastructureTab({
192187
where: '',
193188
dateRange: searchedTimeRange,
194189
timestampValueExpression: 'event_time',
190+
displayType: DisplayType.Line,
195191
}}
196192
onTimeRangeSelect={onTimeRangeSelect}
197193
/>
198194
</ChartBox>
199195
</Grid.Col>
200196
<Grid.Col span={6}>
201-
<ChartBox style={{ minHeight: 400 }}>
202-
<Text size="sm" mb="xs">
203-
Network
204-
</Text>
205-
<Text size="xs" mb="sm">
206-
Network activity for the entire machine, not only Clickhouse.
207-
</Text>
197+
<ChartBox style={{ height: 400 }}>
208198
<DBTimeChart
199+
title={
200+
<>
201+
<Text size="sm" mb="xs">
202+
Network
203+
</Text>
204+
<Text size="xs" mb="sm">
205+
Network activity for the entire machine, not only Clickhouse.
206+
</Text>
207+
</>
208+
}
209209
config={{
210210
select: [
211211
{
@@ -223,6 +223,7 @@ function InfrastructureTab({
223223
connection,
224224
dateRange: searchedTimeRange,
225225
timestampValueExpression: 'event_time',
226+
displayType: DisplayType.Line,
226227
}}
227228
onTimeRangeSelect={onTimeRangeSelect}
228229
/>
@@ -248,32 +249,34 @@ function InsertsTab({
248249
return (
249250
<Grid mt="md">
250251
<Grid.Col span={12}>
251-
<ChartBox style={{ minHeight: 400 }}>
252-
<Group justify="space-between" align="center" mb="sm">
253-
<Text size="sm">
254-
Insert{' '}
255-
{insertsBy === 'queries'
256-
? 'Queries'
257-
: insertsBy === 'rows'
258-
? 'Rows'
259-
: 'Bytes'}{' '}
260-
Per Table
261-
</Text>
262-
<SegmentedControl
263-
size="xs"
264-
value={insertsBy ?? 'queries'}
265-
onChange={value => {
266-
// @ts-ignore
267-
setInsertsBy(value);
268-
}}
269-
data={[
270-
{ label: 'Queries', value: 'queries' },
271-
{ label: 'Rows', value: 'rows' },
272-
{ label: 'Bytes', value: 'bytes' },
273-
]}
274-
/>
275-
</Group>
252+
<ChartBox style={{ height: 400 }}>
276253
<DBTimeChart
254+
title={
255+
<Text size="sm">
256+
Insert{' '}
257+
{insertsBy === 'queries'
258+
? 'Queries'
259+
: insertsBy === 'rows'
260+
? 'Rows'
261+
: 'Bytes'}{' '}
262+
Per Table
263+
</Text>
264+
}
265+
toolbarPrefix={[
266+
<SegmentedControl
267+
size="xs"
268+
value={insertsBy ?? 'queries'}
269+
onChange={value => {
270+
// @ts-ignore
271+
setInsertsBy(value);
272+
}}
273+
data={[
274+
{ label: 'Queries', value: 'queries' },
275+
{ label: 'Rows', value: 'rows' },
276+
{ label: 'Bytes', value: 'bytes' },
277+
]}
278+
/>,
279+
]}
277280
config={{
278281
select:
279282
insertsBy === 'queries'
@@ -306,6 +309,7 @@ function InsertsTab({
306309
where: '',
307310
timestampValueExpression: 'event_time',
308311
dateRange: searchedTimeRange,
312+
displayType: DisplayType.Line,
309313
filters: [
310314
{
311315
type: 'sql_ast',
@@ -322,11 +326,9 @@ function InsertsTab({
322326
</ChartBox>
323327
</Grid.Col>
324328
<Grid.Col span={12}>
325-
<ChartBox style={{ minHeight: 200, height: 200 }}>
326-
<Group justify="space-between" align="center" mb="sm">
327-
<Text size="sm">Max Active Parts per Partition</Text>
328-
</Group>
329+
<ChartBox style={{ height: 200 }}>
329330
<DBTimeChart
331+
title="Max Active Parts per Partition"
330332
config={{
331333
select: [
332334
{
@@ -354,15 +356,19 @@ function InsertsTab({
354356
</Grid.Col>
355357
<Grid.Col span={12}>
356358
<ChartBox style={{ height: 400 }}>
357-
<Text size="sm" mb="sm">
358-
Active Parts Per Partition
359-
</Text>
360-
<Text size="xs" mb="md">
361-
Recommended to stay under 300, ClickHouse will automatically
362-
throttle inserts after 1,000 parts per partition and stop inserts at
363-
3,000 parts per partition.
364-
</Text>
365359
<DBTableChart
360+
title={
361+
<>
362+
<Text size="sm" mb="sm">
363+
Active Parts Per Partition
364+
</Text>
365+
<Text size="xs" mb="md">
366+
Recommended to stay under 300, ClickHouse will automatically
367+
throttle inserts after 1,000 parts per partition and stop
368+
inserts at 3,000 parts per partition.
369+
</Text>
370+
</>
371+
}
366372
config={{
367373
dateRange: searchedTimeRange,
368374
select: [
@@ -656,11 +662,8 @@ function ClickhousePage() {
656662
</Grid.Col>
657663
<Grid.Col span={12}>
658664
<ChartBox style={{ height: 400 }}>
659-
<Text size="sm" mb="md">
660-
Query Count by Table
661-
</Text>
662-
663665
<DBTimeChart
666+
title="Query Count by Table"
664667
config={{
665668
select: [
666669
{
@@ -688,6 +691,7 @@ function ClickhousePage() {
688691
)`,
689692
filters,
690693
limit: { limit: 1000 }, // TODO: Cut off more intelligently
694+
displayType: DisplayType.Line,
691695
}}
692696
onTimeRangeSelect={(start, end) => {
693697
onTimeRangeSelect(start, end);
@@ -697,10 +701,8 @@ function ClickhousePage() {
697701
</Grid.Col>
698702
<Grid.Col span={12}>
699703
<ChartBox style={{ height: 400 }}>
700-
<Text size="sm" mb="md">
701-
Most Time Consuming Query Patterns
702-
</Text>
703704
<DBTableChart
705+
title="Most Time Consuming Query Patterns"
704706
config={{
705707
select: [
706708
{

0 commit comments

Comments
 (0)