@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.21

package/src/components/features/insights/EventDetails.tsx

@@ -2,27 +2,48 @@ import {
   Activity,
   Check,
   ChevronDown,
-  PackageCheck,
+  CircleAlert,
+  Download,
   RotateCcw,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
 import { Badge } from "@/components/ui/badge";
+import { describeFailure } from "@/lib/insights-failures";
 import type { InsightsEventRow } from "@/lib/insights-view";
 
 type EventHistoryRow = InsightsEventRow;
 
 const eventTypes = {
-  UPDATE_APPLIED: { label: "Bundle applied", variant: "success", icon: Check },
-  RECOVERED: { label: "Recovered", variant: "warning", icon: RotateCcw },
-  RELEASE_ADOPTED: {
-    label: "Bundle adopted",
+  UPDATE_DOWNLOADED: {
+    label: "Downloaded",
+    description:
+      "Download complete. Waiting for the app to restart and apply it.",
+    variant: "default",
+    icon: Download,
+  },
+  UPDATE_APPLIED: {
+    label: "Update applied",
+    description: "The app started using the downloaded update.",
     variant: "success",
-    icon: PackageCheck,
+    icon: Check,
+  },
+  RECOVERED: {
+    label: "Recovered",
+    description: "Recovered from a crashed bundle.",
+    variant: "warning",
+    icon: RotateCcw,
+  },
+  UPDATE_FAILED: {
+    label: "Update failed",
+    description: "An update check, download, or install failed.",
+    variant: "destructive",
+    icon: CircleAlert,
   },
   UNCHANGED: {
-    label: "Activity reported",
+    label: "No change",
+    description: "No download or apply was reported at this point.",
     variant: "secondary",
     icon: Activity,
   },
@@ -92,28 +113,63 @@ export function EventTimestamp({
   );
 }
 
-export function EventTypeBadge({
-  type,
+const deliveries: Readonly<Record<string, string>> = {
+  patch: "A patch delivered it.",
+  manifest: "Only the changed files were downloaded.",
+  archive: "The full archive was downloaded.",
+};
+
+/** What the event's report added: where an update failed, how a bundle arrived, why a process exited. */
+const eventNote = (
+  event: Pick<
+    EventHistoryRow,
+    "type" | "failure" | "delivery" | "patchFallback" | "previousProcessExit"
+  >,
+): string | null => {
+  if (event.type === "UPDATE_FAILED" && event.failure) {
+    return describeFailure(event.failure);
+  }
+  if (event.type === "UPDATE_DOWNLOADED" && event.delivery) {
+    const delivered = deliveries[event.delivery] ?? null;
+    return event.patchFallback
+      ? `The patch failed. ${delivered ?? ""}`.trim()
+      : delivered;
+  }
+  if (event.type === "RECOVERED" && event.previousProcessExit) {
+    return `The crashed process exited with ${event.previousProcessExit}.`;
+  }
+  return null;
+};
+
+export function EventTypeDetails({
+  event,
 }: {
-  readonly type: EventHistoryRow["type"];
+  readonly event: Pick<
+    EventHistoryRow,
+    "type" | "failure" | "delivery" | "patchFallback" | "previousProcessExit"
+  >;
 }) {
-  const eventType = eventTypes[type];
+  const eventType = eventTypes[event.type];
   const Icon = eventType.icon;
+  const note = eventNote(event);
   return (
-    <Badge
-      variant={eventType.variant}
-      className="gap-1 whitespace-nowrap [&_svg]:size-3"
-      title={
-        type === "UNCHANGED"
-          ? "App activity reported on the current bundle without a bundle transition."
-          : type === "RELEASE_ADOPTED"
-            ? "A different release was adopted without changing the bundle."
-            : undefined
-      }
-    >
-      <Icon aria-hidden="true" />
-      {eventType.label}
-    </Badge>
+    <div className="flex min-w-0 flex-col items-start gap-2">
+      <Badge
+        variant={eventType.variant}
+        className="gap-1 whitespace-nowrap [&_svg]:size-3"
+      >
+        <Icon aria-hidden="true" />
+        {eventType.label}
+      </Badge>
+      <p className="max-w-56 whitespace-normal text-xs text-muted-foreground">
+        {event.type === "UPDATE_FAILED" && note ? note : eventType.description}
+      </p>
+      {event.type !== "UPDATE_FAILED" && note ? (
+        <p className="max-w-56 whitespace-normal text-xs text-muted-foreground">
+          {note}
+        </p>
+      ) : null}
+    </div>
   );
 }
 
@@ -121,14 +177,28 @@ export function EventBundleTransition({
   event,
   touch = false,
 }: {
-  readonly event: Pick<EventHistoryRow, "type" | "fromBundleId" | "toBundleId">;
+  readonly event: Pick<
+    EventHistoryRow,
+    "type" | "fromBundleId" | "toBundleId" | "failure"
+  >;
   readonly touch?: boolean;
 }) {
+  const downloaded = event.type === "UPDATE_DOWNLOADED";
+  const failed = event.type === "UPDATE_FAILED";
+  // A failed check targets no bundle: it names the one running.
+  const targeted = !failed || event.failure?.stage !== "check";
+  const changed =
+    downloaded ||
+    failed ||
+    event.type === "UPDATE_APPLIED" ||
+    event.type === "RECOVERED";
   return (
     <dl className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2 gap-y-2">
-      {event.fromBundleId ? (
+      {event.fromBundleId && changed ? (
         <>
-          <dt className="text-muted-foreground">From</dt>
+          <dt className="text-muted-foreground">
+            {downloaded || failed ? "Running" : "From"}
+          </dt>
           <dd>
             <HashValueDisplay
               value={event.fromBundleId}
@@ -137,15 +207,25 @@ export function EventBundleTransition({
           </dd>
         </>
       ) : null}
-      <dt className="text-muted-foreground">
-        {event.type === "UNCHANGED" ? "Current" : "To"}
-      </dt>
-      <dd>
-        <HashValueDisplay
-          value={event.toBundleId}
-          buttonClassName={touch ? "min-h-11 px-3" : undefined}
-        />
-      </dd>
+      {targeted ? (
+        <>
+          <dt className="text-muted-foreground">
+            {downloaded
+              ? "Pending"
+              : failed
+                ? "Target"
+                : changed
+                  ? "To"
+                  : "Current"}
+          </dt>
+          <dd>
+            <HashValueDisplay
+              value={event.toBundleId}
+              buttonClassName={touch ? "min-h-11 px-3" : undefined}
+            />
+          </dd>
+        </>
+      ) : null}
     </dl>
   );
 }

package/src/components/features/insights/EventHistoryCard.tsx

@@ -4,7 +4,13 @@ import type { ReactNode } from "react";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
@@ -14,23 +20,39 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import type { InsightsEventRow, InsightsViewPage } from "@/lib/insights-view";
+import {
+  EVENT_RANGES,
+  type EventRange,
+  eventRanges,
+  type InsightsEventRow,
+  type InsightsViewPage,
+  widerEventRange,
+} from "@/lib/insights-view";
 
 import {
   EventBundleTransition,
   EventTimestamp,
-  EventTypeBadge,
+  EventTypeDetails,
   useInsightsTimeFormat,
 } from "./EventDetails";
 import { EventHistoryList } from "./EventHistoryList";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 import { InsightsPagination } from "./InsightsPagination";
+import { PeriodSelector } from "./InsightsPeriodSelector";
 
 type EventsLocationState = {
   readonly eventsBefore: number;
   readonly eventsCursor?: string;
+  readonly eventsRange?: EventRange;
 };
 
+/** The ranges within the days raw events are kept, the shortest always. */
+const rangesWithin = (days: number) =>
+  EVENT_RANGES.filter(
+    (value, position) =>
+      position === 0 || eventRanges[value].durationMs <= days * 86_400_000,
+  );
+
 function EventIdentity({
   event,
   eventsLocation,
@@ -62,12 +84,17 @@ function EventIdentity({
           query: event.installId || undefined,
           installId: event.installId,
         }}
-        aria-label={`View history for ${event.userId ?? event.username ?? "anonymous installation"} (${event.installId})`}
+        state={(previous) => ({
+          insightsPagination: {
+            eventsBack: previous.insightsPagination?.eventsBack,
+          },
+        })}
+        aria-label={`View history for ${event.userId ?? "anonymous installation"} (${event.installId})`}
       >
         <span
           className={touch ? "min-w-0 text-left wrap-anywhere" : "truncate"}
         >
-          {event.userId ?? event.username ?? "Anonymous installation"}
+          {event.userId ?? "Anonymous installation"}
         </span>
         <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
       </Link>
@@ -82,6 +109,7 @@ function EventIdentity({
 
 export function EventHistoryCard({
   children,
+  description,
   error,
   eventsLocation,
   history,
@@ -89,11 +117,16 @@ export function EventHistoryCard({
   isLoading,
   onNext,
   onPrevious,
+  onRangeChange,
   onRefresh,
   pageNumber,
+  range,
+  rawDays = 90,
   title = "All events",
 }: {
   readonly children?: ReactNode;
+  /** One line under the title that says what the list holds. */
+  readonly description?: ReactNode;
   readonly error: Error | null;
   readonly eventsLocation: EventsLocationState;
   readonly history: InsightsViewPage<InsightsEventRow> | undefined;
@@ -101,30 +134,68 @@ export function EventHistoryCard({
   readonly isLoading: boolean;
   readonly onNext: () => void;
   readonly onPrevious: () => void;
+  /** Lets the list change its range; a list with a fixed window leaves it out. */
+  readonly onRangeChange?: (range: EventRange) => void;
   readonly onRefresh: () => void;
   readonly pageNumber: number;
+  /** The time range the list reads, named by its empty and end states. */
+  readonly range?: EventRange;
+  /** How long the server keeps raw events: the longest range offered. */
+  readonly rawDays?: number;
   readonly title?: string;
 }) {
   const dateTimeFormat = useInsightsTimeFormat();
   const hasPrevious = pageNumber > 1;
+  const ranges = rangesWithin(rawDays);
+  const next = range === undefined ? undefined : widerEventRange(range);
+  const wider = next !== undefined && ranges.includes(next) ? next : undefined;
+  const widen =
+    wider !== undefined && onRangeChange ? (
+      <Button
+        className="h-11 px-3 lg:h-8"
+        onClick={() => onRangeChange(wider)}
+        type="button"
+        variant="outline"
+      >
+        {`Show the last ${eventRanges[wider].period}`}
+      </Button>
+    ) : null;
 
   return (
     <Card className="@container min-w-0 shadow-sm" aria-busy={isFetching}>
       <CardHeader className="gap-4 p-4 sm:p-6">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <CardTitle>
-            <h2>{title}</h2>
-          </CardTitle>
-          <Button
-            className="h-11 lg:h-8"
-            disabled={isFetching}
-            onClick={onRefresh}
-            size="lg"
-            variant="outline"
-          >
-            <RefreshCw aria-hidden="true" data-icon="inline-start" />
-            Refresh
-          </Button>
+        <div className="flex flex-col gap-1.5">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <CardTitle>
+              <h2>{title}</h2>
+            </CardTitle>
+            <div className="flex flex-wrap items-center gap-2">
+              {range !== undefined && onRangeChange ? (
+                <PeriodSelector
+                  label="Time range"
+                  onPeriodChange={onRangeChange}
+                  period={range}
+                  periods={ranges.map((value) => ({
+                    value,
+                    name: `Last ${eventRanges[value].period}`,
+                  }))}
+                />
+              ) : null}
+              <Button
+                className="h-11 lg:h-8"
+                disabled={isFetching}
+                onClick={onRefresh}
+                size="lg"
+                variant="outline"
+              >
+                <RefreshCw aria-hidden="true" data-icon="inline-start" />
+                Refresh
+              </Button>
+            </div>
+          </div>
+          {description ? (
+            <CardDescription>{description}</CardDescription>
+          ) : null}
         </div>
         {children}
       </CardHeader>
@@ -189,7 +260,7 @@ export function EventHistoryCard({
                             />
                           </TableCell>
                           <TableCell>
-                            <EventTypeBadge type={event.type} />
+                            <EventTypeDetails event={event} />
                           </TableCell>
                           <TableCell>
                             <EventIdentity
@@ -218,14 +289,29 @@ export function EventHistoryCard({
                 </div>
               </>
             ) : (
-              <div className="px-6 pb-6 text-sm text-muted-foreground">
-                {hasPrevious || history.nextCursor
-                  ? "No events on this page"
-                  : title === "All events"
-                    ? "No events recorded yet"
-                    : "No matching reports in this period"}
+              <div className="flex flex-wrap items-center justify-between gap-3 px-4 pb-4 sm:px-6 sm:pb-6">
+                <p className="text-sm text-muted-foreground">
+                  {hasPrevious
+                    ? "No older events in this range."
+                    : range !== undefined
+                      ? `No events in the last ${eventRanges[range].period}.`
+                      : title === "All events"
+                        ? "No events recorded yet"
+                        : "No matching reports in this period"}
+                </p>
+                {hasPrevious ? null : widen}
               </div>
             )}
+            {range !== undefined &&
+            history.nextCursor === null &&
+            (history.data.length > 0 || hasPrevious) ? (
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 sm:px-6">
+                <p className="text-sm text-muted-foreground">
+                  Start of range reached
+                </p>
+                {widen}
+              </div>
+            ) : null}
             {history.data.length > 0 || hasPrevious || history.nextCursor ? (
               <InsightsPagination
                 hasPrevious={hasPrevious}

package/src/components/features/insights/EventHistoryList.tsx

@@ -5,7 +5,7 @@ import type { InsightsEventRow } from "@/lib/insights-view";
 import {
   EventBundleTransition,
   EventTimestamp,
-  EventTypeBadge,
+  EventTypeDetails,
 } from "./EventDetails";
 
 export function EventHistoryList<T extends InsightsEventRow>({
@@ -29,7 +29,7 @@ export function EventHistoryList<T extends InsightsEventRow>({
             className="flex min-w-0 flex-col gap-3 px-4 py-4 sm:px-6"
           >
             <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
-              <EventTypeBadge type={event.type} />
+              <EventTypeDetails event={event} />
               <div className="text-xs tabular-nums">
                 <EventTimestamp
                   value={event.receivedAtMs}