Skip to content

Commit 5f917a6

Browse files
duyetduyet
authored
Merge pull request #378 from duyet/feat/errors
feat: improving the filter handling logic, ability to click on bar charts to filter data
2 parents eda70f2 + 32bec81 commit 5f917a6

29 files changed

+414
-198
lines changed

‎app/[host]/[query]/merges/mutations.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const mutationsConfig: QueryConfig = {
3434
],
3535
columnFormats: {
3636
table: ColumnFormat.ColoredBadge,
37-
command: ColumnFormat.Code,
37+
command: ColumnFormat.CodeDialog,
3838
is_done: ColumnFormat.Boolean,
3939
readable_parts_to_do: ColumnFormat.BackgroundBar,
4040
},

‎app/[host]/[query]/queries/history-queries.ts‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export const historyQueriesConfig: QueryConfig = {
3232
WHERE
3333
if ({type: String} != '', type = {type: String}, type != 'QueryStart')
3434
AND if ({duration_1m: String} = '1', query_duration >= 60, true)
35+
AND if (notEmpty({event_time: String}), toDate(event_time) = toDate({event_time: String}), true)
36+
AND if ({database: String} != '' AND {table: String} != '', has(tables, format('{}.{}', {database: String}, {table: String})), true)
3537
ORDER BY event_time DESC
3638
LIMIT 1000
3739
`,
@@ -69,6 +71,9 @@ export const historyQueriesConfig: QueryConfig = {
6971
defaultParams: {
7072
type: '',
7173
duration_1m: '',
74+
event_time: '',
75+
database: '',
76+
table: '',
7277
},
7378

7479
filterParamPresets: [
@@ -100,37 +105,12 @@ export const historyQueriesConfig: QueryConfig = {
100105
],
101106

102107
relatedCharts: [
103-
[
104-
'query-count',
105-
{
106-
title: 'Running Queries over last 14 days (query / day)',
107-
interval: 'toStartOfDay',
108-
lastHours: 24 * 14,
109-
},
110-
],
111-
[
112-
'query-duration',
113-
{
114-
title:
115-
'Avg Queries Duration over last 14 days (AVG(duration in seconds) / day)',
116-
interval: 'toStartOfDay',
117-
lastHours: 24 * 14,
118-
},
119-
],
120-
[
121-
'query-memory',
122-
{
123-
title: 'Avg Memory Usage for queries over last 14 days',
124-
interval: 'toStartOfDay',
125-
lastHours: 24 * 14,
126-
},
127-
],
108+
['query-count', {}],
109+
['query-duration', {}],
110+
['query-memory', {}],
128111
[
129112
'query-count-by-user',
130113
{
131-
title: 'Total Queries over last 14 days by users',
132-
interval: 'toStartOfDay',
133-
lastHours: 24 * 14,
134114
showLegend: false,
135115
},
136116
],

‎app/[host]/database/[database]/[table]/@mergetree/page.tsx‎

Lines changed: 4 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import { TextAlignBottomIcon } from '@radix-ui/react-icons'
2-
import Link from 'next/link'
3-
41
import { DataTable } from '@/components/data-table/data-table'
5-
import { Button } from '@/components/ui/button'
62
import { Extras } from '../extras/extras'
73

84
import { fetchData } from '@/lib/clickhouse'
9-
import { getScopedLink } from '@/lib/scoped-link'
105
import { queryConfig, type Row } from '../config'
116
import { engineType } from '../engine-type'
7+
import { TableComment } from './table-comment'
8+
import { Toolbar } from './toolbar'
129

1310
interface Props {
1411
params: {
@@ -35,56 +32,11 @@ export default async function MergeTree({
3532
return (
3633
<DataTable
3734
title={`Table: ${database}.${table}`}
38-
description={<Description database={database} table={table} />}
35+
description={<TableComment database={database} table={table} />}
3936
toolbarExtras={<Extras host={host} database={database} table={table} />}
40-
topRightToolbarExtras={
41-
<TopRightToolbarExtras database={database} table={table} />
42-
}
37+
topRightToolbarExtras={<Toolbar database={database} table={table} />}
4338
queryConfig={queryConfig}
4439
data={columns}
4540
/>
4641
)
4742
}
48-
49-
async function Description({
50-
database,
51-
table,
52-
}: {
53-
database: string
54-
table: string
55-
}) {
56-
try {
57-
const { data } = await fetchData<{ comment: string }[]>({
58-
query: `
59-
SELECT comment
60-
FROM system.tables
61-
WHERE (database = {database: String})
62-
AND (name = {table: String})
63-
`,
64-
query_params: { database, table },
65-
})
66-
67-
return data?.[0]?.comment || ''
68-
} catch (e) {
69-
console.error('Error fetching table description', e)
70-
return ''
71-
}
72-
}
73-
74-
const TopRightToolbarExtras = ({
75-
database,
76-
table,
77-
}: {
78-
database: string
79-
table: string
80-
}) => (
81-
<Link href={getScopedLink(`/top-usage-columns?table=${database}.${table}`)}>
82-
<Button
83-
variant="outline"
84-
className="flex flex-row gap-2 text-muted-foreground"
85-
>
86-
<TextAlignBottomIcon className="size-3" />
87-
Top usage columns
88-
</Button>
89-
</Link>
90-
)

‎app/[host]/database/[database]/[table]/@mergetree/table-comment.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { fetchData } from '@/lib/clickhouse'
2+
3+
export async function TableComment({
4+
database,
5+
table,
6+
}: {
7+
database: string
8+
table: string
9+
}) {
10+
try {
11+
const { data } = await fetchData<{ comment: string }[]>({
12+
query: `
13+
SELECT comment
14+
FROM system.tables
15+
WHERE (database = {database: String})
16+
AND (name = {table: String})
17+
`,
18+
query_params: { database, table },
19+
})
20+
21+
return data?.[0]?.comment || ''
22+
} catch (e) {
23+
console.error('Error fetching table description', e)
24+
return ''
25+
}
26+
}

‎app/[host]/database/[database]/[table]/@mergetree/toolbar.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { TextAlignBottomIcon } from '@radix-ui/react-icons'
2+
import Link from 'next/link'
3+
4+
import { Button } from '@/components/ui/button'
5+
import { getScopedLink } from '@/lib/scoped-link'
6+
7+
export function Toolbar({
8+
database,
9+
table,
10+
}: {
11+
database: string
12+
table: string
13+
}) {
14+
return (
15+
<Link href={getScopedLink(`/top-usage-columns?table=${database}.${table}`)}>
16+
<Button
17+
variant="outline"
18+
className="flex flex-row gap-2 text-muted-foreground"
19+
>
20+
<TextAlignBottomIcon className="size-3" />
21+
Top usage columns
22+
</Button>
23+
</Link>
24+
)
25+
}

‎app/[host]/database/[database]/[table]/extras/extras.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { ArrowLeftIcon } from '@radix-ui/react-icons'
2+
import { DatabaseIcon } from 'lucide-react'
23
import Link from 'next/link'
34

45
import { Button } from '@/components/ui/button'
5-
import { AlternativeTables } from './alternative-tables'
6+
7+
import { HistoryQueriesButton } from './history-queries-button'
68
import { RunningQueriesButton } from './runnning-queries-button'
79
import { SampleDataButton } from './sample-data-button'
810
import { ShowDDL } from './show-ddl-button'
911
import { TableInfo } from './table-info'
12+
import { TableSelector } from './table-selector'
1013

1114
export const Extras = ({
1215
host,
@@ -26,17 +29,21 @@ export const Extras = ({
2629
className="flex flex-row gap-2 text-muted-foreground"
2730
>
2831
<ArrowLeftIcon className="size-3" />
29-
Back to {database}
32+
Back to{' '}
33+
<div className="inline-flex items-center gap-1">
34+
<DatabaseIcon className="size-3" /> {database}
35+
</div>
3036
</Button>
3137
</Link>
32-
<AlternativeTables database={database} table={table} />
38+
<TableSelector database={database} table={table} />
3339
</div>
3440

35-
<div className="flex flex-row gap-3">
41+
<div className="flex flex-row flex-wrap gap-3">
3642
<ShowDDL database={database} table={table} />
3743
<TableInfo database={database} table={table} />
3844
<SampleDataButton database={database} table={table} />
3945
<RunningQueriesButton database={database} table={table} />
46+
<HistoryQueriesButton database={database} table={table} />
4047
</div>
4148
</div>
4249
)

‎app/[host]/database/[database]/[table]/extras/history-queries-button.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { BarChartIcon } from '@radix-ui/react-icons'
2+
import Link from 'next/link'
3+
4+
import { Button } from '@/components/ui/button'
5+
import { Dialog, DialogTrigger } from '@/components/ui/dialog'
6+
import { getScopedLink } from '@/lib/scoped-link'
7+
import { cn } from '@/lib/utils'
8+
9+
interface HistoryQueriesButtonProps {
10+
database: string
11+
table: string
12+
className?: string
13+
}
14+
15+
export async function HistoryQueriesButton({
16+
database,
17+
table,
18+
className,
19+
}: HistoryQueriesButtonProps) {
20+
return (
21+
<Dialog>
22+
<DialogTrigger asChild>
23+
<Link
24+
aria-label="History Queries"
25+
title="History Queries"
26+
href={getScopedLink(
27+
`/history-queries?database=${database}&table=${table}`
28+
)}
29+
>
30+
<Button
31+
variant="outline"
32+
size="sm"
33+
className={cn(
34+
'flex flex-row items-center gap-2 text-muted-foreground',
35+
className
36+
)}
37+
>
38+
<BarChartIcon className="size-3" />
39+
History Queries
40+
</Button>
41+
</Link>
42+
</DialogTrigger>
43+
</Dialog>
44+
)
45+
}

app/[host]/database/[database]/[table]/extras/alternative-tables.tsx renamed to app/[host]/database/[database]/[table]/extras/table-selector.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,12 @@ import {
1212
import { fetchData } from '@/lib/clickhouse'
1313
import { getScopedLink } from '@/lib/scoped-link'
1414

15-
interface AlternativeTablesProps {
15+
interface TableSelectorProps {
1616
database: string
1717
table: string
1818
}
1919

20-
export async function AlternativeTables({
21-
database,
22-
table,
23-
}: AlternativeTablesProps) {
20+
export async function TableSelector({ database, table }: TableSelectorProps) {
2421
let anotherTables: { name: string }[] = []
2522
try {
2623
const res = await fetchData<{ name: string }[]>({

‎app/[host]/overview/charts/running-queries.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export async function RunningQueries({ className }: { className?: string }) {
5151
</div>
5252

5353
<ChartQueryCount
54+
title=""
5455
interval="toStartOfDay"
5556
lastHours={24 * 7}
5657
className="border-0 p-0 shadow-none"

‎components/charts/query-count-by-user.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fetchData } from '@/lib/clickhouse'
55
import { applyInterval } from '@/lib/clickhouse-query'
66

77
export async function ChartQueryCountByUser({
8-
title,
8+
title = 'Total Queries over last 14 days by users',
99
interval = 'toStartOfDay',
1010
lastHours = 24 * 14,
1111
className,

0 commit comments

Comments
 (0)