Audit log

app/hooks/use-window-size.ts

@@ -0,0 +1,40 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useEffect, useState } from 'react'
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState<{
+    width: number
+    height: number
+  }>({
+    width: 0,
+    height: 0,
+  })
+
+  // Handler to call on window resize
+  function handleResize() {
+    // Set window width/height to state
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    })
+  }
+
+  useEffect(() => {
+    // Only execute all the code below in client side
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize)
+
+      handleResize()
+
+      return () => window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return size
+}

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 />

app/layouts/helpers.tsx

@@ -27,7 +27,7 @@ export function ContentPane() {
     <div className="light:bg-raise ml-(--sidebar-width) flex min-h-[calc(100vh-var(--top-bar-height))] flex-col">
       <div className="flex grow flex-col pb-8">
         <SkipLinkTarget />
-        <main className="*:gutter">
+        <main className="*:gutter h-full">
           <Outlet />
         </main>
       </div>