Modernize console view with bootstrap-table and AJAX data loading

[Copilot]

The console view generated monitor lists using static PHP loops during page render, requiring full page reloads to update monitor status. This replaces it with bootstrap-table and AJAX loading, matching the pattern used in the events view.

Changes

AJAX Endpoint (web/ajax/console.php)

• Added queryRequest() handling server-side pagination, search, and sorting
• Returns JSON with all monitor fields (status, events, thumbnails, FPS, bandwidth)
• Respects session-based filters (Groups, Servers, Storage, Status)
• Optimized search to avoid instantiating Monitor objects

View Template (web/skins/classic/views/console.php)

• Replaced static table generation (~170 line PHP loop) with bootstrap-table configuration
• Empty tbody populated dynamically via AJAX
• Added data attributes for pagination (10/25/50/100/200/All), search, sorting, export, column visibility

Client JavaScript (web/skins/classic/views/js/console.js)

• ajaxRequest() fetches monitor data from endpoint
• processRows() formats data (status indicators, links, thumbnails, groups)
• Updated button handlers (edit/delete/clone/select) to use bootstrap-table selections
• reloadWindow() now calls table.bootstrapTable('refresh') instead of full page reload
• Added _id field to preserve numeric IDs separately from formatted HTML

Variables (web/skins/classic/views/js/console.js.php)

• Removed static monitors array generation (now loaded via AJAX)
• Added canView/canEdit permission objects and ZM_WEB_EVENTS_VIEW variable

Example

Before: Full page reload every refresh interval

foreach ($displayMonitors as $monitor) {
  // ~100 lines of HTML generation per monitor
  echo '<tr>...</tr>';
}

After: Table refresh only

function reloadWindow() {
  table.bootstrapTable('refresh');  // AJAX call, no page reload
}

Features Added

• Server-side pagination, search, sorting
• Column visibility toggles and export
• Cookie-based state persistence
• Automatic refresh without losing scroll position
• Maintains all existing functionality (filters, buttons, modals, thumbnails)

Original prompt

Problem Statement

The console view (web/skins/classic/views/console.php) currently generates the monitor 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 with automatic refreshes, similar to how the events view works.

Current Implementation

Currently, in web/skins/classic/views/console.php, the monitor list is generated using a static PHP loop that creates table rows during page load. The table starts around line 215 and the monitor rows are generated starting around line 277-446 with a PHP foreach loop.

The current implementation:

• Loads all monitor data during initial page render
• Uses jQuery UI sortable for drag-and-drop reordering
• Relies on full page refreshes to update monitor status
• Has a consoleRefreshTimeout that reloads the entire page

Desired Implementation

Update the console 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. Automatic refresh: Use bootstrap-table's refresh functionality instead of full page reloads
4. Server-side functionality: Implement pagination, search, and sorting on the server side
5. Bootstrap-table features:
   • Pagination with configurable page sizes
   • Search functionality across monitor name, function, source, etc.
   • Column visibility toggles
   • Export functionality
   • Cookie-based state persistence
   • Responsive design
   • Automatic data refresh (instead of full page reload)

Files to Modify/Create

1. web/skins/classic/views/console.php

• Replace the static table generation (lines ~215-472) with bootstrap-table configuration
• Add data attributes for AJAX, pagination, search, etc. similar to events.php
• Configure data-ajax="ajaxRequest" to load data dynamically
• Add data-refresh-interval for automatic updates
• Remove the PHP foreach loop that generates monitor rows in tbody
• Keep the form structure for checkbox selections
• Reference pattern from web/skins/classic/views/events.php (lines 114-167)

Example configuration to add:

<table
  id="consoleTable"
  data-locale="<?php echo i18n() ?>"
  data-side-pagination="server"
  data-ajax="ajaxRequest"
  data-pagination="true"
  data-search="true"
  data-cookie="true"
  data-cookie-id-table="zmConsoleTable"
  data-cookie-expire="2y"
  data-show-columns="true"
  data-show-export="true"
  data-toolbar="#toolbar"
  data-show-refresh="true"
  data-buttons-class="btn btn-normal"
  data-click-to-select="true"
  data-maintain-meta-data="true"
  class="table table-striped table-hover table-condensed consoleTable"
>

2. web/skins/classic/views/js/console.js

• Add ajaxRequest function to fetch monitor data via AJAX (reference events.js lines 249-341)
• Add processRows function to format monitor data for display
• Include all monitor data (thumbnail, function, status, events, etc.)
• Modify the refresh mechanism to use table.bootstrapTable('refresh') instead of window.location.reload()
• Update the reloadWindow function or replace with table refresh
• Ensure checkbox selection state is maintained
• Keep existing functions like setButtonStates, manageFunctionModal, sortMonitors, etc.
• Update initPage to initialize bootstrap-table

3. Create/Update AJAX endpoint

• Add a new request handler or extend existing web/ajax/console.php or similar
• Create endpoint like ?view=request&request=console&task=query
• Return monitor data in JSON format with pagination support
• Include all necessary monitor fields:
  • Id, Name, Function, Status, Enabled
  • Server info, Storage info
  • Event counts (Total, Hour, Day, Week, Month, Archived)
  • Thumbnail HTML if enabled
  • Zone count, Source path
  • Bandwidth and FPS stats
• Support search, sort, pagination parameters
• Return format should match what bootstrap-table expects:

{
  "total": 100,
  "totalNotFiltered": 100,
  "rows": [...]
}

4. web/skins/classic/views/js/console.js.php

• May need to update or remove the static monitors array generation
• Consider moving monitor data to be fetched via AJAX instead

Reference Implementations

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

• Shows bootstrap-table configuration with data attributes
• Demonstrates AJAX loading pattern
• Shows toolbar integration

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

• Shows ajaxRequest implementation
• Demonstrates processRows for formatting data
• Shows pagination and error handling

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

• Another example of bootstrap-table with AJAX
• Shows...

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.