From 857bd1cb842211429a9717cf3a48e25330690c85 Mon Sep 17 00:00:00 2001 From: Duyet Le Date: Mon, 4 Nov 2024 14:00:24 +0700 Subject: [PATCH 1/3] chore: update charts /failed-queries, fix CodeDialog --- app/[host]/[query]/queries/failed-queries.ts | 18 ++++++++++++++---- components/charts/failed-query-count.tsx | 2 +- .../data-table/cells/code-dialog-format.tsx | 14 +++++++++----- components/related-charts.tsx | 5 ++++- package.json | 1 + yarn.lock | 7 +++++++ 6 files changed, 36 insertions(+), 11 deletions(-) diff --git a/app/[host]/[query]/queries/failed-queries.ts b/app/[host]/[query]/queries/failed-queries.ts index b6700dad..69b7a042 100644 --- a/app/[host]/[query]/queries/failed-queries.ts +++ b/app/[host]/[query]/queries/failed-queries.ts @@ -112,18 +112,28 @@ export const failedQueriesConfig: QueryConfig = { [ 'failed-query-count', { - title: 'Failed Queries over last 14 days', + title: 'Failed Queries over last 7 days (Exception Types)', interval: 'toStartOfHour', - lastHours: 24 * 14, + lastHours: 24 * 7, showLegend: false, }, ], + 'break', [ 'failed-query-count-by-user', { - title: 'Failed Queries over last 14 days by Users', + title: 'Failed Queries over last 7 days (Users)', interval: 'toStartOfHour', - lastHours: 24 * 14, + lastHours: 24 * 7, + showLegend: false, + }, + ], + [ + 'failed-query-count-by-user', + { + title: 'Failed Queries over last 24 hours (Users)', + interval: 'toStartOfHour', + lastHours: 24, showLegend: false, }, ], diff --git a/components/charts/failed-query-count.tsx b/components/charts/failed-query-count.tsx index 1a4fbff6..cf1c9427 100644 --- a/components/charts/failed-query-count.tsx +++ b/components/charts/failed-query-count.tsx @@ -11,7 +11,7 @@ export async function ChartFailedQueryCount({ className, chartClassName, chartCardContentClassName, - lastHours = 24, + lastHours = 24 * 7, showXAxis = true, showLegend = false, showCartesianGrid = true, diff --git a/components/data-table/cells/code-dialog-format.tsx b/components/data-table/cells/code-dialog-format.tsx index e07e3c44..b9d2d70e 100644 --- a/components/data-table/cells/code-dialog-format.tsx +++ b/components/data-table/cells/code-dialog-format.tsx @@ -1,3 +1,5 @@ +import * as VisuallyHidden from '@radix-ui/react-visually-hidden' + import { Dialog, DialogContent, @@ -77,17 +79,19 @@ export function CodeDialogFormat({ value, options }: CodeDialogFormatProps) { - {(options?.dialog_title || options?.dialog_description) && ( + - {options.dialog_title} - {options.dialog_description} + {options?.dialog_title || 'Code'} + {options?.dialog_description} - )} +
{typeof content === 'string' ? ( - 
{dedent(content)}
+ 
+                {dedent(content)}
+
) : ( content )} diff --git a/components/related-charts.tsx b/components/related-charts.tsx index 106cc689..68a236fb 100644 --- a/components/related-charts.tsx +++ b/components/related-charts.tsx @@ -83,7 +83,10 @@ export async function RelatedCharts({ } return ( - }> + } + > Date: Mon, 4 Nov 2024 14:23:05 +0700 Subject: [PATCH 2/3] docs: update README.md --- README.md | 104 ++++++++++++++++++++++++++++++++------------------- package.json | 2 +- 2 files changed, 66 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 07085210..beb935ca 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Features: - Useful tools: Zookeeper data exploration, query EXPLAIN, kill queries, etc. - Visualization metric charts: queries and resource usage, number of merges/mutation, merge performance, query performance, etc. -**Demo** (*The ClickHouse server running on my homelab so can be slow sometimes*): +**Demo** (_The ClickHouse server running on my homelab so can be slow sometimes_): - [clickhouse-monitoring.vercel.app](https://clickhouse-monitoring.vercel.app) - [clickhouse.duyet.net](https://clickhouse.duyet.net) @@ -33,19 +33,73 @@ To get the project up and running on your local machine, follow these steps: 1. Clone the repository 2. Install dependencies using `npm install` or `yarn install` 3. Create a `.env.local` file by copying the `.env.example` file and filling in the required environment variables: - - `CLICKHOUSE_HOST`: ClickHouse host(s), for example `http://localhost:8123` or `http://ch-1:8123,http://ch-2:8123` - - `CLICKHOUSE_NAME`: (Optional) Name of ClickHouse instance, must match the number of hosts in `CLICKHOUSE_HOST`, for example `localhost` or `ch-1,ch-2`. - - `CLICKHOUSE_USER`: ClickHouse user with permission to query the `system` database. - - `CLICKHOUSE_PASSWORD`: ClickHouse password for the specified user. - - `CLICKHOUSE_MAX_EXECUTION_TIME`: [`max_execution_time`](https://clickhouse.com/docs/en/operations/settings/query-complexity#max-execution-time) timeout in seconds. Default is `10`. - - `CLICKHOUSE_TZ`: ClickHouse server timezone. Default: `''`. - - `NEXT_QUERY_CACHE_TTL`: TTL of [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) - cache the results of most charts to speed up and reuse them across multiple requests. Default: `86400`. - - `NEXT_PUBLIC_LOGO`: (Optional) HTTP path to logo image. - - `EVENTS_TABLE_NAME`: The table name for storing dashboard self-tracking events. Default: `system.monitoring_events` + + - `CLICKHOUSE_HOST`: ClickHouse host(s), for example `http://localhost:8123` or `http://ch-1:8123,http://ch-2:8123` + - `CLICKHOUSE_NAME`: (Optional) Name of ClickHouse instance, must match the number of hosts in `CLICKHOUSE_HOST`, for example `localhost` or `ch-1,ch-2`. + - `CLICKHOUSE_USER`: ClickHouse user with permission to query the `system` database. + - `CLICKHOUSE_PASSWORD`: ClickHouse password for the specified user. + - `CLICKHOUSE_MAX_EXECUTION_TIME`: [`max_execution_time`](https://clickhouse.com/docs/en/operations/settings/query-complexity#max-execution-time) timeout in seconds. Default is `10`. + - `CLICKHOUSE_TZ`: ClickHouse server timezone. Default: `''`. + - `NEXT_QUERY_CACHE_TTL`: TTL of [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) - cache the results of most charts to speed up and reuse them across multiple requests. Default: `86400`. + - `NEXT_PUBLIC_LOGO`: (Optional) HTTP path to logo image. + - `EVENTS_TABLE_NAME`: The table name for storing dashboard self-tracking events. Default: `system.monitoring_events` 4. Run the development server with `npm run dev` or `yarn dev` 5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the dashboard. +## ClickHouse Requirements + +### 1. Monitoring user role + +Suggested role for "monitoring" user must have these privileges on `system` database: + +```xml +# File: users.d/monitoring_role.xml + + + + + monitoring_profile + ::/0 + + GRANT monitoring_role + + + + + + + + REVOKE ALL ON *.* + GRANT SELECT,SHOW,dictGet,REMOTE ON *.* + GRANT SELECT,INSERT,ALTER,CREATE,DROP,TRUNCATE,OPTIMIZE,SHOW,dictGet ON system.* + GRANT CREATE TEMPORARY TABLE ON *.* + + + + +``` + +`CREATE TEMPORARY TABLE` is needed because the UI using `FROM merge(system, '^query_log')` allows retrieving all the data from old tables that were renamed during the upgrade. + +### 2. Monitoring user profile + +```xml +# File: users.d/monitoring_profile.xml + + + + 1 + + + 1 + 50 + 0 + + + +``` + ## Deployment ### 1. Vercel @@ -94,34 +148,6 @@ EOF helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring ``` -#### Suggested role for "monitoring" user - -```xml -# File: users.d/monitoring_role.xml - - - - - default - ::/0 - - GRANT monitoring_role - - - - - - - - REVOKE ALL ON *.* - GRANT SELECT,SHOW,dictGet,REMOTE ON *.* - GRANT SELECT,INSERT,ALTER,CREATE,DROP,TRUNCATE,OPTIMIZE,SHOW,dictGet ON system.* - - - - -``` - ## Feedback and Contributions Feedback and contributions are welcome! Feel free to open issues or submit pull requests. @@ -132,4 +158,4 @@ See [LICENSE](LICENSE). --- -![Alt](https://repobeats.axiom.co/api/embed/830f9ce7ba9e7a42f93630e2581506ca34c84067.svg "Repobeats analytics image") +![Alt](https://repobeats.axiom.co/api/embed/830f9ce7ba9e7a42f93630e2581506ca34c84067.svg 'Repobeats analytics image') diff --git a/package.json b/package.json index ae46e14a..819b83be 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"", "component": "cypress open --component", "component:headless": "cypress run --component", - "fmt": "prettier --write \"**/*.{ts,tsx,mdx,json}\" --cache", + "fmt": "prettier --write \"**/*.{ts,tsx,md,mdx,json}\" --cache", "test": "jest --coverage", "jest": "jest --coverage" }, From 9835393e14bf665f3521a663b4c134f45c5a6f0b Mon Sep 17 00:00:00 2001 From: Duyet Le Date: Mon, 4 Nov 2024 14:33:59 +0700 Subject: [PATCH 3/3] fix: code dialog should have title --- .../data-table/cells/code-dialog-format.tsx | 22 +++++++++---------- package.json | 1 - yarn.lock | 7 ------ 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/components/data-table/cells/code-dialog-format.tsx b/components/data-table/cells/code-dialog-format.tsx index b9d2d70e..306bd4e5 100644 --- a/components/data-table/cells/code-dialog-format.tsx +++ b/components/data-table/cells/code-dialog-format.tsx @@ -1,4 +1,6 @@ -import * as VisuallyHidden from '@radix-ui/react-visually-hidden' +import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog' +import { SizeIcon } from '@radix-ui/react-icons' +import dedent from 'dedent' import { Dialog, @@ -8,9 +10,6 @@ import { } from '@/components/ui/dialog' import { formatQuery } from '@/lib/format-readable' import { cn } from '@/lib/utils' -import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog' -import { SizeIcon } from '@radix-ui/react-icons' -import dedent from 'dedent' export interface CodeDialogOptions { dialog_title?: string @@ -78,13 +77,14 @@ export function CodeDialogFormat({ value, options }: CodeDialogFormatProps) {
- - - - {options?.dialog_title || 'Code'} - {options?.dialog_description} - - + + + {options?.dialog_title} + {options?.dialog_description} +
diff --git a/package.json b/package.json index 819b83be..42ced469 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-toast": "^1.2.2", "@radix-ui/react-tooltip": "^1.1.3", - "@radix-ui/react-visually-hidden": "^1.1.0", "@tanstack/react-table": "^8.20.5", "@tremor/react": "^3.18.3", "@uiw/react-heat-map": "^2.2.1", diff --git a/yarn.lock b/yarn.lock index 84a0f4f1..aaeb5dd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1712,13 +1712,6 @@ dependencies: "@radix-ui/react-primitive" "2.0.0" -"@radix-ui/react-visually-hidden@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2" - integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ== - dependencies: - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/rect@1.1.0": version "1.1.0" resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz"