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

animations and small tweaks

Browse Source
This commit is contained in:
x032205
2025-11-01 04:34:32 -04:00
parent 39567116c8
commit d870c047f9
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
View File

@@ -1,6 +1,7 @@
import { PamResourceType } from "@app/hooks/api/pam";
import { useState } from "react";
import { PamResourceType } from "@app/hooks/api/pam";
type TableLog = {
command?: string;
data_rows: Record<string, string | number | null>[];
@@ -34,7 +35,7 @@ export const PamSessionLogOutput = ({
) {
parsedContent = parsed;
}
} catch (error) {
} catch {
// Not a valid JSON or doesn't match structure, will render as plain text
}
}
@@ -69,7 +70,7 @@ export const PamSessionLogOutput = ({
className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
>
{headers.map((header) => (
<td key={`${header}-${rowIndex}`} className="p-2">
<td key={header} className="p-2">
{String(row[header] ?? "")}
</td>
))}

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

@@ -1,8 +1,10 @@
import { useState } from "react";
import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { TPamSession } from "@app/hooks/api/pam";
import { PamSessionLogOutput } from "./PamSessionLogOutput";
import { formatLogContent } from "./PamSessionLogsSection.utils";
@@ -45,8 +47,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
<div className="flex items-center justify-between text-bunker-400">
<div className="flex items-center gap-2 select-none">
<FontAwesomeIcon
icon={isExpanded ? faChevronDown : faChevronRight}
className="size-3 transition-transform duration-200"
icon={faChevronRight}
className={twMerge(
"size-3 transition-transform duration-100 ease-in-out",
isExpanded && "rotate-90"
)}
/>
<span>{new Date(log.timestamp).toLocaleString()}</span>
</div>
@@ -60,21 +65,30 @@ export const PamSessionLogsSection = ({ session }: Props) => {
{formattedInput}
</div>
{isExpanded && log.output && (
<>
<div className="mt-2 flex items-center gap-2">
<div className="h-px w-full bg-mineshaft-400"></div>
<span className="text-xs text-mineshaft-400">OUTPUT</span>
<div className="h-px w-full bg-mineshaft-400"></div>
</div>
<div className="pt-2 text-bunker-300">
<PamSessionLogOutput
content={log.output}
resourceType={session.resourceType}
/>
</div>
</>
)}
<div
className={twMerge(
"grid transition-all duration-100 ease-in-out",
isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
)}
>
<div className="overflow-hidden">
{log.output && (
<>
<div className="mt-2 flex items-center gap-2">
<div className="h-px w-full bg-mineshaft-400" />
<span className="text-xs text-mineshaft-400">OUTPUT</span>
<div className="h-px w-full bg-mineshaft-400" />
</div>
<div className="pt-2 text-bunker-300">
<PamSessionLogOutput
content={log.output}
resourceType={session.resourceType}
/>
</div>
</>
)}
</div>
</div>
</button>
);
})