Refactor Docker Compose and README for clarity: remove healthcheck from Docker Compose, update environment variable instructions, and streamline API key and tailnet configuration details. Remove Settings page from frontend for improved user experience.

Author: rajsinghtech

.github/workflows/build.yml

@@ -189,7 +189,6 @@ jobs:
         cp -r frontend/dist tsflow-${{ github.ref_name }}/
         cp -r dist/* tsflow-${{ github.ref_name }}/
         cp docker-compose.yml tsflow-${{ github.ref_name }}/
-        cp env.example tsflow-${{ github.ref_name }}/
         cp README.md tsflow-${{ github.ref_name }}/
         
         tar -czf release/tsflow-${{ github.ref_name }}.tar.gz tsflow-${{ github.ref_name }}/
@@ -218,14 +217,12 @@ jobs:
           
           **Quick Start:**
           ```bash
-          # Create environment file
-          curl -o .env https://raw.githubusercontent.com/${{ github.repository }}/main/env.example
-          # Edit .env with your Tailscale credentials
-          
           # Run with Docker
           docker run -d \
             -p 8080:8080 \
-            --env-file .env \
+            -e TAILSCALE_API_KEY=your-api-key \
+            -e TAILSCALE_TAILNET=your-tailnet \
+            -e ENVIRONMENT=production \
             --name tsflow \
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LOWER }}:${{ github.ref_name }}
           ```
@@ -237,9 +234,7 @@ jobs:
           tar -xzf tsflow-${{ github.ref_name }}.tar.gz
           cd tsflow-${{ github.ref_name }}
           
-          # Configure environment
-          cp env.example .env
-          # Edit .env with your credentials
+          # Edit docker-compose.yml with your credentials
           
           # Run with Docker Compose
           docker-compose up -d

README.md

@@ -2,49 +2,10 @@
 
 A modern, real-time web application for visualizing and analyzing network traffic flows within Tailscale networks.
 
-## Features
-
-**Network Topology Visualization**
-- Interactive force-directed graph showing device connections
-- Real-time traffic flow animation with D3.js
-- Multiple layout algorithms (force-directed, circular, grid, hierarchical)
-- Zoom and pan controls for detailed exploration
-
-**Comprehensive Analytics**
-- Real-time traffic metrics and statistics
-- Protocol and port usage analysis (TCP, UDP, ICMP)
-- Device activity monitoring across your tailnet
-- Historical data visualization with customizable time ranges
-
-**Advanced Filtering**
-- Flexible time range selection (5min, 1hour, 24hours, custom)
-- Protocol-based filtering (TCP, UDP, ICMP)
-- Traffic type filtering (virtual, subnet, physical)
-- IP category filtering (Tailscale, private, public)
-- Bandwidth and connection threshold filtering
-
-**Device Management**
-- Real-time device status monitoring (online/offline)
-- Detailed device information and metadata
-- Operating system detection and iconography
-- Tag-based organization and filtering
-
-**Modern Tech Stack**
-- Go (Gin) backend for high-performance API serving
-- React 18 with TypeScript for type safety
-- Vite for lightning-fast frontend development
-- Tailwind CSS for responsive design
-- D3.js for powerful network visualization
-- SWR for efficient data fetching and caching
 
 ## Quick Start
 > **Important:** TSFlow requires the **Tailscale Network Flow Logs** feature. This is available on **Premium** and **Enterprise** plans and must be enabled in your Tailscale admin console. The application will not show any flow data otherwise.
 
-### Prerequisites
-- Tailscale API key with appropriate permissions
-- Network Flow Logs enabled in admin console
-- Docker
-
 ### Run with Docker
 
 The fastest way to get started using pre-built images:
@@ -54,48 +15,45 @@ docker run -d \
   --name tsflow \
   -p 8080:8080 \
   -e TAILSCALE_API_KEY=your-api-key \
-  -e TAILSCALE_TAILNET=your-tailnet \
+  -e TAILSCALE_TAILNET=your-organization \
   -e ENVIRONMENT=production \
   --restart unless-stopped \
   ghcr.io/rajsinghtech/tsflow:latest
 ```
 
-## Architecture Overview
+Navigate to `http://localhost:8080` to access the dashboard.
 
-TSFlow uses a **Go backend + React frontend** architecture for optimal performance and security:
+## Configuration
 
-```
-┌─────────────────┐    ┌─────────────────┐    ┌──────────────────┐
-│   React App     │    │   Go Backend    │    │   Tailscale API  │
-│   (Frontend)    │◄──►│   (Gin Server)  │◄──►│  api.tailscale.  │
-│                 │    │                 │    │       com        │
-└─────────────────┘    └─────────────────┘    └──────────────────┘
-```
+### Tailscale API Setup
 
-Navigate to `http://localhost:8080` to access the dashboard.
+1. Go to the [Logs tab](https://login.tailscale.com/admin/logs) in your Tailscale Admin Console and ensure that Network Flow Logs are **enabled**.
+2. Go to the [API keys page](https://login.tailscale.com/admin/settings/keys) and create a new API key. **Note**: This requires a **Premium** or **Enterprise** plan.
+3. Use this API key in your deployment configuration.
 
-**Available image tags:**
-- `latest` - Latest stable release from main branch
-- `<version>` - Tagged releases (e.g., `v1.0.0`)
-- `<commit-sha>` - Specific commit builds
+### Finding Your Tailscale Credentials
 
-## Deployment Options
+#### API Key
+1. Go to the [API keys page](https://login.tailscale.com/admin/settings/keys) in your Tailscale Admin Console
+2. Create a new API key with device read permissions
+3. Copy the generated API key (starts with `tskey-api-`)
 
-### Using Docker Compose
+#### Organization Name
+1. Go to the [Settings page](https://login.tailscale.com/admin/settings/general) in your Tailscale Admin Console
+2. Your organization name is displayed in the Organization section (used by the Tailscale API)
+3. Use this exact organization name for the `TAILSCALE_TAILNET` variable
 
-For more complex setups or persistent configuration:
+### Environment Variables
 
-```bash
-# Create environment file
-cp env.example .env
-# Edit .env with your Tailscale credentials
+| Variable | Description | Required | Default |
+|----------|-------------|----------|---------|
+| `TAILSCALE_API_KEY` | Your Tailscale API key | Yes | - |
+| `TAILSCALE_TAILNET` | Your organization name | Yes | - |
+| `PORT` | Backend server port | No | `8080` |
 
-# Run with Docker Compose
-docker-compose up -d
+## Deployment Options
 
-# View logs
-docker-compose logs -f tsflow
-```
+### Using Docker Compose
 
 Create a `docker-compose.yml` file:
 
@@ -107,18 +65,10 @@ services:
     ports:
       - "8080:8080"
     environment:
-      - TAILSCALE_API_KEY=${TAILSCALE_API_KEY}
-      - TAILSCALE_TAILNET=${TAILSCALE_TAILNET}
+      - TAILSCALE_API_KEY=your-api-key
+      - TAILSCALE_TAILNET=your-organization
       - PORT=8080
-      - ENVIRONMENT=production
-    env_file:
-      - .env
     restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
 ```
 
 **Commands:**
@@ -146,9 +96,7 @@ Deploy TSFlow on Kubernetes using the provided manifests:
 git clone https://github.com/rajsinghtech/tsflow.git
 cd tsflow/k8s
 
-export TAILSCALE_API_KEY="your-api-key-here"
-export TAILSCALE_TAILNET="your-tailnet-name"
-
+# Edit kustomization.yaml with your credentials
 kubectl apply -k .
 ```
 
@@ -164,7 +112,7 @@ kubectl apply -k .
    kubectl create secret generic tsflow \
      --namespace=tailscale \
      --from-literal=TAILSCALE_API_KEY="your-api-key" \
-     --from-literal=TAILSCALE_TAILNET="your-tailnet"
+     --from-literal=TAILSCALE_TAILNET="your-organization"
    ```
 
 3. Deploy the application:
@@ -195,17 +143,10 @@ For developers who want to build and run TSFlow locally:
    cd tsflow
    ```
 
-2. Configure environment:
+2. Set environment variables:
    ```bash
-   cp env.example .env
-   ```
-   
-   Edit `.env` and add your Tailscale credentials:
-   ```env
-   TAILSCALE_API_KEY=tskey-api-your-api-key-here
-   TAILSCALE_TAILNET=your-tailnet-name
-   PORT=8080
-   ENVIRONMENT=development
+   export TAILSCALE_API_KEY=tskey-api-your-api-key-here
+   export TAILSCALE_TAILNET=your-organization-name
    ```
 
 3. Build and run the frontend:
@@ -235,25 +176,6 @@ For developers who want to build and run TSFlow locally:
    air  # Auto-reloads on Go file changes
    ```
 
-## Configuration
-
-### Tailscale API Setup
-
-1. Go to the [Logs tab](https://login.tailscale.com/admin/logs) in your Tailscale Admin Console and ensure that Network Flow Logs are **enabled**.
-2. Go to the [API keys page](https://login.tailscale.com/admin/settings/keys) and create a new API key with the following permissions:
-   - `devices:read` - To fetch device information
-   - `logs:read` - To access network flow logs. **Note**: This requires a **Premium** or **Enterprise** plan.
-3. Copy the newly created API key to your `.env` file.
-
-### Environment Variables
-
-| Variable | Description | Required | Default |
-|----------|-------------|----------|---------|
-| `TAILSCALE_API_KEY` | Your Tailscale API key | Yes | - |
-| `TAILSCALE_TAILNET` | Your tailnet name | Yes | - |
-| `PORT` | Backend server port | No | `8080` |
-| `ENVIRONMENT` | Runtime environment | No | `development` |
-
 **Example API calls:**
 ```bash
 # Health check

backend/README.md

@@ -19,8 +19,8 @@ A Go-based backend server that provides a REST API for interacting with the Tail
 
 1. **Set up environment variables**:
    ```bash
-   cp ../env.example ../.env
-   # Edit .env with your Tailscale credentials
+   export TAILSCALE_API_KEY=your-api-key
+   export TAILSCALE_TAILNET=your-tailnet
    ```
 
 2. **Run in development mode**:
@@ -41,7 +41,6 @@ A Go-based backend server that provides a REST API for interacting with the Tail
 | `TAILSCALE_API_KEY` | Yes | - | Your Tailscale API key |
 | `TAILSCALE_TAILNET` | Yes | - | Your tailnet name |
 | `PORT` | No | `8080` | Server port |
-| `ENVIRONMENT` | No | `development` | Environment (development/production) |
 
 ## API Endpoints
 

docker-compose.yml

@@ -11,14 +11,7 @@ services:
     env_file:
       - .env
     restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8080/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
     volumes:
-      # Optional: Mount config if you want persistent settings
       - tsflow_data:/app/data
     networks:
       - tsflow

frontend/src/App.tsx

@@ -3,7 +3,6 @@ import { SWRConfig } from 'swr'
 import { ThemeProvider } from '@/contexts/ThemeContext'
 import Dashboard from '@/pages/Dashboard'
 import NetworkView from '@/pages/NetworkView'
-import Settings from '@/pages/Settings'
 import Logs from './pages/Logs'
 import { fetcher } from '@/lib/api'
 
@@ -22,7 +21,6 @@ function App() {
           <Route path="/" element={<Dashboard />} />
           <Route path="/network" element={<NetworkView />} />
           <Route path="/logs" element={<Logs />} />
-          <Route path="/settings" element={<Settings />} />
         </Routes>
       </SWRConfig>
     </ThemeProvider>

frontend/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom'
-import { Network, Home, Settings, Menu, X, ZoomOut, FileText } from 'lucide-react'
+import { Network, Home, Menu, X, ZoomOut, FileText } from 'lucide-react'
 import { useAppStore } from '@/lib/store'
 import { clsx } from 'clsx'
 
@@ -23,7 +23,6 @@ export default function Layout({ children, networkStats, onResetZoom, onClearSel
     { name: 'Dashboard', href: '/', icon: Home },
     { name: 'Network View', href: '/network', icon: Network },
     { name: 'Logs', href: '/logs', icon: FileText },
-    { name: 'Settings', href: '/settings', icon: Settings },
   ]
 
   const isCurrentPath = (path: string) => {
@@ -74,7 +73,6 @@ export default function Layout({ children, networkStats, onResetZoom, onClearSel
               </div>
               <div className="flex flex-col">
                 <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">TSFlow</h1>
-                <p className="text-xs text-gray-500 dark:text-gray-400">v2.0.0</p>
               </div>
             </div>
             <button