[Buildroot] [PATCH 0/4] support/scripts/pkg-stats: sortGrid() and CSS fixes

[Buildroot] [PATCH 0/4] support/scripts/pkg-stats: sortGrid() and CSS fixes

[Sen Hastings]

patch series to fix some perfromance issues as well as some styling with
pkg-stats.html

Sen Hastings (4):
  support/scripts/pkg-stats: fixed CSS cascade
  support/scripts/pkg-stats: fixed sortGrid() performance
  support/scripts/pkg-stats: fixed numeral in beginning of CSS class
  support/scripts/pkg-stats: updated copywright notice

 support/scripts/pkg-stats | 173 ++++++++++++++++++++------------------
 1 file changed, 93 insertions(+), 80 deletions(-)

-- 
2.34.1

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

[Buildroot] [PATCH 1/4] support/scripts/pkg-stats: fixed CSS cascade

[Sen Hastings]

This fixes the .version-needs-update class being overridden by .correct class.

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
---
 support/scripts/pkg-stats | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index 91a1a1622d..b2a8ddd446 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -818,12 +818,12 @@ function sortGrid(sortLabel){
 .centered {
   text-align: center;
 }
- .wrong, .lotsofpatches, .invalid_url, .version-needs-update, .cpe-nok, .cve-nok {
-   background: #ff9a69;
- }
  .correct, .nopatches, .good_url, .version-good, .cpe-ok, .cve-ok {
    background: #d2ffc4;
  }
+ .wrong, .lotsofpatches, .invalid_url, .version-needs-update, .cpe-nok, .cve-nok {
+   background: #ff9a69;
+ }
  .somepatches, .missing_url, .version-unknown, .cpe-unknown, .cve-unknown {
    background: #ffd870;
  }
-- 
2.34.1

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

[Buildroot] [PATCH 2/4] support/scripts/pkg-stats: fixed sortGrid() performance

[Sen Hastings]

sortGrid() has been rewritten to dynamically generate stylesheets with
explicit grid-row properties to re-order the cells, instead of removing
and reinserting the cells.
Performance *should* now be comperable to sort-table.js.

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
---
 support/scripts/pkg-stats | 116 +++++++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 52 deletions(-)

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index b2a8ddd446..0fb44d1e11 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -738,60 +738,72 @@ html_header = """
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>
+const triangleUp = String.fromCodePoint(32, 9652);
+const triangleDown = String.fromCodePoint(32, 9662);
+var lastColumnName = false;
+
 function sortGrid(sortLabel){
+	let i = 0;
 	let pkgSortArray = [], sortedPkgArray = [], pkgStringSortArray = [], pkgNumSortArray = [];
-	let columnValues = Array.from(document.getElementsByClassName(sortLabel));
-
-	columnValues.shift();
-	columnValues.forEach((listing) => {
-		let sortArr = [];
-		sortArr[0] = listing.id.replace(sortLabel+"_", "");
-		if (!listing.innerText){
-			sortArr[1] = -1;
-		} else {
-			sortArr[1] = listing.innerText;
-		};
-		pkgSortArray.push(sortArr);
-	})
-	pkgSortArray.forEach((listing) => {
-		if ( isNaN(parseInt(listing[1], 10)) ){
-			pkgStringSortArray.push(listing);
-		} else {
-			listing[1] = parseFloat(listing[1]);
-			pkgNumSortArray.push(listing);
-		};
-	})
-	sortedStringPkgArray = pkgStringSortArray.sort(function(a, b) {
-		const nameA = a[1].toUpperCase(); // ignore upper and lowercase
-		const nameB = b[1].toUpperCase(); // ignore upper and lowercase
-		if (nameA < nameB) { return -1;	};
-		if (nameA > nameB) { return 1; };
-		return 0;   // names must be equal
-	});
-	sortedNumPkgArray = pkgNumSortArray.sort(function(a, b) {
-		return a[1] - b[1];
-	});
-
-	let triangleUp = String.fromCodePoint(32, 9652);
-	let triangleDown = String.fromCodePoint(32, 9662);
-	let columnName = document.getElementById(sortLabel);
-
-	if (columnName.lastElementChild.innerText == triangleDown) {
-		columnName.lastElementChild.innerText = triangleUp;
-		sortedStringPkgArray.reverse();
-		sortedNumPkgArray.reverse();
-		sortedPkgArray = sortedNumPkgArray.concat(sortedStringPkgArray)
-	} else {
-		columnName.lastElementChild.innerText = triangleDown;
-		sortedPkgArray = sortedStringPkgArray.concat(sortedNumPkgArray)
-	}
-
-	sortedPkgArray.forEach((listing) => {
-		let row = Array.from(document.getElementsByClassName(listing[0]));
-		let packageGrid = document.getElementById("package-grid");
-		row.forEach((element) => { packageGrid.append(element)});
-	})
-}
+	const columnValues = Array.from(document.getElementsByClassName(sortLabel));
+	const columnName = document.getElementById(sortLabel);
+	let lastStyle = document.getElementById("sort-css");
+
+	if (lastStyle){
+		lastStyle.disable = true;
+		lastStyle.remove();
+	};
+	const styleElement = document.createElement('style');
+	styleElement.id = "sort-css";
+	document.head.appendChild(styleElement);
+	const styleSheet = styleElement.sheet;
+
+        columnValues.shift();
+        columnValues.forEach((listing) => {
+                let sortArr = [];
+                sortArr[0] = listing.id.replace(sortLabel+"_", "");
+                if (!listing.innerText){
+                        sortArr[1] = -1;
+                } else {
+                        sortArr[1] = listing.innerText;
+                };
+                pkgSortArray.push(sortArr);
+        });
+        pkgSortArray.forEach((listing) => {
+                if ( isNaN(parseInt(listing[1], 10)) ){
+                        pkgStringSortArray.push(listing);
+                } else {
+                        listing[1] = parseFloat(listing[1]);
+                        pkgNumSortArray.push(listing);
+                };
+        });
+
+        let sortedStringPkgArray = pkgStringSortArray.sort((a, b) => {
+                if (a[1].toUpperCase() < b[1].toUpperCase()) { return -1; };
+                if (a[1].toUpperCase() > b[1].toUpperCase()) { return 1; };
+                return 0;
+        });
+        let sortedNumPkgArray = pkgNumSortArray.sort((a, b) => a[1] - b[1]);
+
+        if (columnName.lastElementChild.innerText == triangleDown) {
+                columnName.lastElementChild.innerText = triangleUp;
+                sortedStringPkgArray.reverse();
+                sortedNumPkgArray.reverse();
+                sortedPkgArray = sortedNumPkgArray.concat(sortedStringPkgArray);
+        } else {
+                columnName.lastElementChild.innerText = triangleDown;
+                sortedPkgArray = sortedStringPkgArray.concat(sortedNumPkgArray);
+        };
+
+	if (lastColumnName && lastColumnName != columnName){lastColumnName.lastElementChild.innerText = ""};
+	lastColumnName = columnName;
+	sortedPkgArray.unshift(["label"]);
+        sortedPkgArray.forEach((listing) => {
+		i++;
+		let rule = "." + listing[0] + " { grid-row: " + i + "; }";
+		styleSheet.insertRule(rule);
+        });
+};
 </script>
 
 <style>
-- 
2.34.1

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

[Buildroot] [PATCH 3/4] support/scripts/pkg-stats: fixed numeral in beginning of CSS class

[Sen Hastings]

CSS classes are generated for each package name for sorting purposes,
However some package names start with a number and this is not allowed.
(see https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier)
Fix is to prepend a character to every class name such as "_".
so every ".package" is now "._package".

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
---
 support/scripts/pkg-stats | 50 +++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index 0fb44d1e11..e6a1bb849e 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -891,12 +891,12 @@ def boolean_str(b):
 
 
 def dump_html_pkg(f, pkg):
-    f.write(f'<div id=\"package_{pkg.name}\" \
-        class=\"package data {pkg.name}\">{pkg.path}</div>\n')
+    f.write(f'<div id=\"package__{pkg.name}\" \
+        class=\"package data _{pkg.name}\">{pkg.path}</div>\n')
     # Patch count
-    data_field_id = f'patch_count_{pkg.name}'
+    data_field_id = f'patch_count__{pkg.name}'
     div_class = ["centered patch_count data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.patch_count == 0:
         div_class.append("nopatches")
     elif pkg.patch_count < 5:
@@ -907,10 +907,10 @@ def dump_html_pkg(f, pkg):
         \">{str(pkg.patch_count)}</div>\n')
 
     # Infrastructure
-    data_field_id = f'infrastructure_{pkg.name}'
+    data_field_id = f'infrastructure__{pkg.name}'
     infra = infra_str(pkg.infras)
     div_class = ["centered infrastructure data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if infra == "Unknown":
         div_class.append("wrong")
     else:
@@ -919,9 +919,9 @@ def dump_html_pkg(f, pkg):
         \">{infra_str(pkg.infras)}</div>\n')
 
     # License
-    data_field_id = f'license_{pkg.name}'
+    data_field_id = f'license__{pkg.name}'
     div_class = ["centered license data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.is_status_ok('license'):
         div_class.append("correct")
     else:
@@ -930,9 +930,9 @@ def dump_html_pkg(f, pkg):
         \">{boolean_str(pkg.is_status_ok("license"))}</div>\n')
 
     # License files
-    data_field_id = f'license_files_{pkg.name}'
+    data_field_id = f'license_files__{pkg.name}'
     div_class = ["centered license_files data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.is_status_ok('license-files'):
         div_class.append("correct")
     else:
@@ -941,9 +941,9 @@ def dump_html_pkg(f, pkg):
         \">{boolean_str(pkg.is_status_ok("license-files"))}</div>\n')
 
     # Hash
-    data_field_id = f'hash_file_{pkg.name}'
+    data_field_id = f'hash_file__{pkg.name}'
     div_class = ["centered hash_file data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.is_status_ok('hash'):
         div_class.append("correct")
     else:
@@ -952,7 +952,7 @@ def dump_html_pkg(f, pkg):
         \">{boolean_str(pkg.is_status_ok("hash"))}</div>\n')
 
     # Current version
-    data_field_id = f'current_version_{pkg.name}'
+    data_field_id = f'current_version__{pkg.name}'
     if len(pkg.current_version) > 20:
         current_version = pkg.current_version[:20] + "..."
     else:
@@ -961,8 +961,8 @@ def dump_html_pkg(f, pkg):
         class=\"centered current_version data {pkg.name}\">{current_version}</div>\n')
 
     # Latest version
-    data_field_id = f'latest_version_{pkg.name}'
-    div_class.append(pkg.name)
+    data_field_id = f'latest_version__{pkg.name}'
+    div_class.append(f'_{pkg.name}')
     div_class.append("latest_version data")
     if pkg.latest_version['status'] == RM_API_STATUS_ERROR:
         div_class.append("version-error")
@@ -994,9 +994,9 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{latest_version_text}</div>\n')
 
     # Warnings
-    data_field_id = f'warnings_{pkg.name}'
+    data_field_id = f'warnings__{pkg.name}'
     div_class = ["centered warnings data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.warnings == 0:
         div_class.append("correct")
     else:
@@ -1004,9 +1004,9 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{pkg.warnings}</div>\n')
 
     # URL status
-    data_field_id = f'upstream_url_{pkg.name}'
+    data_field_id = f'upstream_url__{pkg.name}'
     div_class = ["centered upstream_url data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     url_str = pkg.status['url'][1]
     if pkg.status['url'][0] in ("error", "warning"):
         div_class.append("missing_url")
@@ -1019,9 +1019,9 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">{url_str}</div>\n')
 
     # CVEs
-    data_field_id = f'cves_{pkg.name}'
+    data_field_id = f'cves__{pkg.name}'
     div_class = ["centered cves data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.is_status_ok("cve"):
         div_class.append("cve-ok")
     elif pkg.is_status_error("cve"):
@@ -1043,9 +1043,9 @@ def dump_html_pkg(f, pkg):
     f.write("  </div>\n")
 
     # CVEs Ignored
-    data_field_id = f'ignored_cves_{pkg.name}'
+    data_field_id = f'ignored_cves__{pkg.name}'
     div_class = ["centered data ignored_cves"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.ignored_cves:
         div_class.append("cve_ignored")
     f.write(f'  <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">\n')
@@ -1054,9 +1054,9 @@ def dump_html_pkg(f, pkg):
     f.write("  </div>\n")
 
     # CPE ID
-    data_field_id = f'cpe_id_{pkg.name}'
+    data_field_id = f'cpe_id__{pkg.name}'
     div_class = ["left cpe_id data"]
-    div_class.append(pkg.name)
+    div_class.append(f'_{pkg.name}')
     if pkg.is_status_ok("cpe"):
         div_class.append("cpe-ok")
     elif pkg.is_status_error("cpe"):
-- 
2.34.1

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

Re: [Buildroot] [PATCH 0/4] support/scripts/pkg-stats: sortGrid() and CSS fixes

[Thomas Petazzoni via buildroot]

Hello Sen,

On Wed, 27 Jul 2022 10:41:10 -0500
Sen Hastings <sen@phobosdpl.com> wrote:

> patch series to fix some perfromance issues as well as some styling with
> pkg-stats.html
> 
> Sen Hastings (4):
>   support/scripts/pkg-stats: fixed CSS cascade
>   support/scripts/pkg-stats: fixed sortGrid() performance
>   support/scripts/pkg-stats: fixed numeral in beginning of CSS class
>   support/scripts/pkg-stats: updated copywright notice

Thanks for the new work. I can confirm that the sorting is much
faster... but it messes up cells.

Before sorting: https://imgur.com/a/uZLV8V8

After clicking on the CVE column: https://imgur.com/a/YrF7NuT

You can see the weird line with versions, you can see that the column
"CVEs ignored" now contain what used to be in the CPE ID column, etc.
It's all messed up :-)

I have applied patches 1, 3 and 4 of your series, but left aside patch
2 as it breaks the sorting. Could you have a look?

Thanks!

Thomas
-- 
Thomas Petazzoni, co-owner and CEO, Bootlin
Embedded Linux and Kernel engineering and training
https://bootlin.com
_______________________________________________
buildroot mailing list
buildroot@buildroot.org
https://lists.buildroot.org/mailman/listinfo/buildroot