165 lines
4.3 KiB
Markdown
165 lines
4.3 KiB
Markdown
# Frontend Architecture
|
|
|
|
The Angular frontend provides a modern, responsive dashboard for miner management.
|
|
|
|
## Technology Stack
|
|
|
|
- **Angular 20+** - Standalone components
|
|
- **Tailwind CSS** - Utility-first styling
|
|
- **Chart.js** - Hashrate visualization
|
|
- **xterm.js** - Terminal emulation for console
|
|
|
|
## Component Structure
|
|
|
|
```
|
|
ui/src/app/
|
|
├── app.ts # Root component
|
|
├── app.routes.ts # Route definitions
|
|
├── app.config.ts # App configuration
|
|
├── miner.service.ts # API communication
|
|
├── node.service.ts # P2P node service
|
|
│
|
|
├── components/
|
|
│ └── sidebar/ # Navigation sidebar
|
|
│
|
|
├── layouts/
|
|
│ └── main-layout/ # Page layout wrapper
|
|
│
|
|
├── pages/
|
|
│ ├── dashboard/ # Main monitoring view
|
|
│ ├── profiles/ # Profile management
|
|
│ ├── console/ # Terminal output
|
|
│ ├── workers/ # Running miners
|
|
│ ├── miners/ # Installation
|
|
│ ├── nodes/ # P2P management
|
|
│ └── pools/ # Pool information
|
|
│
|
|
├── dashboard.component.* # Stats and charts
|
|
├── chart.component.* # Hashrate chart
|
|
├── profile-*.component.* # Profile CRUD
|
|
├── console.component.* # Terminal
|
|
└── setup-wizard.component.* # Initial setup
|
|
```
|
|
|
|
## Key Components
|
|
|
|
### Dashboard Component
|
|
|
|
Displays real-time mining statistics:
|
|
|
|
- **Stats Bar**: Hashrate, shares, uptime, pool, difficulty, workers
|
|
- **Chart**: Time-series hashrate visualization
|
|
- **Quick Stats**: Peak rate, efficiency, share time
|
|
- **Worker Selector**: Switch between multiple miners
|
|
|
|
### Chart Component
|
|
|
|
Chart.js-based hashrate visualization:
|
|
|
|
- Time range selector (5m, 15m, 1h, 6h, 24h)
|
|
- Real-time updates every 10 seconds
|
|
- Historical data from SQLite
|
|
|
|
### Console Component
|
|
|
|
Terminal emulator with:
|
|
|
|
- ANSI color support via ansi_up
|
|
- Auto-scroll toggle
|
|
- Stdin command input
|
|
- Worker selection dropdown
|
|
|
|
### Profile Components
|
|
|
|
- **List**: Card-based profile display with actions
|
|
- **Create**: Form for new profiles
|
|
- **Edit**: Modify existing profiles
|
|
|
|
## Services
|
|
|
|
### MinerService
|
|
|
|
Handles all API communication:
|
|
|
|
```typescript
|
|
@Injectable({ providedIn: 'root' })
|
|
export class MinerService {
|
|
getMiners(): Observable<Miner[]>
|
|
getSystemInfo(): Observable<SystemInfo>
|
|
startMiner(profileId: string): Observable<any>
|
|
stopMiner(name: string): Observable<any>
|
|
getMinerStats(name: string): Observable<Stats>
|
|
getMinerLogs(name: string): Observable<string[]>
|
|
sendStdin(name: string, input: string): Observable<any>
|
|
getHashrateHistory(name: string, range: string): Observable<Point[]>
|
|
// ... profiles, installation, etc.
|
|
}
|
|
```
|
|
|
|
### NodeService
|
|
|
|
P2P node management:
|
|
|
|
```typescript
|
|
@Injectable({ providedIn: 'root' })
|
|
export class NodeService {
|
|
getNodeInfo(): Observable<NodeInfo>
|
|
getPeers(): Observable<Peer[]>
|
|
addPeer(peer: PeerAdd): Observable<any>
|
|
removePeer(id: string): Observable<any>
|
|
pingPeer(id: string): Observable<PingResult>
|
|
}
|
|
```
|
|
|
|
## Routing
|
|
|
|
```typescript
|
|
export const routes: Routes = [
|
|
{ path: '', component: DashboardComponent },
|
|
{ path: 'profiles', component: ProfileListComponent },
|
|
{ path: 'profiles/new', component: ProfileCreateComponent },
|
|
{ path: 'profiles/:id/edit', component: ProfileEditComponent },
|
|
{ path: 'console', component: ConsoleComponent },
|
|
{ path: 'workers', component: WorkersComponent },
|
|
{ path: 'miners', component: MinersComponent },
|
|
{ path: 'nodes', component: NodesComponent },
|
|
{ path: 'pools', component: PoolsComponent },
|
|
{ path: 'admin', component: AdminComponent },
|
|
];
|
|
```
|
|
|
|
## Styling
|
|
|
|
### Design System
|
|
|
|
| Element | Style |
|
|
|---------|-------|
|
|
| Background | Dark slate (#0a0a12) |
|
|
| Cards | Slightly lighter slate |
|
|
| Accent | Cyan and lime |
|
|
| Text | White and gray variants |
|
|
| Success | Green |
|
|
| Error | Red |
|
|
| Warning | Yellow |
|
|
|
|
### Responsive Design
|
|
|
|
- Mobile-first approach
|
|
- Sidebar collapses on small screens
|
|
- Grid layouts adapt to viewport
|
|
|
|
## Build Output
|
|
|
|
The UI builds to a web component:
|
|
|
|
```bash
|
|
ng build
|
|
# Outputs: ui/dist/mbe-mining-dashboard.js
|
|
```
|
|
|
|
Can be embedded in any HTML page:
|
|
|
|
```html
|
|
<script src="mbe-mining-dashboard.js"></script>
|
|
<mbe-mining-dashboard></mbe-mining-dashboard>
|
|
```
|