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

package/src/components/features/bundles/BundleActivityChart.tsx

@@ -1,193 +0,0 @@
-import type { ActiveInstallationWindow } from "@hot-updater/server";
-import { useId } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
-
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-
-interface SeriesPoint {
-  readonly bucketStartMs: number;
-  readonly value: number;
-}
-
-interface BundleActivityChartProps {
-  readonly installed: readonly SeriesPoint[];
-  readonly recovered: readonly SeriesPoint[];
-  readonly window: ActiveInstallationWindow;
-}
-
-interface ActivityChartPoint {
-  readonly bucketStartMs: number;
-  readonly installed: number;
-  readonly recovered: number;
-}
-
-const chartConfig = {
-  installed: {
-    label: "Applied",
-    color: "var(--chart-2)",
-  },
-  recovered: {
-    label: "Recovered",
-    color: "var(--muted-foreground)",
-  },
-} satisfies ChartConfig;
-
-const dateFormatter = 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 windowLabels = {
-  "24h": "24 hours",
-  "7d": "7 days",
-  "30d": "30 days",
-} as const;
-
-const mergeActivitySeries = (
-  installed: readonly SeriesPoint[],
-  recovered: readonly SeriesPoint[],
-): readonly ActivityChartPoint[] => {
-  const installedByBucket = new Map(
-    installed.map((point) => [point.bucketStartMs, point.value] as const),
-  );
-  const recoveredByBucket = new Map(
-    recovered.map((point) => [point.bucketStartMs, point.value] as const),
-  );
-  const buckets = new Set([
-    ...installedByBucket.keys(),
-    ...recoveredByBucket.keys(),
-  ]);
-
-  return [...buckets]
-    .sort((left, right) => left - right)
-    .map((bucketStartMs) => ({
-      bucketStartMs,
-      installed: installedByBucket.get(bucketStartMs) ?? 0,
-      recovered: recoveredByBucket.get(bucketStartMs) ?? 0,
-    }));
-};
-
-const formatBucket = (
-  value: number,
-  window: ActiveInstallationWindow,
-): string =>
-  (window === "24h" ? hourFormatter : dateFormatter).format(new Date(value));
-
-export function BundleActivityChart({
-  installed,
-  recovered,
-  window,
-}: BundleActivityChartProps) {
-  const captionId = useId();
-  const chartData = mergeActivitySeries(installed, recovered);
-  const hasWindowActivity = chartData.some(
-    (point) => point.installed > 0 || point.recovered > 0,
-  );
-
-  if (!hasWindowActivity) {
-    return (
-      <div className="flex h-16 items-center justify-center border-t px-4 pt-3 text-center text-xs text-muted-foreground sm:h-20 sm:pt-4">
-        No device activity in the last 30 days.
-      </div>
-    );
-  }
-
-  return (
-    <div className="border-t pt-3 sm:pt-4">
-      <ChartContainer
-        aria-describedby={captionId}
-        aria-label={`Bundle movement over ${windowLabels[window]}`}
-        className="h-24 w-full aspect-auto sm:h-32"
-        config={chartConfig}
-        role="img"
-      >
-        <AreaChart
-          accessibilityLayer
-          data={chartData}
-          margin={{ left: -16, right: 4, top: 4 }}
-        >
-          <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="installed"
-            fill="var(--color-installed)"
-            fillOpacity={0.12}
-            isAnimationActive={false}
-            stroke="var(--color-installed)"
-            strokeWidth={2}
-            type="monotone"
-          />
-          <Area
-            dataKey="recovered"
-            fill="var(--color-recovered)"
-            fillOpacity={0.04}
-            isAnimationActive={false}
-            stroke="var(--color-recovered)"
-            strokeWidth={1.5}
-            type="monotone"
-          />
-        </AreaChart>
-      </ChartContainer>
-      <div className="sr-only">
-        <table>
-          <caption id={captionId}>
-            Distinct bundle movement in each bucket over {windowLabels[window]}.
-            Times are shown in UTC.
-          </caption>
-          <thead>
-            <tr>
-              <th scope="col">Date</th>
-              <th scope="col">Applied</th>
-              <th scope="col">Recovered</th>
-            </tr>
-          </thead>
-          <tbody>
-            {chartData.map((point) => (
-              <tr key={point.bucketStartMs}>
-                <th scope="row">{formatBucket(point.bucketStartMs, window)}</th>
-                <td>{point.installed}</td>
-                <td>{point.recovered}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/src/components/features/bundles/BundleInsightsSummary.tsx

@@ -1,123 +0,0 @@
-import { useInsightsCapability } from "@/components/features/insights/InsightsCapabilityContext";
-import { InsightsErrorAlert } from "@/components/features/insights/InsightsErrorAlert";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useBundleEventInsightsQuery } from "@/lib/api";
-
-import { BundleActivityChart } from "./BundleActivityChart";
-
-interface BundleInsightsSummaryProps {
-  readonly bundleId: string;
-}
-
-function Metric({
-  label,
-  tone,
-  value,
-}: {
-  readonly label: string;
-  readonly tone: "applied" | "recovered";
-  readonly value: number;
-}) {
-  return (
-    <div className="flex flex-col gap-1">
-      <dt className="flex items-center gap-2 text-xs text-muted-foreground">
-        <span
-          aria-hidden="true"
-          className={
-            tone === "applied"
-              ? "size-2 rounded-full bg-chart-2"
-              : "size-2 rounded-full bg-muted-foreground"
-          }
-        />
-        {label}
-      </dt>
-      <dd className="text-xl font-semibold tracking-tight tabular-nums">
-        {value}
-      </dd>
-    </div>
-  );
-}
-
-function SupportedBundleInsightsSummary({
-  bundleId,
-}: BundleInsightsSummaryProps) {
-  const { data, error, isLoading } = useBundleEventInsightsQuery(
-    {
-      bundleId,
-      window: "30d",
-      limit: 1,
-      offset: 0,
-    },
-    true,
-  );
-
-  return (
-    <Card>
-      <CardHeader className="p-4 pb-3">
-        <CardTitle className="text-sm font-medium">
-          Activity · 30 days
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-3 px-4 pb-4">
-        {isLoading ? (
-          <div
-            aria-label="Loading reported bundle outcomes"
-            className="flex flex-col gap-3"
-          >
-            <div className="grid grid-cols-2 gap-4">
-              <Skeleton className="h-10 w-full" />
-              <Skeleton className="h-10 w-full" />
-            </div>
-            <Skeleton className="h-24 w-full sm:h-32" />
-          </div>
-        ) : error ? (
-          <InsightsErrorAlert
-            error={
-              error instanceof Error
-                ? error
-                : new Error("Failed to load bundle insights.")
-            }
-            fallbackTitle="Insights unavailable"
-          />
-        ) : (
-          <>
-            <dl className="grid grid-cols-2 divide-x divide-border/70">
-              <div className="pr-4">
-                <Metric
-                  label="Applied"
-                  tone="applied"
-                  value={data?.summary.installed ?? 0}
-                />
-              </div>
-              <div className="pl-4">
-                <Metric
-                  label="Recovered"
-                  tone="recovered"
-                  value={data?.summary.recovered ?? 0}
-                />
-              </div>
-            </dl>
-            <BundleActivityChart
-              installed={data?.series.installed ?? []}
-              recovered={data?.series.recovered ?? []}
-              window="30d"
-            />
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-export function BundleInsightsSummary({
-  bundleId,
-}: BundleInsightsSummaryProps) {
-  const capability = useInsightsCapability();
-
-  if (capability.status !== "supported") {
-    return null;
-  }
-
-  return <SupportedBundleInsightsSummary bundleId={bundleId} />;
-}

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

@@ -1,150 +0,0 @@
-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/insights/BundleDistribution.tsx

@@ -1,133 +0,0 @@
-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 { InsightsOverview } from "@/lib/insights-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: InsightsOverview;
-}) {
-  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>
-  );
-}