feat: Merge branch 'main' into feature/websocket-through-frontend

docs/deployment/secret-manager.mdx

@@ -16,15 +16,15 @@ The `SECRET_MANAGER_TYPE` environment variable plays a crucial role in the Secre
 **Functionality**:
 
 **Default Secret Manager**: If the `SECRET_MANAGER_TYPE` environment variable is set, its value dictates the default type of secret manager that the factory will create.
-The value of this variable should correspond to one of the types defined in SecretManagerTypes enum (`FILE`, `GCP`, `K8S`, `VAULT`).
+The value of this variable should correspond to one of the types defined in SecretManagerTypes enum (`FILE`, `AWS`, `GCP`, `K8S`, `VAULT`).
 
 **Example Configuration**:
 
 Setting `SECRET_MANAGER_TYPE=GCP` in the environment will make the factory create instances of GcpSecretManager by default.
 If `SECRET_MANAGER_TYPE` is not set or is set to `FILE`, the factory defaults to creating instances of FileSecretManager.
 This environment variable provides flexibility and ease of configuration, allowing different secret managers to be used in different environments or scenarios without code changes.
 
-## File Secert Manager
+## File Secret Manager
 
 The `FileSecretManager` is a concrete implementation of the BaseSecretManager for managing secrets stored in the file system. It uses a specified directory (defaulting to ./) to read, write, and delete secret files.
 
@@ -39,6 +39,24 @@ Usage:
 - Writing a secret creates or updates a file with the given content.
 - Deleting a secret removes the corresponding file.
 
+## AWS Secret Manager
+
+The `AwsSecretManager` integrates with Amazon Web Services' Secrets Manager service for secure secret management. It provides a robust solution for storing and managing secrets in AWS environments.
+
+Configuration:
+
+Required environment variables:
+- `AWS_REGION`: The AWS region where your secrets are stored
+- For local development:
+  - `AWS_ACCESS_KEY_ID`: Your AWS access key
+  - `AWS_SECRET_ACCESS_KEY`: Your AWS secret access key
+
+
+Usage:
+
+- Manages secrets using AWS Secrets Manager service
+- Supports creating, updating, reading, and deleting secrets
+
 ## Kubernetes Secret Manager
 
 The `KubernetesSecretManager` interfaces with Kubernetes' native secrets system. It manages secrets within a specified Kubernetes namespace and is designed to operate within a Kubernetes cluster.

keep-ui/app/alerts/ColumnSelection.tsx

@@ -1,11 +1,11 @@
-import { FormEvent, Fragment, useRef } from "react";
+import { FormEvent, Fragment, useRef, useState } from "react";
 import { Table } from "@tanstack/table-core";
-import { Button } from "@tremor/react";
+import { Button, TextInput } from "@tremor/react";
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { VisibilityState, ColumnOrderState } from "@tanstack/react-table";
 import { FloatingArrow, arrow, offset, useFloating } from "@floating-ui/react";
 import { Popover } from "@headlessui/react";
-import { FiSettings } from "react-icons/fi";
+import { FiSettings, FiSearch } from "react-icons/fi";
 import { DEFAULT_COLS, DEFAULT_COLS_VISIBILITY } from "./alert-table-utils";
 import { AlertDto } from "./models";
 
@@ -31,16 +31,19 @@ export default function ColumnSelection({
   });
   const tableColumns = table.getAllColumns();
 
-  const [, setColumnVisibility] = useLocalStorage<VisibilityState>(
-    `column-visibility-${presetName}`,
-    DEFAULT_COLS_VISIBILITY
-  );
+  const [columnVisibility, setColumnVisibility] =
+    useLocalStorage<VisibilityState>(
+      `column-visibility-${presetName}`,
+      DEFAULT_COLS_VISIBILITY
+    );
 
   const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(
     `column-order-${presetName}`,
     DEFAULT_COLS
   );
 
+  const [searchTerm, setSearchTerm] = useState("");
+
   const columnsOptions = tableColumns
     .filter((col) => col.getIsPinned() === false)
     .map((col) => col.id);
@@ -49,41 +52,43 @@ export default function ColumnSelection({
     .filter((col) => col.getIsVisible() && col.getIsPinned() === false)
     .map((col) => col.id);
 
+  const filteredColumns = columnsOptions.filter((column) =>
+    column.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
   const onMultiSelectChange = (
     event: FormEvent<HTMLFormElement>,
     closePopover: VoidFunction
   ) => {
     event.preventDefault();
 
     const formData = new FormData(event.currentTarget);
-    const valueKeys = Object.keys(Object.fromEntries(formData.entries()));
+    const selectedColumnIds = Object.keys(
+      Object.fromEntries(formData.entries())
+    );
 
-    const newColumnVisibility = columnsOptions.reduce<VisibilityState>(
-      (acc, key) => {
-        if (valueKeys.includes(key)) {
-          return { ...acc, [key]: true };
-        }
+    // Update visibility only for the currently visible (filtered) columns.
+    const newColumnVisibility = { ...columnVisibility };
+    filteredColumns.forEach((column) => {
+      newColumnVisibility[column] = selectedColumnIds.includes(column);
+    });
 
-        return { ...acc, [key]: false };
-      },
-      {}
-    );
+    // Create a new order array with all existing columns and newly selected columns
+    const updatedOrder = [
+      ...columnOrder,
+      ...selectedColumnIds.filter((id) => !columnOrder.includes(id)),
+    ];
 
-    const originalColsOrder = columnOrder.filter((columnId) =>
-      valueKeys.includes(columnId)
-    );
-    const newlyAddedCols = valueKeys.filter(
-      (columnId) => !columnOrder.includes(columnId)
+    // Remove any columns that are no longer selected
+    const finalOrder = updatedOrder.filter(
+      (id) => selectedColumnIds.includes(id) || !filteredColumns.includes(id)
     );
 
-    const newColumnOrder = [...originalColsOrder, ...newlyAddedCols];
-
     setColumnVisibility(newColumnVisibility);
-    setColumnOrder(newColumnOrder);
+    setColumnOrder(finalOrder);
     closePopover();
   };
 
-
   return (
     <Popover as={Fragment}>
       {({ close }) => (
@@ -109,15 +114,22 @@ export default function ColumnSelection({
               context={context}
             />
             <span className="text-gray-400 text-sm">Set table fields</span>
+            <TextInput
+              icon={FiSearch}
+              placeholder="Search fields..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="mt-2"
+            />
             <ul className="space-y-1 mt-3 max-h-96 overflow-auto">
-              {columnsOptions.map((column) => (
+              {filteredColumns.map((column) => (
                 <li key={column}>
                   <label className="cursor-pointer p-2">
                     <input
                       className="mr-2"
                       name={column}
                       type="checkbox"
-                      defaultChecked={selectedColumns.includes(column)}
+                      defaultChecked={columnVisibility[column]}
                     />
                     {column}
                   </label>

keep-ui/app/alerts/alert-sidebar.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from "react";
+import Image from "next/image";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertDto } from "./models";
 import { Button, Title, Card, Badge } from "@tremor/react";
@@ -83,10 +84,11 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
                       <strong>Severity:</strong> {alert.severity}
                     </p>
                     <p>
-                      <strong>Source:</strong>{" "}
-                      <img
+                      <Image
                         src={`/icons/${alert.source![0]}-icon.png`}
                         alt={alert.source![0]}
+                        width={24}
+                        height={24}
                         className="inline-block w-6 h-6"
                       />
                     </p>