gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
287 Commits 4 Branches 293 Tags 320 MiB
f2ee564b1a
Commit Graph

4 Commits

Author SHA1 Message Date
CyberMind-FR
f2ee564b1a feat: Reactive Widget System for Dashboard (Phase 5) 
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>
 2026-01-04 14:07:59 +01:00
CyberMind-FR
77dbd3d499 feat: Multi-source AppStore with version management and updates UI (Phases 1-3) 
Implement comprehensive multi-source catalog system with automatic fallback,
advanced version tracking, and rich update management interfaces.

## Phase 1: Backend Infrastructure (COMPLETE)

### UCI Configuration
- **New**: `/etc/config/secubox-appstore`
  - 4 source types: GitHub (remote), local web (remote), USB (local), embedded (fallback)
  - Priority-based fallback (1=highest, 999=embedded last resort)
  - Settings: auto_sync, force_source, check_updates_on_boot, notify_updates
  - Update checking with configurable intervals

### Catalog Sync Script
- **New**: `/usr/sbin/secubox-catalog-sync` (364 lines)
  - Automatic multi-source fallback by priority
  - Download tools: uclient-fetch, wget, curl (auto-detect)
  - HTTP caching: ETag support, 304 Not Modified handling
  - JSON validation before use
  - Metadata tracking with jq
  - Logging to syslog
  - Source types: remote (HTTPS/HTTP), local (filesystem), embedded (ROM)

### CLI Enhancement
- **Modified**: `/usr/sbin/secubox-appstore`
  - New commands: `sync [source]`, `check-updates [--json]`, `changelog <app> [version]`
  - `get_active_catalog()`: Reads from cache or embedded
  - `sync_catalog()`: Wrapper for secubox-catalog-sync
  - `check_updates()`: Version comparison with opkg
  - `get_changelog()`: Extracts from catalog JSON

### Metadata Structure
- **New**: `/usr/share/secubox/catalog-metadata.json.example`
  - Active source tracking
  - Source status (online/offline/error)
  - ETag cache for HTTP sources
  - Installed apps version tracking
  - Update statistics

### Makefile Updates
- **Modified**: `secubox-core/Makefile`
  - PKG_RELEASE: 5 → 6
  - Added conffiles: `/etc/config/secubox-appstore`
  - Install secubox-catalog-sync binary
  - Install catalog-metadata.json.example
  - Added dependency: +jq
  - postinst: Create cache directories (/var/cache/secubox/catalogs, /var/lib/secubox)

## Phase 2: RPCD Backend (COMPLETE)

### New RPC Methods
- **Modified**: `/usr/libexec/rpcd/luci.secubox`
  - `get_catalog_sources()`: List configured sources from UCI, status from metadata
  - `set_catalog_source(source)`: Configure force_source in UCI
  - `sync_catalog([source])`: Trigger catalog sync (auto-fallback or specific)
  - `check_updates()`: Compare installed vs catalog versions
  - `get_app_versions(app_id)`: Detailed version info (pkg, app, installed, catalog)
  - `get_changelog(app_id, from, to)`: Extract changelog from catalog
  - `get_widget_data(app_id)`: Widget metrics (Phase 5 prep)

All methods integrate with:
- UCI config parsing (`config_load`, `config_foreach`)
- Metadata file reading (`/var/lib/secubox/catalog-metadata.json`)
- Catalog reading (`/var/cache/secubox/catalogs/*.json` or embedded)
- opkg version checking

## Phase 3: Frontend LuCI Views (COMPLETE)

### API Module Enhancement
- **Modified**: `secubox-admin/api.js`
  - New RPC declarations: 7 new methods
  - Exports: `getCatalogSources`, `setCatalogSource`, `syncCatalog`,
            `checkUpdates`, `getAppVersions`, `getChangelog`, `getWidgetData`

### Catalog Sources Management
- **New**: `view/secubox-admin/catalog-sources.js` (370 lines)
  - Live source status display (online/offline/error)
  - Priority-based ordering
  - Active source indicator
  - Per-source actions: Sync, Test, Set Active, Enable/Disable
  - Summary stats: Total sources, active source, updates available
  - Auto-refresh every 30 seconds
  - Timestamp formatting (relative: "5 minutes ago", "2 days ago")

### Updates Manager
- **New**: `view/secubox-admin/updates.js` (380 lines)
  - Available updates list with version comparison
  - Changelog preview in update cards
  - Version arrows: "0.3.0-1 → 0.4.0-2"
  - Per-app actions: Update Now, View Full Changelog, Skip Version
  - Batch update: "Update All" button
  - Check for Updates: Sync + check flow
  - Auto-refresh every 60 seconds
  - No updates state: Checkmark with message

### Apps Manager Enhancement
- **Modified**: `view/secubox-admin/apps.js`
  - Load update info on page load
  - Update available badges (warning style)
  - Version display with tooltip (installed → available)
  - Visual indicators: `.has-update`, `.version-outdated` classes
  - New filter: "Updates Available" / "Installed" / "Not Installed"
  - Changelog button on all apps (installed or not)
  - Update button for apps with available updates
  - `updateApp()`: Shows changelog before update
  - `viewChangelog()`: Modal with version history
  - `filterByStatus()`: Filter by update/install status

### Menu Integration
- **Modified**: `menu.d/luci-app-secubox-admin.json`
  - New entries:
    - "Updates" (order: 25) → `/admin/secubox/admin/updates`
    - "Catalog Sources" (order: 27) → `/admin/secubox/admin/catalog-sources`
  - Placed between Apps Manager and App Settings

## Data Flow Architecture

```
User Action (Web UI)
  ↓
LuCI View (catalog-sources.js, updates.js, apps.js)
  ↓
API Module (api.js RPC calls)
  ↓
RPCD Backend (luci.secubox)
  ↓
CLI Scripts (secubox-appstore, secubox-catalog-sync)
  ↓
Data Layer
  ├── UCI Config (/etc/config/secubox-appstore)
  ├── Cache (/var/cache/secubox/catalogs/*.json)
  ├── Metadata (/var/lib/secubox/catalog-metadata.json)
  └── Embedded (/usr/share/secubox/catalog.json)
```

## Fallback Logic

1. User triggers sync (or auto-sync)
2. secubox-catalog-sync reads UCI config
3. Sorts sources by priority (1 = GitHub, 2 = Local Web, 3 = USB, 999 = Embedded)
4. Attempts each source in order:
   - GitHub HTTPS → timeout/fail → Next
   - Local Web → unreachable → Next
   - USB → not mounted → Next
   - Embedded → Always succeeds (ROM)
5. First successful source becomes active
6. Metadata updated with status, ETag, timestamp
7. Cache written to `/var/cache/secubox/catalogs/<source>.json`

## Version Tracking

- **PKG_VERSION**: OpenWrt package version (e.g., "0.4.0")
- **PKG_RELEASE**: Build release number (e.g., "2")
- **pkg_version**: Full package string "0.4.0-2" (in catalog)
- **app_version**: Underlying app version (e.g., "0.4.0")
- **installed_version**: From `opkg list-installed`
- **catalog_version**: From active catalog JSON
- **Comparison**: Uses `opkg compare-versions` for semantic versioning

## Storage Layout

```
/etc/config/secubox-appstore              # UCI configuration
/var/cache/secubox/catalogs/              # Downloaded catalogs (755/644)
  ├── github.json
  ├── local_web.json
  └── usb.json
/var/lib/secubox/                         # Runtime metadata (700/600)
  └── catalog-metadata.json
/usr/share/secubox/catalog.json           # Embedded fallback (ROM)
```

## Key Features

✅ **Multi-source support**: GitHub + Web + USB + Embedded
✅ **Automatic fallback**: Priority-based with retry logic
✅ **HTTP optimization**: ETag caching, 304 Not Modified
✅ **Version management**: PKG + App versions, changelog tracking
✅ **Update notifications**: Badges, filters, dedicated updates page
✅ **Offline capable**: USB and embedded sources work without internet
✅ **Live status**: Auto-refresh, real-time source health
✅ **User control**: Manual sync, force specific source, enable/disable sources

## Files Modified (8)
- package/secubox/secubox-core/Makefile
- package/secubox/secubox-core/root/usr/libexec/rpcd/luci.secubox
- package/secubox/secubox-core/root/usr/sbin/secubox-appstore
- package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/api.js
- package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/apps.js
- package/secubox/luci-app-secubox-admin/root/usr/share/luci/menu.d/luci-app-secubox-admin.json

## Files Created (4)
- package/secubox/secubox-core/root/etc/config/secubox-appstore
- package/secubox/secubox-core/root/usr/sbin/secubox-catalog-sync
- package/secubox/secubox-core/root/usr/share/secubox/catalog-metadata.json.example
- package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/catalog-sources.js
- package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js

## Next Steps (Phase 4-5)

- Phase 4: Enrich catalog.json with changelog sections
- Phase 5: Widget system (renderer + templates for security/network/monitoring)
- Phase 6: Auto-sync service with cron
- Phase 7: Optimizations (signature validation, compression, CDN)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-04 10:53:57 +01:00
CyberMind-FR
5d081cbf3e fix(luci-app-secubox-admin): fix Makefile structure to enable package indexing 
Fixed critical Makefile structure issue that prevented luci-app-secubox-admin from
being indexed by the feed system and built by the SDK.

Changes:
1. Added `include $(TOPDIR)/rules.mk` at the beginning (required for all OpenWrt packages)
2. Added PKG_LICENSE and PKG_MAINTAINER fields (best practices)
3. Added LUCI_PKGARCH:=all to match other LuCI packages
4. Added closing comment `# call BuildPackage - OpenWrt buildroot`
5. Moved include statements to proper positions

This fix aligns the Makefile with the standard OpenWrt/LuCI package structure used
by luci-app-secubox and other working packages.

Additionally:
- Suppressed kconfig warnings in local-build.sh by redirecting stderr to /dev/null
  for all `make defconfig` commands (lines 532, 782, 1278)

Build verification:
✅ Package now appears in feeds/secubox.index
✅ Successfully builds: luci-app-secubox-admin_1.0.0-r2_all.ipk (8.3KB)
✅ Total SecuBox packages built: 33

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-04 09:11:01 +01:00
CyberMind-FR
e7c9411d79 feat: Release v0.8.2 - Admin Control Center, Documentation Mirror & Docker Automation 
This release adds major new features for SecuBox management and deployment:

## New Features

### 1. LuCI Admin Control Center (luci-app-secubox-admin)
- Unified admin dashboard for managing all SecuBox appstore plugins
- **Control Panel**: Real-time stats, system health, alerts, quick actions
- **Apps Manager**: Browse catalog, install/remove apps with search & filtering
- **App Settings**: Per-app configuration, start/stop controls
- **System Health**: Live monitoring (CPU, RAM, disk) with auto-refresh
- **System Logs**: Centralized log viewer with download capability
- Fully integrated with existing RPCD backend (luci.secubox)
- Mobile-responsive design with polished UI components

### 2. Documentation Mirror in SecuBox Bonus
- Integrated complete development documentation into luci-app-secubox-bonus
- 64+ documentation files now available offline at /luci-static/secubox/docs/
- Beautiful landing page (index-main.html) with 4 sections:
  - Development guides & references
  - Live module demos
  - Tutorials & blog posts
  - Marketing campaign pages
- Accessible locally on router without internet connection

### 3. Automated Docker Plugin Installation
- Enhanced secubox-appstore CLI with full Docker automation
- One-click installation from web UI now fully automated:
  - Auto-detects Docker runtime from catalog
  - Discovers and executes control scripts (*ctl install)
  - Pulls Docker images automatically
  - Creates directories and configures UCI
  - Enables init services
- No manual CLI steps required for Docker apps
- Works for all Docker apps: AdGuard Home, Mail-in-a-Box, Nextcloud, etc.

### 4. Mail-in-a-Box Plugin
- New Docker-based email server plugin (secubox-app-mailinabox)
- Complete package with:
  - UCI configuration (8 port mappings, feature flags)
  - Control script (mailinaboxctl) with install/check/update/status/logs
  - Procd init script with auto-restart
  - Catalog manifest (category: hosting, maturity: beta)
- Network mode: host (required for mail server)
- Persistent storage: mail, SSL, data, DNS volumes

## Improvements

### Build System
- Updated local-build.sh to include luci-app-* packages from package/secubox/
- Now automatically discovers and builds luci-app-secubox-admin and similar packages
- Fixed Makefile include paths for feed structure

### Package Releases
- Incremented PKG_RELEASE for all 31 SecuBox packages
- Ensures clean upgrade path from previous versions

### Catalog Updates
- Mail-in-a-Box entry moved from "productivity" to "hosting" category
- Status changed to "beta" reflecting community Docker image maturity
- Storage requirement increased: 1024MB → 2048MB
- Added port 25 accessibility note

## Files Changed

### New Packages (2)
- package/secubox/luci-app-secubox-admin/ (12 files)
- package/secubox/secubox-app-mailinabox/ (4 files)

### Enhanced Packages (1)
- package/secubox/luci-app-secubox-bonus/ (65 new docs files)

### Modified Core (3)
- package/secubox/secubox-core/root/usr/sbin/secubox-appstore
- package/secubox/secubox-core/root/usr/share/secubox/catalog.json
- secubox-tools/local-build.sh

### All Makefiles (31 packages)
- Incremented PKG_RELEASE for clean upgrade path

## Technical Details

**Admin Control Center Architecture:**
- Frontend: 5 views (dashboard, apps, settings, health, logs)
- API: Wrapper around luci.secubox RPCD methods
- Components: Reusable UI library (cards, badges, alerts, loaders)
- Styling: Common + admin-specific CSS with responsive design
- Auto-refresh: Polling for live updates (5-30s intervals)

**Docker Automation Flow:**
```
Web UI → RPCD → secubox-appstore CLI → opkg install → *ctl install →
docker pull → directories → UCI config → init enable → ✓ Ready
```

**Access Points:**
- Admin Control: http://router/cgi-bin/luci/admin/secubox/admin/
- Documentation: http://router/luci-static/secubox/index-main.html
- Demos: http://router/luci-static/secubox/demo-*.html

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-04 08:29:31 +01:00