checkpoint

frontend/src/hooks/api/admin/queries.ts

@@ -8,6 +8,7 @@ import {
   AdminGetIdentitiesFilters,
   AdminGetUsersFilters,
   AdminIntegrationsConfig,
+  TGetInvalidatingCacheStatus,
   TGetServerRootKmsEncryptionDetails,
   TServerConfig
 } from "./types";
@@ -120,3 +121,16 @@ export const useGetServerRootKmsEncryptionDetails = () => {
     }
   });
 };
+
+export const useGetInvalidatingCacheStatus = () => {
+  return useQuery({
+    queryKey: adminQueryKeys.getInvalidateCache(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGetInvalidatingCacheStatus>(
+        "/api/v1/admin/invalidating-cache-status"
+      );
+
+      return data.invalidating;
+    }
+  });
+};

frontend/src/hooks/api/admin/types.ts

@@ -24,6 +24,7 @@ export type TServerConfig = {
   enabledLoginMethods: LoginMethod[];
   authConsentContent?: string;
   pageFrameContent?: string;
+  invalidatingCache: boolean;
 };
 
 export type TUpdateServerConfigDTO = {
@@ -93,3 +94,7 @@ export enum CacheType {
 export type TInvalidateCacheDTO = {
   type: CacheType;
 };
+
+export type TGetInvalidatingCacheStatus = {
+  invalidating: boolean;
+};

frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx

@@ -1,37 +1,66 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, DeleteActionModal } from "@app/components/v2";
+import { Badge, Button, DeleteActionModal } from "@app/components/v2";
 import { useOrgPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useInvalidateCache } from "@app/hooks/api";
 import { CacheType } from "@app/hooks/api/admin/types";
+import { useGetInvalidatingCacheStatus } from "@app/hooks/api/admin/queries";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRotate } from "@fortawesome/free-solid-svg-icons";
 
 export const CachingPanel = () => {
   const { mutateAsync: invalidateCache } = useInvalidateCache();
+  const { data: isInvalidating, refetch: refetchInvalidatingStatus } =
+    useGetInvalidatingCacheStatus();
   const { membership } = useOrgPermission();
 
+  const wasInvalidating = useRef(false);
   const [type, setType] = useState<CacheType | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [buttonsDisabled, setButtonsDisabled] = useState(false);
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "invalidateCache"
   ] as const);
 
+  const success = () => {
+    createNotification({
+      text: `Successfully invalidated cache`,
+      type: "success"
+    });
+    setButtonsDisabled(false);
+  };
+
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const disableButtons = () => {
+    // Enable buttons after 10 seconds, even if still invalidating
+    setButtonsDisabled(true);
+    timeoutRef.current = setTimeout(() => {
+      setButtonsDisabled(false);
+    }, 10000);
+  };
+
   const handleInvalidateCacheSubmit = async () => {
     if (!type) return;
-    setIsLoading(true);
 
     try {
       await invalidateCache({ type });
 
+      wasInvalidating.current = true;
+
       createNotification({
-        text: `Successfully invalidated ${type} cache`,
+        text: `Began invalidating ${type} cache`,
         type: "success"
       });
 
-      setType(null);
+      disableButtons();
       handlePopUpClose("invalidateCache");
+
+      if (!(await refetchInvalidatingStatus()).data) {
+        success();
+        return;
+      }
     } catch (err) {
       console.error(err);
       createNotification({
@@ -40,14 +69,61 @@ export const CachingPanel = () => {
       });
     }
 
-    setIsLoading(false);
+    setType(null);
   };
 
+  const pollingRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Update the "invalidating cache" status
+  useEffect(() => {
+    if (!isInvalidating) return;
+
+    if (pollingRef.current) clearInterval(pollingRef.current);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    // Start polling every 3 seconds
+    pollingRef.current = setInterval(async () => {
+      try {
+        await refetchInvalidatingStatus();
+      } catch (err) {
+        console.error("Polling error:", err);
+      }
+    }, 3000);
+
+    disableButtons();
+
+    return () => {
+      if (pollingRef.current) clearInterval(pollingRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [isInvalidating]);
+
+  useEffect(() => {
+    if (isInvalidating === false && wasInvalidating.current) {
+      success();
+      wasInvalidating.current = false;
+
+      if (pollingRef.current) clearInterval(pollingRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    }
+  }, [isInvalidating]);
+
   return (
     <>
       <div className="mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex flex-col">
-          <span className="mb-2 text-xl font-semibold text-mineshaft-100">Secrets Cache</span>
+          <div className="mb-2 flex items-center gap-3">
+            <span className="text-xl font-semibold text-mineshaft-100">Secrets Cache</span>
+            {isInvalidating && (
+              <Badge
+                variant="danger"
+                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+              >
+                <FontAwesomeIcon icon={faRotate} className="animate-spin" />
+                Invalidating Cache
+              </Badge>
+            )}
+          </div>
           <span className="max-w-xl text-sm text-mineshaft-400">
             The encrypted secrets cache encompasses all secrets stored within the system and
             provides a temporary, secure storage location for frequently accessed credentials.
@@ -56,12 +132,11 @@ export const CachingPanel = () => {
 
         <Button
           colorSchema="danger"
-          isLoading={isLoading}
           onClick={() => {
             setType(CacheType.SECRETS);
             handlePopUpOpen("invalidateCache");
           }}
-          isDisabled={Boolean(membership && membership.role !== "admin") || isLoading}
+          isDisabled={Boolean(membership && membership.role !== "admin") || buttonsDisabled}
         >
           Invalidate Secrets Cache
         </Button>
@@ -93,7 +168,7 @@ export const CachingPanel = () => {
       <DeleteActionModal
         isOpen={popUp.invalidateCache.isOpen}
         title={`Are you sure you want to invalidate ${type} cache?`}
-        subTitle="This action is permanent and irreversible. The cache clearing process may take several minutes to complete."
+        subTitle="This action is permanent and irreversible. The cache invalidation process may take several minutes to complete."
         onChange={(isOpen) => handlePopUpToggle("invalidateCache", isOpen)}
         deleteKey="confirm"
         onDeleteApproved={handleInvalidateCacheSubmit}

frontend/vite.config.ts

@@ -1,6 +1,6 @@
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react-swc";
-import { defineConfig, PluginOption } from "vite";
+import { defineConfig, loadEnv, PluginOption } from "vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import topLevelAwait from "vite-plugin-top-level-await";
 import wasm from "vite-plugin-wasm";
@@ -20,32 +20,38 @@ const virtualRouteFileChangeReloadPlugin: PluginOption = {
 };
 
 // https://vite.dev/config/
-export default defineConfig({
-  server: {
-    host: true,
-    port: 3000
-    // proxy: {
-    //   "/api": {
-    //     target: "http://localhost:8080",
-    //     changeOrigin: true,
-    //     secure: false,
-    //     ws: true
-    //   }
-    // }
-  },
-  plugins: [
-    tsconfigPaths(),
-    nodePolyfills({
-      globals: {
-        Buffer: true
-      }
-    }),
-    wasm(),
-    topLevelAwait(),
-    TanStackRouterVite({
-      virtualRouteConfig: "./src/routes.ts"
-    }),
-    react(),
-    virtualRouteFileChangeReloadPlugin
-  ]
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+  const allowedHosts = env.VITE_ALLOWED_HOSTS?.split(",") ?? [];
+
+  return {
+    server: {
+      allowedHosts,
+      host: true,
+      port: 3000
+      // proxy: {
+      //   "/api": {
+      //     target: "http://localhost:8080",
+      //     changeOrigin: true,
+      //     secure: false,
+      //     ws: true
+      //   }
+      // }
+    },
+    plugins: [
+      tsconfigPaths(),
+      nodePolyfills({
+        globals: {
+          Buffer: true
+        }
+      }),
+      wasm(),
+      topLevelAwait(),
+      TanStackRouterVite({
+        virtualRouteConfig: "./src/routes.ts"
+      }),
+      react(),
+      virtualRouteFileChangeReloadPlugin
+    ]
+  };
 });