feat: add docs page

.github/workflows/docs.yml

@@ -0,0 +1,83 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  pages: write
+  contents: read
+  id-token: write
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            docs_changes:
+              - 'docs/**'
+
+      - if: steps.changes.outputs.docs_changes == 'true'
+        name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: yarn
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - name: Yarn Cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/.cache
+            ~/.cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Nextjs Cache
+        uses: actions/cache@v4
+        with:
+          path: .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      - name: Install dependencies
+        working-directory: docs
+        run: yarn install
+
+      - name: Build
+        working-directory: docs
+        run: yarn build
+
+      - name: Upload static files as artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/build
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.prettierignore

@@ -10,3 +10,4 @@ compiled/
 pnpm-lock.yaml
 .github/actions/*/index.mjs
 test/**/out/**
+docs/build

docs/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "root": true,
+  "extends": ["next", "next/core-web-vitals", "prettier"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/no-unknown-property": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva", "clsx"],
+      "config": "tailwind.config.cjs"
+    },
+    "next": {
+      "rootDir": ["app/*/", "pages/**/*"]
+    }
+  }
+}

docs/.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+.nyc_output
+/jest-reports
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# cypress
+cypress/videos
+cypress/screenshots
+
+# Turborepo
+.turbo
+
+# IDE
+.idea
+.vscode
+.env

docs/next.config.mjs

@@ -0,0 +1,20 @@
+import nextra from 'nextra'
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: 'export',
+  basePath: '/clickhouse-monitoring',
+  images: {
+    unoptimized: true, // mandatory, otherwise won't export
+  },
+  distDir: 'build',
+}
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx',
+})
+
+export default withNextra(nextConfig)

docs/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "docs",
+  "version": "1.0.0",
+  "description": "ClickHouse Monitoring Docs",
+  "license": "AGPL-3.0-only",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "lucide-react": "^0.454.0",
+    "next": "^15.0.2",
+    "nextra": "^3.2.0",
+    "nextra-theme-docs": "^3.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.14"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.0.2",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/parser": "^8.13.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.14.0",
+    "eslint-config-next": "^15.0.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "typescript": "^5.6.3"
+  }
+}

docs/pages/_app.jsx

@@ -0,0 +1,3 @@
+export default function App({ Component, pageProps }) {
+    return <Component {...pageProps} />
+  }

docs/pages/_meta.ts

@@ -0,0 +1,6 @@
+export default {
+  index: 'Introduction',
+  'getting-started': 'Getting Started',
+  deploy: 'Deployments',
+  advanced: 'Advanced',
+}

docs/pages/advanced/multiple-hosts.mdx

@@ -0,0 +1,13 @@
+# Multiple Hosts
+
+![](/multiple-hosts.png)
+
+You can configure the UI to have multiple ClickHouse hosts by using these environment variables:
+
+- `CLICKHOUSE_HOST`: Separated by commas, for example: `http://ch-1:8123,http://ch-2:8123`
+- `CLICKHOUSE_NAME`: (Optional) Name of the ClickHouse instance, must match the number of hosts in `CLICKHOUSE_HOST`, for example `ch-1,ch-2`.
+
+All these hosts will share the same `CLICKHOUSE_USER` and `CLICKHOUSE_PASSWORD`. If you want to have multiple users/passwords for each host, specify them in the usual way:
+
+- `CLICKHOUSE_USER`: `user1,user2`
+- `CLICKHOUSE_PASSWORD`: `password1,password2`

docs/pages/deploy.mdx

@@ -0,0 +1,8 @@
+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>

docs/pages/deploy/_meta.ts

@@ -0,0 +1,5 @@
+export default {
+  vercel: 'Vercel',
+  docker: 'Docker',
+  k8s: 'Kubernetes',
+}

docs/pages/deploy/docker.mdx

@@ -0,0 +1,15 @@
+# Docker
+
+Using the latest image here: https://github.com/duyet/clickhouse-monitoring/pkgs/container/clickhouse-monitoring
+
+```bash
+docker run -it \
+    -e CLICKHOUSE_HOST='http://localhost' \
+    -e CLICKHOUSE_USER='default' \
+    -e CLICKHOUSE_PASSWORD='' \
+    -e CLICKHOUSE_TZ='Asia/Ho_Chi_Minh' \
+    -e CLICKHOUSE_MAX_EXECUTION_TIME='15' \
+    -e NEXT_QUERY_CACHE_TTL='86400' \
+    --name clickhouse-monitoring \
+    ghcr.io/duyet/clickhouse-monitoring:main
+```

docs/pages/deploy/k8s.mdx

@@ -0,0 +1,25 @@
+# Kubernetes Helm Chart
+
+Using the latest helm chart here: https://github.com/duyet/charts/tree/master/clickhouse-monitoring
+
+```bash
+helm repo add duyet https://duyet.github.io/charts
+
+cat <<EOF >> values.yaml
+env:
+  - name: CLICKHOUSE_HOST
+    value: http://localhost:8123
+  - name: CLICKHOUSE_USER
+    value: default
+  - name: CLICKHOUSE_PASSWORD
+    value: ''
+  - name: CLICKHOUSE_TZ
+    value: 'Asia/Ho_Chi_Minh'
+  - name: CLICKHOUSE_MAX_EXECUTION_TIME
+    value: '15'
+  - name: NEXT_QUERY_CACHE_TTL
+    value: '86400'
+EOF
+
+helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring
+```

docs/pages/deploy/vercel.mdx

@@ -0,0 +1,47 @@
+# Vercel
+
+For easy deployment, use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme), created by the makers of Next.js. Refer to the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fduyet%2Fclickhouse-monitoring&env=CLICKHOUSE_HOST,CLICKHOUSE_USER,CLICKHOUSE_PASSWORD,CLICKHOUSE_MAX_EXECUTION_TIME,CLICKHOUSE_TZ,NEXT_QUERY_CACHE_TTL,NEXT_PUBLIC_LOGO,EVENTS_TABLE_NAME)
+
+### 2. Docker
+
+Using the latest image here: https://github.com/duyet/clickhouse-monitoring/pkgs/container/clickhouse-monitoring
+
+```bash
+docker run -it \
+    -e CLICKHOUSE_HOST='http://localhost' \
+    -e CLICKHOUSE_USER='default' \
+    -e CLICKHOUSE_PASSWORD='' \
+    -e CLICKHOUSE_TZ='Asia/Ho_Chi_Minh' \
+    -e CLICKHOUSE_MAX_EXECUTION_TIME='15' \
+    -e NEXT_QUERY_CACHE_TTL='86400' \
+    --name clickhouse-monitoring \
+    ghcr.io/duyet/clickhouse-monitoring:main
+```
+
+### 3. Kubernetes Helm Chart
+
+Using the latest helm chart here: https://github.com/duyet/charts/tree/master/clickhouse-monitoring
+
+```bash
+helm repo add duyet https://duyet.github.io/charts
+
+cat <<EOF >> values.yaml
+env:
+  - name: CLICKHOUSE_HOST
+    value: http://localhost:8123
+  - name: CLICKHOUSE_USER
+    value: default
+  - name: CLICKHOUSE_PASSWORD
+    value: ''
+  - name: CLICKHOUSE_TZ
+    value: 'Asia/Ho_Chi_Minh'
+  - name: CLICKHOUSE_MAX_EXECUTION_TIME
+    value: '15'
+  - name: NEXT_QUERY_CACHE_TTL
+    value: '86400'
+EOF
+
+helm install -f values.yaml clickhouse-monitoring-release duyet/clickhouse-monitoring
+```

docs/pages/getting-started.mdx

@@ -0,0 +1,20 @@
+# Getting Started
+
+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`
+
+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.

docs/pages/getting-started/_meta.ts

@@ -0,0 +1,3 @@
+export default {
+  'clickhouse-requirements': 'Clickhouse User Requirements',
+}