feat(logs): added show/hide timestamp option

This commit is contained in:
190km
2024-12-16 21:27:32 +01:00
parent 2312ae1c12
commit 71fe6de9cb
2 changed files with 18 additions and 9 deletions

View File

@@ -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 ? (

View File

@@ -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>
)} )}