Merge branch 'main' into feature/2000-server-side-rendering

STRESS.md

@@ -1,7 +1,7 @@
 
 # UNDER CONSTRUCTION
 
-# First, create a kubernetes cluster
+# First, create a Kubernetes cluster
 
 
 # Install Keep
@@ -35,7 +35,7 @@ kubectl -n keep exec -it keep-database-659c69689-vxhkz  -- bash -c "mysql -u roo
 
 # No Load
 ## 500k alerts - 1Gi/250m cpu: get_last_alerts 2 minutes and 30 seconds
-- Keep Backend Workers get timeout after a one minutes (500's for preset and alert endpoints)
+Keep Backend Workers get a timeout after one minute (status code 500 for preset and alert endpoints)
 ## 500k alerts - 2Gi/500m cpu:
 - default mysql: get_last_alerts 1 minutes and 30 seconds
 - innodb_buffer_pool_size = 4294967296: 25 seconds, 3 seconds after cache

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

@@ -80,7 +80,8 @@ export default function IncidentChat({ incident }: { incident: IncidentDto }) {
         incident.id,
         name,
         summary,
-        incident.assignee
+        incident.assignee,
+        true
       );
       if (response.ok) {
         mutate();

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

@@ -4,7 +4,7 @@ import CreateOrUpdateIncident from "../create-or-update-incident";
 import Modal from "@/components/ui/Modal";
 import React, { useState } from "react";
 import { MdBlock, MdDone, MdModeEdit } from "react-icons/md";
-import { useIncident } from "../../../utils/hooks/useIncidents";
+import { useIncident } from "@/utils/hooks/useIncidents";
 import {
   deleteIncident,
   handleConfirmPredictedIncident,
@@ -13,13 +13,57 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { format } from "date-fns";
 import { ArrowUturnLeftIcon } from "@heroicons/react/24/outline";
+import { Disclosure } from "@headlessui/react";
+import classNames from "classnames";
+import { IoChevronDown } from "react-icons/io5";
 import IncidentChangeStatusModal from "@/app/incidents/incident-change-status-modal";
 import {STATUS_ICONS} from "@/app/incidents/statuses";
 
 interface Props {
   incident: IncidentDto;
 }
 
+function Summary({
+  title,
+  summary,
+  collapsable,
+  className,
+}: {
+  title: string;
+  summary: string;
+  collapsable?: boolean;
+  className?: string;
+}) {
+  if (collapsable) {
+    return (
+      <Disclosure as="div" className={classNames("space-y-1", className)}>
+        <Disclosure.Button>
+          {({ open }) => (
+            <h4 className="text-gray-500 text-sm inline-flex justify-between items-center gap-1">
+              <span>{title}</span>
+              <IoChevronDown
+                className={classNames({ "rotate-180": open }, "text-slate-400")}
+              />
+            </h4>
+          )}
+        </Disclosure.Button>
+
+        <Disclosure.Panel as="div" className="space-y-2 relative">
+          {summary}
+        </Disclosure.Panel>
+      </Disclosure>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <h3 className="text-gray-500 text-sm">{title}</h3>
+      {/*TODO: suggest generate summary if it's empty*/}
+      {summary ? <p>{summary}</p> : <p>No summary yet</p>}
+    </div>
+  );
+}
+
 export default function IncidentInformation({ incident }: Props) {
   const router = useRouter();
   const { data: session } = useSession();
@@ -58,7 +102,7 @@ export default function IncidentInformation({ incident }: Props) {
   else if (severity === "warning") severityColor = "yellow";
 
   return (
-    <div className="flex h-full flex-col justify-between">
+    <div className="flex w-full h-full flex-col justify-between">
       <div className="flex flex-col gap-2">
         <div className="flex justify-between text-sm gap-1">
           <Title className="flex-grow items-center">
@@ -141,9 +185,15 @@ export default function IncidentInformation({ incident }: Props) {
             </div>
           </div>
         </div>
-        <div>
-          <h3 className="text-gray-500 text-sm">Summary</h3>
-          {summary ? <p>{summary}</p> : <p>No summary yet</p>}
+        <div className="flex flex-col gap-2 max-w-3xl">
+          <Summary title="Summary" summary={summary} />
+          {incident.user_summary && incident.generated_summary ? (
+            <Summary
+              title="AI version"
+              summary={incident.generated_summary}
+              collapsable={true}
+            />
+          ) : null}
         </div>
         <div className="flex gap-4">
           {!!incident.start_time && (

keep-ui/app/incidents/create-or-update-incident.tsx

@@ -30,21 +30,25 @@ export const updateIncidentRequest = async (
   incidentId: string,
   incidentName: string,
   incidentUserSummary: string,
-  incidentAssignee: string
+  incidentAssignee: string,
+  generatedByAi: boolean = false
 ) => {
   const apiUrl = getApiURL();
-  const response = await fetch(`${apiUrl}/incidents/${incidentId}`, {
-    method: "PUT",
-    headers: {
-      Authorization: `Bearer ${session?.accessToken}`,
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      user_generated_name: incidentName,
-      user_summary: incidentUserSummary,
-      assignee: incidentAssignee,
-    }),
-  });
+  const response = await fetch(
+    `${apiUrl}/incidents/${incidentId}?generatedByAi=${generatedByAi}`,
+    {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        user_generated_name: incidentName,
+        user_summary: incidentUserSummary,
+        assignee: incidentAssignee,
+      }),
+    }
+  );
   return response;
 };
 

keep-ui/components/navbar/DashboardLinks.tsx

@@ -125,26 +125,33 @@ export const DashboardLinks = ({ session }: DashboardProps) => {
           onDragEnd={onDragEnd}
         >
           <SortableContext items={dashboards.map((dashboard) => dashboard.id)}>
-            {dashboards && dashboards.length ?
+            {dashboards && dashboards.length ? (
               dashboards.map((dashboard) => (
                 <DashboardLink
                   key={dashboard.id}
                   dashboard={dashboard}
                   pathname={pathname}
                   deleteDashboard={deleteDashboard}
                 />
-              )): <Text className="text-xs">Dashboards will appear here when saved.</Text> }
+              ))
+            ) : (
+              <Text className="text-xs max-w-[200px] px-2">
+                Dashboards will appear here when saved.
+              </Text>
+            )}
           </SortableContext>
         </DndContext>
-        <div className="flex flex-col justify-center items-center">
+        {/* TODO: use link instead of button */}
         <Button
           size="xs"
           color="orange"
           variant="secondary"
-          className="h-5"
+          className="h-5 mx-2"
           onClick={handleCreateDashboard}
           icon={PlusIcon}
-        /></div>
+        >
+          Add Dashboard
+        </Button>
       </Disclosure.Panel>
     </Disclosure>
   );