mirror of
https://github.com/taylanbakircioglu/flowfish.git
synced 2026-09-16 15:45:14 +00:00
taylanbakircioglu
d7ca50b387
Multi-cluster dependency mapping, real-time network monitoring, impact analysis, and CI/CD integration capabilities. Made-with: Cursor
52 KiB
52 KiB
Flowfish - UI Sayfa Yapısı ve Organizasyon
📋 İçindekiler
Genel Layout
Tüm sayfalar aynı layout yapısını kullanır:
┌─────────────────────────────────────────────────────────────────┐
│ Header (Fixed Top) │
│ - Logo - Cluster Selector - User Menu - Notifications │
├─────────┬───────────────────────────────────────────────────────┤
│ │ │
│ Sidebar │ │
│ (Fixed │ │
│ Left) │ Main Content Area │
│ │ (Scrollable) │
│ - Menu │ │
│ Items │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
Layout Components
1. Header (Top Bar)
- Logo: Flowfish logosu (sol üst), tıklanabilir (Home'a gider)
- Cluster Selector: Dropdown - aktif cluster seçimi
- Search Bar: Global arama (workload, namespace arama)
- Notifications: Bell icon + badge (yeni anomali/change sayısı)
- User Menu: Avatar + dropdown (Profile, Settings, Logout)
2. Sidebar (Sol Navigasyon)
- Collapsible (küçültülebilir)
- Icon + Text mod (küçültüldüğünde sadece icon)
- Menu grupları:
- Dashboard
- Analysis
- Discovery
- Security
- Management
- Settings
3. Main Content
- Breadcrumb navigation
- Page title + action buttons
- Content area (varies by page)
- Footer (optional)
Sayfa Listesi
1. Authentication Pages
- Login
- OAuth Callback
- Password Reset
- Registration (optional)
2. Dashboard Pages
- Home / Overview Dashboard
- Application Dependency Dashboard
- Traffic & Behavior Dashboard
- Security & Risk Dashboard
- Change Timeline Dashboard
- Audit & Activity Dashboard
3. Analysis Pages
- Analysis Wizard (4 steps)
- Analysis List
- Analysis Detail
- Analysis Run History
4. Discovery Pages
- Live Map (Graph View)
- Historical Map / Timeline
- Application Inventory
- Workload Explorer
5. Security Pages
- Anomaly Detection
- Anomaly Details
- Change Detection
- Risk Scores
6. Data Pages
- Import / Export
- Baseline Management
- Graph Snapshots
7. Simulation Pages
- Policy Simulation (What-If)
- Change Simulation (CAP)
- Change Request Details
- Simulation Results
- Change History & Analytics
8. Management Pages
- Cluster Management
- Namespace Management
- User Management
- Role Management
- Integration Settings
- Webhook Configuration
- LLM Configuration
9. Settings Pages
- System Settings
- Profile Settings
- Notification Preferences
Sayfa Detayları
1. Login Page
Layout: Centered, no header/sidebar
┌─────────────────────────────────────────────┐
│ │
│ ┌─────────────────┐ │
│ │ Flowfish Logo │ │
│ │ 🐟🌊 │ │
│ └─────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ Username: │ │
│ │ [___________________] │ │
│ │ │ │
│ │ Password: │ │
│ │ [___________________] │ │
│ │ │ │
│ │ [ ] Remember me │ │
│ │ │ │
│ │ [ Login ] │ │
│ │ │ │
│ │ Or sign in with: │ │
│ │ [Google] [Azure] [Okta] │ │
│ │ │ │
│ │ Forgot password? │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
Components:
- Logo (centered, animated)
- Login form (Ant Design Form)
- OAuth buttons (optional)
- Password reset link
- Loading spinner (on submit)
Behavior:
- Submit → API call → Store JWT → Redirect to Dashboard
- OAuth button → Redirect to provider → Callback → Store JWT
- Validation: Real-time field validation
- Error handling: Toast notification
2. Home / Overview Dashboard
Layout: Grid-based dashboard
┌────────────────────────────────────────────────────────┐
│ Home / Overview Dashboard │
├────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Total │ │ Active │ │ Active │ │ Risk │ │
│ │ Clusters │ │Analyses │ │Anomalies │ │ Score │ │
│ │ 5 │ │ 12 │ │ 3 │ │ 65 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ┌────────────────────────┐ ┌──────────────────────┐ │
│ │ Top Communicating │ │ Risk Distribution │ │
│ │ Services (Table) │ │ (Pie Chart) │ │
│ │ │ │ │ │
│ │ Service | Req/s │ │ [Chart] │ │
│ │ ────────────────── │ │ │ │
│ │ api-gateway | 1250 │ │ ● Critical: 5 │ │
│ │ auth-svc | 850 │ │ ● High: 12 │ │
│ │ db-proxy | 650 │ │ ● Medium: 45 │ │
│ └────────────────────────┘ └──────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Recent Anomalies (Timeline) │ │
│ │ │ │
│ │ ● [15:30] Unusual traffic spike - api-service │ │
│ │ ● [14:20] New external connection - web-app │ │
│ │ ● [12:45] Cross-namespace violation - auth-svc │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ ┌─────────────────────┐ │
│ │ Cluster Health │ │ Top Namespaces │ │
│ │ (Status Cards) │ │ (Bar Chart) │ │
│ │ │ │ │ │
│ │ ✓ Cluster-Prod (5/5) │ │ [Chart] │ │
│ │ ✓ Cluster-Stage (3/3) │ │ │ │
│ │ ⚠ Cluster-Dev (2/3) │ │ │ │
│ └─────────────────────────┘ └─────────────────────┘ │
└────────────────────────────────────────────────────────┘
Components:
- Metric Cards (4x): Total clusters, analyses, anomalies, risk score
- Top Communicating Services Table
- Risk Distribution Pie Chart
- Recent Anomalies Timeline
- Cluster Health Status Cards
- Top Namespaces Bar Chart
- Refresh button (auto-refresh toggle)
Data Refresh: Real-time (WebSocket) + manual refresh button
3. Analysis Wizard
Layout: Multi-step wizard (horizontal stepper)
┌────────────────────────────────────────────────────────┐
│ Create New Analysis │
├────────────────────────────────────────────────────────┤
│ │
│ Step 1 → Step 2 → Step 3 → Step 4 │
│ Scope Gadgets Time Output │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Step 1: Scope Selection │ │
│ │ │ │
│ │ Select scope type: │ │
│ │ ○ Cluster-wide │ │
│ │ ● Namespace(s) [Select: ▼] │ │
│ │ ○ Deployment(s) [Select: ▼] │ │
│ │ ○ Pod(s) [Select: ▼] │ │
│ │ ○ Label selector [Key: ___ Value: ___] │ │
│ │ │ │
│ │ Selected items: │ │
│ │ [✓ frontend] [✓ backend] [✓ database] │ │
│ │ │ │
│ │ [ Cancel ] [ Next → ] │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Step 2: Gadget Selection
┌──────────────────────────────────────────────────┐
│ Step 2: Gadget Modules │
│ │
│ Select modules to enable: │
│ │
│ ☑ Network Traffic (TCP/UDP) [Configure...] │
│ ☑ DNS Queries [Configure...] │
│ ☑ TCP Connection State [Configure...] │
│ ☐ Process Events [Configure...] │
│ ☐ Syscall Tracking [Configure...] │
│ ☐ File Access [Configure...] │
│ │
│ Estimated resource usage: Medium (2-5% CPU) │
│ │
│ [ ← Back ] [ Next → ] │
└──────────────────────────────────────────────────┘
Step 3: Time Configuration
┌──────────────────────────────────────────────────┐
│ Step 3: Time & Profile Settings │
│ │
│ Analysis mode: │
│ ● Continuous (until manually stopped) │
│ ○ Time-bound │
│ Duration: [___] minutes │
│ ○ Scheduled │
│ Cron: [_______________] │
│ ○ Baseline creation │
│ Duration: [7] days │
│ │
│ Baseline profile: │
│ [Select existing baseline ▼] or [Create new] │
│ │
│ [ ← Back ] [ Next → ] │
└──────────────────────────────────────────────────┘
Step 4: Output Configuration
┌──────────────────────────────────────────────────┐
│ Step 4: Output & Integration │
│ │
│ Dashboards: │
│ ☑ Application Dependency │
│ ☑ Traffic & Behavior │
│ ☑ Security & Risk │
│ ☐ Change Timeline │
│ │
│ LLM Analysis: │
│ ☑ Enable anomaly detection │
│ Provider: [OpenAI GPT-4 ▼] │
│ Frequency: [Every 15 minutes ▼] │
│ │
│ Alerts & Webhooks: │
│ ☑ Enable alerting │
│ Webhook: [Select ▼] or [Add new] │
│ │
│ [ ← Back ] [ Create Analysis ] │
└──────────────────────────────────────────────────┘
Wizard Behavior:
- Step validation before next
- Progress saved (draft)
- Back button enabled
- Summary preview before submit
- Success message + redirect to analysis list
4. Live Map (Graph View)
Layout: Full-screen graph with controls
┌────────────────────────────────────────────────────────┐
│ Live Dependency Map - Cluster: prod-01 │
├────────────────────────────────────────────────────────┤
│ │
│ Filters: [Namespace ▼] [Type ▼] [Risk ▼] [Search...] │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Graph Canvas │ │
│ │ │ │
│ │ ○ web-app │ │
│ │ ↓ │ │
│ │ ○ api-gateway │ │
│ │ ↓ ↓ │ │
│ │ ○ auth-svc ○ data-svc │ │
│ │ ↓ ↓ │ │
│ │ ○ database-pg │ │
│ │ │ │
│ │ Legend: │ │
│ │ ○ Running ○ Warning ○ Critical │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ Controls: [Layout ▼] [Zoom +/-] [Fit] [Export PNG] │
│ │
│ ┌─ Detail Panel (Right Sidebar) ─────────────────┐ │
│ │ Selected: api-gateway │ │
│ │ Type: Deployment │ │
│ │ Namespace: backend │ │
│ │ │ │
│ │ Incoming: 3 connections │ │
│ │ - web-app:8080 (HTTP) │ │
│ │ - admin-panel:8080 (HTTP) │ │
│ │ - monitoring:9090 (Metrics) │ │
│ │ │ │
│ │ Outgoing: 5 connections │ │
│ │ - auth-svc:8080 (HTTP) │ │
│ │ - data-svc:8080 (HTTP) │ │
│ │ ... │ │
│ │ │ │
│ │ [ View Logs ] [ View Metrics ] [ Edit ] │ │
│ └────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Graph Features:
- Node Rendering:
- Shape: Pod (circle), Deployment (square), Service (diamond)
- Color: Namespace-based or status-based
- Size: Based on importance score
- Icon: Service type icon (web, database, cache, etc.)
- Edge Rendering:
- Thickness: Request count
- Color: Protocol (HTTP=blue, gRPC=green, TCP=gray)
- Animation: Live traffic flow
- Label: Port number (on hover)
- Interactions:
- Click node → Show detail panel
- Double-click node → Zoom to neighbors
- Drag node → Manual positioning
- Mouse wheel → Zoom in/out
- Right-click → Context menu
- Layouts:
- Hierarchical (tier-based)
- Force-directed (physics simulation)
- Circular
- Grid
- Manual (drag & drop)
Real-time Updates:
- WebSocket connection for live updates
- New connections animate in
- Lost connections fade out
- Traffic pulses on edges
5. Anomaly Detection Page
Layout: List + detail split view
┌────────────────────────────────────────────────────────┐
│ Anomaly Detection │
├────────────────────────────────────────────────────────┤
│ │
│ Filters: [Severity ▼] [Status ▼] [Date Range] [🔍] │
│ │
│ ┌──────────────────────┐ ┌────────────────────────┐ │
│ │ Anomaly List │ │ Anomaly Details │ │
│ │ │ │ │ │
│ │ ┌──────────────────┐ │ │ Severity: ● Critical │ │
│ │ │🔴 Unusual traffic │ │ │ Score: 95/100 │ │
│ │ │ spike │ │ │ Detected: 15:30 Today │ │
│ │ │ api-service │ │ │ │ │
│ │ │ 15:30 - Critical │ │ │ Description: │ │
│ │ └──────────────────┘ │ │ Detected unusual │ │
│ │ │ │ traffic pattern... │ │
│ │ ┌──────────────────┐ │ │ │ │
│ │ │🟠 New external │ │ │ Affected Workloads: │ │
│ │ │ connection │ │ │ - api-service │ │
│ │ │ web-app │ │ │ - auth-service │ │
│ │ │ 14:20 - High │ │ │ │ │
│ │ └──────────────────┘ │ │ Recommended Action: │ │
│ │ │ │ • Block external IP │ │
│ │ ┌──────────────────┐ │ │ • Review logs │ │
│ │ │🟡 Cross-namespace│ │ │ • Update policy │ │
│ │ │ violation │ │ │ │ │
│ │ │ auth-svc │ │ │ LLM Analysis: │ │
│ │ │ 12:45 - Medium │ │ │ [Show full analysis] │ │
│ │ └──────────────────┘ │ │ │ │
│ │ │ │ Status: Investigating │ │
│ │ ... (12 more) │ │ Assigned: John Doe │ │
│ │ │ │ │ │
│ │ [Load More] │ │ Actions: │ │
│ │ │ │ [Resolve] [False +] │ │
│ └──────────────────────┘ └────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Components:
- Anomaly List (Left):
- Sortable by severity, time
- Filter by status
- Severity badge (Critical, High, Medium, Low)
- Click to show details
- Pagination
- Anomaly Details (Right):
- Severity indicator
- Score (0-100)
- Detection time
- AI-generated description
- Affected workloads (clickable)
- Recommended actions
- LLM analysis (expandable)
- Status dropdown
- Assign to user
- Action buttons
- Comments section
6. Import / Export Page
Layout: Tab-based interface
┌────────────────────────────────────────────────────────┐
│ Import / Export Data │
├────────────────────────────────────────────────────────┤
│ │
│ [ Export ] [ Import ] [ Job History ] │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Export Data │ │
│ │ │ │
│ │ Format: │ │
│ │ ○ CSV (Human-readable) │ │
│ │ ● Graph JSON (Re-importable) │ │
│ │ │ │
│ │ Scope: │ │
│ │ Cluster: [prod-01 ▼] │ │
│ │ Namespace: [All ▼] or [Select specific...] │ │
│ │ │ │
│ │ Time Range: │ │
│ │ From: [2024-01-01 00:00] │ │
│ │ To: [2024-01-31 23:59] │ │
│ │ │ │
│ │ Include: │ │
│ │ ☑ Workloads │ │
│ │ ☑ Communications │ │
│ │ ☑ Metadata │ │
│ │ ☐ Anomalies │ │
│ │ │ │
│ │ Estimated size: ~5.2 MB │ │
│ │ │ │
│ │ [ Export & Download ] │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Import Tab:
┌──────────────────────────────────────────────────┐
│ Import Data │
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ Drag & Drop File Here │ │
│ │ or [ Browse Files ] │ │
│ │ │ │
│ │ Supported: CSV, JSON │ │
│ │ Max size: 100 MB │ │
│ └────────────────────────────────────────────┘ │
│ │
│ Selected file: dependencies_export.json (2.3 MB) │
│ │
│ Target Cluster: [prod-01 ▼] │
│ │
│ Import Mode: │
│ ○ Merge with existing data │
│ ● Overwrite existing data │
│ ○ Create new snapshot │
│ │
│ Validation: ✓ Schema valid │
│ ✓ No conflicts │
│ ⚠ 3 warnings (optional fields) │
│ │
│ [ Import ] │
└──────────────────────────────────────────────────┘
7. Change Simulation Page (CAP Integration)
Layout: Multi-step wizard + impact dashboard
┌────────────────────────────────────────────────────────┐
│ Change Simulation - CAP Integration │
├────────────────────────────────────────────────────────┤
│ │
│ [ Create Change Request ] [ View History ] │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Step 1: Define Change │ │
│ │ │ │
│ │ Change Type: │ │
│ │ ● Application Update (image version) │ │
│ │ ○ Configuration Change │ │
│ │ ○ Scaling Change │ │
│ │ ○ Infrastructure Change │ │
│ │ │ │
│ │ Target Service: │ │
│ │ Cluster: [prod-01 ▼] │ │
│ │ Namespace: [payments ▼] │ │
│ │ Workload: [payment-service ▼] │ │
│ │ │ │
│ │ Current State: │ │
│ │ - Image: payment-service:v2.3.1 │ │
│ │ - Replicas: 5 │ │
│ │ - CPU/Memory: 500m/1Gi │ │
│ │ │ │
│ │ Proposed Change: │ │
│ │ New Image: [payment-service:v2.5.0___] │ │
│ │ Replicas: [5___] (no change) │ │
│ │ Resources: [Keep current] [Update ▼] │ │
│ │ │ │
│ │ Deployment Strategy: │ │
│ │ ● RollingUpdate ○ Recreate ○ BlueGreen │ │
│ │ ○ Canary (10% traffic) │ │
│ │ │ │
│ │ [ Cancel ] [ Next → ] │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Step 2: Schedule Change
┌──────────────────────────────────────────────────┐
│ Step 2: Schedule & Metadata │
│ │
│ Change Title: │
│ [Update payment-service to v2.5.0___________] │
│ │
│ Description: │
│ [Upgrade to fix critical security vulnerability] │
│ [and add new payment gateway support.________] │
│ │
│ Priority: │
│ ○ Low ● Normal ○ High ○ Emergency │
│ │
│ Scheduled Window: │
│ Date: [2024-01-20 ▼] │
│ Start Time: [02:00 ▼] UTC │
│ Duration: [2 hours ▼] │
│ │
│ ⚠️ Note: Conflicts with backup window (03:00) │
│ Consider rescheduling to 04:00 │
│ │
│ Rollback Plan: │
│ ☑ Automated rollback enabled │
│ Trigger: [Error rate > 5%] OR [Manual] │
│ Rollback to: [payment-service:v2.3.1] │
│ │
│ Notifications: │
│ ☑ Notify stakeholders │
│ ☑ Create ServiceNow Change Request │
│ ☑ Post to Slack #platform-changes │
│ │
│ [ ← Back ] [ Next → ] │
└──────────────────────────────────────────────────┘
Step 3: Impact Analysis
┌────────────────────────────────────────────────────────┐
│ Step 3: Impact Analysis │
├────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 🎯 Change Summary │ │
│ │ │ │
│ │ Service: payment-service │ │
│ │ Change: v2.3.1 → v2.5.0 │ │
│ │ Risk Score: 65 🟠 (High Risk) │ │
│ │ Blast Radius: 35 services affected │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📊 Impact Dimensions │ │
│ │ │ │
│ │ Dependency Impact: [▓▓▓▓▓▓▓▓░░] 75% │ │
│ │ Traffic Impact: [▓▓▓▓▓▓░░░░] 60% │ │
│ │ Data Impact: [▓▓░░░░░░░░] 20% │ │
│ │ Complexity: [▓▓▓▓▓▓▓░░░] 70% │ │
│ │ Rollback Difficulty: [▓▓▓░░░░░░░] 30% │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 🔗 Affected Services │ │
│ │ │ │
│ │ Direct Dependencies (12): │ │
│ │ 🔴 checkout-service Critical │ │
│ │ ⚠️ Breaking API change detected! │ │
│ │ Action Required: Update to v3.2+ │ │
│ │ │ │
│ │ 🟡 order-service Medium │ │
│ │ ⚠️ Latency increase expected (+15%) │ │
│ │ │ │
│ │ 🟢 notification-service Low │ │
│ │ ✓ No breaking changes │ │
│ │ │ │
│ │ ... [View all 12 services] │ │
│ │ │ │
│ │ Indirect Dependencies (23): │ │
│ │ [View dependency graph →] │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 🚨 Risk Factors │ │
│ │ │ │
│ │ ✓ Breaking API changes (checkout-service) │ │
│ │ ✓ Production environment │ │
│ │ ✓ High traffic service (15K req/min) │ │
│ │ ⚠ Scheduled during business hours │ │
│ │ ✓ Multiple critical dependencies │ │
│ │ ✓ Rollback plan validated │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 💡 Recommendations │ │
│ │ │ │
│ │ 1. 🔸 Update checkout-service first (v3.2+) │ │
│ │ 2. 🔸 Deploy to staging for 24h validation │ │
│ │ 3. 🔸 Use canary deployment (10% → 50% → 100%) │ │
│ │ 4. 🔸 Reschedule to 04:00 (avoid backup window) │ │
│ │ 5. 🔸 Enable enhanced monitoring │ │
│ │ 6. 🔸 Notify on-call engineer │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ [ ← Back ] [ Create Change Request ] │
└────────────────────────────────────────────────────────┘
Step 4: Approval Workflow
┌────────────────────────────────────────────────────────┐
│ Change Request: CR-2024-001234 │
│ Status: Pending Approvals │
├────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📋 Approval Matrix (High Risk) │ │
│ │ │ │
│ │ ✅ Technical Lead │ │
│ │ John Smith - Approved │ │
│ │ Comment: "Looks good, but update checkout │ │
│ │ service first" │ │
│ │ Approved: 2024-01-15 14:30 │ │
│ │ │ │
│ │ ⏳ Security Lead │ │
│ │ Sarah Johnson - Review In Progress │ │
│ │ [ Request Expedited Review ] │ │
│ │ │ │
│ │ ⏳ Change Manager │ │
│ │ Michael Brown - Pending │ │
│ │ (Waiting for Security approval) │ │
│ │ │ │
│ │ Required: 3/3 approvals │ │
│ │ Current: 1/3 approved │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📢 Stakeholder Notifications │ │
│ │ │ │
│ │ ✅ Sent to 12 service owners │ │
│ │ ✅ ServiceNow CR created: CHG0001234 │ │
│ │ ✅ Slack notification posted │ │
│ │ ⏳ Waiting for feedback (0 responses) │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📝 Comments & Discussion │ │
│ │ │ │
│ │ John Smith (Tech Lead) - 14:30 │ │
│ │ "Confirmed with checkout team, they'll upgrade │ │
│ │ to v3.2 by tomorrow morning." │ │
│ │ │ │
│ │ [Add comment_____________________________] │ │
│ │ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ [ View Full Impact Report ] [ Export to PDF ] │
│ [ Cancel Change Request ] [ Edit ] │
└────────────────────────────────────────────────────────┘
Change History Page
┌────────────────────────────────────────────────────────┐
│ Change History & Analytics │
├────────────────────────────────────────────────────────┤
│ │
│ Filters: [Last 30 days ▼] [All Status ▼] [All Risk ▼]│
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📊 Change Statistics │ │
│ │ │ │
│ │ Total Changes: 45 │ │
│ │ Success Rate: 93% (42 successful, 3 rolled back)│ │
│ │ Avg Approval Time: 6.5 hours │ │
│ │ Emergency Changes: 2 │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Recent Changes │ │
│ │ │ │
│ │ CR-2024-001234 payment-service v2.5.0 │ │
│ │ 🟠 High Risk | ⏳ Pending | Scheduled: Jan 20 │ │
│ │ │ │
│ │ CR-2024-001233 auth-service config update │ │
│ │ 🟢 Low Risk | ✅ Completed | Jan 15 02:15 │ │
│ │ │ │
│ │ CR-2024-001232 frontend v3.1.0 │ │
│ │ 🟡 Medium Risk | ✅ Completed | Jan 14 03:00 │ │
│ │ │ │
│ │ CR-2024-001231 database scaling │ │
│ │ 🔴 Critical | 🔄 Rolled Back | Jan 13 22:45 │ │
│ │ Reason: Error rate exceeded threshold │ │
│ │ │ │
│ │ ... [Load More] │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Components:
- Change Request Wizard: 4-step guided creation
- Impact Analysis Dashboard: Visual impact representation
- Dependency Graph: Interactive graph showing affected services
- Risk Meter: Visual risk score indicator
- Approval Workflow: Track approval status
- Timeline: Change execution timeline
- Rollback Controls: Manual rollback trigger
- Comparison View: Before/after state comparison
- Analytics Dashboard: Change metrics and trends
Real-time Updates:
- Approval status changes
- Stakeholder comments
- Pre/post-change validation results
- Execution progress
Component Hiyerarşisi
App
├── AuthProvider
├── ThemeProvider
├── Router
├── PublicRoutes
│ └── Login
└── PrivateRoutes (RequireAuth)
├── Layout
│ ├── Header
│ │ ├── Logo
│ │ ├── ClusterSelector
│ │ ├── SearchBar
│ │ ├── NotificationBell
│ │ └── UserMenu
│ ├── Sidebar
│ │ └── MenuItems
│ └── Content
│ ├── Breadcrumb
│ └── PageContent
└── Routes
├── Dashboard
│ ├── OverviewDashboard
│ ├── DependencyDashboard
│ ├── TrafficDashboard
│ ├── SecurityDashboard
│ ├── ChangeTimelineDashboard
│ └── AuditDashboard
├── Analysis
│ ├── AnalysisWizard
│ ├── AnalysisList
│ └── AnalysisDetail
├── Discovery
│ ├── LiveMap
│ ├── HistoricalMap
│ ├── ApplicationInventory
│ └── WorkloadExplorer
├── Security
│ ├── AnomalyDetection
│ ├── AnomalyDetail
│ ├── ChangeDetection
│ └── RiskScores
├── Data
│ ├── ImportExport
│ ├── BaselineManagement
│ └── GraphSnapshots
├── Simulation
│ ├── PolicySimulator
│ ├── ChangeSimulator
│ ├── ChangeRequestDetails
│ ├── ChangeHistory
│ └── SimulationResults
├── Management
│ ├── ClusterManagement
│ ├── UserManagement
│ ├── RoleManagement
│ └── IntegrationSettings
└── Settings
├── SystemSettings
├── ProfileSettings
└── NotificationPreferences
Navigation Flow
Primary Navigation (Sidebar)
📊 Dashboard
- Overview
- Dependencies
- Traffic
- Security
- Timeline
- Audit
🔬 Analysis
- Create New (Wizard)
- Analysis List
- Active Analyses
🗺️ Discovery
- Live Map
- Historical View
- Inventory
- Workload Explorer
🛡️ Security
- Anomalies
- Changes
- Risk Scores
💾 Data
- Import/Export
- Baselines
- Snapshots
🧪 Simulation
- Policy Tester
- Change Simulator (CAP)
- Change History
- Results
⚙️ Management
- Clusters
- Users
- Roles
- Integrations
🔧 Settings
- System
- Profile
- Notifications
Breadcrumb Examples
- Home
- Dashboard > Traffic & Behavior
- Analysis > Create New > Step 2
- Security > Anomalies > Anomaly #123
- Management > Clusters > prod-01
Responsive Design
Breakpoints
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Mobile Adaptations
Sidebar:
- Collapsed by default
- Hamburger menu icon
- Overlay on content (not push)
Header:
- Simplified layout
- Dropdown menus instead of inline
- Search icon (expands to full-width)
Tables:
- Horizontal scroll
- Card view option
- Pagination controls larger
Graph:
- Touch gestures (pinch to zoom)
- Simplified controls
- Detail panel as bottom sheet
Renk Paleti ve Tema
Renk Şeması (haproxy-openmanager bazlı)
Primary Colors:
- Primary Blue:
#1890ff - Success Green:
#52c41a - Warning Orange:
#fa8c16 - Error Red:
#f5222d - Purple:
#722ed1 - Cyan:
#13c2c2
Neutral Colors:
- Dark Gray:
#262626 - Medium Gray:
#8c8c8c - Light Gray:
#f0f0f0 - White:
#ffffff
Status Colors:
- Running/OK:
#52c41a(green) - Warning:
#faad14(amber) - Error/Critical:
#f5222d(red) - Unknown:
#8c8c8c(gray)
Risk Level Colors:
- Low:
#52c41a(green) - Medium:
#faad14(yellow) - High:
#fa8c16(orange) - Critical:
#f5222d(red)
Dark Mode
- Background:
#141414 - Surface:
#1f1f1f - Text:
#e8e8e8 - Border:
#303030
Toggle: User menu → Dark mode switch
Versiyon: 1.0.0
Son Güncelleme: Ocak 2025
Durum: Tasarım Dokümantasyonu