diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 4470971b..b6537901 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -15,6 +15,7 @@ const nextConfig = { const withNextra = nextra({ theme: 'nextra-theme-docs', themeConfig: './theme.config.jsx', + search: true, }) export default withNextra(nextConfig) diff --git a/docs/package.json b/docs/package.json index 26cba222..b2e308aa 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,6 +20,7 @@ }, "devDependencies": { "@next/eslint-plugin-next": "^15.0.2", + "@types/dompurify": "^3.2.0", "@types/node": "^22.9.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", diff --git a/docs/pages/_meta.ts b/docs/pages/_meta.ts index 9aadb78f..78dad9fd 100644 --- a/docs/pages/_meta.ts +++ b/docs/pages/_meta.ts @@ -1,6 +1,8 @@ -export default { +export const meta = { index: 'Introduction', 'getting-started': 'Getting Started', deploy: 'Deployments', advanced: 'Advanced', } + +export default meta diff --git a/docs/pages/advanced/_meta.ts b/docs/pages/advanced/_meta.ts new file mode 100644 index 00000000..3f38a055 --- /dev/null +++ b/docs/pages/advanced/_meta.ts @@ -0,0 +1,6 @@ +export const meta = { + 'multiple-hosts': 'Multiple Hosts', + 'custom-name': 'Custom ClickHouse Name', +} + +export default meta diff --git a/docs/pages/advanced/custom-name.mdx b/docs/pages/advanced/custom-name.mdx new file mode 100644 index 00000000..c0e5c531 --- /dev/null +++ b/docs/pages/advanced/custom-name.mdx @@ -0,0 +1,9 @@ +import { Tabs } from 'nextra/components' + +# Custom Name + +![](/custom-name.png) + +You can customize the ClickHouse host name by using the environment variable below: + +- `CLICKHOUSE_NAME`: A list of names for the ClickHouse instances separated by commas. The number of items must match the number of hosts in `CLICKHOUSE_HOST`. For example `clickhouse-0,clickhouse-1,clickhouse-2`. diff --git a/docs/pages/advanced/multiple-hosts.mdx b/docs/pages/advanced/multiple-hosts.mdx index 68485206..13787f39 100644 --- a/docs/pages/advanced/multiple-hosts.mdx +++ b/docs/pages/advanced/multiple-hosts.mdx @@ -1,3 +1,5 @@ +import { Tabs } from 'nextra/components' + # Multiple Hosts ![](/multiple-hosts.png) @@ -11,3 +13,65 @@ All these hosts will share the same `CLICKHOUSE_USER` and `CLICKHOUSE_PASSWORD`. - `CLICKHOUSE_USER`: `user1,user2` - `CLICKHOUSE_PASSWORD`: `password1,password2` + +# Examples Docker + + + + ```bash docker run -it \ -e + CLICKHOUSE_HOST='http://ch-1:8123,http://ch-2:8123' \ -e + CLICKHOUSE_NAME='ch-1,ch-2' \ -e CLICKHOUSE_USER='default' \ -e + CLICKHOUSE_PASSWORD='' \ --name clickhouse-monitoring \ + ghcr.io/duyet/clickhouse-monitoring:main ``` + + + ```bash docker run -it \ -e + CLICKHOUSE_HOST='http://ch-1:8123,http://ch-2:8123' \ -e + CLICKHOUSE_NAME='ch-1,ch-2' \ -e CLICKHOUSE_USER='user1,user2' \ -e + CLICKHOUSE_PASSWORD='password1,password2' \ --name clickhouse-monitoring \ + ghcr.io/duyet/clickhouse-monitoring:main ``` + + + +# Examples Kubernetes + + + + ```bash + helm repo add duyet https://duyet.github.io/charts + + cat <> values.yaml + env: + - name: CLICKHOUSE_HOST + value: http://ch-1:8123,http://ch-2:8123 + - name: CLICKHOUSE_NAME + value: ch-1,ch-2 + - name: CLICKHOUSE_USER + value: default + - name: CLICKHOUSE_PASSWORD + value: '' + EOF + + helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring + ``` + + + ```bash + helm repo add duyet https://duyet.github.io/charts + + cat <> values.yaml + env: + - name: CLICKHOUSE_HOST + value: http://ch-1:8123,http://ch-2:8123 + - name: CLICKHOUSE_NAME + value: ch-1,ch-2 + - name: CLICKHOUSE_USER + value: user1,user2 + - name: CLICKHOUSE_PASSWORD + value: password1,password2 + EOF + + helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring + ``` + + diff --git a/docs/pages/deploy.mdx b/docs/pages/deploy.mdx index d8a79348..e5860004 100644 --- a/docs/pages/deploy.mdx +++ b/docs/pages/deploy.mdx @@ -2,7 +2,7 @@ import { Cards } from 'nextra/components' import { Triangle, Container, Blocks } from 'lucide-react' - } title="Vercel" href="/vercel" /> - } title="Docker" href="/docker" /> - } title="Kubernetes" href="/k8s" /> + } title="Vercel" href="/deploy/vercel" arrow /> + } title="Docker" href="/deploy/docker" arrow /> + } title="Kubernetes" href="/deploy/k8s" arrow /> diff --git a/docs/pages/deploy/_meta.ts b/docs/pages/deploy/_meta.ts index 4142a06d..4b1df688 100644 --- a/docs/pages/deploy/_meta.ts +++ b/docs/pages/deploy/_meta.ts @@ -1,5 +1,7 @@ -export default { +export const meta = { vercel: 'Vercel', docker: 'Docker', k8s: 'Kubernetes', } + +export default meta diff --git a/docs/pages/deploy/docker.mdx b/docs/pages/deploy/docker.mdx index 74398f58..073c4113 100644 --- a/docs/pages/deploy/docker.mdx +++ b/docs/pages/deploy/docker.mdx @@ -13,3 +13,11 @@ docker run -it \ --name clickhouse-monitoring \ ghcr.io/duyet/clickhouse-monitoring:main ``` + +import { Cards } from 'nextra/components' +import { Triangle, Container, Blocks } from 'lucide-react' + + + } title="Vercel" href="/deploy/vercel" arrow /> + } title="Kubernetes" href="/deploy/k8s" arrow /> + diff --git a/docs/pages/deploy/k8s.mdx b/docs/pages/deploy/k8s.mdx index 0535ef20..f236a497 100644 --- a/docs/pages/deploy/k8s.mdx +++ b/docs/pages/deploy/k8s.mdx @@ -23,3 +23,11 @@ EOF helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring ``` + +import { Cards } from 'nextra/components' +import { Triangle, Container, Blocks } from 'lucide-react' + + + } title="Vercel" href="/deploy/vercel" arrow /> + } title="Docker" href="/deploy/docker" arrow /> + diff --git a/docs/pages/deploy/vercel.mdx b/docs/pages/deploy/vercel.mdx index b21dc5f0..1272237c 100644 --- a/docs/pages/deploy/vercel.mdx +++ b/docs/pages/deploy/vercel.mdx @@ -45,3 +45,11 @@ EOF helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring ``` + +import { Cards } from 'nextra/components' +import { Triangle, Container, Blocks } from 'lucide-react' + + + } title="Docker" href="/deploy/docker" arrow /> + } title="Kubernetes" href="/deploy/k8s" arrow /> + diff --git a/docs/pages/getting-started.mdx b/docs/pages/getting-started.mdx index f1179abf..73d6c7df 100644 --- a/docs/pages/getting-started.mdx +++ b/docs/pages/getting-started.mdx @@ -1,20 +1,25 @@ # Getting Started -To get the project up and running on your local machine, follow these steps: +import { Cards } from 'nextra/components' +import { Code, UserCog, Grid2x2Check } from 'lucide-react' -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` - -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. + + } + title="Local Development" + href="/getting-started/local" + arrow + /> + } + title="User Roles and Profile" + href="/getting-started/clickhouse-requirements" + arrow + /> + } + title="Enable System Tables" + href="/getting-started/clickhouse-enable-system-tables" + arrow + /> + diff --git a/docs/pages/getting-started/_meta.ts b/docs/pages/getting-started/_meta.ts index 677c0b6f..747d5fc4 100644 --- a/docs/pages/getting-started/_meta.ts +++ b/docs/pages/getting-started/_meta.ts @@ -1,4 +1,7 @@ -export default { - 'clickhouse-requirements': 'Clickhouse User Roles and Settings', - 'clickhouse-enable-system-tables': 'Clickhouse Enable System Tables', +export const meta = { + local: 'Local Development', + 'clickhouse-requirements': 'User Roles and Profile', + 'clickhouse-enable-system-tables': 'Enable System Tables', } + +export default meta diff --git a/docs/pages/getting-started/clickhouse-requirements.mdx b/docs/pages/getting-started/clickhouse-requirements.mdx index 7a49d904..a2fa6ef4 100644 --- a/docs/pages/getting-started/clickhouse-requirements.mdx +++ b/docs/pages/getting-started/clickhouse-requirements.mdx @@ -1,8 +1,8 @@ -# ClickHouse User Role and Settings +# ClickHouse User Role and Profile ## 1. Monitoring user role -Suggested role for "monitoring" user must have these privileges on `system` database: +Suggested role for **monitoring** user must have these privileges on `system` database: ```xml # File: users.d/monitoring_role.xml diff --git a/docs/pages/getting-started/local.mdx b/docs/pages/getting-started/local.mdx new file mode 100644 index 00000000..71460ba4 --- /dev/null +++ b/docs/pages/getting-started/local.mdx @@ -0,0 +1,63 @@ +import { Steps, Tabs, Cards } from 'nextra/components' +import { Code, UserCog, Grid2x2Check } from 'lucide-react' + +# Local Development + +To get the project up and running on your local machine, follow these steps: + + +### Clone the repository + +```bash +git clone https://github.com/duyet/clickhouse-monitoring +``` + +### Install dependencies + + + ```bash npm install ``` + ```bash yarn ``` + + +### Setup env + +Create a `.env.local` file by copying the `.env.example` file and filling in the required environment variables: + +- `CLICKHOUSE_HOST`: ClickHouse host, for example `http://localhost:8123` +- `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` + +### Config ClickHouse + + + } + title="1. User Roles and Profile" + href="/getting-started/clickhouse-requirements" + arrow + /> + } + title="2. Enable System Tables" + href="/getting-started/clickhouse-enable-system-tables" + arrow + /> + + +### Run the development server + + + ```bash npm run dev ``` + ```bash yarn dev ``` + + +### Final + +Open [http://localhost:3000](http://localhost:3000) in your browser to see the dashboard. + + diff --git a/docs/public/custom-name.png b/docs/public/custom-name.png new file mode 100644 index 00000000..0d2b3c4d Binary files /dev/null and b/docs/public/custom-name.png differ diff --git a/docs/theme.config.jsx b/docs/theme.config.jsx index 34c63e9d..02ed889f 100644 --- a/docs/theme.config.jsx +++ b/docs/theme.config.jsx @@ -1,9 +1,15 @@ +import Script from 'next/script' + export default { - logo: ClickHouse Monitoring, - project: { - link: 'https://github.com/duyet/clickhouse-monitoring' - }, - head: ( - - ) - } \ No newline at end of file + logo: ClickHouse Monitoring, + project: { + link: 'https://github.com/duyet/clickhouse-monitoring', + }, + head: ( +