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

package/src/routes/insights.tsx

@@ -1,82 +1,123 @@
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
 
-import {
-  InsightsBundleReports,
-  type InsightsReportSelection,
-} from "@/components/features/insights/InsightsBundleReports";
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
+import { AppUsage } from "@/components/features/insights/AppUsage";
 import { InsightsControls } from "@/components/features/insights/InsightsControls";
 import { InsightsOverview } from "@/components/features/insights/InsightsOverview";
 import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
-import { Button } from "@/components/ui/button";
+import { UpdateFailures } from "@/components/features/insights/UpdateFailures";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { requireConsoleFeature } from "@/lib/console-features-api";
 import {
-  type InsightsWindow,
-  type InsightsOverviewInput,
-  useReportingInstallationsQuery,
+  useInsightsRetention,
+  useUpdateFailuresQuery,
 } from "@/lib/insights-api";
+import { getRecoveryReportRpc } from "@/lib/insights-recovery-rpc";
+import { validateInsightsSearch } from "@/lib/insights-search";
+import type { AppUsageScope, UsageWindow } from "@/lib/insights-usage";
+import { getAppUsageReportRpc } from "@/lib/insights-usage-rpc";
 
 export const Route = createFileRoute("/insights")({
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "insightsAnalytics"),
+  notFoundComponent: ConsoleFeatureUnavailable,
   component: InsightsPage,
+  validateSearch: validateInsightsSearch,
 });
 
 function InsightsPage() {
-  const [window, setWindow] = useState<InsightsWindow>("30d");
-  const [scope, setScope] = useState<Omit<InsightsOverviewInput, "window">>({
-    platform: "ios",
-    channel: "production",
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const retention = useInsightsRetention();
+  const usageWindow = search.window ?? "24h";
+  const bundleWindow = search.bundleWindow ?? "7d";
+  const channel = search.channel ?? search.healthChannel ?? "production";
+  const scope: AppUsageScope = {
+    platform: search.platform ?? "all",
+    channel,
+    appVersion: search.appVersion,
+  };
+  const setUsageWindow = (window: UsageWindow) =>
+    void navigate({ search: { ...search, window } });
+  const input = { ...scope, window: usageWindow };
+  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 [selection, setSelection] = useState<InsightsReportSelection | null>(
-    null,
-  );
-  const active = useReportingInstallationsQuery({ ...scope, window });
-
+  const bundleQuery = useQuery({
+    queryKey: ["insights", "recovery", bundleInput],
+    queryFn: () => getRecoveryReportRpc({ data: bundleInput }),
+    staleTime: 30_000,
+  });
+  const failuresQuery = useUpdateFailuresQuery(bundleInput);
   return (
     <div className="flex h-svh min-h-0 flex-col">
-      <InsightsPageHeader view="overview" />
-      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
-        <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 sm:gap-6">
+      <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, bundleInput })}
             scope={scope}
-            onScopeChange={(next) => {
-              setScope(next);
-              setSelection(null);
-            }}
-            onWindowChange={(next) => {
-              setWindow(next);
-              setSelection(null);
-            }}
-            window={window}
+            releaseScope={bundleInput}
+            appVersions={query.data?.appVersions ?? []}
+            onFiltersChange={({ scope, releaseScope }) =>
+              void navigate({
+                search: {
+                  ...search,
+                  ...scope,
+                  appVersion: scope.appVersion,
+                  healthPlatform: releaseScope.platform,
+                  healthChannel: undefined,
+                  releaseId: releaseScope.releaseId,
+                },
+              })
+            }
           />
-          <Button
-            className="h-11 self-end lg:h-8"
-            variant="outline"
-            disabled={active.isFetching}
-            onClick={() => {
-              setSelection(null);
-              void active.refetch();
-            }}
-          >
-            Refresh overview
-          </Button>
-          {active.isLoading ? (
-            <InsightsOverview status="loading" />
-          ) : active.error ? (
-            <InsightsOverview status="error" error={active.error} />
-          ) : active.data ? (
-            <InsightsOverview
-              status="success"
-              active={active.data}
-              onOutcomeSelect={setSelection}
-            />
-          ) : (
-            <InsightsOverview status="loading" />
-          )}
-          {selection ? (
-            <InsightsBundleReports
-              key={JSON.stringify(selection)}
-              selection={selection}
-            />
+          {query.data?.truncated && !query.error ? (
+            <Alert>
+              <AlertTitle>Partial history</AlertTitle>
+              <AlertDescription>
+                Only reports since{" "}
+                {new Date(query.data.sinceMs).toLocaleString("en", {
+                  timeZone: "UTC",
+                })}{" "}
+                UTC are available. The active-user count is a lower bound.
+                Choose a shorter period for a more complete view.
+              </AlertDescription>
+            </Alert>
           ) : null}
+          <AppUsage
+            query={query}
+            search={{ ...scope, window: usageWindow, bundleWindow }}
+            window={usageWindow}
+            onWindowChange={setUsageWindow}
+            retention={retention}
+          />
+          <InsightsOverview
+            input={bundleInput}
+            query={bundleQuery}
+            onWindowChange={(window) =>
+              void navigate({
+                search: {
+                  ...search,
+                  bundleWindow: window,
+                },
+              })
+            }
+            onRefresh={() => void bundleQuery.refetch()}
+          />
+          <UpdateFailures
+            query={failuresQuery}
+            onRefresh={() => void failuresQuery.refetch()}
+          />
         </div>
       </div>
     </div>

package/src/routes/insights_.distribution.tsx

@@ -0,0 +1,398 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowLeft, ArrowUpRight, RotateCw } from "lucide-react";
+
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
+import { InsightsErrorAlert } from "@/components/features/insights/InsightsErrorAlert";
+import { InsightsInfo } from "@/components/features/insights/InsightsInfo";
+import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
+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";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Progress } from "@/components/ui/progress";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  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 { getAppUsageReportRpc } from "@/lib/insights-usage-rpc";
+
+const PAGE_SIZE = 20;
+const dates = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
+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",
+    channel: search.channel ?? "production",
+    appVersion: search.appVersion,
+    window: search.window ?? "24h",
+  };
+  const query = useQuery({
+    queryKey: ["insights", "app-usage", input],
+    queryFn: () => getAppUsageReportRpc({ data: input }),
+    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,
+  );
+  const total = rows.reduce((sum, row) => sum + row.installations, 0);
+  const pageCount = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
+  const page = Math.min(search.page ?? 1, pageCount);
+  const versions = [
+    ...new Set([
+      ...(report?.versions.map((row) => row.name) ?? []),
+      ...(search.version ? [search.version] : []),
+    ]),
+  ];
+  const overviewSearch = validateInsightsSearch(search);
+  const changeSearch = (next: Partial<typeof search>) =>
+    void navigate({ search: { ...search, page: undefined, ...next } });
+
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <InsightsPageHeader view="distribution" overviewSearch={overviewSearch} />
+      <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">
+          <Link
+            to="/insights"
+            search={overviewSearch}
+            className={buttonVariants({
+              variant: "ghost",
+              className: "h-11 w-fit sm:h-9",
+            })}
+          >
+            <ArrowLeft aria-hidden="true" data-icon="inline-start" />
+            Back to overview
+          </Link>
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <h2 className="text-2xl font-semibold tracking-tight">
+              Distribution
+            </h2>
+            <div className="flex items-center gap-3">
+              <UsagePeriodSelector
+                twelveMonths={keepsTwelveMonths(retention)}
+                window={input.window}
+                onWindowChange={(window) => changeSearch({ window })}
+              />
+              <Button
+                aria-label="Refresh distribution"
+                variant="ghost"
+                size="icon"
+                className="size-11 sm:size-9"
+                disabled={query.isFetching}
+                onClick={() => void query.refetch()}
+              >
+                <RotateCw aria-hidden="true" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-end justify-between gap-4">
+            <Field className="w-full sm:w-64">
+              <FieldLabel htmlFor="distribution-version">
+                App version
+              </FieldLabel>
+              <Select
+                items={Object.fromEntries([
+                  ["all", "All versions"],
+                  ...versions.map((version) => [`version:${version}`, version]),
+                ])}
+                value={search.version ? `version:${search.version}` : "all"}
+                onValueChange={(value) => {
+                  if (value !== null)
+                    changeSearch({
+                      version: value === "all" ? undefined : value.slice(8),
+                    });
+                }}
+              >
+                <SelectTrigger
+                  id="distribution-version"
+                  className="min-h-11 w-full sm:min-h-9"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="all">All versions</SelectItem>
+                    {versions.map((version) => (
+                      <SelectItem value={`version:${version}`} key={version}>
+                        {version}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <div
+              className="flex min-h-9 flex-wrap items-center gap-2"
+              aria-label="Distribution scope"
+            >
+              <Badge variant="outline" className="gap-1.5">
+                {input.platform !== "all" ? (
+                  <PlatformIcon
+                    platform={input.platform}
+                    className="size-3.5"
+                  />
+                ) : null}
+                {input.platform === "all"
+                  ? "All platforms"
+                  : input.platform === "ios"
+                    ? "iOS"
+                    : "Android"}
+              </Badge>
+              <Badge variant="outline">{input.channel}</Badge>
+              {input.appVersion ? (
+                <Badge variant="outline">Reports from {input.appVersion}</Badge>
+              ) : null}
+            </div>
+          </div>
+          <Card
+            aria-label="Bundles by app version"
+            role="region"
+            className="min-w-0"
+          >
+            <CardHeader className="flex flex-col gap-3">
+              <div className="flex items-center justify-between gap-2">
+                <CardTitle>Bundles by app version</CardTitle>
+                <InsightsInfo label="How bundle distribution is counted">
+                  Each installation counts once by its latest matching report{" "}
+                  {distributionPeriod}. Latest reports are counted by UTC day.
+                  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.
+                </InsightsInfo>
+              </div>
+              <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                {query.isPending ? (
+                  <Skeleton className="h-9 w-16" />
+                ) : (
+                  <p className="text-3xl font-semibold tabular-nums">
+                    {report
+                      ? `${report.truncated ? "≥" : ""}${total.toLocaleString()}`
+                      : "—"}
+                  </p>
+                )}
+                <span className="text-sm text-muted-foreground">
+                  Reporting installations
+                </span>
+              </div>
+            </CardHeader>
+            <CardContent className="flex min-w-0 flex-col gap-4">
+              {report?.truncated ? (
+                <Alert>
+                  <AlertTitle>Partial history</AlertTitle>
+                  <AlertDescription>
+                    Counts and shares reflect reports since{" "}
+                    {new Date(report.sinceMs).toLocaleString("en", {
+                      timeZone: "UTC",
+                    })}{" "}
+                    UTC. Choose a shorter period for a more complete view.
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+              {query.isPending ? (
+                <Skeleton
+                  aria-label="Loading bundle distribution"
+                  className="h-64"
+                />
+              ) : query.error ? (
+                <div className="flex flex-col items-start gap-4">
+                  <InsightsErrorAlert
+                    error={query.error}
+                    fallbackTitle="Distribution unavailable"
+                  />
+                  <Button
+                    variant="outline"
+                    onClick={() => void query.refetch()}
+                  >
+                    Retry distribution
+                  </Button>
+                </div>
+              ) : rows.length === 0 ? (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>No bundles reported</EmptyTitle>
+                    <EmptyDescription>
+                      Choose another version or period, or change the filters in
+                      the overview.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                  <Button
+                    variant="outline"
+                    onClick={() => changeSearch({ version: undefined })}
+                  >
+                    Show all versions
+                  </Button>
+                </Empty>
+              ) : (
+                <div className="min-w-0">
+                  <div
+                    aria-hidden="true"
+                    className="hidden grid-cols-[8rem_minmax(0,1fr)_7rem_7rem] gap-4 border-b px-3 pb-3 text-xs text-muted-foreground md:grid"
+                  >
+                    <span>App version</span>
+                    <span>Bundle ID</span>
+                    <span className="text-right">Active installations</span>
+                    <span className="text-right">Version share</span>
+                  </div>
+                  <ul aria-label="Bundle distribution" className="divide-y">
+                    {rows
+                      .slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+                      .map((row) => {
+                        const versionTotal =
+                          report?.versions.find(
+                            (version) => version.name === row.appVersion,
+                          )?.installations ?? 0;
+                        const share =
+                          versionTotal > 0
+                            ? (row.installations / versionTotal) * 100
+                            : 0;
+                        return (
+                          <li
+                            key={JSON.stringify([
+                              row.appVersion,
+                              row.platform,
+                              row.releaseId,
+                            ])}
+                            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"
+                          >
+                            <div className="flex min-w-0 flex-col gap-1">
+                              <span
+                                className="truncate text-sm font-medium"
+                                title={row.appVersion}
+                              >
+                                {row.appVersion}
+                              </span>
+                              <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                <PlatformIcon
+                                  platform={row.platform}
+                                  className="size-3.5"
+                                />
+                                {row.platform === "ios" ? "iOS" : "Android"}
+                              </span>
+                            </div>
+                            <div className="col-span-2 row-start-2 min-w-0 md:col-span-1 md:row-auto">
+                              {row.releaseId ? (
+                                <Link
+                                  to="/"
+                                  search={{ releaseId: row.releaseId }}
+                                  aria-label={`Review bundle ${row.releaseId} for app version ${row.appVersion}`}
+                                  className="flex min-h-11 min-w-0 items-center gap-2 text-xs underline-offset-4 hover:underline md:min-h-9"
+                                >
+                                  <span className="break-all font-mono">
+                                    {row.releaseId}
+                                  </span>
+                                  <ArrowUpRight
+                                    aria-hidden="true"
+                                    className="size-3.5 shrink-0"
+                                  />
+                                </Link>
+                              ) : (
+                                <span className="text-sm text-muted-foreground">
+                                  Unknown bundle
+                                </span>
+                              )}
+                            </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">
+                                {row.installations.toLocaleString()}
+                              </span>
+                              <span className="ml-1 text-xs text-muted-foreground md:sr-only">
+                                active
+                              </span>
+                              <p className="mt-1 text-xs tabular-nums text-muted-foreground md:hidden">
+                                {share.toFixed(1)}% of version
+                              </p>
+                            </div>
+                            <div className="hidden flex-col gap-2 md:flex">
+                              <span className="text-right text-sm tabular-nums">
+                                {share.toFixed(1)}%
+                              </span>
+                              <Progress
+                                aria-label={`${row.releaseId ?? "Unknown bundle"} share in ${row.appVersion} on ${row.platform}`}
+                                value={share}
+                              />
+                            </div>
+                          </li>
+                        );
+                      })}
+                  </ul>
+                </div>
+              )}
+            </CardContent>
+            {report && rows.length > 0 ? (
+              <CardFooter className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
+                <p className="text-xs tabular-nums text-muted-foreground">
+                  {(page - 1) * PAGE_SIZE + 1}–
+                  {Math.min(page * PAGE_SIZE, rows.length)} of {rows.length}
+                </p>
+                <nav aria-label="Distribution pages" className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    className="h-11 sm:h-9"
+                    disabled={page <= 1}
+                    onClick={() => changeSearch({ page: page - 1 })}
+                  >
+                    Previous
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="h-11 sm:h-9"
+                    disabled={page >= pageCount}
+                    onClick={() => changeSearch({ page: page + 1 })}
+                  >
+                    Next
+                  </Button>
+                </nav>
+              </CardFooter>
+            ) : null}
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}