155 lines
6.3 KiB
TypeScript
155 lines
6.3 KiB
TypeScript
import { LstCard } from "@/components/extendedUI/LstCard";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
import { format } from "date-fns";
|
|
import { Trash } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
const labelLogs = [
|
|
{ key: "message", label: "Error Message" },
|
|
{ key: "created_at", label: "ErrorDat" },
|
|
{ key: "clear", label: "Clear" },
|
|
//{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended
|
|
];
|
|
|
|
export default function OcpLogs() {
|
|
const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
|
|
|
|
const clearLog = async (log: any) => {
|
|
try {
|
|
const res = await axios.patch(`/api/logger/logs/${log.log_id}`);
|
|
|
|
if (res.data.success) {
|
|
toast.success(`Log message: ${log.message}, was just cleared`);
|
|
} else {
|
|
console.log(res);
|
|
toast.error(`There was an error clearing the message.`);
|
|
}
|
|
} catch (error) {
|
|
toast.error(`There was an error trying to clearing the message.`);
|
|
}
|
|
};
|
|
const logData = data ? data : [];
|
|
if (isError) {
|
|
return (
|
|
<div className="m-2 p-2 min-h-2/5">
|
|
<LstCard>
|
|
<p className="text-center">Labels for the last 2 hours</p>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{labelLogs.map((l) => (
|
|
<TableHead key={l.key}>{l.label}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{Array(7)
|
|
.fill(0)
|
|
.map((_, i) => (
|
|
<TableRow key={i}>
|
|
<TableCell className="font-medium">
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</LstCard>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<LstCard className="m-2 p-2 min-h-2/5">
|
|
<p className="text-center">Labels for the last 2 hours</p>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{labelLogs.map((l) => (
|
|
<TableHead key={l.key}>{l.label}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
{isLoading ? (
|
|
<>
|
|
<TableBody>
|
|
{Array(7)
|
|
.fill(0)
|
|
.map((_, i) => (
|
|
<TableRow key={i}>
|
|
<TableCell className="font-medium">
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Skeleton className="h-4" />
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</>
|
|
) : (
|
|
<TableBody>
|
|
{logData.map((label: any) => (
|
|
<TableRow key={label.log_id}>
|
|
<TableCell className="font-medium max-w-5/6">
|
|
<p className="text-balance">
|
|
{label.message}
|
|
</p>
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{format(
|
|
label?.created_at.replace("Z", ""),
|
|
"M/d/yyyy hh:mm"
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
<Button
|
|
size="icon"
|
|
onClick={() => clearLog(label)}
|
|
>
|
|
<Trash />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
)}
|
|
</Table>
|
|
</LstCard>
|
|
);
|
|
}
|