Package versions Legend page update

Change-Id: I521afd93dc27044b94256c16ed9b7f995f3a64fd
Related-PROD: PROD-28199
diff --git a/templates/pkg_versions_html.j2 b/templates/pkg_versions_html.j2
index d1b71bb..7c52a1d 100644
--- a/templates/pkg_versions_html.j2
+++ b/templates/pkg_versions_html.j2
@@ -88,6 +88,13 @@
             background-color: #d4dad9;
         }
 
+        .status_container .text {
+            width: 500px;
+            font-size: 1em;
+            padding-left: 10px;
+            line-height: 20px;
+        }
+
 
 
         .version {text-align: left; padding: 2px}
@@ -274,55 +281,138 @@
 
 <!-- Legend -->
 <div id="legend" class="barcontent">
-    <h5>Legend: status and action explanation and possible combinations</h5>
-    <table class="pkgversions">
-        <tbody>
-        <tr><td colspan="7">Version status desctiptions</td></tr>
-        <tr>
-            <td class="status_container"><div class="status {{ cs.ok | make_status_class }}">{{ cs.ok | make_status_label }}</div></td>
-            <td>Installed and Candidate epoch:upstream version mach</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="status {{ cs.up | make_status_class }}">{{ cs.up | make_status_label }}</div></td>
-            <td>Installed version is newer that the one found in Repo (i.e. candidate) or Release notes recordset</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="status {{ cs.down | make_status_class }}">{{ cs.down | make_status_label }}</div></td>
-            <td>Installed version is older that the one found in Repo (i.e. candidate) or Release notes recordset</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div></td>
-            <td>Installed version conflicts with a combination of Candidate and Release notes versions</td>
-        </tr>
-        <tr><td colspan="7">Action descriptions</td></tr>
-        <tr>
-            <td class="status_container"><div class="action {{ ca.na | make_action_class }}">{{ ca.na | make_action_label }} (no action)</div></td>
-            <td>No action suggested</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="action {{ ca.up | make_action_class }}">{{ ca.up | make_action_label }}</div></td>
-            <td>There is an upgrade possible for the package. But it is not strictly required action.</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="action {{ ca.need_up | make_action_class }}">{{ ca.need_up | make_action_label }}</div></td>
-            <td>Package should be upgraded to match version either in repo or in Release notes</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="action {{ ca.need_down | make_action_class }}">{{ ca.need_down | make_action_label }}</div></td>
-            <td>Package should be downgraded to match version either in repo or in Release notes</td>
-        </tr>
-        <tr>
-            <td class="status_container"><div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div></td>
-            <td>Repo that is configured on the target node contains invalid version and should be updated</td>
-        </tr>
-        <tr><td colspan="7">Versions status and Action combinations</td></tr>
-        <tr>
-            <td class="status_container">
-                <div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div>
-                <div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
-            </td>
-        </tr>
-    </tbody></table>
+	<table width="100%"><tbody>
+		<tr>
+			<td width="50%"><h5>Version status desctiptions</h5></td>
+			<td width="50%"><h5>Action descriptions</h5></td>
+		</tr>
+
+		<tr>
+			<td width="50%">
+				<div class="status_container">
+					<div class="status {{ cs.ok | make_status_class }}">{{ cs.ok | make_status_label }}</div>
+					<div class="text">Installed and Candidate epoch:upstream version mach</div>
+				</div>
+			</td>
+			<td width="50%">
+				<div class="status_container">
+					<div class="action {{ ca.na | make_action_class }}">{{ ca.na | make_action_label }} (no action)</div>
+					<div class="text">No action suggested</div>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td width="50%">
+				<div class="status_container">
+					<div class="status {{ cs.up | make_status_class }}">{{ cs.up | make_status_label }}</div>
+					<div class="text">Installed version is newer that the one found in Repo (i.e. candidate) or Release notes recordset</div>
+				</div>
+			</td>
+			<td width="50%">
+				<div class="status_container">
+					<div class="action {{ ca.up | make_action_class }}">{{ ca.up | make_action_label }}</div>
+					<div class="text">There is an upgrade possible for the package. But it is not strictly required action</div>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td width="50%">
+				<div class="status_container">
+					<div class="status {{ cs.down | make_status_class }}">{{ cs.down | make_status_label }}</div>
+					<div class="text">Installed version is older that the one found in Repo (i.e. candidate) or Release notes recordset</div>
+				</div>
+			</td>
+			<td width="50%">
+				<div class="status_container">
+					<div class="action {{ ca.need_up | make_action_class }}">{{ ca.need_up | make_action_label }}</div>
+					<div class="text">Package should be upgraded to match version either in repo or in Release notes</div>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td width="50%">
+				<div class="status_container">
+					<div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div>
+					<div class="text">Installed version conflicts with a combination of Candidate and Release notes versions</div>
+				</div>
+			</td>
+			<td width="50%">
+				<div class="status_container">
+					<div class="action {{ ca.need_down | make_action_class }}">{{ ca.need_down | make_action_label }}</div>
+					<div class="text">Package should be downgraded to match version either in repo or in Release notes</div>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td width="50%">
+			</td>
+			<td width="50%">
+				<div class="status_container">
+					<div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
+					<div class="text">Repo that is configured on the target node contains invalid version and should be updated</div>
+				</div>
+			</td>
+		</tr>
+	</tbody></table>
+    <hr>
+    <h5>Versions status and Action combinations</h5>
+    <div class="status_container">
+        <div class="status {{ cs.ok | make_status_class }}">{{ cs.ok | make_status_label }}</div>
+        <div class="action {{ ca.na | make_action_class }}">{{ ca.na | make_action_label }} (no action)</div>
+        <div class="text">All versions are inline with each other</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.up | make_status_class }}">{{ cs.up | make_status_label }}</div>
+        <div class="action {{ ca.na | make_action_class }}">{{ ca.na | make_action_label }} (no action)</div>
+        <div class="text">Installed version is newer that Cadidate, Release version - unknown or not tracked</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.ok | make_status_class }}">{{ cs.ok | make_status_label }}</div>
+        <div class="action {{ ca.up | make_action_class }}">{{ ca.up | make_action_label }}</div>
+        <div class="text">Installed version is equal to Release, but there is newer in the repo</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.up | make_status_class }}">{{ cs.up | make_status_label }}</div>
+        <div class="action {{ ca.up | make_action_class }}">{{ ca.up | make_action_label }}</div>
+        <div class="text">Installed version is newer than Release, and there is even newer in the repo</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div>
+        <div class="action {{ ca.need_up | make_action_class }}">{{ ca.need_up | make_action_label }}</div>
+        <div class="text">Installed version is older than Candidate and Release versions and must be upgraded</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div>
+        <div class="action {{ ca.need_down | make_action_class }}">{{ ca.need_down | make_action_label }}</div>
+        <div class="text">Unknown version installed, Release and Candidate versions are older</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.err | make_status_class }}">{{ cs.err | make_status_label }}</div>
+        <div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
+        <div class="text">Installed and Candidate versions is older than release and repo must be updated</div>
+    </div>
+
+    <div class="status_container">
+        <div class="status {{ cs.up | make_status_class }}">{{ cs.up | make_status_label }}</div>
+        <div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
+        <div class="text">Candidate version in repo is older vs Release and both older vs Installed</div>
+    </div>
+    <div class="status_container">
+        <div class="status {{ cs.ok | make_status_class }}">{{ cs.ok | make_status_label }}</div>
+        <div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
+        <div class="text">Candidate version in Repo is older vs release, but release version installed</div>
+    </div>
+    
+    <div class="status_container">
+        <div class="status {{ cs.down | make_status_class }}">{{ cs.down | make_status_label }}</div>
+        <div class="action {{ ca.repo | make_action_class }}">{{ ca.repo | make_action_label }}</div>
+        <div class="text">Both Candidate in repo and Installed older vs release</div>
+    </div>
+    <div class="status_container">
+
+        <div class="text"></div>
+    </div>
+
 </div>
 </body>
 </html>
\ No newline at end of file