Fixed container logs not being fetched and style issues

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

@@ -29,7 +29,7 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
     let isSubscribed = true;
 
     const containersWithLogs = containers.filter(
-      (container) => !container.log_id
+      (container) => container.log_id
     );
 
     const promises = containersWithLogs.map((container) => {
@@ -95,7 +95,7 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
         const logs = containerLogs[container.container_name];
 
         return (
-          <>
+          <div key={container.container_name}>
             <h3>{container.container_name}</h3>
             <span>
               {container.message} - Exit Code: {container.exit_code}
@@ -103,15 +103,7 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
             <div>
               {logs ? <>{logs}</> : <>No logs available for this container.</>}
             </div>
-          </>
-        );
-      })}
-      {Object.entries(containerLogs || {}).map(([key, value]) => {
-        return (
-          <>
-            <h3>{key}</h3>
-            <div>{value}</div>
-          </>
+          </div>
         );
       })}
     </EventDrawerContainer>

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

@@ -84,52 +84,48 @@ const IncidentPage = () => {
       </HeaderWrapper>
       <LineBreak />
       <BodyWrapper>
-        {Object.entries(events).map(([date, events_list]) => {
-          return (
-            <>
-              <StyledDate>{date}</StyledDate>
-
-              {events_list.map((event) => {
-                return (
-                  <StyledCard
-                    onClick={() => setSelectedEvent(event)}
-                    active={selectedEvent?.event_id === event.event_id}
-                  >
-                    <ContentContainer>
-                      <Icon
-                        status={"normal"}
-                        className="material-icons-outlined"
-                      >
-                        info
-                      </Icon>
-                      <EventInformation>
-                        <EventName>
-                          <Helper>Pod:</Helper>
-                          {event.pod_name}
-                        </EventName>
-                        <EventReason>{event.message}</EventReason>
-                      </EventInformation>
-                    </ContentContainer>
-                    <ActionContainer>
-                      <TimestampContainer>
-                        <TimestampIcon className="material-icons-outlined">
-                          access_time
-                        </TimestampIcon>
-                        <span>
-                          {Intl.DateTimeFormat([], {
-                            // @ts-ignore
-                            dateStyle: "full",
-                            timeStyle: "long",
-                          }).format(new Date(event.timestamp))}
-                        </span>
-                      </TimestampContainer>
-                    </ActionContainer>
-                  </StyledCard>
-                );
-              })}
-            </>
-          );
-        })}
+        {Object.entries(events).map(([date, events_list]) => (
+          <React.Fragment key={date}>
+            <StyledDate>{date}</StyledDate>
+
+            {events_list.map((event) => {
+              return (
+                <StyledCard
+                  key={event.event_id}
+                  onClick={() => setSelectedEvent(event)}
+                  active={selectedEvent?.event_id === event.event_id}
+                >
+                  <ContentContainer>
+                    <Icon status={"normal"} className="material-icons-outlined">
+                      info
+                    </Icon>
+                    <EventInformation>
+                      <EventName>
+                        <Helper>Pod:</Helper>
+                        {event.pod_name}
+                      </EventName>
+                      <EventReason>{event.message}</EventReason>
+                    </EventInformation>
+                  </ContentContainer>
+                  <ActionContainer>
+                    <TimestampContainer>
+                      <TimestampIcon className="material-icons-outlined">
+                        access_time
+                      </TimestampIcon>
+                      <span>
+                        {Intl.DateTimeFormat([], {
+                          // @ts-ignore
+                          dateStyle: "full",
+                          timeStyle: "long",
+                        }).format(new Date(event.timestamp))}
+                      </span>
+                    </TimestampContainer>
+                  </ActionContainer>
+                </StyledCard>
+              );
+            })}
+          </React.Fragment>
+        ))}
       </BodyWrapper>
       <StyledDrawer
         anchor="right"

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

@@ -122,7 +122,6 @@ const StyledCard = styled.div`
   position: relative;
   border: 2px solid #9eb4ff00;
   width: 100%;
-  height: 100%;
   :not(:last-child) {
     margin-bottom: 25px;
   }