Merge upstream version
Related-PROD: PROD-28199
Change-Id: I5d9dbde1c3ac577fb30fa5d6b1ff18bcee28a0d7
diff --git a/templates/network_check_tmpl.j2 b/templates/network_check_tmpl.j2
index 553b554..9f0f556 100644
--- a/templates/network_check_tmpl.j2
+++ b/templates/network_check_tmpl.j2
@@ -2,207 +2,120 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>Model Tree Changes</title>
+ <title>Nodes and Networks report</title>
+ {% include 'common_styles.j2' %}
+ {% include 'common_scripts.j2' %}
<style>
- body {
- font-family: Verdana, Geneva, Tahoma, sans-serif;
- font-size: 90% !important;
+ table.cluster_nodes {
+ width: 90%;
+ margin-left: 5%;
+ margin-right: 5%;
}
- .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 {
+
+ /* Node rows*/
+ .node {
+ display: inline-block;
+ background-color: white;
+ }
+
+ tr.node > td {
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;
- }
- .param {
- font-size: 0.8em;
- color: #555;
- padding-left: 50px;
- padding-right: 10px;
- }
- .class_file {
- font-size: 0.8em;
- font-weight: bold;
- min-width: 300px;
- text-align: left;
+ padding: 1px;
+ padding-left: 5px;
+ padding-right: 5px;
color: black;
+ background-color: #A1BbA1;
+ text-align: center;
+ margin: 2px;
}
-
- .pkgName {
- font-size: 1em;
- padding-left: 10px;
- max-width: 800px;
+
+ .meters {
+ display: inline-block;
}
-
- .version {
- font-size: 1em;
- text-align: left;
- max-width: 400px;
- overflow-wrap: break-word;
+
+ td.meters > .meter {
+ display: block;
+ float: 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="header">
+ <div class="label">OpenStack release:</div>
+ <div class="text">{{ openstack_release }}</div>
+ <div class="label">MCP Version:</div>
+ <div class="text">{{ mcp_release }}</div>
+ <div class="label date">generated on: {{ gen_date }}</div>
+</div>
+
+<div class="bar">
+ <button class="bar-item" onclick="openBar(event, 'nodes')">Nodes</button>
+ <button class="bar-item" onclick="openBar(event, 'networks')">Networks</button>
+ <button class="bar-item" onclick="openBar(event, 'services')">Other</button>
+</div>
+
+{% macro nodes_page(nodes, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+ <h5>{{ caller() }}</h5>
+ <hr>
+ <table class="cluster_nodes">
+ {% for node in nodes.keys() | sort %}
+ {% set _ndat = nodes[node] %}
+ <tr class="node virt">
+ <td class="status">{{ _ndat['status'] }}</td>
+ <td class="name">{{ node }}</td>
+ <td class="role">{{ _ndat['role'] }}</td>
+ <td class="vendor">QEMU</td>
+ <td class="meter cpu">vCPU: 12</td>
+ <td class="meter ram">RAM: 500GB</td>
+ <td class="meter disk">VDA: 150/140/135</td>
+ </tr>
+ {% endfor %}
+ </table>
+ <hr>
+</div>
+{% endmacro %}
+
+{% macro networks_page(networks, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+ <h5>{{ caller() }}</h5>
+ <hr>
+ <table class="networks">
+ <tr class="subnet">192.168.10.0/24</tr>
+ <tr class="net collapsable">
+ <td class="status">UP</td>
+ <td class="name">cfg01.internal.net</td>
+ <td class="ip">192.168.10.11</td>
+ <td class="param">1500</td>
+ </tr>
+ </table>
+ <hr>
+</div>
+{% endmacro %}
+
+{% macro services_page(services, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+ <h5>{{ caller() }}</h5>
+ <hr>
+</div>
+{% endmacro %}
+
+<!-- Cluster nodes page -->
+{% call nodes_page(nodes, "nodes") %}
+ Cluster nodes status and simple meterings
+{% endcall %}
+
+<!-- Cluster nodes page -->
+{% call networks_page(networks, "networks") %}
+ Networks in the cluster
+{% endcall %}
+
+<!-- Cluster nodes page -->
+{% call services_page(services, "services") %}
+ Services status in the cluster
+{% endcall %}
+
</body>
</html>
\ No newline at end of file