Add modal popup for TPL version display across platforms

Maintenance/test_handling/Summary_Script.js

@@ -171,8 +171,7 @@ function platformContainer(platforms) {
     platforms.forEach(platform => {
         const $container = $('<div>', { class: 'platform ' + platform.name }).appendTo($platformContainer);
         $container.html(`<h2>Results of ${platform.name}</h2>`);
-        const tplString = platform.third_party_libraries.replace("TPL: ", "").trim();
-        const tplArray = tplString.split(",").map(tpl => tpl.trim()).filter(tpl => tpl.length > 0);
+        const tplArray = platform.tpl;
         const $toggleButton = $('<button>', {
             text: 'Third Party Libraries',
             class: 'tpl-toggle-button',
@@ -183,15 +182,18 @@ function platformContainer(platforms) {
         const $tplTable = $('<table>', { class: 'tpl-table', css: { display: 'none' } }).appendTo($container);
         const $thead = $('<thead>').appendTo($tplTable);
         const $tbody = $('<tbody>').appendTo($tplTable);
-        
-        $('<tr>').append('<th>Third Party Libraries</th>').appendTo($thead);
-        
-        let $row = $('<tr>').appendTo($tbody);
-        tplArray.forEach((tpl, index) => {
-            if (index > 0 && index % 5 === 0) {
-                $row = $('<tr>').appendTo($tbody);
-            }
-            $('<td>').text(tpl).appendTo($row);
+        $('<tr>').append('<th>Library</th><th>Version</th><th>Status</th>').appendTo($thead);
+        tplArray.forEach(tpl => {
+            $('<tr>').append(
+                $('<td>').html(`<a href="#" class="tpl-link" data-tpl="${tpl.name}">${tpl.name}</a>`),
+                $('<td>').text(tpl.version || 'N/A'),
+                $('<td>').text(tpl.status)
+            ).appendTo($tbody);
+        });
+        $('.tpl-link').click(function(event) {
+            event.preventDefault();
+            const tplName = $(this).data('tpl');
+            showVersionsForTPL(tplName);
         });
 
         const letters = ['n', 'w', 'o', 'r'];
@@ -244,6 +246,34 @@ function closeAll() {
     $('.toggle-button').text('Show More');
 }
 
+function showVersionsForTPL(tplName) {
+    const $modal = $('#tplModal');
+    const $modalTitle = $('#tplModalTitle');
+    const $modalBody = $('#tplModalBody');
+    $modalTitle.text(`Versions of ${tplName} across platforms`);
+    $modalBody.empty();
+    let tplFound = false;
+    window.data.platforms.forEach(platform => {
+        const matchingTPL = platform.tpl.find(tpl => tpl.name === tplName);
+        if (matchingTPL) {
+            tplFound = true;
+            $modalBody.append(`<p><strong>Platform:</strong> ${platform.name} | <strong>Version:</strong> ${matchingTPL.version || 'N/A'} | <strong>Status:</strong> ${matchingTPL.status}</p>`);
+        }
+    });
+    if (!tplFound) {
+        $modalBody.append('<p>No versions of this TPL found across platforms.</p>');
+    }
+    $modal.show();
+    $('.close').click(function() {
+        $modal.hide();
+    });
+    $(window).click(function(event) {
+        if (event.target == $modal[0]) {
+            $modal.hide();
+        }
+    });
+}
+
 function main() {
     const url = searchURLs["current"];
     $.getJSON(url, data => {

Maintenance/test_handling/create_testresult_page

@@ -754,19 +754,40 @@ sub create_summary_page {
     my ($platform_num, $platform) = (0, "");
     foreach $platform (@platforms_to_do) {
         my $third_party_libraries = "";
-        if (open (PLATFORM_INFO, "results_${platform}.info")) {
+        my @tpl_list = ();
+        if (open(PLATFORM_INFO, "results_${platform}.info")) {
             my $line = "";
             while (<PLATFORM_INFO>) {
                 $line = $_;
                 if ($line =~ /^TPL:/) {
                     $third_party_libraries = $line;
+                    if ($third_party_libraries =~ /^TPL:\s*(.*)/) {
+                        my $tpl_data = $1;
+                        my @tpls = split /,\s*/, $tpl_data;
+                        foreach my $tpl (@tpls) {
+                            if ($tpl =~ /(.+)\s+not found/i) {
+                                push @tpl_list, {
+                                    name => $1,
+                                    version => undef,
+                                    status => "not found"
+                                };
+                            }
+                            elsif ($tpl =~ /(.+)\s+(\S+)/) {
+                                push @tpl_list, {
+                                    name => $1,
+                                    version => $2,
+                                    status => "found"
+                                };
+                            }
+                        }
+                    }
                 }
             }
             close PLATFORM_INFO;
         }
         my $platform_info = {
             name => $platform,
-            third_party_libraries => $third_party_libraries,
+            tpl => \@tpl_list,
             test_directories => [],
         };
         foreach my $letter (@letters) {
@@ -791,7 +812,7 @@ sub create_summary_page {
         platforms => \@platforms_data,
     };
     my $json = JSON->new->allow_nonref;
-    my $json_text = $json->pretty->encode($final_data);
+    my $json_text = $json->encode($final_data);
     open my $fh, '>', "$testresult_dir/$release_name/search_index.json" or die "Could not open file: $!";
     print $fh $json_text;
     close $fh;
@@ -818,6 +839,13 @@ sub create_summary_page {
         <!-- This file is generated by a program. Do not edit manually!! -->
     </head>
     <body>
+        <div id="tplModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2 id="tplModalTitle">Versions of TPL</h2>
+                <div id="tplModalBody"></div>
+            </div>
+        </div>
         <input type="text" id="searchInput" placeholder="Search ..." autocomplete="off" onkeypress="if(event.keyCode==13) search()">
         <select id="releaseSelector">
             <option value="current" selected>This release</option>

Maintenance/test_handling/testresult.css

@@ -93,9 +93,6 @@ TABLE.result TD > a.package_name {
 
 .toggle-button {
     text-decoration: underline;
-    border: none;
-    color: #0000EE;
-    cursor: pointer;
 }
 
 .summary-content{
@@ -117,7 +114,7 @@ TABLE.result TD > a.package_name {
     margin-right: 10px;
 }
 
-/* Summary Page */
+/* TPL table */
 
 .tpl-table {
     width: auto;
@@ -156,8 +153,66 @@ TABLE.result TD > a.package_name {
     border: 1px solid #ccc;
     cursor: pointer;
     text-align: center;
+    text-decoration: underline;
 }
 
 .tpl-toggle-button:hover {
     background-color: #e0e0e0;
+}
+
+.tpl-link {
+    color: #0000EE;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.tpl-link:hover {
+    color: #1A0DAB;
+}
+
+/* TPL Modal */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: white;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 60%;
+    max-width: 600px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover, .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal h2 {
+    margin-top: 0;
+    color: #333;
+}
+
+.modal p {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #555;
 }