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

Merge pull request #4805 from Infisical/PAM-45

Browse Source 
pam: simplify log output
This commit is contained in:
Maidul Islam
2025-11-04 18:49:46 -05:00
committed by GitHub
parent 1f38eed974 c73abc8608
commit 3a17468946
2 changed files with 3 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,116 +0,0 @@
import { useState } from "react";
import { HighlightText } from "@app/components/v2/HighlightText";
import { PamResourceType } from "@app/hooks/api/pam";
type TableLog = {
command?: string;
data_rows: Record<string, string | number | null>[];
total_rows?: number;
};
export const PamSessionLogOutput = ({
content,
resourceType,
search
}: {
content: string;
resourceType: PamResourceType;
search: string;
}) => {
const [isRawView, setIsRawView] = useState(false);
let parsedContent: TableLog | null = null;
if (resourceType === PamResourceType.Postgres || resourceType === PamResourceType.MySQL) {
try {
const parsed = JSON.parse(content);
if (
parsed &&
typeof parsed === "object" &&
!Array.isArray(parsed) &&
parsed.data_rows &&
Array.isArray(parsed.data_rows) &&
parsed.data_rows.length > 0 &&
typeof parsed.data_rows[0] === "object" &&
parsed.data_rows[0] !== null
) {
parsedContent = parsed;
}
} catch {
// Not a valid JSON or doesn't match structure, will render as plain text
}
}
if (parsedContent) {
const headers = Object.keys(parsedContent.data_rows[0]);
return (
<div className="font-sans">
{isRawView ? (
<div className="font-mono break-all whitespace-pre-wrap">
<HighlightText text={content} highlight={search} />
</div>
) : (
<>
{parsedContent.command && (
<div className="mb-2 font-mono">{`> ${parsedContent.command}`}</div>
)}
<div className="overflow-x-auto rounded-md border border-mineshaft-600">
<table className="w-full min-w-max text-left">
<thead className="bg-mineshaft-800">
<tr className="border-b border-mineshaft-600">
{headers.map((header) => (
<th key={header} className="p-2 font-semibold text-mineshaft-200 capitalize">
<HighlightText text={header.replace(/_/g, " ")} highlight={search} />
</th>
))}
</tr>
</thead>
<tbody>
{parsedContent.data_rows.map((row, rowIndex) => (
<tr
// eslint-disable-next-line react/no-array-index-key
key={`row-${rowIndex}`}
className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
>
{headers.map((header) => (
<td key={header} className="p-2">
<HighlightText text={String(row[header] ?? "")} highlight={search} />
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</>
)}
<div className="mt-2 flex items-center">
<button
type="button"
className="cursor-pointer text-sm text-bunker-400 underline"
onClick={(e) => {
e.stopPropagation();
setIsRawView((v) => !v);
}}
>
{isRawView ? "View Formatted" : "View Raw"}
</button>
{parsedContent.total_rows !== undefined && (
<div className="ml-auto text-right text-sm text-bunker-400">
Total rows: {parsedContent.total_rows}
</div>
)}
</div>
</div>
);
}
return (
<div className="font-mono break-all whitespace-pre-wrap">
<HighlightText text={content} highlight={search} />
</div>
);
};

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

@@ -7,7 +7,6 @@ import { Input } from "@app/components/v2";
import { HighlightText } from "@app/components/v2/HighlightText";
import { TPamSession } from "@app/hooks/api/pam";
import { PamSessionLogOutput } from "./PamSessionLogOutput";
import { formatLogContent } from "./PamSessionLogsSection.utils";
type Props = {
@@ -104,20 +103,9 @@ export const PamSessionLogsSection = ({ session }: Props) => {
>
<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}
search={search}
/>
</div>
</>
<div className="pt-2 text-bunker-300">
<HighlightText text={log.output} highlight={search} />
</div>
)}
</div>
</div>