Prototype improved audit log UI

web/packages/teleport/src/Audit/EventList/EventList.tsx

@@ -98,8 +98,13 @@ export const renderTimeCell = ({ time }: Event) => (
   <Cell style={{ minWidth: '120px' }}>{time.toISOString()}</Cell>
 );
 
-export function renderDescCell({ message }: Event) {
-  return <Cell style={{ wordBreak: 'break-word' }}>{message}</Cell>;
+export function renderDescCell(event: Event) {
+  const { message, render } = event;
+  return (
+    <Cell style={{ wordBreak: 'break-word' }}>
+      {render ? render(event.raw) : message}
+    </Cell>
+  );
 }
 
 type Props = {

web/packages/teleport/src/services/audit/makeEvent.ts → web/packages/teleport/src/services/audit/makeEvent.tsx

@@ -18,9 +18,15 @@
 
 import { formatDistanceStrict } from 'date-fns';
 import { pluralize } from 'shared/utils/text';
+import * as Icons from 'design/Icon';
 
 import { Event, RawEvent, Formatters, eventCodes, RawEvents } from './types';
 
+const iconProps = {
+  m: 1,
+  verticalAlign: 'middle',
+};
+
 const formatElasticsearchEvent: (
   json:
     | RawEvents[typeof eventCodes.ELASTICSEARCH_REQUEST]
@@ -725,6 +731,12 @@ export const formatters: Formatters = {
     type: 'user.login',
     desc: 'Local Login',
     format: ({ user }) => `Local user [${user}] successfully logged in`,
+    render: ({ user }) => (
+      <>
+        Local user <Icons.User {...iconProps} size="small" />
+        <b>{user}</b> successfully logged in
+      </>
+    ),
   },
   [eventCodes.USER_LOCAL_LOGINFAILURE]: {
     type: 'user.login',
@@ -783,11 +795,31 @@ export const formatters: Formatters = {
       }
       return `Passwordless user requested an MFA authentication challenge`;
     },
+    render: ({ user }) => {
+      if (user) {
+        return (
+          <>
+            <Icons.User {...iconProps} size="small" />
+            <b>{user}</b> requested an MFA authentication challenge
+          </>
+        );
+      } else {
+        return (
+          <>`Passwordless user requested an MFA authentication challenge`;</>
+        );
+      }
+    },
   },
   [eventCodes.VALIDATE_MFA_AUTH_RESPONSE]: {
     type: 'mfa_auth_challenge.validate',
     desc: 'MFA Authentication Success',
     format: ({ user }) => `User [${user}] completed MFA authentication`,
+    render: ({ user }) => (
+      <>
+        <Icons.User {...iconProps} size="small" />
+        <b>{user}</b> completed MFA authentication
+      </>
+    ),
   },
   [eventCodes.VALIDATE_MFA_AUTH_RESPONSEFAILURE]: {
     type: 'mfa_auth_challenge.validate',
@@ -1441,6 +1473,24 @@ export const formatters: Formatters = {
       }
       return `Certificate of type [${cert_type}] issued for [${user}]`;
     },
+    render: ({ cert_type, identity: { user } }) => {
+      if (cert_type === 'user') {
+        return (
+          <>
+            User certificate issued for{' '}
+            <Icons.User {...iconProps} size="small" />
+            <b>{user}</b>
+          </>
+        );
+      }
+      return (
+        <>
+          Certificate of type {cert_type} issued for{' '}
+          <Icons.User {...iconProps} size="small" />
+          <b>{user}</b>
+        </>
+      );
+    },
   },
   [eventCodes.UPGRADE_WINDOW_UPDATED]: {
     type: 'upgradewindow.update',
@@ -1995,6 +2045,7 @@ export default function makeEvent(json: any): Event {
     user: json.user,
     time: new Date(json.time),
     raw: json,
+    render: formatter.render,
   };
 }
 

web/packages/teleport/src/services/audit/types.ts

@@ -1954,6 +1954,7 @@ export type Formatters = {
     type: string;
     desc: string;
     format: (json: RawEvents[key]) => string;
+    render?: (e: RawEvents[key]) => JSX.Element;
   };
 };
 
@@ -1966,6 +1967,7 @@ export type Events = {
     code: key;
     codeDesc: string;
     raw: RawEvents[key];
+    render?: (e: RawEvents[key]) => JSX.Element;
   };
 };