feat: Multiple sorting columns choice based on priority (#4311)

Co-authored-by: Shahar Glazner <[email protected]>

Author: skynetigor

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

@@ -154,19 +154,19 @@ const DraggableHeaderCell = ({
       column.id === "checkbox"
         ? "32px !important"
         : column.id === "source"
-        ? "40px !important"
-        : column.id === "status"
-        ? "24px !important"
-        : column.getSize(),
+          ? "40px !important"
+          : column.id === "status"
+            ? "24px !important"
+            : column.getSize(),
     opacity: isDragging ? 0.5 : 1,
     transform: CSS.Translate.toString(transform),
     transition,
     cursor:
       column.getIsPinned() !== false
         ? "default"
         : isDragging
-        ? "grabbing"
-        : "grab",
+          ? "grabbing"
+          : "grab",
   };
 
   // Hide menu for checkbox, source, severity and alertMenu columns
@@ -263,8 +263,8 @@ const DraggableHeaderCell = ({
                   column.getNextSortingOrder() === "asc"
                     ? "Sort ascending"
                     : column.getNextSortingOrder() === "desc"
-                    ? "Sort descending"
-                    : "Clear sort"
+                      ? "Sort descending"
+                      : "Clear sort"
                 }
               >
                 {column.getIsSorted() === "asc" ? (
@@ -273,6 +273,9 @@ const DraggableHeaderCell = ({
                   <ArrowUpIcon className="w-4 h-4" />
                 )}
               </span>
+              {table.getState().sorting.length > 1 && (
+                <span className="text-sm">{column.getSortIndex() + 1}</span>
+              )}
             </>
           )}
         </button>

keep-ui/app/(keep)/alerts/alert-table-server-side.tsx

@@ -58,6 +58,7 @@ import { GrTest } from "react-icons/gr";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { DynamicImageProviderIcon } from "@/components/ui";
 import { useAlertRowStyle } from "@/entities/alerts/model/useAlertRowStyle";
+import { useIsShiftKeyHeld } from "@/features/keyboard-shortcuts";
 
 const AssigneeLabel = ({ email }: { email: string }) => {
   const user = useUser(email);
@@ -326,8 +327,10 @@ export function AlertTableServerSide({
         cel: resultCel,
         offset,
         limit,
-        sortBy: sorting[0]?.id,
-        sortDirection: sorting[0]?.desc ? "DESC" : "ASC",
+        sortOptions: sorting.map((s) => ({
+          sortBy: s.id,
+          sortDirection: s.desc ? "DESC" : "ASC",
+        })),
       };
 
       alertsQueryRef.current = alertsQuery;
@@ -343,7 +346,6 @@ export function AlertTableServerSide({
   useEffect(() => {
     onReload && onReload(alertsQueryRef.current as AlertsQuery);
   }, [alertsQuery, onReload]);
-
   const [selectedAlert, setSelectedAlert] = useState<AlertDto | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] =
@@ -353,6 +355,8 @@ export function AlertTableServerSide({
     ? ["severity", "checkbox", "status", "source", "noise"]
     : ["severity", "checkbox", "status", "source"];
 
+  const isShiftPressed = useIsShiftKeyHeld();
+
   const table = useReactTable({
     getRowId: (row) => row.fingerprint,
     data: alerts,
@@ -400,6 +404,7 @@ export function AlertTableServerSide({
     pageCount: Math.ceil(alertsTotalCount / paginationState.pageSize),
     onPaginationChange: setPaginationState,
     onGroupingChange: setGrouping,
+    isMultiSortEvent: () => isShiftPressed,
   });
 
   const selectedAlertsFingerprints = Object.keys(table.getState().rowSelection);

keep-ui/features/keyboard-shortcuts/index.ts

@@ -0,0 +1 @@
+export { useIsShiftKeyHeld } from "./useIsShiftKeyHeld";

keep-ui/features/keyboard-shortcuts/useIsShiftKeyHeld.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export function useIsShiftKeyHeld() {
+  const [isShiftPressed, setIsShiftPressed] = useState(false);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Shift") {
+        setIsShiftPressed(true);
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [setIsShiftPressed]);
+
+  useEffect(() => {
+    function handleKeyUp(e: KeyboardEvent) {
+      if (e.key === "Shift") {
+        setIsShiftPressed(false);
+      }
+    }
+
+    document.addEventListener("keyup", handleKeyUp);
+    return () => document.removeEventListener("keyup", handleKeyUp);
+  }, [setIsShiftPressed]);
+
+  return isShiftPressed;
+}

keep-ui/utils/hooks/useAlerts.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { AlertDto } from "@/entities/alerts/model";
 import useSWR, { SWRConfiguration } from "swr";
 import { toDateObjectWithFallback } from "utils/helpers";
@@ -18,8 +18,7 @@ export interface AlertsQuery {
   cel?: string;
   offset?: number;
   limit?: number;
-  sortBy?: string;
-  sortDirection?: "ASC" | "DESC";
+  sortOptions?: { sortBy: string; sortDirection?: "ASC" | "DESC" }[];
 }
 
 export const useAlerts = () => {
@@ -178,16 +177,11 @@ export const useAlerts = () => {
       queryToPost.cel = query.cel;
     }
 
-    if (query?.sortBy) {
-      queryToPost.sort_by = query.sortBy;
-
-      switch (query?.sortDirection) {
-        case "DESC":
-          queryToPost.sort_dir = "desc";
-          break;
-        default:
-          queryToPost.sort_dir = "asc";
-      }
+    if (query?.sortOptions?.length) {
+      queryToPost.sort_options = query.sortOptions.map((sortOption) => ({
+        sort_by: sortOption.sortBy,
+        sort_dir: sortOption.sortDirection?.toLocaleLowerCase(),
+      }));
     }
 
     const requestUrl = `/alerts/query`;
@@ -197,7 +191,7 @@ export const useAlerts = () => {
         ? requestUrl +
           Object.entries(queryToPost)
             .sort(([fstKey], [scdKey]) => fstKey.localeCompare(scdKey))
-            .map(([key, value]) => `${key}=${value}`)
+            .map(([key, value]) => `${key}=${JSON.stringify(value)}`)
             .join("&")
         : null;