Audit log (#2860)

https://console-git-audit-log-oxidecomputer.vercel.app/system/audit-log

Copied from
[#2849](<#2849>), which I
accidentally merged and couldn't reopen even after I fixed `main`.

---

Still very rough, but has been a helpful exercise in working through
some of the design due to the sheer amount of information and differing
layout from other pages.


https://github.com/user-attachments/assets/84cbb9f6-d22b-4e64-9b1d-e39d74d22902

Stubbing out based on
[https://github.com/oxidecomputer/omicron/pull/7339](<https://github.com/oxidecomputer/omicron/pull/7339>).

Uses [Tanstack Virtual](<https://tanstack.com/virtual/latest>). On
testing with > 500 lines without virtualisation it starts to get a bit
chunky especially if you're interacting with the page (e.g. opening the
row).

Hoping that silo name and actor display name can be plumbed through so
those are hard-coded for now.

Still needs:

- [X] Error state
- [X] Loading/placeholder state
- [X] Copy JSON to clipboard
- [ ] Equivalent CLI/API command
- [X] Fix giant footer spacing
- [X] Arrow key selected item navigation
- [X] Hide overflowing columns
- [X] Improved focus visible look
- [ ] Timestamp hover
- [X] Fix gradient on light mode
- [X] Syntax highlighting

---------

Co-authored-by: Benjamin Leonard <benji@oxide.computer>
Co-authored-by: Joe Thel <joe.thel@oxidecomputer.com>

Author: 3 people

app/components/form/fields/DateTimeRangePicker.tsx

@@ -42,9 +42,7 @@ const tz = getLocalTimeZone()
 
 /**
  * Exposes `startTime` and `endTime` plus the whole set of picker UI controls as
- * a JSX element to render. When we're using a relative preset like last N
- * hours, automatically slide the window forward live by updating the range to
- * have `endTime` of _now_ every `SLIDE_INTERVAL` ms.
+ * a JSX element to render.
  */
 export function useDateTimeRangePicker({
   initialPreset,
@@ -84,15 +82,17 @@ export function useDateTimeRangePicker({
     items,
   }
 
-  // Without these useMemos, we get re-renders every 400ms because when the
-  // debounce timeout expires, it updates the value, which triggers a render for
-  // itself because the time gets remade by toDate() (i.e., even though it is
-  // the same time, it is a new object)
-  const rangeStart = useMemo(() => range.start.toDate(tz), [range.start])
-  const [startTime] = useDebounce(rangeStart, 400)
-
-  const rangeEnd = useMemo(() => range.end.toDate(tz), [range.end])
-  const [endTime] = useDebounce(rangeEnd, 400)
+  // Debounce only while a custom range is being edited: the date fields fire
+  // onChange on every keystroke. Picking a preset is a single deliberate action
+  // and applies immediately. The range is debounced as one value so start and
+  // end can't land in separate renders and fire a request for a mixed range.
+  const [debouncedRange] = useDebounce(range, 400)
+  const effectiveRange = preset === 'custom' ? debouncedRange : range
+
+  // toDate() makes a new Date each call, so memoize on the stable DateValue to
+  // keep the query key from changing on every render
+  const startTime = useMemo(() => effectiveRange.start.toDate(tz), [effectiveRange.start])
+  const endTime = useMemo(() => effectiveRange.end.toDate(tz), [effectiveRange.end])
 
   return {
     startTime,

app/layouts/SystemLayout.tsx

@@ -12,6 +12,7 @@ import {
   Access16Icon,
   Cloud16Icon,
   IpGlobal16Icon,
+  Logs16Icon,
   Metrics16Icon,
   Servers16Icon,
   SoftwareUpdate16Icon,
@@ -57,6 +58,7 @@ export default function SystemLayout() {
       { value: 'Subnet Pools', path: pb.subnetPools() },
       { value: 'System Update', path: pb.systemUpdate() },
       { value: 'Fleet Access', path: pb.fleetAccess() },
+      { value: 'Audit Log', path: pb.auditLog() },
     ]
       // filter out the entry for the path we're currently on
       .filter((i) => i.path !== pathname)
@@ -107,6 +109,9 @@ export default function SystemLayout() {
           <NavLinkItem to={pb.fleetAccess()}>
             <Access16Icon /> Fleet Access
           </NavLinkItem>
+          <NavLinkItem to={pb.auditLog()}>
+            <Logs16Icon /> Audit Log
+          </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>
       <ContentPane />