Add agent summaries

package.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "16.7.1",
+  "version": "16.8.0-alpha.0",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",

src/components/Admin/Environments/index.tsx

@@ -92,7 +92,7 @@ export const Environments = () => {
             cell: (info) => {
               const value = info.getValue();
               const dateString = value
-                ? format(value, "MMM d, yyyy h:mm aaa")
+                ? format(value, "MMM d, y h:mm aaa")
                 : "";
 
               return (

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

@@ -20,7 +20,7 @@ import { Divider } from "./Divider";
 import { IdeToolbar } from "./IdeToolbar";
 import * as s from "./styles";
 
-const DATE_FORMAT = "dd MMM, yyyy HH:mm";
+const DATE_FORMAT = "dd MMM, y HH:mm";
 const SERVICE_TAGS_TO_SHOW = 2;
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 

src/components/Agentic/IncidentDetails/IncidentSummary/IncidentSummary.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { IncidentSummary } from ".";
+import { mockedIncidentSummaryRecords } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof IncidentSummary> = {
+  title: "Agentic/IncidentDetails/IncidentSummary/IncidentSummary",
+  component: IncidentSummary,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IncidentSummary>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    records: mockedIncidentSummaryRecords
+  }
+};

src/components/Agentic/IncidentDetails/IncidentSummary/IncidentSummaryRecord/index.tsx

@@ -0,0 +1,17 @@
+import { format } from "date-fns";
+import * as s from "./styles";
+import type { IncidentSummaryRecordProps } from "./types";
+
+export const IncidentSummaryRecord = ({
+  agent,
+  datetime,
+  text
+}: IncidentSummaryRecordProps) => (
+  <s.Container>
+    <s.Header>
+      <s.Agent>{agent}</s.Agent>
+      <s.DateTime>{format(datetime, "h:mm a, LLLL d y")}</s.DateTime>
+    </s.Header>
+    <s.Text>{text}</s.Text>
+  </s.Container>
+);

src/components/Agentic/IncidentDetails/IncidentSummary/IncidentSummaryRecord/styles.ts

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import {
+  bodyRegularTypography,
+  subheading1RegularTypography
+} from "../../../../common/App/typographies";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid
+    ${({ theme }) => theme.colors.v3.surface.sidePanelHeader};
+
+  &:nth-child(even) {
+    background: ${({ theme }) => theme.colors.v3.surface.primaryLight};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const Header = styled.div`
+  ${bodyRegularTypography}
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Agent = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const DateTime = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const Text = styled.span`
+  ${subheading1RegularTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;

src/components/Agentic/IncidentDetails/IncidentSummary/IncidentSummaryRecord/types.ts

@@ -0,0 +1,5 @@
+export interface IncidentSummaryRecordProps {
+  agent: string;
+  datetime: string;
+  text: string;
+}

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

@@ -0,0 +1,16 @@
+import { IncidentSummaryRecord } from "./IncidentSummaryRecord";
+import * as s from "./styles";
+import type { IncidentSummaryProps } from "./types";
+
+export const IncidentSummary = ({ records }: IncidentSummaryProps) => (
+  <s.Container>
+    {records.map((record) => (
+      <IncidentSummaryRecord
+        key={record.agent}
+        agent={record.agent_display_name}
+        datetime={record.timestamp}
+        text={record.text}
+      />
+    ))}
+  </s.Container>
+);

src/components/Agentic/IncidentDetails/IncidentSummary/mockData.ts

@@ -0,0 +1,22 @@
+import type { IncidentSummaryRecord } from "../../../../redux/services/types";
+
+export const mockedIncidentSummaryRecords: IncidentSummaryRecord[] = [
+  {
+    agent: "triager",
+    agent_display_name: "Triager",
+    timestamp: "2023-10-01T12:00:00Z",
+    text: "Lorem ipsum dolor sit amet"
+  },
+  {
+    agent: "code_resolver",
+    agent_display_name: "Code resolver",
+    timestamp: "2023-10-01T12:00:00Z",
+    text: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    agent: "infra_resolver",
+    agent_display_name: "Infra resolver",
+    timestamp: "2023-10-01T12:00:00Z",
+    text: "Lorem ipsum dolor sit amet"
+  }
+];

src/components/Agentic/IncidentDetails/IncidentSummary/styles.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${({ theme }) => theme.colors.v3.surface.sidePanelHeader};
+`;

src/components/Agentic/IncidentDetails/IncidentSummary/types.ts

@@ -0,0 +1,5 @@
+import type { IncidentSummaryRecord } from "../../../../redux/services/types";
+
+export interface IncidentSummaryProps {
+  records: IncidentSummaryRecord[];
+}

src/components/Agentic/IncidentDetails/index.tsx

@@ -24,6 +24,7 @@ import { AdditionalInfo } from "./AdditionalInfo";
 import { AgentSummary } from "./AgentSummary";
 import { IncidentAgentChat } from "./IncidentAgentChat";
 import { IncidentMetaData } from "./IncidentMetaData";
+import { IncidentSummary } from "./IncidentSummary";
 import * as s from "./styles";
 import type { AgentViewMode } from "./types";
 
@@ -147,8 +148,8 @@ export const IncidentDetails = () => {
 
   const incidentStatus = incidentData?.description;
 
-  const isAgentChatEnabled = agentsData?.agents.find(
-    (agent) => agent.name === `${agentId}_chat`
+  const isAgentChatEnabled = Boolean(
+    agentsData?.agents.find((agent) => agent.name === `${agentId}_chat`)
   );
 
   if (!incidentData && isLoading) {
@@ -239,9 +240,11 @@ export const IncidentDetails = () => {
                   <AgentSummary key={agentId} />
                 )
               ) : (
-                <s.IncidentSummaryText>
-                  {incidentData?.summary}
-                </s.IncidentSummaryText>
+                <s.IncidentSummaryContainer>
+                  <IncidentSummary
+                    records={incidentData?.summary_timeline ?? []}
+                  />
+                </s.IncidentSummaryContainer>
               )}
             </s.SummaryContainer>
             <s.AdditionalInfoContainer>

src/components/Agentic/IncidentDetails/mockData.ts

@@ -1,6 +1,7 @@
 import { type GetIncidentResponse } from "../../../redux/services/types";
 import { mockedArtifacts } from "./AdditionalInfo/Artifacts/mockData";
 import { mockedIncidentIssues } from "./AdditionalInfo/RelatedIssues/mockData";
+import { mockedIncidentSummaryRecords } from "./IncidentSummary/mockData";
 
 export const mockedIncident: GetIncidentResponse = {
   id: "incident-123",
@@ -9,6 +10,7 @@ export const mockedIncident: GetIncidentResponse = {
   status: "active",
   affected_services: ["service-1", "service-2", "service-3", "service-4"],
   summary: "This is a summary of the incident.",
+  summary_timeline: mockedIncidentSummaryRecords,
   related_issues: mockedIncidentIssues,
   related_artifacts: mockedArtifacts,
   status_details: {

src/components/Agentic/IncidentDetails/styles.ts

@@ -6,7 +6,6 @@ import {
 import { Toggle } from "../../common/v3/Toggle";
 import { OptionButton } from "../../common/v3/Toggle/styles";
 import type { ToggleProps } from "../../common/v3/Toggle/types";
-import { textStyles } from "../common/AgentEventsList/AgentEvent/TypingMarkdown/MarkdownRenderer/styles";
 import type { AgentViewMode, BreadcrumbProps } from "./types";
 
 export const Container = styled.div`
@@ -153,8 +152,7 @@ export const StatusBarText = styled.span`
   white-space: nowrap;
 `;
 
-export const IncidentSummaryText = styled.div`
-  ${textStyles}
+export const IncidentSummaryContainer = styled.div`
   flex-grow: 1;
   overflow: auto;
 `;

src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx

@@ -157,7 +157,7 @@ export const OccurrenceChart = ({
                   return (
                     <s.TooltipContainer>
                       <span>Occurrences: {value}</span>
-                      <span>{format(date, "MM/dd/yyyy")}</span>
+                      <span>{format(date, "MM/dd/y")}</span>
                     </s.TooltipContainer>
                   );
                 }}

src/components/Insights/InsightTicketRenderer/insightTickets/common/CommitInfos/index.tsx

@@ -62,7 +62,7 @@ export const CommitInfos = ({ insight, commitInfos }: CommitInfosProps) => {
           <s.ListItem key={x.label}>
             <div>{x.label}</div>
             <div>{renderCommit(commitInfos, x.id)}</div>
-            {x.dateTime && <div>{format(x.dateTime, "MM/dd/yyyy HH:mm")}</div>}
+            {x.dateTime && <div>{format(x.dateTime, "MM/dd/y HH:mm")}</div>}
           </s.ListItem>
         )),
         (i) => (

src/components/RecentActivity/LiveView/DotTooltipContent/index.tsx

@@ -15,7 +15,7 @@ export const DotTooltipContent = ({
         <s.Timestamp>
           {format(date, "HH:mm:ss.SSS")}
           <s.Divider />
-          {format(date, "MM/dd/yyyy")}
+          {format(date, "MM/dd/y")}
         </s.Timestamp>
         {getDurationString(data.duration)}
       </s.Container>

src/components/RecentActivity/LiveView/index.tsx

@@ -138,7 +138,7 @@ const getMaxDurationRecord = (
   );
 
 const formatXAxisDate = (dateTime: number): string =>
-  format(dateTime, "HH:mm MM/dd/yyyy");
+  format(dateTime, "HH:mm MM/dd/y");
 
 export const LiveView = ({ data, onClose }: LiveViewProps) => {
   const theme = useTheme();

src/redux/services/types.ts

@@ -1165,11 +1165,19 @@ export interface StatusData {
   status_info: ErrorStatusInfo | null;
 }
 
+export interface IncidentSummaryRecord {
+  agent: string;
+  agent_display_name: string;
+  timestamp: string;
+  text: string;
+}
+
 export interface GetIncidentResponse {
   id: string;
   name: string;
   description: string;
   summary: string;
+  summary_timeline: IncidentSummaryRecord[];
   status: IncidentStatus;
   related_issues: GenericIncidentIssue[];
   related_artifacts: IncidentArtifact[];