mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
feat(logs): added show/hide timestamp option
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import {
|
import {
|
||||||
@@ -7,6 +6,7 @@ import {
|
|||||||
SelectItem,
|
SelectItem,
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
|
SelectSeparator
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
import {
|
import {
|
||||||
@@ -23,8 +23,7 @@ interface Props {
|
|||||||
serverId?: string | null;
|
serverId?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type TimeFilter = "all" | "timestamp" | "1h" | "6h" | "24h" | "168h" | "720h";
|
||||||
type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
|
|
||||||
|
|
||||||
export const priorities = [
|
export const priorities = [
|
||||||
{
|
{
|
||||||
@@ -65,7 +64,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
|
|||||||
const [autoScroll, setAutoScroll] = React.useState(true);
|
const [autoScroll, setAutoScroll] = React.useState(true);
|
||||||
const [lines, setLines] = React.useState<number>(100);
|
const [lines, setLines] = React.useState<number>(100);
|
||||||
const [search, setSearch] = React.useState<string>("");
|
const [search, setSearch] = React.useState<string>("");
|
||||||
|
const [showTimestamp, setShowTimestamp] = React.useState(true);
|
||||||
const [since, setSince] = React.useState<TimeFilter>("all");
|
const [since, setSince] = React.useState<TimeFilter>("all");
|
||||||
const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
|
const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -96,9 +95,13 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSince = (value: TimeFilter) => {
|
const handleSince = (value: TimeFilter) => {
|
||||||
setRawLogs("");
|
if (value === "timestamp") {
|
||||||
setFilteredLogs([]);
|
setShowTimestamp(!showTimestamp);
|
||||||
setSince(value);
|
} else {
|
||||||
|
setRawLogs("");
|
||||||
|
setFilteredLogs([]);
|
||||||
|
setSince(value);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -255,6 +258,10 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
|
|||||||
<SelectItem value="168h">Last 7 days</SelectItem>
|
<SelectItem value="168h">Last 7 days</SelectItem>
|
||||||
<SelectItem value="720h">Last 30 days</SelectItem>
|
<SelectItem value="720h">Last 30 days</SelectItem>
|
||||||
<SelectItem value="all">All time</SelectItem>
|
<SelectItem value="all">All time</SelectItem>
|
||||||
|
<SelectSeparator/>
|
||||||
|
<SelectItem value="timestamp">
|
||||||
|
{showTimestamp ? "Hide timestamp" : "Show timestamp"}
|
||||||
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
@@ -272,12 +279,13 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
|
|||||||
onChange={handleSearch}
|
onChange={handleSearch}
|
||||||
className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
|
className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-9"
|
className="h-9 sm:w-auto w-full"
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
disabled={filteredLogs.length === 0 || !data?.Name}
|
disabled={filteredLogs.length === 0 || !data?.Name}
|
||||||
>
|
>
|
||||||
@@ -296,6 +304,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
|
|||||||
key={index}
|
key={index}
|
||||||
log={filteredLog}
|
log={filteredLog}
|
||||||
searchTerm={search}
|
searchTerm={search}
|
||||||
|
noTimestamp={!showTimestamp}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
) : isLoading ? (
|
) : isLoading ? (
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
|||||||
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
|
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
|
||||||
{tooltip(color, rawTimestamp)}
|
{tooltip(color, rawTimestamp)}
|
||||||
{!noTimestamp && (
|
{!noTimestamp && (
|
||||||
<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
|
<span className="select-none pl-2 text-muted-foreground w-full sm:w-auto flex-shrink-0">
|
||||||
{formattedTime}
|
{formattedTime}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user