186 lines
4.6 KiB
Markdown
186 lines
4.6 KiB
Markdown
# Datacenter Modeler
|
|
|
|
Datacenter Modeler is a React-based web application for designing datacenter rack and cabinet layouts with drag-and-drop equipment placement. Users can build rack diagrams, edit component metadata, export reports, and save/load layouts as JSON.
|
|
|
|
# Written by Matthew Puckett
|
|
# https://www.theblindengineer.com
|
|
|
|
## Features
|
|
|
|
- Drag racks and cabinets onto the workspace
|
|
- Limit each diagram to 10 racks/cabinets
|
|
- Choose rack/cabinet height from 2U to 42U
|
|
- Drag equipment into racks with U-position snapping
|
|
- Prevent overlapping equipment placements
|
|
- Edit rack/cabinet properties:
|
|
- Name
|
|
- Type
|
|
- Rack units
|
|
- Manufacturer
|
|
- Model
|
|
- Location
|
|
- Notes
|
|
- Edit equipment properties:
|
|
- Name
|
|
- Size in rack units
|
|
- Start U position
|
|
- Manufacturer
|
|
- Model
|
|
- Serial number
|
|
- Asset tag
|
|
- Power watts
|
|
- Notes
|
|
- Edit patch panel-specific properties:
|
|
- Copper or fiber optic medium
|
|
- Number of ports
|
|
- Dynamic port map with Port ID and Cable ID fields
|
|
- Edit component port-map properties for Switch, Firewall, Storage Switch, Router, Server, Blade Chassis, Storage Array, and KVM:
|
|
- Dynamic port map with Port ID, Cable ID, and VLAN fields
|
|
- VLAN defaults to 1 for new component ports
|
|
- Edit managed-device properties for Switch, Firewall, Storage Switch, Router, Server, Blade Chassis, Storage Array, and KVM:
|
|
- Managed status
|
|
- IP address/hostname
|
|
- URL
|
|
- User
|
|
- Edit PDU-specific properties:
|
|
- Horizontal rack mount or vertical side mount
|
|
- Horizontal size from 1U to 12U
|
|
- Vertical width from 1U to 3U
|
|
- Left or right side placement for vertical PDUs
|
|
- Input voltage
|
|
- Dynamic output ports with per-port voltage and amperage
|
|
- Managed PDU status
|
|
- IP address/hostname, URL, and user for managed PDUs
|
|
- Save diagrams as JSON
|
|
- Load previously saved JSON diagrams
|
|
- Browser autosave with `localStorage`
|
|
- Export rack layouts as PNG or JPG
|
|
- Export a PDF report with the diagram and rack inventory
|
|
- Dark/light theme selector
|
|
- Material UI-based interface
|
|
- Welcome dialog with an optional Cash App donation link
|
|
|
|
## Component Library
|
|
|
|
The left-side palette includes:
|
|
|
|
- Rack
|
|
- Cabinet
|
|
- Switch
|
|
- Router
|
|
- Firewall
|
|
- Server (Rack)
|
|
- Blade Chassis
|
|
- Storage Array
|
|
- Storage Switch
|
|
- Patch Panel
|
|
- PDU
|
|
- Cable Management
|
|
- KVM
|
|
- KVM (Console)
|
|
|
|
## Tech Stack
|
|
|
|
- Node.js
|
|
- React
|
|
- TypeScript
|
|
- Vite
|
|
- Material UI
|
|
- html2canvas
|
|
- jsPDF
|
|
|
|
## Getting Started
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Vite will print the local URL, usually:
|
|
|
|
```text
|
|
http://localhost:5173/
|
|
```
|
|
|
|
If that port is already in use, run:
|
|
|
|
```bash
|
|
npm run dev -- --port 5174
|
|
```
|
|
|
|
## Build
|
|
|
|
Create a production build:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Preview the production build:
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## Usage
|
|
|
|
1. Drag a Rack or Cabinet from the component library into the workspace.
|
|
2. Choose the rack/cabinet size in the dialog.
|
|
3. Drag equipment from the library into a rack/cabinet.
|
|
4. Select racks or equipment to edit properties in the right panel.
|
|
5. Use Save JSON to download the diagram data.
|
|
6. Use Load JSON to continue editing a previously saved diagram.
|
|
7. Use Export to generate a PDF report, PNG, or JPG.
|
|
|
|
## Data Model
|
|
|
|
Diagram data is stored as JSON with this top-level shape:
|
|
|
|
```json
|
|
{
|
|
"appName": "Datacenter Modeler",
|
|
"schemaVersion": 1,
|
|
"name": "Untitled Datacenter Layout",
|
|
"createdAt": "2026-05-14T00:00:00.000Z",
|
|
"updatedAt": "2026-05-14T00:00:00.000Z",
|
|
"racks": []
|
|
}
|
|
```
|
|
|
|
Each rack/cabinet contains its own metadata and an array of installed equipment. Equipment records include type, name, size, U position, manufacturer/model details, asset information, power, notes, and display color. Patch panel and network-capable component records also include structured port map metadata. Network-capable components and PDUs can store managed-device connection metadata.
|
|
|
|
## Project Structure
|
|
|
|
```text
|
|
.
|
|
├── index.html
|
|
├── package.json
|
|
├── src
|
|
│ ├── App.tsx
|
|
│ ├── data
|
|
│ │ └── componentLibrary.ts
|
|
│ ├── main.tsx
|
|
│ ├── styles.css
|
|
│ ├── types.ts
|
|
│ └── utils
|
|
│ └── model.ts
|
|
├── tsconfig.json
|
|
├── tsconfig.node.json
|
|
└── vite.config.ts
|
|
```
|
|
|
|
## Notes
|
|
|
|
- Layouts are automatically persisted in the browser using `localStorage`.
|
|
- JSON export is the portable save format for moving diagrams between browsers or computers.
|
|
- PDF and image exports are generated from the rendered workspace.
|
|
- The current implementation is client-side only; no backend server or database is required.
|
|
- Donations are optional and use the Cash App link for `$MatthewPuckett`.
|