coder · BrunoQuaresma · Sep 7, 2022 · Aug 30, 2022 · Aug 30, 2022 · Aug 31, 2022
diff --git a/codersdk/audit.go b/codersdk/audit.go
@@ -29,9 +29,9 @@ const (
 type AuditDiff map[string]AuditDiffField
 
 type AuditDiffField struct {
-	Old    any
-	New    any
-	Secret bool
+	Old    any  `json:"old"`
+	New    any  `json:"new"`
+	Secret bool `json:"secret"`
 }
 
 type AuditLog struct {

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -4,7 +4,7 @@ import { RequirePermission } from "components/RequirePermission/RequirePermissio
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
 import { FC, lazy, Suspense, useContext } from "react"
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Route, Routes } from "react-router-dom"
 import { selectPermissions } from "xServices/auth/authSelectors"
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
 import { XServiceContext } from "xServices/StateContext"
@@ -139,19 +139,15 @@ export const AppRouter: FC = () => {
           <Route
             index
             element={
-              process.env.NODE_ENV === "production" ? (
-                <Navigate to="/workspaces" />
-              ) : (
-                <AuthAndFrame>
-                  <RequirePermission
-                    isFeatureVisible={
-                      featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
-                    }
-                  >
-                    <AuditPage />
-                  </RequirePermission>
-                </AuthAndFrame>
-              )
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={
+                    featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
+                  }
+                >
+                  <AuditPage />
+                </RequirePermission>
+              </AuthAndFrame>
             }
           ></Route>
         </Route>

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -383,3 +383,18 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
   const response = await axios.get("/api/v2/entitlements")
   return response.data
 }
+
+interface GetAuditLogsOptions {
+  limit: number
+  offset: number
+}
+
+export const getAuditLogs = async (options: GetAuditLogsOptions): Promise<TypesGen.AuditLog[]> => {
+  const response = await axios.get(`/api/v2/audit?limit=${options.limit}&offset=${options.offset}`)
+  return response.data
+}
+
+export const getAuditLogsCount = async (): Promise<number> => {
+  const response = await axios.get(`/api/v2/audit/count`)
+  return response.data
+}
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -40,10 +40,10 @@ export type AuditDiff = Record<string, AuditDiffField>
 // From codersdk/audit.go
 export interface AuditDiffField {
   // eslint-disable-next-line
-  readonly Old: any
+  readonly old: any
   // eslint-disable-next-line
-  readonly New: any
-  readonly Secret: boolean
+  readonly new: any
+  readonly secret: boolean
 }
 
 // From codersdk/audit.go

diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx
@@ -0,0 +1,107 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { AuditLog } from "api/typesGenerated"
+import { colors } from "theme/colors"
+import { combineClasses } from "util/combineClasses"
+
+const getDiffValue = (value: number | string | boolean) => {
+  if (typeof value === "string") {
+    return `"${value}"`
+  }
+
+  return value.toString()
+}
+
+export const AuditLogDiff: React.FC<{ diff: AuditLog["diff"] }> = ({ diff }) => {
+  const styles = useStyles()
+  const diffEntries = Object.entries(diff)
+
+  return (
+    <div className={styles.diff}>
+      <div className={combineClasses([styles.diffColumn, styles.diffOld])}>
+        {diffEntries.map(([attrName, valueDiff], index) => (
+          <div key={attrName} className={styles.diffRow}>
+            <div className={styles.diffLine}>{index + 1}</div>
+            <div className={styles.diffIcon}>-</div>
+            <div>
+              {attrName}:{" "}
+              <span className={combineClasses([styles.diffValue, styles.diffValueOld])}>
+                {getDiffValue(valueDiff.old)}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className={combineClasses([styles.diffColumn, styles.diffNew])}>
+        {diffEntries.map(([attrName, valueDiff], index) => (
+          <div key={attrName} className={styles.diffRow}>
+            <div className={styles.diffLine}>{index + 1}</div>
+            <div className={styles.diffIcon}>+</div>
+            <div>
+              {attrName}:{" "}
+              <span className={combineClasses([styles.diffValue, styles.diffValueNew])}>
+                {getDiffValue(valueDiff.new)}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  diff: {
+    display: "flex",
+    alignItems: "flex-start",
+    fontSize: theme.typography.body2.fontSize,
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+
+  diffColumn: {
+    flex: 1,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2.5),
+    lineHeight: "160%",
+  },
+
+  diffOld: {
+    backgroundColor: theme.palette.error.dark,
+    color: theme.palette.error.contrastText,
+  },
+
+  diffRow: {
+    display: "flex",
+    alignItems: "baseline",
+  },
+
+  diffLine: {
+    opacity: 0.5,
+    width: theme.spacing(8),
+    textAlign: "right",
+    flexShrink: 0,
+  },
+
+  diffIcon: {
+    width: theme.spacing(4),
+    textAlign: "center",
+    fontSize: theme.typography.body1.fontSize,
+  },
+
+  diffNew: {
+    backgroundColor: theme.palette.success.dark,
+    color: theme.palette.success.contrastText,
+  },
+
+  diffValue: {
+    padding: 1,
+    borderRadius: theme.shape.borderRadius / 2,
+  },
+
+  diffValueOld: {
+    backgroundColor: colors.red[12],
+  },
+
+  diffValueNew: {
+    backgroundColor: colors.green[12],
+  },
+}))
diff --git a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx
@@ -0,0 +1,40 @@
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import { ComponentMeta, Story } from "@storybook/react"
+import { MockAuditLog, MockAuditLog2 } from "testHelpers/entities"
+import { AuditLogRow, AuditLogRowProps } from "./AuditLogRow"
+
+export default {
+  title: "components/AuditLogRow",
+  component: AuditLogRow,
+} as ComponentMeta<typeof AuditLogRow>
+
+const Template: Story<AuditLogRowProps> = (args) => (
+  <TableContainer>
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <AuditLogRow {...args} />
+      </TableBody>
+    </Table>
+  </TableContainer>
+)
+
+export const NoDiff = Template.bind({})
+NoDiff.args = {
+  auditLog: MockAuditLog,
+}
+
+export const WithDiff = Template.bind({})
+WithDiff.args = {
+  auditLog: MockAuditLog2,
+  defaultIsDiffOpen: true,
+}