Fix few issues with journal (#163)

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

apps/web-ui/app/root.tsx

@@ -34,6 +34,7 @@ import {
   DeleteInvocation,
   InvocationPanel,
 } from '@restate/features/invocation-route';
+import { Support } from '@restate/features/support';
 
 export const links: LinksFunction = () => [
   {
@@ -167,6 +168,7 @@ export default function App() {
         <ServicePlayground />
         <InvocationPanel />
         <DeleteInvocation />
+        <Support />
       </RestateContextProvider>
     </QueryProvider>
   );

apps/web-ui/tailwind.config.cjs

@@ -24,7 +24,7 @@ module.exports = withTV({
         code: '0.8125rem',
       },
       screens: {
-        '3xl': '1850px',
+        '3xl': '1950px',
       },
     },
   },

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

@@ -1,5 +1,10 @@
 import type { paths, components } from './index'; // generated by openapi-typescript
-import { useMutation, useQueries, useQuery } from '@tanstack/react-query';
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import {
   adminApi,
   MutationOptions,
@@ -17,6 +22,7 @@ import type {
   FilterItem,
   Service,
 } from './type';
+import { useEffect } from 'react';
 
 type HookQueryOptions<
   Path extends keyof paths,
@@ -354,6 +360,90 @@ export function useGetInvocationJournal(
   };
 }
 
+export function useGetInvocationJournalWithInvocation(
+  invocationId: string,
+  options?: HookQueryOptions<'/query/invocations/{invocationId}/journal', 'get'>
+) {
+  const baseUrl = useAdminBaseUrl();
+  const results = useQueries({
+    queries: [
+      {
+        ...adminApi(
+          'query',
+          '/query/invocations/{invocationId}/journal',
+          'get',
+          {
+            baseUrl,
+            parameters: { path: { invocationId } },
+          }
+        ),
+        ...options,
+      },
+      {
+        ...adminApi('query', '/query/invocations/{invocationId}', 'get', {
+          baseUrl,
+          parameters: { path: { invocationId } },
+        }),
+        refetchOnMount: options?.refetchOnMount !== false,
+        enabled: options?.enabled !== false,
+        staleTime: 0,
+      },
+    ],
+    combine: ([journalResults, invocationResults]) => {
+      return {
+        ...(journalResults.data &&
+          invocationResults.data && {
+            data: {
+              journal: journalResults.data,
+              invocation: invocationResults.data,
+            },
+          }),
+        isPending: journalResults.isPending || invocationResults.isPending,
+        isSuccess: journalResults.isSuccess && invocationResults.isSuccess,
+        dataUpdatedAt: Math.max(
+          journalResults.dataUpdatedAt,
+          invocationResults.dataUpdatedAt
+        ),
+        error: journalResults.error || invocationResults.error,
+      };
+    },
+  });
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    queryClient.setQueriesData(
+      {
+        predicate: (query) => {
+          return (
+            Array.isArray(query.queryKey) &&
+            query.queryKey.at(0) === '/query/invocations'
+          );
+        },
+      },
+      (oldData: ReturnType<typeof useListInvocations>['data']) => {
+        const newInvocation = results.data?.invocation;
+        if (!oldData || !newInvocation) {
+          return oldData;
+        } else {
+          return {
+            ...oldData,
+            rows: oldData.rows.map((oldInvocation) => {
+              if (oldInvocation.id === newInvocation.id) {
+                return newInvocation;
+              } else {
+                return oldInvocation;
+              }
+            }),
+          };
+        }
+      }
+    );
+  }, [queryClient, results]);
+
+  return results;
+}
+
 export function useGetVirtualObjectQueue(
   serviceName: string,
   key: string,

libs/data-access/query/src/lib/query.ts

@@ -107,10 +107,7 @@ async function getInvocationJournal(
       headers,
     }
   ).then(({ rows }) =>
-    // TODO only pass entries after current entry
-    rows
-      .map((entry, _, allEntries) => convertJournal(entry, allEntries))
-      .filter((entry) => !entry.entry_type?.startsWith('Notification'))
+    rows.map((entry, _, allEntries) => convertJournal(entry, allEntries))
   );
   return new Response(JSON.stringify({ entries }), {
     status: 200,

libs/features/invocation-route/src/lib/Failure.tsx

@@ -10,24 +10,41 @@ const failureStyle = tv({
   base: '',
   slots: {
     trigger:
-      'text-red-500 bg-white/70 border px-1.5 py-0 flex rounded-md items-center gap-1 [font-size:inherit] h-5',
-    errorIcon: 'h-3 w-3 shrink-0 text-red-500/90',
+      ' bg-white/70 border px-1.5 py-0 flex rounded-md items-center gap-1 [font-size:inherit] h-5',
+    errorIcon: 'h-3 w-3 shrink-0 ',
+  },
+  variants: {
+    isRetrying: {
+      true: {
+        trigger: 'text-orange-700',
+        errorIcon: 'text-orange-600',
+      },
+      false: {
+        trigger: 'text-red-500',
+        errorIcon: 'text-red-500/90',
+      },
+    },
+  },
+  defaultVariants: {
+    isRetrying: false,
   },
 });
 export function Failure({
   message,
   restate_code,
   className,
+  isRetrying,
 }: {
   restate_code?: string;
   message: string;
   className?: string;
+  isRetrying?: boolean;
 }) {
   const error = useMemo(
     () => new RestateError(message, restate_code),
     [message, restate_code]
   );
-  const { trigger, errorIcon } = failureStyle();
+  const { trigger, errorIcon } = failureStyle({ isRetrying });
 
   return (
     <Popover>
@@ -37,7 +54,10 @@ export function Failure({
           className={trigger({ className })}
           disabled={!error}
         >
-          <Icon name={IconName.CircleX} className={errorIcon()} />
+          <Icon
+            name={isRetrying ? IconName.TriangleAlert : IconName.CircleX}
+            className={errorIcon()}
+          />
           {restate_code}
           <Icon
             name={IconName.ChevronsUpDown}
@@ -50,7 +70,7 @@ export function Failure({
           <ErrorBanner
             error={error}
             wrap={error?.message.includes('\n')}
-            className="rounded-lg flex-auto w-[min(40rem,90vw)] [&_details]:max-h-full [&:has(details[open])]:h-[min(50vh,16rem)]  overflow-auto resize max-w-full max-h-full"
+            className="rounded-lg flex-auto max-w-[min(50rem,90vw)] [&_details]:max-h-full [&:has(details[open])]:h-[min(50vh,16rem)]  overflow-auto resize max-h-full"
           />
         </DropdownSection>
       </PopoverContent>