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

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

@@ -0,0 +1,51 @@
+import type { InsightsBundleSelection } from "@hot-updater/server";
+import { useState } from "react";
+
+import { useInsightsEventsQuery } from "@/lib/insights-api";
+import { outcomeLabels } from "@/lib/insights-view";
+
+import { EventHistoryCard } from "./EventHistoryCard";
+
+export type InsightsReportSelection = {
+  readonly bundle: InsightsBundleSelection;
+  readonly sinceMs: number;
+  readonly beforeReceivedAtMs: number;
+};
+
+export function InsightsBundleReports({
+  selection,
+}: {
+  readonly selection: InsightsReportSelection;
+}) {
+  const [cursors, setCursors] = useState<readonly (string | undefined)[]>([
+    undefined,
+  ]);
+  const events = useInsightsEventsQuery(
+    { ...selection, cursor: cursors.at(-1), limit: 50 },
+    true,
+  );
+  return (
+    <EventHistoryCard
+      title={outcomeLabels[selection.bundle.outcome]}
+      error={events.error}
+      eventsLocation={{ eventsBefore: selection.beforeReceivedAtMs }}
+      history={events.data}
+      isFetching={events.isFetching}
+      isLoading={events.isLoading}
+      onNext={() => {
+        const cursor = events.data?.nextCursor;
+        if (cursor) setCursors((previous) => [...previous, cursor]);
+      }}
+      onPrevious={() => setCursors((previous) => previous.slice(0, -1))}
+      onRefresh={() => {
+        void events.refetch();
+      }}
+      pageNumber={cursors.length}
+    >
+      <p className="text-sm text-muted-foreground">
+        Reports for the selected bundle and the measured period. New reports
+        appear after refreshing the overview.
+      </p>
+    </EventHistoryCard>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import type { InsightsOverviewInput, InsightsWindow } from "@/lib/insights-api";
+
+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({
+  onWindowChange,
+  onScopeChange,
+  scope,
+  window,
+}: {
+  readonly onWindowChange: (window: InsightsWindow) => void;
+  readonly onScopeChange: (
+    scope: Omit<InsightsOverviewInput, "window">,
+  ) => void;
+  readonly scope: Omit<InsightsOverviewInput, "window">;
+  readonly window: InsightsWindow;
+}) {
+  const [platform, setPlatform] = useState(scope.platform);
+  const [channel, setChannel] = useState(scope.channel);
+  const [bundleId, setBundleId] = useState(scope.bundleId ?? "");
+
+  return (
+    <section aria-label="Insights controls" className="flex flex-col gap-4">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          onScopeChange({ platform, channel, bundleId: bundleId || undefined });
+        }}
+      >
+        <FieldGroup className="items-end sm:flex-row">
+          <Field className="w-full sm:w-auto">
+            <FieldLabel>Platform</FieldLabel>
+            <ToggleGroup
+              aria-label="Platform"
+              value={[platform]}
+              onValueChange={(value) => {
+                if (value[0] === "ios" || value[0] === "android")
+                  setPlatform(value[0]);
+              }}
+              spacing={0}
+              variant="outline"
+            >
+              <ToggleGroupItem className="h-11 lg:h-8" value="ios">
+                iOS
+              </ToggleGroupItem>
+              <ToggleGroupItem className="h-11 lg:h-8" value="android">
+                Android
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="insights-channel">Channel</FieldLabel>
+            <Input
+              className="h-11 lg:h-8"
+              id="insights-channel"
+              value={channel}
+              onChange={(event) => setChannel(event.target.value)}
+              required
+              maxLength={1024}
+            />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="insights-bundle">
+              Bundle ID (optional)
+            </FieldLabel>
+            <Input
+              className="h-11 lg:h-8"
+              id="insights-bundle"
+              placeholder="Select a bundle by ID"
+              value={bundleId}
+              onChange={(event) => setBundleId(event.target.value)}
+              maxLength={1024}
+            />
+          </Field>
+          <Button
+            className="h-11 w-full sm:w-auto lg:h-8"
+            type="submit"
+            variant="outline"
+          >
+            Apply filters
+          </Button>
+        </FieldGroup>
+      </form>
+      <Field orientation="horizontal" className="w-full">
+        <FieldLabel className="sr-only">Reporting period</FieldLabel>
+        <ToggleGroup
+          aria-label="Reporting period"
+          className="w-full sm:w-fit"
+          onValueChange={(value) => {
+            if (value[0]) onWindowChange(value[0] as InsightsWindow);
+          }}
+          spacing={0}
+          size="lg"
+          value={[window]}
+          variant="outline"
+        >
+          {windows.map((item) => (
+            <ToggleGroupItem
+              aria-label={item.label}
+              className="h-11 flex-1 px-4 sm:flex-none lg:h-8 lg:px-2.5"
+              key={item.value}
+              value={item.value}
+            >
+              {item.shortLabel}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Field>
+    </section>
+  );
+}

package/src/components/features/{analytics/AnalyticsErrorAlert.tsx → insights/InsightsErrorAlert.tsx}

@@ -1,21 +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,
+export function InsightsErrorAlert({
   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>
+      <AlertTitle>{fallbackTitle}</AlertTitle>
+      <AlertDescription>
+        Refresh to try again. If this keeps happening, check your Insights
+        provider connection.
+      </AlertDescription>
     </Alert>
   );
 }

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

@@ -0,0 +1,203 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { ReportingInstallations } from "@/lib/insights-api";
+import { outcomeLabels } from "@/lib/insights-view";
+
+import { EventTimestamp, useInsightsTimeFormat } from "./EventDetails";
+import type { InsightsReportSelection } from "./InsightsBundleReports";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+
+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>
+    );
+  }
+
+  if (props.status === "error") {
+    return (
+      <InsightsErrorAlert
+        error={props.error}
+        fallbackTitle="Reporting installations unavailable"
+      />
+    );
+  }
+
+  const { active } = props;
+  const bundle = active.bundle;
+
+  return (
+    <section
+      aria-labelledby="reporting-installations-heading"
+      className="flex flex-col gap-4"
+    >
+      <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>
+        <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>
+        <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>
+          <Link
+            className={buttonVariants({
+              className: "h-11 px-3 lg:h-8",
+              variant: "outline",
+            })}
+            to="/installations"
+          >
+            View events
+            <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+          </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

@@ -0,0 +1,48 @@
+import { Link } from "@tanstack/react-router";
+import { ChartNoAxesCombined } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+export function InsightsPageHeader({
+  view,
+}: {
+  readonly view: "overview" | "events";
+}) {
+  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" />
+      <div className="flex items-center gap-1.5">
+        <ChartNoAxesCombined
+          aria-hidden="true"
+          className="size-3.5 text-muted-foreground"
+        />
+        <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>
+        <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",
+          })}
+          to="/installations"
+        >
+          Events
+        </Link>
+      </nav>
+    </header>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Button } from "@/components/ui/button";
+
+export function InsightsPagination({
+  hasPrevious,
+  label,
+  nextCursor,
+  onNext,
+  onPrevious,
+  pageLength,
+  pageNumber,
+}: {
+  readonly hasPrevious: boolean;
+  readonly label: string;
+  readonly nextCursor: string | null;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+  readonly pageLength: number;
+  readonly pageNumber: number;
+}) {
+  return (
+    <nav
+      aria-label={`${label} pagination`}
+      className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 sm:px-6"
+    >
+      <span className="text-xs text-muted-foreground tabular-nums">
+        Page {pageNumber} · {pageLength.toLocaleString()} rows
+      </span>
+      <div className="flex gap-2">
+        <Button
+          className="h-11 min-w-11 px-3 lg:h-8 lg:min-w-0 lg:px-2"
+          disabled={!hasPrevious}
+          onClick={onPrevious}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Previous
+        </Button>
+        <Button
+          className="h-11 min-w-11 px-3 lg:h-8 lg:min-w-0 lg:px-2"
+          disabled={nextCursor === null}
+          onClick={onNext}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Next
+        </Button>
+      </div>
+    </nav>
+  );
+}