Modernize user view monitor permissions with bootstrap-table and AJAX pagination

[Copilot]

The user view monitor permissions table was statically generated in PHP, limiting scalability and user experience. This replaces it with bootstrap-table using server-side AJAX pagination, matching the pattern used in the events view.

Changes

New AJAX endpoint (web/ajax/user_monitors.php)

• Server-side pagination, search, and sorting for monitor permissions
• Permission validation with self-edit support
• Returns total (filtered) and totalNotFiltered counts for accurate pagination

Updated user view (web/skins/classic/views/user.php)

• Bootstrap-table with data attributes for AJAX, pagination (10/25/50/100/All), search, export
• Added Sequence column for proper monitor ordering
• Unique table ID monitorPermissionsTable (was duplicate contentTable)

Enhanced JavaScript (web/skins/classic/views/js/user.js)

• ajaxRequest() fetches monitor data: ?view=request&request=user_monitors&task=query&uid={userId}
• processRows() dynamically renders permission radio buttons with unique IDs
• Bootstrap-table initialization with post-body.bs.table event handler to re-bind data-on-change handlers after each table render

PHP-to-JS bridge (web/skins/classic/views/js/user.js.php)

• Exports userId and permissionOptions for JavaScript
• Loads all monitors in PHP for effective permission calculation (JavaScript's updateEffectivePermissions() function requires access to all monitors)

Implementation Notes

Radio button HTML is generated client-side to avoid form serialization issues:

permissionHtml += '<input ... name="monitor_permission[' + monitorId + ']" 
  value="' + value + '" id="monitor_permission[' + monitorId + ']_' + value + '"
  data-on-change="updateEffectivePermissions" />';

The data-on-change handlers are re-bound via post-body.bs.table event after each table render, ensuring permission changes trigger effective permission recalculation.

Cookie persistence (zmUserMonitorsTable, 2y expiry) maintains table state across sessions.

Original prompt

Problem Statement

The console user view (web/skins/classic/views/user.php) currently generates the monitor permissions list using a static PHP loop that outputs HTML table rows directly. This should be modernized to use bootstrap-table with an AJAX call to fetch monitor data dynamically, similar to how the events view works.

Current Implementation

Currently, in web/skins/classic/views/user.php (lines 262-296), the monitor permissions section uses a static table that loops through monitors in PHP:

<div id="MonitorPermissions">
  <fieldset><legend><?php echo translate('Monitor Permissions') ?></legend>
    <table id="contentTable" class="major Monitors">
      <thead class="thead-highlight">
        <tr>
          <th class="Id"><?php echo translate('Id') ?></th>
          <th class="Name"><?php echo translate('Name') ?></th>
          <th class="permission"><?php echo translate('Permission') ?></th>
          <th class="effective_permission"><?php echo translate('Effective Permission') ?></th>
        </tr>
      </thead>
      <tbody>
<?php
  $monitors = ZM\Monitor::find(['Deleted'=>0], ['order'=>'Sequence ASC']);
  foreach ( $monitors as $monitor ) {
    if ($monitor->canView()) {
      echo '
<tr class="monitor">
  <td class="Id">'.$monitor->Id().'</td>
  <td class="Name">'.validHtmlStr($monitor->Name()).'</td>
  <td class="permission">'.html_radio('monitor_permission['.$monitor->Id().']', $inve,
    $User->Monitor_Permission($monitor->Id())->Permission(),
    ['default'=>'Inherit'],
    ['data-on-change'=>'updateEffectivePermissions']).'</td>
  <td class="effective_permission" id="effective_permission'.$monitor->Id().'">'.translate($monitor->effectivePermission($User)).'</td>
</tr>';
    }
  }
?>
      </tbody>
    </table>
  </fieldset>
</div>

Desired Implementation

Update the user view to use bootstrap-table with the following features:

1. Bootstrap-table integration: Add data attributes to configure bootstrap-table similar to events.php
2. AJAX data loading: Create an AJAX endpoint to fetch monitor data dynamically
3. Server-side functionality: Implement pagination, search, and sorting on the server side
4. Bootstrap-table features:
   • Pagination with configurable page sizes
   • Search functionality
   • Column visibility toggles
   • Export functionality
   • Cookie-based state persistence
   • Responsive design

Files to Modify/Create

1. web/skins/classic/views/user.php (lines 262-296)

   • Replace static table with bootstrap-table configuration
   • Add data attributes for AJAX, pagination, search, etc.
   • Remove PHP foreach loop from tbody
   • Add similar attributes to events.php (lines 123-157)

2. web/skins/classic/views/js/user.js or web/skins/classic/views/js/user.js.php

   • Create/update ajaxRequest function to fetch monitor data
   • Implement processRows function to format monitor data for display
   • Include permission radio buttons in the row data
   • Handle effective permissions updates
   • Reference the pattern from web/skins/classic/views/js/events.js (lines 249-341)

3. Create new AJAX endpoint (similar to existing request handlers)

   • Could be added to an existing request handler or create a new one
   • Should return monitor data in JSON format with pagination support
   • Include monitor permissions for the current user
   • Return data structure similar to events AJAX endpoint

Reference Implementations

Events View (web/skins/classic/views/events.php lines 114-167):

• Shows how to configure bootstrap-table with data attributes
• Demonstrates AJAX loading with data-ajax="ajaxRequest"
• Shows pagination, search, and cookie persistence configuration

Events JavaScript (web/skins/classic/views/js/events.js lines 249-341):

• Shows ajaxRequest implementation
• Demonstrates processRows for formatting data
• Shows how to handle AJAX responses

Watch View (web/skins/classic/views/watch.php lines 465-538):

• Another example of bootstrap-table for monitoring events
• Shows similar configuration pattern

Frames View (web/skins/classic/views/frames.php lines 19-89):

• Shows simpler bootstrap-table implementation

Requirements

1. Maintain all existing functionality including:

   • Permission radio buttons (Inherit/None/View/Edit)
   • Effective permission display
   • Real-time permission updates when radio buttons change
   • Integration with the updateEffectivePermissions function

2. Add new functionality:

   • Search/filter monitors by Id or Name
   • Pagination for large monitor lists
   • Export monitor permissions data
   • Persistent table state via cookies

3. Follow existing code patterns:

   • Use similar data attribute names as events view
   • Follow the same AJAX request/response pattern
   • Use consistent naming conventions
   • Maintain accessibility features

4. Testing considerations:

   • Test with small and large numbers of monitors
   • Verify permission changes stil...

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.