diff --git a/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx b/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx index 165d09039..9f9de0279 100644 --- a/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx +++ b/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx @@ -22,14 +22,16 @@ export default function AlertTableCheckbox({ }, [indeterminate, rest.checked]); return ( - +
+ +
); } diff --git a/keep-ui/app/(keep)/alerts/alert-table-headers.tsx b/keep-ui/app/(keep)/alerts/alert-table-headers.tsx index b70e563cd..aa9ef4474 100644 --- a/keep-ui/app/(keep)/alerts/alert-table-headers.tsx +++ b/keep-ui/app/(keep)/alerts/alert-table-headers.tsx @@ -55,7 +55,12 @@ const DraggableHeaderCell = ({ }); const dragStyle: CSSProperties = { - width: column.getSize(), + width: + column.id === "checkbox" + ? "32px !important" + : column.id === "source" + ? "40px !important" + : column.getSize(), opacity: isDragging ? 0.5 : 1, transform: CSS.Translate.toString(transform), transition, @@ -63,8 +68,8 @@ const DraggableHeaderCell = ({ column.getIsPinned() !== false ? "default" : isDragging - ? "grabbing" - : "grab", + ? "grabbing" + : "grab", }; // TODO: fix multiple pinned columns @@ -80,7 +85,12 @@ const DraggableHeaderCell = ({ style={dragStyle} ref={setNodeRef} > -
+
{/* Flex container */} {children} {/* Column name or text */} {column.getCanSort() && ( // Sorting icon to the left @@ -99,8 +109,8 @@ const DraggableHeaderCell = ({ column.getNextSortingOrder() === "asc" ? "Sort ascending" : column.getNextSortingOrder() === "desc" - ? "Sort descending" - : "Clear sort" + ? "Sort descending" + : "Clear sort" } > {/* Icon logic */} diff --git a/keep-ui/app/(keep)/alerts/alert-table-utils.tsx b/keep-ui/app/(keep)/alerts/alert-table-utils.tsx index 0f5924559..dcb8f5348 100644 --- a/keep-ui/app/(keep)/alerts/alert-table-utils.tsx +++ b/keep-ui/app/(keep)/alerts/alert-table-utils.tsx @@ -24,15 +24,17 @@ import { import { AlertSeverityBorder } from "./alert-severity-border"; import { getStatusIcon, getStatusColor } from "@/shared/lib/status-utils"; +import { useConfig } from "utils/hooks/useConfig"; + export const DEFAULT_COLS = [ "severity", "checkbox", "noise", + "source", "name", "description", "status", "lastReceived", - "source", "alertMenu", ]; export const DEFAULT_COLS_VISIBILITY = DEFAULT_COLS.reduce( @@ -132,6 +134,9 @@ export const useAlertTableCols = ( ) => { const [expandedToggles, setExpandedToggles] = useState({}); const [currentOpenMenu, setCurrentOpenMenu] = useState(""); + const { data: configData } = useConfig(); + // check if noisy alerts are enabled + const noisyAlertsEnabled = configData?.NOISY_ALERTS_ENABLED; const filteredAndGeneratedCols = additionalColsToGenerate.map((colName) => columnHelper.display({ @@ -179,21 +184,26 @@ export const useAlertTableCols = ( return [ columnHelper.display({ id: "severity", - maxSize: 4, + maxSize: 2, header: () => <>, cell: (context) => ( ), meta: { - tdClassName: "p-0", - thClassName: "p-0", + tdClassName: "w-1 !p-0", + thClassName: "w-1 !p-0", }, }), ...(isCheckboxDisplayed ? [ columnHelper.display({ id: "checkbox", - size: 46, + maxSize: 32, + minSize: 32, + meta: { + tdClassName: "w-6 !py-2 !pl-2 !pr-1", + thClassName: "w-6 !py-2 !pl-2 !pr-1 ", + }, header: (context) => ( [])), // noisy column - columnHelper.display({ - id: "noise", - size: 5, - header: () => <>, - cell: (context) => { - // Get the status of the alert - const status = context.row.original.status; - const isNoisy = context.row.original.isNoisy; + ...(noisyAlertsEnabled + ? [ + columnHelper.display({ + id: "noise", + size: 5, + header: () => <>, + cell: (context) => { + // Get the status of the alert + const status = context.row.original.status; + const isNoisy = context.row.original.isNoisy; - // Return null if presetNoisy is not true - if (!presetNoisy && !isNoisy) { - return null; - } else if (presetNoisy) { - // Decide which icon to display based on the status - if (status === "firing") { - return ; - } else { - return ; - } - } - // else, noisy alert in non noisy preset - else { - if (status === "firing") { - return ; - } else { - return null; - } - } - }, + // Return null if presetNoisy is not true + if (!presetNoisy && !isNoisy) { + return null; + } else if (presetNoisy) { + // Decide which icon to display based on the status + if (status === "firing") { + return ( + + ); + } else { + return ; + } + } + // else, noisy alert in non noisy preset + else { + if (status === "firing") { + return ( + + ); + } else { + return null; + } + } + }, + meta: { + tdClassName: "p-0", + thClassName: "p-0", + }, + enableSorting: false, + }), + ] + : []), + // Source column with exact 40px width ( see alert-table-headers ) + columnHelper.accessor("source", { + id: "source", + header: () => <>, + enableSorting: false, + enableResizing: false, + cell: (context) => ( +
+ {(context.getValue() ?? []).map((source, index) => { + let imagePath = `/icons/${source}-icon.png`; + if (source.includes("@")) { + imagePath = "/icons/mailgun-icon.png"; + } + return ( + {source} + ); + })} +
+ ), meta: { - tdClassName: "p-0", - thClassName: "p-0", + tdClassName: "!p-0 w-4 sm:w-6 !box-border", + thClassName: "!p-0 w-4 sm:w-6 !box-border", }, - enableSorting: false, }), + // Name column butted up against source columnHelper.display({ id: "name", header: "Name", minSize: 330, cell: (context) => ( - +
+ +
), + meta: { + tdClassName: "!pl-0", + thClassName: "!pl-1", // Small padding for header text only + }, }), columnHelper.accessor("description", { id: "description", @@ -296,29 +353,6 @@ export const useAlertTableCols = ( ), }), - columnHelper.accessor("source", { - id: "source", - header: "Source", - minSize: 100, - cell: (context) => - (context.getValue() ?? []).map((source, index) => { - let imagePath = `/icons/${source}-icon.png`; - if (source.includes("@")) { - imagePath = "/icons/mailgun-icon.png"; - } - return ( - {source} - ); - }), - }), columnHelper.accessor("assignee", { id: "assignee", header: "Assignee", diff --git a/keep-ui/shared/lib/server/getConfig.ts b/keep-ui/shared/lib/server/getConfig.ts index b10cbbe70..a593f0023 100644 --- a/keep-ui/shared/lib/server/getConfig.ts +++ b/keep-ui/shared/lib/server/getConfig.ts @@ -55,5 +55,7 @@ export function getConfig() { SENTRY_DISABLED: process.env.SENTRY_DISABLED, READ_ONLY: process.env.KEEP_READ_ONLY === "true", OPEN_AI_API_KEY_SET: !!process.env.OPEN_AI_API_KEY, + // NOISY ALERTS DISABLED BY DEFAULT TO SPARE SPACE ON THE TABLE + NOISY_ALERTS_ENABLED: process.env.NOISY_ALERTS_ENABLED === "true", }; } diff --git a/keep-ui/types/internal-config.ts b/keep-ui/types/internal-config.ts index c0d13710b..97256ce38 100644 --- a/keep-ui/types/internal-config.ts +++ b/keep-ui/types/internal-config.ts @@ -19,4 +19,7 @@ export interface InternalConfig { // READ ONLY READ_ONLY: boolean; OPEN_AI_API_KEY_SET: boolean; + + // NOISY ALERTS ENABLED + NOISY_ALERTS_ENABLED: boolean; }