Service worker fallback (#146)

Signed-off-by: Nik Nasr <[email protected]>

apps/web-ui/app/root.tsx

@@ -86,7 +86,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="msapplication-TileColor" content="#222452" />
         <meta name="theme-color" content="#f3f4f6"></meta>
         <meta name="version" content={globalThis.env.VERSION} />
-        <title>Restate UI</title>
+        <title>Restate</title>
         <Meta />
         <Links />
       </head>

apps/web-ui/app/routes/invocations.tsx

@@ -2,3 +2,6 @@ import { invocations } from '@restate/features/invocations-route';
 
 export default invocations.Component;
 export const clientLoader = invocations.clientLoader;
+export function meta() {
+  return [{ title: 'Restate - Invocations' }];
+}

apps/web-ui/app/routes/overview.tsx

@@ -1,3 +1,6 @@
 import { overview } from '@restate/features/overview-route';
 
+export function meta() {
+  return [{ title: 'Restate - Overview' }];
+}
 export default overview.Component;

apps/web-ui/app/tailwind.css

@@ -11,3 +11,7 @@
 *[data-testid='underlay'] {
   pointer-events: none;
 }
+
+*[tabindex='0']:not(:has(*)) {
+  outline: none;
+}

libs/data-access/admin-api/src/lib/api/client.ts

@@ -6,7 +6,11 @@ import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
 import type { FetchResponse, Middleware } from 'openapi-fetch';
 import createClient from 'openapi-fetch';
 
-const client = createClient<paths>({});
+const client = createClient<paths>({
+  fetch: (...args) => {
+    return globalThis.fetch(...args);
+  },
+});
 const errorMiddleware: Middleware = {
   async onResponse({ response, request }) {
     if (!response.ok) {

libs/data-access/middleware-service-worker/src/lib/queryFetcher.ts

@@ -0,0 +1,20 @@
+import { query } from '@restate/data-access/query';
+
+const fetchHandler: ProxyHandler<typeof globalThis.fetch> = {
+  apply: async function (target, thisArg, argumentsList) {
+    const [resource, init] = argumentsList as [RequestInfo, RequestInit?];
+    const url = typeof resource === 'string' ? resource : resource.url;
+    const urlObject = new URL(url);
+    if (urlObject.pathname.startsWith('/query/')) {
+      const response = query(new Request(resource, init));
+      if (response) {
+        return response;
+      }
+    }
+
+    return target.call(thisArg, resource, init);
+  },
+};
+
+const originalFetch = globalThis.fetch;
+export const queryFetcher = new Proxy(originalFetch, fetchHandler);

libs/data-access/middleware-service-worker/src/lib/register.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+import { queryFetcher } from './queryFetcher';
 import workerUrl from './worker?worker&url';
 
 export async function register() {
@@ -22,6 +23,7 @@ export async function register() {
       await navigator.serviceWorker.ready;
     } catch (error) {
       console.error(`Registration failed with ${error}`);
+      globalThis.fetch = queryFetcher;
     }
   }
 }

libs/features/invocations-route/src/lib/invocations.route.tsx

@@ -338,7 +338,7 @@ function Component() {
 
   return (
     <SnapshotTimeProvider lastSnapshot={dataUpdatedAt}>
-      <div className="flex flex-col flex-auto gap-2">
+      <div className="flex flex-col flex-auto gap-2 relative">
         <Footnote data={data} isFetching={isFetching} />
 
         <Table
@@ -515,7 +515,7 @@ function Footnote({
   const { isPast, ...parts } = durationSinceLastSnapshot(now);
   const duration = formatDurations(parts);
   return (
-    <div className="w-full text-center text-xs text-gray-500/80">
+    <div className="w-full text-center text-xs text-gray-500/80 absolute -top-6">
       {data.total_count ? (
         <>
           <span>{data.rows.length}</span>