@hot-updater/console 1.0.0-rc.3 → 1.0.0-rc.30

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

@@ -1,203 +1,287 @@
 import { Link } from "@tanstack/react-router";
-import { ArrowUpRight } from "lucide-react";
+import { ListIcon, RotateCw } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { ReportingInstallations } from "@/lib/insights-api";
-import { outcomeLabels } from "@/lib/insights-view";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { RecoveryInput, RecoveryReport } from "@/lib/insights-recovery";
+import type { HealthChart } from "@/lib/insights-search";
+import { cn } from "@/lib/utils";
 
-import { EventTimestamp, useInsightsTimeFormat } from "./EventDetails";
-import type { InsightsReportSelection } from "./InsightsBundleReports";
+import { BundleDistributionChart } from "./BundleDistributionChart";
+import { EstimatedCount } from "./EstimatedCount";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsInfo } from "./InsightsInfo";
+import { InsightsPeriodSelector } from "./InsightsPeriodSelector";
+import { ReleaseAdoptionChart } from "./ReleaseAdoptionChart";
 
-type InsightsOverviewProps =
-  | { readonly status: "loading" }
-  | { readonly status: "error"; readonly error: Error }
-  | {
-      readonly status: "success";
-      readonly active: ReportingInstallations;
-      readonly onOutcomeSelect: (selection: InsightsReportSelection) => void;
-    };
-
-const windowCopy = {
-  "24h": "the last 24 hours",
-  "7d": "the last 7 days",
-  "30d": "the last 30 days",
-} as const;
-
-export function InsightsOverview(props: InsightsOverviewProps) {
-  const dateTimeFormat = useInsightsTimeFormat();
-
-  if (props.status === "loading") {
-    return (
-      <Card aria-label="Loading reporting installations" className="shadow-sm">
-        <CardHeader className="px-4 pt-4 pb-2 sm:px-6 sm:pt-6">
-          <Skeleton className="h-4 w-40" />
-          <Skeleton className="h-3 w-full max-w-md" />
-        </CardHeader>
-        <CardContent className="px-4 pb-6 sm:px-6">
-          <Skeleton className="h-12 w-28" />
-        </CardContent>
-        <CardFooter className="border-t px-4 py-3 sm:px-6">
-          <Skeleton className="h-8 w-full max-w-sm" />
-        </CardFooter>
-      </Card>
-    );
-  }
+const dates = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
 
-  if (props.status === "error") {
-    return (
-      <InsightsErrorAlert
-        error={props.error}
-        fallbackTitle="Reporting installations unavailable"
-      />
-    );
-  }
+const rate = (report: RecoveryReport): string => {
+  const attempts = report.activeDays + report.failedLaunches;
+  return attempts === 0
+    ? "—"
+    : `${((report.failedLaunches / attempts) * 100).toFixed(2)}%`;
+};
 
-  const { active } = props;
-  const bundle = active.bundle;
+function ReleaseHealth({
+  report,
+  releaseId,
+  window,
+  chart,
+  onChartChange,
+  onReleaseChange,
+  onWindowChange,
+}: {
+  readonly report: RecoveryReport;
+  readonly releaseId?: string;
+  readonly window: RecoveryInput["window"];
+  readonly onWindowChange: (window: RecoveryInput["window"]) => void;
+  readonly chart: HealthChart;
+  readonly onChartChange: (chart: HealthChart) => void;
+  readonly onReleaseChange: (releaseId: string) => void;
+}) {
+  const attempts = report.activeDays + report.failedLaunches;
+  const activeInstallations = (
+    <EstimatedCount value={report.activeInstallations} />
+  );
+  const metrics = [
+    ["Active installations", activeInstallations],
+    ["Active days", report.activeDays.toLocaleString()],
+    ["Failed launches", report.failedLaunches.toLocaleString()],
+    ["Crash rate", attempts === 0 ? "— / No launch reports" : rate(report)],
+  ] as const;
+  return (
+    <div className="flex flex-col gap-8">
+      <dl className="grid grid-cols-2 gap-5 lg:grid-cols-4">
+        {metrics.map(([label, value]) => (
+          <div key={label} className="flex flex-col gap-1">
+            <dt className="flex items-center gap-1 text-sm text-muted-foreground">
+              {label}
+              {label === "Active installations" ? (
+                <InsightsInfo label="About active installations">
+                  Distinct installations that reported in this scope and period,
+                  or that launched this release, estimated: typically within
+                  about 3%.
+                </InsightsInfo>
+              ) : label === "Active days" ? (
+                <InsightsInfo label="About active days">
+                  Each installation counts once for each UTC day it launched,
+                  and once more on a day an update applies or recovers. The
+                  activity totals include these additional reports.
+                </InsightsInfo>
+              ) : label === "Crash rate" ? (
+                <InsightsInfo label="About crash rate">
+                  Reported OTA launch failures divided by active days plus
+                  failed launches for the same scope and period.
+                </InsightsInfo>
+              ) : null}
+            </dt>
+            <dd className="text-3xl font-semibold tracking-tight tabular-nums">
+              {value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <Tabs
+        value={chart}
+        onValueChange={(value) => onChartChange(value as HealthChart)}
+        className="gap-5"
+      >
+        <TabsList
+          aria-label="Release health chart"
+          className="min-h-11 sm:min-h-9"
+        >
+          <TabsTrigger value="share" className="px-3">
+            Bundle share
+          </TabsTrigger>
+          <TabsTrigger value="adoption" className="px-3">
+            Adoption
+          </TabsTrigger>
+          <TabsTrigger value="failures" className="px-3">
+            Launch failures
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="share">
+          <BundleDistributionChart
+            history={report.distribution}
+            releaseId={releaseId}
+          />
+        </TabsContent>
+        <TabsContent value="adoption">
+          <ReleaseAdoptionChart
+            report={report}
+            releaseId={releaseId}
+            window={window}
+            onReleaseChange={onReleaseChange}
+            onWindowChange={onWindowChange}
+          />
+        </TabsContent>
+        <TabsContent value="failures">
+          {report.points.length === 0 ? (
+            <Empty className="min-h-64">
+              <EmptyHeader>
+                <EmptyTitle>No launch reports in this period.</EmptyTitle>
+                <EmptyDescription>
+                  Choose a longer period or refresh after an app reports.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            <ChartContainer
+              aria-label="Daily failed launches"
+              className="h-64 w-full aspect-auto"
+              config={{
+                failedLaunches: {
+                  label: "Failed launches",
+                  color: "var(--chart-1)",
+                },
+              }}
+            >
+              <LineChart data={report.points} margin={{ left: -12, right: 12 }}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  axisLine={false}
+                  dataKey="startMs"
+                  tickFormatter={(value) => dates.format(value)}
+                  tickLine={false}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      labelFormatter={(_, payload) =>
+                        `${dates.format(payload[0]?.payload.startMs)} · UTC`
+                      }
+                    />
+                  }
+                />
+                <Line
+                  dataKey="failedLaunches"
+                  stroke="var(--color-failedLaunches)"
+                  strokeWidth={2}
+                  isAnimationActive={false}
+                />
+              </LineChart>
+            </ChartContainer>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
 
+export function InsightsOverview({
+  input,
+  onWindowChange,
+  query,
+  onRefresh,
+  chart,
+  onChartChange,
+  onReleaseChange,
+}: {
+  readonly input: RecoveryInput;
+  readonly chart: HealthChart;
+  readonly onChartChange: (chart: HealthChart) => void;
+  /** Chooses the Release health release, as the Release ID filter does. */
+  readonly onReleaseChange: (releaseId: string) => void;
+  readonly query: {
+    readonly data: RecoveryReport | undefined;
+    readonly error: Error | null;
+    readonly isPending: boolean;
+    readonly isFetching: boolean;
+  };
+  readonly onRefresh: () => void;
+  readonly onWindowChange: (window: RecoveryInput["window"]) => void;
+}) {
   return (
-    <section
-      aria-labelledby="reporting-installations-heading"
-      className="flex flex-col gap-4"
-    >
+    <section aria-label="Release health">
       <Card className="min-w-0 overflow-hidden shadow-sm">
-        <CardHeader className="gap-2 px-4 pt-4 pb-2 sm:px-6 sm:pt-6">
-          <CardTitle className="text-sm font-medium">
-            <h2 id="reporting-installations-heading">
-              Reporting installations
-            </h2>
-          </CardTitle>
-          <CardDescription>
-            {active.platform === "ios" ? "iOS" : "Android"} · {active.channel} ·{" "}
-            {windowCopy[active.window]}. Installations are counted by their last
-            report received.
-          </CardDescription>
+        <CardHeader className="flex flex-col gap-4 p-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <CardTitle>Release health</CardTitle>
+            <div className="flex items-center gap-2">
+              <InsightsPeriodSelector
+                window={input.window}
+                onWindowChange={onWindowChange}
+              />
+              <Button
+                aria-label="Refresh release health"
+                variant="ghost"
+                size="icon-lg"
+                disabled={query.isFetching}
+                onClick={onRefresh}
+              >
+                <RotateCw
+                  aria-hidden="true"
+                  className={cn(query.isFetching && "motion-safe:animate-spin")}
+                />
+              </Button>
+            </div>
+          </div>
         </CardHeader>
-        <CardContent className="px-4 pt-2 pb-5 sm:px-6 sm:pb-6">
-          <p className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">
-            {active.reportingInstallations.count.toLocaleString()}
-          </p>
+        <CardContent aria-busy={query.isFetching} className="px-6 pb-6">
+          {query.isPending ? (
+            <Skeleton aria-label="Loading release health" className="h-80" />
+          ) : query.error ? (
+            <InsightsErrorAlert
+              error={query.error}
+              fallbackTitle="Release health unavailable"
+            />
+          ) : query.data ? (
+            <ReleaseHealth
+              report={query.data}
+              releaseId={input.releaseId}
+              window={input.window}
+              onWindowChange={onWindowChange}
+              chart={chart}
+              onChartChange={onChartChange}
+              onReleaseChange={onReleaseChange}
+            />
+          ) : null}
         </CardContent>
-        <CardFooter className="flex flex-wrap items-center justify-between gap-3 border-t bg-muted/15 px-4 py-3 sm:px-6">
-          <dl className="min-w-0 text-xs">
-            <dt className="text-muted-foreground">Measured at</dt>
-            <dd className="font-medium tabular-nums">
-              <EventTimestamp
-                formatter={dateTimeFormat}
-                touch
-                value={active.reportingInstallations.measuredAtMs}
-              />
-            </dd>
-          </dl>
+        <CardFooter className="flex items-center justify-between border-t px-6 py-5">
+          {query.data?.coverage.kind === "partial" ? (
+            <span className="text-xs text-muted-foreground">Partial</span>
+          ) : (
+            <span />
+          )}
           <Link
-            className={buttonVariants({
-              className: "h-11 px-3 lg:h-8",
-              variant: "outline",
-            })}
+            className={buttonVariants({ variant: "outline", size: "sm" })}
             to="/installations"
           >
-            View events
-            <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+            <ListIcon aria-hidden="true" />
+            Event history
           </Link>
         </CardFooter>
       </Card>
-      {bundle ? (
-        <Card className="min-w-0 overflow-hidden shadow-sm">
-          <CardHeader>
-            <CardTitle>Selected bundle</CardTitle>
-            <CardDescription className="break-all">
-              {bundle.bundleId}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <dl className="flex flex-col gap-5">
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <dt className="text-sm">Selected bundle installations</dt>
-                  <dd className="mt-1 text-2xl font-semibold tabular-nums">
-                    {bundle.reportingInstallations.count.toLocaleString()}
-                  </dd>
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  Measured at{" "}
-                  <EventTimestamp
-                    formatter={dateTimeFormat}
-                    touch
-                    value={bundle.reportingInstallations.measuredAtMs}
-                  />
-                </div>
-              </div>
-              {(
-                [
-                  ["applied", bundle.appliedReports],
-                  ["recovered", bundle.recoveredReports],
-                  ["adopted", bundle.adoptedReports],
-                ] as const
-              ).map(([outcome, measurement]) => (
-                <div
-                  className="flex flex-wrap items-center justify-between gap-3"
-                  key={outcome}
-                >
-                  <div>
-                    <dt className="text-sm">{outcomeLabels[outcome]}</dt>
-                    <dd className="mt-1 text-2xl font-semibold tabular-nums">
-                      {measurement.count.toLocaleString()}
-                    </dd>
-                    <div className="mt-1 text-xs text-muted-foreground">
-                      Measured at{" "}
-                      <EventTimestamp
-                        formatter={dateTimeFormat}
-                        touch
-                        value={measurement.measuredAtMs}
-                      />
-                    </div>
-                  </div>
-                  <Button
-                    className="h-11 lg:h-8"
-                    variant="outline"
-                    onClick={() =>
-                      props.onOutcomeSelect({
-                        bundle: {
-                          platform: active.platform,
-                          channel: active.channel,
-                          bundleId: bundle.bundleId,
-                          outcome,
-                        },
-                        sinceMs: active.sinceMs,
-                        beforeReceivedAtMs: active.beforeReceivedAtMs,
-                      })
-                    }
-                  >
-                    View {outcome} reports
-                    <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
-                  </Button>
-                </div>
-              ))}
-            </dl>
-          </CardContent>
-          <CardFooter>
-            <p className="text-xs text-muted-foreground">
-              Installation counts are independent live measurements. Outcome
-              counts are accepted reports, not unique devices or update
-              attempts. Recovery reports identify the bundle recovered from.
-            </p>
-          </CardFooter>
-        </Card>
-      ) : null}
-      <p className="text-xs text-muted-foreground">
-        Offline installations, opt-outs, and reports that did not reach the
-        server are absent.
-      </p>
     </section>
   );
 }

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

@@ -1,14 +1,21 @@
 import { Link } from "@tanstack/react-router";
-import { ChartNoAxesCombined } from "lucide-react";
+import { ChartNoAxesCombined, ListIcon } from "lucide-react";
 
 import { buttonVariants } from "@/components/ui/button";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { useConsoleFeature } from "@/lib/console-features-api";
+import type { InsightsSearch } from "@/lib/insights-search";
+import { cn } from "@/lib/utils";
 
 export function InsightsPageHeader({
   view,
+  overviewSearch,
 }: {
-  readonly view: "overview" | "events";
+  readonly view: "overview" | "events" | "distribution";
+  readonly overviewSearch?: InsightsSearch;
 }) {
+  // A self-hosted server's admin API serves events, not the overview.
+  const overview = useConsoleFeature("insightsAnalytics");
   return (
     <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-3 border-b bg-background px-3 py-3 sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
       <SidebarTrigger className="-ml-1 size-11 lg:size-7" />
@@ -19,28 +26,36 @@ export function InsightsPageHeader({
         />
         <h1 className="text-sm font-medium">Insights</h1>
       </div>
-      <nav aria-label="Insights views" className="ml-auto flex gap-1">
-        <Link
-          aria-current={view === "overview" ? "page" : undefined}
-          className={buttonVariants({
-            className: "h-11 px-3 lg:h-8 lg:px-2.5",
-            size: "lg",
-            variant: view === "overview" ? "secondary" : "ghost",
-          })}
-          to="/insights"
-        >
-          Overview
-        </Link>
+      <nav aria-label="Insights views" className="ml-auto flex gap-2">
+        {overview ? (
+          <Link
+            aria-current={view === "overview" ? "page" : undefined}
+            className={cn(
+              buttonVariants({
+                className: "h-11 px-3 lg:h-8 lg:px-2.5",
+                size: "lg",
+                variant: view === "overview" ? "secondary" : "ghost",
+              }),
+            )}
+            search={overviewSearch}
+            to="/insights"
+          >
+            Overview
+          </Link>
+        ) : null}
         <Link
           aria-current={view === "events" ? "page" : undefined}
-          className={buttonVariants({
-            className: "h-11 px-3 lg:h-8 lg:px-2.5",
-            size: "lg",
-            variant: view === "events" ? "secondary" : "ghost",
-          })}
+          className={cn(
+            buttonVariants({
+              className: "h-11 px-3 lg:h-8 lg:px-2.5",
+              size: "lg",
+              variant: view === "events" ? "secondary" : "ghost",
+            }),
+          )}
           to="/installations"
         >
-          Events
+          <ListIcon aria-hidden="true" data-icon="inline-start" />
+          All events
         </Link>
       </nav>
     </header>

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

@@ -0,0 +1,89 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { InsightsWindow } from "@/lib/insights-api";
+import { usageMetrics, type UsageWindow } from "@/lib/insights-usage";
+
+/** A segmented control over fixed periods, each shown by its short value. */
+export function PeriodSelector<TPeriod extends string>({
+  label,
+  onPeriodChange,
+  period,
+  periods,
+}: {
+  readonly label: string;
+  readonly onPeriodChange: (period: TPeriod) => void;
+  readonly period: TPeriod;
+  readonly periods: readonly {
+    readonly value: TPeriod;
+    readonly name: string;
+  }[];
+}) {
+  return (
+    <Tabs
+      value={period}
+      onValueChange={(value) => {
+        const next = periods.find((item) => item.value === value);
+        if (next) onPeriodChange(next.value);
+      }}
+    >
+      <TabsList aria-label={label} className="min-h-11 sm:min-h-9">
+        {periods.map(({ value, name }) => (
+          <TabsTrigger
+            key={value}
+            value={value}
+            aria-label={name}
+            className="min-w-12 px-3"
+          >
+            {value}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}
+
+const reportingPeriods = (["24h", "7d", "30d"] as const).map((value) => ({
+  value,
+  name: usageMetrics[value].period,
+}));
+const usagePeriods = (Object.keys(usageMetrics) as UsageWindow[]).map(
+  (value) => ({ value, name: usageMetrics[value].period }),
+);
+
+export function InsightsPeriodSelector({
+  window,
+  onWindowChange,
+}: {
+  readonly window: InsightsWindow;
+  readonly onWindowChange: (window: InsightsWindow) => void;
+}) {
+  return (
+    <PeriodSelector
+      label="Reporting period"
+      onPeriodChange={onWindowChange}
+      period={window}
+      periods={reportingPeriods}
+    />
+  );
+}
+
+/** App usage's periods: the reporting periods, and 12 months where daily totals cover it. */
+export function UsagePeriodSelector({
+  window,
+  onWindowChange,
+  twelveMonths = true,
+}: {
+  readonly window: UsageWindow;
+  readonly onWindowChange: (window: UsageWindow) => void;
+  readonly twelveMonths?: boolean;
+}) {
+  return (
+    <PeriodSelector
+      label="Reporting period"
+      onPeriodChange={onWindowChange}
+      period={window}
+      periods={usagePeriods.filter(
+        ({ value }) => twelveMonths || value !== "12m",
+      )}
+    />
+  );
+}