feat: runbooks queried from GitHub and Gitlab

docs/api-ref/actions/add-actions.mdx

@@ -1,3 +1,4 @@
 ---
 openapi: post /actions
+title: Add Actions
 ---

keep-ui/app/providers/filter-context/constants.ts

@@ -7,6 +7,7 @@ export const PROVIDER_LABELS: Record<TProviderLabels, string> = {
   ticketing: 'Ticketing',
   data: 'Data',
   queue: 'Queue',
+  runbook: 'Runbook',
 }
 
 export const PROVIDER_LABELS_KEYS = Object.keys(PROVIDER_LABELS);

keep-ui/app/providers/provider-tile.tsx

@@ -19,7 +19,7 @@ import {
 import "./provider-tile.css";
 import moment from "moment";
 import ImageWithFallback from "@/components/ImageWithFallback";
-import { FaCode } from "react-icons/fa";
+import { FaCode, FaMarkdown } from "react-icons/fa";
 
 interface Props {
   provider: Provider;
@@ -101,6 +101,8 @@ function getIconForTag(tag: TProviderLabels) {
       return QueueListIcon;
     case "topology":
       return MapIcon;
+    case "runbook": 
+       return FaMarkdown   
     default:
       return ChatBubbleBottomCenterIcon;
   }

keep-ui/app/providers/providers.tsx

@@ -51,13 +51,9 @@ interface AlertDistritbuionData {
   number: number;
 }
 
-export type TProviderLabels =
-  | "alert"
-  | "topology"
-  | "messaging"
-  | "ticketing"
-  | "data"
-  | "queue";
+
+export type TProviderLabels = 'alert' | 'topology' | 'messaging' | 'ticketing' | 'data' | 'queue' | 'runbook';
+
 
 export interface Provider {
   // key value pair of auth method name and auth method config

keep-ui/app/runbooks/models.ts

@@ -0,0 +1,22 @@
+export interface ContentDto {
+  id: string;
+  content: string;
+  link: string;
+  encoding: string | null;
+  file_name: string;
+  title: string | null;
+}
+export interface RunbookDto {
+  id: number;
+  title: string;
+  contents: ContentDto[];
+  provider_type: string;
+  provider_id: string;
+  repo_id: string;
+  file_path: string;
+}
+
+export type RunbookResponse = {
+  runbooks: RunbookDto[];
+  total_count: number;
+};

keep-ui/app/runbooks/page.tsx

@@ -0,0 +1,7 @@
+import RunbookIncidentTable from './runbook-table';
+
+export default function RunbookPage() {
+  return (
+      <RunbookIncidentTable />
+  );
+}

keep-ui/app/runbooks/runbook-actions.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Button } from "@tremor/react";
+import { RunbookDto } from "./models";
+import { PlusIcon } from "@radix-ui/react-icons";
+import RunbookAssociateIncidentModal from "./runbook-associate-incident-modal";
+
+interface Props {
+  selectedRowIds: string[];
+  runbooks: RunbookDto[];
+  clearRowSelection: () => void;
+}
+
+export default function RunbookActions({
+  selectedRowIds,
+  runbooks,
+  clearRowSelection,
+}: Props) {
+  const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] =
+    useState<boolean>(false);
+
+  const selectedRunbooks = runbooks.filter((_runbook, index) =>
+    selectedRowIds.includes(index.toString())
+  );
+
+  const showIncidentSelector = () => {
+    setIsIncidentSelectorOpen(true);
+  };
+  const hideIncidentSelector = () => {
+    setIsIncidentSelectorOpen(false);
+  };
+
+  const handleSuccessfulRunbooksAssociation = () => {
+    hideIncidentSelector();
+    clearRowSelection();
+  };
+
+  return (
+    <div className="w-full flex justify-end items-center">
+      <Button
+        icon={PlusIcon}
+        size="xs"
+        color="orange"
+        className="ml-2.5"
+        onClick={showIncidentSelector}
+        tooltip="Associate events with incident"
+      >
+        Associate with incident
+      </Button>
+      <RunbookAssociateIncidentModal
+        isOpen={isIncidentSelectorOpen}
+        runbooks={selectedRunbooks}
+        handleSuccess={handleSuccessfulRunbooksAssociation}
+        handleClose={hideIncidentSelector}
+      />
+    </div>
+  );
+}

keep-ui/app/runbooks/runbook-associate-incident-modal.tsx

@@ -0,0 +1,195 @@
+import Modal from "@/components/ui/Modal";
+import { Button, Divider, SelectItem, Title } from "@tremor/react";
+import Select from "@/components/ui/Select";
+import CreateOrUpdateIncident from "app/incidents/create-or-update-incident";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { FormEvent, useCallback, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { getApiURL } from "../../utils/apiUrl";
+import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
+import Loading from "../loading";
+import { RunbookDto } from "./models";
+
+interface AlertAssociateIncidentModalProps {
+  isOpen: boolean;
+  handleSuccess: () => void;
+  handleClose: () => void;
+  runbooks: Array<RunbookDto>;
+}
+
+const RunbookAssociateIncidentModal = ({
+  isOpen,
+  handleSuccess,
+  handleClose,
+  runbooks,
+}: AlertAssociateIncidentModalProps) => {
+  const [createIncident, setCreateIncident] = useState(false);
+
+  const { data: incidents, isLoading, mutate } = useIncidents(true, 100);
+  usePollIncidents(mutate);
+
+  const [selectedIncident, setSelectedIncident] = useState<
+    string | undefined
+  >();
+  // get the token
+  const { data: session } = useSession();
+  const router = useRouter();
+  console.log("Associating runbooks is outside", runbooks.map(({ id }) => id));
+
+  const associateRunbooksHandler = async (incidentId: string) => {
+    const apiUrl = getApiURL();
+    console.log("Associating runbooks with incident", incidentId);
+    console.log("Associating runbooks is", runbooks.map(({ id }) => id));
+    console.log("Associating session?.accessToken", session?.accessToken);
+
+    const response = await fetch(`${apiUrl}/incidents/${incidentId}/runbooks`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(runbooks.map(({ id }) => id)),
+    });
+    if (response.ok) {
+      handleSuccess();
+      await mutate();
+      toast.success("Runbooks associated with incident successfully");
+    } else {
+      toast.error(
+        "Failed to associated runbooks with incident, please contact us if this issue persists."
+      );
+    }
+  };
+
+  const handleAssociateRunbooks = (e: FormEvent) => {
+    e.preventDefault();
+    if (selectedIncident) associateRunbooksHandler(selectedIncident);
+  };
+
+  const showCreateIncidentForm = useCallback(() => setCreateIncident(true), []);
+
+  const hideCreateIncidentForm = useCallback(
+    () => setCreateIncident(false),
+    []
+  );
+
+  const onIncidentCreated = useCallback(
+    (incidentId: string) => {
+      hideCreateIncidentForm();
+      handleClose();
+      associateRunbooksHandler(incidentId);
+    },
+    [associateRunbooksHandler, handleClose, hideCreateIncidentForm]
+  );
+
+  // reset modal state after closing
+  useEffect(() => {
+    if (!isOpen) {
+      hideCreateIncidentForm();
+      setSelectedIncident(undefined);
+    }
+  }, [hideCreateIncidentForm, isOpen]);
+
+  // if this modal should not be open, do nothing
+  if (!runbooks) return null;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Choose Incident"
+      className="w-[600px]"
+    >
+      <div className="relative bg-white p-6 rounded-lg">
+        {isLoading ? (
+          <Loading />
+        ) : createIncident ? (
+          <CreateOrUpdateIncident
+            incidentToEdit={null}
+            createCallback={onIncidentCreated}
+            exitCallback={hideCreateIncidentForm}
+          />
+        ) : incidents && incidents.items.length > 0 ? (
+          <div className="h-full justify-center">
+            <Select
+              className="my-2.5"
+              placeholder="Select incident"
+              value={
+                selectedIncident
+                  ? {
+                      value: selectedIncident,
+                      label:
+                        incidents.items.find(
+                          (incident) => incident.id === selectedIncident
+                        )?.user_generated_name ||
+                        incidents.items.find(
+                          (incident) => incident.id === selectedIncident
+                        )?.ai_generated_name ||
+                        "",
+                    }
+                  : null
+              }
+              onChange={(selectedOption) =>
+                setSelectedIncident(selectedOption?.value)
+              }
+              options={incidents.items?.map((incident) => ({
+                value: incident.id,
+                label:
+                  incident.user_generated_name ||
+                  incident.ai_generated_name ||
+                  "",
+              }))}
+            />
+            <Divider />
+            <div className="flex items-center justify-between gap-6">
+              <Button
+                className="flex-1"
+                color="orange"
+                onClick={handleAssociateRunbooks}
+                disabled={selectedIncident === null}
+              >
+                Associate {runbooks.length} Runbook{runbooks.length > 1 ? "s" : ""}
+              </Button>
+
+              <Button
+                className="flex-1"
+                color="orange"
+                variant="secondary"
+                onClick={showCreateIncidentForm}
+              >
+                Create a new incident
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center gap-y-8 h-full">
+            <div className="text-center space-y-3">
+              <Title className="text-2xl">No Incidents Yet</Title>
+            </div>
+
+            <div className="flex items-center justify-between w-full gap-6">
+              <Button
+                className="flex-1"
+                color="orange"
+                onClick={() => router.push("/incidents")}
+              >
+                Incidents page
+              </Button>
+
+              <Button
+                className="flex-1"
+                color="green"
+                onClick={showCreateIncidentForm}
+              >
+                Create a new incident
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default RunbookAssociateIncidentModal;