Skip to main content

Dashboard Builder

NopeSight's Dashboard Builder allows you to create interactive dashboards by combining report templates into customizable, real-time monitoring displays. Build comprehensive views of your infrastructure, services, and operations with drag-and-drop simplicity.

What You Can Build​

Dashboard Types​

  • Personal Dashboards: Your private workspace with custom widgets
  • Team Dashboards: Shared views for specific departments or teams
  • System Dashboards: Company-wide dashboards for executives and operations

Available Widgets​

  • Charts: Bar, line, pie, donut, area, and scatter plot visualizations
  • Statistics: KPI numbers with trend indicators and progress bars
  • Tables: Sortable, filterable data grids with pagination
  • Lists: Recent activities, alerts, and notifications
  • Gauges: Progress indicators with color-coded thresholds

Getting Started​

1. Create Your First Dashboard​

  1. Navigate to Dashboards in the main menu
  2. Click New Dashboard
  3. Choose a template or start with a blank dashboard
  4. Give your dashboard a name and description
  5. Set permissions (Personal, Team, or System)

2. Add Widgets​

  1. Click Add Widget or use the + button
  2. Choose from available report templates:
    • CI Status Overview
    • Open Requests by Priority
    • Device Operating Systems
    • Recent Activities
    • Active CI Count
  3. Configure widget settings
  4. Position and resize as needed

3. Customize Layout​

  1. Drag to Reposition: Click and drag widgets to new locations
  2. Resize Widgets: Drag the corners to adjust size
  3. Grid System: Widgets snap to a 12-column grid
  4. Responsive Design: Automatically adjusts for different screen sizes

Dashboard Features​

Layout Management​

  • Grid-Based Layout: 12-column responsive grid system
  • Drag & Drop: Easy widget positioning
  • Auto-Sizing: Widgets automatically resize to fit content
  • Collision Detection: Prevents widget overlap
  • Mobile Responsive: Works on all device sizes

Widget Configuration​

  • Auto-Refresh: Set refresh intervals from 1-15 minutes
  • Data Filtering: Apply filters to widget data
  • Custom Styling: Adjust colors, fonts, and appearance
  • Drill-Down: Click charts to see detailed data
  • Export Options: Export individual widgets (when available)

Real-Time Updates​

  • Live Data: Widgets update automatically based on refresh intervals
  • Status Indicators: Show when data was last updated
  • Loading States: Visual feedback during data refresh
  • Error Handling: Clear error messages when data fails to load

How It Works​

1. Widget Creation​

When you add a widget to your dashboard:

  1. Select a report template as the data source
  2. Choose visualization type (chart, table, statistic, etc.)
  3. Configure display options and filters
  4. Set refresh interval and sizing preferences
  5. Widget is added to your dashboard grid

2. Data Flow​

  1. Template Query: Widget uses the report template's query
  2. Data Fetch: System retrieves data from MongoDB
  3. Processing: Data is processed and formatted
  4. Visualization: Chart library renders the visualization
  5. Updates: Process repeats based on refresh interval

3. Layout Engine​

  • Grid System: Uses react-grid-layout for responsive positioning
  • Breakpoints: Adapts to different screen sizes
  • Persistence: Layout is saved automatically
  • Collision Handling: Prevents widgets from overlapping

Available Widget Types​

Chart Widgets​

Bar Charts

  • Compare values across categories
  • Show horizontal or vertical bars
  • Support multiple data series
  • Interactive tooltips and legends

Line Charts

  • Display trends over time
  • Multiple metrics on same chart
  • Smooth or stepped line styles
  • Zoom and pan capabilities

Pie/Donut Charts

  • Show proportional data
  • Interactive slices
  • Custom color schemes
  • Percentage or value labels

Area Charts

  • Visualize volume changes over time
  • Stacked area support
  • Smooth gradients
  • Highlight data trends

Metric Widgets​

KPI Statistics

  • Large number displays
  • Trend indicators (up/down arrows)
  • Progress bars
  • Color-coded thresholds

Gauge Charts

  • Show progress against targets
  • Color-coded ranges (red/yellow/green)
  • Customizable thresholds
  • Animated needle movement

Data Display Widgets​

Data Tables

  • Sortable columns
  • Filterable rows
  • Pagination support
  • Export capabilities

Activity Lists

  • Recent events and changes
  • Scrollable content
  • Timestamp formatting
  • Status indicators

Dashboard Management​

Permissions​

  • Owner: Full control over dashboard
  • Editor: Can modify widgets and layout
  • Viewer: Can only view the dashboard
  • Team Access: Share with specific teams

Sharing Options​

  • Public Link: Share with anyone via URL
  • Team Sharing: Share with specific team members
  • Read-Only: Viewers cannot modify the dashboard
  • Clone Dashboard: Create copies for customization

Dashboard Settings​

  • Auto-Refresh: Enable/disable automatic updates
  • Refresh Interval: Set global refresh rate
  • Date Range: Default time period for all widgets
  • Theme: Choose color scheme and styling
  • Full Screen: Hide navigation for dedicated displays

Best Practices​

Dashboard Design​

  1. Start with Purpose: What decisions does this dashboard support?
  2. Most Important First: Place key metrics in the top-left
  3. Logical Grouping: Group related widgets together
  4. Consistent Sizing: Similar widgets should be similar sizes
  5. Leave White Space: Don't overcrowd the dashboard

Performance Optimization​

  1. Appropriate Refresh Rates: Balance freshness with performance
  2. Limit Widget Count: Too many widgets can slow performance
  3. Use Filters: Reduce data volume where possible
  4. Monitor Load Times: Check widget performance regularly

User Experience​

  1. Clear Titles: Each widget should have a descriptive title
  2. Consistent Styling: Use similar colors and fonts
  3. Mobile Consideration: Ensure readability on smaller screens
  4. Documentation: Add descriptions for complex widgets

Common Use Cases​

IT Operations Center​

  • Service Health: Overall system status
  • Active Alerts: Critical incidents requiring attention
  • Performance Metrics: CPU, memory, disk usage
  • Network Status: Connectivity and bandwidth

Executive Dashboard​

  • Key Performance Indicators: High-level business metrics
  • Service Availability: Uptime and SLA compliance
  • Resource Utilization: Infrastructure efficiency
  • Cost Metrics: IT spending and optimization

Service Desk Dashboard​

  • Open Tickets: Current workload by priority
  • Resolution Times: Performance metrics
  • Customer Satisfaction: Service quality indicators
  • Team Performance: Individual and team metrics

Compliance Dashboard​

  • Security Status: Vulnerability and patch status
  • Audit Readiness: Compliance checklist progress
  • Risk Indicators: Potential security issues
  • Policy Compliance: Adherence to company policies

Troubleshooting​

Common Issues​

  • Widget Not Loading: Check data source connection and permissions
  • Slow Performance: Reduce refresh frequency or widget count
  • Layout Issues: Try refreshing the page or resetting layout
  • Data Not Updating: Verify auto-refresh settings and data source

Performance Tips​

  • Optimize Queries: Use filters to limit data scope
  • Reasonable Refresh Rates: Don't refresh too frequently
  • Monitor Network: Check for slow API responses
  • Browser Cache: Clear cache if widgets behave unexpectedly

Getting Help​

  • Documentation: Comprehensive guides and examples
  • Support: Contact your system administrator
  • Community: User forums and knowledge base
  • Training: Video tutorials and best practices

Current Limitations​

Not Yet Available​

  • Real-time WebSocket Updates: Currently uses polling-based refresh
  • Advanced Widget Types: Network diagrams, heatmaps not implemented
  • Export Functionality: Cannot export dashboards to PDF/image
  • Scheduling: No automated dashboard delivery
  • Cross-Widget Filtering: Widgets operate independently

Workarounds​

  • Use Multiple Dashboards: Create focused dashboards for different purposes
  • Manual Refresh: Use browser refresh for immediate updates
  • Screen Sharing: Share dashboards via video conferencing
  • Screenshots: Capture dashboard images manually

Next Steps​

  1. Explore Templates: Try different widget types and configurations
  2. Create Multiple Dashboards: Build focused views for different needs
  3. Share with Team: Collaborate on dashboard design
  4. Iterate and Improve: Continuously refine based on usage
  5. Monitor Performance: Ensure dashboards load quickly