@hot-updater/console 1.0.0-rc.39 → 1.0.0-rc.40

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

@@ -28,7 +28,6 @@ import {
   failureStageLabel,
   formatRate,
   type InsightsFailureBreakdown,
-  patchFallbackRate,
   type UpdateFailuresReport,
 } from "@/lib/insights-failures";
 import { cn } from "@/lib/utils";
@@ -40,36 +39,65 @@ import { InsightsInfo } from "./InsightsInfo";
 const share = (events: number, total: number) =>
   total === 0 ? "—" : `${((events / total) * 100).toFixed(1)}%`;
 
-function Metric({
-  label,
+/**
+ * One kind of failure: its rate as the headline, then how many failures and
+ * installations it holds.
+ */
+function FailureSummary({
+  id,
+  title,
   info,
-  attention = false,
+  rate,
+  of,
+  failures,
+  installations,
+  previous,
   children,
 }: {
-  readonly label: string;
-  readonly info?: ReactNode;
-  readonly attention?: boolean;
-  readonly children: ReactNode;
+  readonly id: string;
+  readonly title: string;
+  readonly info: string;
+  readonly rate: number | null;
+  /** What the rate is a share of. */
+  readonly of: string;
+  readonly failures: number;
+  readonly installations: number;
+  readonly previous?: {
+    readonly rate: number | null;
+    readonly complete: boolean;
+  };
+  readonly children?: ReactNode;
 }) {
   return (
-    <div className="flex min-w-0 flex-col gap-1">
-      <dt className="flex min-h-11 items-center gap-1 text-xs text-muted-foreground sm:min-h-7">
-        {label}
-        {info ? (
-          <InsightsInfo label={`About ${label.toLowerCase()}`}>
-            {info}
-          </InsightsInfo>
-        ) : null}
-      </dt>
-      <dd
-        className={cn(
-          "text-2xl font-semibold tracking-tight tabular-nums",
-          attention && "text-warning",
-        )}
+    <section aria-labelledby={id} className="flex min-w-0 flex-col gap-1">
+      <h3
+        id={id}
+        className="flex min-h-11 items-center gap-1 text-sm font-medium sm:min-h-7"
       >
-        {children}
-      </dd>
-    </div>
+        {title}
+        <InsightsInfo label={`About ${title.toLowerCase()}`}>
+          {info}
+        </InsightsInfo>
+      </h3>
+      <p className="text-3xl font-semibold tracking-tight tabular-nums">
+        <Rate value={rate} />
+      </p>
+      <p className="text-xs text-muted-foreground">{of}</p>
+      {previous ? (
+        <RateChange
+          value={rate}
+          previous={previous.rate}
+          complete={previous.complete}
+        />
+      ) : null}
+      <p className="mt-2 text-sm text-muted-foreground tabular-nums">
+        {failures.toLocaleString()} {failures === 1 ? "failure" : "failures"}
+        {" · "}
+        <EstimatedCount value={installations} />{" "}
+        {installations === 1 ? "installation" : "installations"}
+      </p>
+      {children}
+    </section>
   );
 }
 
@@ -96,13 +124,8 @@ function RateChange({
   readonly previous: number | null;
   readonly complete: boolean;
 }) {
-  if (!complete || value === null || previous === null) {
-    return (
-      <span className="mt-1 block text-xs font-normal text-muted-foreground">
-        Previous period unavailable
-      </span>
-    );
-  }
+  // No change to show before a whole previous period was recorded.
+  if (!complete || value === null || previous === null) return null;
   const difference = (value - previous) * 100;
   const rounded = Number(difference.toFixed(2));
   return (
@@ -198,82 +221,52 @@ function FailuresReport({
 }) {
   const breakdown = report.breakdown ?? [];
   const total = breakdown.reduce((sum, { events }) => sum + events, 0);
+  const unreasoned = breakdown
+    .filter(({ reason }) => reason === "unknown")
+    .reduce((sum, { events }) => sum + events, 0);
+  const patchAttempts = report.patchDownloads + report.patchFallbacks;
   return (
     <div className="flex flex-col gap-8">
-      <div
-        className={cn("grid gap-6", report.checks && "lg:grid-cols-[2fr_1fr]")}
-      >
-        <section
-          aria-labelledby="download-install-failures"
-          className="flex min-w-0 flex-col gap-3"
+      <div className={cn("grid gap-6", report.checks && "sm:grid-cols-2")}>
+        <FailureSummary
+          id="download-install-failures"
+          title="Downloads & installs"
+          info="Failed downloads and installs ÷ those plus successful downloads."
+          rate={failureRate(report)}
+          of="of update attempts failed"
+          failures={report.failedUpdates}
+          installations={report.failedInstallations}
+          previous={
+            report.previous && {
+              rate: report.previous.attemptRate,
+              complete: report.previous.complete,
+            }
+          }
         >
-          <h3 id="download-install-failures" className="text-sm font-medium">
-            Downloads &amp; installs
-          </h3>
-          <dl className="grid grid-cols-2 gap-x-6 gap-y-4">
-            <Metric label="Failed updates" attention={report.failedUpdates > 0}>
-              {report.failedUpdates.toLocaleString()}
-            </Metric>
-            <Metric
-              label="Attempt failure rate"
-              attention={report.failedUpdates > 0}
-              info="Share of update attempts that failed: failures ÷ (failures + downloads)."
-            >
-              <Rate value={failureRate(report)} />
-              {report.previous ? (
-                <RateChange
-                  value={failureRate(report)}
-                  previous={report.previous.attemptRate}
-                  complete={report.previous.complete}
-                />
-              ) : null}
-            </Metric>
-            <Metric
-              label="Failed installations"
-              attention={report.failedInstallations > 0}
-              info="Installations with a failed download or install, estimated within about 3%."
-            >
-              <EstimatedCount value={report.failedInstallations} />
-            </Metric>
-            <Metric
-              label="Patch fallback rate"
-              info="Share of patch downloads that fell back to full files."
-            >
-              <Rate value={patchFallbackRate(report)} />
-            </Metric>
-          </dl>
-        </section>
+          {patchAttempts > 0 ? (
+            <p className="text-sm text-muted-foreground tabular-nums">
+              {report.patchFallbacks.toLocaleString()} of{" "}
+              {patchAttempts.toLocaleString()} patch downloads fell back to the
+              full archive
+            </p>
+          ) : null}
+        </FailureSummary>
         {report.checks ? (
-          <section
-            aria-labelledby="update-check-failures"
-            className="flex min-w-0 flex-col gap-3 rounded-lg bg-muted/30 p-4 lg:p-6"
-          >
-            <h3 id="update-check-failures" className="text-sm font-medium">
-              Update checks
-            </h3>
-            <dl className="grid grid-cols-2 gap-4 lg:grid-cols-1">
-              <Metric
-                label="Failed checks"
-                attention={report.checks.failures > 0}
-              >
-                {report.checks.failures.toLocaleString()}
-              </Metric>
-              <Metric
-                label="Check failure rate"
-                attention={report.checks.failedInstallations > 0}
-                info="Installations whose update check failed ÷ active installations. Offline checks aren't reported."
-              >
-                <Rate value={checkFailureRate(report.checks)} />
-                {report.previous ? (
-                  <RateChange
-                    value={checkFailureRate(report.checks)}
-                    previous={report.previous.checkRate}
-                    complete={report.previous.complete}
-                  />
-                ) : null}
-              </Metric>
-            </dl>
-          </section>
+          <FailureSummary
+            id="update-check-failures"
+            title="Update checks"
+            info="Installations whose update check failed ÷ active installations. A check that fails offline isn't reported."
+            rate={checkFailureRate(report.checks)}
+            of="of active installations had a check fail"
+            failures={report.checks.failures}
+            installations={report.checks.failedInstallations}
+            previous={
+              report.previous && {
+                rate: report.previous.checkRate,
+                complete: report.previous.complete,
+              }
+            }
+          />
         ) : null}
       </div>
       <Separator />
@@ -290,6 +283,12 @@ function FailuresReport({
         <h3 className="text-sm font-medium" id="failures-by-stage">
           Failures by stage and reason
         </h3>
+        {unreasoned * 2 > total ? (
+          <p className="text-sm text-muted-foreground">
+            Most report no reason: an SDK that doesn&apos;t classify failures
+            reports every failed check, offline ones included.
+          </p>
+        ) : null}
         {breakdown.length === 0 ? (
           <p className="text-sm text-muted-foreground">
             No update failures in this period.

package/src/components/features/releases/ReleaseEditorSheet.tsx

@@ -372,7 +372,7 @@ export function ReleaseEditorSheet({
                     />
                     {!release.bundle_id ? (
                       <span className="text-xs text-foreground">
-                        Built-in app
+                        Built-in bundle
                       </span>
                     ) : null}
                   </span>
@@ -666,7 +666,7 @@ export function ReleaseEditorSheet({
                     <div className="sm:col-span-2">
                       <dt>Artifact ID</dt>
                       <dd className="mt-1 break-all font-mono text-foreground">
-                        {release.bundle_id ?? "Built-in app"}
+                        {release.bundle_id ?? "Built-in bundle"}
                       </dd>
                     </div>
                     <div>

package/src/lib/insights-failures.ts

@@ -65,17 +65,6 @@ export const failureRate = ({
     ? null
     : failedUpdates / (failedUpdates + downloads);
 
-/** Of the downloads that tried a patch, the share that fell back to files or the archive. */
-export const patchFallbackRate = ({
-  patchDownloads,
-  patchFallbacks,
-}: Pick<InsightsUpdateFailures, "patchDownloads" | "patchFallbacks">):
-  | number
-  | null =>
-  patchDownloads + patchFallbacks === 0
-    ? null
-    : patchFallbacks / (patchDownloads + patchFallbacks);
-
 /** Installations whose update check failed, over the active ones; estimates, so at most 100%. */
 export const checkFailureRate = ({
   failedInstallations,
@@ -103,6 +92,7 @@ const REASONS: Readonly<Record<string, string>> = {
   patch: "Patch",
   extract: "Extract",
   storage: "Storage",
+  unknown: "No reason reported",
 };
 
 export const failureStageLabel = (stage: string): string =>

package/src/routes/index.tsx

@@ -13,7 +13,7 @@ import {
   Tags,
   X,
 } from "lucide-react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, type MouseEvent, useEffect, useState } from "react";
 
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { ChannelBadge } from "@/components/ChannelBadge";
@@ -84,6 +84,21 @@ const tableDateFormatter = new Intl.DateTimeFormat(undefined, {
   dateStyle: "medium",
 });
 
+/**
+ * Opens a bundle from a click anywhere on its row or card, except on a
+ * control inside it, which keeps its own action.
+ */
+const openOutsideControls =
+  (open: () => void) => (event: MouseEvent<HTMLElement>) => {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("button, a, input, select, textarea")
+    ) {
+      return;
+    }
+    open();
+  };
+
 export const Route = createFileRoute("/")({
   component: BundlesPage,
   validateSearch: validateReleaseSearch,
@@ -305,7 +320,7 @@ function BundleEntry({
         <BundleIdDisplay bundleId={release.id} fullOnMobile />
         {!release.bundle_id ? (
           <span className="inline-flex items-center gap-1.5 text-sm">
-            <RotateCcw className="size-3.5" /> Built-in app
+            <RotateCcw className="size-3.5" /> Built-in bundle
           </span>
         ) : null}
       </button>
@@ -527,13 +542,24 @@ function BundlesPage() {
 
                     return (
                       <Fragment key={release.id}>
+                        {/* The ID button opens it for keyboards and screen
+                            readers; a tap anywhere else on the card does too. */}
                         <article
+                          aria-label={`Bundle ${release.id}`}
                           className={cn(
-                            "flex flex-col gap-4 border-b p-4 last:border-b-0",
+                            "flex cursor-pointer touch-manipulation flex-col gap-4 border-b p-4 transition-[background-color,filter] last:border-b-0 hover:bg-muted/10 active:bg-muted/20 motion-reduce:transition-none data-[state=selected]:bg-muted/15",
                             release.currentlyUnreachable &&
-                              "bg-muted/35 saturate-50 transition-[background-color,filter] focus-within:saturate-100 motion-reduce:transition-none",
+                              "bg-muted/35 saturate-50 hover:bg-muted/50 hover:saturate-100 focus-within:saturate-100",
                             isExpanded && "border-b-0 bg-primary/5",
                           )}
+                          data-state={
+                            search.releaseId === release.id
+                              ? "selected"
+                              : undefined
+                          }
+                          onClick={openOutsideControls(() =>
+                            go({ ...search, releaseId: release.id }, false),
+                          )}
                         >
                           <div className="flex items-start justify-between gap-3">
                             <BundleEntry
@@ -703,17 +729,9 @@ function BundlesPage() {
                                   ? "selected"
                                   : undefined
                               }
-                              onClick={(event) => {
-                                if (
-                                  event.target instanceof Element &&
-                                  event.target.closest(
-                                    "button, a, input, select, textarea",
-                                  )
-                                ) {
-                                  return;
-                                }
-                                go({ ...search, releaseId: release.id }, false);
-                              }}
+                              onClick={openOutsideControls(() =>
+                                go({ ...search, releaseId: release.id }, false),
+                              )}
                               onKeyDown={(event) => {
                                 if (
                                   event.target !== event.currentTarget ||

package/src/routes/insights.tsx

@@ -36,7 +36,7 @@ function InsightsPage() {
   const navigate = Route.useNavigate();
   const retention = useInsightsRetention();
   const usageWindow = search.window ?? "24h";
-  const bundleWindow = search.bundleWindow ?? "7d";
+  const bundleWindow = search.bundleWindow ?? "24h";
   const channel = search.channel ?? search.healthChannel ?? "production";
   const scope: AppUsageScope = {
     platform: search.platform ?? "all",

package/src/routes/insights_.distribution.tsx

@@ -58,7 +58,7 @@ const dates = new Intl.DateTimeFormat("en", {
 const bundleName = (row: BundleDistribution): string =>
   row.releaseId ??
   (row.builtinBundleId
-    ? `Built-in app ${row.builtinBundleId}`
+    ? `Built-in bundle ${row.builtinBundleId}`
     : "Unknown bundle");
 
 /** The bundle an app version's native build shipped, by its ID. */
@@ -222,8 +222,8 @@ function DistributionPage() {
                 <InsightsInfo label="How bundle distribution is counted">
                   Each installation counts once, by its latest report{" "}
                   {distributionPeriod}. Shares are within each app version.
-                  Built-in app: the bundle the native build shipped, by its ID.
-                  Unknown bundle: no deployment and no built-in bundle ID.
+                  Built-in bundle: the bundle the native build shipped, by its
+                  ID. Unknown bundle: no deployment and no built-in bundle ID.
                 </InsightsInfo>
               </div>
               <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">

package/.output/public/assets/insights-BT0ER2ff.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/insights-BBya_x8N.js","assets/ConsoleFeatureUnavailable-BH7LLqAg.js","assets/sidebar-RBvHzq8e.js","assets/console-features-api-BhUIxeL-.js","assets/empty-DtangHOp.js","assets/NotFoundPage-CkgdpWvl.js","assets/insights-DPY9akyx.js","assets/preload-helper-DuV6lz46.js","assets/alert-dialog-DXxrSU0G.js","assets/mutation-B4EZNS91.js","assets/valueToPercent-Ci2-fmWp.js","assets/useCompositeListItem-BxJspDxS.js","assets/field-bPoDrs6K.js","assets/InsightsPageHeader-CASeYum3.js","assets/card-DKr2pZMA.js","assets/insights-usage-rpc-pz2XQBi3.js","assets/EventDetails-BUTZTAVo.js","assets/input-group-_PD0i7wZ.js","assets/dist-BzWwzt98.js","assets/api-BiZP_i-u.js","assets/refresh-cw-3fSQ1FYY.js","assets/InsightsInfo-B8i-PPsH.js","assets/table-BYmouPt9.js"])))=>i.map(i=>d[i]);
-import{r as e}from"./console-features-api-BhUIxeL-.js";import{T as t,t as n,w as r}from"./preload-helper-DuV6lz46.js";import{a as i}from"./InsightsInfo-B8i-PPsH.js";var a=t(`/insights`)({beforeLoad:({context:t})=>e(t.queryClient,`insightsAnalytics`),notFoundComponent:r(()=>n(()=>import(`./insights-BBya_x8N.js`),__vite__mapDeps([0,1,2,3,4,5])),`notFoundComponent`),component:r(()=>n(()=>import(`./insights-DPY9akyx.js`),__vite__mapDeps([6,2,7,3,8,9,10,11,12,13,14,15,16,4,17,18,19,20,21,22])),`component`),validateSearch:i});export{a as t};