Show results per suite as [extra] was added to the rebuilder

Show and group the results per suite. Signed-off-by: Jelle van der Waa <jelle@vdwaa.nl>

Show results per suite as [extra] was added to the rebuilder
Show and group the results per suite. Signed-off-by: Jelle van der Waa <jelle@vdwaa.nl>
94f1d77b · Jelle van der Waa · 7f8914f6 · 94f1d77b · 94f1d77b
Verified Commit 94f1d77b authored May 02, 2020 by Jelle van der Waa 🚧
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,9 +11,8 @@
 	<body>
 		<section class="hero is-primary">
 			<div class="hero-body">
-				<div class="container">
-					<h1 class="title">Arch Linux Reproducible [core] repository status</h1>
-					<h2 class="subtitle" id="status"></h2>
+				<div id="status" class="container">
+					<h1 class="title">Arch Linux Reproducible repository status</h1>
 				</div>
 			</div>
 		</section>

--- a/src/index.js
+++ b/src/index.js
@@ -2,30 +2,32 @@ require('./style.scss');

 const apiPrefix = require('Config').apiPrefix;

-function displayBadPackages(data) {
+function displayBadPackages(suites) {
  const packagesList = document.getElementById("packagesul");
  const fragment = document.createDocumentFragment();

-  for (pkg of data) {
-    if (pkg.status == 'GOOD') {
-      continue
-    }
+  for (let suite of Object.values(suites).sort()) {
+    for (let pkg of suite) {
+      if (pkg.status == 'GOOD') {
+        continue
+      }

-    const li = document.createElement('li');
-    const p = document.createElement('p');
-    p.className = 'subtitle is-6 has-text-white';
-    p.textContent = `${pkg.name}-${pkg.version}`;
+      const li = document.createElement('li');
+      const p = document.createElement('p');
+      p.className = 'subtitle is-6 has-text-white';
+      p.textContent = `${pkg.suite} - ${pkg.name}-${pkg.version}`;

-    li.appendChild(p);
-    fragment.appendChild(li);
+      li.appendChild(p);
+      fragment.appendChild(li);
+    }
  }

  packagesList.appendChild(fragment);
 }

-function displayStats(data) {
-  let bad = 0;
+function calculateSuiteStats(data) {
  let good = 0;
+  let bad = 0;
  let unknown = 0;

  for (pkg of data) {
@@ -43,14 +45,38 @@ function displayStats(data) {
  }

  reproPercentage = Math.round(good / data.length * 100);
+  return {good, bad, unknown, reproPercentage};
+}

+function displayStats(suites) {
  const elem = document.getElementById("status");
-  elem.textContent = `The core repository is ${reproPercentage}% reproducible with ${bad} bad and ${unknown} unknown packages.`;
+  const fragment = document.createDocumentFragment();
+  for (let suite of Object.values(suites).sort()) {
+    const {good, bad, unknown, reproPercentage} = calculateSuiteStats(suite);
+
+    const h2 = document.createElement('h2');
+    const suiteName = suite[0].suite; 
+    h2.textContent = `[${suiteName}] repository is ${reproPercentage}% reproducible with ${bad} bad and ${unknown} unknown packages.`;
+
+    fragment.appendChild(h2);
+  }
+
+  elem.appendChild(fragment);
 }

 fetch(`${apiPrefix}/api/v0/pkgs/list`).then((response) => {
  return response.json();
 }).then((data) => {
-  displayStats(data);
-  displayBadPackages(data);
+  const suites = {};
+
+  for (pkg of data) {
+    if (pkg.suite in suites) {
+      suites[pkg.suite].push(pkg);
+    } else {
+      suites[pkg.suite] = [pkg];
+    }
+  }
+
+  displayStats(suites);
+  displayBadPackages(suites);
 });