chore: improve get-alerts efficiency (#698)

chart/keep/values.yaml

@@ -73,11 +73,11 @@ frontend:
       value: development
     - name: HOSTNAME
       value: 0.0.0.0
-    - name: NEXT_PUBLIC_PUSHER_HOST
+    - name: PUSHER_HOST
       value: localhost
-    - name: NEXT_PUBLIC_PUSHER_PORT
+    - name: PUSHER_PORT
       value: 6001
-    - name: NEXT_PUBLIC_PUSHER_APP_KEY
+    - name: PUSHER_APP_KEY
       value: "keepappkey"
   replicaCount: 1
   image:

docker-compose-with-auth.yml

@@ -11,17 +11,20 @@ services:
       - ./state:/state
     depends_on:
       - keep-backend
-  
+
   keep-backend:
     extends:
       file: docker-compose.common.yml
       service: keep-backend-common
     image: us-central1-docker.pkg.dev/keephq/keep/keep-api
     environment:
       - AUTH_TYPE=SINGLE_TENANT
+      - KEEP_JWT_SECRET=verysecretkey
+      - KEEP_DEFAULT_USERNAME=keep
+      - KEEP_DEFAULT_PASSWORD=keep
     volumes:
       - ./state:/state
-  
+
   keep-websocket-server:
     extends:
       file: docker-compose.common.yml

docker-compose.common.yml

@@ -9,9 +9,9 @@ services:
       - NEXT_PUBLIC_API_URL=http://localhost:8080
       - NEXT_PUBLIC_POSTHOG_KEY=phc_muk9qE3TfZsX3SZ9XxX52kCGJBclrjhkP9JxAQcm1PZ
       - NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
-      - NEXT_PUBLIC_PUSHER_HOST=localhost
-      - NEXT_PUBLIC_PUSHER_PORT=6001
-      - NEXT_PUBLIC_PUSHER_APP_KEY=keepappkey
+      - PUSHER_HOST=localhost
+      - PUSHER_PORT=6001
+      - PUSHER_APP_KEY=keepappkey
       - NEXT_PUBLIC_KEEP_VERSION=0.2.9
 
   keep-backend-common:
@@ -39,4 +39,4 @@ services:
       - SOKETI_DEBUG=1
       - SOKETI_DEFAULT_APP_ID=1
       - SOKETI_DEFAULT_APP_KEY=keepappkey
-      - SOKETI_DEFAULT_APP_SECRET=keepappsecret
+      - SOKETI_DEFAULT_APP_SECRET=keepappsecret

docker/Dockerfile.ui

@@ -26,9 +26,9 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV API_URL http://localhost:8080
 ENV NEXT_PUBLIC_POSTHOG_KEY phc_muk9qE3TfZsX3SZ9XxX52kCGJBclrjhkP9JxAQcm1PZ
 ENV NEXT_PUBLIC_POSTHOG_HOST https://app.posthog.com
-ENV NEXT_PUBLIC_PUSHER_HOST=localhost
-ENV NEXT_PUBLIC_PUSHER_PORT=6001
-ENV NEXT_PUBLIC_PUSHER_APP_KEY=keepappkey
+ENV PUSHER_HOST=localhost
+ENV PUSHER_PORT=6001
+ENV PUSHER_APP_KEY=keepappkey
 
 
 RUN npm run build

docs/development/getting-started.mdx

@@ -7,13 +7,14 @@ sidebarTitle: "Getting started"
 
 ### Spin up Keep with docker-compose latest images
 The easiest way to start keep is is with docker-compose:
-```
-curl -s https://raw.githubusercontent.com/keephq/keep/main/docker-compose.yml | docker-compose -f - up
+```shell
+curl https://raw.githubusercontent.com/keephq/keep/main/start.sh | sh
 ```
 
 The docker-compose.yml contains two services:
 - keep-backend - a fastapi service that as the API server.
 - keep-frontend - a nextjs app that serves as Keep UI interface.
+- keep-websocket-server - Soketi (a pusher compatible websocket server).
 
 ### Docker-compose dev images
 You can use `docker-compose.dev.yaml` to start Keep in a development mode.

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

@@ -28,8 +28,8 @@ export default function AlertActions({
       const session = await getSession();
       const apiUrl = getApiURL();
 
-      const selectedAlerts = alerts.filter(({ id }) =>
-        selectedRowIds.includes(id)
+      const selectedAlerts = alerts.filter((_alert, index) =>
+        selectedRowIds.includes(index.toString())
       );
 
       for await (const alert of selectedAlerts) {

keep-ui/app/alerts/alert-extra-payload.tsx

@@ -1,5 +1,6 @@
 import { Accordion, AccordionBody, AccordionHeader } from "@tremor/react";
 import { AlertDto, AlertKnownKeys } from "./models";
+import { useEffect, useRef, useState } from "react";
 
 export const getExtraPayloadNoKnownKeys = (alert: AlertDto) => {
   const extraPayload = Object.entries(alert).filter(
@@ -17,6 +18,19 @@ interface Props {
 }
 
 export default function AlertExtraPayload({ alert }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  function handleAccordionToggle() {
+    setIsExpanded(!isExpanded);
+  }
+
+  useEffect(() => {
+    if (isExpanded && ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }, [isExpanded]);
+
   const { extraPayload, extraPayloadLength } =
     getExtraPayloadNoKnownKeys(alert);
 
@@ -27,8 +41,10 @@ export default function AlertExtraPayload({ alert }: Props) {
   return (
     <div>
       <Accordion>
-        <AccordionHeader>Extra Payload</AccordionHeader>
-        <AccordionBody>
+        <AccordionHeader onClick={handleAccordionToggle}>
+          Extra Payload
+        </AccordionHeader>
+        <AccordionBody ref={ref}>
           <pre className="overflow-y-scroll">
             {JSON.stringify(extraPayload, null, 2)}
           </pre>

keep-ui/app/alerts/alert-history-charts.tsx

@@ -36,9 +36,7 @@ export default function AlertHistoryCharts({
     timeUnit = "Hours";
   }
 
-  const alertsReversed = [...alerts].reverse();
-
-  const rawChartData = alertsReversed.reduce((prev, curr) => {
+  const rawChartData = [...alerts].reverse().reduce((prev, curr) => {
     const date = curr.lastReceived;
     const dateKey = getDateKey(date, timeUnit);
     if (!prev[dateKey]) {

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

@@ -6,38 +6,62 @@ import { Button, Flex, Subtitle, Title, Divider } from "@tremor/react";
 import { User } from "app/settings/models";
 import { User as NextUser } from "next-auth";
 import AlertHistoryCharts from "./alert-history-charts";
+import useSWR from "swr";
+import { getApiURL } from "utils/apiUrl";
+import { fetcher } from "utils/fetcher";
+import Loading from "app/loading";
 
 interface Props {
   isOpen: boolean;
   closeModal: () => void;
-  data: AlertDto[];
+  selectedAlert: AlertDto | null;
   users?: User[];
   currentUser: NextUser;
+  accessToken?: string;
 }
 
 export function AlertHistory({
   isOpen,
   closeModal,
-  data,
+  selectedAlert,
   users = [],
   currentUser,
+  accessToken,
 }: Props) {
-  if (!data || data.length === 0) {
+  const apiUrl = getApiURL();
+  const historyUrl =
+    selectedAlert && accessToken
+      ? `${apiUrl}/alerts/${selectedAlert.fingerprint}/history/?provider_id=${
+          selectedAlert.providerId
+        }&provider_type=${selectedAlert.source ? selectedAlert.source[0] : ""}`
+      : null;
+  const {
+    data: alerts,
+    error,
+    isLoading,
+  } = useSWR<AlertDto[]>(historyUrl, (url) => fetcher(url, accessToken!), {
+    revalidateOnFocus: false,
+  });
+
+  if (!selectedAlert || isLoading) {
     return <></>;
   }
 
-  const lastReceivedData = data.map((alert) => alert.lastReceived);
+  if (!alerts || error) {
+    return <Loading />;
+  }
+  alerts.forEach(
+    (alert) => (alert.lastReceived = new Date(alert.lastReceived))
+  );
+  alerts.sort((a, b) => b.lastReceived.getTime() - a.lastReceived.getTime());
+  const lastReceivedData = alerts.map((alert) => alert.lastReceived);
   const maxLastReceived: Date = new Date(
     Math.max(...lastReceivedData.map((date) => date.getTime()))
   );
   const minLastReceived: Date = new Date(
     Math.min(...lastReceivedData.map((date) => date.getTime()))
   );
 
-  const currentStateAlerts = data.sort(
-    (a, b) => b.lastReceived.getTime() - a.lastReceived.getTime()
-  );
-
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={closeModal}>
@@ -69,8 +93,8 @@ export function AlertHistory({
               >
                 <Flex alignItems="center" justifyContent="between">
                   <div>
-                    <Title>History of: {data[0]?.name}</Title>
-                    <Subtitle>Total alerts: {data.length}</Subtitle>
+                    <Title>History of: {alerts[0]?.name}</Title>
+                    <Subtitle>Total alerts: {alerts.length}</Subtitle>
                     <Subtitle>
                       First Occurence: {minLastReceived.toString()}
                     </Subtitle>
@@ -89,14 +113,14 @@ export function AlertHistory({
                 <AlertHistoryCharts
                   maxLastReceived={maxLastReceived}
                   minLastReceived={minLastReceived}
-                  alerts={currentStateAlerts}
+                  alerts={alerts}
                 />
                 <Divider />
                 <AlertTable
-                  alerts={[...data]}
+                  alerts={alerts}
                   users={users}
                   currentUser={currentUser}
-                  columnsToExclude={["fatigueMeter", "description"]}
+                  columnsToExclude={["description"]}
                 />
               </Dialog.Panel>
             </Transition.Child>

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

@@ -20,7 +20,6 @@ import { KeyedMutator } from "swr";
 
 interface Props {
   alert: AlertDto;
-  canOpenHistory: boolean;
   openHistory: () => void;
   provider?: Provider;
   mutate: KeyedMutator<AlertDto[]>;
@@ -40,7 +39,6 @@ interface Props {
 export default function AlertMenu({
   alert,
   provider,
-  canOpenHistory,
   openHistory,
   mutate,
   callDelete,
@@ -198,7 +196,6 @@ export default function AlertMenu({
                       <Menu.Item>
                         {({ active }) => (
                           <button
-                            disabled={canOpenHistory}
                             onClick={openHistory}
                             className={`${
                               active ? "bg-slate-200" : "text-gray-900"

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

@@ -13,12 +13,12 @@ interface Props {
 
 export default function AlertPagination({ table, mutate }: Props) {
   const [reloadLoading, setReloadLoading] = useState<boolean>(false);
-
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageCount = table.getPageCount();
   return (
     <div className="flex justify-between items-center">
       <Text>
-        Showing {table.getState().pagination.pageIndex + 1} of{" "}
-        {table.getPageCount()}
+        Showing {pageCount === 0 ? 0 : pageIndex + 1} of {pageCount}
       </Text>
       <div className="flex">
         <Select

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

@@ -4,11 +4,13 @@ import { useEffect, useRef, HTMLProps } from "react";
 
 interface Props extends HTMLProps<HTMLInputElement> {
   indeterminate?: boolean;
+  disabled?: boolean;
 }
 
 export default function AlertTableCheckbox({
   indeterminate,
   className = "",
+  disabled = false,
   ...rest
 }: Props) {
   const ref = useRef<HTMLInputElement>(null!);
@@ -23,7 +25,10 @@ export default function AlertTableCheckbox({
     <input
       type="checkbox"
       ref={ref}
-      className={className + " cursor-pointer"}
+      disabled={disabled}
+      className={
+        className + `${disabled ? "cursor-not-allowed" : "cursor-pointer"}`
+      }
       {...rest}
     />
   );