awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve PAM session log rows

Browse Source
This commit is contained in:
x032205
2025-10-04 04:09:03 -04:00
parent d0d623c4dc
commit 837c1b3b2b
2 changed files with 55 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
View File

@@ -21,16 +21,16 @@ const Page = () => {
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{session && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
<PageHeader
title={`${session.accountName} Session`}
description={`View details for this ${session.accountName} session.`}
/>
<div className="flex">
<div className="mr-4 w-96">
<div className="mr-4 flex h-fit w-96">
<PamSessionDetailsSection session={session} />
</div>
<div className="w-full">
<div className="flex w-full min-w-0">
<PamSessionLogsSection session={session} />
</div>
</div>

68
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
View File

@@ -1,5 +1,6 @@
import { faTerminal } from "@fortawesome/free-solid-svg-icons";
import { faChevronRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import { TPamSession } from "@app/hooks/api/pam";
@@ -8,28 +9,63 @@ type Props = {
};
export const PamSessionLogsSection = ({ session }: Props) => {
const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
const toggleExpand = (timestamp: string) => {
setExpandedLogTimestamps((prev) => {
const newSet = new Set(prev);
if (newSet.has(timestamp)) {
newSet.delete(timestamp);
} else {
newSet.add(timestamp);
}
return newSet;
});
};
return (
<div className="flex h-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Session Logs</h3>
</div>
<div className="flex grow flex-col gap-8 overflow-y-auto text-xs">
<div className="flex flex-col gap-2 overflow-y-auto text-xs">
{session.commandLogs.length > 0 ? (
session.commandLogs.map((log) => (
<div key={log.timestamp} className="flex flex-col">
<div className="flex items-center gap-1.5 text-bunker-400">
<FontAwesomeIcon icon={faTerminal} className="size-3" />
<span>{new Date(log.timestamp).toLocaleString()}</span>
</div>
session.commandLogs.map((log) => {
const isExpanded = expandedLogTimestamps.has(log.timestamp);
return (
<div
key={log.timestamp}
className={`flex cursor-pointer flex-col rounded-md border border-mineshaft-700 p-3 ${
isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800"
}`}
onClick={() => toggleExpand(log.timestamp)}
>
<div className="flex items-center justify-between text-bunker-400">
<div className="flex select-none items-center gap-2">
<FontAwesomeIcon
icon={isExpanded ? faChevronDown : faChevronRight}
className="size-3 transition-transform duration-200"
/>
<span>{new Date(log.timestamp).toLocaleString()}</span>
</div>
</div>
<div className="overflow-hidden whitespace-pre-wrap break-all font-mono">
{log.input}
<div
className={`mt-2 font-mono ${
isExpanded ? "whitespace-pre-wrap break-all" : "truncate"
}`}
>
{log.input}
</div>
{isExpanded && log.output && (
<div className="mt-2 whitespace-pre-wrap break-all border-t border-mineshaft-700 pt-2 font-mono text-bunker-300">
{log.output}
</div>
)}
</div>
<div className="overflow-hidden whitespace-pre-wrap break-all font-mono text-bunker-300">
{log.output}
</div>
</div>
))
);
})
) : (
<div className="flex w-full grow items-center justify-center text-bunker-300">
No session logs