Implemented new spec of container_events

dashboard/src/main/home/cluster-dashboard/dashboard/incidents/EventDrawer.tsx

@@ -1,9 +1,10 @@
 import Loading from "components/Loading";
-import React, { useContext, useEffect, useState } from "react";
+import { isEmpty, isObjectLike } from "lodash";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import styled from "styled-components";
-import { IncidentEvent } from "./IncidentPage";
+import { IncidentContainerEvent, IncidentEvent } from "./IncidentPage";
 
 const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
   const { currentProject, currentCluster } = useContext(Context);
@@ -12,13 +13,26 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
     null
   );
 
+  const containers: IncidentContainerEvent[] = useMemo(() => {
+    if (isEmpty(event?.container_events)) {
+      return [];
+    }
+
+    return Object.values(event?.container_events || {});
+  }, [event]);
+
   useEffect(() => {
     if (!event) {
       return () => {};
     }
 
     let isSubscribed = true;
-    const promises = event.container_events.map((container) => {
+
+    const containersWithLogs = containers.filter(
+      (container) => !container.log_id
+    );
+
+    const promises = containersWithLogs.map((container) => {
       return api
         .getIncidentLogsByLogId<{ contents: string }>(
           "<token>",
@@ -58,7 +72,7 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
     return () => {
       isSubscribed = false;
     };
-  }, [event]);
+  }, [containers]);
 
   if (!event) {
     return null;
@@ -77,14 +91,18 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
         <span>Pod Phase: {event?.pod_phase}</span>
         <span>Pod Status: {event?.pod_status}</span>
       </div>
-      {event.container_events.map((container) => {
+      {containers.map((container) => {
+        const logs = containerLogs[container.container_name];
+
         return (
           <>
             <h3>{container.container_name}</h3>
             <span>
               {container.message} - Exit Code: {container.exit_code}
             </span>
-            <div>{containerLogs[container.container_name]}</div>
+            <div>
+              {logs ? <>{logs}</> : <>No logs available for this container.</>}
+            </div>
           </>
         );
       })}

dashboard/src/main/home/cluster-dashboard/dashboard/incidents/IncidentPage.tsx

@@ -27,8 +27,6 @@ const IncidentPage = () => {
 
   const { getQueryParam, pushFiltered } = useRouting();
 
-  const history = useHistory();
-
   useEffect(() => {
     let isSubscribed = true;
 
@@ -172,89 +170,6 @@ const groupEventsByDate = (
   );
 };
 
-const mockApi = () =>
-  new Promise<{ data: Incident }>((resolve) => {
-    setTimeout(() => {
-      resolve({ data: incident_mock });
-    }, 1000);
-  });
-
-const incident_mock = {
-  incident_id: "incident:sample-web:default", // eg: "incident:sample-web:default",
-  release_name: "sample-web", // eg: "sample-web"
-  latest_state: "ONGOING", // "ONGOING" or "RESOLVED"
-  latest_reason: "Out of memory", // eg: "Out of memory",
-  latest_message: "Application crash due to out of memory issue", // eg: "Application crash due to out of memory issue"
-  events: [
-    {
-      event_id: "incident:sample-web:default:1647267140", // eg: "incident:sample-web:default:1647267140"
-      pod_name: "sample-web-9x8dsa", // eg: "sample-web-9x8dsa"
-      cluster: "crowdcow-production", // eg: "crowdcow-production"
-      namespace: "production", // eg: "production"
-      release_name: "sample-web", // eg: "sample-web" (release name)
-      release_type: "Deployment", // "Deployment" or "Job"
-      timestamp: 1549312452, // UNIX timestamp of event occurrence
-      pod_phase: "Terminated", // eg: "Terminated"
-      pod_status: "CrashLoopBackOff", // eg: "CrashLoopBackOff"
-      reason: "Out of memory", // eg: "Out of memory"
-      message: "Application crash due to out of memory issue", // eg: "Application crash due to out of memory issue",
-      container_events: [
-        {
-          container_name: "web",
-          reason: "Something",
-          message: "Something",
-          exit_code: 3,
-          log_id: "Something", // eg: "log:<UUID>"
-        },
-      ],
-    },
-    {
-      event_id: "Something", // eg: "incident:sample-web:default:1647267140"
-      pod_name: "Something", // eg: "sample-web-9x8dsa"
-      cluster: "Something", // eg: "crowdcow-production"
-      namespace: "Something", // eg: "production"
-      release_name: "Something", // eg: "sample-web" (release name)
-      release_type: "Something", // "Deployment" or "Job"
-      timestamp: 1549312452, // UNIX timestamp of event occurrence
-      pod_phase: "Something", // eg: "Terminated"
-      pod_status: "Something", // eg: "CrashLoopBackOff"
-      reason: "Something", // eg: "Out of memory"
-      message: "Something", // eg: "Application crash due to out of memory issue",
-      container_events: [
-        {
-          container_name: "Something",
-          reason: "Something",
-          message: "Something",
-          exit_code: 3,
-          log_id: "Something", // eg: "log:<UUID>"
-        },
-      ],
-    },
-    {
-      event_id: "Something", // eg: "incident:sample-web:default:1647267140"
-      pod_name: "Something", // eg: "sample-web-9x8dsa"
-      cluster: "Something", // eg: "crowdcow-production"
-      namespace: "Something", // eg: "production"
-      release_name: "Something", // eg: "sample-web" (release name)
-      release_type: "Something", // "Deployment" or "Job"
-      timestamp: 1647358791310, // UNIX timestamp of event occurrence
-      pod_phase: "Something", // eg: "Terminated"
-      pod_status: "Something", // eg: "CrashLoopBackOff"
-      reason: "Something", // eg: "Out of memory"
-      message: "Something", // eg: "Application crash due to out of memory issue",
-      container_events: [
-        {
-          container_name: "Something",
-          reason: "Something",
-          message: "Something",
-          exit_code: 3,
-          log_id: "Something", // eg: "log:<UUID>"
-        },
-      ],
-    },
-  ],
-};
-
 export type IncidentContainerEvent = {
   container_name: string;
   reason: string;
@@ -275,7 +190,9 @@ export type IncidentEvent = {
   pod_status: string;
   reason: string;
   message: string;
-  container_events: IncidentContainerEvent[];
+  container_events: {
+    [key: string]: IncidentContainerEvent;
+  };
 };
 
 export type Incident = {