Embed Grafana panel images in PR comment via release assets

Upload rendered panel PNGs as prerelease assets and embed them
directly in the PR comment under a collapsible details section.
Also fix dashboard queries to use actual WVA metric names.

Author: ev-shindin

.github/workflows/ci-benchmark.yaml

@@ -241,6 +241,7 @@ jobs:
         with:
           script: |
             const fs = require('fs');
+            const path = require('path');
             const prNumber = parseInt('${{ needs.gate.outputs.pr_number }}');
             const sha = '${{ needs.gate.outputs.pr_head_sha }}';
             const runId = context.runId;
@@ -282,27 +283,67 @@ jobs:
               console.log(`Could not read results: ${e.message}`);
             }
 
-            // Check which Grafana artifacts exist
-            const hasSnapshotJson = fs.existsSync('/tmp/benchmark-grafana-snapshot.json');
-            const hasPanels = fs.existsSync('/tmp/benchmark-panels') &&
-              fs.readdirSync('/tmp/benchmark-panels').some(f => f.endsWith('.png'));
+            // Upload panel PNGs as release assets and collect URLs for embedding
+            let panelImages = '';
+            const panelDir = '/tmp/benchmark-panels';
+            const hasPanels = fs.existsSync(panelDir) &&
+              fs.readdirSync(panelDir).some(f => f.endsWith('.png'));
+
+            if (hasPanels) {
+              const pngs = fs.readdirSync(panelDir).filter(f => f.endsWith('.png')).sort();
+              const tag = `benchmark-run-${runId}`;
+
+              try {
+                // Create a lightweight release to host panel images
+                const release = await github.rest.repos.createRelease({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  tag_name: tag,
+                  name: `Benchmark panels (PR #${prNumber}, ${sha.substring(0, 7)})`,
+                  body: `Auto-generated by benchmark CI run #${runId}`,
+                  draft: false,
+                  prerelease: true
+                });
 
+                const imageUrls = [];
+                for (const png of pngs) {
+                  const filePath = path.join(panelDir, png);
+                  const fileData = fs.readFileSync(filePath);
+                  const asset = await github.rest.repos.uploadReleaseAsset({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    release_id: release.data.id,
+                    name: png,
+                    data: fileData,
+                    headers: { 'content-type': 'image/png' }
+                  });
+                  const title = png.replace('panel-', '').replace('.png', '').replace(/-/g, ' ');
+                  imageUrls.push(`#### ${title}\n![${title}](${asset.data.browser_download_url})`);
+                  console.log(`Uploaded ${png}: ${asset.data.browser_download_url}`);
+                }
+
+                if (imageUrls.length > 0) {
+                  panelImages = `\n\n<details>\n<summary>Dashboard Panels (${imageUrls.length})</summary>\n\n${imageUrls.join('\n\n')}\n\n</details>`;
+                }
+              } catch (e) {
+                console.log(`Could not upload panel images: ${e.message}`);
+              }
+            }
+
+            // Check for Grafana snapshot
+            const hasSnapshotJson = fs.existsSync('/tmp/benchmark-grafana-snapshot.json');
             let artifactsSection = '';
             if (hasSnapshotJson || hasPanels) {
               const items = [];
               if (hasSnapshotJson) {
-                items.push('Grafana snapshot JSON (re-import via `POST /api/snapshots`)');
-              }
-              if (hasPanels) {
-                const pngs = fs.readdirSync('/tmp/benchmark-panels').filter(f => f.endsWith('.png'));
-                items.push(`${pngs.length} dashboard panel PNGs`);
+                items.push('Grafana snapshot JSON');
               }
-              artifactsSection = `\n\n📎 **[Download artifacts](${artifactUrl})** — ${items.join(', ')}`;
+              artifactsSection = `\n\n📎 **[Download artifacts](${artifactUrl})**${items.length ? ' — ' + items.join(', ') : ''}`;
             }
 
             const body = `## Benchmark: scale-up-latency (Kind)
 
-            ${resultsTable}${artifactsSection}
+            ${resultsTable}${panelImages}${artifactsSection}
 
             <details>
             <summary>Environment</summary>