feat: merge incidents list (frontend + severity update fix)

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

@@ -5,10 +5,15 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   TableCellsIcon,
-} from "@heroicons/react/24/outline";
+} from "@heroicons/react/16/solid";
 import { Button, Text } from "@tremor/react";
-import { StylesConfig, SingleValueProps, components, GroupBase } from 'react-select';
-import Select from 'react-select';
+import {
+  StylesConfig,
+  SingleValueProps,
+  components,
+  GroupBase,
+} from "react-select";
+import Select from "react-select";
 import { AlertDto } from "./models";
 import { Table } from "@tanstack/react-table";
 import { useAlerts } from "utils/hooks/useAlerts";
@@ -24,39 +29,46 @@ interface OptionType {
   label: string;
 }
 
-  const customStyles: StylesConfig<OptionType, false, GroupBase<OptionType>> = {
-    control: (provided, state) => ({
-      ...provided,
-      borderColor: state.isFocused ? 'orange' : provided.borderColor,
-      '&:hover': { borderColor: 'orange' },
-      boxShadow: state.isFocused ? '0 0 0 1px orange' : provided.boxShadow,
-    }),
-    singleValue: (provided) => ({
-      ...provided,
-      display: 'flex',
-      alignItems: 'center',
-    }),
-    menu: (provided) => ({
-      ...provided,
-      color: 'orange',
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      backgroundColor: state.isSelected ? 'orange' : provided.backgroundColor,
-      '&:hover': { backgroundColor: state.isSelected ? 'orange' : '#f5f5f5' },
-      color: state.isSelected ? 'white' : provided.color,
-    }),
-  };
-
-  const SingleValue = ({ children, ...props }: SingleValueProps<OptionType, false, GroupBase<OptionType>>) => (
-    <components.SingleValue {...props}>
-      {children}
-      <TableCellsIcon className="w-4 h-4 ml-2" />
-    </components.SingleValue>
-  );
+const customStyles: StylesConfig<OptionType, false, GroupBase<OptionType>> = {
+  control: (provided, state) => ({
+    ...provided,
+    borderColor: state.isFocused ? "orange" : "rgb(229 231 235)",
+    borderRadius: "0.5rem",
+    "&:hover": { borderColor: "orange" },
+    boxShadow: state.isFocused ? "0 0 0 1px orange" : provided.boxShadow,
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    display: "flex",
+    alignItems: "center",
+  }),
+  menu: (provided) => ({
+    ...provided,
+    color: "orange",
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    backgroundColor: state.isSelected ? "orange" : provided.backgroundColor,
+    "&:hover": { backgroundColor: state.isSelected ? "orange" : "#f5f5f5" },
+    color: state.isSelected ? "white" : provided.color,
+  }),
+};
 
+const SingleValue = ({
+  children,
+  ...props
+}: SingleValueProps<OptionType, false, GroupBase<OptionType>>) => (
+  <components.SingleValue {...props}>
+    {children}
+    <TableCellsIcon className="w-4 h-4 ml-2" />
+  </components.SingleValue>
+);
 
-export default function AlertPagination({ presetName, table, isRefreshAllowed }: Props) {
+export default function AlertPagination({
+  presetName,
+  table,
+  isRefreshAllowed,
+}: Props) {
   const { usePresetAlerts } = useAlerts();
   const { mutate, isLoading: isValidating } = usePresetAlerts(presetName);
 
@@ -69,50 +81,59 @@ export default function AlertPagination({ presetName, table, isRefreshAllowed }:
         Showing {pageCount === 0 ? 0 : pageIndex + 1} of {pageCount}
       </Text>
       <div className="flex gap-1">
-      <Select
-        styles={customStyles}
-        components={{ SingleValue }}
-         value={{ value: table.getState().pagination.pageSize.toString(), label: table.getState().pagination.pageSize.toString() }}
-         onChange={(selectedOption) => table.setPageSize(Number(selectedOption!.value))}
-         options={[
-           { value: "10", label: "10" },
-           { value: "20", label: "20" },
-           { value: "50", label: "50" },
-           { value: "100", label: "100" },
-         ]}
-         menuPlacement="top"
+        <Select
+          styles={customStyles}
+          components={{ SingleValue }}
+          value={{
+            value: table.getState().pagination.pageSize.toString(),
+            label: table.getState().pagination.pageSize.toString(),
+          }}
+          onChange={(selectedOption) =>
+            table.setPageSize(Number(selectedOption!.value))
+          }
+          options={[
+            { value: "10", label: "10" },
+            { value: "20", label: "20" },
+            { value: "50", label: "50" },
+            { value: "100", label: "100" },
+          ]}
+          menuPlacement="top"
         />
         <div className="flex">
           <Button
+            className="pagination-button"
             icon={ChevronDoubleLeftIcon}
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
             size="xs"
-            color="orange"
+            color="gray"
             variant="secondary"
           />
           <Button
+            className="pagination-button"
             icon={ChevronLeftIcon}
             onClick={table.previousPage}
             disabled={!table.getCanPreviousPage()}
             size="xs"
-            color="orange"
+            color="gray"
             variant="secondary"
           />
           <Button
+            className="pagination-button"
             icon={ChevronRightIcon}
             onClick={table.nextPage}
             disabled={!table.getCanNextPage()}
             size="xs"
-            color="orange"
+            color="gray"
             variant="secondary"
           />
           <Button
+            className="pagination-button"
             icon={ChevronDoubleRightIcon}
             onClick={() => table.setPageIndex(pageCount - 1)}
             disabled={!table.getCanNextPage()}
             size="xs"
-            color="orange"
+            color="gray"
             variant="secondary"
           />
         </div>

keep-ui/app/globals.css

@@ -49,3 +49,45 @@
   /* original value is ridiculous 15.000, overflowing toasts*/
   @apply z-[1000] !important;
 }
+
+@keyframes scroll-shadow-left {
+  0% {
+    filter: none
+  }
+  25%, 100% {
+    filter: drop-shadow(rgba(0, 0, 0, 0.07) -2px 9px 5px)
+  }
+}
+
+@keyframes scroll-shadow-right {
+  0%, 75% {
+    filter: drop-shadow(rgba(0, 0, 0, 0.07) 2px 9px 5px)
+  }
+  99% {
+    filter: none
+  }
+}
+
+.pagination-button {
+  @apply shadow-tremor-input border-tremor-border bg-tremor-background ;
+
+  &:not(:first-child) {
+    @apply -ml-px;
+  }
+
+  &:first-child:not(:last-child) {
+    @apply rounded-r-none;
+  }
+
+  &:last-child:not(:first-child) {
+    @apply rounded-l-none;
+  }
+
+  &:not(:first-child):not(:last-child) {
+    @apply rounded-l-none rounded-r-none;
+  }
+
+  &:not(:disabled):hover {
+    @apply bg-slate-100;
+  }
+}

keep-ui/app/incidents/[id]/incident-activity.tsx

@@ -40,12 +40,13 @@ export function IncidentActivityChronoItem({ activity }: { activity: any }) {
         ". ";
   return (
     <div className="relative h-full w-full flex items-center">
-      {activity.type === "alert" && (
-        <AlertSeverity
-          severity={(activity.initiator as AlertDto).severity}
-          marginLeft={false}
-        />
-      )}
+      {activity.type === "alert" &&
+        (activity.initiator as AlertDto)?.severity && (
+          <AlertSeverity
+            severity={(activity.initiator as AlertDto).severity}
+            marginLeft={false}
+          />
+        )}
       <span className="font-semibold mr-2.5">{title}</span>
       <span className="text-gray-300">
         {subTitle} <TimeAgo date={activity.timestamp + "Z"} />
@@ -214,6 +215,7 @@ export default function IncidentActivity({
     )
   );
   const chronoIcons = activities?.map((activity, index) => {
+    console.log("activity", activity);
     if (activity.type === "comment" || activity.type === "newcomment") {
       const user = users?.find((user) => user.email === activity.initiator);
       return (
@@ -224,7 +226,7 @@ export default function IncidentActivity({
         />
       );
     } else {
-      const source = (activity.initiator as AlertDto).source[0];
+      const source = (activity.initiator as AlertDto)?.source?.[0];
       const imagePath = `/icons/${source}-icon.png`;
       return (
         <Image

keep-ui/app/incidents/[id]/incident-alert-menu.tsx

@@ -1,10 +1,10 @@
-import { TrashIcon } from "@radix-ui/react-icons";
 import { Icon } from "@tremor/react";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidentAlerts } from "utils/hooks/useIncidents";
+import { LinkSlashIcon } from "@heroicons/react/24/outline";
 
 interface Props {
   incidentId: string;
@@ -45,9 +45,9 @@ export default function IncidentAlertMenu({ incidentId, alert }: Props) {
   return (
     <div className="flex flex-col">
       <Icon
-        icon={TrashIcon}
+        icon={LinkSlashIcon}
         color="red"
-        tooltip="Remove"
+        tooltip="Remove correlation"
         className="cursor-pointer"
         onClick={onRemove}
       />