[Buildroot] [PATCH v2 1/2] support/scripts/pkg-stats: move to procedurally generated row/column clases

[Sen Hastings <sen@phobosdpl.com>]

Rather than having pre-baked classes in the markup for sorting purposes,
all the cells in package-grid are iterated over at load time and given
a row/column class.

example: https://sen-h.github.io/pkg-stats/b6f4cbddb14233c3ab3fdfea1e486c14871cfb2a.html

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
---
v1->v2:
*   fixed current version class attributes being rendered as inner text
*   added link to example html
---
 support/scripts/pkg-stats | 160 ++++++++++++++++----------------------
 1 file changed, 68 insertions(+), 92 deletions(-)

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index d32abd7225..39da5e5593 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -758,6 +758,17 @@ addedCSSRules = [
 
 addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
 
+window.addEventListener('DOMContentLoaded', (event) => {
+	gridArray = Array.from(document.getElementById("package-grid").children);
+	let l = row = 0;
+	gridArray.forEach(cell =>{
+		if (l != 13){ l++ }
+		else { l = 1; row++; };
+
+		cell.classList.add("c" + l, "ir" + row);
+	});
+});
+
 function sortGrid(sortLabel){
 	let i = 0;
 	let pkgSortArray = [], sortedPkgArray = [], pkgStringSortArray = [], pkgNumSortArray = [];
@@ -774,14 +785,11 @@ function sortGrid(sortLabel){
 	const styleSheet = styleElement.sheet;
 
         columnValues.shift();
-        columnValues.forEach((listing) => {
+	columnValues.forEach((listing) => {
                 let sortArr = [];
-                sortArr[0] = listing.id.replace(sortLabel+"_", "");
-                if (!listing.innerText){
-                        sortArr[1] = -1;
-                } else {
-                        sortArr[1] = listing.innerText;
-                };
+                sortArr[0] = listing.classList[listing.classList.length - 1];
+                sortArr[1] = listing.innerText;
+                if (!listing.innerText){sortArr[1] = -1;};
                 pkgSortArray.push(sortArr);
         });
         pkgSortArray.forEach((listing) => {
@@ -821,13 +829,12 @@ function sortGrid(sortLabel){
 	addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
 };
 
-function expandField(fieldId){
-        const field = document.getElementById(fieldId);
+function expandField(field){
         const fieldText = field.firstElementChild.innerText;
         const fieldTotal = fieldText.split(' ')[2];
 
         if (fieldText == "see all " + fieldTotal + triangleDown){
-		field.firstElementChild.innerText = "see less " + fieldTotal + triangleUp;
+                field.firstElementChild.innerText = "see less " + fieldTotal + triangleUp;
                 field.style.height = "auto";
         } else {
                 field.firstElementChild.innerText = "see all " + fieldTotal + triangleDown;
@@ -919,80 +926,59 @@ def boolean_str(b):
 
 
 def dump_html_pkg(f, pkg):
-    pkg_css_class = pkg.path.replace("/", "_")[:-3]
-    f.write(f'<div id=\"package__{pkg_css_class}\" \
-        class=\"package data _{pkg_css_class}\">{pkg.path}</div>\n')
+    f.write(f'<div class=\"data\">{pkg.path}</div>\n')
     # Patch count
-    data_field_id = f'patch_count__{pkg_css_class}'
-    div_class = ["centered patch_count data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.patch_count == 0:
         div_class.append("nopatches")
     elif pkg.patch_count < 5:
         div_class.append("somepatches")
     else:
         div_class.append("lotsofpatches")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)} \
-        \">{str(pkg.patch_count)}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{str(pkg.patch_count)}</div>\n')
 
     # Infrastructure
-    data_field_id = f'infrastructure__{pkg_css_class}'
     infra = infra_str(pkg.infras)
-    div_class = ["centered infrastructure data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if infra == "Unknown":
         div_class.append("wrong")
     else:
         div_class.append("correct")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)} \
-        \">{infra_str(pkg.infras)}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{infra_str(pkg.infras)}</div>\n')
 
     # License
-    data_field_id = f'license__{pkg_css_class}'
-    div_class = ["centered license data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.is_status_ok('license'):
         div_class.append("correct")
     else:
         div_class.append("wrong")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)} \
-        \">{boolean_str(pkg.is_status_ok("license"))}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{boolean_str(pkg.is_status_ok("license"))}</div>\n')
 
     # License files
-    data_field_id = f'license_files__{pkg_css_class}'
-    div_class = ["centered license_files data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.is_status_ok('license-files'):
         div_class.append("correct")
     else:
         div_class.append("wrong")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)} \
-        \">{boolean_str(pkg.is_status_ok("license-files"))}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{boolean_str(pkg.is_status_ok("license-files"))}</div>\n')
 
     # Hash
-    data_field_id = f'hash_file__{pkg_css_class}'
-    div_class = ["centered hash_file data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.is_status_ok('hash'):
         div_class.append("correct")
     else:
         div_class.append("wrong")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)} \
-        \">{boolean_str(pkg.is_status_ok("hash"))}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{boolean_str(pkg.is_status_ok("hash"))}</div>\n')
 
     # Current version
-    data_field_id = f'current_version__{pkg_css_class}'
     if len(pkg.current_version) > 20:
         current_version = pkg.current_version[:20] + "..."
     else:
         current_version = pkg.current_version
-    f.write(f'  <div id=\"{data_field_id}\" \
-        class=\"centered current_version data _{pkg_css_class}\">{current_version}</div>\n')
+    f.write(f'  <div class=\"centered data\">{current_version}</div>\n')
 
     # Latest version
-    data_field_id = f'latest_version__{pkg_css_class}'
-    div_class.append(f'_{pkg_css_class}')
-    div_class.append("latest_version data")
+    div_class = ["centered data"]
     if pkg.latest_version['status'] == RM_API_STATUS_ERROR:
         div_class.append("version-error")
     if pkg.latest_version['version'] is None:
@@ -1020,22 +1006,18 @@ def dump_html_pkg(f, pkg):
         else:
             latest_version_text += "found by guess"
 
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{latest_version_text}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{latest_version_text}</div>\n')
 
     # Warnings
-    data_field_id = f'warnings__{pkg_css_class}'
-    div_class = ["centered warnings data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.warnings == 0:
         div_class.append("correct")
     else:
         div_class.append("wrong")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{pkg.warnings}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{pkg.warnings}</div>\n')
 
     # URL status
-    data_field_id = f'upstream_url__{pkg_css_class}'
-    div_class = ["centered upstream_url data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     url_str = pkg.status['url'][1]
     if pkg.status['url'][0] in ("error", "warning"):
         div_class.append("missing_url")
@@ -1045,12 +1027,10 @@ def dump_html_pkg(f, pkg):
     else:
         div_class.append("good_url")
         url_str = "<a href=\"%s\">Link</a>" % pkg.url
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{url_str}</div>\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">{url_str}</div>\n')
 
     # CVEs
-    data_field_id = f'cves__{pkg_css_class}'
-    div_class = ["centered cves data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if len(pkg.cves) > 10:
         div_class.append("collapse")
     if pkg.is_status_ok("cve"):
@@ -1061,10 +1041,10 @@ def dump_html_pkg(f, pkg):
         div_class.append("cve-ok")
     else:
         div_class.append("cve-unknown")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">\n')
     if len(pkg.cves) > 10:
         cve_total = len(pkg.cves) + 1
-        f.write(f' <div onclick=\"expandField(\'{data_field_id}\')\" \
+        f.write(f' <div onclick=\"expandField(this.parentElement)\" \
         class=\"see-more centered cve_ignored\">see all ({cve_total}) &#9662;</div>\n')
     if pkg.is_status_error("cve"):
         for cve in pkg.cves:
@@ -1078,20 +1058,16 @@ def dump_html_pkg(f, pkg):
     f.write("  </div>\n")
 
     # CVEs Ignored
-    data_field_id = f'ignored_cves__{pkg_css_class}'
-    div_class = ["centered data ignored_cves"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["centered data"]
     if pkg.ignored_cves:
         div_class.append("cve_ignored")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">\n')
     for ignored_cve in pkg.ignored_cves:
         f.write("    <a href=\"https://security-tracker.debian.org/tracker/%s\">%s</a><br/>\n" % (ignored_cve, ignored_cve))
     f.write("  </div>\n")
 
     # CPE ID
-    data_field_id = f'cpe_id__{pkg_css_class}'
-    div_class = ["left cpe_id data"]
-    div_class.append(f'_{pkg_css_class}')
+    div_class = ["data"]
     if pkg.is_status_ok("cpe"):
         div_class.append("cpe-ok")
     elif pkg.is_status_error("cpe"):
@@ -1100,7 +1076,7 @@ def dump_html_pkg(f, pkg):
         div_class.append("cpe-ok")
     else:
         div_class.append("cpe-unknown")
-    f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">\n')
+    f.write(f'  <div class=\"{" ".join(div_class)}\">\n')
     if pkg.cpeid:
         cpeid_begin = ":".join(pkg.cpeid.split(":")[0:4]) + ":"
         cpeid_formatted = pkg.cpeid.replace(cpeid_begin, cpeid_begin + "<wbr>")
@@ -1122,32 +1098,32 @@ def dump_html_pkg(f, pkg):
 def dump_html_all_pkgs(f, packages):
     f.write("""
 <div id=\"package-grid\">
-<div style="grid-column: 1;" onclick="sortGrid(this.id)" id=\"package\"
-     class=\"package data label\"><span>Package</span><span></span></div>
-<div style="grid-column: 2;" onclick="sortGrid(this.id)" id=\"patch_count\"
-     class=\"centered patch_count data label\"><span>Patch count</span><span></span></div>
-<div style="grid-column: 3;" onclick="sortGrid(this.id)" id=\"infrastructure\"
-     class=\"centered infrastructure data label\">Infrastructure<span></span></div>
-<div style="grid-column: 4;" onclick="sortGrid(this.id)" id=\"license\"
-     class=\"centered license data label\"><span>License</span><span></span></div>
-<div style="grid-column: 5;" onclick="sortGrid(this.id)" id=\"license_files\"
-     class=\"centered license_files data label\"><span>License files</span><span></span></div>
-<div style="grid-column: 6;" onclick="sortGrid(this.id)" id=\"hash_file\"
-     class=\"centered hash_file data label\"><span>Hash file</span><span></span></div>
-<div style="grid-column: 7;" onclick="sortGrid(this.id)" id=\"current_version\"
-     class=\"centered current_version data label\"><span>Current version</span><span></span></div>
-<div style="grid-column: 8;" onclick="sortGrid(this.id)" id=\"latest_version\"
-     class=\"centered latest_version data label\"><span>Latest version</span><span></span></div>
-<div style="grid-column: 9;" onclick="sortGrid(this.id)" id=\"warnings\"
-     class=\"centered warnings data label\"><span>Warnings</span><span></span></div>
-<div style="grid-column: 10;" onclick="sortGrid(this.id)" id=\"upstream_url\"
-     class=\"centered upstream_url data label\"><span>Upstream URL</span><span></span></div>
-<div style="grid-column: 11;" onclick="sortGrid(this.id)" id=\"cves\"
-     class=\"centered cves data label\"><span>CVEs</span><span></span></div>
-<div style="grid-column: 12;" onclick="sortGrid(this.id)" id=\"ignored_cves\"
-     class=\"centered ignored_cves data label\"><span>CVEs Ignored</span><span></span></div>
-<div style="grid-column: 13;" onclick="sortGrid(this.id)" id=\"cpe_id\"
-     class=\"centered cpe_id data label\"><span>CPE ID</span><span></span></div>
+<div style="grid-column: 1;" onclick="sortGrid(this.id)" id=\"c1\"
+     class=\"data label\"><span>Package</span><span></span></div>
+<div style="grid-column: 2;" onclick="sortGrid(this.id)" id=\"c2\"
+     class=\"centered data label\"><span>Patch count</span><span></span></div>
+<div style="grid-column: 3;" onclick="sortGrid(this.id)" id=\"c3\"
+     class=\"centered data label\">Infrastructure<span></span></div>
+<div style="grid-column: 4;" onclick="sortGrid(this.id)" id=\"c4\"
+     class=\"centered data label\"><span>License</span><span></span></div>
+<div style="grid-column: 5;" onclick="sortGrid(this.id)" id=\"c5\"
+     class=\"centered data label\"><span>License files</span><span></span></div>
+<div style="grid-column: 6;" onclick="sortGrid(this.id)" id=\"c6\"
+     class=\"centered data label\"><span>Hash file</span><span></span></div>
+<div style="grid-column: 7;" onclick="sortGrid(this.id)" id=\"c7\"
+     class=\"centered data label\"><span>Current version</span><span></span></div>
+<div style="grid-column: 8;" onclick="sortGrid(this.id)" id=\"c8\"
+     class=\"centered data label\"><span>Latest version</span><span></span></div>
+<div style="grid-column: 9;" onclick="sortGrid(this.id)" id=\"c9\"
+     class=\"centered data label\"><span>Warnings</span><span></span></div>
+<div style="grid-column: 10;" onclick="sortGrid(this.id)" id=\"c10\"
+     class=\"centered data label\"><span>Upstream URL</span><span></span></div>
+<div style="grid-column: 11;" onclick="sortGrid(this.id)" id=\"c11\"
+     class=\"centered data label\"><span>CVEs</span><span></span></div>
+<div style="grid-column: 12;" onclick="sortGrid(this.id)" id=\"c12\"
+     class=\"centered data label\"><span>CVEs Ignored</span><span></span></div>
+<div style="grid-column: 13;" onclick="sortGrid(this.id)" id=\"c13\"
+     class=\"data label\"><span>CPE ID</span><span></span></div>
 """)
     for pkg in sorted(packages):
         dump_html_pkg(f, pkg)
-- 
2.34.1

_______________________________________________
buildroot mailing list
buildroot@buildroot.org
https://lists.buildroot.org/mailman/listinfo/buildroot