Gitiles
Code Review Sign In
gerrit.mcp.mirantis.com / mcp / cfg-checker / 836fac892c2e094ea6e5e121bf3f9d6d3073633f / . / templates / model_tree_cmp_tmpl.j2
blob: c3b798f077ec3e4a055918b457a9f57d1dc65eac [file] [log] [blame]
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Model Tree Changes</title>
6 <style>
7 body {
8 font-family: Verdana, Geneva, Tahoma, sans-serif;
9 font-size: 90% !important;
10 }
11 .dot_green {
12 float: left;
13 color: green;
14 margin-right: 0.5em;
15 margin-top: 0.2em;
16 }
17 .dot_red {
18 float: left;
19 color: red;
20 margin-right: 0.5em;
21 margin-top: 0.2em;
22 }
23 .dot_empty {
24 float: left;
25 color: darkgray;
26 margin-right: 0.5em;
27 margin-top: 0.2em;
28 }
29 /* Style the tab */
30 .tab {
31 float: left;
32 width: 130px;
33 border: 1px solid #fff;
34 background-color: #efe;
35 }
36
37 /* Style the buttons that are used to open the tab content */
38 .tab button {
39 display: block;
40 background-color: inherit;
41 color: Black;
42 border: none;
43 outline: none;
44 font-family: "Lucida Console", Monaco, monospace;
45 text-align: left;
46 cursor: pointer;
47 transition: 0.3s;
48 font-size: 1.3em;
49 width: 100%;
50 padding: 1px;
51 margin: 1px;
52 }
53
54 button > div.node_name {
55 float: left;
56 font-size: 1.3em;
57 }
58
59 .smallgreytext {
60 float: right;
61 font-size: 0.7em;
62 color: gray;
63 }
64
65 /* Change background color of buttons on hover */
66 .tab button:hover {
67 background-color: #7b7;
68 }
69
70 /* Create an active/current "tab button" class */
71 .tab button.active {
72 background-color: #8c8;
73 color: white;
74 }
75
76 /* Style the tab content */
77 .tabcontent {
78 display: none;
79 position: absolute;
80 font-size: 1em;
81 padding: 0.5em;
82 right: -10%;
83 top: 0%;
84 transform: translateX(-12%);
85 width: calc(100% - 170px);
86 overflow-x: scroll;
87 overflow-wrap: break-word;
88 }
89
90 table {
91 border: 0 hidden;
92 width: 100%;
93 }
94 tr:nth-child(even) {
95 background-color: #fff;
96 }
97 tr:nth-child(odd) {
98 background-color: #ddd;
99 }
100 .Header {
101 background-color: #bbb;
102 color: Black;
103 width: 30%;
104 text-align: center;
105 }
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]106 .param {
107 font-size: 0.8em;
108 color: #555;
109 padding-left: 50px;
110 padding-right: 10px;
111 }
112 .class_file {
113 font-size: 0.8em;
114 font-weight: bold;
115 min-width: 300px;
116 text-align: left;
117 color: black;
118 }
119
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]120 .pkgName {
121 font-size: 1em;
122 padding-left: 10px;
Alex Savatieievf00743b2019-01-25 11:14:08 +0100[diff] [blame]123 max-width: 800px;
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]124 }
125
126 .version {
Alex Savatieievf00743b2019-01-25 11:14:08 +0100[diff] [blame]127 font-size: 1em;
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]128 text-align: left;
Alex Savatieievf00743b2019-01-25 11:14:08 +0100[diff] [blame]129 max-width: 400px;
130 overflow-wrap: break-word;
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]131 }
132
133 .differ {
134 background-color: #eaa;
135 }
136 /* Tooltip container */
137 .tooltip {
138 position: relative;
139 display: inline-block;
140 border-bottom: 1px dotted black;
141 }
142
143 .tooltip .tooltiptext {
144 visibility: hidden;
145 background-color: black;
146 font-family: "Lucida Console", Monaco, monospace;
147 font-size: 0.5em;
148 width: auto;
149 color: #fff;
150 border-radius: 6px;
151 padding: 5px 5px;
152
153 /* Position the tooltip */
154 position: absolute;
155 z-index: 1;
156 }
157
158 .tooltip:hover .tooltiptext {
159 visibility: visible;
160 }
161
162 </style>
163 <script language="JavaScript">
164 function init() {
165 // Declare all variables
166 var i, tabcontent, tablinks;
167
168 // Get all elements with class="tabcontent" and hide them
169 tabcontent = document.getElementsByClassName("tabcontent");
170 for (i = 1; i < tabcontent.length; i++) {
171 tabcontent[i].style.display = "none";
172 }
173 tabcontent[0].style.display = "block";
174
175 // Get all elements with class="tablinks" and remove the class "active"
176 tablinks = document.getElementsByClassName("tablinks");
177 for (i = 1; i < tablinks.length; i++) {
178 tablinks[i].className = tablinks[i].className.replace(" active", "");
179 }
180 tablinks[0].className += " active";
181
182 }
183 function openTab(evt, tabName) {
184 // Declare all variables
185 var i, tabcontent, tablinks;
186
187 // Get all elements with class="tabcontent" and hide them
188 tabcontent = document.getElementsByClassName("tabcontent");
189 for (i = 0; i < tabcontent.length; i++) {
190 tabcontent[i].style.display = "none";
191 }
192
193 // Get all elements with class="tablinks" and remove the class "active"
194 tablinks = document.getElementsByClassName("tablinks");
195 for (i = 0; i < tablinks.length; i++) {
196 tablinks[i].className = tablinks[i].className.replace(" active", "");
197 }
198
199 // Show the current tab, and add an "active" class to the link that opened the tab
200 document.getElementById(tabName).style.display = "block";
201 evt.currentTarget.className += " active";
202 }
203 </script>
204</head>
205<body onload="init()">
206<div class="tab">
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]207{% for tab in tabs.keys() | sort %}
208 <button class="tablinks" onclick="openTab(event, '{{ tab }}')">
209 <div class="node_name">{{ tab }}</div>
210 <div class="smallgreytext">({{ counters[tab] }})</div>
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]211 </button>
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]212{% endfor %}
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]213</div>
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]214{% for tab in tabs.keys() | sort %}
215<div id="{{ tab }}" class="tabcontent">
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]216 <table class="pkgversions">
217 <tbody>
218 <tr>
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]219 <td class="Header">Reclass path</td>
220 <td class="Header">{{ names[0] }}</td>
221 <td class="Header">{{ names[1] }}</td>
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]222 </tr>
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]223 <tr><td colspan=3>Changes found in {{ tabs[tab]["path"] }}</td></tr>
224 {% for diff in tabs[tab]["diffs"].keys() | sort %}
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]225 <tr>
226 <td class="pkgName">
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]227 <div class="class_file">{{ tabs[tab]["diffs"][diff]["class_file"] }}</div>
228 <div class="param">{{ tabs[tab]["diffs"][diff]["param"] }}</div>
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]229 </td>
230 <td class="version">
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]231 <div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][0] | linebreaks }}</pre></div>
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]232 </td>
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]233 <td class="version">
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]234 <div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][1] | linebreaks }}</pre></div>
Alex Savatieiev36b938d2019-01-21 11:01:18 +0100[diff] [blame]235 </td>
236 </tr>
237 {% endfor %}
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]238 </tbody>
239 </table>
240</div>
Alex Savatieiev4f149d02019-02-28 17:15:29 -0600[diff] [blame]241{% endfor %}
Alex Savatieievd48994d2018-12-13 12:13:00 +0100[diff] [blame]242</body>
243</html>