feat(auth): azuread behind proxy (#2576)

keephq · Nov 24, 2024 · fcb8bd6 · fcb8bd6
1 parent 3b31a33
commit fcb8bd6
Show file tree

Hide file tree

Showing 17 changed files with 611 additions and 193 deletions.
diff --git a/docs/deployment/authentication/azuread-auth.mdx b/docs/deployment/authentication/azuread-auth.mdx
@@ -8,7 +8,7 @@ This feature is a part of Keep Enterprise.
 Talk to us to get access: https://www.keephq.dev/meet-keep
 </Tip>
 
-Keep supports enterprise authentication through Azure Active Directory (Azure AD), enabling organizations to use their existing Microsoft identity platform for secure access management.
+Keep supports enterprise authentication through Azure Entre ID (formerly known as Azure AD), enabling organizations to use their existing Microsoft identity platform for secure access management.
 
 ## When to Use
 
@@ -49,9 +49,9 @@ We use "Web" platform instead of "Single Page Application (SPA)" because Keep's
 </Info>
 
 <Tip>
-For localhost, the redirect would be http://localhost:3000/api/auth/callback/azure-ad
+For localhost, the redirect would be http://localhost:3000/api/auth/callback/microsoft-entra-id
 
-For production, it should be something like http://your_keep_frontend_domain/api/auth/callback/azure-ad
+For production, it should be something like http://your_keep_frontend_domain/api/auth/callback/microsoft-entra-id
 
 </Tip>
 

diff --git a/docs/images/azuread_3.png b/docs/images/azuread_3.png
diff --git a/keep-ui/app/(keep)/alerts/alert-table.tsx b/keep-ui/app/(keep)/alerts/alert-table.tsx
@@ -264,15 +264,20 @@ export function AlertTable({
   };
 
   return (
-    <div className="flex flex-col gap-4 h-full">
-      <TitleAndFilters
-        table={table}
-        alerts={alerts}
-        presetName={presetName}
-        onThemeChange={handleThemeChange}
-      />
-      <div className="min-h-10">
-        {/* Setting min-h-10 to avoid jumping when actions are shown */}
+    // Add h-screen to make it full height and remove the default flex-col gap
+    <div className="h-screen flex flex-col">
+      {/* Add padding to account for any top nav/header */}
+      <div className="pt-4 px-4 flex-none">
+        <TitleAndFilters
+          table={table}
+          alerts={alerts}
+          presetName={presetName}
+          onThemeChange={handleThemeChange}
+        />
+      </div>
+
+      {/* Make actions/presets section fixed height */}
+      <div className="h-12 px-4 flex-none">
         {selectedRowIds.length ? (
           <AlertActions
             selectedRowIds={selectedRowIds}
@@ -291,61 +296,77 @@ export function AlertTable({
           />
         )}
       </div>
-      <div className="flex gap-6">
-        <div className="w-32 min-w-[12rem]">
-          <AlertFacets
-            className="sticky top-0"
-            alerts={alerts}
-            facetFilters={facetFilters}
-            setFacetFilters={setFacetFilters}
-            dynamicFacets={dynamicFacets}
-            setDynamicFacets={setDynamicFacets}
-            onDelete={handleFacetDelete}
-            table={table}
-            showSkeleton={showSkeleton}
-          />
-        </div>
-        <div className="flex flex-col gap-4 min-w-0">
-          <Card className="flex-grow h-full flex flex-col p-0">
-            <div className="flex-grow">
-              {/* For dynamic preset, add alert tabs*/}
-              {!presetStatic && (
-                <AlertTabs
-                  presetId={presetId}
-                  tabs={tabs}
-                  setTabs={setTabs}
-                  selectedTab={selectedTab}
-                  setSelectedTab={setSelectedTab}
-                />
-              )}
-              <div ref={a11yContainerRef} className="sr-only" />
-              <Table className="[&>table]:table-fixed [&>table]:w-full">
-                <AlertsTableHeaders
-                  columns={columns}
-                  table={table}
-                  presetName={presetName}
-                  a11yContainerRef={a11yContainerRef}
-                />
-                <AlertsTableBody
-                  table={table}
-                  showSkeleton={showSkeleton}
-                  showEmptyState={showEmptyState}
-                  theme={theme}
-                  onRowClick={handleRowClick}
-                  presetName={presetName}
-                />
-              </Table>
-            </div>
-          </Card>
+
+      {/* Main content area - uses flex-grow to fill remaining space */}
+      <div className="flex-grow overflow-hidden px-4 pb-4">
+        <div className="h-full flex gap-6">
+          {/* Facets sidebar */}
+          <div className="w-32 min-w-[12rem] overflow-y-auto">
+            <AlertFacets
+              className="sticky top-0"
+              alerts={alerts}
+              facetFilters={facetFilters}
+              setFacetFilters={setFacetFilters}
+              dynamicFacets={dynamicFacets}
+              setDynamicFacets={setDynamicFacets}
+              onDelete={handleFacetDelete}
+              table={table}
+              showSkeleton={showSkeleton}
+            />
+          </div>
+
+          {/* Table section */}
+          <div className="flex-1 flex flex-col min-w-0">
+            <Card className="h-full flex flex-col p-0">
+              <div className="flex-grow flex flex-col overflow-hidden">
+                {!presetStatic && (
+                  <div className="flex-none">
+                    <AlertTabs
+                      presetId={presetId}
+                      tabs={tabs}
+                      setTabs={setTabs}
+                      selectedTab={selectedTab}
+                      setSelectedTab={setSelectedTab}
+                    />
+                  </div>
+                )}
+
+                <div ref={a11yContainerRef} className="sr-only" />
+
+                {/* Make table wrapper scrollable */}
+                <div className="flex-grow overflow-auto">
+                  <Table className="[&>table]:table-fixed [&>table]:w-full">
+                    <AlertsTableHeaders
+                      columns={columns}
+                      table={table}
+                      presetName={presetName}
+                      a11yContainerRef={a11yContainerRef}
+                    />
+                    <AlertsTableBody
+                      table={table}
+                      showSkeleton={showSkeleton}
+                      showEmptyState={showEmptyState}
+                      theme={theme}
+                      onRowClick={handleRowClick}
+                      presetName={presetName}
+                    />
+                  </Table>
+                </div>
+              </div>
+            </Card>
+          </div>
         </div>
       </div>
-      <div className="mt-2 mb-8 pl-[14rem]">
+
+      {/* Pagination footer - fixed height */}
+      <div className="h-16 px-4 flex-none pl-[14rem]">
         <AlertPagination
           table={table}
           presetName={presetName}
           isRefreshAllowed={isRefreshAllowed}
         />
       </div>
+
       <AlertSidebar
         isOpen={isSidebarOpen}
         toggle={() => setIsSidebarOpen(false)}

diff --git a/keep-ui/app/(keep)/alerts/alerts-table-body.tsx b/keep-ui/app/(keep)/alerts/alerts-table-body.tsx
@@ -35,13 +35,15 @@ export function AlertsTableBody({
   if (showEmptyState) {
     return (
       <>
-        <div className="flex flex-col justify-center items-center h-96 w-full absolute p-4">
-          <EmptyStateCard
-            title="No alerts to display"
-            description="It is because you have not connected any data source yet or there are no alerts matching the filter."
-            buttonText="Add Alert"
-            onClick={handleModalOpen}
-          />
+        <div className="flex items-center h-full w-full absolute -mt-20">
+          <div className="flex flex-col justify-center items-center w-full p-4">
+            <EmptyStateCard
+              title="No alerts to display"
+              description="It is because you have not connected any data source yet or there are no alerts matching the filter."
+              buttonText="Add Alert"
+              onClick={handleModalOpen}
+            />
+          </div>
         </div>
         {modalOpen && (
           <PushAlertToServerModal

diff --git a/keep-ui/app/(signin)/signin/SignInForm.tsx b/keep-ui/app/(signin)/signin/SignInForm.tsx
@@ -21,7 +21,7 @@ export interface Providers {
   auth0?: Provider;
   credentials?: Provider;
   keycloak?: Provider;
-  "azure-ad"?: Provider;
+  "microsoft-entra-id"?: Provider;
 }
 
 interface SignInFormInputs {
@@ -42,15 +42,11 @@ export default function SignInForm({ params }: { params?: { amt: string } }) {
   } = useForm<SignInFormInputs>();
 
   useEffect(() => {
-    console.log("Fetching providers");
     async function fetchProviders() {
-      console.log("Fetching providers 2");
       const response = await getProviders();
       setProviders(response as Providers);
     }
-    console.log("Fetching providers 3");
     fetchProviders();
-    console.log("Fetching providers 4");
   }, []);
 
   useEffect(() => {
@@ -69,9 +65,9 @@ export default function SignInForm({ params }: { params?: { amt: string } }) {
       } else if (providers.keycloak) {
         console.log("Signing in with keycloak provider");
         signIn("keycloak", { callbackUrl: "/" });
-      } else if (providers["azure-ad"]) {
+      } else if (providers["microsoft-entra-id"]) {
         console.log("Signing in with Azure AD provider");
-        signIn("azure-ad", { callbackUrl: "/" });
+        signIn("microsoft-entra-id", { callbackUrl: "/" });
       } else if (
         providers.credentials &&
         providers.credentials.name == "NoAuth"