cb073786b3
Enthält: - rdp_client.py: RDP Client mit GUI und Monitor-Auswahl - rdp.sh: Bash-basierter RDP Client - teamleader_test/: Network Scanner Fullstack-App - teamleader_test2/: Network Mapper CLI Subdirectories mit eigenem Repo wurden ausgeschlossen. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
173 lines
4.4 KiB
Markdown
173 lines
4.4 KiB
Markdown
# Network Scanner Frontend
|
|
|
|
A modern, React-based frontend for the Network Scanner visualization tool.
|
|
|
|
## Features
|
|
|
|
- 🗺️ **Interactive Network Map** - Visualize network topology with react-flow
|
|
- 📊 **Real-time Updates** - WebSocket integration for live scan progress
|
|
- 🖥️ **Host Management** - Browse, search, and view detailed host information
|
|
- 🔍 **Scan Control** - Start, monitor, and manage network scans
|
|
- 📱 **Responsive Design** - Works on desktop and mobile devices
|
|
- 🎨 **Modern UI** - Built with TailwindCSS and Lucide icons
|
|
|
|
## Tech Stack
|
|
|
|
- **React 18** - UI framework
|
|
- **TypeScript** - Type safety
|
|
- **Vite** - Build tool
|
|
- **React Flow** - Network diagram visualization
|
|
- **React Router** - Navigation
|
|
- **Axios** - HTTP client
|
|
- **TailwindCSS** - Styling
|
|
- **Lucide React** - Icons
|
|
|
|
## Quick Start
|
|
|
|
### Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Development Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The application will be available at `http://localhost:3000`
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Preview Production Build
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Create a `.env` file in the root directory:
|
|
|
|
```env
|
|
VITE_API_URL=http://localhost:8000
|
|
VITE_WS_URL=ws://localhost:8000
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── components/ # React components
|
|
│ │ ├── Layout.tsx # Main layout with navigation
|
|
│ │ ├── ScanForm.tsx # Scan configuration form
|
|
│ │ ├── NetworkMap.tsx # Network topology visualization
|
|
│ │ ├── HostNode.tsx # Custom node for network map
|
|
│ │ └── HostDetails.tsx # Host detail modal
|
|
│ ├── pages/ # Page components
|
|
│ │ ├── Dashboard.tsx # Main dashboard
|
|
│ │ ├── NetworkPage.tsx # Network map view
|
|
│ │ ├── HostsPage.tsx # Hosts table view
|
|
│ │ └── ScansPage.tsx # Scans list view
|
|
│ ├── hooks/ # Custom React hooks
|
|
│ │ ├── useScans.ts # Scan data management
|
|
│ │ ├── useHosts.ts # Host data management
|
|
│ │ ├── useTopology.ts # Topology data management
|
|
│ │ └── useWebSocket.ts # WebSocket connection
|
|
│ ├── services/ # API services
|
|
│ │ ├── api.ts # REST API client
|
|
│ │ └── websocket.ts # WebSocket client
|
|
│ ├── types/ # TypeScript types
|
|
│ │ └── api.ts # API type definitions
|
|
│ ├── utils/ # Utility functions
|
|
│ │ └── helpers.ts # Helper functions
|
|
│ ├── App.tsx # Main app component
|
|
│ ├── main.tsx # Entry point
|
|
│ └── index.css # Global styles
|
|
├── public/ # Static assets
|
|
├── index.html # HTML template
|
|
├── package.json # Dependencies
|
|
├── tsconfig.json # TypeScript config
|
|
├── vite.config.ts # Vite config
|
|
├── tailwind.config.js # Tailwind config
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Dashboard
|
|
|
|
The dashboard provides an overview of your network:
|
|
- Statistics cards showing total hosts, active hosts, services, and scans
|
|
- Quick scan form to start new scans
|
|
- Recent scans list with progress indicators
|
|
- Common services overview
|
|
|
|
### Network Map
|
|
|
|
Interactive network topology visualization:
|
|
- Pan and zoom the diagram
|
|
- Click nodes to view host details
|
|
- Color-coded by host type (gateway, server, workstation, device)
|
|
- Real-time updates as scans discover new hosts
|
|
- Export diagram (PNG/SVG)
|
|
|
|
### Hosts
|
|
|
|
Browse all discovered hosts:
|
|
- Searchable table view
|
|
- Filter by status
|
|
- Click any host to view details
|
|
- View services running on each host
|
|
|
|
### Scans
|
|
|
|
Manage network scans:
|
|
- View all scans with status and progress
|
|
- Cancel running scans
|
|
- View scan results and errors
|
|
|
|
## API Integration
|
|
|
|
The frontend communicates with the backend API at `http://localhost:8000`:
|
|
|
|
- **REST API**: `/api/*` endpoints for data operations
|
|
- **WebSocket**: `/api/ws` for real-time updates
|
|
|
|
## Development
|
|
|
|
### Code Style
|
|
|
|
- ESLint for linting
|
|
- TypeScript for type checking
|
|
- Prettier recommended for formatting
|
|
|
|
### Building
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Output will be in the `dist/` directory.
|
|
|
|
## Browser Support
|
|
|
|
- Chrome (latest)
|
|
- Firefox (latest)
|
|
- Safari (latest)
|
|
- Edge (latest)
|
|
|
|
## License
|
|
|
|
MIT
|
|
|
|
## Author
|
|
|
|
DevAgent - Full-stack Development AI
|