Skip to content

feat: improve logs UI, refresh UX, and documentation #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kalayciburak merged 1 commit into from
Oct 30, 2025
Merged

feat: improve logs UI, refresh UX, and documentation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 80 additions & 14 deletions README-TR.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ docker run -d -p 5000:5000 \
-e "ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr" \
-e "COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr" \
-e "COOLIFY_TOKEN=coolify_api_token_iniz" \
-e "DASHBOARD_USER_TYPE=admin" \
torukobyte/coolify-dashboard:latest
```

Expand Down Expand Up @@ -64,6 +65,7 @@ JWT_SECRET=jwt_secret_anahtariniz
ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr
COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr
COOLIFY_TOKEN=coolify_api_token_iniz
DASHBOARD_USER_TYPE=admin
```

### Adım 4: 2FA Secret Oluşturun
Expand All @@ -83,18 +85,37 @@ Oluşturulan secret'ı kopyalayıp ortam değişkenlerinde `ADMIN_2FA_SECRET` ol

### Adım 5: Coolify API Token Oluşturun

**Önemli**: Dağıtıma başlamadan önce, uygun izinlere sahip Coolify API token'ı oluşturun:
**Önemli**: Dağıtıma başlamadan önce, kullanıcı tipinize göre uygun izinlere sahip Coolify API token'ı oluşturun:

#### Görüntüleyici Modu (Sadece Okuma Erişimi)
1. Coolify instance ayarlarınıza gidin
2. **API Tokens** bölümüne tıklayın
2. **API Tokens** bölümüne gidin
3. **"Create New Token"** butonuna tıklayın
4. Aşağıdaki izinleri seçin:
- **read**: Tüm okuma izinlerini aktifleştirin
- **read:sensitive**: Hassas veri okuma erişimini aktifleştirin
5. Oluşturulan token'ı kopyalayın ve `COOLIFY_TOKEN` olarak kullanın
6. Ortam değişkenlerinde `DASHBOARD_USER_TYPE=viewer` olarak ayarlayın

**Not**: `read:sensitive` izni, ortam değişkenleri ve hassas yapılandırma verileri dahil olmak üzere detaylı kaynak bilgilerine erişim için gereklidir.

#### Admin Modu (Tam Kontrol)
1. Coolify instance ayarlarınıza gidin
2. **API Tokens** bölümüne gidin
3. **"Create New Token"** butonuna tıklayın
4. Aşağıdaki izinleri seçin:
- **write**: Tüm yazma izinlerini aktifleştirin (okuma erişimini de içerir)
5. Oluşturulan token'ı kopyalayın ve `COOLIFY_TOKEN` olarak kullanın
6. Ortam değişkenlerinde `DASHBOARD_USER_TYPE=admin` olarak ayarlayın

**Not**: `write` izni admin özellikleri için **zorunludur**. Bu özellikler şunları içerir:
- Servisleri başlatma ve durdurma
- Servisleri silme
- Filtreleme ile canlı servis loglarını görüntüleme
- Görüntüleyici modunda bulunan tüm okuma işlemleri

**Uyarı**: Admin modunu yalnızca güvendiğiniz kullanıcılarla kullanın, çünkü Coolify servisleriniz üzerinde tam kontrol sağlar.

### Adım 6: 2FA Kurulumu (Tek Seferlik)

Dağıtımdan sonra, İki Faktörlü Doğrulamayı kurun. **Bu işlem sadece bir kez yapılabilir!**
Expand Down Expand Up @@ -273,15 +294,17 @@ Yeni QR kodunu kimlik doğrulama uygulamanızla tarayın.

## Ortam Değişkenleri

| Değişken | Açıklama | Örnek | Gerekli |
| ------------------ | --------------------------------------------------------- | ---------------------------------------- | ------- |
| `ADMIN_USERNAME` | Dashboard yönetici kullanıcı adı | `admin` | Evet |
| `ADMIN_PASSWORD` | Dashboard yönetici şifresi | `guvenli_sifre` | Evet |
| `ADMIN_2FA_SECRET` | İki Faktörlü Doğrulama secret (Base32 encoded) | `npm run generate-2fa` ile oluşturulur | Evet |
| `JWT_SECRET` | JWT token üretimi için gizli anahtar | `rastgele_gizli_anahtar` | Evet |
| `ALLOWED_ORIGINS` | CORS izin verilen kaynaklar (virgülle ayrılmış) | `https://dashboard.kalayciburak.com.tr` | Evet |
| `COOLIFY_BASE_URL` | Coolify instance temel URL'i | `https://coolify.kalayciburak.com.tr` | Evet |
| `COOLIFY_TOKEN` | read + read:sensitive yetkisine sahip Coolify API token'ı | `api_token_iniz` | Evet |
| Değişken | Açıklama | Örnek | Gerekli | Varsayılan |
| --------------------- | -------------------------------------------------------------------------------------- | --------------------------------------- | ------- | ------------ |
| `ADMIN_USERNAME` | Dashboard yönetici kullanıcı adı | `admin` | Evet | - |
| `ADMIN_PASSWORD` | Dashboard yönetici şifresi | `guvenli_sifre` | Evet | - |
| `ADMIN_2FA_SECRET` | İki Faktörlü Doğrulama secret (Base32 encoded) | `npm run generate-2fa` ile oluşturun | Evet | - |
| `JWT_SECRET` | JWT token üretimi için gizli anahtar | `rastgele_gizli_anahtar` | Evet | - |
| `ALLOWED_ORIGINS` | CORS izin verilen kaynaklar (virgülle ayrılmış) | `https://dashboard.kalayciburak.com.tr` | Evet | - |
| `COOLIFY_BASE_URL` | Coolify instance temel URL'i | `https://coolify.kalayciburak.com.tr` | Evet | - |
| `COOLIFY_TOKEN` | Coolify API token (viewer için read+read:sensitive, admin için write) | `your_api_token` | Evet | - |
| `DASHBOARD_USER_TYPE` | Kullanıcı erişim seviyesi: `viewer` (sadece okuma) veya `admin` (tam kontrol) | `admin` veya `viewer` | Hayır | `viewer` |
| `NODE_ENV` | Ortam modu: `development` test için 2FA'yı devre dışı bırakır | `development` veya `production` | Hayır | `production` |

---

Expand All @@ -294,12 +317,30 @@ Coolify kullanırken, her bir uygulama ve servisin URL'lerini ve temel bilgileri
## Özellikler

- **İki Faktörlü Doğrulama (2FA)**: TOTP tabanlı güvenli kimlik doğrulama
- **Rol Tabanlı Erişim Kontrolü**: Görüntüleyici modu (salt okunur) ve Admin modu (tam kontrol)
- **Admin Servis Yönetimi**:
- Tek tıkla servisleri başlatma ve durdurma
- Servisleri doğrudan dashboard'dan silme
- Gerçek zamanlı servis loglarını izleme
- Anahtar kelime ile log filtreleme
- Otomatik kaydırma özelliği
- Geçen süre göstergeli gerçek zamanlı işlem yükleme durumları
- Animasyonlu çerçeveler ve ikonlarla görsel geri bildirim
- Gerçek zamanlı geçen süre gösterimi ile modern glassmorphism durum banner'ı
- Yerelleştirilmiş zaman formatı (Türkçe'de "1d 30s", İngilizce'de "1m 30s" görünür)
- **Akıllı State Yönetimi**:
- **Zustand Store**: Hafif, merkezi state yönetimi
- **Adaptif Polling**: Kaynak verimliliği için akıllı yoklama aralıkları (5s → 30s)
- **İyimser Güncellemeler**: API onayından önce anında UI geri bildirimi
- **Sessiz Arka Plan Senkronizasyonu**: Kullanıcı deneyimini bozmadan veri güncelleme
- **İşleme Özel Yükleme**: Kaynak başına, işlem başına yükleme durumları
- **Otomatik Temizleme**: Uygun interval temizliği ile bellek sızıntılarını önler
- **Çok Dilli Destek**: İngilizce ve Türkçe arasında sorunsuz geçiş
- **Responsive Tasarım**: Masaüstü ve mobil cihazlar için optimize edilmiş modern arayüz
- **Gerçek Zamanlı İzleme**: Kaynak durumu ve sağlığını gerçek zamanlı takip
- **Güvenli Kimlik Doğrulama**: JWT tabanlı güvenli token yönetimi
- **Kaynak İzleme**: Uygulamalar, servisler ve veritabanlarını izleme
- **Modern Teknoloji Yığını**: React, Tailwind CSS ve Express.js ile geliştirilmiştir
- **Modern Teknoloji Yığını**: React 19, Zustand, Tailwind CSS 4 ve Express.js ile geliştirilmiştir

---

Expand All @@ -311,6 +352,7 @@ coolify-dashboard/
│ ├── src/
│ │ ├── components/ # Yeniden kullanılabilir UI bileşenleri
│ │ ├── pages/ # Sayfa bileşenleri
│ │ ├── store/ # Zustand state yönetimi
│ │ ├── api/ # API client servisleri
│ │ ├── services/ # İş mantığı katmanı
│ │ ├── utils/ # Yardımcı fonksiyonlar
Expand Down Expand Up @@ -345,10 +387,34 @@ cd coolify-dashboard
# Bağımlılıkları yükleyin
npm install

# Geliştirme sunucusunu başlatın
npm run dev
# server/.env dosyasını oluşturun ve gerekli değişkenleri ayarlayın
# Tüm seçenekler için "Ortam Değişkenleri" bölümüne bakın

# Geliştirme sunucusunu başlatın (2FA devre dışı)
NODE_ENV=development npm run dev
```

### Geliştirme Modu (2FA Bypass)

Yerel geliştirmeyi kolaylaştırmak için, `NODE_ENV=development` ayarlayarak İki Faktörlü Doğrulamayı devre dışı bırakabilirsiniz:

```bash
# Linux/macOS
NODE_ENV=development npm run dev

# Windows (PowerShell)
$env:NODE_ENV="development"; npm run dev

# Windows (CMD)
set NODE_ENV=development && npm run dev
```

**Önemli Notlar:**
- `NODE_ENV=development` ayarlandığında 2FA **otomatik olarak devre dışı** bırakılır
- Production'da, 2FA güvenliğini atladığı için **asla** `NODE_ENV=development` kullanmayın
- `NODE_ENV=development` olmadan, 2FA her zaman gereklidir (varsayılan production davranışı)
- Kalıcı dev modu için `server/.env` dosyanıza `NODE_ENV=development` ekleyebilirsiniz

### Mevcut Script'ler

| Komut | Açıklama |
Expand Down
92 changes: 79 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ docker run -d -p 5000:5000 \
-e "ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr" \
-e "COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr" \
-e "COOLIFY_TOKEN=your_coolify_api_token" \
-e "DASHBOARD_USER_TYPE=admin" \
torukobyte/coolify-dashboard:latest
```

Expand Down Expand Up @@ -64,6 +65,7 @@ JWT_SECRET=your_jwt_secret_key
ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr
COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr
COOLIFY_TOKEN=your_coolify_api_token
DASHBOARD_USER_TYPE=admin
```

### Step 4: Generate 2FA Secret
Expand All @@ -83,18 +85,37 @@ Copy the generated secret and use it as `ADMIN_2FA_SECRET` in your environment v

### Step 5: Generate Coolify API Token

**Important**: Before deploying, generate your Coolify API token with proper permissions:
**Important**: Before deploying, generate your Coolify API token with proper permissions based on your user type:

#### For Viewer Mode (Read-Only Access)
1. Navigate to your Coolify instance settings
2. Go to **API Tokens** section
3. Click **"Create New Token"**
4. Select the following permissions:
- **read**: Enable all read permissions
- **read:sensitive**: Enable sensitive data read access
5. Copy the generated token and use it as `COOLIFY_TOKEN`
6. Set `DASHBOARD_USER_TYPE=viewer` in environment variables

**Note**: The `read:sensitive` permission is required to access detailed resource information, including environment variables and sensitive configuration data.

#### For Admin Mode (Full Control)
1. Navigate to your Coolify instance settings
2. Go to **API Tokens** section
3. Click **"Create New Token"**
4. Select the following permissions:
- **write**: Enable all write permissions (includes read access)
5. Copy the generated token and use it as `COOLIFY_TOKEN`
6. Set `DASHBOARD_USER_TYPE=admin` in environment variables

**Note**: The `write` permission is **required** for admin features, which include:
- Starting and stopping services
- Deleting services
- Viewing live service logs with filtering
- All read operations available in viewer mode

**Warning**: Only use admin mode with users you trust, as it grants full control over your Coolify services.

### Step 6: Setup 2FA (One-Time Only)

After deployment, setup Two-Factor Authentication. **This can only be done once!**
Expand Down Expand Up @@ -273,15 +294,17 @@ Scan the new QR code with your authenticator app.

## Environment Variables

| Variable | Description | Example | Required |
| ------------------ | --------------------------------------------------- | --------------------------------------- | -------- |
| `ADMIN_USERNAME` | Dashboard administrator username | `admin` | Yes |
| `ADMIN_PASSWORD` | Dashboard administrator password | `secure_password` | Yes |
| `ADMIN_2FA_SECRET` | Two-Factor Authentication secret (Base32 encoded) | Generate using `npm run generate-2fa` | Yes |
| `JWT_SECRET` | Secret key for JWT token generation | `random_secret_key` | Yes |
| `ALLOWED_ORIGINS` | CORS allowed origins (comma-separated for multiple) | `https://dashboard.kalayciburak.com.tr` | Yes |
| `COOLIFY_BASE_URL` | Your Coolify instance base URL | `https://coolify.kalayciburak.com.tr` | Yes |
| `COOLIFY_TOKEN` | Coolify API token with read + read:sensitive access | `your_api_token` | Yes |
| Variable | Description | Example | Required | Default |
| --------------------- | ----------------------------------------------------------------- | --------------------------------------- | -------- | ------------ |
| `ADMIN_USERNAME` | Dashboard administrator username | `admin` | Yes | - |
| `ADMIN_PASSWORD` | Dashboard administrator password | `secure_password` | Yes | - |
| `ADMIN_2FA_SECRET` | Two-Factor Authentication secret (Base32 encoded) | Generate using `npm run generate-2fa` | Yes | - |
| `JWT_SECRET` | Secret key for JWT token generation | `random_secret_key` | Yes | - |
| `ALLOWED_ORIGINS` | CORS allowed origins (comma-separated for multiple) | `https://dashboard.kalayciburak.com.tr` | Yes | - |
| `COOLIFY_BASE_URL` | Your Coolify instance base URL | `https://coolify.kalayciburak.com.tr` | Yes | - |
| `COOLIFY_TOKEN` | Coolify API token (read+read:sensitive for viewer, write for admin) | `your_api_token` | Yes | - |
| `DASHBOARD_USER_TYPE` | User access level: `viewer` (read-only) or `admin` (full control) | `admin` or `viewer` | No | `viewer` |
| `NODE_ENV` | Environment mode: `development` disables 2FA for easier testing | `development` or `production` | No | `production` |

---

Expand All @@ -294,12 +317,30 @@ While using Coolify, I found myself constantly clicking through each application
## Features

- **Two-Factor Authentication (2FA)**: Enhanced security with TOTP-based authentication
- **Role-Based Access Control**: Viewer mode (read-only) and Admin mode (full control)
- **Admin Service Management**:
- Start and stop services with one click
- Delete services directly from the dashboard
- View live service logs with real-time streaming
- Filter logs with keyword search
- Auto-scroll toggle for log viewing
- Real-time action loading states with elapsed time indicators
- Visual feedback with animated borders and icons
- Modern glassmorphism status banner with real-time elapsed time display
- Localized time format (shows "1d 30s" in Turkish, "1m 30s" in English)
- **Intelligent State Management**:
- **Zustand Store**: Lightweight, centralized state management
- **Adaptive Polling**: Smart polling intervals (5s → 30s) for resource efficiency
- **Optimistic Updates**: Instant UI feedback before API confirmation
- **Silent Background Sync**: Updates data without disrupting user experience
- **Action-Specific Loading**: Per-resource, per-action loading states
- **Auto-Cleanup**: Prevents memory leaks with proper interval cleanup
- **Multi-language Support**: Seamless switching between English and Turkish
- **Responsive Design**: Modern UI optimized for desktop and mobile devices
- **Real-time Monitoring**: Track resource status and health in real-time
- **Secure Authentication**: JWT-based authentication with secure token management
- **Resource Monitoring**: Monitor applications, services, and databases
- **Modern Tech Stack**: Built with React, Tailwind CSS, and Express.js
- **Modern Tech Stack**: Built with React 19, Zustand, Tailwind CSS 4, and Express.js

---

Expand All @@ -311,6 +352,7 @@ coolify-dashboard/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── store/ # Zustand state management
│ │ ├── api/ # API client services
│ │ ├── services/ # Business logic layer
│ │ ├── utils/ # Utility functions
Expand Down Expand Up @@ -345,10 +387,34 @@ cd coolify-dashboard
# Install dependencies
npm install

# Start development server
npm run dev
# Create server/.env file with required variables
# See "Environment Variables" section below for all options

# Start development server (with 2FA disabled)
NODE_ENV=development npm run dev
```

### Development Mode (2FA Bypass)

For easier local development, you can disable Two-Factor Authentication by setting `NODE_ENV=development`:

```bash
# Linux/macOS
NODE_ENV=development npm run dev

# Windows (PowerShell)
$env:NODE_ENV="development"; npm run dev

# Windows (CMD)
set NODE_ENV=development && npm run dev
```

**Important Notes:**
- 2FA is **automatically disabled** when `NODE_ENV=development` is set
- In production, **never** set `NODE_ENV=development` as this bypasses 2FA security
- Without `NODE_ENV=development`, 2FA is always required (default production behavior)
- You can also add `NODE_ENV=development` to your `server/.env` file for persistent dev mode

### Available Scripts

| Command | Description |
Expand Down
3 changes: 2 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
"react-router-dom": "^7.9.4",
"react-syntax-highlighter": "^15.6.6",
"react-tooltip": "^5.29.1",
"tailwindcss": "^4.1.14"
"tailwindcss": "^4.1.14",
"zustand": "^5.0.8"
},
"devDependencies": {
"@eslint/js": "^9.36.0",
Expand Down
25 changes: 25 additions & 0 deletions client/src/api/coolify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,28 @@ export const fetchAllResources = async () => {

return [...applications, ...services, ...databases];
};

export const getUserType = async () => {
const response = await api.get("/user-type");
return response.data.userType;
};

export const startResource = async (type, uuid) => {
const response = await api.post(`/${type}s/${uuid}/start`);
return response.data;
};

export const stopResource = async (type, uuid) => {
const response = await api.post(`/${type}s/${uuid}/stop`);
return response.data;
};

export const deleteResource = async (type, uuid) => {
const response = await api.delete(`/${type}s/${uuid}`);
return response.data;
};

export const getResourceLogs = async (type, uuid) => {
const response = await api.get(`/${type}s/${uuid}/logs`);
return response.data;
};
Loading