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

package/src/components/features/insights/InsightsControls.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 InsightsControls({
+  onInstallationSearch,
+  onWindowChange,
+  window,
+}: {
+  readonly onInstallationSearch: (query: string) => void;
+  readonly onWindowChange: (window: ActiveInstallationWindow) => void;
+  readonly window: ActiveInstallationWindow;
+}) {
+  const [draft, setDraft] = useState("");
+
+  return (
+    <section
+      aria-label="Insights controls"
+      className="rounded-xl border bg-background px-4 py-3"
+    >
+      <form
+        aria-label="Filter insights"
+        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/insights/InsightsErrorAlert.tsx

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

package/src/components/features/insights/InsightsOverview.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 { InsightsOverview as CatalogOverview } from "@/lib/insights-overview";
+import { cn } from "@/lib/utils";
+
+import { ActivityChart } from "./ActivityChart";
+import { BundleSelector } from "./BundleSelector";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { UpdateOutcomes, type UpdateOutcomeState } from "./UpdateOutcomes";
+
+type InsightsOverviewProps =
+  | { 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 InsightsOverview(props: InsightsOverviewProps) {
+  if (props.status === "loading") {
+    return (
+      <div
+        aria-label="Loading reporting insights"
+        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 (
+      <InsightsErrorAlert
+        error={props.error}
+        fallbackTitle="Reporting insights 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/insights/InstallationHistoryCard.tsx

@@ -0,0 +1,248 @@
+import { TriangleAlert } from "lucide-react";
+
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type {
+  InstallationHistoryResult,
+  InstallationHistoryRow,
+  InstallationSearchRow,
+} from "@/lib/api";
+
+import { InstallationPagination } from "./InstallationPagination";
+
+const formatDateTime = (value: string | number | Date | null | undefined) => {
+  if (!value) return "—";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "UTC",
+  }).format(date);
+};
+
+const getUserLabel = (event: {
+  readonly username: string | null;
+  readonly userId: string | null;
+}) => event.userId ?? event.username ?? "—";
+
+const getLastKnownBundleId = (
+  event: InstallationHistoryRow | InstallationSearchRow,
+) =>
+  "lastKnownBundleId" in event
+    ? event.lastKnownBundleId
+    : (event.toBundleId ?? event.fromBundleId);
+
+export function InstallationHistoryCard({
+  error,
+  history,
+  isLoading,
+  limit,
+  offset,
+  onOffsetChange,
+  selectedEvent,
+  selectedInstallId,
+}: {
+  readonly error: unknown;
+  readonly history: InstallationHistoryResult | undefined;
+  readonly isLoading: boolean;
+  readonly limit: number;
+  readonly offset: number;
+  readonly onOffsetChange: (offset: number) => void;
+  readonly selectedEvent:
+    | InstallationHistoryRow
+    | InstallationSearchRow
+    | undefined;
+  readonly selectedInstallId: string;
+}) {
+  const lastKnownBundleId = selectedEvent
+    ? getLastKnownBundleId(selectedEvent)
+    : undefined;
+
+  return (
+    <Card className="min-h-0 min-w-0">
+      <CardHeader className="p-6 pb-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <CardTitle className="text-sm font-medium">
+              <h2>
+                {selectedInstallId
+                  ? "Installation history"
+                  : "Select an installation"}
+              </h2>
+            </CardTitle>
+            <CardDescription>
+              {selectedInstallId
+                ? "Recorded bundle changes for this installation."
+                : "Choose a match to view its recorded bundle changes."}
+            </CardDescription>
+          </div>
+          {history && history.pagination.total > 0 ? (
+            <Badge variant="outline">{history.pagination.total} events</Badge>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent className="min-h-0 p-0">
+        {selectedInstallId ? (
+          isLoading ? (
+            <div className="flex flex-col gap-3 p-5">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ) : history && history.data.length > 0 ? (
+            <>
+              <section
+                aria-labelledby="latest-installation-state"
+                className="px-6 pb-6"
+              >
+                <h3
+                  className="text-xs font-medium"
+                  id="latest-installation-state"
+                >
+                  Latest reported state
+                </h3>
+                <dl className="mt-4 grid gap-6 xl:grid-cols-3">
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">
+                      Installation
+                    </dt>
+                    <dd className="mt-1 font-mono text-xs">
+                      <BundleIdDisplay bundleId={selectedInstallId} />
+                    </dd>
+                  </div>
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">User ID</dt>
+                    <dd className="mt-1 truncate text-xs font-medium">
+                      {selectedEvent ? getUserLabel(selectedEvent) : "—"}
+                    </dd>
+                  </div>
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">
+                      Last known bundle
+                    </dt>
+                    <dd className="mt-1 font-mono text-xs">
+                      {lastKnownBundleId ? (
+                        <BundleIdDisplay bundleId={lastKnownBundleId} />
+                      ) : (
+                        "—"
+                      )}
+                    </dd>
+                  </div>
+                </dl>
+              </section>
+              <Separator />
+              <Table className="min-w-3xl table-fixed">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent [&>th]:h-12 [&>th]:px-5">
+                    <TableHead className="w-1/5 whitespace-normal">
+                      Reported (UTC)
+                    </TableHead>
+                    <TableHead className="w-1/6 whitespace-normal">
+                      App version
+                    </TableHead>
+                    <TableHead className="w-1/5 whitespace-normal">
+                      Change
+                    </TableHead>
+                    <TableHead className="whitespace-normal">
+                      Bundle transition
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {history.data.map((event) => (
+                    <TableRow
+                      className="[&>td]:px-5 [&>td]:py-4"
+                      key={event.id}
+                    >
+                      <TableCell className="whitespace-normal align-top text-sm text-muted-foreground">
+                        {formatDateTime(event.receivedAtMs)}
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top font-mono text-xs">
+                        {event.appVersion}
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top">
+                        <Badge variant="secondary">
+                          {event.type === "UPDATE_APPLIED"
+                            ? "Bundle applied"
+                            : "Recovered"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top">
+                        <div className="grid grid-cols-[2rem_minmax(0,1fr)] gap-x-3 gap-y-3">
+                          <span className="text-muted-foreground">From</span>
+                          {event.fromBundleId ? (
+                            <BundleIdDisplay bundleId={event.fromBundleId} />
+                          ) : (
+                            "—"
+                          )}
+                          <span className="text-muted-foreground">To</span>
+                          {event.toBundleId ? (
+                            <BundleIdDisplay bundleId={event.toBundleId} />
+                          ) : (
+                            "—"
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <InstallationPagination
+                label="Installation history"
+                limit={limit}
+                offset={offset}
+                pageLength={history.data.length}
+                total={history.pagination.total}
+                onOffsetChange={onOffsetChange}
+              />
+            </>
+          ) : error ? (
+            <div className="p-5 pt-0">
+              <Alert variant="destructive">
+                <TriangleAlert aria-hidden="true" />
+                <AlertTitle>Installation history unavailable</AlertTitle>
+                <AlertDescription>
+                  {error instanceof Error
+                    ? error.message
+                    : "Failed to load installation history."}
+                </AlertDescription>
+              </Alert>
+            </div>
+          ) : (
+            <div className="p-5 pt-0 text-sm text-muted-foreground">
+              No history is available for this installation.
+            </div>
+          )
+        ) : (
+          <div className="p-5 pt-0 text-sm text-muted-foreground">
+            Choose an installation to inspect its update history.
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}