feature: Enhance Dashboard with Comprehensive Metrics and Interactive Features

[benoit-bremaud]

Description:

Summary

The current dashboard in the SafeBase project only displays a simple table of database backups. To create a more user-friendly and holistic overview, the dashboard needs to be enhanced with comprehensive metrics, visual components (charts, status indicators), and interactive features. The new dashboard will include sections for system overview, backup health, database metrics, and recent alerts, initially using mock data, and eventually integrating real-time data from the backend API.

Context

A fully functional and interactive dashboard will allow users to monitor the state of databases, understand backup statuses at a glance, view system health metrics, and act on alerts quickly. This will improve user experience and provide a quick, visual understanding of the system's status.

Objectives

• Create a grid-based layout using Angular Material for better organization.
• Display key information such as the number of databases, backup status, last backup time, and any recent alerts.
• Visualize data using charts (e.g., backup success/failure rates).
• Create sections for system overview, backup health, database metrics, and alerts.
• Use mock data for the initial setup, and prepare the logic for future API integration.
• Implement basic interactivity (e.g., action buttons for starting backups).

Acceptance Criteria

• A redesigned dashboard using mat-grid-list for responsive layout.
• Sections are created for System Overview, Backup Health, Database Metrics, and Alerts.
• Pie chart visualizations are added to represent backup success/failure.
• Mock data is used to populate all widgets, with clear placeholders for integrating API data.
• Dashboard is styled for a clean, responsive layout.
• Code is modular and follows best practices for readability and maintainability.

Tasks

1. Create a new branch for the feature

   • Branch name: feature/issue-[issue-number]-enhance-dashboard

2. Restructure the Dashboard Layout

   • [ ] Use Angular Material’s mat-grid-list to create a responsive grid.
   • [ ] Divide the dashboard into sections:
     • System Overview: Total databases, last backup time, number of backups.
     • Backup Health: A pie chart displaying successful vs. failed backups.
     • Database Metrics: CPU usage, memory usage, and storage status for each database.
     • Recent Alerts/Notifications: List of recent alerts.

3. Integrate Mock Data

   • [ ] Populate the dashboard with mock data for all widgets (charts, lists, and metrics).
   • [ ] Prepare logic in dashboard.component.ts to be ready for API data integration in future tasks.

4. Add Charts for Visual Representation

   • [ ] Use ng2-charts or a similar library to add a pie chart for backup health.
   • [ ] Display a bar or line chart for other metrics as needed (e.g., CPU usage over time).

5. Create Interactive Components

   • [ ] Add action buttons for initiating backups, navigating to detailed views, and other quick actions.
   • [ ] Make the dashboard responsive to user interactions (e.g., display messages when no data is available).

6. Style the Dashboard

   • [ ] Use Angular Material components (mat-card, mat-grid-list) for a modern and consistent design.
   • [ ] Ensure the layout is responsive and adapts well to different screen sizes.

7. Testing

   • [ ] Write unit tests for each new component added to the dashboard.
   • [ ] Perform UI tests to ensure that the dashboard displays data correctly and responds to user interactions.

8. Documentation

   • [ ] Document all new components and services added to the dashboard.
   • [ ] Update any existing documentation to reflect the new structure and functionalities.

9. Create a Commit Following the Naming Convention

   • [ ] Format: feat(dashboard): enhance dashboard with metrics and charts
   • [ ] Follow the template and best practices outlined in Commit_Naming_Template.md.

10. Submit a Pull Request

    • [ ] PR Title: feat: enhance dashboard with comprehensive metrics and interactive features
    • [ ] PR Description:
      • Include a summary of changes, list of modified components, and related issue references.
      • Ensure the checklist in the PR template is followed before submission.

---

Resources

• Angular Material Documentation
• ng2-charts Documentation
• Refer to Commit_Naming_Template.md and Branch_Naming_Template.md for proper conventions.

---

Branch Name feature/issue-enhance-dashboard