Add incident cancellation and deletion support

Author: kshmidt-digma

src/components/Agentic/IncidentDetails/IncidentMetaData/index.tsx

@@ -4,13 +4,17 @@ import { useParams } from "react-router";
 import { useAgenticDispatch } from "../../../../containers/Agentic/hooks";
 import { useGetIncidentQuery } from "../../../../redux/services/digma";
 import {
+  setIncidentToCancel,
   setIncidentToClose,
+  setIncidentToDelete,
   setStatusDetails
 } from "../../../../redux/slices/incidentsSlice";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { intersperse } from "../../../../utils/intersperse";
 import { InfoCircleIcon } from "../../../common/icons/InfoCircleIcon";
 import { NewIconButton } from "../../../common/v3/NewIconButton";
 import { Tooltip } from "../../../common/v3/Tooltip";
+import { trackingEvents } from "../../tracking";
 import { Divider } from "./Divider";
 import * as s from "./styles";
 
@@ -56,14 +60,33 @@ export const IncidentMetaData = () => {
     );
   };
 
+  const handleCancelButtonClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.INCIDENT_CANCEL_BUTTON_CLICKED);
+    if (!incidentId) {
+      return;
+    }
+
+    dispatch(setIncidentToCancel(incidentId));
+  };
+
   const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.INCIDENT_CLOSE_BUTTON_CLICKED);
     if (!incidentId) {
       return;
     }
 
     dispatch(setIncidentToClose(incidentId));
   };
 
+  const handleDeleteButtonClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.INCIDENT_DELETE_BUTTON_CLICKED);
+    if (!incidentId) {
+      return;
+    }
+
+    dispatch(setIncidentToDelete(incidentId));
+  };
+
   if (!data) {
     return <s.Container />;
   }
@@ -160,12 +183,24 @@ export const IncidentMetaData = () => {
   return (
     <s.Container>
       <s.AttributesList>{attributes}</s.AttributesList>
+      {data.status === "active" && (
+        <s.CloseIncidentButton
+          label={"Cancel incident"}
+          onClick={handleCancelButtonClick}
+        />
+      )}
       {data.status === "pending" && (
         <s.CloseIncidentButton
           label={"Close incident"}
           onClick={handleCloseButtonClick}
         />
       )}
+      {["closed", "cancelled"].includes(data.status) && (
+        <s.CloseIncidentButton
+          label={"Delete incident"}
+          onClick={handleDeleteButtonClick}
+        />
+      )}
     </s.Container>
   );
 };

src/components/Agentic/IncidentsContainer/CancelIncidentDialogOverlay/index.tsx

@@ -0,0 +1,42 @@
+import {
+  useAgenticDispatch,
+  useAgenticSelector
+} from "../../../../containers/Agentic/hooks";
+import { useCancelIncidentMutation } from "../../../../redux/services/digma";
+import { setIncidentToCancel } from "../../../../redux/slices/incidentsSlice";
+import { CancelConfirmation } from "../../../common/CancelConfirmation";
+import * as s from "./styles";
+
+export const CancelIncidentDialogOverlay = () => {
+  const incidentId = useAgenticSelector(
+    (state) => state.incidents.incidentToCancel
+  );
+  const dispatch = useAgenticDispatch();
+
+  const [cancelIncident] = useCancelIncidentMutation();
+
+  const handleCancelConfirmationDialogClose = () => {
+    dispatch(setIncidentToCancel(null));
+  };
+
+  const handleCancelConfirmationDialogConfirm = () => {
+    if (incidentId) {
+      void cancelIncident({ id: incidentId });
+    }
+
+    dispatch(setIncidentToCancel(null));
+  };
+
+  return (
+    <s.StyledOverlay>
+      <CancelConfirmation
+        header={"Cancel incident?"}
+        description={"Are you sure that you want to cancel the incident?"}
+        onClose={handleCancelConfirmationDialogClose}
+        onConfirm={handleCancelConfirmationDialogConfirm}
+        confirmBtnText={"Yes, cancel"}
+        cancelBtnText={"No"}
+      />
+    </s.StyledOverlay>
+  );
+};

src/components/Agentic/IncidentsContainer/CancelIncidentDialogOverlay/styles.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Overlay } from "../../../common/Overlay";
+
+export const StyledOverlay = styled(Overlay)`
+  align-items: center;
+`;

src/components/Agentic/IncidentsContainer/DeleteIncidentDialogOverlay/index.tsx

@@ -0,0 +1,42 @@
+import {
+  useAgenticDispatch,
+  useAgenticSelector
+} from "../../../../containers/Agentic/hooks";
+import { useDeleteIncidentMutation } from "../../../../redux/services/digma";
+import { setIncidentToDelete } from "../../../../redux/slices/incidentsSlice";
+import { CancelConfirmation } from "../../../common/CancelConfirmation";
+import * as s from "./styles";
+
+export const DeleteIncidentDialogOverlay = () => {
+  const incidentId = useAgenticSelector(
+    (state) => state.incidents.incidentToDelete
+  );
+  const dispatch = useAgenticDispatch();
+
+  const [deleteIncident] = useDeleteIncidentMutation();
+
+  const handleDeleteConfirmationDialogClose = () => {
+    dispatch(setIncidentToDelete(null));
+  };
+
+  const handleDeleteConfirmationDialogConfirm = () => {
+    if (incidentId) {
+      void deleteIncident({ id: incidentId });
+    }
+
+    dispatch(setIncidentToDelete(null));
+  };
+
+  return (
+    <s.StyledOverlay>
+      <CancelConfirmation
+        header={"Delete incident?"}
+        description={"Are you sure that you want to delete the incident?"}
+        onClose={handleDeleteConfirmationDialogClose}
+        onConfirm={handleDeleteConfirmationDialogConfirm}
+        confirmBtnText={"Yes, delete"}
+        cancelBtnText={"No"}
+      />
+    </s.StyledOverlay>
+  );
+};

src/components/Agentic/IncidentsContainer/DeleteIncidentDialogOverlay/styles.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Overlay } from "../../../common/Overlay";
+
+export const StyledOverlay = styled(Overlay)`
+  align-items: center;
+`;

src/components/Agentic/IncidentsContainer/index.tsx

@@ -1,7 +1,9 @@
 import { Outlet } from "react-router";
 import { useAgenticSelector } from "../../../containers/Agentic/hooks";
+import { CancelIncidentDialogOverlay } from "./CancelIncidentDialogOverlay";
 import { CloseIncidentDialogOverlay } from "./CloseIncidentDialogOverlay";
 import { CreateIncidentChatOverlay } from "./CreateIncidentChatOverlay";
+import { DeleteIncidentDialogOverlay } from "./DeleteIncidentDialogOverlay";
 import { StatusDetailsOverlay } from "./StatusDetailsOverlay";
 import * as s from "./styles";
 
@@ -10,10 +12,18 @@ export const IncidentsContainer = () => {
     (state) => state.incidents.isCreateIncidentChatOpen
   );
 
+  const incidentToCancel = useAgenticSelector(
+    (state) => state.incidents.incidentToCancel
+  );
+
   const incidentToClose = useAgenticSelector(
     (state) => state.incidents.incidentToClose
   );
 
+  const incidentToDelete = useAgenticSelector(
+    (state) => state.incidents.incidentToDelete
+  );
+
   const statusDetails = useAgenticSelector(
     (state) => state.incidents.statusDetails
   );
@@ -22,7 +32,9 @@ export const IncidentsContainer = () => {
     <s.Container>
       <Outlet />
       {isCreateIncidentChatOpen && <CreateIncidentChatOverlay />}
+      {incidentToCancel && <CancelIncidentDialogOverlay />}
       {incidentToClose && <CloseIncidentDialogOverlay />}
+      {incidentToDelete && <DeleteIncidentDialogOverlay />}
       {statusDetails && <StatusDetailsOverlay />}
     </s.Container>
   );

src/components/Agentic/tracking.ts

@@ -13,6 +13,9 @@ export const trackingEvents = addPrefix(
     INCIDENT_CREATION_CHAT_DIALOG_CLOSED:
       "incident creation chat dialog closed",
     VIEW_NEW_INCIDENT_LINK_CLICKED: "view incident link clicked",
+    INCIDENT_CANCEL_BUTTON_CLICKED: "incident cancel button clicked",
+    INCIDENT_CLOSE_BUTTON_CLICKED: "incident close button clicked",
+    INCIDENT_DELETE_BUTTON_CLICKED: "incident delete button clicked",
     FLOW_CHART_NODE_CLICKED: "flow chart node clicked",
     FLOW_CHART_NODE_KEBAB_MENU_CLICKED: "flow chart node kebab menu clicked",
     FLOW_CHART_NODE_KEBAB_MENU_ITEM_CLICKED:

src/redux/services/digma.ts

@@ -4,12 +4,14 @@ import type {
   AddMCPServerPayload,
   AgenticInvestigatePayload,
   AgenticInvestigateResponse,
+  CancelIncidentPayload,
   CloseIncidentPayload,
   CreateEnvironmentPayload,
   CreateEnvironmentResponse,
   DeleteEnvironmentPayload,
   DeleteEnvironmentResponse,
   DeleteIncidentAgentDirectivePayload,
+  DeleteIncidentPayload,
   DeleteMCPServerPayload,
   DismissErrorPayload,
   DismissUndismissInsightPayload,
@@ -602,6 +604,20 @@ export const digmaApi = createApi({
       }),
       invalidatesTags: ["Incident"]
     }),
+    cancelIncident: builder.mutation<void, CancelIncidentPayload>({
+      query: ({ id }) => ({
+        url: `Agentic/incidents/${window.encodeURIComponent(id)}/cancel`,
+        method: "PUT"
+      }),
+      invalidatesTags: ["Incident"]
+    }),
+    deleteIncident: builder.mutation<void, DeleteIncidentPayload>({
+      query: ({ id }) => ({
+        url: `Agentic/incidents/${window.encodeURIComponent(id)}`,
+        method: "DELETE"
+      }),
+      invalidatesTags: ["Incident"]
+    }),
     getIncidentAgents: builder.query<
       GetIncidentAgentsResponse,
       GetIncidentAgentsPayload
@@ -820,6 +836,8 @@ export const {
   useGetIncidentsQuery,
   useGetIncidentQuery,
   useCloseIncidentMutation,
+  useCancelIncidentMutation,
+  useDeleteIncidentMutation,
   useGetIncidentAgentsQuery,
   useGetIncidentAgentEventsQuery,
   useGetIncidentAgentChatEventsQuery,

src/redux/services/types.ts

@@ -1091,7 +1091,12 @@ export interface GetBlockedTracesResponse {
   total: number;
 }
 
-export type IncidentStatus = "active" | "pending" | "closed" | "error";
+export type IncidentStatus =
+  | "active"
+  | "pending"
+  | "closed"
+  | "error"
+  | "cancelled";
 
 export interface IncidentResponseItem {
   id: string;
@@ -1111,6 +1116,14 @@ export interface CloseIncidentPayload {
   id: string;
 }
 
+export interface CancelIncidentPayload {
+  id: string;
+}
+
+export interface DeleteIncidentPayload {
+  id: string;
+}
+
 export interface IncidentIssue {
   issue_id: string;
   span_uid: string | null;

src/redux/slices/incidentsSlice.ts

@@ -10,14 +10,18 @@ export interface StatusDetails<T = unknown> {
 
 export interface IncidentsState extends BaseState {
   isCreateIncidentChatOpen: boolean;
+  incidentToCancel: string | null;
   incidentToClose: string | null;
+  incidentToDelete: string | null;
   statusDetails: StatusDetails | null;
 }
 
 const initialState: IncidentsState = {
   version: STATE_VERSION,
   isCreateIncidentChatOpen: false,
+  incidentToCancel: null,
   incidentToClose: null,
+  incidentToDelete: null,
   statusDetails: null
 };
 
@@ -28,9 +32,15 @@ export const incidentsSlice = createSlice({
     setIsCreateIncidentChatOpen: (state, action: { payload: boolean }) => {
       state.isCreateIncidentChatOpen = action.payload;
     },
+    setIncidentToCancel: (state, action: { payload: string | null }) => {
+      state.incidentToCancel = action.payload;
+    },
     setIncidentToClose: (state, action: { payload: string | null }) => {
       state.incidentToClose = action.payload;
     },
+    setIncidentToDelete: (state, action: { payload: string | null }) => {
+      state.incidentToDelete = action.payload;
+    },
     setStatusDetails: (state, action: { payload: StatusDetails | null }) => {
       state.statusDetails = action.payload;
     },
@@ -43,7 +53,9 @@ export const incidentsSlice = createSlice({
 
 export const {
   setIsCreateIncidentChatOpen,
+  setIncidentToCancel,
   setIncidentToClose,
+  setIncidentToDelete,
   setStatusDetails,
   clear
 } = incidentsSlice.actions;