awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 11:26:33 +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
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
+4 -3
View File
@@ -1,6 +1,7 @@
import { PamResourceType } from "@app/hooks/api/pam";
import { useState } from "react"; import { useState } from "react";
import { PamResourceType } from "@app/hooks/api/pam";
type TableLog = { type TableLog = {
command?: string; command?: string;
data_rows: Record<string, string | number | null>[]; data_rows: Record<string, string | number | null>[];
@@ -34,7 +35,7 @@ export const PamSessionLogOutput = ({
) { ) {
parsedContent = parsed; parsedContent = parsed;
} }
} catch (error) { } catch {
// Not a valid JSON or doesn't match structure, will render as plain text // 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" className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
> >
{headers.map((header) => ( {headers.map((header) => (
<td key={`${header}-${rowIndex}`} className="p-2"> <td key={header} className="p-2">
{String(row[header] ?? "")} {String(row[header] ?? "")}
</td> </td>
))} ))}
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+32 -18
View File
@@ -1,8 +1,10 @@
import { useState } from "react"; 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { TPamSession } from "@app/hooks/api/pam"; import { TPamSession } from "@app/hooks/api/pam";
import { PamSessionLogOutput } from "./PamSessionLogOutput"; import { PamSessionLogOutput } from "./PamSessionLogOutput";
import { formatLogContent } from "./PamSessionLogsSection.utils"; 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 justify-between text-bunker-400">
<div className="flex items-center gap-2 select-none"> <div className="flex items-center gap-2 select-none">
<FontAwesomeIcon <FontAwesomeIcon
icon={isExpanded ? faChevronDown : faChevronRight} icon={faChevronRight}
className="size-3 transition-transform duration-200" className={twMerge(
"size-3 transition-transform duration-100 ease-in-out",
isExpanded && "rotate-90"
)}
/> />
<span>{new Date(log.timestamp).toLocaleString()}</span> <span>{new Date(log.timestamp).toLocaleString()}</span>
</div> </div>
@@ -60,21 +65,30 @@ export const PamSessionLogsSection = ({ session }: Props) => {
{formattedInput} {formattedInput}
</div> </div>
{isExpanded && log.output && ( <div
<> className={twMerge(
<div className="mt-2 flex items-center gap-2"> "grid transition-all duration-100 ease-in-out",
<div className="h-px w-full bg-mineshaft-400"></div> isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
<span className="text-xs text-mineshaft-400">OUTPUT</span> )}
<div className="h-px w-full bg-mineshaft-400"></div> >
</div> <div className="overflow-hidden">
<div className="pt-2 text-bunker-300"> {log.output && (
<PamSessionLogOutput <>
content={log.output} <div className="mt-2 flex items-center gap-2">
resourceType={session.resourceType} <div className="h-px w-full bg-mineshaft-400" />
/> <span className="text-xs text-mineshaft-400">OUTPUT</span>
</div> <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> </button>
); );
}) })