diff --git a/dashboard/src/features/nodes/dialogs/settings/index.tsx b/dashboard/src/features/nodes/dialogs/settings/index.tsx
@@ -10,42 +10,50 @@ import {
TabsContent,
TabsList,
TabsTrigger,
-} from "@marzneshin/components"
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { NodeType } from "../.."
+} from "@marzneshin/components";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import type { NodeType } from "../..";
import { LogContainer } from "../../log";
import { NodesDetailTable } from "../../tables/detail-table";
import { NodeConfigEditor } from "./node-config-editor";
interface NodesSettingsDialogProps {
- onOpenChange: (state: boolean) => void
- open: boolean
- entity: NodeType
+ onOpenChange: (state: boolean) => void;
+ open: boolean;
+ entity: NodeType;
}
-export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({ onOpenChange, open, entity }) => {
+export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({
+ onOpenChange,
+ open,
+ entity,
+}) => {
const { t } = useTranslation();
return (
<Sheet open={open} onOpenChange={onOpenChange}>
- <SheetContent className="sm:min-w-full md:min-w-[600px] " >
- <ScrollArea className="h-full">
+ <SheetContent className="sm:min-w-full md:min-w-[600px] ">
+ <ScrollArea className="h-full w-full">
<SheetHeader>
- <SheetTitle>
- {t('page.nodes.settings.title')}
- </SheetTitle>
+ <SheetTitle>{t("page.nodes.settings.title")}</SheetTitle>
</SheetHeader>
<div className="my-4">
- <h1 className="font-medium font-header">{t('page.nodes.settings.detail')}</h1>
+ <h1 className="font-medium font-header">
+ {t("page.nodes.settings.detail")}
+ </h1>
<NodesDetailTable node={entity} />
</div>
- <Tabs className="my-3 w-full h-full" defaultValue="logs">
+ <Tabs className="my-3 max-w-full h-full" defaultValue="logs">
<TabsList className="w-full">
- <TabsTrigger className="w-full" value="logs">{t('logs')}</TabsTrigger>
- <TabsTrigger className="w-full" value="config">{t('config')}</TabsTrigger>
+ <TabsTrigger className="w-full" value="logs">
+ {t("logs")}
+ </TabsTrigger>
+ <TabsTrigger className="w-full" value="config">
+ {t("config")}
+ </TabsTrigger>
</TabsList>
- <TabsContent value="logs" className="h-full">
+ <TabsContent value="logs" className="h-full w-full">
<LogContainer node={entity} />
</TabsContent>
<TabsContent value="config" className="h-full z-51">
@@ -59,5 +67,5 @@ export const NodesSettingsDialog: FC<NodesSettingsDialogProps> = ({ onOpenChange
</ScrollArea>
</SheetContent>
</Sheet>
- )
-}
+ );
+};
diff --git a/dashboard/src/features/nodes/log/container.tsx b/dashboard/src/features/nodes/log/container.tsx
@@ -1,32 +1,56 @@
-import { Badge, Card, CardContent, CardHeader, ScrollArea } from "@marzneshin/components"
-import { NodeType, useNodesLog } from ".."
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
+import {
+ Badge,
+ Card,
+ CardContent,
+ CardHeader,
+ ScrollArea,
+ Separator,
+} from "@marzneshin/components";
+import type { NodeType } from "..";
+import { useNodesLog } from "..";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
interface LogContainerProps {
- node: NodeType
+ node: NodeType;
}
export const LogContainer: FC<LogContainerProps> = ({ node }) => {
- const { logs, status, logsDiv } = useNodesLog(node)
- const { t } = useTranslation()
- return (
- <Card className="h-1/2">
- <CardContent className="flex flex-col p-1 h-full" >
- <CardHeader className="flex flex-row justify-between items-center p-2">
- <p className="capitalize font-header">{t('page.nodes.settings.log-container.title')}</p>
- <div className="flex flex-row gap-2 justify-center items-center">
- <Badge variant={status === "closed" ? "destructive" : "default"} className="flex justify-center items-center w-full h-6 capitalize">
- {status}
- </Badge>
- </div>
- </CardHeader>
- <ScrollArea className="flex p-2 m-1 h-full rounded-b-md divide-dashed divide-accent bg-secondary text-primary" ref={logsDiv}>
- {logs.map((log: string, i) => {
- return <p key={i} className="font-mono text-[0.7rem] text-primary">{log}</p>
- })}
- </ScrollArea>
- </CardContent>
- </Card>
- )
-}
+ const { logs, status, logsDiv } = useNodesLog(node);
+ const { t } = useTranslation();
+
+ return (
+ <Card className="h-full w-full">
+ <CardContent className="flex flex-col p-2 h-full w-full">
+ <CardHeader className="flex flex-row justify-between items-center p-2">
+ <p className="capitalize font-header">
+ {t("page.nodes.settings.log-container.title")}
+ </p>
+ <div className="flex flex-row gap-2 justify-center items-center">
+ <Badge
+ variant={status === "closed" ? "destructive" : "default"}
+ className="flex justify-center items-center w-full h-6 capitalize"
+ >
+ {status}
+ </Badge>
+ </div>
+ </CardHeader>
+ <ScrollArea
+ className="flex p-2 h-full max-h-[calc(100vh-20rem)] rounded-md bg-secondary text-primary w-full overflow-auto"
+ ref={logsDiv}
+ >
+ {logs.map((log: string, index: number) => (
+ <div key={log} className="w-full">
+ <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">
+ {log}
+ </p>
+ {index !== logs.length - 1 && (
+ <Separator className="bg-gray-600" />
+ )}
+ </div>
+ ))}
+ </ScrollArea>
+ </CardContent>
+ </Card>
+ );
+};