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

package/src/routes/installations.tsx

@@ -1,189 +1,341 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useEffect, useMemo, useState } from "react";
+import {
+  createFileRoute,
+  useElementScrollRestoration,
+} from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
-import { useAnalyticsCapability } from "@/components/features/analytics/AnalyticsCapabilityContext";
-import { InstallationHistoryCard } from "@/components/features/analytics/InstallationHistoryCard";
-import { InstallationMatchesCard } from "@/components/features/analytics/InstallationMatchesCard";
+import { EventHistoryCard } from "@/components/features/insights/EventHistoryCard";
+import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
+import { InstallationHistoryCard } from "@/components/features/insights/InstallationHistoryCard";
+import { InstallationMatchesCard } from "@/components/features/insights/InstallationMatchesCard";
 import {
-  InstallationPageHeader,
   InstallationResultsSkeleton,
   InstallationSearchPanel,
-} from "@/components/features/analytics/InstallationPageHeader";
-import {
-  ensureAnalyticsRouteAccess,
-  isAnalyticsQueryEnabled,
-} from "@/lib/analytics-api";
+} from "@/components/features/insights/InstallationPageHeader";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
-  type InstallationSearchRow,
-  useInstallationHistoryQuery,
-  useInstallationSearchQuery,
-} from "@/lib/api";
+  useInsightsEventsQuery,
+  useInsightsInstallationEventsQuery,
+  useInsightsInstallationQuery,
+  useInsightsInstallationsQuery,
+} from "@/lib/insights-api";
 
-import { validateInstallationsSearch } from "./-installations-search";
+import {
+  getInsightsScrollRestorationKey,
+  validateInstallationsSearch,
+} from "./-installations-search";
 
 const SEARCH_LIMIT = 20;
-const HISTORY_LIMIT = 50;
+const EVENT_LIMIT = 50;
+const freshBefore = () => Date.now();
+const pushCursor = (stack: readonly string[], cursor: string | undefined) => [
+  ...stack,
+  cursor ?? "",
+];
+const popCursor = (stack: readonly string[]) => ({
+  cursor: stack?.at(-1) || undefined,
+  stack: stack.slice(0, -1),
+});
 
 export const Route = createFileRoute("/installations")({
-  beforeLoad: ({ context }) => ensureAnalyticsRouteAccess(context.queryClient),
   component: InstallationsPage,
   validateSearch: validateInstallationsSearch,
 });
 
 function InstallationsPage() {
-  const capability = useAnalyticsCapability();
-  const analyticsQueriesEnabled = isAnalyticsQueryEnabled(capability);
   const search = Route.useSearch();
   const navigate = Route.useNavigate();
   const [draftQuery, setDraftQuery] = useState(search.query ?? "");
+  const [initialEventsBefore] = useState(freshBefore);
+  const [initialHistoryBefore] = useState(freshBefore);
+  const [eventsBack, setEventsBack] = useState<readonly string[]>([]);
+  const [searchBack, setSearchBack] = useState<readonly string[]>([]);
+  const [historyBack, setHistoryBack] = useState<readonly string[]>([]);
+  const query = search.query?.trim() ?? "";
+  const hasSearchQuery = query.length > 0;
+  const hasSelection = search.installId !== undefined;
+  const hasLookup = hasSearchQuery || hasSelection;
+  const eventsBefore = search.eventsBefore ?? initialEventsBefore;
+  const historyBefore = search.historyBefore ?? initialHistoryBefore;
+
+  const updateSearch = (next: Partial<typeof search>, replace = false) => {
+    void navigate({
+      to: "/installations",
+      search: { ...search, ...next },
+      replace,
+    });
+  };
 
   useEffect(() => {
     setDraftQuery(search.query ?? "");
   }, [search.query]);
 
-  const query = search.query?.trim() ?? "";
-  const {
-    data: results,
-    error: searchError,
-    isLoading: isSearchLoading,
-  } = useInstallationSearchQuery(
+  useEffect(() => {
+    if (search.eventsBefore === undefined) {
+      updateSearch({ eventsBefore }, true);
+    }
+  }, [eventsBefore, search.eventsBefore]);
+
+  useEffect(() => {
+    if (hasSelection && search.historyBefore === undefined) {
+      updateSearch({ historyBefore }, true);
+    }
+  }, [hasSelection, historyBefore, search.historyBefore]);
+
+  const events = useInsightsEventsQuery(
     {
-      query,
+      beforeReceivedAtMs: eventsBefore,
+      cursor: search.eventsCursor,
+      limit: EVENT_LIMIT,
+    },
+    !hasLookup,
+  );
+  const matches = useInsightsInstallationsQuery(
+    {
+      cursor: search.searchCursor,
+      identity: query,
       limit: SEARCH_LIMIT,
-      offset: search.searchOffset,
     },
-    analyticsQueriesEnabled,
+    hasSearchQuery,
   );
-  const selectedInstallId = search.installId ?? "";
-  const firstMatchingInstallId = results?.data[0]?.installId;
 
   useEffect(() => {
-    if (selectedInstallId || !firstMatchingInstallId) return;
-    void navigate({
-      to: "/installations",
-      search: {
-        query: search.query,
-        installId: firstMatchingInstallId,
-        searchOffset: search.searchOffset,
-        historyOffset: 0,
+    const firstInstallId = matches.data?.data[0]?.installId;
+    if (!hasSearchQuery || hasSelection || firstInstallId === undefined) return;
+    setHistoryBack([]);
+    updateSearch(
+      {
+        historyBefore: freshBefore(),
+        historyCursor: undefined,
+        installId: firstInstallId,
       },
-      replace: true,
-    });
-  }, [
-    firstMatchingInstallId,
-    navigate,
-    search.query,
-    search.searchOffset,
-    selectedInstallId,
-  ]);
+      true,
+    );
+  }, [hasSearchQuery, hasSelection, matches.data?.data]);
 
-  const {
-    data: history,
-    error: historyError,
-    isLoading: isHistoryLoading,
-  } = useInstallationHistoryQuery(
+  const selectedInstallation = useInsightsInstallationQuery(
+    search.installId ?? "",
+    hasSelection,
+  );
+  const history = useInsightsInstallationEventsQuery(
     {
-      installId: selectedInstallId,
-      limit: HISTORY_LIMIT,
-      offset: search.historyOffset,
+      beforeReceivedAtMs: historyBefore,
+      cursor: search.historyCursor,
+      installId: search.installId ?? "",
+      limit: EVENT_LIMIT,
     },
-    analyticsQueriesEnabled,
+    hasSelection,
   );
-  const selectedInstallation = useMemo(
-    () =>
-      results?.data.find(
-        (event: InstallationSearchRow) => event.installId === selectedInstallId,
-      ) ?? null,
-    [results?.data, selectedInstallId],
-  );
-  const selectedEvent = selectedInstallation ?? history?.data[0];
+  const selectedEvent =
+    selectedInstallation.data ??
+    matches.data?.data.find(
+      ({ installId }) => installId === search.installId,
+    ) ??
+    history.data?.data[0];
 
-  const updateSearch = (
-    nextSearch: {
-      query?: string;
-      installId?: string;
-      searchOffset?: number;
-      historyOffset?: number;
-    },
-    replace = false,
-  ) => {
-    void navigate({
-      to: "/installations",
-      search: {
-        query: nextSearch.query,
-        installId: nextSearch.installId,
-        searchOffset: nextSearch.searchOffset ?? 0,
-        historyOffset: nextSearch.historyOffset ?? 0,
-      },
-      replace,
+  const scrollRestorationId = hasLookup
+    ? `installation-history-${search.historyCursor ?? "first"}`
+    : `all-events-${search.eventsCursor ?? "first"}`;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollEntry = useElementScrollRestoration({
+    id: scrollRestorationId,
+    getKey: getInsightsScrollRestorationKey,
+  });
+  useLayoutEffect(() => {
+    if (!hasLookup && !events.isLoading && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollEntry?.scrollY ?? 0;
+    }
+  }, [events.isLoading, hasLookup, scrollEntry?.scrollY, scrollRestorationId]);
+
+  const clearLookup = () => {
+    setDraftQuery("");
+    setHistoryBack([]);
+    setSearchBack([]);
+    updateSearch({
+      historyBefore: undefined,
+      historyCursor: undefined,
+      installId: undefined,
+      query: undefined,
+      searchCursor: undefined,
     });
   };
-
-  const hasQuery = query.length > 0 || selectedInstallId.length > 0;
+  const installationLookup = (
+    <InstallationSearchPanel
+      draftQuery={draftQuery}
+      onClear={clearLookup}
+      onDraftQueryChange={setDraftQuery}
+      onSubmit={() => {
+        const nextQuery = draftQuery.trim();
+        if (!nextQuery) {
+          clearLookup();
+          return;
+        }
+        setHistoryBack([]);
+        setSearchBack([]);
+        updateSearch({
+          historyBefore: undefined,
+          historyCursor: undefined,
+          installId: undefined,
+          query: nextQuery,
+          searchCursor: undefined,
+        });
+      }}
+    />
+  );
 
   return (
     <div className="flex h-svh min-h-0 flex-col">
-      <InstallationPageHeader />
-      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
-          <InstallationSearchPanel
-            draftQuery={draftQuery}
-            hasQuery={hasQuery}
-            onClear={() => {
-              setDraftQuery("");
-              updateSearch({ query: undefined, installId: undefined });
-            }}
-            onDraftQueryChange={setDraftQuery}
-            onSubmit={() => {
-              const nextQuery = draftQuery.trim();
-              updateSearch({
-                query: nextQuery || undefined,
-                installId: undefined,
-              });
-            }}
-          />
-          {!hasQuery ? null : isSearchLoading ? (
+      <InsightsPageHeader view="events" />
+      <div
+        key={scrollRestorationId}
+        ref={scrollRef}
+        data-scroll-restoration-id={scrollRestorationId}
+        id="insights-events-scroll"
+        className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6"
+      >
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 sm:gap-6">
+          {hasLookup ? (
+            <Card className="shadow-sm">
+              <CardContent className="flex flex-col gap-3 p-4 sm:p-6">
+                <Button
+                  className="-ml-2 h-11 self-start lg:h-8"
+                  onClick={clearLookup}
+                  variant="ghost"
+                >
+                  <ArrowLeft aria-hidden="true" data-icon="inline-start" />
+                  Back to all events
+                </Button>
+                {installationLookup}
+              </CardContent>
+            </Card>
+          ) : null}
+          {!hasLookup ? (
+            <EventHistoryCard
+              error={events.error}
+              eventsLocation={{
+                eventsBefore,
+                eventsCursor: search.eventsCursor,
+              }}
+              history={events.data}
+              isFetching={events.isFetching}
+              isLoading={events.isLoading}
+              onNext={() => {
+                if (!events.data?.nextCursor) return;
+                setEventsBack(pushCursor(eventsBack, search.eventsCursor));
+                updateSearch(
+                  {
+                    eventsCursor: events.data.nextCursor,
+                  },
+                  true,
+                );
+              }}
+              onPrevious={() => {
+                const previous = popCursor(eventsBack);
+                setEventsBack(previous.stack);
+                updateSearch(
+                  {
+                    eventsCursor: previous.cursor,
+                  },
+                  true,
+                );
+              }}
+              onRefresh={() => {
+                setEventsBack([]);
+                updateSearch(
+                  {
+                    eventsBefore: freshBefore(),
+                    eventsCursor: undefined,
+                  },
+                  true,
+                );
+              }}
+              pageNumber={eventsBack.length + 1}
+            >
+              {installationLookup}
+            </EventHistoryCard>
+          ) : matches.isLoading && hasSearchQuery ? (
             <InstallationResultsSkeleton />
           ) : (
-            <div className="grid min-h-0 min-w-0 items-stretch gap-6 lg:min-h-96 lg:grid-cols-[minmax(18rem,20rem)_minmax(0,1fr)]">
-              <InstallationMatchesCard
-                error={searchError}
-                limit={SEARCH_LIMIT}
-                offset={search.searchOffset}
-                results={results}
-                selectedInstallId={selectedInstallId}
-                onOffsetChange={(searchOffset) =>
-                  updateSearch({
-                    query: search.query,
-                    installId: undefined,
-                    searchOffset,
-                    historyOffset: 0,
-                  })
-                }
-                onSelect={(installId) =>
-                  updateSearch({
-                    query: search.query,
-                    installId,
-                    searchOffset: search.searchOffset,
-                  })
-                }
-              />
+            <div
+              className={`grid min-h-0 min-w-0 items-stretch gap-4 sm:gap-6 ${hasSearchQuery ? "lg:min-h-96 lg:grid-cols-[minmax(18rem,20rem)_minmax(0,1fr)]" : "lg:grid-cols-1"}`}
+            >
+              {hasSearchQuery ? (
+                <InstallationMatchesCard
+                  error={matches.error}
+                  onNext={() => {
+                    if (!matches.data?.nextCursor) return;
+                    setSearchBack(pushCursor(searchBack, search.searchCursor));
+                    updateSearch(
+                      {
+                        installId: undefined,
+                        searchCursor: matches.data.nextCursor,
+                      },
+                      true,
+                    );
+                  }}
+                  onPrevious={() => {
+                    const previous = popCursor(searchBack);
+                    setSearchBack(previous.stack);
+                    updateSearch(
+                      {
+                        installId: undefined,
+                        searchCursor: previous.cursor,
+                      },
+                      true,
+                    );
+                  }}
+                  onSelect={(installId) => {
+                    setHistoryBack([]);
+                    updateSearch({
+                      historyBefore: freshBefore(),
+                      historyCursor: undefined,
+                      installId,
+                    });
+                  }}
+                  pageNumber={searchBack.length + 1}
+                  results={matches.data}
+                  selectedInstallId={search.installId}
+                />
+              ) : null}
               <InstallationHistoryCard
-                error={historyError}
-                history={history}
-                isLoading={isHistoryLoading}
-                limit={HISTORY_LIMIT}
-                offset={search.historyOffset}
+                error={history.error ?? selectedInstallation.error}
+                history={history.data}
+                isLoading={history.isLoading || selectedInstallation.isLoading}
+                onNext={() => {
+                  if (!history.data?.nextCursor) return;
+                  setHistoryBack(pushCursor(historyBack, search.historyCursor));
+                  updateSearch(
+                    {
+                      historyCursor: history.data.nextCursor,
+                    },
+                    true,
+                  );
+                }}
+                onPrevious={() => {
+                  const previous = popCursor(historyBack);
+                  setHistoryBack(previous.stack);
+                  updateSearch(
+                    {
+                      historyCursor: previous.cursor,
+                    },
+                    true,
+                  );
+                }}
+                onRefresh={() => {
+                  setHistoryBack([]);
+                  updateSearch(
+                    {
+                      historyBefore: freshBefore(),
+                      historyCursor: undefined,
+                    },
+                    true,
+                  );
+                }}
+                pageNumber={historyBack.length + 1}
                 selectedEvent={selectedEvent}
-                selectedInstallId={selectedInstallId}
-                onOffsetChange={(historyOffset) =>
-                  updateSearch({
-                    query: search.query,
-                    installId: selectedInstallId,
-                    searchOffset: search.searchOffset,
-                    historyOffset,
-                  })
-                }
+                selectedInstallId={search.installId}
               />
             </div>
           )}

package/src/styles.css

@@ -38,6 +38,8 @@ code {
   --accent: oklch(0.646 0.222 41.116);
   --accent-foreground: oklch(0.98 0.016 73.684);
   --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.448 0.119 151.328);
+  --warning: oklch(0.473 0.137 46.201);
   --border: oklch(0.923 0.003 48.717);
   --input: oklch(0.923 0.003 48.717);
   --ring: oklch(0.709 0.01 56.259);
@@ -74,6 +76,8 @@ code {
   --accent: oklch(0.705 0.213 47.604);
   --accent-foreground: oklch(0.98 0.016 73.684);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.792 0.209 151.711);
+  --warning: oklch(0.828 0.189 84.429);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.553 0.013 58.071);
@@ -111,6 +115,8 @@ code {
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);

package/.output/public/assets/AnalyticsCapabilityContext-BCke57-7.js

@@ -1 +0,0 @@
-import{Lr as e,Pr as t,ir as n}from"./createServerFn-gM2-LFBy.js";var r=e(t(),1),i=r.use,a=typeof window<`u`?r.useLayoutEffect:r.useEffect;function o(e){let t=r.useRef({value:e,prev:null}),n=t.current.value;return e!==n&&(t.current={value:e,prev:n}),t.current.prev}function s(e,t,n={},i={}){r.useEffect(()=>{if(!e.current||i.disabled||typeof IntersectionObserver!=`function`)return;let r=new IntersectionObserver(([e])=>{t(e)},n);return r.observe(e.current),()=>{r.disconnect()}},[t,n,i.disabled,e])}function c(e){let t=r.useRef(null);return r.useImperativeHandle(e,()=>t.current,[]),t}var l=r.createContext(null);function u(e){return r.useContext(l)}function d(e){let t=u();return r.useCallback(n=>t.navigate({...n,from:n.from??e?.from}),[e?.from,t])}var f=n(),p=(0,r.createContext)({status:`unresolved`});function m({children:e,value:t}){return(0,f.jsx)(p.Provider,{value:t,children:e})}var h=()=>(0,r.useContext)(p);export{l as a,s as c,u as i,a as l,h as n,i as o,d as r,c as s,m as t,o as u};