https://github.com/caioricciuti/ch-ui
This is a simple UI for using click house self hosted.
https://github.com/caioricciuti/ch-ui
clickhouse database-management
Last synced: 11 days ago
JSON representation
This is a simple UI for using click house self hosted.
- Host: GitHub
- URL: https://github.com/caioricciuti/ch-ui
- Owner: caioricciuti
- License: other
- Created: 2024-05-16T19:04:08.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T18:32:15.000Z (7 months ago)
- Last Synced: 2024-09-18T00:07:52.484Z (7 months ago)
- Topics: clickhouse, database-management
- Language: JavaScript
- Homepage:
- Size: 1.9 MB
- Stars: 62
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-clickhouse - caioricciuti/ch-ui - CH-UI is a user-friendly interface for managing data from ClickHouse databases. (UIs / GUI)
README
# CH-UI 🚀
[](https://github.com/caioricciuti/ch-ui/blob/main/LICENSE)
[](https://github.com/caioricciuti/ch-ui/pkgs/container/ch-ui)
A modern, feature-rich web interface for ClickHouse databases. CH-UI provides an intuitive platform for managing ClickHouse databases, executing queries, and visualizing metrics about your instance.
## 🌟 Key Features
### Core Functionality
- **🔄 ClickHouse Integration**: Seamless connection and interaction with ClickHouse databases
- **📝 Advanced SQL Editor**:
- Intelligent IntelliSense with autocomplete suggestions
- Syntax highlighting
- Query history tracking
- Multi-tab query execution
- **📊 Dynamic Data Visualization**:
- Interactive data tables with sorting and filtering
- Custom visualization options
- Real-time data updates
### Performance & Architecture
- **⚡ Optimized Performance**:
- IndexedDB-based caching system
- Efficient state management
- Responsive UI even with large datasets
- **🔒 TypeScript Implementation**: Full TypeScript support for improved code quality and developer experience
- **📦 Custom Table Management**: Built-in table handling without third-party dependencies
### Monitoring & Analytics
- **📈 Enhanced Metrics Dashboard**:
- Query performance monitoring
- Table statistics and insights
- System settings overview
- Network performance metrics
- Resource utilization tracking
### User Experience
- **🎨 Modern UI/UX**:
- Clean, intuitive interface
- Responsive design
- Dark/Light mode support
- Customizable layouts
## 📸 Screenshots
## 🚀 Getting Started
### Option 1: Docker (Recommended)
#### Simple Start
```bash
docker run --name ch-ui -p 5521:5521 ghcr.io/caioricciuti/ch-ui:latest
```
#### Using Docker Compose
Create a `docker-compose.yml`:
```yaml
services:
ch-ui:
image: ghcr.io/caioricciuti/ch-ui:latest
restart: always
ports:
- "5521:5521"
environment:
VITE_CLICKHOUSE_URL: "http://your-clickhouse-server:8123"
VITE_CLICKHOUSE_USER: "your-username"
VITE_CLICKHOUSE_PASS: "your-password"
```
Then run:
```bash
docker-compose up -d
```
#### Environment Variables
| Variable | Description | Required | Default |
|----------|-------------|-----------|---------|
| VITE_CLICKHOUSE_URL | ClickHouse server URL | Yes | - |
| VITE_CLICKHOUSE_USER | ClickHouse username | Yes | - |
| VITE_CLICKHOUSE_PASS | ClickHouse password | No | "" |
| VITE_CLICKHOUSE_USE_ADVANCED | Enable advanced ClickHouse features (e.g., custom settings, system tables access) | No | false |
| VITE_CLICKHOUSE_CUSTOM_PATH | Custom path for ClickHouse HTTP interface | No | - |
| VITE_CLICKHOUSE_REQUEST_TIMEOUT | Request timeout in milliseconds | No | 30000 |
#### Advanced Docker Configuration
```yaml
services:
ch-ui:
image: ghcr.io/caioricciuti/ch-ui:latest
restart: always
ports:
- "5521:5521"
environment:
VITE_CLICKHOUSE_URL: "http://your-clickhouse-server:8123"
VITE_CLICKHOUSE_USER: "your-username"
VITE_CLICKHOUSE_PASS: "your-password"
# Advanced Options
VITE_CLICKHOUSE_USE_ADVANCED: "true" # Enable advanced features
VITE_CLICKHOUSE_CUSTOM_PATH: "/custom/path" # Optional: Custom HTTP path
VITE_CLICKHOUSE_REQUEST_TIMEOUT: "30000" # Optional: Request timeout in milliseconds
```
Or using Docker run with advanced options:
```bash
docker run --name ch-ui -p 5521:5521 \
-e VITE_CLICKHOUSE_URL=http://your-clickhouse-server:8123 \
-e VITE_CLICKHOUSE_USER=your-username \
-e VITE_CLICKHOUSE_PASS=your-password \
-e VITE_CLICKHOUSE_USE_ADVANCED=true \
-e VITE_CLICKHOUSE_CUSTOM_PATH=/custom/path \
-e VITE_CLICKHOUSE_REQUEST_TIMEOUT=30000 \
ghcr.io/caioricciuti/ch-ui:latest
```
### Option 2: Build from Source
#### Prerequisites
- Node.js >= 20.x
- npm >= 10.x
#### Installation Steps
```bash
# Clone the repository
git clone https://github.com/caioricciuti/ch-ui.git
# Navigate to project directory
cd ch-ui
# Install dependencies
npm install
# Build the project
npm run build
# Start for development
npm run dev
# Start for production
npm run preview
```
## 🧪 Development Environment
### Local ClickHouse Instance
For development purposes, you can run a local ClickHouse instance using Docker:
```bash
# Start ClickHouse
docker-compose -f docker-compose-dev.yml up -d
# Stop ClickHouse
docker-compose -f docker-compose-dev.yml down
```
Default credentials:
- URL: http://localhost:8123
- Username: dev
- Password: dev
Data is persisted in `.clickhouse_local_data` directory.
## 🔒 Security Recommendations
### Production Deployment
When deploying CH-UI in a production environment, consider the following security measures:
1. **Reverse Proxy Setup**
- Use Nginx/Apache as a reverse proxy
- Enable HTTPS
- Implement authentication
2. **Network Security**
- Run on a private network when possible
- Use VPN for remote access
- Implement IP whitelisting
### Example Nginx Configuration with Basic Auth
```nginx
server {
listen 80;
server_name your-domain.com;
location / {
auth_basic "Restricted Access";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://localhost:5521;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
```
## 📚 Documentation
For detailed documentation, visit our [official documentation](https://ch-ui.com/docs/getting-started?utm_source=ch-ui&utm_medium=gitHubReadme).
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## ❤️ Sponsors
Iberodata - Empowering businesses with data-driven solutions
## ☕ Support the Project
If you find CH-UI helpful, consider supporting its development:
Your support helps maintain and improve CH-UI! ✨
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE.md) file for details.