mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
feat: added deployment loader & lines count
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user