ui: show available Fedora versions per package in the list

ui/src/pages/PackageList.tsx

@@ -14,12 +14,14 @@ export function PackageList() {
   const summaries = [...byName.entries()].map(([name, versions]) => {
     const stable = versions.filter((v) => v.channel === "stable");
     const unstable = versions.filter((v) => v.channel === "unstable");
+    const releasevers = [...new Set(versions.map((v) => v.releasever))].sort();
     const latest = versions.reduce((a, b) =>
       a.buildTime >= b.buildTime ? a : b,
     );
     return {
       name,
       latest,
+      releasevers,
       stableCount: stable.length,
       unstableCount: unstable.length,
       versionCount: versions.length,
@@ -35,35 +37,45 @@ export function PackageList() {
           <tr>
             <th>Package</th>
             <th>Latest version</th>
+            <th>Fedora</th>
             <th>Versions</th>
             <th>Summary</th>
             <th>Built</th>
           </tr>
         </thead>
         <tbody>
-          {summaries.map(({ name, latest, stableCount, unstableCount }) => (
-            <tr key={name}>
-              <td>
-                <Link to={`/packages/${name}`}>{name}</Link>
-              </td>
-              <td>
-                {latest.version}-{latest.release}{" "}
-                <Badge bg={latest.channel === "stable" ? "success" : "warning"} className="ms-1">
-                  {latest.channel}
-                </Badge>
-              </td>
-              <td>
-                {stableCount > 0 && (
-                  <Badge bg="success" className="me-1">{stableCount} stable</Badge>
-                )}
-                {unstableCount > 0 && (
-                  <Badge bg="warning">{unstableCount} unstable</Badge>
-                )}
-              </td>
-              <td>{latest.summary}</td>
-              <td>{new Date(latest.buildTime * 1000).toLocaleDateString()}</td>
-            </tr>
-          ))}
+          {summaries.map(
+            ({ name, latest, releasevers, stableCount, unstableCount }) => (
+              <tr key={name}>
+                <td>
+                  <Link to={`/packages/${name}`}>{name}</Link>
+                </td>
+                <td>
+                  {latest.version}-{latest.release}{" "}
+                  <Badge bg={latest.channel === "stable" ? "success" : "warning"} className="ms-1">
+                    {latest.channel}
+                  </Badge>
+                </td>
+                <td>
+                  {releasevers.map((rv) => (
+                    <Badge key={rv} bg="secondary" className="me-1">
+                      fc{rv}
+                    </Badge>
+                  ))}
+                </td>
+                <td>
+                  {stableCount > 0 && (
+                    <Badge bg="success" className="me-1">{stableCount} stable</Badge>
+                  )}
+                  {unstableCount > 0 && (
+                    <Badge bg="warning">{unstableCount} unstable</Badge>
+                  )}
+                </td>
+                <td>{latest.summary}</td>
+                <td>{new Date(latest.buildTime * 1000).toLocaleDateString()}</td>
+              </tr>
+            ),
+          )}
         </tbody>
       </Table>
     </>