invalidate cache

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

@@ -3,6 +3,7 @@ export {
   useAdminGrantServerAdminAccess,
   useAdminRemoveIdentitySuperAdminAccess,
   useCreateAdminUser,
+  useInvalidateCache,
   useRemoveUserServerAdminAccess,
   useUpdateAdminSlackConfig,
   useUpdateServerConfig,

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

@@ -9,6 +9,7 @@ import {
   AdminSlackConfig,
   RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
+  TInvalidateCacheDTO,
   TServerConfig,
   TUpdateAdminSlackConfigDTO
 } from "./types";
@@ -147,3 +148,15 @@ export const useUpdateServerEncryptionStrategy = () => {
     }
   });
 };
+
+export const useInvalidateCache = () => {
+  const queryClient = useQueryClient();
+  return useMutation<void, object, TInvalidateCacheDTO>({
+    mutationFn: async (dto) => {
+      await apiRequest.post("/api/v1/admin/invalidate-cache", dto);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: adminQueryKeys.getInvalidateCache() });
+    }
+  });
+};

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

@@ -23,7 +23,8 @@ export const adminQueryKeys = {
   getIdentities: (filters: AdminGetIdentitiesFilters) =>
     [adminStandaloneKeys.getIdentities, { filters }] as const,
   getAdminSlackConfig: () => ["admin-slack-config"] as const,
-  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const
+  getServerEncryptionStrategies: () => ["server-encryption-strategies"] as const,
+  getInvalidateCache: () => ["admin-invalidate-cache"] as const
 };
 
 export const fetchServerConfig = async () => {

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

@@ -74,3 +74,12 @@ export enum RootKeyEncryptionStrategy {
   Software = "SOFTWARE",
   HSM = "HSM"
 }
+
+export enum CacheType {
+  ALL = "all",
+  SECRETS = "secrets"
+}
+
+export type TInvalidateCacheDTO = {
+  type: CacheType;
+};

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -13,9 +13,9 @@ import {
   TBreadcrumbFormat
 } from "@app/components/v2";
 import {
-  useProjectPermission,
   ProjectPermissionActions,
   ProjectPermissionSub,
+  useProjectPermission,
   useSubscription,
   useWorkspace
 } from "@app/context";

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

@@ -31,6 +31,7 @@ import {
 import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
 
 import { AuthPanel } from "./components/AuthPanel";
+import { CachingPanel } from "./components/CachingPanel";
 import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
 import { UserPanel } from "./components/UserPanel";
@@ -42,7 +43,8 @@ enum TabSections {
   Integrations = "integrations",
   Users = "users",
   Identities = "identities",
-  Kmip = "kmip"
+  Kmip = "kmip",
+  Caching = "caching"
 }
 
 enum SignUpModes {
@@ -164,6 +166,7 @@ export const OverviewPage = () => {
                     <Tab value={TabSections.Integrations}>Integrations</Tab>
                     <Tab value={TabSections.Users}>User Identities</Tab>
                     <Tab value={TabSections.Identities}>Machine Identities</Tab>
+                    <Tab value={TabSections.Caching}>Caching</Tab>
                   </div>
                 </TabList>
                 <TabPanel value={TabSections.Settings}>
@@ -408,6 +411,9 @@ export const OverviewPage = () => {
                 <TabPanel value={TabSections.Identities}>
                   <IdentityPanel />
                 </TabPanel>
+                <TabPanel value={TabSections.Caching}>
+                  <CachingPanel />
+                </TabPanel>
               </Tabs>
             </div>
           )}

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

@@ -0,0 +1,100 @@
+import { useState } from "react";
+
+import { createNotification } from "@app/components/notifications";
+import { 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";
+
+export const CachingPanel = () => {
+  const { mutateAsync: invalidateCache } = useInvalidateCache();
+  const { membership } = useOrgPermission();
+
+  const [type, setType] = useState<CacheType>(CacheType.ALL);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "invalidateCache"
+  ] as const);
+
+  const handleInvalidateCacheSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      await invalidateCache({ type });
+
+      createNotification({
+        text: `Successfully purged ${type} cache`,
+        type: "success"
+      });
+
+      setIsLoading(false);
+      handlePopUpClose("invalidateCache");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to purge ${type} cache`,
+        type: "error"
+      });
+    }
+  };
+
+  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>
+          <span className="max-w-xl text-sm text-mineshaft-400">
+            The secrets cache encompasses all secrets stored within the system and provides a
+            temporary, secure storage location for frequently accessed credentials.
+          </span>
+        </div>
+
+        <Button
+          colorSchema="danger"
+          isLoading={isLoading}
+          onClick={() => {
+            setType(CacheType.SECRETS);
+            handlePopUpOpen("invalidateCache");
+          }}
+          isDisabled={Boolean(membership && membership.role !== "admin") || isLoading}
+        >
+          Invalidate Secrets Cache
+        </Button>
+      </div>
+
+      {/* Uncomment this when we have more than one cache type */}
+      {/* <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">All Cache</span>
+          <span className="max-w-xl text-sm text-mineshaft-400">
+            All cache refers to the entirety of cached data throughout the system, including secrets
+            and miscellaneous information.
+          </span>
+        </div>
+
+        <Button
+          colorSchema="danger"
+          isLoading={isLoading}
+          onClick={() => {
+            setType(CacheType.ALL);
+            handlePopUpOpen("invalidateCache");
+          }}
+          isDisabled={Boolean(membership && membership.role !== "admin") || isLoading}
+        >
+          Invalidate All Cache
+        </Button>
+      </div> */}
+
+      <DeleteActionModal
+        isOpen={popUp.invalidateCache.isOpen}
+        title={`Are you sure want to invalidate ${type} cache?`}
+        subTitle="This action cannot be undone."
+        onChange={(isOpen) => handlePopUpToggle("invalidateCache", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleInvalidateCacheSubmit}
+      />
+    </>
+  );
+};