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

package/src/components/features/channels/ChannelManagementDialog.tsx

@@ -0,0 +1,228 @@
+import { createUUIDv7, type ChannelRow } from "@hot-updater/plugin-core";
+import { Loader2, Plus, Tag, Trash2 } from "lucide-react";
+import { type FormEvent, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  useChannelsQuery,
+  useCreateChannelMutation,
+  useDeleteChannelMutation,
+} from "@/lib/api";
+
+interface ChannelManagementDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ChannelManagementDialog({
+  open,
+  onOpenChange,
+}: ChannelManagementDialogProps) {
+  const [channelName, setChannelName] = useState("");
+  const [channelToDelete, setChannelToDelete] = useState<ChannelRow | null>(
+    null,
+  );
+  const { data: channels = [], isPending: isLoadingChannels } =
+    useChannelsQuery();
+  const createChannel = useCreateChannelMutation();
+  const deleteChannel = useDeleteChannelMutation();
+  const normalizedName = channelName.trim();
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!normalizedName || createChannel.isPending) {
+      return;
+    }
+
+    try {
+      const result = await createChannel.mutateAsync({
+        row: { id: createUUIDv7(), name: normalizedName },
+        onConflict: "returnExisting",
+      });
+      setChannelName("");
+      if (result.inserted) {
+        toast.success(`Channel ${result.row.name} created`);
+      } else {
+        toast.info(`Channel ${result.row.name} already exists`);
+      }
+    } catch (error) {
+      toast.error("Failed to create channel");
+      console.error(error);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!channelToDelete || deleteChannel.isPending) {
+      return;
+    }
+
+    try {
+      const result = await deleteChannel.mutateAsync({
+        id: channelToDelete.id,
+      });
+
+      if (result.deleted) {
+        toast.success(`Channel ${channelToDelete.name} deleted`);
+      } else if (result.reason === "not_empty") {
+        toast.error(
+          `Channel ${channelToDelete.name} is still in use and cannot be deleted`,
+        );
+      } else {
+        toast.error(`Channel ${channelToDelete.name} no longer exists`);
+      }
+      setChannelToDelete(null);
+    } catch (error) {
+      toast.error("Failed to delete channel");
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Tag className="size-4 text-muted-foreground" />
+              Channels
+            </DialogTitle>
+            <DialogDescription>
+              Create deployment channels and remove them when no Release uses
+              them. Empty channels remain available until you delete them.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={handleCreate}>
+            <FieldGroup className="gap-2">
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="channel-name" className="sr-only">
+                  Channel name
+                </FieldLabel>
+                <Input
+                  id="channel-name"
+                  value={channelName}
+                  onChange={(event) => setChannelName(event.target.value)}
+                  placeholder="Channel name"
+                  autoComplete="off"
+                  disabled={createChannel.isPending}
+                />
+                <Button
+                  type="submit"
+                  disabled={!normalizedName || createChannel.isPending}
+                >
+                  {createChannel.isPending ? (
+                    <Loader2
+                      data-icon="inline-start"
+                      className="animate-spin"
+                    />
+                  ) : (
+                    <Plus data-icon="inline-start" />
+                  )}
+                  Create
+                </Button>
+              </Field>
+            </FieldGroup>
+          </form>
+
+          <div className="max-h-72 overflow-y-auto rounded-lg border">
+            {isLoadingChannels ? (
+              <div className="flex h-20 items-center justify-center text-muted-foreground">
+                <Loader2 className="mr-2 size-3.5 animate-spin" />
+                Loading channels
+              </div>
+            ) : channels.length === 0 ? (
+              <div className="flex h-20 items-center justify-center text-muted-foreground">
+                No channels yet
+              </div>
+            ) : (
+              <ul className="divide-y">
+                {channels.map((channel) => (
+                  <li
+                    key={channel.id}
+                    className="flex min-h-12 items-center gap-3 px-3 py-2"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-xs font-medium">
+                        {channel.name}
+                      </p>
+                      <p className="truncate font-mono text-[10px] text-muted-foreground">
+                        {channel.id}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label={`Delete ${channel.name}`}
+                      title={`Delete ${channel.name}`}
+                      disabled={deleteChannel.isPending}
+                      onClick={() => setChannelToDelete(channel)}
+                      className="text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 data-icon="inline-start" />
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={channelToDelete !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen && !deleteChannel.isPending) {
+            setChannelToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {channelToDelete?.name}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Only empty channels can be removed. The server checks this when
+              you delete it, and the channel can be created again later with a
+              new ID.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteChannel.isPending}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              disabled={deleteChannel.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDelete();
+              }}
+            >
+              {deleteChannel.isPending ? "Deleting..." : "Delete channel"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/features/insights/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/insights/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 { 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>
+  );
+}

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

@@ -0,0 +1,114 @@
+import { Button } from "@/components/ui/button";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+} from "@/components/ui/combobox";
+import { Field, FieldLabel } from "@/components/ui/field";
+
+type BundleOption = {
+  readonly bundleId: string;
+  readonly description: string;
+};
+
+export function BundleSelector({
+  bundleId,
+  bundles,
+  onBundleChange,
+}: {
+  readonly bundleId: string;
+  readonly bundles: readonly BundleOption[];
+  readonly onBundleChange: (bundleId: string) => void;
+}) {
+  const selectedBundle =
+    bundles.find((bundle) => bundle.bundleId === bundleId) ?? null;
+
+  return (
+    <Field
+      className="w-full min-w-0 sm:max-w-md"
+      data-disabled={!bundles.length}
+    >
+      <FieldLabel htmlFor="insights-bundle-selector">
+        Bundle to inspect
+      </FieldLabel>
+      <Combobox
+        autoHighlight
+        disabled={!bundles.length}
+        filter={(bundle, query) => {
+          const normalizedQuery = query.trim().toLowerCase();
+          return (
+            bundle.bundleId.toLowerCase().includes(normalizedQuery) ||
+            bundle.description.toLowerCase().includes(normalizedQuery)
+          );
+        }}
+        isItemEqualToValue={(bundle, value) =>
+          bundle.bundleId === value.bundleId
+        }
+        items={bundles}
+        itemToStringLabel={(bundle) => bundle.bundleId}
+        onValueChange={(bundle) => {
+          if (bundle) onBundleChange(bundle.bundleId);
+        }}
+        value={selectedBundle}
+      >
+        <ComboboxTrigger
+          aria-label="Bundle to inspect"
+          id="insights-bundle-selector"
+          render={
+            <Button
+              className="h-auto min-h-12 w-full min-w-0 justify-between px-3 py-2 text-left"
+              size="lg"
+              variant="outline"
+            />
+          }
+        >
+          {selectedBundle ? (
+            <span className="flex min-w-0 flex-1 flex-col items-start gap-1">
+              <code className="max-w-full truncate text-xs/4">
+                {selectedBundle.bundleId}
+              </code>
+              <span className="max-w-full truncate text-xs/4 text-muted-foreground">
+                {selectedBundle.description}
+              </span>
+            </span>
+          ) : (
+            <span className="truncate text-muted-foreground">
+              No bundles available
+            </span>
+          )}
+        </ComboboxTrigger>
+        <ComboboxContent className="min-w-(--anchor-width)">
+          <ComboboxInput
+            aria-label="Search bundles"
+            placeholder="Search by bundle ID or description"
+            showClear
+            showTrigger={false}
+          />
+          <ComboboxEmpty>No bundles found.</ComboboxEmpty>
+          <ComboboxList>
+            {(bundle) => (
+              <ComboboxItem
+                className="min-h-12 px-3 py-2"
+                key={bundle.bundleId}
+                value={bundle}
+              >
+                <span className="flex min-w-0 flex-col gap-1 pr-5">
+                  <code className="max-w-72 truncate text-xs/4">
+                    {bundle.bundleId}
+                  </code>
+                  <span className="truncate text-xs/4 text-muted-foreground">
+                    {bundle.description}
+                  </span>
+                </span>
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </Field>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+import type { InsightsCapabilityState } from "@/lib/insights-api";
+
+const InsightsCapabilityContext = createContext<InsightsCapabilityState>({
+  status: "unresolved",
+});
+
+export function InsightsCapabilityProvider({
+  children,
+  value,
+}: {
+  readonly children: ReactNode;
+  readonly value: InsightsCapabilityState;
+}) {
+  return (
+    <InsightsCapabilityContext.Provider value={value}>
+      {children}
+    </InsightsCapabilityContext.Provider>
+  );
+}
+
+export const useInsightsCapability = (): InsightsCapabilityState =>
+  useContext(InsightsCapabilityContext);