| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Cloud Package versions check</title> |
| <style> |
| body { |
| font-family: Verdana, Geneva, Tahoma, sans-serif; |
| font-size: 90% !important; |
| } |
| .dot_green { |
| float: left; |
| color: green; |
| margin-right: 0.5em; |
| margin-top: 0.2em; |
| } |
| .dot_red { |
| float: left; |
| color: red; |
| margin-right: 0.5em; |
| margin-top: 0.2em; |
| } |
| .dot_empty { |
| float: left; |
| color: darkgray; |
| margin-right: 0.5em; |
| margin-top: 0.2em; |
| } |
| /* Style the tab */ |
| .tab { |
| float: left; |
| width: 130px; |
| border: 1px solid #fff; |
| background-color: #efe; |
| } |
| |
| /* Style the buttons that are used to open the tab content */ |
| .tab button { |
| display: block; |
| background-color: inherit; |
| color: Black; |
| border: none; |
| outline: none; |
| font-family: "Lucida Console", Monaco, monospace; |
| text-align: left; |
| cursor: pointer; |
| transition: 0.3s; |
| font-size: 1.3em; |
| width: 100%; |
| padding: 1px; |
| margin: 1px; |
| } |
| |
| button > div.node_name { |
| float: left; |
| font-size: 1.3em; |
| } |
| |
| .smallgreytext { |
| float: right; |
| font-size: 0.7em; |
| color: gray; |
| } |
| |
| /* Change background color of buttons on hover */ |
| .tab button:hover { |
| background-color: #7b7; |
| } |
| |
| /* Create an active/current "tab button" class */ |
| .tab button.active { |
| background-color: #8c8; |
| color: white; |
| } |
| |
| /* Style the tab content */ |
| .tabcontent { |
| display: none; |
| position: absolute; |
| font-size: 1em; |
| padding: 0.5em; |
| right: -10%; |
| top: 0%; |
| transform: translateX(-12%); |
| width: calc(100% - 170px); |
| overflow-x: scroll; |
| overflow-wrap: break-word; |
| } |
| |
| table { |
| border: 0 hidden; |
| width: 100%; |
| } |
| tr:nth-child(even) { |
| background-color: #fff; |
| } |
| tr:nth-child(odd) { |
| background-color: #ddd; |
| } |
| .Header { |
| background-color: #bbb; |
| color: Black; |
| width: 30%; |
| text-align: center; |
| } |
| .pkgName { |
| font-size: 1em; |
| padding-left: 10px; |
| } |
| |
| .version { |
| font-size: 1.1em; |
| text-align: left; |
| } |
| |
| .differ { |
| background-color: #eaa; |
| } |
| /* Tooltip container */ |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| border-bottom: 1px dotted black; |
| } |
| |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| background-color: black; |
| font-family: "Lucida Console", Monaco, monospace; |
| font-size: 0.5em; |
| width: auto; |
| color: #fff; |
| border-radius: 6px; |
| padding: 5px 5px; |
| |
| /* Position the tooltip */ |
| position: absolute; |
| z-index: 1; |
| } |
| |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| } |
| |
| </style> |
| <script language="JavaScript"> |
| function init() { |
| // Declare all variables |
| var i, tabcontent, tablinks; |
| |
| // Get all elements with class="tabcontent" and hide them |
| tabcontent = document.getElementsByClassName("tabcontent"); |
| for (i = 1; i < tabcontent.length; i++) { |
| tabcontent[i].style.display = "none"; |
| } |
| tabcontent[0].style.display = "block"; |
| |
| // Get all elements with class="tablinks" and remove the class "active" |
| tablinks = document.getElementsByClassName("tablinks"); |
| for (i = 1; i < tablinks.length; i++) { |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); |
| } |
| tablinks[0].className += " active"; |
| |
| } |
| function openTab(evt, tabName) { |
| // Declare all variables |
| var i, tabcontent, tablinks; |
| |
| // Get all elements with class="tabcontent" and hide them |
| tabcontent = document.getElementsByClassName("tabcontent"); |
| for (i = 0; i < tabcontent.length; i++) { |
| tabcontent[i].style.display = "none"; |
| } |
| |
| // Get all elements with class="tablinks" and remove the class "active" |
| tablinks = document.getElementsByClassName("tablinks"); |
| for (i = 0; i < tablinks.length; i++) { |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); |
| } |
| |
| // Show the current tab, and add an "active" class to the link that opened the tab |
| document.getElementById(tabName).style.display = "block"; |
| evt.currentTarget.className += " active"; |
| } |
| </script> |
| </head> |
| <body onload="init()"> |
| <div class="tab"> |
| {% for node_name in nodes.keys() | sort %} |
| {% if nodes[node_name] | is_active %} |
| <button class="tablinks" onclick="openTab(event, '{{ node_name | shortname }}')"> |
| <div class="dot_green">●</div> |
| <div class="node_name">{{ node_name | shortname }}</div> |
| <div class="smallgreytext">({{ counters[node_name]['package_diff'] }} / {{ counters[node_name]['packages'] }})</div> |
| </button> |
| {% endif %} |
| {% endfor %} |
| {% for node_name in nodes.keys() | sort %} |
| {% if not nodes[node_name] | is_active %} |
| <button class="tablinks" onclick="openTab(event, '{{ node_name | shortname }}')"> |
| <div class="dot_empty">○</div> |
| <div class="node_name">{{ node_name | shortname }}</div> |
| <div class="smallgreytext">({{ counters[node_name]['package_diff'] }} / {{ counters[node_name]['packages'] }})</div> |
| </button> |
| {% endif %} |
| {% endfor %} |
| </div> |
| {% for node_name in nodes.keys() | sort %} |
| <div id="{{ node_name | shortname }}" class="tabcontent"> |
| <table class="pkgversions"> |
| <tbody> |
| <tr> |
| <td class="Header">Package name</td> |
| <td class="Header">Installed</td> |
| <td class="Header">Candidate</td> |
| </tr> |
| <tr><td colspan=3>Package with different versions uniq for this node</td></tr> |
| {% for package_name in nodes[node_name]['packages'] | sort %} |
| {% if not nodes[node_name]['packages'][package_name]['is_equal'] %} |
| {% if nodes[node_name]['packages'][package_name]['fail_uniq'] %} |
| <tr> |
| <td class="pkgName">{{ package_name }}</td> |
| <td class="version differ"> |
| <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }} |
| <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre> |
| </div> |
| </td> |
| <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td> |
| </tr> |
| {% endif %} |
| {% endif %} |
| {% endfor %} |
| <tr><td colspan=3>Packages with different versions on nodes with similar role</td></tr> |
| {% for package_name in nodes[node_name]['packages'] | sort %} |
| {% if not nodes[node_name]['packages'][package_name]['is_equal'] %} |
| {% if not nodes[node_name]['packages'][package_name]['fail_uniq'] %} |
| <tr> |
| <td class="pkgName">{{ package_name }}</td> |
| <td class="version differ"> |
| <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }} |
| <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre> |
| </div> |
| </td> |
| <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td> |
| </tr> |
| {% endif %} |
| {% endif %} |
| {% endfor %} |
| <tr><td colspan=3>Packages with same versions: installed vs candidate</td></tr> |
| {% for package_name in nodes[node_name]['packages'] | sort %} |
| {% if nodes[node_name]['packages'][package_name] | is_equal %} |
| <tr> |
| <td class="pkgName">{{ package_name }}</td> |
| <td class="version"> |
| <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }} |
| <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre> |
| </div> |
| </td> |
| <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td> |
| </tr> |
| {% endif %} |
| {% endfor %} |
| </tbody> |
| </table> |
| </div> |
| {% endfor %} |
| </body> |
| </html> |