feat: add ECharts horizontal bar charts to quadra view

Add Apache ECharts 6.0.0 as a vendored asset. Render per-card
horizontal bar charts showing Load and Memory Usage for each VPU
resource type (Decoder, Encoder, Uploader, Scaler, AI), matching
the NetInt dashboard reference design. Add a VPU Devices summary
table listing all detected cards. Use CSP nonce for inline script.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: connortechnology

web/skins/classic/assets/echarts-6.0.0/echarts.min.js

@@ -1,3 +1,96 @@
+function initCharts() {
+  if (typeof echarts === 'undefined' || typeof quadraChartData === 'undefined') return;
+
+  quadraChartData.forEach(function(cardData) {
+    var el = document.getElementById(cardData.id);
+    if (!el) return;
+
+    var chart = echarts.init(el);
+
+    // Build category labels and data arrays (reversed so first item appears at top)
+    var categories = [];
+    var loadData = [];
+    var memData = [];
+    for (var i = cardData.resources.length - 1; i >= 0; i--) {
+      var r = cardData.resources[i];
+      categories.push(r.label);
+      loadData.push(r.load);
+      memData.push(r.mem);
+    }
+
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {type: 'shadow'},
+        formatter: function(params) {
+          var label = params[0].name;
+          var lines = [label];
+          params.forEach(function(p) {
+            lines.push(p.marker + ' ' + p.seriesName + ': ' + p.value + '%');
+          });
+          return lines.join('<br/>');
+        }
+      },
+      legend: {
+        data: ['Load', 'Memory Usage'],
+        top: 0,
+        textStyle: {fontSize: 11}
+      },
+      grid: {
+        left: 70,
+        right: 30,
+        top: 30,
+        bottom: 25
+      },
+      xAxis: {
+        type: 'value',
+        min: 0,
+        max: 100,
+        axisLabel: {formatter: '{value}%', fontSize: 10},
+        splitLine: {lineStyle: {type: 'dashed', color: '#e0e0e0'}}
+      },
+      yAxis: {
+        type: 'category',
+        data: categories,
+        axisLabel: {fontSize: 11},
+        axisTick: {show: false}
+      },
+      series: [
+        {
+          name: 'Load',
+          type: 'bar',
+          data: loadData,
+          barWidth: 8,
+          itemStyle: {color: '#8e8e8e', borderRadius: [0, 3, 3, 0]},
+          label: {
+            show: true,
+            position: 'right',
+            fontSize: 10,
+            formatter: '{c}%'
+          }
+        },
+        {
+          name: 'Memory Usage',
+          type: 'bar',
+          data: memData,
+          barWidth: 8,
+          itemStyle: {color: '#00bcd4', borderRadius: [0, 3, 3, 0]},
+          label: {
+            show: true,
+            position: 'right',
+            fontSize: 10,
+            formatter: '{c}%'
+          }
+        }
+      ]
+    });
+
+    window.addEventListener('resize', function() {
+      chart.resize();
+    });
+  });
+}
+
 function initPage() {
   // Manage the BACK button
   document.getElementById("backBtn").addEventListener("click", function onBackClick(evt) {
@@ -14,6 +107,9 @@ function initPage() {
     window.location.reload(true);
   });
 
+  // Initialize ECharts
+  initCharts();
+
   // Auto-refresh page
   if (quadraRefreshInterval > 0) {
     setInterval(function() {

web/skins/classic/views/js/quadra.js

@@ -254,23 +254,36 @@ function formatBitrate($bps) {
   </div>
 <?php else: ?>
 
-  <!-- System-wide info -->
+  <!-- VPU Devices -->
   <div class="card mb-3">
     <div class="card-header">
-      <i class="material-icons md-18">info</i> System Information
+      <i class="material-icons md-18">memory</i> VPU Devices
+      <span class="text-muted small ml-2">
+        <?php echo htmlspecialchars($quadraSummary['timestamp'] ?: '') ?>
+        <?php if ($quadraSummary['uptime']) echo '&mdash; up '.htmlspecialchars($quadraSummary['uptime']) ?>
+      </span>
     </div>
-    <div class="card-body">
-      <div class="row">
-        <div class="col-md-3">
-          <strong>Timestamp:</strong> <?php echo htmlspecialchars($quadraSummary['timestamp'] ?: 'N/A') ?>
-        </div>
-        <div class="col-md-3">
-          <strong>Uptime:</strong> <?php echo htmlspecialchars($quadraSummary['uptime'] ?: 'N/A') ?>
-        </div>
-        <div class="col-md-3">
-          <strong>Cards detected:</strong> <?php echo count($cards) ?>
-        </div>
-      </div>
+    <div class="card-body table-responsive">
+      <table class="table table-sm table-hover">
+        <thead class="text-left">
+          <tr>
+            <th>Device</th>
+            <th>Firmware</th>
+            <th>PCIe Address</th>
+            <th>NUMA</th>
+          </tr>
+        </thead>
+        <tbody>
+<?php foreach ($cards as $cardIdx => $card): ?>
+          <tr>
+            <td><?php echo htmlspecialchars($card['device']) ?></td>
+            <td><?php echo htmlspecialchars($card['firmware']) ?></td>
+            <td><?php echo htmlspecialchars($card['pcie_addr']) ?></td>
+            <td><?php echo htmlspecialchars($card['numa_node']) ?></td>
+          </tr>
+<?php endforeach; ?>
+        </tbody>
+      </table>
     </div>
   </div>
 
@@ -287,15 +300,16 @@ function formatBitrate($bps) {
     </div>
     <div class="card-body">
 
-    <!-- Resource Utilization -->
+    <!-- VPU Usage Chart -->
 <?php
 $hasResources = false;
 foreach ($resourceSections as $key => $meta) {
   if (!empty($card['summary'][$key])) { $hasResources = true; break; }
 }
 if ($hasResources):
 ?>
-    <h6><i class="material-icons md-18">speed</i> Resource Utilization</h6>
+    <h6><i class="material-icons md-18">speed</i> VPU Usage</h6>
+    <div id="chart-card-<?php echo $cardIdx ?>" style="width:100%;height:<?php echo 60 + 40 * count(array_filter($resourceSections, function($k) use ($card) { return !empty($card['summary'][$k]); }, ARRAY_FILTER_USE_KEY)) ?>px;" class="mb-3"></div>
     <div class="table-responsive mb-3">
       <table class="table table-sm table-striped table-hover">
         <thead class="thead-highlight text-left">
@@ -494,4 +508,33 @@ function formatBitrate($bps) {
 <?php endif; ?>
   </div><!-- content -->
 </div>
+<?php
+// Pass chart data to JS
+if ($hasData):
+  $chartData = [];
+  foreach ($cards as $cardIdx => $card) {
+    $resources = [];
+    foreach ($resourceSections as $key => $meta) {
+      if (empty($card['summary'][$key])) continue;
+      $entry = $card['summary'][$key][0];
+      $totalMem = intval($entry['MEM'] ?? 0) + intval($entry['CRITICAL_MEM'] ?? 0) + intval($entry['SHARE_MEM'] ?? 0);
+      $resources[] = [
+        'label' => $meta['label'],
+        'load' => intval($entry['LOAD'] ?? 0),
+        'mem' => $totalMem > 0 ? intval($entry['MEM'] ?? 0) : 0,
+      ];
+    }
+    if (!empty($resources)) {
+      $chartData[] = [
+        'id' => "chart-card-{$cardIdx}",
+        'resources' => $resources,
+      ];
+    }
+  }
+?>
+<?php echo output_script_if_exists(array('assets/echarts-6.0.0/echarts.min.js'), false) ?>
+<script nonce="<?php echo $cspNonce ?>">
+var quadraChartData = <?php echo json_encode($chartData) ?>;
+</script>
+<?php endif; ?>
 <?php xhtmlFooter() ?>