feat: topology applications api

docs/api-ref/topology/create-application.mdx

@@ -0,0 +1,3 @@
+---
+openapi: post /topology/applications
+---

docs/api-ref/topology/delete-application.mdx

@@ -0,0 +1,3 @@
+---
+openapi: delete /topology/applications/{application_id}
+---

docs/api-ref/topology/get-applications.mdx

@@ -0,0 +1,3 @@
+---
+openapi: get /topology/applications
+---

docs/api-ref/topology/update-application.mdx

@@ -0,0 +1,3 @@
+---
+openapi: put /topology/applications/{application_id}
+---

docs/mint.json

@@ -283,7 +283,13 @@
         },
         {
           "group": "topology",
-          "pages": ["api-ref/topology/get-topology-data"]
+          "pages": [
+            "api-ref/topology/get-topology-data",
+            "api-ref/topology/create-application",
+            "api-ref/topology/delete-application",
+            "api-ref/topology/get-applications",
+            "api-ref/topology/update-application"
+          ]
         },
         {
           "group": "alerts",

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

@@ -17,14 +17,14 @@ import { useIncidents } from "utils/hooks/useIncidents";
 
 interface Props {
   incidentToEdit: IncidentDto | null;
-  createCallback?: (id: string) => void
-  exitCallback?: () => void
+  createCallback?: (id: string) => void;
+  exitCallback?: () => void;
 }
 
 export default function CreateOrUpdateIncident({
   incidentToEdit,
   createCallback,
-  exitCallback
+  exitCallback,
 }: Props) {
   const { data: session } = useSession();
   const { mutate } = useIncidents(true, 20);
@@ -34,12 +34,18 @@ export default function CreateOrUpdateIncident({
   const editMode = incidentToEdit !== null;
 
   // Display cancel btn if editing or we need to cancel for another reason (eg. going one step back in the modal etc.)
-  const cancellable = editMode || exitCallback
+  const cancellable = editMode || exitCallback;
 
   useEffect(() => {
     if (incidentToEdit) {
-      setIncidentName(incidentToEdit.user_generated_name ?? incidentToEdit.ai_generated_name ?? "");
-      setIncidentUserSummary(incidentToEdit.user_summary ?? incidentToEdit.generated_summary ?? "" );
+      setIncidentName(
+        incidentToEdit.user_generated_name ??
+          incidentToEdit.ai_generated_name ??
+          ""
+      );
+      setIncidentUserSummary(
+        incidentToEdit.user_summary ?? incidentToEdit.generated_summary ?? ""
+      );
       setIncidentAssignee(incidentToEdit.assignee ?? "");
     }
   }, [incidentToEdit]);
@@ -70,8 +76,8 @@ export default function CreateOrUpdateIncident({
       await mutate();
       toast.success("Incident created successfully");
 
-      const created = await response.json()
-      createCallback?.(created.id) // close the modal and associate the alert incident
+      const created = await response.json();
+      createCallback?.(created.id); // close the modal and associate the alert incident
     } else {
       toast.error(
         "Failed to create incident, please contact us if this issue persists."
@@ -83,21 +89,18 @@ export default function CreateOrUpdateIncident({
   const updateIncident = async (e: FormEvent) => {
     e.preventDefault();
     const apiUrl = getApiURL();
-    const response = await fetch(
-      `${apiUrl}/incidents/${incidentToEdit?.id}`,
-      {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${session?.accessToken}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          name: incidentName,
-          user_summary: incidentUserSummary,
-          assignee: incidentAssignee,
-        }),
-      }
-    );
+    const response = await fetch(`${apiUrl}/incidents/${incidentToEdit?.id}`, {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        user_generated_name: incidentName,
+        user_summary: incidentUserSummary,
+        assignee: incidentAssignee,
+      }),
+    });
     if (response.ok) {
       exitEditMode();
       await mutate();
@@ -111,21 +114,16 @@ export default function CreateOrUpdateIncident({
 
   // If the Incident is successfully updated or the user cancels the update we exit the editMode and set the editRule in the incident.tsx to null.
   const exitEditMode = () => {
-    exitCallback?.()
+    exitCallback?.();
     clearForm();
   };
 
   const submitEnabled = (): boolean => {
-    return (
-      !!incidentName
-    );
+    return !!incidentName;
   };
 
   return (
-    <form
-      className="py-2"
-      onSubmit={editMode ? updateIncident : addIncident}
-    >
+    <form className="py-2" onSubmit={editMode ? updateIncident : addIncident}>
       <Subtitle>Incident Metadata</Subtitle>
       <div className="mt-2.5">
         <Text>

keep-ui/app/topology/ui/create-application-form.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import { OnSelectionChangeParams, useOnSelectionChange } from "@xyflow/react";
-import { Application } from "../types";
+import { Application } from "../models";
 import { Button } from "@tremor/react";
 import Modal from "@/components/ui/Modal";
 import { cn } from "utils/helpers";
@@ -41,13 +41,14 @@ export function CreateApplicationForm({
     onChange,
   });
 
-  const createApplication = (application: Application) => {
-    addApplication(application);
+  const createApplication = (applicationObj: Omit<Application, "id">) => {
+    const application = addApplication(applicationObj);
     setIsModalOpen(false);
     setSelectedServices([]);
-    setTimeout(() => {
-      zoomToNode(application.id);
-    }, 100);
+    // TODO: zoom to the newly created application when API is implemented
+    // setTimeout(() => {
+    //   zoomToNode(application.id);
+    // }, 100);
   };
 
   return (

keep-ui/app/topology/ui/create-or-update-application.tsx

@@ -2,7 +2,7 @@ import { Button } from "@tremor/react";
 import { TextInput, Textarea, AutocompleteInput } from "@/components/ui";
 import { useCallback, useState } from "react";
 import { useTopology } from "utils/hooks/useTopology";
-import { Application } from "../types";
+import { Application } from "../models";
 import { Icon } from "@tremor/react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid";
 
@@ -11,26 +11,39 @@ type FormErrors = {
   services?: string;
 };
 
+type CreateApplicationFormProps = {
+  action: "create";
+  application: Pick<Application, "services">;
+  onSubmit: (application: Omit<Application, "id">) => void;
+  onCancel: () => void;
+};
+
+type UpdateApplicationFormProps = {
+  action: "edit";
+  application: Application;
+  onSubmit: (application: Application) => void;
+  onCancel: () => void;
+};
+
+type CreatOrUpdateApplicationFormProps =
+  | CreateApplicationFormProps
+  | UpdateApplicationFormProps;
+
 export function CreateOrUpdateApplicationForm({
   action,
   application,
   onSubmit,
   onCancel,
-}: {
-  action: "create" | "edit";
-  application:
-    | (Pick<Application, "services"> & Partial<Application>)
-    | Application;
-  onSubmit: (application: Omit<Application, "id"> & { id?: string }) => void;
-  onCancel: () => void;
-}) {
+}: CreatOrUpdateApplicationFormProps) {
   const { topologyData } = useTopology();
   const [applicationName, setApplicationName] = useState(
-    application?.name || ""
+    action === "edit" ? application.name : ""
   );
   const [applicationDescription, setApplicationDescription] = useState(
-    application?.description || ""
+    action === "edit" ? application.description : ""
   );
+  const applicationId = action === "edit" ? application.id : undefined;
+
   const [selectedServices, setSelectedServices] = useState<
     { id: string; name: string }[]
   >(application?.services || []);
@@ -61,13 +74,21 @@ export function CreateOrUpdateApplicationForm({
         return;
       }
       setErrors({});
-      onSubmit({ ...formValues, id: application.id });
+      if (action === "edit") {
+        onSubmit({
+          ...formValues,
+          id: applicationId!,
+        });
+      } else {
+        onSubmit(formValues);
+      }
     },
     [
+      action,
       applicationName,
       applicationDescription,
       selectedServices,
-      application.id,
+      applicationId,
       onSubmit,
     ]
   );

keep-ui/app/topology/ui/manage-application-form.tsx

@@ -3,7 +3,7 @@
 import { OnSelectionChangeParams, useOnSelectionChange } from "@xyflow/react";
 import { useState, useCallback } from "react";
 import { cn } from "utils/helpers";
-import { Application } from "../types";
+import { Application } from "../models";
 import Button from "@/components/ui/Button";
 import Modal from "@/components/ui/Modal";
 import { CreateOrUpdateApplicationForm } from "./create-or-update-application";

keep-ui/app/topology/ui/topology-map/index.tsx

@@ -94,6 +94,8 @@ const getLayoutedElements = (
   return { nodes, edges };
 };
 
+type TopologyNode = ServiceNodeType | Node;
+
 export function TopologyMap({
   topologyData,
   isLoading,
@@ -105,15 +107,15 @@ export function TopologyMap({
 }) {
   const router = useRouter();
   // State for nodes and edges
-  const [nodes, setNodes] = useState<(ServiceNodeType | Node)[]>([]);
+  const [nodes, setNodes] = useState<TopologyNode[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
   const { selectedServiceId, setSelectedServiceId } =
     useContext(ServiceSearchContext);
   const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance<ServiceNodeType, Edge>>();
+    useState<ReactFlowInstance<TopologyNode, Edge>>();
 
   const onNodesChange = useCallback(
-    (changes: NodeChange<ServiceNodeType>[]) =>
+    (changes: NodeChange<TopologyNode>[]) =>
       setNodes((nds) => applyNodeChanges(changes, nds)),
     []
   );
@@ -306,6 +308,8 @@ export function TopologyMap({
           onEdgeMouseEnter={(_event, edge) => onEdgeHover("enter", edge)}
           onEdgeMouseLeave={(_event, edge) => onEdgeHover("leave", edge)}
           nodeTypes={{
+            // TODO: fix type
+            // @ts-ignore
             service: ServiceNode,
             application: ApplicationNode,
           }}

keep-ui/app/topology/ui/topology-map/service-node.tsx

@@ -3,7 +3,7 @@ import { Handle, NodeProps, Position } from "@xyflow/react";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { useAlertPolling } from "utils/hooks/usePusher";
 import { useRouter } from "next/navigation";
-import { ServiceNodeType } from "../types";
+import { ServiceNodeType } from "../../models";
 import { cn } from "utils/helpers";
 
 const THRESHOLD = 5;

keep-ui/components/ui/TextInput.tsx

@@ -5,7 +5,7 @@ import {
 import { forwardRef } from "react";
 import { cn } from "utils/helpers";
 
-export const TextInput = forwardRef(
+const TextInput = forwardRef(
   (
     { className, ...props }: TextInputProps,
     ref: React.Ref<HTMLInputElement>
@@ -22,3 +22,5 @@ export const TextInput = forwardRef(
     );
   }
 );
+TextInput.displayName = "TextInput";
+export { TextInput };

keep-ui/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

keep-ui/utils/hooks/useApplications.ts

@@ -1,6 +1,6 @@
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { v4 as uuidv4 } from "uuid";
-import { Application } from "../../app/topology/types";
+import { Application } from "../../app/topology/models";
 
 // Mocked API
 // TODO: replace with actual API