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

package/src/routes/insights.tsx

@@ -1,62 +1,96 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
 import { AppUsage } from "@/components/features/insights/AppUsage";
+import { FailureReports } from "@/components/features/insights/FailureReports";
 import { InsightsControls } from "@/components/features/insights/InsightsControls";
 import { InsightsOverview } from "@/components/features/insights/InsightsOverview";
 import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
+import { UpdateFailures } from "@/components/features/insights/UpdateFailures";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import type { InsightsWindow } from "@/lib/insights-api";
-import { getRecoveryReportRpc } from "@/lib/insights-recovery-rpc";
-import { validateInsightsSearch } from "@/lib/insights-search";
-import type { AppUsageScope } from "@/lib/insights-usage";
+import { requireConsoleFeature } from "@/lib/console-features-api";
+import {
+  useInsightsRetention,
+  useUpdateFailuresQuery,
+} from "@/lib/insights-api";
+import {
+  comparedBundleIds,
+  validateInsightsSearch,
+} from "@/lib/insights-search";
+import type { AppUsageScope, UsageWindow } from "@/lib/insights-usage";
 import { getAppUsageReportRpc } from "@/lib/insights-usage-rpc";
+import { useReleaseHealth } from "@/lib/release-adoption-api";
 
 export const Route = createFileRoute("/insights")({
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "insightsAnalytics"),
+  notFoundComponent: ConsoleFeatureUnavailable,
   component: InsightsPage,
   validateSearch: validateInsightsSearch,
 });
 
 function InsightsPage() {
+  const queryClient = useQueryClient();
   const search = Route.useSearch();
   const navigate = Route.useNavigate();
+  const retention = useInsightsRetention();
   const usageWindow = search.window ?? "24h";
   const bundleWindow = search.bundleWindow ?? "24h";
+  const channel = search.channel ?? search.healthChannel ?? "production";
   const scope: AppUsageScope = {
     platform: search.platform ?? "all",
-    channel: search.channel ?? "production",
+    channel,
     appVersion: search.appVersion,
   };
-  const setUsageWindow = (window: InsightsWindow) =>
+  const setUsageWindow = (window: UsageWindow) =>
     void navigate({ search: { ...search, window } });
-  const setBundleWindow = (bundleWindow: InsightsWindow) =>
-    void navigate({ search: { ...search, bundleWindow } });
-  const setScope = (scope: AppUsageScope) =>
-    void navigate({
-      search: { ...search, ...scope, appVersion: scope.appVersion },
-    });
   const input = { ...scope, window: usageWindow };
-  const bundleInput = { ...scope, window: bundleWindow };
+  const bundleInput = {
+    platform: search.healthPlatform ?? "ios",
+    channel,
+    window: bundleWindow,
+    ...(search.releaseId === undefined ? {} : { releaseId: search.releaseId }),
+  } as const;
   const query = useQuery({
     queryKey: ["insights", "app-usage", input],
     queryFn: () => getAppUsageReportRpc({ data: input }),
     staleTime: 30_000,
   });
-  const bundleQuery = useQuery({
-    queryKey: ["insights", "recovery", bundleInput],
-    queryFn: () => getRecoveryReportRpc({ data: bundleInput }),
-    staleTime: 30_000,
+  const chart = search.healthChart ?? "adoption";
+  const health = useReleaseHealth({
+    platform: bundleInput.platform,
+    channel,
+    window: bundleWindow,
+    releaseIds: comparedBundleIds(search.bundles),
+    focusReleaseId: search.releaseId,
+    chart,
   });
+  const failuresQuery = useUpdateFailuresQuery(bundleInput);
   return (
     <div className="flex h-svh min-h-0 flex-col">
       <InsightsPageHeader view="overview" overviewSearch={search} />
       <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 px-4 py-6 sm:p-8">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
           <InsightsControls
-            key={JSON.stringify(scope)}
+            key={JSON.stringify({ scope, bundleInput })}
             scope={scope}
+            releaseScope={bundleInput}
             appVersions={query.data?.appVersions ?? []}
-            onScopeChange={setScope}
+            onFiltersChange={({ scope, releaseScope }) =>
+              void navigate({
+                search: {
+                  ...search,
+                  ...scope,
+                  appVersion: scope.appVersion,
+                  healthPlatform: releaseScope.platform,
+                  healthChannel: undefined,
+                  releaseId: releaseScope.releaseId,
+                  // Bundles chosen in another scope do not carry over.
+                  bundles: undefined,
+                },
+              })
+            }
           />
           {query.data?.truncated && !query.error ? (
             <Alert>
@@ -76,12 +110,46 @@ function InsightsPage() {
             search={{ ...scope, window: usageWindow, bundleWindow }}
             window={usageWindow}
             onWindowChange={setUsageWindow}
+            retention={retention}
           />
           <InsightsOverview
             input={bundleInput}
-            query={bundleQuery}
-            onWindowChange={setBundleWindow}
-            onRefresh={() => void bundleQuery.refetch()}
+            chart={chart}
+            onChartChange={(healthChart) =>
+              void navigate({ search: { ...search, healthChart } })
+            }
+            health={health}
+            onReleasesChange={(ids) =>
+              void navigate({ search: { ...search, bundles: ids?.join(",") } })
+            }
+            onWindowChange={(window) =>
+              void navigate({
+                search: {
+                  ...search,
+                  bundleWindow: window,
+                },
+              })
+            }
+          />
+          <UpdateFailures
+            query={failuresQuery}
+            errors={
+              failuresQuery.data ? (
+                <FailureReports
+                  key={JSON.stringify(bundleInput)}
+                  input={{
+                    ...bundleInput,
+                    beforeReceivedAtMs: failuresQuery.data.endMs,
+                  }}
+                />
+              ) : null
+            }
+            onRefresh={() => {
+              void failuresQuery.refetch();
+              void queryClient.invalidateQueries({
+                queryKey: ["insights", "failure-reports"],
+              });
+            }}
           />
         </div>
       </div>

package/src/routes/insights_.distribution.tsx

@@ -2,10 +2,13 @@ import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft, ArrowUpRight, RotateCw } from "lucide-react";
 
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
+import { BuiltinBundleBadge } from "@/components/features/insights/BuiltinBundle";
 import { InsightsErrorAlert } from "@/components/features/insights/InsightsErrorAlert";
 import { InsightsInfo } from "@/components/features/insights/InsightsInfo";
 import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
-import { InsightsPeriodSelector } from "@/components/features/insights/InsightsPeriodSelector";
+import { UsagePeriodSelector } from "@/components/features/insights/InsightsPeriodSelector";
 import { PlatformIcon } from "@/components/PlatformIcon";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -34,20 +37,51 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import { requireConsoleFeature } from "@/lib/console-features-api";
+import { useInsightsRetention } from "@/lib/insights-api";
+import { keepsTwelveMonths } from "@/lib/insights-retention";
 import {
   validateDistributionSearch,
   validateInsightsSearch,
 } from "@/lib/insights-search";
+import type { BundleDistribution } from "@/lib/insights-usage";
 import { getAppUsageReportRpc } from "@/lib/insights-usage-rpc";
 
 const PAGE_SIZE = 20;
+const dates = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
+
+/** How a distribution row's bundle reads aloud. */
+const bundleName = (row: BundleDistribution): string =>
+  row.releaseId ??
+  (row.builtinBundleId
+    ? `Built-in bundle ${row.builtinBundleId}`
+    : "Unknown bundle");
+
+/** The bundle an app version's native build shipped, by its ID. */
+function BuiltinBundle({ bundleId }: { readonly bundleId: string }) {
+  return (
+    <div className="flex min-h-11 min-w-0 flex-wrap items-center gap-2 md:min-h-9">
+      <BuiltinBundleBadge />
+      <BundleIdDisplay bundleId={bundleId} className="text-muted-foreground" />
+    </div>
+  );
+}
+
 export const Route = createFileRoute("/insights_/distribution")({
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "insightsAnalytics"),
+  notFoundComponent: ConsoleFeatureUnavailable,
   component: DistributionPage,
   validateSearch: validateDistributionSearch,
 });
 
 function DistributionPage() {
   const search = Route.useSearch();
+  const retention = useInsightsRetention();
   const navigate = Route.useNavigate();
   const input = {
     platform: search.platform ?? "all",
@@ -61,6 +95,9 @@ function DistributionPage() {
     staleTime: 30_000,
   });
   const report = query.error ? undefined : query.data;
+  const distributionPeriod = report
+    ? `since ${dates.format(report.distributionSinceMs)}, 00:00 UTC`
+    : "in this period";
   const rows = (report?.bundleDistribution ?? []).filter(
     (row) => !search.version || row.appVersion === search.version,
   );
@@ -98,7 +135,8 @@ function DistributionPage() {
               Distribution
             </h2>
             <div className="flex items-center gap-3">
-              <InsightsPeriodSelector
+              <UsagePeriodSelector
+                twelveMonths={keepsTwelveMonths(retention)}
                 window={input.window}
                 onWindowChange={(window) => changeSearch({ window })}
               />
@@ -182,11 +220,10 @@ function DistributionPage() {
               <div className="flex items-center justify-between gap-2">
                 <CardTitle>Bundles by app version</CardTitle>
                 <InsightsInfo label="How bundle distribution is counted">
-                  Each installation contributes its latest matching report in
-                  this period. Share is within its app version. Unknown bundle
-                  means no deployment ID was observed for the reported file.
-                  These counts describe reporting installations, not all
-                  installed devices.
+                  Each installation counts once, by its latest report{" "}
+                  {distributionPeriod}. Shares are within each app version.
+                  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">
@@ -280,6 +317,7 @@ function DistributionPage() {
                               row.appVersion,
                               row.platform,
                               row.releaseId,
+                              row.builtinBundleId,
                             ])}
                             className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-3 px-1 py-4 md:grid-cols-[8rem_minmax(0,1fr)_7rem_7rem] md:px-3"
                           >
@@ -314,11 +352,14 @@ function DistributionPage() {
                                     className="size-3.5 shrink-0"
                                   />
                                 </Link>
-                              ) : (
+                              ) : row.builtinBundleId ? null : (
                                 <span className="text-sm text-muted-foreground">
                                   Unknown bundle
                                 </span>
                               )}
+                              {row.builtinBundleId ? (
+                                <BuiltinBundle bundleId={row.builtinBundleId} />
+                              ) : null}
                             </div>
                             <div className="col-start-2 row-start-1 text-right md:col-auto md:row-auto">
                               <span className="text-sm font-medium tabular-nums">
@@ -336,7 +377,7 @@ function DistributionPage() {
                                 {share.toFixed(1)}%
                               </span>
                               <Progress
-                                aria-label={`${row.releaseId ?? "Unknown bundle"} share in ${row.appVersion} on ${row.platform}`}
+                                aria-label={`${bundleName(row)} share in ${row.appVersion} on ${row.platform}`}
                                 value={share}
                               />
                             </div>

package/src/routes/installations.tsx

@@ -1,10 +1,12 @@
 import {
   createFileRoute,
   useElementScrollRestoration,
+  useLocation,
 } from "@tanstack/react-router";
 import { ArrowLeft } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
 import { EventHistoryCard } from "@/components/features/insights/EventHistoryCard";
 import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
 import { InstallationHistoryCard } from "@/components/features/insights/InstallationHistoryCard";
@@ -15,15 +17,20 @@ import {
 } from "@/components/features/insights/InstallationPageHeader";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { requireConsoleFeature } from "@/lib/console-features-api";
 import {
   useInsightsEventsQuery,
   useInsightsInstallationEventsQuery,
   useInsightsInstallationQuery,
   useInsightsInstallationsQuery,
+  useInsightsRetention,
 } from "@/lib/insights-api";
+import { formatDays } from "@/lib/insights-retention";
+import { DEFAULT_EVENT_RANGE, eventRangeBounds } from "@/lib/insights-view";
 
 import {
-  getInsightsScrollRestorationKey,
+  type InsightsPaginationState,
+  installationsScrollRestorationKey,
   validateInstallationsSearch,
 } from "./-installations-search";
 
@@ -40,30 +47,50 @@ const popCursor = (stack: readonly string[]) => ({
 });
 
 export const Route = createFileRoute("/installations")({
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "insights"),
+  notFoundComponent: ConsoleFeatureUnavailable,
   component: InstallationsPage,
+  staticData: { scrollRestorationKey: installationsScrollRestorationKey },
   validateSearch: validateInstallationsSearch,
 });
 
 function InstallationsPage() {
   const search = Route.useSearch();
   const navigate = Route.useNavigate();
+  const retention = useInsightsRetention();
   const [draftQuery, setDraftQuery] = useState(search.query ?? "");
   const [initialEventsBefore] = useState(freshBefore);
   const [initialHistoryBefore] = useState(freshBefore);
-  const [eventsBack, setEventsBack] = useState<readonly string[]>([]);
-  const [searchBack, setSearchBack] = useState<readonly string[]>([]);
-  const [historyBack, setHistoryBack] = useState<readonly string[]>([]);
+  const pagination = useLocation({
+    select: (location) => location.state.insightsPagination,
+  });
+  const eventsBack = pagination?.eventsBack ?? [];
+  const searchBack = pagination?.searchBack ?? [];
+  const historyBack = pagination?.historyBack ?? [];
   const query = search.query?.trim() ?? "";
   const hasSearchQuery = query.length > 0;
   const hasSelection = search.installId !== undefined;
   const hasLookup = hasSearchQuery || hasSelection;
   const eventsBefore = search.eventsBefore ?? initialEventsBefore;
+  const eventsRange = search.eventsRange ?? DEFAULT_EVENT_RANGE;
   const historyBefore = search.historyBefore ?? initialHistoryBefore;
 
-  const updateSearch = (next: Partial<typeof search>, replace = false) => {
+  const updateSearch = (
+    next: Partial<typeof search>,
+    replace = false,
+    nextPagination: InsightsPaginationState = {},
+  ) => {
     void navigate({
       to: "/installations",
       search: { ...search, ...next },
+      state: (previous) => ({
+        ...previous,
+        insightsPagination: {
+          ...previous.insightsPagination,
+          ...nextPagination,
+        },
+      }),
       replace,
     });
   };
@@ -86,7 +113,7 @@ function InstallationsPage() {
 
   const events = useInsightsEventsQuery(
     {
-      beforeReceivedAtMs: eventsBefore,
+      ...eventRangeBounds(eventsRange, eventsBefore),
       cursor: search.eventsCursor,
       limit: 20,
     },
@@ -104,7 +131,6 @@ function InstallationsPage() {
   useEffect(() => {
     const firstInstallId = matches.data?.data[0]?.installId;
     if (!hasSearchQuery || hasSelection || firstInstallId === undefined) return;
-    setHistoryBack([]);
     updateSearch(
       {
         historyBefore: freshBefore(),
@@ -112,6 +138,7 @@ function InstallationsPage() {
         installId: firstInstallId,
       },
       true,
+      { historyBack: [] },
     );
   }, [hasSearchQuery, hasSelection, matches.data?.data]);
 
@@ -141,7 +168,7 @@ function InstallationsPage() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollEntry = useElementScrollRestoration({
     id: scrollRestorationId,
-    getKey: getInsightsScrollRestorationKey,
+    getKey: installationsScrollRestorationKey,
   });
   useLayoutEffect(() => {
     if (!hasLookup && !events.isLoading && scrollRef.current) {
@@ -151,15 +178,17 @@ function InstallationsPage() {
 
   const clearLookup = () => {
     setDraftQuery("");
-    setHistoryBack([]);
-    setSearchBack([]);
-    updateSearch({
-      historyBefore: undefined,
-      historyCursor: undefined,
-      installId: undefined,
-      query: undefined,
-      searchCursor: undefined,
-    });
+    updateSearch(
+      {
+        historyBefore: undefined,
+        historyCursor: undefined,
+        installId: undefined,
+        query: undefined,
+        searchCursor: undefined,
+      },
+      false,
+      { historyBack: [], searchBack: [] },
+    );
   };
   const installationLookup = (
     <InstallationSearchPanel
@@ -172,15 +201,17 @@ function InstallationsPage() {
           clearLookup();
           return;
         }
-        setHistoryBack([]);
-        setSearchBack([]);
-        updateSearch({
-          historyBefore: undefined,
-          historyCursor: undefined,
-          installId: undefined,
-          query: nextQuery,
-          searchCursor: undefined,
-        });
+        updateSearch(
+          {
+            historyBefore: undefined,
+            historyCursor: undefined,
+            installId: undefined,
+            query: nextQuery,
+            searchCursor: undefined,
+          },
+          false,
+          { historyBack: [], searchBack: [] },
+        );
       }}
     />
   );
@@ -213,45 +244,60 @@ function InstallationsPage() {
           ) : null}
           {!hasLookup ? (
             <EventHistoryCard
+              description={`Downloads, launches, crashes, update failures, and other changes to what an installation runs, newest first, kept for ${formatDays(retention.rawDays)}. Launches that change nothing aren't listed.`}
               error={events.error}
               eventsLocation={{
                 eventsBefore,
                 eventsCursor: search.eventsCursor,
+                eventsRange: search.eventsRange,
               }}
               history={events.data}
               isFetching={events.isFetching}
               isLoading={events.isLoading}
               onNext={() => {
                 if (!events.data?.nextCursor) return;
-                setEventsBack(pushCursor(eventsBack, search.eventsCursor));
                 updateSearch(
                   {
                     eventsCursor: events.data.nextCursor,
                   },
                   true,
+                  { eventsBack: pushCursor(eventsBack, search.eventsCursor) },
                 );
               }}
               onPrevious={() => {
                 const previous = popCursor(eventsBack);
-                setEventsBack(previous.stack);
                 updateSearch(
                   {
                     eventsCursor: previous.cursor,
                   },
                   true,
+                  { eventsBack: previous.stack },
+                );
+              }}
+              onRangeChange={(range) => {
+                updateSearch(
+                  {
+                    eventsBefore: freshBefore(),
+                    eventsCursor: undefined,
+                    eventsRange: range,
+                  },
+                  false,
+                  { eventsBack: [] },
                 );
               }}
               onRefresh={() => {
-                setEventsBack([]);
                 updateSearch(
                   {
                     eventsBefore: freshBefore(),
                     eventsCursor: undefined,
                   },
                   true,
+                  { eventsBack: [] },
                 );
               }}
               pageNumber={eventsBack.length + 1}
+              range={eventsRange}
+              rawDays={retention.rawDays}
             >
               {installationLookup}
             </EventHistoryCard>
@@ -266,33 +312,38 @@ function InstallationsPage() {
                   error={matches.error}
                   onNext={() => {
                     if (!matches.data?.nextCursor) return;
-                    setSearchBack(pushCursor(searchBack, search.searchCursor));
                     updateSearch(
                       {
                         installId: undefined,
                         searchCursor: matches.data.nextCursor,
                       },
                       true,
+                      {
+                        searchBack: pushCursor(searchBack, search.searchCursor),
+                      },
                     );
                   }}
                   onPrevious={() => {
                     const previous = popCursor(searchBack);
-                    setSearchBack(previous.stack);
                     updateSearch(
                       {
                         installId: undefined,
                         searchCursor: previous.cursor,
                       },
                       true,
+                      { searchBack: previous.stack },
                     );
                   }}
                   onSelect={(installId) => {
-                    setHistoryBack([]);
-                    updateSearch({
-                      historyBefore: freshBefore(),
-                      historyCursor: undefined,
-                      installId,
-                    });
+                    updateSearch(
+                      {
+                        historyBefore: freshBefore(),
+                        historyCursor: undefined,
+                        installId,
+                      },
+                      false,
+                      { historyBack: [] },
+                    );
                   }}
                   pageNumber={searchBack.length + 1}
                   results={matches.data}
@@ -305,35 +356,41 @@ function InstallationsPage() {
                 isLoading={history.isLoading || selectedInstallation.isLoading}
                 onNext={() => {
                   if (!history.data?.nextCursor) return;
-                  setHistoryBack(pushCursor(historyBack, search.historyCursor));
                   updateSearch(
                     {
                       historyCursor: history.data.nextCursor,
                     },
                     true,
+                    {
+                      historyBack: pushCursor(
+                        historyBack,
+                        search.historyCursor,
+                      ),
+                    },
                   );
                 }}
                 onPrevious={() => {
                   const previous = popCursor(historyBack);
-                  setHistoryBack(previous.stack);
                   updateSearch(
                     {
                       historyCursor: previous.cursor,
                     },
                     true,
+                    { historyBack: previous.stack },
                   );
                 }}
                 onRefresh={() => {
-                  setHistoryBack([]);
                   updateSearch(
                     {
                       historyBefore: freshBefore(),
                       historyCursor: undefined,
                     },
                     true,
+                    { historyBack: [] },
                   );
                 }}
                 pageNumber={historyBack.length + 1}
+                retention={retention}
                 selectedEvent={selectedEvent}
                 selectedInstallId={search.installId}
               />

package/src/routes/remote-config.tsx

@@ -0,0 +1,42 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
+import {
+  REMOTE_CONFIG_TABS,
+  RemoteConfigPage,
+  type RemoteConfigTab,
+} from "@/components/features/remote-config/RemoteConfigPage";
+import { requireConsoleFeature } from "@/lib/console-features-api";
+
+interface RemoteConfigSearch {
+  /** The open view; Parameters when absent. */
+  readonly tab?: RemoteConfigTab;
+}
+
+export const Route = createFileRoute("/remote-config")({
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "remoteConfig"),
+  notFoundComponent: ConsoleFeatureUnavailable,
+  component: RemoteConfigRoute,
+  validateSearch: (search: Record<string, unknown>): RemoteConfigSearch =>
+    REMOTE_CONFIG_TABS.includes(search.tab as RemoteConfigTab) &&
+    search.tab !== "parameters"
+      ? { tab: search.tab as RemoteConfigTab }
+      : {},
+});
+
+function RemoteConfigRoute() {
+  const { tab = "parameters" } = Route.useSearch();
+  const navigate = Route.useNavigate();
+  return (
+    <RemoteConfigPage
+      onTabChange={(next) =>
+        void navigate({
+          search: next === "parameters" ? {} : { tab: next },
+          replace: true,
+        })
+      }
+      tab={tab}
+    />
+  );
+}