Display user agent info

BrunoQuaresma · BrunoQuaresma · commit 8f1bce731826 · 2022-09-07T17:36:44.000Z
diff --git a/site/package.json b/site/package.json
@@ -60,6 +60,7 @@
     "sourcemapped-stacktrace": "1.1.11",
     "swr": "1.3.0",
     "tzdata": "1.0.30",
+    "ua-parser-js": "1.0.2",
     "uuid": "9.0.0",
     "xstate": "4.33.5",
     "xterm": "4.19.0",
@@ -87,6 +88,7 @@
     "@types/react-helmet": "6.1.5",
     "@types/semver": "^7.3.12",
     "@types/superagent": "4.1.15",
+    "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "5.36.1",
     "@typescript-eslint/parser": "5.31.0",
diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { AuditLog } from "api/typesGenerated"
 import { colors } from "theme/colors"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "util/combineClasses"
 
 const getDiffValue = (value: number | string | boolean) => {
@@ -55,6 +56,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "flex-start",
     fontSize: theme.typography.body2.fontSize,
     borderTop: `1px solid ${theme.palette.divider}`,
+    fontFamily: MONOSPACE_FONT_FAMILY,
   },
 
   diffColumn: {
diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -9,8 +9,10 @@ import { Stack } from "components/Stack/Stack"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { t } from "i18next"
 import { ComponentProps, useState } from "react"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { createDayString } from "util/createDayString"
 import { AuditLogDiff } from "./AuditLogDiff"
+import userAgentParser from "ua-parser-js"
 
 const pillTypeByHttpStatus = (httpStatus: number): ComponentProps<typeof Pill>["type"] => {
   if (httpStatus >= 300 && httpStatus < 500) {
@@ -58,6 +60,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
   const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen)
   const diffs = Object.entries(auditLog.diff)
   const shouldDisplayDiff = diffs.length > 0
+  const userAgent = userAgentParser(auditLog.user_agent)
 
   const toggle = () => {
     if (shouldDisplayDiff) {
@@ -66,11 +69,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
   }
 
   return (
-    <TableRow
-      key={auditLog.id}
-      hover={shouldDisplayDiff}
-      data-testid={`audit-log-row-${auditLog.id}`}
-    >
+    <TableRow key={auditLog.id} data-testid={`audit-log-row-${auditLog.id}`}>
       <TableCell className={styles.auditLogCell}>
         <Stack
           style={{ cursor: shouldDisplayDiff ? "pointer" : undefined }}
@@ -120,7 +119,10 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
                   <strong>IP</strong> {auditLog.ip}
                 </div>
                 <div>
-                  <strong>Agent</strong> {auditLog.user_agent}
+                  <strong>OS</strong> {userAgent.os.name}
+                </div>
+                <div>
+                  <strong>Browser</strong> {userAgent.browser.name} {userAgent.browser.version}
                 </div>
               </Stack>
             </Stack>
@@ -148,6 +150,10 @@ const useStyles = makeStyles((theme) => ({
 
   auditLogRow: {
     padding: theme.spacing(2, 4),
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
   },
 
   auditLogRowInfo: {
@@ -162,6 +168,7 @@ const useStyles = makeStyles((theme) => ({
 
   auditLogTime: {
     ...theme.typography.body2,
+    fontSize: 12,
     fontFamily: "inherit",
     color: theme.palette.text.secondary,
     display: "block",
@@ -173,7 +180,7 @@ const useStyles = makeStyles((theme) => ({
 
   auditLogExtraInfo: {
     ...theme.typography.body2,
-    fontFamily: "inherit",
+    fontFamily: MONOSPACE_FONT_FAMILY,
     color: theme.palette.text.secondary,
     whiteSpace: "nowrap",
   },
diff --git a/site/yarn.lock b/site/yarn.lock
@@ -3671,6 +3671,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/ua-parser-js@^0.7.36":
+  version "0.7.36"
+  resolved "https://registry.yarnpkg.com/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz#9bd0b47f26b5a3151be21ba4ce9f5fa457c5f190"
+  integrity sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==
+
 "@types/uglify-js@*":
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.0.tgz#95271e7abe0bf7094c60284f76ee43232aef43b9"
@@ -14246,6 +14251,11 @@ tzdata@1.0.30:
   resolved "https://registry.yarnpkg.com/tzdata/-/tzdata-1.0.30.tgz#d9d5a4b4b5e1ed95f6255f98c0564c4256316f52"
   integrity sha512-/0yogZsIRUVhGIEGZahL+Nnl9gpMD6jtQ9MlVtPVofFwhaqa+cFTgRy1desTAKqdmIJjS6CL+i6F/mnetrLaxw==
 
+ua-parser-js@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775"
+  integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
+
 uglify-js@^3.1.4:
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.0.tgz#55bd6e9d19ce5eef0d5ad17cd1f587d85b180a85"
