118 lines
4.0 KiB
Markdown
118 lines
4.0 KiB
Markdown
# NetworkView
|
|
|
|
A powerful, dark-themed network & homelab documentation application. Document sites, server rooms, racks and every device inside them — with a visual rack diagram, Markdown notes, port/connection tracking and full-text search.
|
|
|
|
## Features
|
|
|
|
- **Visual Rack Diagram** — graphical U-by-U rack view with color-coded device types. Click any empty slot to add a device there.
|
|
- **Hierarchical Structure** — Sites → Rooms → Racks → Components
|
|
- **10 Component Types** — Server, Switch, Router, Firewall, Patch Panel, UPS, PDU, KVM, Storage, Other
|
|
- **Port Documentation** — document each port on a device (RJ45, SFP, SFP+, LC, SC, etc.) with labels and patch-through connections
|
|
- **Markdown Notes** — every entity has a full Markdown editor with live split-pane preview (GFM: tables, checkboxes, code blocks)
|
|
- **Auto-save Notes** — notes save automatically as you type (1.5s debounce)
|
|
- **Full-text Search** — sidebar search across all sites, rooms, racks and components (name, model, IP, serial)
|
|
- **Dark Theme** — GitHub-style dark UI optimised for long documentation sessions
|
|
|
|
## Tech Stack
|
|
|
|
| Layer | Technology |
|
|
|-------|-----------|
|
|
| Frontend | React 18 + TypeScript + Vite |
|
|
| Backend | Express.js (Node 20) |
|
|
| Database | SQLite via `better-sqlite3` (single file, zero config) |
|
|
| Markdown | `react-markdown` + `remark-gfm` |
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 20+
|
|
- npm 10+
|
|
|
|
### Install & Run (Development)
|
|
|
|
```bash
|
|
# From the project root
|
|
npm install
|
|
|
|
# Start both backend (port 3001) and frontend (port 5173) with hot-reload
|
|
npm run dev
|
|
```
|
|
|
|
Open **http://localhost:5173** in your browser.
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
npm run build # builds frontend into frontend/dist/
|
|
npm start # serves API + built frontend on port 3001
|
|
```
|
|
|
|
Open **http://localhost:3001**
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
NetworkView/
|
|
├── backend/
|
|
│ └── src/
|
|
│ ├── index.js # Express server + search endpoint
|
|
│ ├── db.js # SQLite init + schema
|
|
│ └── routes/
|
|
│ ├── sites.js
|
|
│ ├── rooms.js
|
|
│ ├── racks.js
|
|
│ └── components.js # includes ports sub-resource
|
|
├── frontend/
|
|
│ └── src/
|
|
│ ├── App.tsx # Router
|
|
│ ├── api.ts # Fetch wrapper for all endpoints
|
|
│ ├── types.ts # TypeScript types + component metadata
|
|
│ ├── components/
|
|
│ │ ├── Sidebar.tsx # Tree navigation + search
|
|
│ │ ├── RackVisual.tsx # Graphical rack diagram
|
|
│ │ ├── MarkdownEditor.tsx
|
|
│ │ └── AddItemModal.tsx
|
|
│ └── pages/
|
|
│ ├── HomePage.tsx
|
|
│ ├── SitePage.tsx
|
|
│ ├── RoomPage.tsx
|
|
│ ├── RackPage.tsx
|
|
│ └── ComponentPage.tsx
|
|
└── data/
|
|
└── networkview.db # Created automatically on first run
|
|
```
|
|
|
|
## Data Model
|
|
|
|
```
|
|
Site
|
|
└── Room(s)
|
|
└── Rack(s)
|
|
└── Component(s)
|
|
└── Port(s)
|
|
```
|
|
|
|
Every level has its own page with Markdown notes.
|
|
|
|
## API Reference
|
|
|
|
| Method | Path | Description |
|
|
|--------|------|-------------|
|
|
| GET | `/api/sites` | List all sites |
|
|
| POST | `/api/sites` | Create site |
|
|
| GET/PUT/DELETE | `/api/sites/:id` | Site CRUD |
|
|
| GET | `/api/rooms?siteId=` | Rooms in a site |
|
|
| POST | `/api/rooms` | Create room |
|
|
| GET/PUT/DELETE | `/api/rooms/:id` | Room CRUD |
|
|
| GET | `/api/racks?roomId=` | Racks in a room |
|
|
| POST | `/api/racks` | Create rack |
|
|
| GET/PUT/DELETE | `/api/racks/:id` | Rack CRUD |
|
|
| GET | `/api/components?rackId=` | Components in rack |
|
|
| POST | `/api/components` | Create component |
|
|
| GET/PUT/DELETE | `/api/components/:id` | Component CRUD |
|
|
| GET | `/api/components/:id/ports` | Ports on component |
|
|
| POST | `/api/components/:id/ports` | Add port |
|
|
| PUT/DELETE | `/api/components/:id/ports/:portId` | Port CRUD |
|
|
| GET | `/api/search?q=` | Full-text search |
|