Enhanced Chart Layout Persistence and Database Management

[momentum100]

This PR adds comprehensive chart layout persistence and database management features to minimetrics, significantly improving the user experience by maintaining dashboard
state across browser sessions.

Features Added

1. Chart Layout Persistence

• Automatic saving: Charts are automatically saved to localStorage when adding/removing charts or changing configurations
• Layout restoration: On page load, the application restores the previous chart layout including:
  • Chart labels and types
  • Selected metrics (sum, count, avg, etc.)
  • Applied filters
  • Time range settings (Last 15 minutes, Last 1 hour, etc.)
  • Resolution settings (Group 1 minute, Group 5 minutes, etc.)
• Manual controls: Added UI buttons for manual layout management:
  • "Save Layout" button for explicit saving
  • "Clear Layout" button to remove saved layout

2. Enhanced Settings Persistence

Extended the existing settings sync to include:

• Sidebar visibility state
• Auto-refresh preference
• Dark mode preference

3. Database Management

• Clear Database functionality: Added /data/clear API endpoint to safely clear all metrics data
• UI integration: Red "Clear Database" button in toolbar with double confirmation prompts
• Safe implementation: Preserves database schema, indexes, and triggers while clearing data
• Automatic refresh: Charts and labels refresh after database clear

Technical Implementation

Backend Changes (server.go)

• Added new POST /data/clear endpoint at server.go:221
• Implements proper database locking and error handling
• Clears both counters and labels tables while preserving schema

Frontend Changes (public/index.html)

• New chartLayoutSync() function: Manages chart layout persistence
• Enhanced localStorage structure:
  {
  "charts": [...],
  "from": "-1h",
  "resolution": "5m"
  }
• Race condition prevention: Loading flags prevent auto-saving during layout restoration
• Automatic watchers: Vue.js watchers automatically save layout on changes
• User safety: Double confirmation dialogs for destructive operations

Key Technical Details

• Storage keys: mm_chart_layout for layouts, mm_settings for UI preferences
• Async handling: Proper async/await for chart creation during layout restoration
• Error handling: Comprehensive try-catch blocks with user-friendly error messages
• Performance: Efficient deep watching of chart configurations

User Experience Improvements

1. Persistent dashboards: Users can create custom dashboard layouts that survive browser restarts
2. Consistent monitoring: Time ranges and resolutions are maintained across sessions
3. Easy database management: Simple one-click database clearing for development/testing
4. Intuitive controls: Clear UI with appropriate safety measures

Testing

The implementation includes:

• Proper error handling for localStorage operations
• Confirmation dialogs for destructive operations
• Automatic chart and label refreshing after database operations
• Prevention of race conditions during layout loading

Backward Compatibility

• Fully backward compatible with existing installations
• Graceful handling of missing or corrupted localStorage data
• No breaking changes to existing API endpoints