Merge pull request #2 from rajeshj11/feat-1780-runbooks-intergation

refactor: moved the entire runbook fetching logic to backend and added new runbook tag

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,7 +51,7 @@ 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/runbook-table.tsx

@@ -3,14 +3,16 @@
 import React, { useEffect, useMemo, useState } from "react";
 import Modal from "react-modal";
 import { Button, Badge } from "@tremor/react";
-import { DisplayColumnDef } from "@tanstack/react-table";
+import { createColumnHelper, DisplayColumnDef } from "@tanstack/react-table";
 import { GenericTable } from "@/components/table/GenericTable";
 import { useSession } from "next-auth/react";
 import { useProviders } from "utils/hooks/useProviders";
 import { ProvidersResponse, Provider } from "app/providers/providers";
 import { set } from "date-fns";
 import { useRunBookTriggers } from "utils/hooks/useRunbook";
 import { useForm, get } from "react-hook-form";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 const customStyles = {
   content: {
@@ -35,7 +37,7 @@ interface Runbook {
   incidents: Incident[];
 }
 
-const runbookData: Runbook[] = [
+const runbookData = [
   {
     id: 1,
     title: "Database Recovery",
@@ -57,46 +59,88 @@ const runbookData: Runbook[] = [
       { id: 302, name: "Scheduled Maintenance" },
     ],
   },
-];
+] as Runbook[];
 
-const columns: DisplayColumnDef<Runbook>[] = [
-  {
-    accessorKey: "title",
+const columnHelper = createColumnHelper<Runbook>();
+
+const columns = [
+  columnHelper.display({
+    id: "title",
     header: "Runbook Title",
-    cell: (info) => info.getValue(),
-  },
-  {
-    accessorKey: "incidents",
-    header: "Incidents",
-    cell: (info) => (
-      <div>
-        {info.getValue().map((incident: Incident) => (
-          <Badge key={incident.id} color="green" className="mr-2 mb-1">
-            {incident.name}
-          </Badge>
-        ))}
-      </div>
-    ),
-  },
-];
+    cell: ({ row }) => {
+      return <div>{row.original.title}</div>;
+    },
+  }),
+  columnHelper.display({
+    id: "incidents",
+    header: "Incdients",
+    cell: ({ row }) => {
+      return (
+        <div>
+          {row.original.incidents?.map((incident: Incident) => (
+            <Badge key={incident.id} color="green" className="mr-2 mb-1">
+              {incident.name}
+            </Badge>
+          ))}
+        </div>
+      );
+    },
+  }),
+] as DisplayColumnDef<Runbook>[];
+
+// function PreviewContent({type, data}:{type:string, data:string}){
+//   const [isModalOpen, setIsModalOpen] = useState(open);
+
+//   // const closeModal = () => {
+//   //   setIsModalOpen(false);
+//   // };
+//   const decodeBase64 = (encodedContent:string) => {
+//     // Use atob to decode the Base64 string and then handle UTF-8 encoding
+//     return encodedContent ? decodeURIComponent(atob(encodedContent)) : '';
+//   };
+//   return <div className={`w-full h-full p-10`}>
 
+//   <Markdown remarkPlugins={[remarkGfm]}>
+//           {decodeBase64(data)}
+//         </Markdown>
+//   </div>
+// }
+
+// TO DO: Need to work on styling
 function SettingsPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { register, handleSubmit, reset, getValues, setValue } = useForm();
-  const [userName, setUserName] = useState("");
+  const [refresh, setRefresh] = useState(0);
+  const [openPreview, setOpenPreview] = useState(false);
   const {
     runBookInstalledProviders,
     reposData,
     handleSubmit: submitHandler,
-  } = useRunBookTriggers(getValues());
+    provider,
+    fileData,
+  } = useRunBookTriggers(getValues(), refresh);
+
+  useEffect(() => {
+    setValue(
+      "repoName",
+      reposData?.legnth ? provider?.details?.authentication.repository : ""
+    );
+    setOpenPreview(false);
+  }, [reposData]);
 
   const openModal = () => {
     reset(); // Reset form when opening modal
     setIsModalOpen(true);
+    setOpenPreview(false);
   };
 
-  const closeModal = () => {
+  const closeModal = (openPreview?: boolean) => {
     setIsModalOpen(false);
+    if (openPreview) {
+      setOpenPreview(true);
+    } else {
+      setOpenPreview(false);
+    }
   };
 
   const onSubmit = (data: any) => {
@@ -109,7 +153,7 @@ function SettingsPage() {
       <Button onClick={openModal}>Settings</Button>
       <Modal
         isOpen={isModalOpen}
-        onRequestClose={closeModal}
+        onRequestClose={() => closeModal()}
         style={customStyles}
         contentLabel="Settings Modal"
       >
@@ -121,8 +165,8 @@ function SettingsPage() {
               {...register("providerId")}
               style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
               onChange={(e) => {
-                setValue("userName", "");
-                setUserName("");
+                setValue("providerId", e.target.value);
+                setRefresh((prev) => prev + 1);
               }}
             >
               <option value="" disabled>
@@ -135,20 +179,6 @@ function SettingsPage() {
               ))}
             </select>
           </div>
-          <div>
-            {/* It change according to the provider. for github we neeed user name and for gitlab we need userId */}
-            <label>User Name/User Id</label>
-            <input
-              type="text"
-              {...register("userName")}
-              placeholder="Enter username/userId."
-              style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
-              onChange={(e) => {
-                setUserName(e.target.value);
-                setValue("userName", e.target.value);
-              }}
-            />
-          </div>
           <div>
             <label>Choose Repo</label>
             <select
@@ -159,8 +189,8 @@ function SettingsPage() {
                 Select Repo
               </option>
               {reposData.map((repo: any) => (
-                <option key={repo.id} value={repo.name}>
-                  {repo.name}
+                <option key={repo.id} value={repo.option_value}>
+                  {repo.display_name}
                 </option>
               ))}
             </select>
@@ -183,10 +213,20 @@ function SettingsPage() {
               style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
             />
           </div>
+          {/* <div style={{ textAlign: "left" }}>
+            <Button
+              type="button"
+              onClick={()=>{closeModal(true)}}
+              style={{ marginRight: "10px" }}
+            >
+              Preview
+            </Button>
+           
+          </div> */}
           <div style={{ textAlign: "right" }}>
             <Button
               type="button"
-              onClick={closeModal}
+              onClick={() => closeModal()}
               style={{ marginRight: "10px" }}
             >
               Cancel
@@ -197,6 +237,7 @@ function SettingsPage() {
           </div>
         </form>
       </Modal>
+      {/* {fileData?.content && openPreview &&<PreviewContent  type="markdown" data={fileData?.content} />} */}
     </div>
   );
 }
@@ -207,15 +248,11 @@ function RunbookIncidentTable() {
 
   // Modal state management
 
-  const { data: session } = useSession();
-
   const handlePaginationChange = (newLimit: number, newOffset: number) => {
     setLimit(newLimit);
     setOffset(newOffset);
   };
 
-  // Open modal handler
-
   return (
     <div>
       <SettingsPage />
@@ -230,8 +267,6 @@ function RunbookIncidentTable() {
           console.log("Runbook clicked:", row);
         }}
       />
-
-      {/* Modal for Settings */}
     </div>
   );
 }

keep-ui/utils/apiUrl.ts

@@ -1,4 +1,3 @@
-import { Provider } from "app/providers/providers";
 
 export function getApiURL(): string {
   // https://github.com/vercel/next.js/issues/5354#issuecomment-520305040
@@ -40,14 +39,3 @@ export function getApiURL(): string {
     return process.env.API_URL!.replace("keep-api", serviceName);
   }
 }
-
-export function getRunBookUrl(provider: Provider): string {
-  switch (provider?.type) {
-    case "github":
-      return "https://api.github.com";
-    case "gitlab":
-      return "https://gitlab.com/api/v4";
-    default:
-      return "";
-  }
-}

keep-ui/utils/fetcher.ts

@@ -1,17 +1,11 @@
 import { KeepApiError } from '../app/error';
-
-export interface OverideHeaders {
-  headers: Record<string, string>;
-}
-
 export const fetcher = async (
   url: string,
   accessToken: string | undefined,
   requestInit: RequestInit = {},
-  overideHeaders?: OverideHeaders
 ) => {
   const response = await fetch(url, {
-    headers: overideHeaders?.headers ?? {
+    headers: {
       Authorization: `Bearer ${accessToken}`,
     },
     ...requestInit,