Skip to content

Commit 64d5d67

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 64d5d67

File tree

2 files changed

+99
-34
lines changed

2 files changed

+99
-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: 92 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,84 @@ 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+
{showOrgDetails ? <h4>IP:</h4> : <span>IP: </span>}
175+
<strong>{auditLog.ip}</strong>
176+
</span>
177+
)}
178+
{os.name && (
179+
<span css={styles.auditLogInfo}>
180+
{showOrgDetails ? <h4>OS:</h4> : <span>OS: </span>}
181+
<strong>{os.name}</strong>
182+
</span>
183+
)}
184+
{browser.name && (
185+
<span css={styles.auditLogInfo}>
186+
{showOrgDetails ? (
187+
<h4>Browser:</h4>
188+
) : (
189+
<span>Browser: </span>
190+
)}
146191
<strong>
147-
{auditLog.organization.display_name ||
148-
auditLog.organization.name}
192+
{browser.name} {browser.version}
149193
</strong>
150-
</Link>
151-
</span>
152-
)}
153-
</Stack>
194+
</span>
195+
)}
196+
</Stack>
197+
)}
154198

155199
<Pill
156200
css={styles.httpStatusPill}
@@ -212,6 +256,20 @@ const styles = {
212256
display: "block",
213257
}),
214258

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

0 commit comments

Comments
 (0)