Merge branch 'keephq:main' into Runbooks-queried-by-github-and-gitlb

docs/development/getting-started.mdx

@@ -30,6 +30,12 @@ Install Keep CLI
 poetry install
 ```
 
+To access the Keep CLI activate the environment, and access from shell.
+
+```shell
+poetry shell
+```
+
 From now on, Keep should be installed locally and accessible from your CLI, test it by executing:
 
 ```

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

@@ -1,4 +1,4 @@
-import { Button, Icon, Title } from "@tremor/react";
+import {Badge, Button, Icon, Title} from "@tremor/react";
 import { IncidentDto } from "../models";
 import CreateOrUpdateIncident from "../create-or-update-incident";
 import Modal from "@/components/ui/Modal";
@@ -13,6 +13,8 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { format } from "date-fns";
 import { ArrowUturnLeftIcon } from "@heroicons/react/24/outline";
+import IncidentChangeStatusModal from "@/app/incidents/incident-change-status-modal";
+import {STATUS_ICONS} from "@/app/incidents/statuses";
 
 interface Props {
   incident: IncidentDto;
@@ -37,14 +39,29 @@ export default function IncidentInformation({ incident }: Props) {
     mutate();
   };
 
+  const [changeStatusIncident, setChangeStatusIncident] =
+    useState<IncidentDto | null>();
+
+  const handleChangeStatus = (e: React.MouseEvent, incident: IncidentDto) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setChangeStatusIncident(incident);
+  };
+
   const formatString = "dd, MMM yyyy - HH:mm.ss 'UTC'";
   const summary = incident.user_summary || incident.generated_summary;
 
+  const severity = incident.severity;
+  let severityColor;
+  if (severity === "critical") severityColor = "red";
+  else if (severity === "info") severityColor = "blue";
+  else if (severity === "warning") severityColor = "yellow";
+
   return (
     <div className="flex h-full flex-col justify-between">
       <div className="flex flex-col gap-2">
-        <div className="flex justify-between text-sm">
-          <Title className="">
+        <div className="flex justify-between text-sm gap-1">
+          <Title className="flex-grow items-center">
             {incident.is_confirmed ? "⚔️ " : "Possible "}Incident
           </Title>
           {incident.is_confirmed && (
@@ -102,19 +119,28 @@ export default function IncidentInformation({ incident }: Props) {
               />
             </div>
           )}
-        </div>
-        <div className="prose-2xl flex gap-2 items-start">
           <Icon
             icon={ArrowUturnLeftIcon}
             tooltip="Go Back"
             variant="shadow"
             className="cursor-pointer"
             onClick={() => router.back()}
           />
+        </div>
+        <div className="prose-2xl flex gap-2 items-center">
+          <Badge color={severityColor} className="capitalize">{incident.severity}</Badge>
           <span>
             {incident.user_generated_name || incident.ai_generated_name}
           </span>
         </div>
+        <div>
+          <h3 className="text-gray-500 text-sm">Status</h3>
+          <div>
+            <div onClick={(e) => handleChangeStatus(e, incident)} className="capitalize flex-grow-0 inline-flex items-center cursor-pointer">
+              {STATUS_ICONS[incident.status]} {incident.status}
+            </div>
+          </div>
+        </div>
         <div>
           <h3 className="text-gray-500 text-sm">Summary</h3>
           {summary ? <p>{summary}</p> : <p>No summary yet</p>}
@@ -155,6 +181,12 @@ export default function IncidentInformation({ incident }: Props) {
           exitCallback={handleFinishEdit}
         />
       </Modal>
+
+      <IncidentChangeStatusModal
+        incident={changeStatusIncident}
+        mutate={mutate}
+        handleClose={() => setChangeStatusIncident(null)}
+      />
     </div>
   );
 }

keep-ui/app/incidents/incident.tsx

@@ -27,8 +27,6 @@ export default function Incident() {
     { id: "creation_time", desc: true },
   ]);
 
-  console.log('incidentSorting', incidentsSorting)
-
   const {
     data: incidents,
     isLoading,

keep-ui/app/incidents/incidents-table.tsx

@@ -1,4 +1,4 @@
-import { Button, Badge, Icon } from "@tremor/react";
+import { Button, Badge } from "@tremor/react";
 import {
   ExpandedState,
   createColumnHelper,
@@ -14,18 +14,14 @@ import {
   MdKeyboardDoubleArrowRight,
 } from "react-icons/md";
 import { useSession } from "next-auth/react";
-import { IncidentDto, PaginatedIncidentsDto, Status } from "./models";
+import { IncidentDto, PaginatedIncidentsDto } from "./models";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Image from "next/image";
 import IncidentPagination from "./incident-pagination";
 import IncidentTableComponent from "./incident-table-component";
 import { deleteIncident } from "./incident-candidate-actions";
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  PauseIcon,
-} from "@heroicons/react/24/outline";
 import IncidentChangeStatusModal from "./incident-change-status-modal";
+import {STATUS_ICONS} from "@/app/incidents/statuses";
 
 const columnHelper = createColumnHelper<IncidentDto>();
 
@@ -38,33 +34,6 @@ interface Props {
   editCallback: (rule: IncidentDto) => void;
 }
 
-const STATUS_ICONS = {
-  [Status.Firing]: (
-    <Icon
-      icon={ExclamationCircleIcon}
-      tooltip={Status.Firing}
-      color="red"
-      className="w-4 h-4 mr-2"
-    />
-  ),
-  [Status.Resolved]: (
-    <Icon
-      icon={CheckCircleIcon}
-      tooltip={Status.Resolved}
-      color="green"
-      className="w-4 h-4 mr-2"
-    />
-  ),
-  [Status.Acknowledged]: (
-    <Icon
-      icon={PauseIcon}
-      tooltip={Status.Acknowledged}
-      color="gray"
-      className="w-4 h-4 mr-2"
-    />
-  ),
-};
-
 export default function IncidentsTable({
   incidents: incidents,
   mutate,

keep-ui/app/incidents/statuses.tsx

@@ -0,0 +1,31 @@
+import {Status} from "@/app/incidents/models";
+import {Icon} from "@tremor/react";
+import {CheckCircleIcon, ExclamationCircleIcon, PauseIcon} from "@heroicons/react/24/outline";
+import React from "react";
+
+export const STATUS_ICONS = {
+  [Status.Firing]: (
+    <Icon
+      icon={ExclamationCircleIcon}
+      tooltip={Status.Firing}
+      color="red"
+      className="w-4 h-4 mr-2"
+    />
+  ),
+  [Status.Resolved]: (
+    <Icon
+      icon={CheckCircleIcon}
+      tooltip={Status.Resolved}
+      color="green"
+      className="w-4 h-4 mr-2"
+    />
+  ),
+  [Status.Acknowledged]: (
+    <Icon
+      icon={PauseIcon}
+      tooltip={Status.Acknowledged}
+      color="gray"
+      className="w-4 h-4 mr-2"
+    />
+  ),
+};

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>
   );

keep/api/core/elastic.py

@@ -195,11 +195,11 @@ def index_alert(self, alert: AlertDto):
             return
 
         try:
-            # change severity to number so we can sort by it
-            alert.severity = AlertSeverity(alert.severity.lower()).order
             # query
             alert_dict = alert.dict()
             alert_dict["dismissed"] = bool(alert_dict["dismissed"])
+            # change severity to number so we can sort by it
+            alert_dict["severity"] = AlertSeverity(alert.severity.lower()).order
             self._client.index(
                 index=self.alerts_index,
                 body=alert_dict,