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

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

@@ -2,7 +2,13 @@ import { RefreshCw } from "lucide-react";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -13,6 +19,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  DEFAULT_INSIGHTS_RETENTION,
+  formatDays,
+  type InsightsRetentionDays,
+} from "@/lib/insights-retention";
 import type {
   InsightsEventRow,
   InsightsInstallationViewRow,
@@ -22,24 +33,25 @@ import type {
 import {
   EventBundleTransition,
   EventTimestamp,
-  EventTypeBadge,
+  EventTypeDetails,
   useInsightsTimeFormat,
 } from "./EventDetails";
 import { EventHistoryList } from "./EventHistoryList";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 import { InsightsPagination } from "./InsightsPagination";
 
-const getUserLabel = (event: {
-  readonly username: string | null;
-  readonly userId: string | null;
-}) => event.userId ?? event.username ?? "—";
+const getUserLabel = (event: { readonly userId: string | null }) =>
+  event.userId ?? "—";
 
+/** A download or a failed update leaves the installation on the bundle it ran. */
 const getLastKnownBundleId = (
   event: InsightsEventRow | InsightsInstallationViewRow,
 ) =>
   "lastKnownBundleId" in event
     ? event.lastKnownBundleId
-    : (event.toBundleId ?? event.fromBundleId);
+    : event.type === "UPDATE_DOWNLOADED" || event.type === "UPDATE_FAILED"
+      ? event.fromBundleId
+      : event.toBundleId;
 
 export function InstallationHistoryCard({
   error,
@@ -49,6 +61,7 @@ export function InstallationHistoryCard({
   onPrevious,
   onRefresh,
   pageNumber,
+  retention = DEFAULT_INSIGHTS_RETENTION,
   selectedEvent,
   selectedInstallId,
 }: {
@@ -59,6 +72,8 @@ export function InstallationHistoryCard({
   readonly onNext: () => void;
   readonly onPrevious: () => void;
   readonly pageNumber: number;
+  /** How long the server keeps Insights rows. */
+  readonly retention?: InsightsRetentionDays;
   readonly selectedEvent:
     | InsightsEventRow
     | InsightsInstallationViewRow
@@ -70,6 +85,15 @@ export function InstallationHistoryCard({
     ? getLastKnownBundleId(selectedEvent)
     : undefined;
 
+  const pendingBundleId =
+    selectedEvent && "pendingBundleId" in selectedEvent
+      ? selectedEvent.pendingBundleId
+      : selectedEvent &&
+          "type" in selectedEvent &&
+          selectedEvent.type === "UPDATE_DOWNLOADED"
+        ? selectedEvent.toBundleId
+        : null;
+
   return (
     <Card className="@container min-h-0 min-w-0 shadow-sm">
       <CardHeader className="p-4 sm:p-6">
@@ -82,6 +106,14 @@ export function InstallationHistoryCard({
                   : "Select an installation"}
               </h2>
             </CardTitle>
+            {selectedInstallId !== undefined ? (
+              <CardDescription>
+                Bundle changes and update failures are kept for{" "}
+                {formatDays(retention.rawDays)}; the latest report, for{" "}
+                {formatDays(retention.dailyDays)} after the installation last
+                reports.
+              </CardDescription>
+            ) : null}
           </div>
           {onRefresh && selectedInstallId !== undefined ? (
             <Button
@@ -138,6 +170,16 @@ export function InstallationHistoryCard({
                     )}
                   </dd>
                 </div>
+                {pendingBundleId ? (
+                  <div className="col-span-2 min-w-0">
+                    <dt className="text-xs text-muted-foreground">
+                      Downloaded · Pending apply
+                    </dt>
+                    <dd className="mt-1 text-xs">
+                      <HashValueDisplay value={pendingBundleId} />
+                    </dd>
+                  </div>
+                ) : null}
               </dl>
             </section>
             <Separator />
@@ -192,7 +234,7 @@ export function InstallationHistoryCard({
                           />
                         </TableCell>
                         <TableCell>
-                          <EventTypeBadge type={event.type} />
+                          <EventTypeDetails event={event} />
                         </TableCell>
                         <TableCell className="whitespace-normal text-xs">
                           <div className="flex flex-col gap-2">
@@ -226,8 +268,8 @@ export function InstallationHistoryCard({
           ) : (
             <>
               <div className="p-6 text-sm text-muted-foreground">
-                {pageNumber > 1 || history?.nextCursor
-                  ? "No bundle changes on this page."
+                {pageNumber > 1
+                  ? "No older bundle changes."
                   : "No bundle changes recorded yet."}
               </div>
               {history && (pageNumber > 1 || history.nextCursor) ? (

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

@@ -17,7 +17,7 @@ const getLastKnownBundleId = (event: InsightsInstallationViewRow) =>
   event.lastKnownBundleId;
 
 const getUserLabel = (event: InsightsInstallationViewRow) =>
-  event.userId ?? event.username ?? "—";
+  event.userId ?? "—";
 
 export function InstallationMatchesCard({
   error,

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

@@ -0,0 +1,188 @@
+import { Link } from "@tanstack/react-router";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type {
+  BundleActivityInput,
+  BundleActivityReport,
+} from "@/lib/bundle-activity";
+import { useBundleActivityQuery } from "@/lib/bundle-activity";
+import { useConsoleFeature } from "@/lib/console-features-api";
+import { useUpdateFailuresQuery } from "@/lib/insights-api";
+import { failureRate, formatRate } from "@/lib/insights-failures";
+
+import type { ReleaseColumn } from "../FeatureSlots";
+import { InsightsInfo } from "./InsightsInfo";
+
+const crashRate = (report: BundleActivityReport): string => {
+  const attempts = report.activeDays + report.failedLaunches;
+  return attempts === 0
+    ? "—"
+    : `${((report.failedLaunches / attempts) * 100).toFixed(2)}%`;
+};
+
+export function BundleMovementSummary({
+  report,
+  loading = false,
+  input,
+}: {
+  readonly report?: BundleActivityReport;
+  readonly loading?: boolean;
+  readonly input?: BundleActivityInput;
+}) {
+  if (!report) {
+    return loading ? (
+      <Skeleton aria-label="Loading release insights" className="h-4 w-40" />
+    ) : (
+      <span aria-label="Release insights unavailable">—</span>
+    );
+  }
+  const metrics = (
+    <span className="flex min-w-[220px] flex-wrap items-baseline gap-x-3 gap-y-1 text-sm">
+      <span>Downloads {report.downloads.toLocaleString()}</span>
+      <span>Active days {report.activeDays.toLocaleString()}</span>
+      <span>
+        Known crashes {report.failedLaunches.toLocaleString()} (
+        {crashRate(report)})
+      </span>
+      {report.coverage.kind === "partial" ? (
+        <span className="text-xs text-muted-foreground">Partial</span>
+      ) : null}
+    </span>
+  );
+  return (
+    <span className="flex items-center gap-1">
+      {input ? (
+        <Link
+          className="rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          to="/insights"
+          search={{
+            healthPlatform: input.platform,
+            healthChannel: input.channel,
+            releaseId: input.releaseId,
+            bundleWindow: "7d",
+          }}
+        >
+          {metrics}
+        </Link>
+      ) : (
+        metrics
+      )}
+      <InsightsInfo label="About release insight metrics">
+        Active days count each installation once for each UTC day it launched
+        this release. Known crashes are reported OTA launch failures that
+        triggered recovery. The rate is known crashes divided by active days
+        plus known crashes.
+      </InsightsInfo>
+    </span>
+  );
+}
+
+/** The release's failed downloads and installs since its first report, and their rate. */
+export function BundleDownloadFailures({
+  input,
+}: {
+  readonly input: BundleActivityInput;
+}) {
+  const query = useUpdateFailuresQuery({
+    platform: input.platform,
+    channel: input.channel,
+    releaseId: input.releaseId,
+  });
+  const report = query.data;
+  return (
+    <span className="flex items-center gap-1 text-sm">
+      {report ? (
+        <span>
+          Download failures {report.failedUpdates.toLocaleString()} (
+          {formatRate(failureRate(report))})
+        </span>
+      ) : query.isPending ? (
+        <Skeleton aria-label="Loading download failures" className="h-4 w-40" />
+      ) : (
+        <span aria-label="Download failures unavailable">—</span>
+      )}
+      <InsightsInfo label="About download failures">
+        Reported failures to download or install this release, since its first
+        report; each client reports one at most once a UTC day. The rate is the
+        failure rate of update attempts: failures divided by failures plus
+        download reports.
+      </InsightsInfo>
+    </span>
+  );
+}
+
+/** The bundle detail's Insights card, a section of the release editor: activity and download failures. */
+export function BundleInsightsSummary({
+  input,
+}: {
+  readonly input: BundleActivityInput;
+}) {
+  const query = useBundleActivityQuery([input]);
+  return (
+    <Card>
+      <CardHeader className="px-4 pt-4 pb-3">
+        <CardTitle className="text-sm font-medium">Insights</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2 px-4 pb-4">
+        <BundleMovementSummary
+          input={input}
+          loading={query.isFetching}
+          report={query.data?.[input.releaseId]}
+        />
+        <BundleDownloadFailures input={input} />
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * The release editor's Insights card where the console reads no release
+ * activity, as through a self-hosted server's admin API: download failures
+ * alone. With release activity, its card shows them.
+ */
+export function ReleaseFailuresSection({
+  input,
+}: {
+  readonly input: BundleActivityInput;
+}) {
+  const activity = useConsoleFeature("insightsAnalytics");
+  if (activity) return null;
+  return (
+    <Card>
+      <CardHeader className="px-4 pt-4 pb-3">
+        <CardTitle className="text-sm font-medium">Insights</CardTitle>
+      </CardHeader>
+      <CardContent className="px-4 pb-4">
+        <BundleDownloadFailures input={input} />
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * One release's activity in the Bundles page's Insights column. Every cell
+ * asks for the page's releases under one query key, so the page makes one
+ * request.
+ */
+function ReleaseActivityCell({
+  releaseId,
+  releases,
+}: {
+  readonly releaseId: string;
+  readonly releases: readonly BundleActivityInput[];
+}) {
+  const query = useBundleActivityQuery(releases);
+  return (
+    <BundleMovementSummary
+      input={releases.find((release) => release.releaseId === releaseId)}
+      loading={query.isFetching}
+      report={query.data?.[releaseId]}
+    />
+  );
+}
+
+/** The Bundles page's Insights column: each release's downloads, active days, and crashes. */
+export const releaseActivityColumn: ReleaseColumn = {
+  Cell: ReleaseActivityCell,
+};

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

@@ -0,0 +1,65 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  DEFAULT_INSIGHTS_RETENTION,
+  formatDays,
+  type InsightsRetentionDays,
+} from "@/lib/insights-retention";
+import { usageMetrics, type UsageWindow } from "@/lib/insights-usage";
+
+import { EstimatedCount } from "./EstimatedCount";
+import { InsightsInfo } from "./InsightsInfo";
+
+export function ReportingDevicesSummary({
+  window,
+  count,
+  isPending,
+  partial,
+  retention = DEFAULT_INSIGHTS_RETENTION,
+}: {
+  readonly window: UsageWindow;
+  readonly count: number | undefined;
+  readonly isPending: boolean;
+  readonly partial: boolean;
+  readonly retention?: InsightsRetentionDays;
+}) {
+  const metric = usageMetrics[window];
+  return (
+    <div
+      aria-label={`${metric.label} over ${metric.period}`}
+      role="region"
+      className="flex items-center gap-3"
+    >
+      {isPending ? (
+        <Skeleton aria-label="Loading active users" className="h-9 w-12" />
+      ) : (
+        <p className="text-4xl font-semibold tracking-tight tabular-nums">
+          {count === undefined ? (
+            "—"
+          ) : partial ? (
+            `≥${count.toLocaleString()}`
+          ) : (
+            <EstimatedCount value={count} />
+          )}
+        </p>
+      )}
+      <div className="flex items-center gap-1 text-sm text-muted-foreground">
+        <span>{metric.label}</span>
+        <InsightsInfo label={`How ${metric.label} is counted`}>
+          Unique app installations that reported activity in the last{" "}
+          {metric.period}, including no-change reports. Filtered by platform,
+          channel, and app version. The chart counts unique reporting
+          installations per {metric.interval}. Unique counts are estimates,
+          typically within about 3%. On DynamoDB and Firestore the server
+          updates totals in batches: when the Console cannot write to the
+          database, totals can leave out up to a minute of the latest reports.
+          Hourly counts are kept for {formatDays(retention.rawDays)} and daily
+          counts for {formatDays(retention.dailyDays)}, so 12 months counts
+          whole UTC days.
+          {partial
+            ? " Only part of the history is available; the total is a lower bound."
+            : ""}
+        </InsightsInfo>
+      </div>
+    </div>
+  );
+}