Build a fully functional, multi-page Next.js MVP application called 'Kernel Watch' that monitors Linux kernel updates and their impact on PostgreSQL performance. The application will provide automated detection, analysis, and alerting for performance regressions caused by kernel changes.
**PROJECT OVERVIEW:**
Kernel Watch addresses the critical problem faced by system administrators, DevOps engineers, and DBAs where Linux kernel updates can unexpectedly and significantly degrade PostgreSQL database performance, leading to service outages or data integrity issues. The core value proposition is to automate the detection and analysis of these performance regressions, providing timely alerts and actionable insights to prevent or mitigate such issues. This saves valuable engineering time spent on manual log analysis and firefighting, ensuring database stability and application uptime.
**TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL adapter)
- **Database:** PostgreSQL
- **UI Components:** shadcn/ui
- **Authentication:** NextAuth.js (or Lucia Auth for more flexibility)
- **State Management:** React Context API / Zustand (for global state like auth, notifications)
- **Charting:** Recharts (or Chart.js)
- **API Layer:** Server Actions and Route Handlers
- **Deployment:** Vercel (recommended)
- **Other:** Axios (for potential external API calls), Date-fns (date formatting)
**DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
1. **`users` table:**
* `id` (UUID, primary key)
* `name` (VARCHAR)
* `email` (VARCHAR, unique)
* `emailVerified` (TIMESTAMPZ)
* `image` (VARCHAR)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
2. **`accounts` table:** (For NextAuth.js)
* `id` (BIGSERIAL, primary key)
* `userId` (UUID, foreign key to `users.id`)
* `type` (VARCHAR) - e.g., 'oauth', 'email'
* `provider` (VARCHAR)
* `providerAccountId` (VARCHAR)
* `refresh_token` (TEXT)
* `access_token` (TEXT)
* `expires_at` (BIGINT)
* `token_type` (VARCHAR)
* `scope` (VARCHAR)
* `id_token` (TEXT)
* `session_state` (VARCHAR)
3. **`sessions` table:** (For NextAuth.js)
* `id` (BIGSERIAL, primary key)
* `sessionToken` (VARCHAR, unique)
* `userId` (UUID, foreign key to `users.id`)
* `expires` (TIMESTAMPZ)
4. **`verificationTokens` table:** (For NextAuth.js)
* `identifier` (VARCHAR)
* `token` (VARCHAR, unique)
* `expires` (TIMESTAMPZ)
5. **`servers` table:**
* `id` (UUID, primary key)
* `userId` (UUID, foreign key to `users.id`)
* `name` (VARCHAR, e.g., 'Production DB Server')
* `ipAddress` (VARCHAR, unique)
* `agentPort` (INTEGER, default 8080) - Port for the monitoring agent
* `kernelVersion` (VARCHAR)
* `osVersion` (VARCHAR)
* `pgVersion` (VARCHAR)
* `status` (VARCHAR, e.g., 'active', 'inactive', 'alerting')
* `lastCheckIn` (TIMESTAMPZ)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
6. **`kernelVersions` table:** (To track historical kernel versions on a server)
* `id` (UUID, primary key)
* `serverId` (UUID, foreign key to `servers.id`)
* `version` (VARCHAR)
* `detectedAt` (TIMESTAMPZ, default now())
* `isUpdate` (BOOLEAN, default false) - Indicates if this is a new version after a potential update
7. **`performanceMetrics` table:**
* `id` (BIGSERIAL, primary key)
* `serverId` (UUID, foreign key to `servers.id`)
* `timestamp` (TIMESTAMPZ, default now())
* `metricName` (VARCHAR, e.g., 'cpu_utilization', 'db_connections', 'avg_query_time_ms', 'disk_io_wait_ms', 'throughput_ops_sec')
* `metricValue` (FLOAT)
8. **`alerts` table:**
* `id` (UUID, primary key)
* `serverId` (UUID, foreign key to `servers.id`)
* `type` (VARCHAR, e.g., 'performance_degradation', 'kernel_update_detected')
* `message` (TEXT)
* `severity` (VARCHAR, e.g., 'low', 'medium', 'high', 'critical')
* `status` (VARCHAR, e.g., 'open', 'resolved', 'acknowledged')
* `detectedAt` (TIMESTAMPZ, default now())
* `resolvedAt` (TIMESTAMPZ)
**CORE FEATURES & USER FLOW:**
1. **User Authentication:**
* **Flow:** User visits the landing page. Clicks 'Sign Up' or 'Login'. Presented with email/password form and OAuth options (Google, GitHub). Upon successful login, user is redirected to the dashboard. Upon sign up, email verification might be required (optional for MVP).
* **Details:** Use NextAuth.js. Secure session management using HttpOnly cookies. Handle sign-in, sign-out, and potentially password reset flows.
2. **Server Onboarding:**
* **Flow:** Authenticated user navigates to 'Servers' page. Clicks 'Add Server'. A modal or form appears asking for Server Name, IP Address, and the Port where the monitoring agent will be accessible. Upon submission, the system attempts to validate connectivity to the agent port. If successful, the server record is created. The user is prompted to install the Kernel Watch agent on their Linux server.
* **Agent Installation:** Provide a clear, step-by-step guide (e.g., using `curl` and `bash`) to download and run the agent on the target Linux server. The agent will be a simple Go or Python script responsible for collecting metrics and kernel version, and sending them to the Kernel Watch backend.
3. **Kernel & Performance Monitoring:**
* **Flow:** The Kernel Watch agent runs periodically (e.g., every 5-15 minutes) on the user's server. It executes commands like `uname -r` to get the kernel version and uses system tools (`/proc`, `vmstat`, `iostat`, `pg_stat_activity`, `pg_stat_database`) or dedicated libraries to collect PostgreSQL performance metrics. This data is sent via HTTP POST requests to the `/api/agent/metrics` endpoint on the Kernel Watch backend.
* **Backend Logic:** The backend receives the data, identifies the server, updates `lastCheckIn`, and logs the kernel version if it's new (creating a record in `kernelVersions` and marking `isUpdate=true` if it differs from the last recorded version). It then processes the performance metrics, storing them in the `performanceMetrics` table. A background job or scheduled task analyzes recent performance metrics against the baseline (e.g., last 7 days before the update) and compares the current metrics after a kernel update. If a significant degradation is detected (e.g., avg query time increased by >20%, I/O wait >15%), an alert is generated and stored in the `alerts` table.
4. **Alerting and Notification:**
* **Flow:** When a critical performance degradation is detected (as per the analysis in step 3), a new record is created in the `alerts` table with `status='open'`. The system checks user's notification preferences (initially, just email). An email is sent to the user informing them about the alert, the affected server, the nature of the degradation, and a link to the detailed view. If Slack integration is enabled (future feature), a message is also posted to a configured channel.
* **User Interaction:** Users can view alerts on their dashboard and 'Alerts' page. They can acknowledge or resolve alerts (updating the status in the `alerts` table).
5. **Dashboard & Reporting:**
* **Flow:** Logged-in users land on the dashboard. The dashboard displays a summary: total servers monitored, active alerts, recent kernel updates detected. It features cards showing key performance indicators (KPIs) like average query time and CPU utilization across all servers. Users can click 'View All Servers' to go to the Servers page, or click on a specific server to see its detailed performance history and alerts.
* **Server Detail View:** On a server's detail page, users see the current kernel version, OS, PostgreSQL version, and a timeline graph displaying historical performance metrics. Users can filter metrics by time range and compare performance before and after specific kernel updates.
**API & DATA FETCHING:**
- **`POST /api/agent/metrics`:** (Agent to Backend)
* **Request Body:** `{ serverId: string, agentToken: string, kernelVersion: string, osVersion: string, pgVersion: string, metrics: [{ metricName: string, metricValue: number, timestamp: string }] }`
* **Response:** `{ success: boolean, message?: string }`
* **Logic:** Authenticate agent (using `serverId` and potentially a secret token). Validate data. Store metrics. Detect new kernel versions. Trigger performance analysis.
- **Server Actions (Client -> Server -> DB):**
* `addServer(name: string, ipAddress: string, agentPort: number)`: Creates a new server entry.
* `deleteServer(serverId: string)`: Removes a server and associated data.
* `resolveAlert(alertId: string)`: Updates alert status to 'resolved'.
* `acknowledgeAlert(alertId: string)`: Updates alert status to 'acknowledged'.
- **Route Handlers (API Routes for fetching data for UI):**
* **`GET /api/servers`:** Fetches list of servers for the logged-in user.
* **`GET /api/servers/[serverId]`:** Fetches detailed info and performance metrics for a specific server.
* **`GET /api/alerts`:** Fetches list of alerts for the logged-in user.
- **Data Fetching in Components:** Use Server Components for initial data load where possible. Use Client Components with `fetch` or libraries like SWR for dynamic data, real-time updates, and forms. Leverage Server Actions for mutations.
**COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/` (Root Layout & Global Styles)**
* `layout.tsx`: Main layout with Navbar, Footer, global providers.
* `page.tsx`: Landing Page.
* `auth/`:
* `signin/page.tsx`: Sign-in form.
* `signup/page.tsx`: Sign-up form.
* `dashboard/`:
* `page.tsx`: Main dashboard - overview, KPIs, recent alerts.
* `layout.tsx`: Dashboard-specific layout (sidebar navigation).
* `servers/`:
* `page.tsx`: List of all servers.
* `[serverId]/`:
* `page.tsx`: Detailed view for a single server (metrics, kernel history, alerts).
* `loading.tsx`: Loading UI for server details.
* `alerts/`:
* `page.tsx`: List of all alerts, filterable/sortable.
* `settings/`:
* `page.tsx`: User settings (profile, notification preferences - MVP: email only).
* `api/` (Route Handlers)
* `agent/metrics/route.ts`: POST endpoint for agent data submission.
* `auth/[...nextauth]/route.ts`: NextAuth.js handler.
* `servers/route.ts`: GET handler for server list.
* `servers/[serverId]/route.ts`: GET handler for specific server data.
* `alerts/route.ts`: GET handler for alert list.
- **`components/`:**
* `ui/`: Re-exports from shadcn/ui (Button, Card, Input, Sheet, Table, Dialog, Alert, etc.).
* `layout/`: Navbar, Sidebar, Footer, PageWrapper.
* `charts/`: PerformanceMetricChart (reusable chart component).
* `forms/`: AddServerForm, SettingsForm.
* `servers/`: ServerListItem, ServerStatusBadge.
* `alerts/`: AlertItem, AlertSeverityBadge.
* `common/`: LoadingSpinner, ErrorDisplay, EmptyState.
**UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** Modern, Clean, Professional with a touch of technical sophistication. Focus on clarity and data visualization.
- **Color Palette:**
* Primary (Brand): Deep Blue (`#1e3a8a` - slate-800)
* Secondary (Accents, CTAs): Teal (`#14b8a6` - teal-500)
* Background: Off-white/Light Gray (`#f8fafc` - stone-50)
* Dark Background Elements (Cards, Sidebars): Slightly darker gray (`#f1f5f9` - stone-100)
* Text (Primary): Dark Gray (`#1e293b` - slate-900)
* Text (Secondary): Medium Gray (`#64748b` - slate-500)
* Alerts:
* High/Critical: Red (`#ef4444` - red-500)
* Medium: Orange (`#f97316` - orange-500)
* Low: Yellow (`#f59e0b` - amber-500)
- **Typography:**
* Headings: Inter (Bold, Semibold)
* Body Text: Inter (Regular)
- **Layout:** Sidebar navigation on the left for authenticated users. Main content area on the right. Use `max-w-7xl` and `mx-auto` for content centering. Utilize Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`) extensively.
- **Key Sections:** Dashboard cards should be visually distinct. Tables should be clean and sortable. Charts should be interactive with tooltips.
- **Responsive Rules:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Ensure all data is readable on all screen sizes.
**ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/slide-in animations between pages using `TwillUI` or Framer Motion (if needed, but keep it minimal for MVP).
- **Hover Effects:** Slight scale-up or background color change on interactive elements like buttons and list items.
- **Loading States:** Skeleton loaders or spinners (using shadcn/ui primitives) for data fetching.
- **Chart Transitions:** Smooth transitions when data updates in charts.
**EDGE CASES:**
- **Authentication:** Handle expired sessions, re-authentication prompts. Secure API routes. Protect sensitive data.
- **Agent Connectivity:** What if the agent is offline or unreachable? Display 'inactive' status for the server, stop generating alerts, and notify the user about the connectivity issue.
- **Empty States:** Display user-friendly messages and clear calls-to-action when lists (Servers, Alerts) are empty or no data is available (e.g., 'No servers added yet. Click "Add Server" to get started.').
- **Data Validation:** Rigorous validation on all incoming data from the agent and user inputs (forms, API requests). Use libraries like Zod with Drizzle.
- **Error Handling:** Graceful error handling on both client and server. Display user-friendly error messages. Log detailed errors on the server.
- **First-time User:** Guide new users through the onboarding process (adding a server, installing the agent).
- **Kernel Update Analysis Logic:** Define clear thresholds for performance degradation (e.g., percentage change, absolute value thresholds for metrics like I/O wait). Handle cases where performance *improves* after an update.
**SAMPLE DATA:**
1. **User:**
* `id`: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
* `name`: 'Alice Developer'
* `email`: 'alice@example.com'
2. **Server (Active):**
* `id`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `userId`: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
* `name`: 'Production DB Cluster'
* `ipAddress`: '192.168.1.100'
* `kernelVersion`: '5.15.0-76-generic'
* `pgVersion`: '14.8'
* `status`: 'active'
* `lastCheckIn`: '2024-07-27T10:30:00Z'
3. **Server (Inactive - Agent Down):**
* `id`: '11223344-5566-7788-9900-aabbccddeeff'
* `userId`: 'a1b2c3d4-e5f6-7890-1234-567890abcdef'
* `name`: 'Staging DB'
* `ipAddress`: '192.168.1.101'
* `kernelVersion`: '5.10.0-100-generic'
* `pgVersion`: '13.12'
* `status`: 'inactive'
* `lastCheckIn`: '2024-07-26T08:00:00Z' (More than 30 mins ago)
4. **Kernel Version Record (Update):**
* `id`: '98765432-10fe-dcba-4567-890fedcba987'
* `serverId`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `version`: '5.15.0-78-generic'
* `detectedAt`: '2024-07-27T11:00:00Z'
* `isUpdate`: true
5. **Performance Metric (High CPU):**
* `id`: 1050
* `serverId`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `timestamp`: '2024-07-27T11:05:00Z'
* `metricName`: 'cpu_utilization'
* `metricValue`: 95.5
6. **Performance Metric (Normal CPU):**
* `id`: 1040
* `serverId`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `timestamp`: '2024-07-27T10:55:00Z'
* `metricName`: 'cpu_utilization'
* `metricValue`: 30.2
7. **Alert (Performance Degradation):**
* `id`: 'c1d2e3f4-a5b6-7890-1234-567890abcdef'
* `serverId`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `type`: 'performance_degradation'
* `message`: 'CPU utilization increased by 65% after kernel update to 5.15.0-78-generic.'
* `severity`: 'high'
* `status`: 'open'
* `detectedAt`: '2024-07-27T11:10:00Z'
8. **Alert (Kernel Update Detected):**
* `id`: '9a8b7c6d-5e4f-3a2b-1c0d-9e8f7a6b5c4d'
* `serverId`: 'f1e2d3c4-b5a6-0987-4321-fedcba098765'
* `type`: 'kernel_update_detected'
* `message`: 'Linux kernel updated to 5.15.0-78-generic.'
* `severity`: 'low'
* `status`: 'open'
* `detectedAt`: '2024-07-27T11:01:00Z'
---
**Turkish Translations for UI:**
- **App Title:** Kernel Watch
- **Navbar:** Dashboard, Sunucular, Uyarılar, Ayarlar, Oturum Kapat
- **Dashboard:** Genel Bakış, Aktif Uyarılar, Son Kernel Güncellemeleri, CPU Kullanımı, Veritabanı Bağlantıları, Ortalama Sorgu Süresi
- **Servers Page:** Sunucularım, Sunucu Ekle, Adı, IP Adresi, Kernel Sürümü, OS Sürümü, PG Sürümü, Durum, Son Kontrol, Eylemler
- **Add Server Modal:** Yeni Sunucu Ekle, Sunucu Adı, IP Adresi, Agent Portu, Kaydet, İptal
- **Server Detail Page:** Sunucu Detayı, Genel Bilgi, Performans Geçmişi, Uyarılar, Metrikler, Zaman Aralığı
- **Alerts Page:** Uyarılar, Tüm Uyarılar, Durum, Ciddiyet, Tarih, Sunucu, Mesaj, Onayla, Çözüldü
- **Settings Page:** Ayarlar, Profil Bilgileri, E-posta, Bildirim Ayarları
- **Buttons:** Ekle, Güncelle, Sil, Görüntüle, Oturum Aç, Kayıt Ol
- **Labels:** Sunucu Adı, IP Adresi, Kernel Sürümü, Metrik Adı, Değer
- **Placeholders:** Sunucu IP adresini girin...
- **Empty States:** Henüz sunucu eklenmedi. Başlamak için "Sunucu Ekle"ye tıklayın.
- **Alert Messages:** Performans Düşüşü Tespit Edildi, Kernel Güncellemesi Algılandı, Sunucu Bağlantısı Kayboldu.