[UR][Benchmarks] platform info added to bench results (#19640)

Benchmarks webpage displays platform information for selected runs

---------

Signed-off-by: Mateusz P. Nowak <[email protected]>

Author: mateuszpn

devops/scripts/benchmarks/history.py

@@ -9,6 +9,7 @@
 import socket
 
 from utils.result import Result, BenchmarkRun
+from utils.platform import get_platform_info
 from options import Compare, options
 from datetime import datetime, timezone, timedelta
 from utils.utils import run
@@ -182,6 +183,9 @@ def git_info_from_path(path: Path) -> (str, str):
         else:
             compute_runtime = "unknown"
 
+        # Get platform information
+        platform_info = get_platform_info()
+
         return BenchmarkRun(
             name=name,
             git_hash=git_hash,
@@ -190,6 +194,7 @@ def git_info_from_path(path: Path) -> (str, str):
             results=results,
             hostname=hostname,
             compute_runtime=compute_runtime,
+            platform=platform_info,
         )
 
     def save(self, save_name, results: list[Result]):
@@ -246,6 +251,7 @@ def compute_average(self, data: list[BenchmarkRun]):
             git_hash="average",
             date=first_run.date,  # should this be different?
             hostname=first_run.hostname,
+            platform=first_run.platform,
         )
 
         return average_benchmark_run

devops/scripts/benchmarks/html/index.html

@@ -87,6 +87,10 @@ <h3>Tags <button class="tag-action-button" onclick="toggleAllTags(false)">Clear
             <summary>Comparisons</summary>
             <div class="charts"></div>
         </details>
+        <details class="platform-info">
+            <summary>Platform Information</summary>
+            <div class="platform"></div>
+        </details>
     </div>
 </body>
 </html>

devops/scripts/benchmarks/html/scripts.js

@@ -92,6 +92,10 @@ function updateSelectedRuns(forceUpdate = true) {
     activeRuns.forEach(name => {
         selectedRunsDiv.appendChild(createRunElement(name));
     });
+
+    // Update platform information for selected runs
+    displaySelectedRunsPlatformInfo();
+
     if (forceUpdate)
         updateCharts();
 }
@@ -1152,6 +1156,7 @@ function initializeCharts() {
     setupSuiteFilters();
     setupTagFilters();
     setupToggles();
+    initializePlatformTab();
 
     // Apply URL parameters
     const regexParam = getQueryParam('regex');
@@ -1318,3 +1323,94 @@ function createAnnotationsOptions() {
 
     return repoMap;
 }
+
+function displaySelectedRunsPlatformInfo() {
+    const container = document.querySelector('.platform-info .platform');
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    // Get platform info for only the selected runs
+    const selectedRunsWithPlatform = Array.from(activeRuns)
+        .map(runName => {
+            const run = loadedBenchmarkRuns.find(r => r.name === runName);
+            if (run && run.platform) {
+                return { name: runName, platform: run.platform };
+            }
+            return null;
+        })
+        .filter(item => item !== null);
+    if (selectedRunsWithPlatform.length === 0) {
+        container.innerHTML = '<p>No platform information available to display.</p>';
+        return;
+    }
+    selectedRunsWithPlatform.forEach(runData => {
+        const runSection = document.createElement('div');
+        runSection.className = 'platform-run-section';
+            const runTitle = document.createElement('h3');
+        runTitle.textContent = `Run: ${runData.name}`;
+        runTitle.className = 'platform-run-title';
+        runSection.appendChild(runTitle);
+            // Create just the platform details without the grid wrapper
+        const platform = runData.platform;
+        const detailsContainer = document.createElement('div');
+        detailsContainer.className = 'platform-details-compact';
+        detailsContainer.innerHTML = createPlatformDetailsHTML(platform);
+        runSection.appendChild(detailsContainer);
+            container.appendChild(runSection);
+    });
+}
+
+// Platform Information Functions
+
+function createPlatformDetailsHTML(platform) {
+    const formattedTimestamp = platform.timestamp ?
+        new Date(platform.timestamp).toLocaleString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        }) : 'Unknown';
+
+    return `
+        <div class="platform-section compact">
+            <div class="platform-item">
+                <span class="platform-label">Time:</span>
+                <span class="platform-value">${formattedTimestamp}</span>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">OS:</span>
+                <span class="platform-value">${platform.os || 'Unknown'}</span>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">CPU:</span>
+                <span class="platform-value">${platform.cpu_info || 'Unknown'} (${platform.cpu_count || '?'} cores)</span>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">GPU:</span>
+                <div class="platform-value multiple">
+                    ${platform.gpu_info && platform.gpu_info.length > 0
+                        ? platform.gpu_info.map(gpu => `<div class="platform-gpu-item">    • ${gpu}</div>`).join('')
+                        : '<div class="platform-gpu-item">    • No GPU detected</div>'}
+                </div>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">Driver:</span>
+                <span class="platform-value">${platform.gpu_driver_version || 'Unknown'}</span>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">Tools:</span>
+                <span class="platform-value">${platform.gcc_version || '?'} • ${platform.clang_version || '?'} • ${platform.python || '?'}</span>
+            </div>
+            <div class="platform-item">
+                <span class="platform-label">Runtime:</span>
+                <span class="platform-value">${platform.level_zero_version || '?'} • compute-runtime ${platform.compute_runtime_version || '?'}</span>
+            </div>
+        </div>
+    `;
+}
+
+function initializePlatformTab() {
+    displaySelectedRunsPlatformInfo();
+}

devops/scripts/benchmarks/html/styles.css

@@ -301,7 +301,6 @@ details[open] summary::after {
     gap: 4px;
     margin-bottom: 10px;
 }
-
 .tag {
     display: inline-block;
     background-color: #e2e6ea;
@@ -311,27 +310,23 @@ details[open] summary::after {
     font-size: 12px;
     cursor: help;
 }
-
 .tag-filter {
     display: inline-flex;
     align-items: center;
     margin: 4px;
 }
-
 .tag-filter label {
     margin-left: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
 }
-
 .tag-info {
     color: #0068B5;
     margin-left: 4px;
     cursor: help;
     font-size: 12px;
 }
-
 #tag-filters {
     display: flex;
     flex-wrap: wrap;
@@ -342,7 +337,6 @@ details[open] summary::after {
     padding: 8px;
     background-color: #f8f9fa;
 }
-
 .tag-action-button {
     padding: 2px 8px;
     background: #e2e6ea;
@@ -353,11 +347,9 @@ details[open] summary::after {
     margin-left: 8px;
     vertical-align: middle;
 }
-
 .tag-action-button:hover {
     background: #ced4da;
 }
-
 .remove-tag {
     background: none;
     border: none;
@@ -367,7 +359,84 @@ details[open] summary::after {
     font-size: 16px;
     padding: 0 4px;
 }
-
 .remove-tag:hover {
     color: #f8d7da;
 }
+.platform {
+    padding: 16px;
+    background: white;
+    border-radius: 8px;
+    margin-top: 8px;
+}
+.platform-run-section {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 24px;
+}
+.platform-run-section:last-child {
+    margin-bottom: 0;
+}
+.platform-run-title {
+    color: #495057;
+    font-size: 18px;
+    margin: 0 0 16px 0;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #dee2e6;
+    font-weight: 600;
+}
+.platform-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 2px 0;
+    margin-bottom: 4px;
+    font-size: 13px;
+    line-height: 1.3;
+}
+.platform-label {
+    font-weight: 500;
+    color: #495057;
+    min-width: 80px;
+    flex-shrink: 0;
+    margin-right: 8px;
+    font-size: 12px;
+}
+.platform-value {
+    color: #212529;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.3;
+    text-align: left;
+    flex-grow: 1;
+}
+.platform-value.multiple {
+    flex-direction: column;
+    align-items: flex-start;
+}
+.platform-gpu-item {
+    font-size: 11px;
+    line-height: 1.2;
+    margin: 1px 0;
+}
+.platform-details-compact {
+    margin-top: 8px;
+}
+@media (max-width: 768px) {
+    .platform-run-section {
+        padding: 16px;
+        margin-bottom: 16px;
+    }
+    .platform-run-title {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .platform-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .platform-value {
+        margin-left: 0;
+        margin-top: 4px;
+    }
+}