@hot-updater/console 1.0.0-rc.8 → 1.0.0

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

@@ -1,33 +1,152 @@
-import { Activity, Check, ChevronDown, RotateCcw } from "lucide-react";
+import {
+  Activity,
+  ArrowRightLeft,
+  Check,
+  ChevronDown,
+  CircleAlert,
+  Copy,
+  Download,
+  RotateCcw,
+  Smartphone,
+  Sparkles,
+} from "lucide-react";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { describeFailure } from "@/lib/insights-failures";
 import type { InsightsEventRow } from "@/lib/insights-view";
 
+import { BuiltinBundleBadge, isBuiltinBundle } from "./BuiltinBundle";
+
 type EventHistoryRow = InsightsEventRow;
 
 const eventTypes = {
+  UPDATE_DOWNLOADED: {
+    label: "Downloaded",
+    description: "Downloaded. It launches when the app restarts.",
+    variant: "default",
+    icon: Download,
+  },
   UPDATE_APPLIED: {
-    label: "Update applied",
-    description: "The app started using the downloaded update.",
+    label: "Launched",
+    description: "The app restarted into the downloaded bundle.",
     variant: "success",
     icon: Check,
   },
   RECOVERED: {
-    label: "Rolled back",
-    description: "The app recovered to a previous working bundle.",
+    label: "Crashed",
+    description: "Crashed on the bundle and rolled back.",
     variant: "warning",
     icon: RotateCcw,
   },
+  UPDATE_FAILED: {
+    label: "Update failed",
+    description: "An update check, download, or install failed.",
+    variant: "destructive",
+    icon: CircleAlert,
+  },
   UNCHANGED: {
-    label: "No change",
-    description: "The app continues using the same bundle files.",
+    label: "Launch",
+    description: "The app launched; the report changed nothing.",
     variant: "secondary",
     icon: Activity,
   },
 } as const;
 
+type EventType = {
+  readonly label: string;
+  readonly description: string;
+  readonly variant: (typeof eventTypes)[keyof typeof eventTypes]["variant"];
+  readonly icon: (typeof eventTypes)[keyof typeof eventTypes]["icon"];
+};
+
+/**
+ * A kept UNCHANGED report, named by what it changed: an installation first
+ * seen, an App Store update, a launch with no apply report, an adopted
+ * release, or a channel switch.
+ */
+const changeTypeOf = (
+  event: Pick<EventHistoryRow, "change" | "appVersion" | "channel">,
+): EventType => {
+  const { kinds = [], previous } = event.change ?? {};
+  if (kinds.includes("first_seen")) {
+    return {
+      label: "First seen",
+      description: "The installation's first report to this server.",
+      variant: "secondary",
+      icon: Sparkles,
+    };
+  }
+  if (kinds.includes("app_version") || kinds.includes("native_build")) {
+    return {
+      label: "App updated",
+      description:
+        previous && previous.appVersion !== event.appVersion
+          ? `From app ${previous.appVersion} to ${event.appVersion}.`
+          : "A new build of the same app version.",
+      variant: "secondary",
+      icon: Smartphone,
+    };
+  }
+  if (kinds.includes("bundle")) {
+    return {
+      label: "Launched",
+      description:
+        "Seen running this bundle; the report of the restart into it never arrived.",
+      variant: "success",
+      icon: Check,
+    };
+  }
+  if (kinds.includes("release")) {
+    return {
+      label: "Release adopted",
+      description: "The bundle it runs now ships under another release.",
+      variant: "secondary",
+      icon: ArrowRightLeft,
+    };
+  }
+  if (kinds.includes("channel")) {
+    return {
+      label: "Channel changed",
+      description: previous
+        ? `From ${previous.channel} to ${event.channel}.`
+        : "It reports on another channel.",
+      variant: "secondary",
+      icon: ArrowRightLeft,
+    };
+  }
+  return eventTypes.UNCHANGED;
+};
+
+/** How the console names an event's type. */
+const eventTypeOf = (
+  event: Pick<EventHistoryRow, "type"> & Partial<EventHistoryRow>,
+): EventType =>
+  event.type === "UNCHANGED" && event.change
+    ? changeTypeOf({
+        change: event.change,
+        appVersion: event.appVersion ?? "",
+        channel: event.channel ?? "",
+      })
+    : eventTypes[event.type];
+
 export function useInsightsTimeFormat() {
   const [timeZone, setTimeZone] = useState("UTC");
   useEffect(() => {
@@ -92,13 +211,198 @@ export function EventTimestamp({
   );
 }
 
-export function EventTypeDetails({
-  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, or how a bundle arrived. */
+const eventNote = (
+  event: Pick<
+    EventHistoryRow,
+    | "type"
+    | "failure"
+    | "delivery"
+    | "patchFallback"
+    | "httpResponse"
+    | "late"
+    | "impliedDownload"
+  >,
+): string | null => {
+  if (event.late) {
+    return "Counted nothing: the installation had already downloaded or run this bundle.";
+  }
+  if (event.impliedDownload) {
+    return "Its download report never arrived; the download counted with it.";
+  }
+  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;
+  }
+  return null;
+};
+
+type EventDetail = Pick<EventHistoryRow, "type"> & Partial<EventHistoryRow>;
+
+export function HttpResponseBody({
+  response,
+}: {
+  readonly response: NonNullable<EventHistoryRow["httpResponse"]>;
+}) {
+  const copyBody = async () => {
+    try {
+      await navigator.clipboard.writeText(response.body!);
+      toast.success("Response body copied");
+    } catch {
+      toast.error("Could not copy the response body");
+    }
+  };
+  return (
+    <section aria-label="Response body" className="flex min-w-0 flex-col gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h3 className="text-sm font-medium">Response body</h3>
+        <Button
+          variant="outline"
+          className="min-h-11"
+          disabled={response.body === null || response.body === ""}
+          onClick={() => void copyBody()}
+        >
+          <Copy aria-hidden="true" data-icon="inline-start" /> Copy body
+        </Button>
+      </div>
+      {response.bodyTruncated ? (
+        <p className="text-xs text-muted-foreground">
+          Truncated to the 4 KiB reporting limit. Copy includes only the stored
+          text.
+        </p>
+      ) : null}
+      {response.body ? (
+        <pre className="rounded-md border bg-muted/30 p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap wrap-anywhere">
+          {response.body}
+        </pre>
+      ) : (
+        <Empty>
+          <EmptyHeader>
+            <EmptyTitle>
+              {response.body === null
+                ? "Response body unavailable"
+                : "Empty response body"}
+            </EmptyTitle>
+            <EmptyDescription>
+              {response.body === null
+                ? "The client received the HTTP status but could not read the body."
+                : response.status === 304
+                  ? "The server returned no body. The client can reuse its cached catalog."
+                  : "The server returned no text in this response."}
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+    </section>
+  );
+}
+
+export function HttpResponseDetails({
+  event,
 }: {
-  readonly type: EventHistoryRow["type"];
+  readonly event: Partial<EventHistoryRow>;
 }) {
-  const eventType = eventTypes[type];
+  const response = event.httpResponse!;
+  const formatter = useInsightsTimeFormat();
+  const status =
+    response.status === 304
+      ? "Not modified"
+      : response.status >= 500
+        ? "Server error"
+        : response.status >= 400
+          ? "Request error"
+          : response.status >= 300
+            ? "Redirect"
+            : "Success";
+  const resource = response.resource === "catalog" ? "Catalog" : "Artifact";
+  const context = [
+    [
+      "App",
+      event.platform &&
+        `${event.platform === "ios" ? "iOS" : "Android"} ${event.appVersion}`,
+    ],
+    ["Channel", event.channel],
+    ["SDK", event.sdkVersion],
+    ["Installation", event.installId],
+  ].filter(([, value]) => value != null);
+  return (
+    <Sheet>
+      <SheetTrigger
+        aria-label={`View ${resource.toLowerCase()} response: HTTP ${response.status}`}
+        render={
+          <Button
+            variant="ghost"
+            className="-ml-2 h-auto min-h-11 justify-start"
+          />
+        }
+      >
+        <Badge variant={response.status >= 400 ? "destructive" : "secondary"}>
+          HTTP {response.status}
+        </Badge>
+        <span>{resource} response</span>
+      </SheetTrigger>
+      <SheetContent className="data-[side=right]:w-full data-[side=right]:sm:max-w-2xl">
+        <SheetHeader className="border-b pr-14">
+          <SheetTitle>HTTP response</SheetTitle>
+          <SheetDescription>
+            {resource} · HTTP {response.status} · {status}. Most recent response
+            available when this report was created.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-6">
+          <section aria-label="Request" className="flex min-w-0 flex-col gap-2">
+            <h3 className="text-sm font-medium">Request</h3>
+            <p className="font-mono text-xs leading-relaxed whitespace-pre-wrap wrap-anywhere">
+              GET {response.path}
+            </p>
+            {response.receivedAtMs != null ? (
+              <div className="text-xs text-muted-foreground">
+                Response received{" "}
+                <EventTimestamp
+                  value={response.receivedAtMs}
+                  formatter={formatter}
+                />
+              </div>
+            ) : null}
+          </section>
+          <HttpResponseBody response={response} />
+          {context.length ? (
+            <section
+              aria-label="Response context"
+              className="flex flex-col gap-3"
+            >
+              <h3 className="text-sm font-medium">Response context</h3>
+              <dl className="grid grid-cols-2 gap-x-6 gap-y-4">
+                {context.map(([label, value]) => (
+                  <div key={label} className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">{label}</dt>
+                    <dd className="mt-1 text-sm wrap-anywhere">{value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export function EventTypeDetails({ event }: { readonly event: EventDetail }) {
+  const eventType = eventTypeOf(event);
   const Icon = eventType.icon;
+  const note = eventNote(event);
   return (
     <div className="flex min-w-0 flex-col items-start gap-2">
       <Badge
@@ -108,9 +412,25 @@ export function EventTypeDetails({
         <Icon aria-hidden="true" />
         {eventType.label}
       </Badge>
-      <p className="max-w-56 whitespace-normal text-xs text-muted-foreground">
-        {eventType.description}
+      <p className="max-w-56 whitespace-pre-wrap wrap-anywhere text-xs text-muted-foreground">
+        {event.type === "UPDATE_FAILED" && note ? note : eventType.description}
       </p>
+      {event.httpResponse ? <HttpResponseDetails event={event} /> : null}
+      {event.type === "UPDATE_FAILED" && event.failure?.errorStack ? (
+        <details className="w-full max-w-56 text-xs">
+          <summary className="cursor-pointer text-muted-foreground">
+            Stack trace
+          </summary>
+          <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap wrap-anywhere font-mono">
+            {event.failure.errorStack}
+          </pre>
+        </details>
+      ) : null}
+      {event.type !== "UPDATE_FAILED" && note ? (
+        <p className="max-w-56 whitespace-normal text-xs text-muted-foreground">
+          {note}
+        </p>
+      ) : null}
     </div>
   );
 }
@@ -119,30 +439,74 @@ export function EventBundleTransition({
   event,
   touch = false,
 }: {
-  readonly event: Pick<EventHistoryRow, "type" | "fromBundleId" | "toBundleId">;
+  readonly event: Pick<
+    EventHistoryRow,
+    "type" | "fromBundleId" | "toBundleId" | "failure" | "minBundleId"
+  > &
+    Partial<Pick<EventHistoryRow, "change">>;
   readonly touch?: boolean;
 }) {
-  const changed = event.type === "UPDATE_APPLIED" || event.type === "RECOVERED";
+  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";
+  // A kept UNCHANGED report that moved bundles names the one before it.
+  const moved =
+    event.type === "UNCHANGED" &&
+    event.change?.kinds.includes("bundle") === true &&
+    event.change.previous !== undefined;
+  const fromBundleId = moved
+    ? event.change!.previous!.bundleId
+    : event.fromBundleId;
+  const changed =
+    downloaded ||
+    failed ||
+    moved ||
+    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 && changed ? (
+      {fromBundleId && changed ? (
+        <>
+          <dt className="text-muted-foreground">
+            {downloaded || failed ? "Running" : "From"}
+          </dt>
+          <dd className="flex min-w-0 flex-wrap items-center gap-2">
+            <HashValueDisplay
+              value={fromBundleId}
+              buttonClassName={touch ? "min-h-11 px-3" : undefined}
+            />
+            {isBuiltinBundle(
+              fromBundleId,
+              moved ? event.change!.previous!.minBundleId : event.minBundleId,
+            ) ? (
+              <BuiltinBundleBadge />
+            ) : null}
+          </dd>
+        </>
+      ) : null}
+      {targeted ? (
         <>
-          <dt className="text-muted-foreground">From</dt>
-          <dd>
+          <dt className="text-muted-foreground">
+            {downloaded
+              ? "Pending"
+              : failed
+                ? "Target"
+                : changed
+                  ? "To"
+                  : "Current"}
+          </dt>
+          <dd className="flex min-w-0 flex-wrap items-center gap-2">
             <HashValueDisplay
-              value={event.fromBundleId}
+              value={event.toBundleId}
               buttonClassName={touch ? "min-h-11 px-3" : undefined}
             />
+            {isBuiltinBundle(event.toBundleId, event.minBundleId) ? (
+              <BuiltinBundleBadge />
+            ) : null}
           </dd>
         </>
       ) : null}
-      <dt className="text-muted-foreground">{changed ? "To" : "Current"}</dt>
-      <dd>
-        <HashValueDisplay
-          value={event.toBundleId}
-          buttonClassName={touch ? "min-h-11 px-3" : undefined}
-        />
-      </dd>
     </dl>
   );
 }