@hot-updater/console 0.36.7 → 1.0.0-rc.0

package/src/components/features/analytics/ActivityChart.tsx

@@ -0,0 +1,150 @@
+import type {
+  ActiveInstallationOverview,
+  ActiveInstallationWindow,
+} from "@hot-updater/server";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+type ActivitySeries = ActiveInstallationOverview["series"];
+
+const dayFormatter = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+});
+const hourFormatter = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  hour: "numeric",
+  month: "short",
+  timeZone: "UTC",
+});
+
+const formatBucket = (
+  bucketStartMs: number,
+  window: ActiveInstallationWindow,
+): string =>
+  (window === "24h" ? hourFormatter : dayFormatter).format(
+    new Date(bucketStartMs),
+  );
+
+const chartConfig = {
+  installations: {
+    label: "Active installations",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+export function ActivityChart({
+  series,
+  window,
+}: {
+  readonly series: ActivitySeries;
+  readonly window: ActiveInstallationWindow;
+}) {
+  const chartData = series.map((point) => ({
+    bucketStartMs: point.bucketStartMs,
+    installations: point.value,
+  }));
+  const hasReports = series.some(({ value }) => value > 0);
+  const bucketName = window === "24h" ? "hour" : "day";
+
+  return (
+    <div className="flex min-w-0 flex-col gap-3">
+      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+        <div>
+          <h3 className="text-sm font-medium">Activity over time</h3>
+          <p className="text-xs text-muted-foreground">
+            Unique active installations per {bucketName}
+          </p>
+        </div>
+        <span className="text-xs text-muted-foreground">UTC</span>
+      </div>
+      {!hasReports && (
+        <p className="text-sm text-muted-foreground">
+          No installations reported during this period.
+        </p>
+      )}
+      <ChartContainer
+        aria-label={`Active installations per ${bucketName}`}
+        className="h-64 w-full aspect-auto"
+        config={chartConfig}
+        role="img"
+      >
+        <AreaChart
+          accessibilityLayer
+          data={chartData}
+          margin={{ left: -16, right: 4, top: 8 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            axisLine={false}
+            dataKey="bucketStartMs"
+            minTickGap={28}
+            tickFormatter={(value: number) => formatBucket(value, window)}
+            tickLine={false}
+          />
+          <YAxis
+            allowDecimals={false}
+            axisLine={false}
+            tickLine={false}
+            width={32}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                labelFormatter={(_, payload) => {
+                  const bucket = payload[0]?.payload.bucketStartMs;
+                  return typeof bucket === "number"
+                    ? formatBucket(bucket, window)
+                    : "";
+                }}
+              />
+            }
+          />
+          <Area
+            dataKey="installations"
+            fill="var(--color-installations)"
+            fillOpacity={0.12}
+            isAnimationActive={false}
+            stroke="var(--color-installations)"
+            strokeWidth={2}
+            type="monotone"
+          />
+        </AreaChart>
+      </ChartContainer>
+      <p className="text-xs leading-relaxed text-muted-foreground">
+        Each point counts an installation once in that {bucketName}. The total
+        above counts it once across the whole period, so the points do not add
+        up to the total.
+      </p>
+      <div className="sr-only">
+        <table aria-label={`Exact active installations per ${bucketName}`}>
+          <caption>
+            Unique installations that reported an update status in each UTC
+            {` ${bucketName}`}.
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col">UTC {bucketName}</th>
+              <th scope="col">Active installations</th>
+            </tr>
+          </thead>
+          <tbody>
+            {chartData.map((point) => (
+              <tr key={point.bucketStartMs}>
+                <th scope="row">{formatBucket(point.bucketStartMs, window)}</th>
+                <td>{point.installations}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/components/features/analytics/AnalyticsCapabilityContext.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+import type { AnalyticsCapabilityState } from "@/lib/analytics-api";
+
+const AnalyticsCapabilityContext = createContext<AnalyticsCapabilityState>({
+  status: "unresolved",
+});
+
+export function AnalyticsCapabilityProvider({
+  children,
+  value,
+}: {
+  readonly children: ReactNode;
+  readonly value: AnalyticsCapabilityState;
+}) {
+  return (
+    <AnalyticsCapabilityContext.Provider value={value}>
+      {children}
+    </AnalyticsCapabilityContext.Provider>
+  );
+}
+
+export const useAnalyticsCapability = (): AnalyticsCapabilityState =>
+  useContext(AnalyticsCapabilityContext);

package/src/components/features/analytics/AnalyticsControls.tsx

@@ -0,0 +1,115 @@
+import type { ActiveInstallationWindow } from "@hot-updater/server";
+import { Search, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+const windows = [
+  { value: "24h", label: "24 hours", shortLabel: "24h" },
+  { value: "7d", label: "7 days", shortLabel: "7d" },
+  { value: "30d", label: "30 days", shortLabel: "30d" },
+] as const;
+
+export function AnalyticsControls({
+  onInstallationSearch,
+  onWindowChange,
+  window,
+}: {
+  readonly onInstallationSearch: (query: string) => void;
+  readonly onWindowChange: (window: ActiveInstallationWindow) => void;
+  readonly window: ActiveInstallationWindow;
+}) {
+  const [draft, setDraft] = useState("");
+
+  return (
+    <section
+      aria-label="Analytics controls"
+      className="rounded-xl border bg-background px-4 py-3"
+    >
+      <form
+        aria-label="Filter analytics"
+        className="min-w-0"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const query = draft.trim();
+          if (query) onInstallationSearch(query);
+        }}
+        role="search"
+      >
+        <FieldGroup className="gap-3 md:grid md:grid-cols-[auto_minmax(18rem,1fr)] md:items-end">
+          <Field className="min-w-0">
+            <FieldLabel>Reporting period</FieldLabel>
+            <ToggleGroup
+              aria-label="Reporting period"
+              className="w-full lg:w-fit"
+              onValueChange={(value) => {
+                if (value[0]) {
+                  onWindowChange(value[0] as ActiveInstallationWindow);
+                }
+              }}
+              spacing={0}
+              size="lg"
+              value={[window]}
+              variant="outline"
+            >
+              {windows.map((item) => (
+                <ToggleGroupItem
+                  aria-label={item.label}
+                  className="flex-1 md:flex-none"
+                  key={item.value}
+                  value={item.value}
+                >
+                  {item.shortLabel}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+          </Field>
+          <Field className="min-w-0">
+            <FieldLabel htmlFor="installation-history-search">
+              Installation history
+            </FieldLabel>
+            <div className="flex min-w-0 flex-col gap-2 sm:flex-row">
+              <InputGroup className="h-8 flex-1">
+                <InputGroupAddon>
+                  <Search aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  aria-label="User or install ID"
+                  id="installation-history-search"
+                  maxLength={1024}
+                  onChange={(event) => setDraft(event.target.value)}
+                  placeholder="User ID or install ID"
+                  type="search"
+                  value={draft}
+                />
+                {draft && (
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      aria-label="Clear installation search"
+                      onClick={() => setDraft("")}
+                      size="icon-xs"
+                    >
+                      <X aria-hidden="true" />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                )}
+              </InputGroup>
+              <Button className="w-full sm:w-auto" size="lg" type="submit">
+                <Search aria-hidden="true" data-icon="inline-start" />
+                Search
+              </Button>
+            </div>
+          </Field>
+        </FieldGroup>
+      </form>
+    </section>
+  );
+}

package/src/components/features/analytics/AnalyticsErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { TriangleAlert } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { getAnalyticsErrorCopy } from "@/lib/analytics-error";
+
+export function AnalyticsErrorAlert({
+  error,
+  fallbackTitle,
+}: {
+  readonly error: Error;
+  readonly fallbackTitle: string;
+}) {
+  const copy = getAnalyticsErrorCopy(error, fallbackTitle);
+  return (
+    <Alert variant="destructive">
+      <TriangleAlert aria-hidden="true" />
+      <AlertTitle>{copy.title}</AlertTitle>
+      <AlertDescription>{copy.description}</AlertDescription>
+    </Alert>
+  );
+}

package/src/components/features/analytics/AnalyticsOverview.tsx

@@ -0,0 +1,208 @@
+import type { ActiveInstallationOverview } from "@hot-updater/server";
+import type { ReactNode } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { AnalyticsOverview as CatalogOverview } from "@/lib/analytics-overview";
+import { cn } from "@/lib/utils";
+
+import { ActivityChart } from "./ActivityChart";
+import { AnalyticsErrorAlert } from "./AnalyticsErrorAlert";
+import { BundleSelector } from "./BundleSelector";
+import { UpdateOutcomes, type UpdateOutcomeState } from "./UpdateOutcomes";
+
+type AnalyticsOverviewProps =
+  | { readonly status: "loading" }
+  | { readonly status: "error"; readonly error: Error }
+  | {
+      readonly status: "success";
+      readonly active: ActiveInstallationOverview;
+      readonly bundleId: string;
+      readonly bundles: readonly {
+        readonly bundleId: string;
+        readonly description: string;
+      }[];
+      readonly catalog: CatalogOverview;
+      readonly onBundleChange: (bundleId: string) => void;
+      readonly outcomes: UpdateOutcomeState;
+    };
+
+const asOfFormatter = new Intl.DateTimeFormat("en", {
+  dateStyle: "medium",
+  timeStyle: "short",
+  timeZone: "UTC",
+});
+
+const activityWindowCopy = {
+  "24h": {
+    label: "Daily active installations",
+    period: "last 24 hours",
+  },
+  "7d": {
+    label: "Weekly active installations",
+    period: "last 7 days",
+  },
+  "30d": {
+    label: "Monthly active installations",
+    period: "last 30 days",
+  },
+} as const;
+
+function LoadingCard({
+  children,
+  className,
+  label,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+  readonly label: string;
+}) {
+  return (
+    <Card aria-label={label} className={cn("min-w-0", className)}>
+      <CardHeader>
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-3 w-4/5" />
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+export function AnalyticsOverview(props: AnalyticsOverviewProps) {
+  if (props.status === "loading") {
+    return (
+      <div
+        aria-label="Loading reporting analytics"
+        className="flex min-w-0 flex-col gap-8"
+      >
+        <LoadingCard label="Loading installation activity">
+          <Skeleton className="h-10 w-24" />
+          <Skeleton className="mt-5 h-64 w-full" />
+          <div className="mt-5 grid gap-4 border-t pt-5 sm:grid-cols-3">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        </LoadingCard>
+        <LoadingCard label="Loading bundle detail">
+          <div className="flex flex-col gap-4">
+            <Skeleton className="h-10 w-full max-w-md" />
+            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+          </div>
+        </LoadingCard>
+      </div>
+    );
+  }
+
+  if (props.status === "error") {
+    return (
+      <AnalyticsErrorAlert
+        error={props.error}
+        fallbackTitle="Reporting analytics unavailable"
+      />
+    );
+  }
+
+  const { active, bundleId, bundles, catalog, onBundleChange, outcomes } =
+    props;
+  const activityCopy = activityWindowCopy[active.window];
+  const selectedBundleId =
+    outcomes.status === "idle" ? null : outcomes.bundleId;
+  const latestBundleInstallations =
+    active.bundles.find(({ bundleId }) => bundleId === selectedBundleId)
+      ?.installations ?? 0;
+  const configuredPercentage =
+    catalog.configuredRollouts.find(
+      ({ bundleId }) => bundleId === selectedBundleId,
+    )?.configuredPercentage ?? null;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-8">
+      <section aria-label="Installation activity">
+        <Card className="min-w-0 overflow-hidden shadow-sm">
+          <CardHeader className="pb-4">
+            <CardTitle className="text-sm font-medium">
+              <h2>{activityCopy.label}</h2>
+            </CardTitle>
+            <CardDescription>
+              Unique app installations that reported an update status in the{" "}
+              {activityCopy.period}.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <p className="text-xs font-medium text-muted-foreground">
+                Active installations
+              </p>
+              <div className="flex items-end gap-2">
+                <span className="text-4xl font-semibold tracking-tight tabular-nums">
+                  {active.activeInstallations.toLocaleString()}
+                </span>
+                <span className="pb-1 text-xs text-muted-foreground">
+                  unique in {activityCopy.period}
+                </span>
+              </div>
+            </div>
+            <div className="border-t pt-5">
+              <ActivityChart series={active.series} window={active.window} />
+            </div>
+          </CardContent>
+          <CardFooter className="border-t bg-muted/15 p-0">
+            <dl className="grid w-full sm:grid-cols-3 sm:divide-x sm:divide-border/70">
+              <div className="flex flex-col gap-1 px-5 py-4">
+                <dt className="text-xs text-muted-foreground">
+                  Reported bundles
+                </dt>
+                <dd className="text-lg font-semibold tabular-nums">
+                  {active.bundles.length.toLocaleString()}
+                </dd>
+              </div>
+              <div className="flex flex-col gap-1 border-t px-5 py-4 sm:border-t-0">
+                <dt className="text-xs text-muted-foreground">
+                  Reporting window
+                </dt>
+                <dd className="text-sm font-medium">{activityCopy.period}</dd>
+              </div>
+              <div className="flex flex-col gap-1 border-t px-5 py-4 sm:border-t-0">
+                <dt className="text-xs text-muted-foreground">As of</dt>
+                <dd className="text-xs font-medium tabular-nums">
+                  {asOfFormatter.format(new Date(active.asOfMs))} UTC
+                </dd>
+              </div>
+            </dl>
+          </CardFooter>
+        </Card>
+      </section>
+
+      <section aria-labelledby="bundle-detail-heading">
+        <UpdateOutcomes
+          bundleSelector={
+            <BundleSelector
+              bundleId={bundleId}
+              bundles={bundles}
+              onBundleChange={onBundleChange}
+            />
+          }
+          configuredPercentage={configuredPercentage}
+          latestBundleInstallations={latestBundleInstallations}
+          reportingInstallations={active.activeInstallations}
+          state={outcomes}
+          window={active.window}
+        />
+      </section>
+    </div>
+  );
+}

package/src/components/features/analytics/BundleDistribution.tsx

@@ -0,0 +1,133 @@
+import type { ActiveInstallationOverview } from "@hot-updater/server";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { AnalyticsOverview } from "@/lib/analytics-overview";
+
+const PAGE_SIZE = 8;
+
+const percentage = (value: number): string =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 1,
+    style: "percent",
+  }).format(value);
+
+export function BundleDistribution({
+  active,
+  catalog,
+}: {
+  readonly active: ActiveInstallationOverview;
+  readonly catalog: AnalyticsOverview;
+}) {
+  const [page, setPage] = useState(1);
+  const metadata = new Map(
+    catalog.configuredRollouts.map(({ bundle, bundleId }) => [
+      bundleId,
+      bundle,
+    ]),
+  );
+
+  if (active.bundles.length === 0) {
+    return (
+      <p className="py-6 text-center text-sm text-muted-foreground">
+        No observed installations in this range.
+      </p>
+    );
+  }
+
+  const totalPages = Math.ceil(active.bundles.length / PAGE_SIZE);
+  const currentPage = Math.min(page, totalPages);
+  const start = (currentPage - 1) * PAGE_SIZE;
+  const end = Math.min(start + PAGE_SIZE, active.bundles.length);
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <div className="overflow-x-auto">
+        <Table aria-label="Observed installations by bundle">
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHead>Bundle</TableHead>
+              <TableHead className="hidden w-2/5 sm:table-cell">
+                Activity
+              </TableHead>
+              <TableHead className="text-right">Observed</TableHead>
+              <TableHead className="text-right">Share</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {active.bundles.slice(start, end).map((row) => {
+              const bundle = metadata.get(row.bundleId);
+              const share = row.installations / active.activeInstallations;
+              const shareLabel = percentage(share);
+              return (
+                <TableRow key={row.bundleId}>
+                  <TableCell className="max-w-48 whitespace-normal">
+                    <div className="flex min-w-0 flex-col gap-1">
+                      <code className="break-all text-xs">{row.bundleId}</code>
+                      <span className="text-muted-foreground">
+                        {bundle
+                          ? `${bundle.platform} · ${bundle.channel}`
+                          : "Unknown bundle metadata"}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    <Progress
+                      aria-label={`${row.bundleId} observed share ${shareLabel}`}
+                      aria-valuetext={shareLabel}
+                      className="h-2"
+                      value={share * 100}
+                    />
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {row.installations.toLocaleString()}
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {shareLabel}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      {totalPages > 1 && (
+        <div className="flex flex-wrap items-center justify-between gap-2 px-4 pb-4">
+          <p className="text-xs text-muted-foreground tabular-nums">
+            Showing {start + 1}–{end} of{" "}
+            {active.bundles.length.toLocaleString()}
+          </p>
+          <div className="flex gap-2">
+            <Button
+              disabled={currentPage === 1}
+              onClick={() => setPage(currentPage - 1)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              Previous
+            </Button>
+            <Button
+              disabled={currentPage === totalPages}
+              onClick={() => setPage(currentPage + 1)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}