feat: added deployment loader & lines count

This commit is contained in:
usopp
2024-12-13 19:41:02 +01:00
parent 6773458da3
commit 3df3d187e4
2 changed files with 34 additions and 16 deletions

View File

@@ -8,6 +8,8 @@ import {
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line"; import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils"; import { LogLine, parseLogs } from "../../docker/logs/utils";
import { Badge } from "@/components/ui/badge";
import { Loader2 } from "lucide-react";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -84,19 +86,25 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
<DialogHeader> <DialogHeader>
<DialogTitle>Deployment</DialogTitle> <DialogTitle>Deployment</DialogTitle>
<DialogDescription> <DialogDescription>
See all the details of this deployment See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]"> <div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
<div> <div>
{filteredLogs.map((log: LogLine, index: number) => ( {
<TerminalLine filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
key={index} <TerminalLine
log={log} key={index}
noTimestamp log={log}
/> noTimestamp
)) || "Loading..."} />
)) :
(
<div className="flex justify-center items-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
)}
<div ref={endOfLogsRef} /> <div ref={endOfLogsRef} />
</div> </div>
</div> </div>

View File

@@ -8,6 +8,9 @@ import {
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line"; import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils"; import { LogLine, parseLogs } from "../../docker/logs/utils";
import { Badge } from "@/components/ui/badge";
import { Loader2 } from "lucide-react";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -91,20 +94,27 @@ export const ShowDeploymentCompose = ({
<DialogHeader> <DialogHeader>
<DialogTitle>Deployment</DialogTitle> <DialogTitle>Deployment</DialogTitle>
<DialogDescription> <DialogDescription>
See all the details of this deployment See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]"> <div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
<div> <div>
{filteredLogs.map((log: LogLine, index: number) => ( {
<TerminalLine filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
key={index} <TerminalLine
log={log} key={index}
noTimestamp log={log}
/> noTimestamp
)) || "Loading..."} />
)) :
(
<div className="flex justify-center items-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
)
}
<div ref={endOfLogsRef} /> <div ref={endOfLogsRef} />
</div> </div>
</div> </div>