gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/nodes/log/container.tsx · v0.5.0
Source
1 1d782e1 Mrdn 2y ago import {
2 f5c168d Mardin 2y ago Badge,
3 f5c168d Mardin 2y ago Card,
4 f5c168d Mardin 2y ago CardContent,
5 f5c168d Mardin 2y ago CardHeader,
6 f5c168d Mardin 2y ago ScrollArea,
7 f5c168d Mardin 2y ago Separator,
8 1d782e1 Mrdn 2y ago } from "@marzneshin/components";
9 1d782e1 Mrdn 2y ago import type { NodeType } from "..";
10 1d782e1 Mrdn 2y ago import { useNodesLog } from "..";
11 1d782e1 Mrdn 2y ago import type { FC } from "react";
12 1d782e1 Mrdn 2y ago import { useTranslation } from "react-i18next";
13 b15ff05 Mrdn 2y ago
14 b15ff05 Mrdn 2y ago interface LogContainerProps {
15 f5c168d Mardin 2y ago node: NodeType;
16 f5c168d Mardin 2y ago backend: string;
17 b15ff05 Mrdn 2y ago }
18 b15ff05 Mrdn 2y ago
19 f5c168d Mardin 2y ago export const LogContainer: FC<LogContainerProps> = ({ node, backend }) => {
20 f5c168d Mardin 2y ago const { logs, status, logsDiv } = useNodesLog(node, backend);
21 f5c168d Mardin 2y ago const { t } = useTranslation();
22 1d782e1 Mrdn 2y ago
23 f5c168d Mardin 2y ago return (
24 f5c168d Mardin 2y ago <Card className="h-full w-full">
25 f5c168d Mardin 2y ago <CardContent className="flex flex-col p-2 h-full w-full">
26 f5c168d Mardin 2y ago <CardHeader className="flex flex-row justify-between items-center p-2">
27 f5c168d Mardin 2y ago <p className="capitalize font-header">{`${backend} ${t("logs")}`}</p>
28 f5c168d Mardin 2y ago <div className="flex flex-row gap-2 justify-center items-center">
29 f5c168d Mardin 2y ago <Badge
30 f5c168d Mardin 2y ago className="capitalize"
31 f5c168d Mardin 2y ago variant={status === "closed" ? "destructive" : "positive"}
32 f5c168d Mardin 2y ago >
33 f5c168d Mardin 2y ago {status}
34 f5c168d Mardin 2y ago </Badge>
35 f5c168d Mardin 2y ago </div>
36 f5c168d Mardin 2y ago </CardHeader>
37 f5c168d Mardin 2y ago <ScrollArea
38 f5c168d Mardin 2y ago className="flex p-2 h-full max-h-[calc(100vh-20rem)] rounded-md bg-secondary text-primary w-full overflow-auto"
39 f5c168d Mardin 2y ago ref={logsDiv}
40 f5c168d Mardin 2y ago >
41 f5c168d Mardin 2y ago {logs.map((log: string, index: number) => (
42 f5c168d Mardin 2y ago <div key={log} className="w-full">
43 f5c168d Mardin 2y ago <p className="font-mono text-[0.7rem] text-primary my-1 break-all rounded-sm p-[1px] hover:bg-gray-300 dark:hover:bg-gray-900">
44 f5c168d Mardin 2y ago {log}
45 f5c168d Mardin 2y ago </p>
46 f5c168d Mardin 2y ago {index !== logs.length - 1 && (
47 f5c168d Mardin 2y ago <Separator className="bg-white dark:bg-gray-700" />
48 f5c168d Mardin 2y ago )}
49 f5c168d Mardin 2y ago </div>
50 f5c168d Mardin 2y ago ))}
51 f5c168d Mardin 2y ago </ScrollArea>
52 f5c168d Mardin 2y ago </CardContent>
53 f5c168d Mardin 2y ago </Card>
54 f5c168d Mardin 2y ago );
55 1d782e1 Mrdn 2y ago };