Add related event navigation

Author: rootsec1

src/components/PodEventRail.tsx

@@ -1,16 +1,29 @@
+import { useMemo } from "react";
 import { AlertTriangle, Clock3 } from "lucide-react";
-import type { ResourceDetails, ResourceEvent } from "../types/kube";
+import { compareEventResources, relatedEventResourcesFor } from "../lib/resourceEvents";
+import type { ResourceDetails, ResourceEvent, ResourceRow } from "../types/kube";
 
 export function PodEventRail({
   details,
   detailsError,
   detailsLoading,
+  onOpenResource,
+  resource,
+  resources = [],
 }: {
   details: ResourceDetails;
   detailsError: string;
   detailsLoading: boolean;
+  onOpenResource?: (id: string, intent?: "logs" | null) => void;
+  resource?: ResourceRow;
+  resources?: ResourceRow[];
 }) {
   const { events, warningCount } = eventRailView(details.events);
+  const eventResources = useMemo(
+    () => resource ? relatedEventResourcesFor(resource, resources).sort(compareEventResources) : [],
+    [resource, resources],
+  );
+  const linkedEvents = linkEventResources(events, eventResources);
 
   return (
     <section className="pod-event-rail" aria-label="Pod event timeline">
@@ -35,8 +48,15 @@ export function PodEventRail({
       <div className="pod-event-list">
         {detailsLoading ? (
           <PodEventEmpty label="Syncing events" message="Waiting for Kubernetes event data." />
-        ) : events.length ? (
-          events.map((event, index) => <PodEventItem event={event} key={`${event.reason}-${event.age}-${index}`} />)
+        ) : linkedEvents.length ? (
+          linkedEvents.map(({ event, eventResource }, index) => (
+            <PodEventItem
+              event={event}
+              eventResource={eventResource}
+              key={`${event.reason}-${event.age}-${index}`}
+              onOpenResource={onOpenResource}
+            />
+          ))
         ) : (
           <PodEventEmpty label="No pod events" message={detailsError || "No warning or normal events returned."} />
         )}
@@ -45,12 +65,19 @@ export function PodEventRail({
   );
 }
 
-function PodEventItem({ event }: { event: ResourceEvent }) {
+function PodEventItem({
+  event,
+  eventResource,
+  onOpenResource,
+}: {
+  event: ResourceEvent;
+  eventResource?: ResourceRow;
+  onOpenResource?: (id: string, intent?: "logs" | null) => void;
+}) {
   const warning = isWarningEvent(event);
   const count = eventCount(event);
-
-  return (
-    <article className={warning ? "pod-event-item warning" : "pod-event-item"}>
+  const content = (
+    <>
       <i aria-hidden="true" />
       <div>
         <span>{event.type || "Normal"}</span>
@@ -61,6 +88,25 @@ function PodEventItem({ event }: { event: ResourceEvent }) {
       </div>
       <p>{event.message || event.age || "Event recorded."}</p>
       <time>{event.age || "live"}</time>
+    </>
+  );
+
+  if (eventResource && onOpenResource) {
+    return (
+      <button
+        className={warning ? "pod-event-item warning linked" : "pod-event-item linked"}
+        title={`Open Event ${eventResource.name}`}
+        type="button"
+        onClick={() => onOpenResource(eventResource.id)}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <article className={warning ? "pod-event-item warning" : "pod-event-item"}>
+      {content}
     </article>
   );
 }
@@ -101,3 +147,24 @@ function isWarningEvent(event: ResourceEvent) {
 function eventCount(event: ResourceEvent) {
   return Number.isFinite(event.count) && event.count > 0 ? event.count : 1;
 }
+
+function linkEventResources(events: ResourceEvent[], eventResources: ResourceRow[]) {
+  const unusedResources = [...eventResources];
+
+  return events.map((event) => {
+    const resourceIndex = unusedResources.findIndex((resource) =>
+      eventResourceType(resource).toLowerCase() === event.type.toLowerCase() &&
+      resource.diagnostic === event.reason
+    );
+    const eventResource = resourceIndex >= 0 ? unusedResources.splice(resourceIndex, 1)[0] : undefined;
+
+    return { event, eventResource };
+  });
+}
+
+function eventResourceType(resource: ResourceRow) {
+  if (resource.image) {
+    return resource.image;
+  }
+  return resource.status === "warning" ? "Warning" : "Normal";
+}

src/components/RelatedEventRail.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { Clock3 } from "lucide-react";
+import { compareEventResources, eventResourceTone, formatEventResourceAge, relatedEventResourcesFor } from "../lib/resourceEvents";
+import type { ResourceRow } from "../types/kube";
+import { StatusDot } from "./status";
+
+type RelatedEventRailProps = {
+  onOpenResource: (id: string, intent?: "logs" | null) => void;
+  resource: ResourceRow;
+  resources: ResourceRow[];
+};
+
+export function RelatedEventRail({ onOpenResource, resource, resources }: RelatedEventRailProps) {
+  const events = useMemo(() => relatedEventResourcesFor(resource, resources).sort(compareEventResources), [resource, resources]);
+
+  if (resource.kind === "Pod" || resource.kind === "Event" || !events.length) {
+    return null;
+  }
+
+  const visibleEvents = events.slice(0, 5);
+  const warningCount = events.filter((event) => event.status !== "healthy").length;
+  const tone = eventResourceTone(events);
+
+  return (
+    <section className={`workload-pod-rail service-backend-rail related-event-rail ${tone}`} aria-label="Related events">
+      <header>
+        <span>
+          <Clock3 size={15} />
+          Events
+        </span>
+        <strong>{warningCount ? `${warningCount}/${events.length} warning` : `${events.length} linked`}</strong>
+        <small>{formatEventResourceAge(events[0]?.age) || resource.namespace}</small>
+      </header>
+      <div>
+        {visibleEvents.map((event) => (
+          <button className={event.status} key={event.id} type="button" onClick={() => onOpenResource(event.id)}>
+            <StatusDot state={event.status} />
+            <strong title={event.diagnostic || event.name}>{event.diagnostic || event.name}</strong>
+            <em title={event.owner || event.name}>{event.owner || event.name}</em>
+            <small>{event.image || event.status}</small>
+            <small title={event.age}>{formatEventResourceAge(event.age)}</small>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

src/components/ResourceDetail.tsx

@@ -13,6 +13,7 @@ import { PodLifecycleRail } from "./PodLifecycleRail";
 import { PodLinkStrip } from "./PodLinkStrip";
 import { PodPlacementStrip } from "./PodPlacementStrip";
 import { PodTerminal, type LogMode } from "./PodTerminal";
+import { RelatedEventRail } from "./RelatedEventRail";
 import { StatusDot } from "./status";
 import { StorageBindingRail } from "./StorageBindingRail";
 
@@ -207,7 +208,14 @@ export function ResourceDetail({
 
       {isPod ? (
         <>
-          <PodEventRail details={details} detailsError={detailsError} detailsLoading={detailsLoading} />
+          <PodEventRail
+            details={details}
+            detailsError={detailsError}
+            detailsLoading={detailsLoading}
+            resource={resource}
+            resources={allResources}
+            onOpenResource={onOpenResource}
+          />
           <PodTerminal
             details={details}
             detailsError={detailsError}
@@ -230,6 +238,7 @@ export function ResourceDetail({
               onOpenResource={onOpenResource}
             />
           ) : null}
+          <RelatedEventRail resource={resource} resources={allResources} onOpenResource={onOpenResource} />
           <CrdDefinitionRail details={details} detailsLoading={detailsLoading} resource={resource} />
           <DependencyConsumerRail resource={resource} resources={allResources} onOpenResource={onOpenResource} />
           <NamespaceConstraintRail resource={resource} resources={allResources} onOpenResource={onOpenResource} />

src/lib/resourceEvents.ts

@@ -0,0 +1,69 @@
+import { referencesResource } from "./resourceRelationships";
+import type { HealthState, ResourceRow } from "../types/kube";
+
+export function relatedEventResourcesFor(resource: ResourceRow, resources: ResourceRow[]) {
+  return resources.filter((item) => item.kind === "Event" && referencesEventTarget(item, resource));
+}
+
+export function compareEventResources(left: ResourceRow, right: ResourceRow) {
+  return eventRank(left.status) - eventRank(right.status) ||
+    eventTimestamp(right.age) - eventTimestamp(left.age) ||
+    left.name.localeCompare(right.name);
+}
+
+export function eventResourceTone(events: ResourceRow[]): HealthState {
+  if (events.some((event) => event.status === "critical")) {
+    return "critical";
+  }
+  if (events.some((event) => event.status === "warning")) {
+    return "warning";
+  }
+  if (events.every((event) => event.status === "syncing")) {
+    return "syncing";
+  }
+  return "healthy";
+}
+
+export function formatEventResourceAge(age?: string) {
+  if (!age) {
+    return "";
+  }
+
+  const timestamp = Date.parse(age);
+  if (Number.isNaN(timestamp)) {
+    return age;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(timestamp);
+}
+
+function referencesEventTarget(event: ResourceRow, target: ResourceRow) {
+  return referencesResource(event, target) ||
+    target.namespace === "cluster" && event.references.some((reference) =>
+      reference.kind === target.kind &&
+      reference.name === target.name
+    );
+}
+
+function eventRank(status: HealthState) {
+  switch (status) {
+    case "critical":
+      return 0;
+    case "warning":
+      return 1;
+    case "syncing":
+      return 2;
+    case "healthy":
+      return 3;
+  }
+}
+
+function eventTimestamp(age: string) {
+  const timestamp = Date.parse(age);
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+}

src/styles/base.css

@@ -2015,6 +2015,20 @@ summary:focus-visible {
   border-block-end: 1px solid var(--line);
 }
 
+button.pod-event-item {
+  inline-size: 100%;
+  border-inline: 0;
+  border-block-start: 0;
+  color: inherit;
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
+
+button.pod-event-item:hover {
+  background: var(--surface-soft);
+}
+
 .pod-event-item:last-child {
   border-block-end: 0;
 }
@@ -2658,6 +2672,10 @@ summary:focus-visible {
   color: var(--green-deep);
 }
 
+.related-event-rail header svg {
+  color: var(--orange);
+}
+
 .network-policy-rail header svg {
   color: var(--orange);
 }