--- title: "Dashboard Customization & Layouts (Edit Mode)" description: "Documentation for Edit Dashboard Mode" --- ## Table of Contents 1. [Overview](#1-overview) 2. [Commercial & Operational Value](#2-commercial--operational-value) 3. [🎯 User Roles & Key Capabilities](#3--user-roles--key-capabilities) 4. [Visual Interface & Edit Controls](#4-visual-interface--edit-controls) 5. [Widget Catalog & Grid System](#5-widget-catalog--grid-system) 6. [Layout Management & Persistence](#6-layout-management--persistence) 7. [Operational Best Practices](#7-operational-best-practices) 8. [Troubleshooting & Verification](#8-troubleshooting--verification) 9. [Glossary](#9-glossary) --- ## 1. Overview The **Dashboard Customization & Layouts** module in **Ring2All SBC** provides network administrators, VoIP engineers, and NOC operators with an interactive, drag-and-drop workspace customization engine. By switching the primary SBC console into **Edit Mode**, operators can personalize their operational dashboard, reorder telemetry cards, resize critical monitoring widgets, and persist multiple role-specific layout profiles. The engine uses a reactive CSS Grid layout system backed by stateful persistence in local storage and backend profile configurations, enabling real-time telemetry observation without sacrificing UI responsiveness or system efficiency. --- ## 2. Commercial & Operational Value * **Zero Friction NOC Customization**: Telecom operation centers require tailored visibility depending on shifting carrier SLAs, live traffic events, and maintenance windows. Edit Mode empowers operators to bring critical widgets (such as Server Status, Hardware Info, and SBC Overview) front-and-center. * **Multi-Screen & Multi-Role Flexibility**: Shift supervisors can maintain different layouts (e.g., a "Carrier Traffic" layout vs. a "System Health & Kernel" layout) and toggle between them instantly without restarting the console. * **Enhanced Situational Awareness**: Eliminates visual clutter by letting engineers remove unused panels and arrange high-velocity SIP metrics right where they need them. --- ## 3. 🎯 User Roles & Key Capabilities | Role | Key Capabilities | | :--- | :--- | | **SBC Administrator** | Full authority to create, edit, rename, and delete dashboard layout profiles; add, arrange, or remove any telemetry widget. | | **NOC Engineer** | Customize personal operational views, reorder metric cards to monitor high-priority carriers, and switch between predefined monitoring layouts. | | **Support Specialist** | Arrange quick-action shortcuts and server health widgets for rapid diagnostics during subscriber or trunk troubleshooting sessions. | --- ## 4. Visual Interface & Edit Controls When Edit Mode is activated from the user menu in the sidebar, the top navigation bar displays the active editing state, the layout selector dropdown, the widget insertion button, and the completion action button. ![Dashboard Customization (Edit Mode)](/screenshots/sbc/account-menu/edit-dashboard.png) ### Control Bar Reference | UI Element | Description | Action / Interaction | | :--- | :--- | :--- | | **Editing Badge** | Prominent visual indicator signaling that the dashboard is currently unlocked for layout manipulation. | Informs the user that widgets can be moved or removed. | | **Layout Dropdown** | Displays the name of the currently loaded dashboard layout (e.g., `Default`). | Opens the layout menu to switch layouts, create a new layout profile, or delete the active layout. | | **+ Widget Button** | Primary modal launcher for adding new components from the system widget catalog. | Opens the Widget Catalog drawer to select and insert available monitoring modules. | | **Done Button** | Finalizes layout editing, saves coordinates, and returns the dashboard to standard real-time monitoring mode. | Commits current widget positions and locks the grid. | | **Drag Handle (`:::`)** | Positioned in the upper-left corner of each widget card header. | Click and drag to reposition the widget across grid rows and columns. | | **Remove Widget (`x`)** | Located on the right side of each widget card header. | Removes the widget from the active layout canvas without deleting underlying metrics. | --- ## 5. Widget Catalog & Grid System The Ring2All SBC dashboard grid operates on a fluid, responsive 12-column grid layout. Available widgets encompass real-time infrastructure metrics and SIP telecom telemetry: | Widget Name | Category | Primary Telemetry Displayed | | :--- | :--- | :--- | | **Quick Actions** | Shortcuts | Instant navigation shortcuts to Domains, Gateways, Carriers, SIP Accounts, and Endpoints. | | **System Stats** | Core Metrics | Live CPU load percentage, RAM utilization, Disk usage, and 1m/5m/15m system load averages. | | **SBC Overview** | SIP Telephony | Active Calls count, SIP Registrations, Blocked IPs, Calls Per Second (CPS), Active Domains, and Subscribers. | | **Server Status** | Services | Real-time daemon health for Kamailio, PostgreSQL, Nginx, Fail2Ban, Nftables Firewall, OpenVPN, and WireGuard. | | **Hardware Info** | Hardware | Motherboard identification, CPU model, CPU cores count, Physical RAM, and Disk storage boundaries. | | **Server Info** | System | Linux distribution release, Linux kernel version, Kamailio version, SBC API version, and Node.js runtime. | | **Network Info** | Networking | Hostname, active network interface (`ens18`, `wg0`), IPv4 address, Netmask, and Hardware MAC address. | --- ## 6. Layout Management & Persistence 1. **Creating a New Layout**: * Click the layout selector dropdown in the top bar. * Click **New Layout**, input the descriptive name (e.g., `NOC-Carrier-Focus`), and confirm. * The newly created layout initializes with a clean or cloned grid ready for customization. 2. **Reordering Widgets**: * Grab the `:::` handle on any card and drag it to the desired position. * Neighboring widgets automatically reflow smoothly to maintain grid integrity. 3. **Saving State**: * Clicking **Done** writes the layout coordinates (`x`, `y`, `w`, `h`) to the client workspace profile, ensuring persistent layouts across browser sessions and device reloads. --- ## 7. Operational Best Practices * **Keep Critical Health Indicators Visible**: Maintain either the `Server Status` or `System Stats` widget visible in every operational layout to immediately spot memory spikes or daemon restarts. * **Dedicated Carrier Troubleshooting Layouts**: Create a specialized layout featuring `SBC Overview` and `Network Info` when diagnosing wholesale carrier congestion or routing failover events. * **Lock Layout After Modifications**: Always click **Done** after adjusting widgets to prevent accidental drag operations during live call tracking. --- ## 8. Troubleshooting & Verification | Issue / Symptom | Root Cause | Resolution | | :--- | :--- | :--- | | Widgets do not save positions after page reload | Browser local storage disabled or permissions quota reached | Ensure browser local storage is enabled and clear stale profile cache if storage quota exceeded. | | Widget card appears cut off on smaller screens | Viewport width below recommended minimum | Access the SBC console with a minimum resolution of 1280x800 or 1600x1000 for optimal multi-column display. | | Layout dropdown does not allow deleting layout | The layout is the last remaining layout profile | The system requires at least one active layout (e.g., `Default`) to remain available at all times. | --- ## 9. Glossary * **Grid System**: Flexible 12-column layout grid allowing customizable card sizing and placement. * **Layout Profile**: A named arrangement of dashboard widgets saved to the user session. * **Telemetry**: Automated transmission and display of system performance, SIP volume, and hardware metrics.