Fix modals display and Workers bug

golemcloud · Jan 22, 2025 · 7bb1887 · 7bb1887
1 parent 6d2fd12
commit 7bb1887
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 148 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/golem-ui-service/frontend/src/api/components.ts b/golem-ui-service/frontend/src/api/components.ts
@@ -1,4 +1,8 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 
 import { Component } from "../types/api";
 import { GolemError } from "../types/error";
@@ -12,7 +16,8 @@ export const componentKeys = {
   list: (filters: Record<string, unknown>) =>
     [...componentKeys.lists(), filters] as const,
   details: () => [...componentKeys.all, "detail"] as const,
-  detail: (id: string,version:string|number) => [...componentKeys.details(), id, version] as const,
+  detail: (id: string, version: string | number) =>
+    [...componentKeys.details(), id, version] as const,
   versions: (id: string) => [...componentKeys.detail(id), "versions"] as const,
 };
 
@@ -26,7 +31,7 @@ export const getComponents = async (componentName?: string) => {
 
 export const getComponentVersions = async (componentId: string) => {
   const { data } = await apiClient.get<Component[]>(
-    `/v1/components/${componentId}`,
+    `/v1/components/${componentId}`
   );
   return data;
 };
@@ -38,10 +43,10 @@ export const deleteComponent = async (componentId: string) => {
 
 export const getComponentVersion = async (
   componentId: string,
-  version: string | number,
+  version: string | number
 ) => {
   const { data } = await apiClient.get<Component>(
-    `/v1/components/${componentId}/versions/${version}`,
+    `/v1/components/${componentId}/versions/${version}`
   );
   return data;
 };
@@ -69,14 +74,14 @@ export const updateComponent = async ({
       headers: {
         "Content-Type": "multipart/form-data",
       },
-    },
+    }
   );
   return data;
 };
 
 // Hooks
 export const useComponents = (
-  componentName?: string,
+  componentName?: string
 ): {
   data: Component[];
   isLoading: boolean;
@@ -140,7 +145,7 @@ export const useDeleteComponent = () => {
 
 export const useComponent = (
   componentId: string,
-  version: string | number,
+  version: string | number
 ): {
   data: Component;
   isLoading: boolean;
@@ -150,14 +155,14 @@ export const useComponent = (
     queryFn: () => getComponentVersion(componentId, version),
     onError: (error: Error | GolemError) =>
       displayError(error, "Error fetching component"),
-    enabled: !!componentId, // Only run if componentId is provided
+    enabled: !!componentId && !!version, // Only run if componentId is provided
     cacheTime: 0, // Disable cache
   });
 };
 
 export const getComponent = async (componentId: string) => {
   const { data } = await apiClient.get<Component>(
-    `/v1/components/${componentId}/latest`,
+    `/v1/components/${componentId}/latest`
   );
   return data;
 };
diff --git a/golem-ui-service/frontend/src/api/workers.ts b/golem-ui-service/frontend/src/api/workers.ts
@@ -44,21 +44,22 @@ export const getWorkers = async (
   componentId: string,
   filter?: WorkerFilter[],
   cursor?: string,
-  count?: number,
+  count?: number
 ) => {
   if (!componentId) return { workers: [] };
   const { data } = await apiClient.get<WorkerListResponse>(
     `/v1/components/${componentId}/workers`,
     {
       params: { filter, cursor, count },
-    },
+    }
   );
   return data;
 };
 
 export const getWorker = async (componentId: string, workerName: string) => {
+  console.log("called getWorker");
   const { data } = await apiClient.get<Worker>(
-    `/v1/components/${componentId}/workers/${workerName}`,
+    `/v1/components/${componentId}/workers/${workerName}`
   );
   return data;
 };
@@ -71,11 +72,11 @@ export interface CreateWorkerPayload {
 
 export const createWorker = async (
   componentId: string,
-  payload: CreateWorkerPayload,
+  payload: CreateWorkerPayload
 ) => {
   const { data } = await apiClient.post(
     `/v1/components/${componentId}/workers`,
-    payload,
+    payload
   );
   return data;
 };
@@ -84,11 +85,11 @@ export const invokeWorker = async (
   componentId: string,
   workerName: string,
   functionName: string,
-  params: Record<string, unknown>,
+  params: Record<string, unknown>
 ) => {
   const { data } = await apiClient.post(
     `/v1/components/${componentId}/workers/${workerName}/invoke-and-await?function=${functionName}`,
-    params,
+    params
   );
   return data;
 };
@@ -116,12 +117,7 @@ interface InvokeWorkerVariables {
   params: Record<string, unknown>;
 }
 export const useInvokeWorker = (
-  options?: UseMutationOptions<
-    void,
-    GolemError,
-    InvokeWorkerVariables,
-    unknown
-  >,
+  options?: UseMutationOptions<void, GolemError, InvokeWorkerVariables, unknown>
 ): UseMutationResult<void, GolemError, InvokeWorkerVariables, unknown> => {
   console.log(options);
   return useMutation<void, GolemError, InvokeWorkerVariables, unknown>({
@@ -132,7 +128,7 @@ export const useInvokeWorker = (
 
 export const deleteWorker = async (componentId: string, workerName: string) => {
   const { data } = await apiClient.delete(
-    `/v1/components/${componentId}/workers/${workerName}`,
+    `/v1/components/${componentId}/workers/${workerName}`
   );
   return data;
 };
@@ -148,7 +144,7 @@ export const interruptWorker = async (workerId: {
     null,
     {
       params: { "recovery-immediately": recoverImmediately },
-    },
+    }
   );
   return data;
 };
@@ -159,7 +155,7 @@ export const resumeWorker = async (workerId: {
   recoverImmediately?: boolean;
 }) => {
   const { data } = await apiClient.post(
-    `/v1/components/${workerId.componentId}/workers/${workerId.workerName}/resume`,
+    `/v1/components/${workerId.componentId}/workers/${workerId.workerName}/resume`
   );
   return data;
 };
@@ -169,13 +165,13 @@ export const getWorkerLogs = async (
   workerName: string,
   count: number,
   cursor?: string,
-  query?: string,
+  query?: string
 ) => {
   const { data } = await apiClient.get(
     `/v1/components/${componentId}/workers/${workerName}/oplog`,
     {
       params: { cursor, count, query },
-    },
+    }
   );
   return data;
 };
@@ -185,7 +181,7 @@ export const useWorkers = (
   componentId: string,
   filter?: WorkerFilter[],
   cursor?: string,
-  count?: number,
+  count?: number
 ): {
   data: WorkerListResponse | undefined;
   isLoading: boolean;
@@ -201,7 +197,7 @@ export const useWorkers = (
 
 export const useWorker = (
   componentId: string,
-  workerName: string,
+  workerName: string
 ): {
   data: Worker | undefined;
   isLoading: boolean;
@@ -256,15 +252,15 @@ interface InterruptWorkerParams {
 }
 
 export const useInterruptWorker = (
-  options?: UseMutationOptions<void, GolemError, InterruptWorkerParams>,
+  options?: UseMutationOptions<void, GolemError, InterruptWorkerParams>
 ) => {
   const queryClient = useQueryClient();
 
   return useMutation<void, GolemError, InterruptWorkerParams, unknown>({
     mutationFn: interruptWorker,
     onSuccess: (
       _: void,
-      { componentId, workerName }: InterruptWorkerParams,
+      { componentId, workerName }: InterruptWorkerParams
     ) => {
       // Invalidate specific worker query
       queryClient.invalidateQueries({
@@ -285,7 +281,7 @@ export const useResumeWorker = (
     void,
     GolemError,
     { componentId: string; workerName: string }
-  >,
+  >
 ) => {
   const queryClient = useQueryClient();
 
@@ -299,7 +295,7 @@ export const useResumeWorker = (
       }: {
         componentId: string;
         workerName: string;
-      },
+      }
     ) => {
       // Invalidate specific worker query
       queryClient.invalidateQueries({
@@ -322,7 +318,7 @@ export const useWorkerLogs = (
   workerName: string,
   count: number,
   cursor?: string,
-  query?: string,
+  query?: string
 ) => {
   return useQuery({
     queryKey: ["workerLogs", componentId, workerName, count, cursor, query],
@@ -348,22 +344,22 @@ interface WorkerFilesResponse {
 
 export const getWorkerFiles = async (
   componentId: string,
-  workerName: string,
+  workerName: string
 ): Promise<WorkerFilesResponse> => {
   const { data } = await apiClient.get<WorkerFilesResponse>(
-    `/v1/components/${componentId}/workers/${workerName}/files`,
+    `/v1/components/${componentId}/workers/${workerName}/files`
   );
   return data;
 };
 
 export const downloadWorkerFile = async (
   componentId: string,
   workerName: string,
-  fileName: string,
+  fileName: string
 ): Promise<Blob> => {
   const { data } = await apiClient.get(
     `/v1/components/${componentId}/workers/${workerName}/file-contents/${fileName}`,
-    { responseType: "blob" },
+    { responseType: "blob" }
   );
   return data;
 };

diff --git a/golem-ui-service/frontend/src/components/api/ApiDefinitionModal.tsx b/golem-ui-service/frontend/src/components/api/ApiDefinitionModal.tsx
@@ -168,7 +168,7 @@ export const ApiDefinitionModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50 backdrop-blur-sm pt-48">
       <div className="bg-card rounded-xl p-6 max-w-md w-full shadow-xl">
         <div className="flex justify-between items-start mb-6">
           <div className="flex items-center gap-3">

diff --git a/golem-ui-service/frontend/src/components/api/ApiRoutesModal.tsx b/golem-ui-service/frontend/src/components/api/ApiRoutesModal.tsx
@@ -403,7 +403,7 @@ export const RouteModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-card bg-opacity-50 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+    <div className="fixed inset-0 bg-card bg-opacity-50 flex items-center justify-center p-4 z-50 backdrop-blur-sm pt-48">
       <div className="bg-card rounded-lg p-6 max-w-4xl w-full shadow-xl border border-card/85">
         <div className="flex justify-between items-start mb-6">
           <h2 className="text-xl font-semibold flex items-center gap-2">

diff --git a/golem-ui-service/frontend/src/components/api/DeployModal.tsx b/golem-ui-service/frontend/src/components/api/DeployModal.tsx
@@ -60,7 +60,7 @@ export const DeployModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 pt-48">
       <div className="bg-card rounded-lg p-6 max-w-md w-full">
         <div className="flex justify-between items-start mb-6">
           <div>

diff --git a/golem-ui-service/frontend/src/components/components/CreateComponentModal.tsx b/golem-ui-service/frontend/src/components/components/CreateComponentModal.tsx
@@ -259,7 +259,7 @@ const CreateComponentModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50 backdrop-blur-sm pt-48">
       <div className="bg-card rounded-xl p-6 max-w-md w-full shadow-xl">
         <div className="flex justify-between items-start mb-6">
           <div className="flex items-center gap-3">

diff --git a/golem-ui-service/frontend/src/components/layout/Layout.tsx b/golem-ui-service/frontend/src/components/layout/Layout.tsx
@@ -168,7 +168,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             </div>
             <div className="flex items-center gap-4">
               <a
-                href="https://docs.golem.cloud"
+                href="https://learn.golem.cloud"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-sm text-gray-500 hover:text-muted-foreground transition-colors"

diff --git a/golem-ui-service/frontend/src/components/plugins/CreatePluginModal.tsx b/golem-ui-service/frontend/src/components/plugins/CreatePluginModal.tsx
@@ -114,7 +114,7 @@ export const CreatePluginModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-start md:items-center justify-center p-4 z-50 backdrop-blur-sm overflow-y-auto">
+    <div className="fixed inset-0 bg-black/60 flex items-start md:items-center justify-center p-4 z-50 backdrop-blur-sm overflow-y-auto pt-48">
       <div className="bg-card rounded-xl p-4 md:p-6 w-full max-w-2xl shadow-xl my-4 md:my-0">
         <div className="flex justify-between items-start mb-4 md:mb-6">
           <div className="flex items-center gap-2 md:gap-3">

diff --git a/golem-ui-service/frontend/src/lib/api-client.ts b/golem-ui-service/frontend/src/lib/api-client.ts
@@ -2,8 +2,8 @@ import axios from "axios";
 
 // Create axios instance with default config
 export const apiClient = axios.create({
-  baseURL: "/api",
-  // baseURL: "http://localhost:3000/api",
+  // baseURL: "/api",
+  baseURL: "http://localhost:3000/api",
   // baseURL: "http://localhost:9881",
   headers: {
     "Content-Type": "application/json",