feat: instantly available incident list via ssr

keep-ui/.gitignore

@@ -8,6 +8,8 @@ pids
 *.pid
 *.seed
 
+!lib
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

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/error.tsx

@@ -6,21 +6,22 @@
 "use client";
 import Image from "next/image";
 import "./error.css";
-import {useEffect} from "react";
-import {Title, Subtitle} from "@tremor/react";
-import {Button, Text} from "@tremor/react";
+import { useEffect } from "react";
+import { Title, Subtitle } from "@tremor/react";
+import { Button, Text } from "@tremor/react";
 import { signOut } from "next-auth/react";
+import { KeepApiError } from "@/shared/lib/KeepApiError";
 
 export default function ErrorComponent({
   error,
   reset,
 }: {
-  error: Error | KeepApiError
-  reset: () => void
+  error: Error | KeepApiError;
+  reset: () => void;
 }) {
   useEffect(() => {
-    console.error(error)
-  }, [error])
+    console.error(error);
+  }, [error]);
 
   return (
     <div className="error-container">
@@ -29,16 +30,16 @@ export default function ErrorComponent({
         <code>
           {error instanceof KeepApiError && (
             <div className="mt-4">
-              Status Code: {error.statusCode}<br />
+              Status Code: {error.statusCode}
+              <br />
               Message: {error.message}
             </div>
           )}
         </code>
       </div>
-      {error instanceof KeepApiError && error.proposedResolution && (<Subtitle className="mt-4">
-        {error.proposedResolution}
-      </Subtitle>)
-      }
+      {error instanceof KeepApiError && error.proposedResolution && (
+        <Subtitle className="mt-4">{error.proposedResolution}</Subtitle>
+      )}
 
       <div className="error-image">
         <Image src="/keep.svg" alt="Keep" width={150} height={150} />
@@ -48,36 +49,23 @@ export default function ErrorComponent({
           onClick={() => signOut()}
           color="orange"
           variant="secondary"
-          className="mt-4 border border-orange-500 text-orange-500">
+          className="mt-4 border border-orange-500 text-orange-500"
+        >
           <Text>Sign Out</Text>
         </Button>
       ) : (
         <Button
           onClick={() => {
-            console.log("Refreshing...")
+            console.log("Refreshing...");
             window.location.reload();
           }}
           color="orange"
           variant="secondary"
-          className="mt-4 border border-orange-500 text-orange-500">
+          className="mt-4 border border-orange-500 text-orange-500"
+        >
           <Text>Try Again!</Text>
         </Button>
       )}
     </div>
-  )
-}
-
-// Custom Error Class
-export class KeepApiError extends Error {
-  url: string;
-  proposedResolution: string;
-  statusCode: number | undefined;
-
-  constructor(message: string, url: string, proposedResolution: string, statusCode?: number) {
-    super(message);
-    this.name = "KeepApiError";
-    this.url = url;
-    this.proposedResolution = proposedResolution;
-    this.statusCode = statusCode;
-  }
+  );
 }

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}
       />