61 lines
2.2 KiB
Markdown
61 lines
2.2 KiB
Markdown
# SPORE UI
|
|
|
|
A modern web interface for monitoring and managing SPORE embedded systems.
|
|
|
|
## Features
|
|
|
|
- **🌐 Cluster Monitoring**: Real-time view of all cluster members
|
|
- **📊 Node Details**: Expandable cards with detailed system information
|
|
- **🚀 Modern UI**: Beautiful glassmorphism design with smooth animations
|
|
- **⚡ Auto-refresh**: Keeps data current every 30 seconds
|
|
- **📱 Responsive**: Works on all devices and screen sizes
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
spore-ui/
|
|
├── index.js # Express.js backend server
|
|
├── api/
|
|
│ └── openapi.yaml # API specification
|
|
├── src/
|
|
│ └── client/ # SPORE API client library
|
|
│ ├── index.js # Main client class
|
|
│ ├── package.json # Client package info
|
|
│ ├── README.md # Client documentation
|
|
│ └── example.js # Usage examples
|
|
├── public/ # Frontend files
|
|
│ ├── index.html # Main HTML page
|
|
│ ├── styles.css # All CSS styles
|
|
│ ├── script.js # All JavaScript functionality
|
|
│ └── README.md # Frontend documentation
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Completed Tasks
|
|
|
|
- [x] bootstrap an express.js app that serves a simple html page
|
|
- [x] generate js client from api/openapi.yaml
|
|
- [x] use getClusterStatus client function to get all members and display these members on the html page, use only vanilla JS
|
|
- [x] when clicking on one of the members in the UI, it should expand and display all informations from /api/node/status
|
|
- [x] create separate files for CSS and JS
|
|
|
|
## Getting Started
|
|
|
|
1. **Install dependencies**: `npm install`
|
|
2. **Start the server**: `npm start`
|
|
3. **Open in browser**: `http://localhost:3001`
|
|
|
|
## API Endpoints
|
|
|
|
- **`/`** - Main UI page
|
|
- **`/api/cluster/members`** - Get cluster member information
|
|
- **`/api/tasks/status`** - Get task status
|
|
- **`/api/node/status`** - Get system status
|
|
- **`/api/node/status/:ip`** - Get status from specific node
|
|
|
|
## Technologies Used
|
|
|
|
- **Backend**: Express.js, Node.js
|
|
- **Frontend**: Vanilla JavaScript, CSS3, HTML5
|
|
- **API**: SPORE Embedded System API
|
|
- **Design**: Glassmorphism, CSS Grid, Flexbox |