Extending Monitor Views with Custom Widgets

On this page, you learn how to add custom HTML widgets to specific Monitor View pages in Nodinite. This extensibility enables you to add context-specific visualizations, environment badges, or compliance notices visible only to users with access to that Monitor View.

What are Monitor View Widgets?

Monitor View widgets allow you to inject custom HTML content above the notifications section in specific Monitor Views. Unlike Dashboard widgets (which are visible to all users), Monitor View widgets:

• Target specific Monitor Views - Widget only appears in the Monitor View with matching ID
• Respect access controls - Only users with permission to view that Monitor View see the widget
• Provide context - Add environment-specific notices or compliance warnings for critical production resources

When to Use Monitor View Widgets

Acceptable Use Cases (Static Content Only)

• Environment identification badges - Display prominent visual indicator for Production vs UAT Monitor Views
• Compliance notices - Display regulatory warnings for HIPAA/SOX-controlled systems
• Escalation contacts - Show on-call engineer details for critical production Monitor Views
• Change freeze warnings - Display maintenance window notifications for specific environments

Deprecated Use Cases

• ❌ Real-time API data fetching - JavaScript API calls will be blocked
• ❌ Dynamic resource status - Use built-in Monitor View features instead
• ❌ Custom alerting - Webhook calls and external HTTP requests will be blocked

Step-by-Step: Adding Monitor View Widget

Prerequisites

• Nodinite Administrator access to web server
• File system permissions for C:\Program Files\Nodinite\[Instance]\WebClient\Plugins\MonitorViews\
• IIS Manager access for app pool recycling
• Know your Monitor View ID (see below)

Finding Your Monitor View ID

1. Navigate to the Monitor View in Nodinite Web Client
2. Check the URL in your browser address bar
3. Look for MonitorView/ followed by a number

Examples:

• URL: http://localhost:40000/Monitor/MonitorView/9 → Monitor View ID = 9
• URL: https://nodinite.acme.com/Monitor/MonitorView/42 → Monitor View ID = 42

Steps

1. Navigate to WebClient Directory

   C:\Program Files\Nodinite\[Instance]\WebClient\
   

   Replace [Instance] with your Nodinite instance name (e.g., Production, Test)

2. Create MonitorViews Folder (if it doesn't exist)

   C:\Program Files\Nodinite\[Instance]\WebClient\Plugins\MonitorViews\
   

3. Create HTML Widget File

   • Critical: File name MUST exactly match the Monitor View ID
   • Monitor View ID 9 → File name: 9.html
   • Monitor View ID 42 → File name: 42.html
   • Important: Add only static HTML content; JavaScript will be blocked by upcoming sanitization

   
   Example: Widget file 5.html in the WebClient\Plugins\MonitorViews\ folder for Monitor View ID 5.

4. Add Your HTML Content

   Create a file with static HTML (see examples below)

5. Recycle IIS App Pool

   • Open IIS Manager (inetmgr)
   • Navigate to Application Pools
   • Find the Nodinite app pool (e.g., Nodinite_Production)
   • Right-click → Recycle

6. Verify Widget Appears

   • Navigate to your Monitor View: http://localhost:40000/Monitor/MonitorView/[ID]
   • Widget appears above the notifications section

Monitor View Widget Examples

Production Environment Badge

<!-- File: C:\Program Files\Nodinite\Production\WebClient\Plugins\MonitorViews\9.html -->
<!-- Monitor View ID: 9 (Production SAP Systems) -->
<div class="alert alert-danger mb-3" role="alert" style="border-left: 4px solid #d32f2f;">
  <h4 class="alert-heading">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
    PRODUCTION ENVIRONMENT
  </h4>
  <p class="mb-0">
    <strong>Warning:</strong> You are viewing <strong>live production systems</strong>.
    All changes require change management approval. Contact on-call engineer before restarting resources.
  </p>
</div>

Status: Will work after sanitization - Static HTML only

Compliance Notice Example

<!-- File: 42.html (HIPAA-Controlled Healthcare Integration) -->
<div class="card mb-3" style="border-left: 4px solid #ff9800;">
  <div class="card-header bg-warning">
    <h5 class="mb-0">
      <i class="fas fa-shield-alt" aria-hidden="true"></i>
      HIPAA Compliance Notice
    </h5>
  </div>
  <div class="card-body">
    <p>
      <strong>Regulated Environment:</strong> This Monitor View contains ePHI (Electronic Protected Health Information).
    </p>
    <ul>
      <li><strong>Access Logged:</strong> All views and actions are audited for compliance</li>
      <li><strong>No Screenshots:</strong> Capturing ePHI data is prohibited</li>
      <li><strong>Report Issues:</strong> Contact Compliance Officer (ext. 7890)</li>
    </ul>
    <p class="mb-0">
      <a href="https://wiki.acme.com/hipaa-integration-policy" class="btn btn-warning btn-sm">
        <i class="fas fa-file-alt" aria-hidden="true"></i> View HIPAA Policy
      </a>
    </p>
  </div>
</div>

Status: Will work after sanitization - Static HTML only

On-Call Contact Information

<!-- File: 15.html (Critical Payment Processing Monitor View) -->
<div class="card mb-3">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">
      <i class="fas fa-phone" aria-hidden="true"></i>
      24/7 Escalation Contacts
    </h5>
  </div>
  <div class="card-body">
    <p><strong>Primary On-Call:</strong> John Smith (mobile: +1-555-0100)</p>
    <p><strong>Backup Contact:</strong> Sarah Johnson (mobile: +1-555-0101)</p>
    <p><strong>Team Email:</strong> <a href="mailto:payments-oncall@acme.com">payments-oncall@acme.com</a></p>
    <p class="mb-0">
      <strong>SLA:</strong> 15-minute response time for P1 incidents
    </p>
  </div>
</div>

Status: Will work after sanitization - Static HTML only

Accessibility Notes

• Use semantic HTML: <h2>, <h3>, <p>, <ul>, <a>
• Add ARIA attributes: aria-label, aria-hidden="true" on decorative icons
• Ensure color contrast meets WCAG AA (4.5:1 for normal text)
• Provide text alternatives: Don't rely on color alone for meaning
• Use role="alert" for important warnings

Comparison: Dashboard vs Monitor View Widgets

Available Libraries and Styling

Bootstrap 5

Nodinite includes Bootstrap 5. Use these classes for consistent styling:

• Layout: container, row, col-md-6, mb-3, p-2
• Alerts: alert, alert-info, alert-warning, alert-danger
• Cards: card, card-header, card-body
• Buttons: btn, btn-primary, btn-sm
• Text: text-center, text-muted, fw-bold

Font Awesome 6

Use Font Awesome icons with <i> tags:

<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
<i class="fas fa-shield-alt" aria-hidden="true"></i>
<i class="fas fa-phone" aria-hidden="true"></i>

Always include aria-hidden="true" on decorative icons.

Best Practices

Do's

• Keep content static - Use only HTML markup and CSS classes (Bootstrap, Font Awesome)
• Match Monitor View ID exactly - File name 9.html only works for Monitor View ID 9
• Use descriptive badges - Make environment/compliance status visually obvious
• Include contact information - Provide escalation paths for critical Monitor Views
• Test with actual users - Verify users with Monitor View access can see the widget
• Plan for migration - Prepare to move to the new extensibility system when available

Don'ts

• Never use JavaScript - All <script> tags will be blocked by sanitization
• Don't load external resources - CDN scripts and stylesheets will be blocked
• Never embed credentials - Don't include API keys or passwords
• Don't build critical functionality - Custom widgets are transitional and will be deprecated
• Don't rely on color alone - Use icons + text for status indicators (WCAG AA)

Troubleshooting

Widget Not Appearing

Problem

Widget HTML file created but not visible in Monitor View.

Solution

• File name must exactly match Monitor View ID from URL
• Monitor View URL: http://localhost:40000/Monitor/MonitorView/9 → File name: 9.html
• Monitor View URL: http://localhost:40000/Monitor/MonitorView/42 → File name: 42.html

Additional Checks

1. Verify IIS App Pool Recycled

   • Open IIS Manager → Application Pools → Find Nodinite pool → Recycle

2. Check File Location

   • Monitor View widgets: WebClient\Plugins\MonitorViews\[ID].html
   • File must be in MonitorViews\ subfolder, not root Plugins\ folder

3. Verify File Permissions

   • IIS app pool identity must have Read access to the file
   • Right-click file → Properties → Security → Verify IIS AppPool\[PoolName] has Read access

4. Check Browser Cache

   • Hard refresh: Ctrl+F5 (Windows), Cmd+Shift+R (Mac)

Security Considerations

Current Security Risks

• Script injection vulnerabilities - Malicious HTML files could execute unauthorized JavaScript
• Session hijacking - Widgets execute with full user privileges and access to cookies
• Data exfiltration - Unrestricted API access could leak sensitive integration data

Required Precautions

1. Restrict file system access - Only allow trusted administrators to add widget files
2. Code review all widgets - Manually inspect HTML files before deployment
3. Audit logging - Monitor widget file changes via file system auditing
4. Minimize usage - Remove unnecessary widgets to reduce attack surface
5. Never use untrusted sources - Do not copy widget code from forums or community templates
6. Prepare for sanitization - Upcoming security updates will block JavaScript to prevent these risks

For security administrators: This feature will be replaced with a secure extensibility framework. Current implementation relies on administrative trust and file system access controls.

Next Steps

Before creating Monitor View widgets:

1. Evaluate alternatives - Review built-in Monitor View features and Stylesheets first
2. Understand limitations - Only static HTML will be supported after sanitization
3. Plan for migration - This feature will be deprecated; prepare to migrate to the new system
4. Keep it simple - Create minimal, static content widgets for environment badges or compliance notices only
5. Test thoroughly - Verify accessibility, responsiveness, and appearance after IIS recycle

Recommendation: Use Monitor View widgets only for critical static content that cannot be achieved through built-in features. Avoid building complex functionality that will need to be rewritten when the new extensibility system is released.

Related Topics

• Monitor Views Overview - Learn about Monitor View features and capabilities
• Custom Dashboard Items - Add widgets to the main Dashboard page
• Stylesheets - Apply custom CSS to log messages and alerts
• Working with a Monitor View - Monitor View user guide