Skip to content

Commit 2ed12e1

Browse files
code-ashercode-asher
committed
Show audit log details in a tooltip
Only for multi-org; single-org setups remain unaffected.
1 parent dc29183 commit 2ed12e1

File tree

2 files changed

+95
-34
lines changed

2 files changed

+95
-34
lines changed

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,10 @@ export const SecretDiffValue: Story = {
113113
auditLog: MockAuditLogGitSSH,
114114
},
115115
};
116+
117+
export const WithOrganization: Story = {
118+
args: {
119+
auditLog: MockAuditLog,
120+
showOrgDetails: true,
121+
},
122+
};

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

Lines changed: 88 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
2+
import InfoOutlined from "@mui/icons-material/InfoOutlined";
23
import Collapse from "@mui/material/Collapse";
34
import Link from "@mui/material/Link";
45
import TableCell from "@mui/material/TableCell";
6+
import Tooltip from "@mui/material/Tooltip";
57
import { type FC, useState } from "react";
68
import { Link as RouterLink } from "react-router-dom";
79
import userAgentParser from "ua-parser-js";
@@ -115,42 +117,80 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
115117
</Stack>
116118

117119
<Stack direction="row" alignItems="center">
118-
<Stack direction="row" spacing={1} alignItems="baseline">
119-
{auditLog.ip && (
120-
<span css={styles.auditLogInfo}>
121-
<>IP: </>
122-
<strong>{auditLog.ip}</strong>
123-
</span>
124-
)}
125-
{os.name && (
126-
<span css={styles.auditLogInfo}>
127-
<>OS: </>
128-
<strong>{os.name}</strong>
129-
</span>
130-
)}
131-
{browser.name && (
132-
<span css={styles.auditLogInfo}>
133-
<>Browser: </>
134-
<strong>
135-
{browser.name} {browser.version}
136-
</strong>
137-
</span>
138-
)}
139-
{showOrgDetails && auditLog.organization && (
140-
<span css={styles.auditLogInfo}>
141-
<>Org: </>
142-
<Link
143-
component={RouterLink}
144-
to={`/organizations/${auditLog.organization.name}`}
145-
>
120+
{/* With multi-org, there is not enough space so show
121+
everything in a tooltip. */}
122+
{showOrgDetails ? (
123+
<Tooltip
124+
title={
125+
<div css={styles.auditLogInfoTooltip}>
126+
{auditLog.ip && (
127+
<div>
128+
<h4 css={styles.auditLogInfoHeader}>IP:</h4>
129+
<div>{auditLog.ip}</div>
130+
</div>
131+
)}
132+
{os.name && (
133+
<div>
134+
<h4 css={styles.auditLogInfoHeader}>OS:</h4>
135+
<div>{os.name}</div>
136+
</div>
137+
)}
138+
{browser.name && (
139+
<div>
140+
<h4 css={styles.auditLogInfoHeader}>Browser:</h4>
141+
<div>
142+
{browser.name} {browser.version}
143+
</div>
144+
</div>
145+
)}
146+
{auditLog.organization && (
147+
<div>
148+
<h4 css={styles.auditLogInfoHeader}>
149+
Organization:
150+
</h4>
151+
<Link
152+
component={RouterLink}
153+
to={`/organizations/${auditLog.organization.name}`}
154+
>
155+
{auditLog.organization.display_name ||
156+
auditLog.organization.name}
157+
</Link>
158+
</div>
159+
)}
160+
</div>
161+
}
162+
>
163+
<InfoOutlined
164+
css={(theme) => ({
165+
fontSize: 20,
166+
color: theme.palette.info.light,
167+
})}
168+
/>
169+
</Tooltip>
170+
) : (
171+
<Stack direction="row" spacing={1} alignItems="baseline">
172+
{auditLog.ip && (
173+
<span css={styles.auditLogInfo}>
174+
<span>IP: </span>
175+
<strong>{auditLog.ip}</strong>
176+
</span>
177+
)}
178+
{os.name && (
179+
<span css={styles.auditLogInfo}>
180+
<span>OS: </span>
181+
<strong>{os.name}</strong>
182+
</span>
183+
)}
184+
{browser.name && (
185+
<span css={styles.auditLogInfo}>
186+
<span>Browser: </span>
146187
<strong>
147-
{auditLog.organization.display_name ||
148-
auditLog.organization.name}
188+
{browser.name} {browser.version}
149189
</strong>
150-
</Link>
151-
</span>
152-
)}
153-
</Stack>
190+
</span>
191+
)}
192+
</Stack>
193+
)}
154194

155195
<Pill
156196
css={styles.httpStatusPill}
@@ -212,6 +252,20 @@ const styles = {
212252
display: "block",
213253
}),
214254

255+
auditLogInfoHeader: (theme) => ({
256+
margin: 0,
257+
color: theme.palette.text.primary,
258+
fontSize: 14,
259+
lineHeight: "150%",
260+
fontWeight: 600,
261+
}),
262+
263+
auditLogInfoTooltip: {
264+
display: "flex",
265+
flexDirection: "column",
266+
gap: 8,
267+
},
268+
215269
// offset the absence of the arrow icon on diff-less logs
216270
columnWithoutDiff: {
217271
marginLeft: "24px",

0 commit comments

Comments
 (0)