fix: facets values "dancing" and Only/All button is not working

keep-ui/app/alerts/alert-table-alert-facets.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import {
   AlertFacetsProps,
   FacetValue,
@@ -12,11 +12,10 @@ import {
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { AlertDto } from "./models";
 import {
-  DynamicFacet,
   DynamicFacetWrapper,
   AddFacetModal,
 } from "./alert-table-facet-dynamic";
-import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 
 export const AlertFacets: React.FC<AlertFacetsProps> = ({
   alerts,
@@ -76,88 +75,92 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
     setFacetFilters(newFilters);
   };
 
-  const getFacetValues = (key: keyof AlertDto | string): FacetValue[] => {
-    const filteredAlerts = getFilteredAlertsForFacet(
-      alerts,
-      facetFilters,
-      key,
-      timeRange
-    );
-    const valueMap = new Map<string, number>();
-    let nullCount = 0;
+  const getFacetValues = useCallback(
+    (key: keyof AlertDto | string): FacetValue[] => {
+      const filteredAlerts = getFilteredAlertsForFacet(
+        alerts,
+        facetFilters,
+        key,
+        timeRange
+      );
+      const valueMap = new Map<string, number>();
+      let nullCount = 0;
 
-    filteredAlerts.forEach((alert) => {
-      let value;
+      filteredAlerts.forEach((alert) => {
+        let value;
 
-      // Handle nested keys like "labels.host"
-      if (typeof key === "string" && key.includes(".")) {
-        const [parentKey, childKey] = key.split(".");
-        const parentValue = alert[parentKey as keyof AlertDto];
+        // Handle nested keys like "labels.host"
+        if (typeof key === "string" && key.includes(".")) {
+          const [parentKey, childKey] = key.split(".");
+          const parentValue = alert[parentKey as keyof AlertDto];
 
-        if (
-          typeof parentValue === "object" &&
-          parentValue !== null &&
-          !Array.isArray(parentValue) &&
-          !(parentValue instanceof Date)
-        ) {
-          value = (parentValue as Record<string, unknown>)[childKey];
+          if (
+            typeof parentValue === "object" &&
+            parentValue !== null &&
+            !Array.isArray(parentValue) &&
+            !(parentValue instanceof Date)
+          ) {
+            value = (parentValue as Record<string, unknown>)[childKey];
+          } else {
+            value = undefined;
+          }
         } else {
-          value = undefined;
+          value = alert[key as keyof AlertDto];
         }
-      } else {
-        value = alert[key as keyof AlertDto];
-      }
 
-      if (Array.isArray(value)) {
-        if (value.length === 0) {
-          nullCount++;
+        if (Array.isArray(value)) {
+          if (value.length === 0) {
+            nullCount++;
+          } else {
+            value.forEach((v) => {
+              valueMap.set(v, (valueMap.get(v) || 0) + 1);
+            });
+          }
+        } else if (value !== undefined && value !== null) {
+          const strValue = String(value);
+          valueMap.set(strValue, (valueMap.get(strValue) || 0) + 1);
         } else {
-          value.forEach((v) => {
-            valueMap.set(v, (valueMap.get(v) || 0) + 1);
-          });
+          nullCount++;
         }
-      } else if (value !== undefined && value !== null) {
-        const strValue = String(value);
-        valueMap.set(strValue, (valueMap.get(strValue) || 0) + 1);
-      } else {
-        nullCount++;
-      }
-    });
-
-    let values = Array.from(valueMap.entries()).map(([label, count]) => ({
-      label,
-      count,
-      isSelected:
-        facetFilters[key]?.includes(label) || !facetFilters[key]?.length,
-    }));
+      });
 
-    if (["assignee", "incident"].includes(key as string) && nullCount > 0) {
-      values.push({
-        label: "n/a",
-        count: nullCount,
+      let values = Array.from(valueMap.entries()).map(([label, count]) => ({
+        label,
+        count,
         isSelected:
-          facetFilters[key]?.includes("n/a") || !facetFilters[key]?.length,
-      });
-    }
+          facetFilters[key]?.includes(label) || !facetFilters[key]?.length,
+      }));
 
-    if (key === "severity") {
-      values.sort((a, b) => {
-        if (a.label === "n/a") return 1;
-        if (b.label === "n/a") return -1;
-        const orderDiff = getSeverityOrder(a.label) - getSeverityOrder(b.label);
-        if (orderDiff !== 0) return orderDiff;
-        return b.count - a.count;
-      });
-    } else {
-      values.sort((a, b) => {
-        if (a.label === "n/a") return 1;
-        if (b.label === "n/a") return -1;
-        return b.count - a.count;
-      });
-    }
+      if (["assignee", "incident"].includes(key as string) && nullCount > 0) {
+        values.push({
+          label: "n/a",
+          count: nullCount,
+          isSelected:
+            facetFilters[key]?.includes("n/a") || !facetFilters[key]?.length,
+        });
+      }
 
-    return values;
-  };
+      if (key === "severity") {
+        values.sort((a, b) => {
+          if (a.label === "n/a") return 1;
+          if (b.label === "n/a") return -1;
+          const orderDiff =
+            getSeverityOrder(a.label) - getSeverityOrder(b.label);
+          if (orderDiff !== 0) return orderDiff;
+          return b.count - a.count;
+        });
+      } else {
+        values.sort((a, b) => {
+          if (a.label === "n/a") return 1;
+          if (b.label === "n/a") return -1;
+          return b.count - a.count;
+        });
+      }
+
+      return values;
+    },
+    [alerts, facetFilters, timeRange]
+  );
 
   const staticFacets = [
     "severity",

keep-ui/app/alerts/alert-table-facet-types.tsx

@@ -34,9 +34,13 @@ export interface FacetProps {
 export interface AlertFacetsProps {
   alerts: AlertDto[];
   facetFilters: FacetFilters;
-  setFacetFilters: (filters: FacetFilters) => void;
+  setFacetFilters: (
+    filters: FacetFilters | ((filters: FacetFilters) => FacetFilters)
+  ) => void;
   dynamicFacets: DynamicFacet[];
-  setDynamicFacets: (facets: DynamicFacet[]) => void;
+  setDynamicFacets: (
+    facets: DynamicFacet[] | ((facets: DynamicFacet[]) => DynamicFacet[])
+  ) => void;
   onDelete: (facetKey: string) => void;
   className?: string;
   table: Table<AlertDto>;

keep-ui/app/alerts/alert-table-facet-value.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Icon } from "@tremor/react";
 import Image from "next/image";
 import { Text } from "@tremor/react";
@@ -22,8 +22,6 @@ export const FacetValue: React.FC<FacetValueProps> = ({
   showIcon = false,
   facetFilters,
 }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
   const handleCheckboxClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     onSelect(label, false, false);
@@ -51,8 +49,6 @@ export const FacetValue: React.FC<FacetValueProps> = ({
     <div
       className="flex items-center px-2 py-1 hover:bg-gray-100 rounded-sm cursor-pointer group"
       onClick={handleCheckboxClick}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
     >
       <div className="flex items-center min-w-[24px]">
         <input
@@ -65,67 +61,67 @@ export const FacetValue: React.FC<FacetValueProps> = ({
         />
       </div>
 
-      {showIcon && (
-        <div className="flex items-center min-w-[24px] ml-2">
-          {facetKey === "source" && (
-            <Image
-              className="inline-block"
-              alt={label}
-              height={16}
-              width={16}
-              title={label}
-              src={
-                label.includes("@")
-                  ? "/icons/mailgun-icon.png"
-                  : `/icons/${label}-icon.png`
-              }
-            />
-          )}
-          {facetKey === "severity" && (
-            <AlertSeverity severity={label as Severity} />
-          )}
-          {facetKey === "assignee" && (
-            <Icon
-              icon={UserCircleIcon}
-              size="sm"
-              className="text-gray-600 !p-0"
-            />
-          )}
-          {facetKey === "status" && (
-            <Icon
-              icon={getStatusIcon(label)}
-              size="sm"
-              color={getStatusColor(label)}
-              className="!p-0"
-            />
-          )}
-          {facetKey === "dismissed" && (
-            <Icon
-              icon={label === "true" ? BellSlashIcon : BellIcon}
-              size="sm"
-              className="text-gray-600 !p-0"
-            />
-          )}
-          {facetKey === "incident" && (
-            <Icon icon={FireIcon} size="sm" className="text-gray-600 !p-0" />
-          )}
-        </div>
-      )}
-
-      <div className="flex-1 min-w-0 mx-2" title={label}>
+      <div className="flex-1 flex items-center min-w-0" title={label}>
+        {showIcon && (
+          <div className="flex items-center min-w-[24px]">
+            {facetKey === "source" && (
+              <Image
+                className="inline-block"
+                alt={label}
+                height={16}
+                width={16}
+                title={label}
+                src={
+                  label.includes("@")
+                    ? "/icons/mailgun-icon.png"
+                    : `/icons/${label}-icon.png`
+                }
+              />
+            )}
+            {facetKey === "severity" && (
+              <AlertSeverity severity={label as Severity} />
+            )}
+            {facetKey === "assignee" && (
+              <Icon
+                icon={UserCircleIcon}
+                size="sm"
+                className="text-gray-600 !p-0"
+              />
+            )}
+            {facetKey === "status" && (
+              <Icon
+                icon={getStatusIcon(label)}
+                size="sm"
+                color={getStatusColor(label)}
+                className="!p-0"
+              />
+            )}
+            {facetKey === "dismissed" && (
+              <Icon
+                icon={label === "true" ? BellSlashIcon : BellIcon}
+                size="sm"
+                className="text-gray-600 !p-0"
+              />
+            )}
+            {facetKey === "incident" && (
+              <Icon icon={FireIcon} size="sm" className="text-gray-600 !p-0" />
+            )}
+          </div>
+        )}
         <Text className="truncate">{label}</Text>
       </div>
 
-      <div className="flex-shrink-0 w-8 text-right">
-        {isHovered ? (
-          <button
-            onClick={handleActionClick}
-            className="text-xs text-orange-600 hover:text-orange-800 w-full"
-          >
-            {isExclusivelySelected() ? "All" : "Only"}
-          </button>
-        ) : (
-          count > 0 && <Text className="text-xs text-gray-500">{count}</Text>
+      <div className="flex-shrink-0 w-8 text-right flex justify-end">
+        <button
+          onClick={handleActionClick}
+          className="text-xs text-orange-600 hover:text-orange-800 hidden group-hover:block"
+        >
+          {isExclusivelySelected() ? "All" : "Only"}
+        </button>
+        {count > 0 && (
+          <Text className="text-xs text-gray-500 group-hover:hidden">
+            {count}
+          </Text>
         )}
       </div>
     </div>

keep-ui/app/alerts/alert-table-facet.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Icon, Title } from "@tremor/react";
-import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import React from "react";
+import { Title } from "@tremor/react";
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { FacetProps } from "./alert-table-facet-types";
 import { FacetValue } from "./alert-table-facet-value";
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
@@ -32,18 +32,16 @@ export const Facet: React.FC<FacetProps> = ({
     v.label.toLowerCase().includes(filter.toLowerCase())
   );
 
+  const Icon = isOpen ? ChevronDownIcon : ChevronRightIcon;
+
   return (
     <div className="pb-2 border-b border-gray-200">
       <div
         className="flex items-center justify-between px-2 py-2 cursor-pointer hover:bg-gray-50"
         onClick={() => setIsOpen(!isOpen)}
       >
         <div className="flex items-center space-x-2">
-          <Icon
-            icon={isOpen ? ChevronDownIcon : ChevronRightIcon}
-            size="sm"
-            className="text-gray-600 !p-0"
-          />
+          <Icon className="size-5 -m-0.5 text-gray-600" />
           <Title className="text-sm">{name}</Title>
         </div>
       </div>

keep-ui/app/alerts/alert-table-headers.tsx

@@ -30,6 +30,7 @@ import { getColumnsIds } from "./alert-table-utils";
 import classnames from "classnames";
 import { FaArrowUp, FaArrowDown, FaArrowRight } from "react-icons/fa";
 import clsx from "clsx";
+import { getCommonPinningStylesAndClassNames } from "@/components/ui/table/utils";
 
 interface DraggableHeaderCellProps {
   header: Header<AlertDto, unknown>;
@@ -67,6 +68,9 @@ const DraggableHeaderCell = ({
           : "grab",
   };
 
+  // TODO: fix multiple pinned columns
+  // const { style, className } = getCommonPinningStylesAndClassNames(column);
+
   return (
     <TableHeaderCell
       className={clsx(