Add i386 page

This commit is contained in:
ferreo 2024-08-02 21:22:55 +01:00
parent 073f9df8c8
commit 3b81e4db20
4 changed files with 259 additions and 0 deletions

View File

@ -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>
</>

View File

@ -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>

View File

@ -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;

View File

@ -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 () => {
@ -126,6 +127,20 @@ const usePackageData = () => {
}
}, []);
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,
lastUpdated,
@ -138,6 +153,8 @@ const usePackageData = () => {
fetchPackage,
errPackages,
fetchErrPackages,
i386Packages,
fetchI386Packages,
};
};