Update API contracts

Author: kshmidt-digma

src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx

@@ -21,11 +21,7 @@ import type { ColumnMeta } from "../types";
 import * as s from "./styles";
 
 // const mockData: {
-//   issues: {
-//     type: InsightType;
-//     spanUid: string;
-//     criticality: number;
-//   }[];
+//   issues: IncidentIssue[];
 // } = {
 //   issues: [
 //     {
@@ -63,10 +59,8 @@ export const RelatedIssues = () => {
   );
 
   const issues = useMemo(
-    () =>
-      data?.relatedIssues.filter((x) => Boolean(getInsightTypeInfo(x.type))) ??
-      [],
-    [data?.relatedIssues]
+    () => data?.related_issues ?? [],
+    [data?.related_issues]
   );
 
   const columns = [
@@ -77,25 +71,29 @@ export const RelatedIssues = () => {
       },
       cell: (info) => {
         const issue = info.getValue();
-        const insightTypeInfo = getInsightTypeInfo(issue.type);
-
-        if (!insightTypeInfo) {
-          return null;
-        }
+        const insightTypeInfo = getInsightTypeInfo(issue.insight_type);
+        const label =
+          issue.type === "issue"
+            ? insightTypeInfo?.label
+            : issue.type === "error"
+            ? "Error"
+            : undefined;
 
         return (
           <s.IssueInfoContainer>
-            <InsightIcon
-              insightTypeInfo={insightTypeInfo}
-              criticality={issue.criticality}
-            />
-            <Tooltip title={insightTypeInfo.label}>
-              {issue.spanUid ? (
-                <s.Link href={getIdeLauncherLinkForSpan(issue.spanUid)}>
-                  {insightTypeInfo.label}
+            {insightTypeInfo && (
+              <InsightIcon
+                insightTypeInfo={insightTypeInfo}
+                criticality={issue.criticality}
+              />
+            )}
+            <Tooltip title={label}>
+              {issue.span_id ? (
+                <s.Link href={getIdeLauncherLinkForSpan(issue.span_id)}>
+                  {label}
                 </s.Link>
               ) : (
-                <s.IssueTypeTitle>{insightTypeInfo.label}</s.IssueTypeTitle>
+                <s.IssueTypeTitle>{label}</s.IssueTypeTitle>
               )}
             </Tooltip>
           </s.IssueInfoContainer>

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

@@ -145,12 +145,14 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 
 const getFlowChartNodeData = (
   agent?: Agent,
-  sideContainerPosition?: Position
+  sideContainerPosition?: Position,
+  selectedAgentId?: string | null
 ): Partial<FlowChartNodeData> => {
   return agent
     ? {
         label: agent.display_name,
-        isActive: agent.running,
+        isActive: agent.name === selectedAgentId,
+        isRunning: agent.running,
         isDisabled: agent.status === "inactive",
         sideContainer: {
           isVisible: agent.mcp_servers.length > 0,
@@ -173,6 +175,7 @@ const getFlowChartNodeData = (
 
 export const AgentFlowChart = () => {
   const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
+  const agentId = useAgenticSelector((state) => state.incidents.agentId);
   const dispatch = useAgenticDispatch();
 
   const { data } = useGetIncidentAgentsQuery(
@@ -224,7 +227,11 @@ export const AgentFlowChart = () => {
           id: "digma",
           position: { x: 0, y: -31 }, // TODO: find a way to center this
           data: {
-            ...getFlowChartNodeData(agents?.find((a) => a.name === "digma")),
+            ...getFlowChartNodeData(
+              agents?.find((a) => a.name === "digma"),
+              Position.Top,
+              agentId
+            ),
             orientation: "vertical",
             type: "input"
           }
@@ -233,22 +240,32 @@ export const AgentFlowChart = () => {
           id: "watchman",
           position: { x: 200, y: 0 },
           data: {
-            ...getFlowChartNodeData(agents?.find((a) => a.name === "watchman"))
+            ...getFlowChartNodeData(
+              agents?.find((a) => a.name === "watchman"),
+              Position.Top,
+              agentId
+            )
           }
         },
         {
           id: "triager",
           position: { x: 500, y: 0 },
           data: {
-            ...getFlowChartNodeData(agents?.find((a) => a.name === "triager"))
+            ...getFlowChartNodeData(
+              agents?.find((a) => a.name === "triager"),
+              Position.Top,
+              agentId
+            )
           }
         },
         {
           id: "infra_resolver",
           position: { x: 800, y: -50 },
           data: {
             ...getFlowChartNodeData(
-              agents?.find((a) => a.name === "infra_resolver")
+              agents?.find((a) => a.name === "infra_resolver"),
+              Position.Top,
+              agentId
             )
           }
         },
@@ -258,7 +275,8 @@ export const AgentFlowChart = () => {
           data: {
             ...getFlowChartNodeData(
               agents?.find((a) => a.name === "code_resolver"),
-              Position.Bottom
+              Position.Bottom,
+              agentId
             )
           }
         },
@@ -267,7 +285,9 @@ export const AgentFlowChart = () => {
           position: { x: 1100, y: 0 },
           data: {
             ...getFlowChartNodeData(
-              agents?.find((a) => a.name === "validator")
+              agents?.find((a) => a.name === "validator"),
+              Position.Top,
+              agentId
             ),
             type: "output"
           }

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

@@ -49,35 +49,35 @@ export const IncidentMetaData = () => {
     return null;
   }
 
-  const hiddenServices = data.affectedServices.slice(SERVICE_TAGS_TO_SHOW);
+  const hiddenServices = data.affected_services.slice(SERVICE_TAGS_TO_SHOW);
 
   return (
     <s.Container>
       <s.DateAttribute>
         <s.DateLabel>Incident start time:</s.DateLabel>
-        <Tooltip title={new Date(data.createdAt).toString()}>
-          <s.DateValue>{format(data.createdAt, DATE_FORMAT)}</s.DateValue>
+        <Tooltip title={new Date(data.created_at).toString()}>
+          <s.DateValue>{format(data.created_at, DATE_FORMAT)}</s.DateValue>
         </Tooltip>
       </s.DateAttribute>
       <s.DividerContainer>
         <Divider color={"currentColor"} />
       </s.DividerContainer>
       <s.DateAttribute>
         <s.DateLabel>Incident close time:</s.DateLabel>
-        {data.closedAt && (
-          <Tooltip title={new Date(data.closedAt).toString()}>
-            <s.DateValue>{format(data.closedAt, DATE_FORMAT)}</s.DateValue>
+        {data.closed_at && (
+          <Tooltip title={new Date(data.closed_at).toString()}>
+            <s.DateValue>{format(data.closed_at, DATE_FORMAT)}</s.DateValue>
           </Tooltip>
         )}
       </s.DateAttribute>
-      {data.affectedServices.length > 0 && (
+      {data.affected_services.length > 0 && (
         <>
           <s.DividerContainer>
             <Divider color={"currentColor"} />
           </s.DividerContainer>
           <s.ServicesContainer>
             <span>Affected services:</span>
-            {data.affectedServices.slice(0, 2).map((x) => (
+            {data.affected_services.slice(0, 2).map((x) => (
               <Tooltip key={x} title={x}>
                 <s.ServiceTag>{x}</s.ServiceTag>
               </Tooltip>

src/components/Agentic/common/FlowChart/FlowChartNode/index.tsx

@@ -18,6 +18,7 @@ export type FlowChartNodeData = {
   orientation?: Orientation;
   type?: "default" | "input" | "output";
   isActive?: boolean;
+  isRunning?: boolean;
   isDisabled?: boolean;
   sideContainer?: {
     element: ReactNode;
@@ -38,7 +39,7 @@ export const FlowChartNode = ({ data }: NodeProps<FlowChartNode>) => {
       {data.label && (
         <s.Label $orientation={data.orientation}>{data.label}</s.Label>
       )}
-      {data.isActive && <s.StyledPulsatingDot />}
+      {data.isRunning && <s.StyledPulsatingDot />}
       {data.type !== "input" && (
         <s.InputHandle type={"target"} position={Position.Left} id={"a"}>
           <ChevronIcon

src/redux/services/types.ts

@@ -1104,9 +1104,10 @@ export interface GetIncidentPayload {
 }
 
 export interface IncidentIssue {
-  issueId: string;
-  spanUid: string | null;
-  type: InsightType;
+  issue_id: string;
+  span_id: string | null;
+  type: "issue" | "error";
+  insight_type: InsightType;
   criticality: number;
 }
 
@@ -1115,11 +1116,11 @@ export interface GetIncidentResponse {
   name: string;
   status: string;
   summary: string;
-  activeStatus: IncidentActivityStatus;
-  relatedIssues: IncidentIssue[];
-  affectedServices: string[];
-  createdAt: string;
-  closedAt: string | null;
+  active_status: IncidentActivityStatus;
+  related_issues: IncidentIssue[];
+  affected_services: string[];
+  created_at: string;
+  closed_at: string | null;
 }
 
 export type AgentStatus = "pending" | "active" | "inactive";