Implement query bar UI (#140)

Signed-off-by: Nik Nasr <[email protected]>
restatedev · Jan 15, 2025 · 15076e8 · 15076e8
1 parent 1e85c6d
commit 15076e8
Show file tree

Hide file tree

Showing 58 changed files with 2,216 additions and 279 deletions.
diff --git a/apps/web-ui/app/root.tsx b/apps/web-ui/app/root.tsx
@@ -5,6 +5,7 @@ import {
   Path,
   Scripts,
   ScrollRestoration,
+  useHref,
   useNavigate,
 } from 'react-router';
 import styles from './tailwind.css?url';
@@ -90,7 +91,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body className="h-full font-sans">
-        <RouterProvider navigate={navigate}>
+        <RouterProvider navigate={navigate} useHref={useHref}>
           <LayoutProvider>{children}</LayoutProvider>
         </RouterProvider>
         <ScrollRestoration />

diff --git a/apps/web-ui/app/routes/invocations.tsx b/apps/web-ui/app/routes/invocations.tsx
@@ -1,3 +1,4 @@
 import { invocations } from '@restate/features/invocations-route';
 
 export default invocations.Component;
+export const clientLoader = invocations.clientLoader;
diff --git a/apps/web-ui/app/tailwind.css b/apps/web-ui/app/tailwind.css
@@ -7,3 +7,7 @@
     font-family: 'Inter var', 'Helvetica', system-ui, sans-serif;
   }
 }
+
+*[data-testid='underlay'] {
+  pointer-events: none;
+}
diff --git a/libs/data-access/admin-api/src/index.ts b/libs/data-access/admin-api/src/index.ts
@@ -1,4 +1,4 @@
 export * from './lib/api/client';
 export * from './lib/api/hooks';
-export type * from './lib/api/type';
+export * from './lib/api/type';
 export * from './lib/AdminBaseUrlProvider';
diff --git a/libs/data-access/admin-api/src/lib/api/hooks.ts b/libs/data-access/admin-api/src/lib/api/hooks.ts
@@ -1,5 +1,5 @@
 import type { paths, components } from './index'; // generated by openapi-typescript
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQueries, useQuery } from '@tanstack/react-query';
 import {
   adminApi,
   MutationOptions,
@@ -15,6 +15,7 @@ import type {
   ServiceName,
   Deployment,
   FilterItem,
+  Service,
 } from './type';
 
 type HookQueryOptions<
@@ -104,12 +105,18 @@ export function useListDeployments(
   options?: HookQueryOptions<'/deployments', 'get'>
 ) {
   const baseUrl = useAdminBaseUrl();
+  const queryOptions = adminApi('query', '/deployments', 'get', { baseUrl });
 
-  return useQuery({
-    ...adminApi('query', '/deployments', 'get', { baseUrl }),
+  const results = useQuery({
+    ...queryOptions,
     ...options,
     select: listDeploymentsSelector,
   });
+
+  return {
+    ...results,
+    queryKey: queryOptions.queryKey,
+  };
 }
 
 export function useHealth(options?: HookQueryOptions<'/health', 'get'>) {
@@ -169,6 +176,38 @@ export function useServiceDetails(
   return { ...results, queryKey: queryOptions.queryKey };
 }
 
+export function useListServices(
+  services: string[] = [],
+  options?: HookQueryOptions<'/services/{service}', 'get'>
+) {
+  const baseUrl = useAdminBaseUrl();
+
+  const results = useQueries({
+    queries: services.map((service) => ({
+      ...adminApi('query', '/services/{service}', 'get', {
+        baseUrl,
+        parameters: { path: { service } },
+      }),
+      staleTime: 0,
+      ...options,
+    })),
+    combine: (results) => {
+      return {
+        data: results.reduce((result, service) => {
+          if (service.data) {
+            result.set(service.data?.name, service.data);
+          }
+          return result;
+        }, new Map<string, Service>()),
+        isPending: results.some((result) => result.isPending),
+        promise: Promise.all(results.map(({ promise }) => promise)),
+      };
+    },
+  });
+
+  return results;
+}
+
 export function useDeploymentDetails(
   deployment: string,
   options?: HookQueryOptions<'/deployments/{deployment}', 'get'>

diff --git a/libs/data-access/admin-api/src/lib/api/index.d.ts b/libs/data-access/admin-api/src/lib/api/index.d.ts
@@ -849,14 +849,20 @@ export interface components {
       /** @enum {string} */
       type: 'NUMBER';
       /** @enum {string} */
-      operation: 'EQUALS' | 'NOT_EQUALS' | 'GREATER_THAN' | 'LESS_THAN';
+      operation:
+        | 'EQUALS'
+        | 'NOT_EQUALS'
+        | 'GREATER_THAN'
+        | 'LESS_THAN'
+        | 'GREATER_THAN_OR_EQUAL'
+        | 'LESS_THAN_OR_EQUAL';
       value?: number;
     };
     FilterStringItem: {
       /** @enum {string} */
       type: 'STRING';
       /** @enum {string} */
-      operation: 'EQUALS' | 'NOT_EQUALS' | 'CONTAINS';
+      operation: 'EQUALS' | 'NOT_EQUALS' | 'CONTAINS' | 'NOT_CONTAINS';
       value?: string;
     };
     FilterStringListItem: {
@@ -1130,7 +1136,8 @@ export interface components {
       /** Format: date-time */
       next_retry_at?: string;
       id: string;
-      invoked_by: string;
+      /** @enum {string} */
+      invoked_by: 'ingress' | 'service';
       /** @enum {string} */
       status:
         | 'succeeded'
@@ -1145,8 +1152,7 @@ export interface components {
         | 'ready';
       target: string;
       target_handler_name: string;
-      /** @enum {string} */
-      target_service_key?: 'ingress' | 'service';
+      target_service_key?: string;
       target_service_name: string;
       /** @enum {string} */
       target_service_ty: 'service' | 'virtual_object' | 'workflow';
@@ -1190,7 +1196,8 @@ export interface components {
       /** Format: date-time */
       next_retry_at?: string;
       id: string;
-      invoked_by: string;
+      /** @enum {string} */
+      invoked_by: 'ingress' | 'service';
       /** @enum {string} */
       status:
         | 'pending'
@@ -1202,8 +1209,7 @@ export interface components {
         | 'completed';
       target: string;
       target_handler_name: string;
-      /** @enum {string} */
-      target_service_key?: 'ingress' | 'service';
+      target_service_key?: string;
       target_service_name: string;
       /** @enum {string} */
       target_service_ty: 'service' | 'virtual_object' | 'workflow';

diff --git a/libs/data-access/admin-api/src/lib/api/output.json b/libs/data-access/admin-api/src/lib/api/output.json
@@ -2792,7 +2792,14 @@
           },
           "operation": {
             "type": "string",
-            "enum": ["EQUALS", "NOT_EQUALS", "GREATER_THAN", "LESS_THAN"]
+            "enum": [
+              "EQUALS",
+              "NOT_EQUALS",
+              "GREATER_THAN",
+              "LESS_THAN",
+              "GREATER_THAN_OR_EQUAL",
+              "LESS_THAN_OR_EQUAL"
+            ]
           },
           "value": {
             "type": "number"
@@ -2809,7 +2816,7 @@
           },
           "operation": {
             "type": "string",
-            "enum": ["EQUALS", "NOT_EQUALS", "CONTAINS"]
+            "enum": ["EQUALS", "NOT_EQUALS", "CONTAINS", "NOT_CONTAINS"]
           },
           "value": {
             "type": "string"
@@ -3693,7 +3700,8 @@
             "type": "string"
           },
           "invoked_by": {
-            "type": "string"
+            "type": "string",
+            "enum": ["ingress", "service"]
           },
           "status": {
             "type": "string",
@@ -3717,8 +3725,7 @@
             "type": "string"
           },
           "target_service_key": {
-            "type": "string",
-            "enum": ["ingress", "service"]
+            "type": "string"
           },
           "target_service_name": {
             "type": "string"
@@ -3835,7 +3842,8 @@
             "type": "string"
           },
           "invoked_by": {
-            "type": "string"
+            "type": "string",
+            "enum": ["ingress", "service"]
           },
           "status": {
             "type": "string",
@@ -3856,8 +3864,7 @@
             "type": "string"
           },
           "target_service_key": {
-            "type": "string",
-            "enum": ["ingress", "service"]
+            "type": "string"
           },
           "target_service_name": {
             "type": "string"

diff --git a/libs/data-access/admin-api/src/lib/api/query.json b/libs/data-access/admin-api/src/lib/api/query.json
@@ -845,7 +845,14 @@
           },
           "operation": {
             "type": "string",
-            "enum": ["EQUALS", "NOT_EQUALS", "GREATER_THAN", "LESS_THAN"]
+            "enum": [
+              "EQUALS",
+              "NOT_EQUALS",
+              "GREATER_THAN",
+              "LESS_THAN",
+              "GREATER_THAN_OR_EQUAL",
+              "LESS_THAN_OR_EQUAL"
+            ]
           },
           "value": {
             "type": "number"
@@ -862,7 +869,7 @@
           },
           "operation": {
             "type": "string",
-            "enum": ["EQUALS", "NOT_EQUALS", "CONTAINS"]
+            "enum": ["EQUALS", "NOT_EQUALS", "CONTAINS", "NOT_CONTAINS"]
           },
           "value": {
             "type": "string"
@@ -1617,7 +1624,8 @@
             "type": "string"
           },
           "invoked_by": {
-            "type": "string"
+            "type": "string",
+            "enum": ["ingress", "service"]
           },
           "status": {
             "type": "string",
@@ -1641,8 +1649,7 @@
             "type": "string"
           },
           "target_service_key": {
-            "type": "string",
-            "enum": ["ingress", "service"]
+            "type": "string"
           },
           "target_service_name": {
             "type": "string"
@@ -1759,7 +1766,8 @@
             "type": "string"
           },
           "invoked_by": {
-            "type": "string"
+            "type": "string",
+            "enum": ["ingress", "service"]
           },
           "status": {
             "type": "string",
@@ -1780,8 +1788,7 @@
             "type": "string"
           },
           "target_service_key": {
-            "type": "string",
-            "enum": ["ingress", "service"]
+            "type": "string"
           },
           "target_service_name": {
             "type": "string"

diff --git a/libs/data-access/admin-api/src/lib/api/type.ts b/libs/data-access/admin-api/src/lib/api/type.ts
@@ -75,3 +75,27 @@ export type FilterNumberItem = components['schemas']['FilterNumberItem'];
 export type FilterStringListItem =
   components['schemas']['FilterStringListItem'];
 export type FilterStringItem = components['schemas']['FilterStringItem'];
+
+export type HTTPDeployment = Exclude<Deployment, { arn: string }>;
+export type LambdaDeployment = Exclude<Deployment, { uri: string }>;
+export type DeploymentType = 'uri' | 'arn';
+export function isHttpDeployment(
+  deployment: Deployment
+): deployment is HTTPDeployment {
+  return 'uri' in deployment;
+}
+export function isLambdaDeployment(
+  deployment: Deployment
+): deployment is LambdaDeployment {
+  return 'arn' in deployment;
+}
+export function getEndpoint(deployment?: Deployment) {
+  if (!deployment) {
+    return undefined;
+  }
+  if (isHttpDeployment(deployment)) {
+    return deployment.uri;
+  } else {
+    return deployment.arn;
+  }
+}