CyberMind-FR
f2ee564b1a
Implement comprehensive widget rendering system allowing SecuBox apps to display
live metrics, status, and controls as responsive widgets on the dashboard.
## Widget Rendering Engine
**New**: `/secubox-admin/widget-renderer.js` (~450 lines)
Core widget system with:
- **WidgetRenderer Class**: Main rendering engine with plugin architecture
- **Template System**: Pluggable widget templates by category
- **Auto-refresh**: Configurable polling (default: 30s per widget)
- **Responsive Grid**: CSS Grid with auto, fixed-2, fixed-3, fixed-4 modes
- **Lifecycle Management**: Initialize, update, destroy with cleanup
### Built-in Templates
1. **Security Widget** (`template: 'security'`):
- Status indicator (ok/warning/error)
- Metric rows with labels/values
- Last event timestamp
- Color-coded border (red)
2. **Network Widget** (`template: 'network'`):
- Active connections count
- Bandwidth display (up/down) with auto-formatting
- Custom metrics support
- Color-coded border (blue)
3. **Monitoring Widget** (`template: 'monitoring'`):
- Health status badge (healthy/degraded/down)
- Metrics grid (responsive cards)
- Uptime display with formatting
- Color-coded border (green)
4. **Hosting Widget** (`template: 'hosting'`):
- Services list with running/stopped status
- Service status icons (✓/✗)
- Metrics section
- Color-coded border (orange)
5. **Compact Widget** (`template: 'compact'`):
- Small icon + title
- Large primary metric value
- Label text
- Minimal space usage
6. **Default Widget** (`template: 'default'`):
- Fallback for apps without specific template
- Icon + title + status
- Simple display
### Features
- **Custom Templates**: `registerTemplate(name, {render: fn})` API
- **Metric Rendering**: `renderMetric()`, `renderMetricCard()` helpers
- **Data Formatting**: Bandwidth, uptime, timestamps (relative)
- **Error Handling**: Try-catch with error display
- **Loading States**: Spinner + message
- **Polling Management**: Automatic cleanup on destroy
## Widget Styles
**New**: `/secubox-admin/widgets.css` (~600 lines)
Comprehensive responsive styles:
### Grid System
- `.widget-grid-auto`: Auto-fill minmax(300px, 1fr)
- `.widget-grid-fixed-2/3/4`: Fixed column grids
- Responsive breakpoints: 1400px → 1024px → 768px
- Mobile: Single column layout
### Widget Components
- **Widget Item**: Card with shadow, hover effects, transform
- **Widget Header**: Icon + title + status indicator/badge
- **Metrics**: Row layout and grid layout variants
- **Status Colors**: Success (green), warning (orange), error (red), unknown (gray)
- **Loading State**: Animated spinner with message
- **Error State**: Icon + message + details
### Category Styling
- Left border color coding by category
- Security: Red (#f44336)
- Network: Blue (#2196f3)
- Monitoring: Green (#4caf50)
- Hosting: Orange (#ff9800)
- Productivity: Purple (#9c27b0)
### Dark Mode Support
- Media query for `prefers-color-scheme: dark`
- Adjusted backgrounds, borders, text colors
- Maintains readability and contrast
### Print Styles
- Break-inside: avoid for widgets
- Border styles for print
- Block layout (no grid)
## Dashboard Integration
**Modified**: `view/secubox-admin/dashboard.js`
Enhanced with widget support:
### Changes
1. Import `widget-renderer` module
2. Add widget renderer instance: `widgetRenderer: null`
3. Load widgets.css stylesheet
4. New section: `renderWidgetsSection(apps)`
- Filters apps with `widget.enabled === true`
- Shows widget count
- Creates container `#dashboard-widgets-container`
5. New method: `initializeWidgets(apps)`
- Creates WidgetRenderer instance
- Config: 30s refresh, auto grid mode
- Renders all enabled widgets
6. Lifecycle: `addFooter()`
- Cleanup widget renderer on page leave
- Removes all poll handles
### Widget Section UI
- Card layout matching other dashboard sections
- Header with "App Widgets" title + count
- Container for widget grid
- Initialized via `requestAnimationFrame` (DOM ready)
## Widget Configuration Schema
Apps in catalog.json can include:
```json
{
"id": "app-id",
"widget": {
"enabled": true,
"template": "security|network|monitoring|hosting|compact|default",
"refresh_interval": 30,
"metrics": [
{
"id": "active_sessions",
"label": "Active Sessions",
"type": "counter",
"source": "ubus",
"method": "app.get_sessions"
}
]
}
}
```
## Data Flow
```
Dashboard Init
↓
WidgetRenderer.render()
↓
For each app with widget.enabled:
├── Create widget container (DOM)
├── Show loading spinner
├── API.getWidgetData(app_id)
↓
RPCD: luci.secubox.get_widget_data(app_id)
↓
Return widget data (metrics, status, etc.)
↓
Template.render(container, app, data)
↓
Display widget with live data
↓
Poll every N seconds (refresh_interval)
```
## Widget Renderer API
```javascript
// Create renderer
var renderer = new WidgetRenderer({
containerId: 'widget-container',
apps: appsWithWidgets,
defaultRefreshInterval: 30,
gridMode: 'auto' // 'auto', 'fixed-2', 'fixed-3', 'fixed-4'
});
// Render all widgets
renderer.render();
// Register custom template
renderer.registerTemplate('mytemplate', {
render: function(container, app, data) {
container.innerHTML = '<div>...</div>';
}
});
// Cleanup
renderer.destroy();
```
## Key Features Delivered
✅ **Pluggable template system** for different app categories
✅ **Responsive grid layout** with breakpoints
✅ **Auto-refresh** with configurable intervals per widget
✅ **Error handling** with graceful degradation
✅ **Loading states** with spinners
✅ **Dark mode** support via media queries
✅ **Category styling** with color-coded borders
✅ **Lifecycle management** with cleanup
✅ **Formatting utilities** for bandwidth, uptime, timestamps
✅ **Print-friendly** styles
## Files Changed/Created
**Created (2)**:
- `luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/widget-renderer.js`
- `luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/widgets.css`
**Modified (1)**:
- `luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/dashboard.js`
**Total**: ~1,100 lines added
## Next Steps
To enable widgets for apps:
1. Add `widget` section to app entries in catalog.json
2. Implement `get_widget_data()` in app's RPCD handler
3. Return metrics, status, and relevant data
4. Widget will auto-refresh and display on dashboard
Example apps ready for widgets:
- Auth Guardian (security template)
- Bandwidth Manager (network template)
- System monitors (monitoring template)
- Hosting services (hosting template)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
510 lines
8.3 KiB
CSS
510 lines
8.3 KiB
CSS
/**
|
|
* SecuBox Widget System Styles
|
|
* Responsive grid layout for app widgets
|
|
*/
|
|
|
|
/* Widget Grid Container */
|
|
.widget-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* Grid Modes */
|
|
.widget-grid-auto {
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
|
|
.widget-grid-fixed-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.widget-grid-fixed-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.widget-grid-fixed-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 1400px) {
|
|
.widget-grid-fixed-4 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.widget-grid-fixed-3,
|
|
.widget-grid-fixed-4 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.widget-grid {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Widget Item */
|
|
.widget-item {
|
|
background: var(--card-bg, #fff);
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.widget-item:hover {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Widget Loading State */
|
|
.widget-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
color: #999;
|
|
}
|
|
|
|
.widget-loading .spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #0066cc;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Widget Error State */
|
|
.widget-error {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
color: #d32f2f;
|
|
}
|
|
|
|
.widget-error .error-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.widget-error .error-message {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.widget-error .error-details {
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* Widget Header */
|
|
.widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
}
|
|
|
|
.widget-icon {
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.widget-icon-small {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.widget-title-small {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.widget-status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.widget-status-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Status Colors */
|
|
.status-success,
|
|
.widget-status-badge.status-success {
|
|
background-color: #4caf50;
|
|
color: white;
|
|
}
|
|
|
|
.status-warning,
|
|
.widget-status-badge.status-warning {
|
|
background-color: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.status-error,
|
|
.widget-status-badge.status-error {
|
|
background-color: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.status-unknown,
|
|
.widget-status-badge.status-unknown {
|
|
background-color: #9e9e9e;
|
|
color: white;
|
|
}
|
|
|
|
/* Widget Metrics */
|
|
.widget-metrics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.metric-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--border-light, #f0f0f0);
|
|
}
|
|
|
|
.metric-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.metric-value.value-warning {
|
|
color: #ff9800;
|
|
}
|
|
|
|
.metric-value.value-error {
|
|
color: #f44336;
|
|
}
|
|
|
|
/* Widget Metrics Grid */
|
|
.widget-metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.metric-card {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background: var(--card-accent-bg, #f8f9fa);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-light, #f0f0f0);
|
|
}
|
|
|
|
.metric-card-label {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary, #666);
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.metric-card-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #333);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.metric-card-value.value-warning {
|
|
color: #ff9800;
|
|
}
|
|
|
|
.metric-card-value.value-error {
|
|
color: #f44336;
|
|
}
|
|
|
|
.metric-card-unit {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #666);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Security Widget Specific */
|
|
.widget-security .widget-last-event {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.widget-security .event-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.widget-security .event-time {
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
/* Network Widget Specific */
|
|
.widget-network .widget-metrics {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Monitoring Widget Specific */
|
|
.widget-monitoring .widget-uptime {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.widget-monitoring .uptime-label {
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.widget-monitoring .uptime-value {
|
|
font-weight: 600;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
/* Hosting Widget Specific */
|
|
.widget-hosting .widget-services {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.widget-hosting .service-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
background: var(--card-accent-bg, #f8f9fa);
|
|
border-radius: 4px;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.widget-hosting .service-item.service-running {
|
|
border-left-color: #4caf50;
|
|
}
|
|
|
|
.widget-hosting .service-item.service-stopped {
|
|
border-left-color: #f44336;
|
|
}
|
|
|
|
.widget-hosting .service-name {
|
|
font-weight: 500;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.widget-hosting .service-status {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.widget-hosting .service-running .service-status {
|
|
color: #4caf50;
|
|
}
|
|
|
|
.widget-hosting .service-stopped .service-status {
|
|
color: #f44336;
|
|
}
|
|
|
|
/* Compact Widget */
|
|
.widget-compact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.widget-compact .widget-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.widget-compact .widget-value-large {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--accent-color, #0066cc);
|
|
line-height: 1;
|
|
}
|
|
|
|
.widget-compact .widget-label-small {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary, #666);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Default Widget */
|
|
.widget-default {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.widget-default .widget-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.widget-default .widget-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.widget-default .widget-status {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
/* No Widgets State */
|
|
.no-widgets {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.no-widgets-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.no-widgets h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.no-widgets p {
|
|
font-size: 1rem;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Widget Category Colors */
|
|
.widget-security {
|
|
border-left: 4px solid #f44336;
|
|
}
|
|
|
|
.widget-network {
|
|
border-left: 4px solid #2196f3;
|
|
}
|
|
|
|
.widget-monitoring {
|
|
border-left: 4px solid #4caf50;
|
|
}
|
|
|
|
.widget-hosting {
|
|
border-left: 4px solid #ff9800;
|
|
}
|
|
|
|
.widget-productivity {
|
|
border-left: 4px solid #9c27b0;
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.widget-item {
|
|
background: #2a2a2a;
|
|
border-color: #444;
|
|
}
|
|
|
|
.widget-header {
|
|
border-bottom-color: #444;
|
|
}
|
|
|
|
.widget-title {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.metric-row {
|
|
border-bottom-color: #333;
|
|
}
|
|
|
|
.metric-label {
|
|
color: #999;
|
|
}
|
|
|
|
.metric-value {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.metric-card {
|
|
background: #333;
|
|
border-color: #444;
|
|
}
|
|
|
|
.metric-card-value {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.widget-hosting .service-item {
|
|
background: #333;
|
|
}
|
|
|
|
.no-widgets h3 {
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.widget-grid {
|
|
display: block;
|
|
}
|
|
|
|
.widget-item {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
margin-bottom: 1rem;
|
|
box-shadow: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|