Skip to content

Commit d43457e

Browse files
kalayciburakkalayciburak
committed
feat: improve logs UI, refresh UX, and documentation
 - Add syntax highlighting to logs modal (IPs, status codes, URLs, etc.) - Remove "Clear Logs" button (filtering is sufficient) - Fix refresh button UX: show "Refreshing..." and keep content visible - Match admin controls styling with other detail sections - Update README with admin/viewer mode and development environment docs - Add missing environment variables (DASHBOARD_USER_TYPE, NODE_ENV) - Fix ESLint errors and apply formatting
1 parent d97c15b commit d43457e

22 files changed

Lines changed: 1878 additions & 126 deletions

‎README-TR.md‎

Lines changed: 80 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ docker run -d -p 5000:5000 \
2727
-e "ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr" \
2828
-e "COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr" \
2929
-e "COOLIFY_TOKEN=coolify_api_token_iniz" \
30+
-e "DASHBOARD_USER_TYPE=admin" \
3031
torukobyte/coolify-dashboard:latest
3132
```
3233

@@ -64,6 +65,7 @@ JWT_SECRET=jwt_secret_anahtariniz
6465
ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr
6566
COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr
6667
COOLIFY_TOKEN=coolify_api_token_iniz
68+
DASHBOARD_USER_TYPE=admin
6769
```
6870

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

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

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

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

96100
**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.
97101

102+
#### Admin Modu (Tam Kontrol)
103+
1. Coolify instance ayarlarınıza gidin
104+
2. **API Tokens** bölümüne gidin
105+
3. **"Create New Token"** butonuna tıklayın
106+
4. Aşağıdaki izinleri seçin:
107+
- **write**: Tüm yazma izinlerini aktifleştirin (okuma erişimini de içerir)
108+
5. Oluşturulan token'ı kopyalayın ve `COOLIFY_TOKEN` olarak kullanın
109+
6. Ortam değişkenlerinde `DASHBOARD_USER_TYPE=admin` olarak ayarlayın
110+
111+
**Not**: `write` izni admin özellikleri için **zorunludur**. Bu özellikler şunları içerir:
112+
- Servisleri başlatma ve durdurma
113+
- Servisleri silme
114+
- Filtreleme ile canlı servis loglarını görüntüleme
115+
- Görüntüleyici modunda bulunan tüm okuma işlemleri
116+
117+
**Uyarı**: Admin modunu yalnızca güvendiğiniz kullanıcılarla kullanın, çünkü Coolify servisleriniz üzerinde tam kontrol sağlar.
118+
98119
### Adım 6: 2FA Kurulumu (Tek Seferlik)
99120

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

274295
## Ortam Değişkenleri
275296

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

286309
---
287310

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

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

304345
---
305346

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

348-
# Geliştirme sunucusunu başlatın
349-
npm run dev
390+
# server/.env dosyasını oluşturun ve gerekli değişkenleri ayarlayın
391+
# Tüm seçenekler için "Ortam Değişkenleri" bölümüne bakın
392+
393+
# Geliştirme sunucusunu başlatın (2FA devre dışı)
394+
NODE_ENV=development npm run dev
350395
```
351396

397+
### Geliştirme Modu (2FA Bypass)
398+
399+
Yerel geliştirmeyi kolaylaştırmak için, `NODE_ENV=development` ayarlayarak İki Faktörlü Doğrulamayı devre dışı bırakabilirsiniz:
400+
401+
```bash
402+
# Linux/macOS
403+
NODE_ENV=development npm run dev
404+
405+
# Windows (PowerShell)
406+
$env:NODE_ENV="development"; npm run dev
407+
408+
# Windows (CMD)
409+
set NODE_ENV=development && npm run dev
410+
```
411+
412+
**Önemli Notlar:**
413+
- `NODE_ENV=development` ayarlandığında 2FA **otomatik olarak devre dışı** bırakılır
414+
- Production'da, 2FA güvenliğini atladığı için **asla** `NODE_ENV=development` kullanmayın
415+
- `NODE_ENV=development` olmadan, 2FA her zaman gereklidir (varsayılan production davranışı)
416+
- Kalıcı dev modu için `server/.env` dosyanıza `NODE_ENV=development` ekleyebilirsiniz
417+
352418
### Mevcut Script'ler
353419

354420
| Komut | Açıklama |

‎README.md‎

Lines changed: 79 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ docker run -d -p 5000:5000 \
2727
-e "ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr" \
2828
-e "COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr" \
2929
-e "COOLIFY_TOKEN=your_coolify_api_token" \
30+
-e "DASHBOARD_USER_TYPE=admin" \
3031
torukobyte/coolify-dashboard:latest
3132
```
3233

@@ -64,6 +65,7 @@ JWT_SECRET=your_jwt_secret_key
6465
ALLOWED_ORIGINS=https://dashboard.kalayciburak.com.tr
6566
COOLIFY_BASE_URL=https://coolify.kalayciburak.com.tr
6667
COOLIFY_TOKEN=your_coolify_api_token
68+
DASHBOARD_USER_TYPE=admin
6769
```
6870

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

8486
### Step 5: Generate Coolify API Token
8587

86-
**Important**: Before deploying, generate your Coolify API token with proper permissions:
88+
**Important**: Before deploying, generate your Coolify API token with proper permissions based on your user type:
8789

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

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

102+
#### For Admin Mode (Full Control)
103+
1. Navigate to your Coolify instance settings
104+
2. Go to **API Tokens** section
105+
3. Click **"Create New Token"**
106+
4. Select the following permissions:
107+
- **write**: Enable all write permissions (includes read access)
108+
5. Copy the generated token and use it as `COOLIFY_TOKEN`
109+
6. Set `DASHBOARD_USER_TYPE=admin` in environment variables
110+
111+
**Note**: The `write` permission is **required** for admin features, which include:
112+
- Starting and stopping services
113+
- Deleting services
114+
- Viewing live service logs with filtering
115+
- All read operations available in viewer mode
116+
117+
**Warning**: Only use admin mode with users you trust, as it grants full control over your Coolify services.
118+
98119
### Step 6: Setup 2FA (One-Time Only)
99120

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

274295
## Environment Variables
275296

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

286309
---
287310

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

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

304345
---
305346

@@ -311,6 +352,7 @@ coolify-dashboard/
311352
│ ├── src/
312353
│ │ ├── components/ # Reusable UI components
313354
│ │ ├── pages/ # Page components
355+
│ │ ├── store/ # Zustand state management
314356
│ │ ├── api/ # API client services
315357
│ │ ├── services/ # Business logic layer
316358
│ │ ├── utils/ # Utility functions
@@ -345,10 +387,34 @@ cd coolify-dashboard
345387
# Install dependencies
346388
npm install
347389

348-
# Start development server
349-
npm run dev
390+
# Create server/.env file with required variables
391+
# See "Environment Variables" section below for all options
392+
393+
# Start development server (with 2FA disabled)
394+
NODE_ENV=development npm run dev
350395
```
351396

397+
### Development Mode (2FA Bypass)
398+
399+
For easier local development, you can disable Two-Factor Authentication by setting `NODE_ENV=development`:
400+
401+
```bash
402+
# Linux/macOS
403+
NODE_ENV=development npm run dev
404+
405+
# Windows (PowerShell)
406+
$env:NODE_ENV="development"; npm run dev
407+
408+
# Windows (CMD)
409+
set NODE_ENV=development && npm run dev
410+
```
411+
412+
**Important Notes:**
413+
- 2FA is **automatically disabled** when `NODE_ENV=development` is set
414+
- In production, **never** set `NODE_ENV=development` as this bypasses 2FA security
415+
- Without `NODE_ENV=development`, 2FA is always required (default production behavior)
416+
- You can also add `NODE_ENV=development` to your `server/.env` file for persistent dev mode
417+
352418
### Available Scripts
353419

354420
| Command | Description |

‎client/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"react-router-dom": "^7.9.4",
2828
"react-syntax-highlighter": "^15.6.6",
2929
"react-tooltip": "^5.29.1",
30-
"tailwindcss": "^4.1.14"
30+
"tailwindcss": "^4.1.14",
31+
"zustand": "^5.0.8"
3132
},
3233
"devDependencies": {
3334
"@eslint/js": "^9.36.0",

‎client/src/api/coolify.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,28 @@ export const fetchAllResources = async () => {
6363

6464
return [...applications, ...services, ...databases];
6565
};
66+
67+
export const getUserType = async () => {
68+
const response = await api.get("/user-type");
69+
return response.data.userType;
70+
};
71+
72+
export const startResource = async (type, uuid) => {
73+
const response = await api.post(`/${type}s/${uuid}/start`);
74+
return response.data;
75+
};
76+
77+
export const stopResource = async (type, uuid) => {
78+
const response = await api.post(`/${type}s/${uuid}/stop`);
79+
return response.data;
80+
};
81+
82+
export const deleteResource = async (type, uuid) => {
83+
const response = await api.delete(`/${type}s/${uuid}`);
84+
return response.data;
85+
};
86+
87+
export const getResourceLogs = async (type, uuid) => {
88+
const response = await api.get(`/${type}s/${uuid}/logs`);
89+
return response.data;
90+
};

0 commit comments

Comments
 (0)