Merge pull request #427 from duyet/chore/ui-update

feat(docs): enhance deployment documentation

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)

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",

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

docs/pages/advanced/_meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  'multiple-hosts': 'Multiple Hosts',
+  'custom-name': 'Custom ClickHouse Name',
+}
+
+export default meta

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`.

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
+
+<Tabs items={['Docker (same user)', 'Docker (different user)']}>
+  <Tabs.Tab>
+    ```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 ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```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 ```
+  </Tabs.Tab>
+</Tabs>
+
+# Examples Kubernetes
+
+<Tabs items={['Kubernetes (same user)', 'Kubernetes (different user)']}>
+  <Tabs.Tab>
+    ```bash
+    helm repo add duyet https://duyet.github.io/charts
+
+    cat <<EOF >> 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
+    ```
+ </Tabs.Tab>
+ <Tabs.Tab>
+    ```bash
+    helm repo add duyet https://duyet.github.io/charts
+    
+    cat <<EOF >> 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
+    ```
+ </Tabs.Tab>
+</Tabs>

docs/pages/deploy.mdx

@@ -2,7 +2,7 @@ import { Cards } from 'nextra/components'
 import { Triangle, Container, Blocks } from 'lucide-react'
 
 <Cards>
-  <Cards.Card icon={<Triangle />} title="Vercel" href="/vercel" />
-  <Cards.Card icon={<Container />} title="Docker" href="/docker" />
-  <Cards.Card icon={<Blocks />} title="Kubernetes" href="/k8s" />
+  <Cards.Card icon={<Triangle />} title="Vercel" href="/deploy/vercel" arrow />
+  <Cards.Card icon={<Container />} title="Docker" href="/deploy/docker" arrow />
+  <Cards.Card icon={<Blocks />} title="Kubernetes" href="/deploy/k8s" arrow />
 </Cards>

docs/pages/deploy/_meta.ts

@@ -1,5 +1,7 @@
-export default {
+export const meta = {
   vercel: 'Vercel',
   docker: 'Docker',
   k8s: 'Kubernetes',
 }
+
+export default meta

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'
+
+<Cards>
+  <Cards.Card icon={<Triangle />} title="Vercel" href="/deploy/vercel" arrow />
+  <Cards.Card icon={<Blocks />} title="Kubernetes" href="/deploy/k8s" arrow />
+</Cards>

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'
+
+<Cards>
+  <Cards.Card icon={<Triangle />} title="Vercel" href="/deploy/vercel" arrow />
+  <Cards.Card icon={<Container />} title="Docker" href="/deploy/docker" arrow />
+</Cards>

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'
+
+<Cards>
+  <Cards.Card icon={<Container />} title="Docker" href="/deploy/docker" arrow />
+  <Cards.Card icon={<Blocks />} title="Kubernetes" href="/deploy/k8s" arrow />
+</Cards>

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.
+<Cards>
+  <Cards.Card
+    icon={<Code />}
+    title="Local Development"
+    href="/getting-started/local"
+    arrow
+  />
+  <Cards.Card
+    icon={<UserCog />}
+    title="User Roles and Profile"
+    href="/getting-started/clickhouse-requirements"
+    arrow
+  />
+  <Cards.Card
+    icon={<Grid2x2Check />}
+    title="Enable System Tables"
+    href="/getting-started/clickhouse-enable-system-tables"
+    arrow
+  />
+</Cards>

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

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

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:
+
+<Steps>
+### Clone the repository
+
+```bash
+git clone https://github.com/duyet/clickhouse-monitoring
+```
+
+### Install dependencies
+
+<Tabs items={['npm', 'yarn']}>
+  <Tabs.Tab>```bash npm install ```</Tabs.Tab>
+  <Tabs.Tab>```bash yarn ```</Tabs.Tab>
+</Tabs>
+
+### 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
+
+<Cards>
+  <Cards.Card
+    icon={<UserCog />}
+    title="1. User Roles and Profile"
+    href="/getting-started/clickhouse-requirements"
+    arrow
+  />
+  <Cards.Card
+    icon={<Grid2x2Check />}
+    title="2. Enable System Tables"
+    href="/getting-started/clickhouse-enable-system-tables"
+    arrow
+  />
+</Cards>
+
+### Run the development server
+
+<Tabs items={['npm', 'yarn']}>
+  <Tabs.Tab>```bash npm run dev ```</Tabs.Tab>
+  <Tabs.Tab>```bash yarn dev ```</Tabs.Tab>
+</Tabs>
+
+### Final
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the dashboard.
+
+</Steps>

docs/theme.config.jsx

@@ -1,9 +1,15 @@
+import Script from 'next/script'
+
 export default {
-    logo: <span>ClickHouse Monitoring</span>,
-    project: {
-      link: 'https://github.com/duyet/clickhouse-monitoring'
-    },
-    head: (
-      <script async src="https://cdn.seline.so/seline.js" data-token="05046b3773d0534"></script>
-    )
-  }
+  logo: <span>ClickHouse Monitoring</span>,
+  project: {
+    link: 'https://github.com/duyet/clickhouse-monitoring',
+  },
+  head: (
+    <Script
+      async
+      src="https://cdn.seline.so/seline.js"
+      data-token="05046b3773d0534"
+    />
+  ),
+}