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

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>
+  );
+}

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

@@ -1,15 +1,8 @@
-import { TriangleAlert } from "lucide-react";
+import { RefreshCw } 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 { HashValueDisplay } from "@/components/HashValueDisplay";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -21,28 +14,20 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type {
-  InstallationHistoryResult,
-  InstallationHistoryRow,
-  InstallationSearchRow,
-} from "@/lib/api";
-
-import { InstallationPagination } from "./InstallationPagination";
+  InsightsEventRow,
+  InsightsInstallationViewRow,
+  InsightsViewPage,
+} from "@/lib/insights-view";
 
-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);
-};
+import {
+  EventBundleTransition,
+  EventTimestamp,
+  EventTypeBadge,
+  useInsightsTimeFormat,
+} from "./EventDetails";
+import { EventHistoryList } from "./EventHistoryList";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsPagination } from "./InsightsPagination";
 
 const getUserLabel = (event: {
   readonly username: string | null;
@@ -50,7 +35,7 @@ const getUserLabel = (event: {
 }) => event.userId ?? event.username ?? "—";
 
 const getLastKnownBundleId = (
-  event: InstallationHistoryRow | InstallationSearchRow,
+  event: InsightsEventRow | InsightsInstallationViewRow,
 ) =>
   "lastKnownBundleId" in event
     ? event.lastKnownBundleId
@@ -60,188 +45,205 @@ export function InstallationHistoryCard({
   error,
   history,
   isLoading,
-  limit,
-  offset,
-  onOffsetChange,
+  onNext,
+  onPrevious,
+  onRefresh,
+  pageNumber,
   selectedEvent,
   selectedInstallId,
 }: {
   readonly error: unknown;
-  readonly history: InstallationHistoryResult | undefined;
+  readonly history: InsightsViewPage<InsightsEventRow> | undefined;
   readonly isLoading: boolean;
-  readonly limit: number;
-  readonly offset: number;
-  readonly onOffsetChange: (offset: number) => void;
+  readonly onRefresh?: () => void;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+  readonly pageNumber: number;
   readonly selectedEvent:
-    | InstallationHistoryRow
-    | InstallationSearchRow
+    | InsightsEventRow
+    | InsightsInstallationViewRow
     | undefined;
-  readonly selectedInstallId: string;
+  readonly selectedInstallId: string | undefined;
 }) {
+  const dateTimeFormat = useInsightsTimeFormat();
   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">
+    <Card className="@container min-h-0 min-w-0 shadow-sm">
+      <CardHeader className="p-4 sm:p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
           <div className="flex min-w-0 flex-col gap-1.5">
             <CardTitle className="text-sm font-medium">
               <h2>
-                {selectedInstallId
+                {selectedInstallId !== undefined
                   ? "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>
+          {onRefresh && selectedInstallId !== undefined ? (
+            <Button
+              className="h-11 lg:h-8"
+              size="lg"
+              variant="outline"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw aria-hidden="true" data-icon="inline-start" />
+              Refresh
+            </Button>
           ) : null}
         </div>
       </CardHeader>
       <CardContent className="min-h-0 p-0">
-        {selectedInstallId ? (
+        {selectedInstallId !== undefined && selectedEvent ? (
+          <>
+            <section
+              aria-labelledby="latest-installation-state"
+              className="px-4 pb-4 sm:px-6 sm:pb-6"
+            >
+              <h3 className="sr-only" id="latest-installation-state">
+                Latest reported state
+              </h3>
+              <dl className="grid grid-cols-2 gap-4 @[36rem]:grid-cols-3">
+                <div className="col-span-2 min-w-0 @[36rem]:col-span-1">
+                  <dt className="text-xs text-muted-foreground">User ID</dt>
+                  <dd className="mt-1 text-sm font-medium wrap-anywhere">
+                    {getUserLabel(selectedEvent)}
+                  </dd>
+                </div>
+                <div className="min-w-0">
+                  <dt className="text-xs text-muted-foreground">Install ID</dt>
+                  <dd className="mt-1 font-mono text-xs">
+                    <HashValueDisplay
+                      value={selectedInstallId}
+                      buttonClassName="min-h-11 px-3 lg:min-h-0 lg:px-1.5"
+                    />
+                  </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 ? (
+                      <HashValueDisplay
+                        value={lastKnownBundleId}
+                        buttonClassName="min-h-11 px-3 lg:min-h-0 lg:px-1.5"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+            <Separator />
+          </>
+        ) : null}
+        {selectedInstallId !== undefined ? (
           isLoading ? (
-            <div className="flex flex-col gap-3 p-5">
+            <div
+              className="flex flex-col gap-3 p-6"
+              role="status"
+              aria-label="Loading installation history"
+            >
               <Skeleton className="h-10 w-full" />
               <Skeleton className="h-10 w-full" />
               <Skeleton className="h-10 w-full" />
             </div>
+          ) : error ? (
+            <div className="p-6">
+              <InsightsErrorAlert
+                error={error instanceof Error ? error : new Error()}
+                fallbackTitle="Installation history unavailable"
+              />
+            </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>
+              <div className="@[48rem]:hidden">
+                <EventHistoryList
+                  events={history.data}
+                  formatter={dateTimeFormat}
+                />
+              </div>
+              <div className="hidden @[48rem]:block">
+                <Table className="min-w-3xl table-fixed">
+                  <TableHeader>
+                    <TableRow className="[&>th]:px-4 sm:[&>th]:px-6">
+                      <TableHead className="w-64">Time</TableHead>
+                      <TableHead className="w-48">Event</TableHead>
+                      <TableHead className="w-32">App</TableHead>
+                      <TableHead className="w-52">Bundle</TableHead>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-              <InstallationPagination
+                  </TableHeader>
+                  <TableBody>
+                    {history.data.map((event) => (
+                      <TableRow
+                        className="[&>td]:px-4 [&>td]:py-4 [&>td]:align-top sm:[&>td]:px-6"
+                        key={event.id}
+                      >
+                        <TableCell className="whitespace-normal text-xs tabular-nums">
+                          <EventTimestamp
+                            value={event.receivedAtMs}
+                            formatter={dateTimeFormat}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <EventTypeBadge type={event.type} />
+                        </TableCell>
+                        <TableCell className="whitespace-normal text-xs">
+                          <div className="flex flex-col gap-2">
+                            <span>
+                              {event.platform === "ios" ? "iOS" : "Android"}{" "}
+                              {event.appVersion}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {event.channel}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="whitespace-normal text-xs">
+                          <EventBundleTransition event={event} />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <InsightsPagination
+                hasPrevious={pageNumber > 1}
                 label="Installation history"
-                limit={limit}
-                offset={offset}
+                nextCursor={history.nextCursor}
+                onNext={onNext}
+                onPrevious={onPrevious}
                 pageLength={history.data.length}
-                total={history.pagination.total}
-                onOffsetChange={onOffsetChange}
+                pageNumber={pageNumber}
               />
             </>
-          ) : 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-6 text-sm text-muted-foreground">
+                {pageNumber > 1 || history?.nextCursor
+                  ? "No bundle changes on this page."
+                  : "No bundle changes recorded yet."}
+              </div>
+              {history && (pageNumber > 1 || history.nextCursor) ? (
+                <InsightsPagination
+                  hasPrevious={pageNumber > 1}
+                  label="Installation history"
+                  nextCursor={history.nextCursor}
+                  onNext={onNext}
+                  onPrevious={onPrevious}
+                  pageLength={0}
+                  pageNumber={pageNumber}
+                />
+              ) : null}
+            </>
           )
-        ) : (
-          <div className="p-5 pt-0 text-sm text-muted-foreground">
-            Choose an installation to inspect its update history.
-          </div>
-        )}
+        ) : null}
       </CardContent>
     </Card>
   );