Skip to content

Commit 8f1bce7

Browse files
committed
Display user agent info
1 parent f1ba4ac commit 8f1bce7

File tree

4 files changed

+28
-7
lines changed

4 files changed

+28
-7
lines changed

site/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"sourcemapped-stacktrace": "1.1.11",
6161
"swr": "1.3.0",
6262
"tzdata": "1.0.30",
63+
"ua-parser-js": "1.0.2",
6364
"uuid": "9.0.0",
6465
"xstate": "4.33.5",
6566
"xterm": "4.19.0",
@@ -87,6 +88,7 @@
8788
"@types/react-helmet": "6.1.5",
8889
"@types/semver": "^7.3.12",
8990
"@types/superagent": "4.1.15",
91+
"@types/ua-parser-js": "^0.7.36",
9092
"@types/uuid": "8.3.4",
9193
"@typescript-eslint/eslint-plugin": "5.36.1",
9294
"@typescript-eslint/parser": "5.31.0",

site/src/components/AuditLogRow/AuditLogDiff.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { AuditLog } from "api/typesGenerated"
33
import { colors } from "theme/colors"
4+
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
45
import { combineClasses } from "util/combineClasses"
56

67
const getDiffValue = (value: number | string | boolean) => {
@@ -55,6 +56,7 @@ const useStyles = makeStyles((theme) => ({
5556
alignItems: "flex-start",
5657
fontSize: theme.typography.body2.fontSize,
5758
borderTop: `1px solid ${theme.palette.divider}`,
59+
fontFamily: MONOSPACE_FONT_FAMILY,
5860
},
5961

6062
diffColumn: {

site/src/components/AuditLogRow/AuditLogRow.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import { Stack } from "components/Stack/Stack"
99
import { UserAvatar } from "components/UserAvatar/UserAvatar"
1010
import { t } from "i18next"
1111
import { ComponentProps, useState } from "react"
12+
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
1213
import { createDayString } from "util/createDayString"
1314
import { AuditLogDiff } from "./AuditLogDiff"
15+
import userAgentParser from "ua-parser-js"
1416

1517
const pillTypeByHttpStatus = (httpStatus: number): ComponentProps<typeof Pill>["type"] => {
1618
if (httpStatus >= 300 && httpStatus < 500) {
@@ -58,6 +60,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
5860
const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen)
5961
const diffs = Object.entries(auditLog.diff)
6062
const shouldDisplayDiff = diffs.length > 0
63+
const userAgent = userAgentParser(auditLog.user_agent)
6164

6265
const toggle = () => {
6366
if (shouldDisplayDiff) {
@@ -66,11 +69,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
6669
}
6770

6871
return (
69-
<TableRow
70-
key={auditLog.id}
71-
hover={shouldDisplayDiff}
72-
data-testid={`audit-log-row-${auditLog.id}`}
73-
>
72+
<TableRow key={auditLog.id} data-testid={`audit-log-row-${auditLog.id}`}>
7473
<TableCell className={styles.auditLogCell}>
7574
<Stack
7675
style={{ cursor: shouldDisplayDiff ? "pointer" : undefined }}
@@ -120,7 +119,10 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
120119
<strong>IP</strong> {auditLog.ip}
121120
</div>
122121
<div>
123-
<strong>Agent</strong> {auditLog.user_agent}
122+
<strong>OS</strong> {userAgent.os.name}
123+
</div>
124+
<div>
125+
<strong>Browser</strong> {userAgent.browser.name} {userAgent.browser.version}
124126
</div>
125127
</Stack>
126128
</Stack>
@@ -148,6 +150,10 @@ const useStyles = makeStyles((theme) => ({
148150

149151
auditLogRow: {
150152
padding: theme.spacing(2, 4),
153+
154+
"&:hover": {
155+
backgroundColor: theme.palette.action.hover,
156+
},
151157
},
152158

153159
auditLogRowInfo: {
@@ -162,6 +168,7 @@ const useStyles = makeStyles((theme) => ({
162168

163169
auditLogTime: {
164170
...theme.typography.body2,
171+
fontSize: 12,
165172
fontFamily: "inherit",
166173
color: theme.palette.text.secondary,
167174
display: "block",
@@ -173,7 +180,7 @@ const useStyles = makeStyles((theme) => ({
173180

174181
auditLogExtraInfo: {
175182
...theme.typography.body2,
176-
fontFamily: "inherit",
183+
fontFamily: MONOSPACE_FONT_FAMILY,
177184
color: theme.palette.text.secondary,
178185
whiteSpace: "nowrap",
179186
},

site/yarn.lock

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3671,6 +3671,11 @@
36713671
dependencies:
36723672
"@types/jest" "*"
36733673

3674+
"@types/ua-parser-js@^0.7.36":
3675+
version "0.7.36"
3676+
resolved "https://registry.yarnpkg.com/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz#9bd0b47f26b5a3151be21ba4ce9f5fa457c5f190"
3677+
integrity sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==
3678+
36743679
"@types/uglify-js@*":
36753680
version "3.17.0"
36763681
resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.0.tgz#95271e7abe0bf7094c60284f76ee43232aef43b9"
@@ -14246,6 +14251,11 @@ tzdata@1.0.30:
1424614251
resolved "https://registry.yarnpkg.com/tzdata/-/tzdata-1.0.30.tgz#d9d5a4b4b5e1ed95f6255f98c0564c4256316f52"
1424714252
integrity sha512-/0yogZsIRUVhGIEGZahL+Nnl9gpMD6jtQ9MlVtPVofFwhaqa+cFTgRy1desTAKqdmIJjS6CL+i6F/mnetrLaxw==
1424814253

14254+
ua-parser-js@1.0.2:
14255+
version "1.0.2"
14256+
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775"
14257+
integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
14258+
1424914259
uglify-js@^3.1.4:
1425014260
version "3.17.0"
1425114261
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.0.tgz#55bd6e9d19ce5eef0d5ad17cd1f587d85b180a85"

0 commit comments

Comments
 (0)