Add i386 page

src/App.tsx

@@ -5,6 +5,7 @@ import Home from './components/pages/home';
 import Packages from './components/pages/packages';
 import Queue from './components/pages/queue';
 import Errored from './components/pages/errored';
+import I386 from './components/pages/i386';
 
 function App() {
 
@@ -16,6 +17,7 @@ function App() {
             <Route path="/queue" component={Queue} />
             <Route path="/packages" component={Packages} />
             <Route path="/errored" component={Errored} />
+            <Route path="/i386" component={I386} />
             <Route component={Home}/>
           </Switch>
     </>

src/components/header/header.tsx

@@ -193,6 +193,11 @@ const Header: React.FC = () => {
                   Errored
                 </Link>
               </li>
+              <li>
+                <Link href="/i386" className="text-foreground hover:text-primary block">
+                  i386
+                </Link>
+              </li>
             </ul>
           </nav>
         </div>

src/components/pages/i386.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useMediaQuery } from "react-responsive";
+import usePackageData from "../../hooks/usePackageData";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Checkbox } from "../ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+const I386: React.FC = () => {
+  const { i386Packages, loading, fetchI386Packages } = usePackageData();
+  const isMobile = useMediaQuery({ maxWidth: 767 });
+  const [, setPageSize] = useState(isMobile ? 100 : 250);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [, setSelectedPackage] = useState(null);
+  const [rebuildData, setRebuildData] = useState({
+    packageName: "",
+    version: "",
+    buildType: "i386",
+    rebuild: false,
+  });
+
+  const isInitialMount = useRef(true);
+
+  const checkLoginStatus = async () => {
+    const r = await fetch("/api/isloggedin");
+    let loggedIn = false;
+    if (r.status === 200) {
+      loggedIn = true;
+    }
+    setIsLoggedIn(loggedIn);
+  };
+
+  useEffect(() => {
+    setPageSize(isMobile ? 100 : 250);
+  }, [isMobile]);
+
+  const loadPackages = useCallback(() => {
+    fetchI386Packages();
+  }, [fetchI386Packages]);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      loadPackages();
+      checkLoginStatus();
+    }
+  }, [loadPackages]);
+
+  const handleRebuildClick = async (pkg: any) => {
+    setSelectedPackage(pkg);
+    const packResp = await fetch("/api/package/" + pkg.Name, {
+      method: "GET",
+    });
+
+    const packData = await packResp.json();
+    const firstPackage = packData.Packages[Object.keys(packData.Packages)[0]];
+    if (packResp.ok) {
+      setRebuildData({
+        packageName: pkg.Name,
+        version: firstPackage.NewVersion || firstPackage.Version,
+        buildType: "i386",
+        rebuild: false,
+      });
+      setIsDialogOpen(true);
+    }
+  };
+
+  const handleDialogSubmit = async () => {
+    try {
+      const response = await fetch("/api/admin/triggerbuild", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(rebuildData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setIsDialogOpen(false);
+      } else {
+        alert(data.error);
+      }
+    } catch (error) {
+      alert("An error occurred while submitting the build request.");
+    }
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Table */}
+      <div className="flex-grow overflow-hidden">
+        <div className="container mx-0 px-0 h-full">
+          <div className="h-full">
+            <Table className="w-full">
+              <TableHeader className="top-0 bg-background z-10 hidden md:table-header-group">
+                <TableRow>
+                  <TableHead className="w-1/2 text-left">Name</TableHead>
+                  {isLoggedIn && <TableHead className="w-1/4 text-left">Action</TableHead>}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={isLoggedIn ? 4 : 3} className="text-center">
+                      Loading...
+                    </TableCell>
+                  </TableRow>
+                ) : Object.keys(i386Packages).length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={isLoggedIn ? 4 : 3} className="text-center">
+                      No packages found.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                    i386Packages.map((pkg) => {
+                    return (
+                      <TableRow
+                        key={pkg.Name}
+                        className="md:table-row border-b last:border-b-0"
+                      >
+                        <TableCell className="w-full md:w-1/2 py-2 md:py-4">
+                          <div className="flex flex-col h-full md:h-auto">
+                            <div className="flex justify-between items-start mb-2 md:mb-0">
+                              <span className="font-medium truncate mr-2">
+                                {pkg.Name}
+                              </span>
+                            </div>
+                            </div>
+                        </TableCell>
+                        {isLoggedIn && (
+                          <TableCell className="py-2 md:py-4 text-right">
+                            <Button onClick={() => handleRebuildClick(pkg)}>Build</Button>
+                          </TableCell>
+                        )}
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+
+      {/* Build Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Build Package</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="packageName" className="text-right">
+                Package Name
+              </label>
+              <Input
+                id="packageName"
+                value={rebuildData.packageName}
+                className="col-span-3"
+                readOnly
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="version" className="text-right">
+                Version
+              </label>
+              <Input
+                id="version"
+                value={rebuildData.version}
+                onChange={(e) =>
+                  setRebuildData({ ...rebuildData, version: e.target.value })
+                }
+                className="col-span-3"
+              />
+            </div>
+            <div className="hidden grid-cols-4 items-center gap-4">
+              <label htmlFor="buildType" className="text-right">
+                Build Type
+              </label>
+              <Select
+                value={rebuildData.buildType}
+                onValueChange={(value) =>
+                  setRebuildData({ ...rebuildData, buildType: value })
+                }
+              >
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="Select build type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="i386">i386</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="rebuild" className="text-right">
+                Build
+              </label>
+              <Checkbox
+                id="rebuild"
+                checked={rebuildData.rebuild}
+                onCheckedChange={(checked: boolean) =>
+                  setRebuildData({ ...rebuildData, rebuild: checked })
+                }
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={handleDialogSubmit}>Submit</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default I386;

src/hooks/usePackageData.ts

@@ -50,6 +50,7 @@ const usePackageData = () => {
     const [totalCount, setTotalCount] = useState(0);
     const [loading, setLoading] = useState(false);
     const [errPackages, setErrPackages] = useState<ErrorData[]>([]);
+    const [i386Packages, setI386Packages] = useState<PackageData[]>([]);
     const fetchStatsAttempted = useRef(false);
   
     const fetchStats = useCallback(async () => {
@@ -125,6 +126,20 @@ const usePackageData = () => {
         setLoading(false);
       }
     }, []);
+
+    const fetchI386Packages = useCallback(async () => {
+      setLoading(true);
+      try {
+        const response = await fetch('/api/i386');
+        const data: PackageData[] = await response.json();
+        setI386Packages(data);
+      } catch (error) {
+        console.error("Error fetching i386 packages:", error);
+        setI386Packages([]);
+      } finally {
+        setLoading(false);
+      }
+    }, []);
   
     return {
       stats,
@@ -138,6 +153,8 @@ const usePackageData = () => {
       fetchPackage,
       errPackages,
       fetchErrPackages,
+      i386Packages,
+      fetchI386Packages,
     };
   };