0.2.63 update

admin-ui/src/pages/Logs.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../api/client';
 import { num, when } from '../lib/format';
 import { Banner, Button, Card, Field, PageHead } from '../components/ui';
@@ -18,9 +18,10 @@ const DRAW = 2_500;
 const POLL_MS = 5_000;
 
 /* The same order the server's own console lines use — who and where first, the reason for
-   the line last — so a log read here and a log read over SSH look alike. `version` is
-   dropped: it is the same on every line and is reported once in the top bar instead. */
-const FIELD_ORDER = ['component', 'user', 'device', 'client', 'protocol', 'method', 'path', 'status', 'duration'];
+   the line last — so a log read here and a log read over SSH look alike. The gateway
+   version deliberately remains visible: a server-log export is often read away from the
+   console whose top bar would otherwise supply it. */
+const FIELD_ORDER = ['component', 'user', 'device', 'client', 'protocol', 'method', 'path', 'status', 'duration', 'version', 'gateway_version'];
 
 function orderedFields(attributes: Record<string, unknown>): [string, unknown][] {
   const rank = (key: string) => {
@@ -28,11 +29,11 @@ function orderedFields(attributes: Record<string, unknown>): [string, unknown][]
     if (at >= 0) return at;
     return key === 'error' ? 1000 : 100;
   };
-  return Object.entries(attributes)
-    .filter(([key]) => key !== 'version')
-    .sort((a, b) => rank(a[0]) - rank(b[0]));
+  return Object.entries(attributes).sort((a, b) => rank(a[0]) - rank(b[0]));
 }
 
+const readableKey = (key: string) => key.replace(/_/g, ' ');
+
 const haystack = (event: LogEvent) =>
   [event.message, ...Object.entries(event.attributes ?? {}).flat()].join(' ').toLowerCase();
 
@@ -157,25 +158,31 @@ export function LogsPage() {
         </div>
 
         <div className="logview" ref={view} onScroll={onScroll} role="log" aria-live="polite">
+          <div className="loghead" aria-hidden="true">
+            <span>Time</span>
+            <span>Level</span>
+            <span>Event</span>
+            <span>Details</span>
+          </div>
           {visible.length === 0 ? (
             <p className="empty">{records.length === 0 ? 'Waiting for server events…' : 'No events match this filter.'}</p>
           ) : (
             visible.map((event, index) => (
               <div className="logline" key={`${event.occurredAt}:${index}`} data-level={event.level}>
-                <time>{when(event.occurredAt)}</time>
+                <time title={`Log record ${event.sequence}`}>{when(event.occurredAt)}<small>#{event.sequence}</small></time>
                 {/* The level is a class on the line as well as its own column: scrolling a
                     log is looking for the one line that is not INFO, and a coloured word
                     four columns in is easy to scroll past. */}
                 <span className="lvl">{event.level}</span>
                 <span className="msg">{event.message}</span>
                 <span className="attrs">
-                  {orderedFields(event.attributes ?? {}).map(([key, value]) => (
-                    <span key={key}>
-                      {' '}
-                      <b>{key}=</b>
-                      {String(value)}
-                    </span>
-                  ))}
+                  <details className="logdetails">
+                    <summary>{orderedFields(event.attributes ?? {}).map(([key, value]) => <span key={key}><b>{key}=</b>{String(value)} </span>)}</summary>
+                    <dl>
+                      <dt>Log record</dt><dd>{event.sequence}</dd>
+                      {orderedFields(event.attributes ?? {}).map(([key, value]) => <Fragment key={key}><dt>{readableKey(key)}</dt><dd>{String(value)}</dd></Fragment>)}
+                    </dl>
+                  </details>
                 </span>
               </div>
             ))