refactor: health check endpoint (#3635)

* Changed health check to use /health_check and to be modularized

* Added default value

* Added health constant to default export

* check cors before inserting custom headers

* Added get global variables check on init

* Updated global variables to start with undefined

* Fixed redirect when showGeneralSettings is disabled

* Added isOpen props to custom api generator

src/frontend/src/components/authSettingsGuard/index.tsx

@@ -13,6 +13,6 @@ export const AuthSettingsGuard = ({ children }) => {
   if (showGeneralSettings) {
     return children;
   } else {
-    return <CustomNavigate replace to="global-variables" />;
+    return <CustomNavigate replace to="/settings/global-variables" />;
   }
 };

src/frontend/src/controllers/API/api.tsx

@@ -103,8 +103,14 @@ function ApiInterceptor() {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
         }
 
-        for (const [key, value] of Object.entries(customHeaders)) {
-          config.headers[key] = value;
+        const currentOrigin = window.location.origin;
+        const requestUrl = new URL(config?.url as string, currentOrigin);
+
+        const urlIsFromCurrentOrigin = requestUrl.origin === currentOrigin;
+        if (urlIsFromCurrentOrigin) {
+          for (const [key, value] of Object.entries(customHeaders)) {
+            config.headers[key] = value;
+          }
         }
 
         return {

src/frontend/src/controllers/API/queries/health/use-get-health.ts

@@ -2,6 +2,7 @@ import {
   REFETCH_SERVER_HEALTH_INTERVAL,
   SERVER_HEALTH_INTERVAL,
 } from "@/constants/constants";
+import { HEALTH_CHECK_URL } from "@/customization/config-constants";
 import { useUtilityStore } from "@/stores/utilityStore";
 import { createNewError503 } from "@/types/factory/axios-error-503";
 import { keepPreviousData } from "@tanstack/react-query";
@@ -44,7 +45,9 @@ export const useGetHealthQuery: useQueryFunctionType<
         setTimeout(() => reject(createNewError503()), SERVER_HEALTH_INTERVAL),
       );
 
-      const apiPromise = api.get<getHealthResponse>("/health");
+      const apiPromise = api.get<getHealthResponse>(
+        HEALTH_CHECK_URL || "/health",
+      );
       const response = await Promise.race([apiPromise, timeoutPromise]);
       setHealthCheckTimeout(
         Object.values(response.data).some((value) => value !== "ok")

src/frontend/src/customization/components/custom-api-generator.tsx

@@ -1,3 +1,3 @@
-export function CustomAPIGenerator() {
+export function CustomAPIGenerator({ isOpen }: { isOpen: boolean }) {
   return <></>;
 }

src/frontend/src/customization/config-constants.ts

@@ -3,6 +3,7 @@ export const PORT = 3000;
 export const PROXY_TARGET = "http://127.0.0.1:7860";
 export const API_ROUTES = ["^/api/v1/", "/health"];
 export const BASE_URL_API = "/api/v1/";
+export const HEALTH_CHECK_URL = "/health_check";
 
 export default {
   BASENAME,
@@ -10,4 +11,5 @@ export default {
   PROXY_TARGET,
   API_ROUTES,
   BASE_URL_API,
+  HEALTH_CHECK_URL,
 };

src/frontend/src/modals/apiModal/index.tsx

@@ -54,7 +54,7 @@ export default function ApiModal({
         />
       </BaseModal.Header>
       <BaseModal.Content overflowHidden>
-        <CustomAPIGenerator />
+        <CustomAPIGenerator isOpen={open} />
         <CodeTabsComponent
           open={open}
           tabs={tabs!}

src/frontend/src/pages/AppInitPage/index.tsx

@@ -1,5 +1,6 @@
 import { useGetAutoLogin } from "@/controllers/API/queries/auth";
 import { useGetConfig } from "@/controllers/API/queries/config/use-get-config";
+import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
 import { useGetVersionQuery } from "@/controllers/API/queries/version";
 import { CustomLoadingPage } from "@/customization/components/custom-loading-page";
 import { useCustomPrimaryLoading } from "@/customization/hooks/use-custom-primary-loading";
@@ -19,6 +20,7 @@ export function AppInitPage() {
   const { isFetched } = useGetAutoLogin({ enabled: isLoaded });
   useGetVersionQuery({ enabled: isFetched });
   useGetConfig({ enabled: isFetched });
+  useGetGlobalVariables({ enabled: isFetched });
 
   useEffect(() => {
     if (isFetched) {

src/frontend/src/pages/FlowPage/index.tsx

@@ -1,5 +1,4 @@
 import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
-import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
 import { ENABLE_BRANDING } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
@@ -29,7 +28,6 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
   const { id } = useParams();
   const navigate = useCustomNavigate();
-  useGetGlobalVariables();
   const saveFlow = useSaveFlow();
 
   const flows = useFlowsManagerStore((state) => state.flows);

src/frontend/src/pages/Playground/index.tsx

@@ -1,5 +1,4 @@
 import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
-import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
 import { useStoreStore } from "@/stores/storeStore";
@@ -25,7 +24,6 @@ export default function PlaygroundPage() {
   }
 
   const navigate = useCustomNavigate();
-  useGetGlobalVariables();
 
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const { mutateAsync: refreshFlows } = useGetRefreshFlows();

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,5 +1,4 @@
 import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
-import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { useTypesStore } from "@/stores/typesStore";
 import { useEffect } from "react";
@@ -12,7 +11,6 @@ export default function ViewPage() {
 
   const { id } = useParams();
   const navigate = useCustomNavigate();
-  useGetGlobalVariables();
 
   const flows = useFlowsManagerStore((state) => state.flows);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);

src/frontend/src/stores/globalVariablesStore/globalVariables.ts

@@ -7,7 +7,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     setUnavailableFields: (fields) => {
       set({ unavailableFields: fields });
     },
-    globalVariablesEntries: [],
+    globalVariablesEntries: undefined,
     setGlobalVariablesEntries: (entries) => {
       set({ globalVariablesEntries: entries });
     },

src/frontend/src/types/zustand/globalVariables/index.ts

@@ -1,5 +1,5 @@
 export type GlobalVariablesStore = {
-  globalVariablesEntries: Array<string>;
+  globalVariablesEntries: Array<string> | undefined;
   setGlobalVariablesEntries: (entries: Array<string>) => void;
   unavailableFields: { [name: string]: string };
   setUnavailableFields: (fields: { [name: string]: string }) => void;