add basic styling to drawer

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

@@ -1,9 +1,12 @@
+import Description from "components/Description";
 import Loading from "components/Loading";
 import { isEmpty } from "lodash";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
+import { readableDate } from "shared/string_utils";
 import styled from "styled-components";
+import ExpandedContainer from "./ExpandedContainer";
 import { IncidentContainerEvent, IncidentEvent } from "./IncidentPage";
 
 const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
@@ -23,7 +26,7 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
 
   useEffect(() => {
     if (!event) {
-      return () => { };
+      return () => {};
     }
 
     let isSubscribed = true;
@@ -83,28 +86,22 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
 
   return (
     <EventDrawerContainer>
-      <EventDrawerTitle>{event?.pod_name}</EventDrawerTitle>
-      <span>{event?.message}</span>
-
-      <div>
-        <span>Pod Phase: {event?.pod_phase}</span>
-        <span>Pod Status: {event?.pod_status}</span>
-      </div>
-      {containers.map((container) => {
-        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}
-            </span>
-            <div>
-              {logs ? <>{logs}</> : <>No logs available for this container.</>}
-            </div>
-          </div>
-        );
-      })}
+      <EventDrawerTitle>Pod: {event?.pod_name}</EventDrawerTitle>
+      <Description>
+        Event reported on{" "}
+        {Intl.DateTimeFormat([], {
+          // @ts-ignore
+          dateStyle: "full",
+          timeStyle: "long",
+        }).format(new Date(event?.timestamp))}
+      </Description>
+      <Description>{event?.message}</Description>
+      {containers.map((container) => (
+        <ExpandedContainer
+          container={container}
+          logs={containerLogs[container.container_name]}
+        />
+      ))}
     </EventDrawerContainer>
   );
 };
@@ -120,5 +117,5 @@ const EventDrawerTitle = styled.span`
   display: block;
   font-size: 24px;
   font-weight: bold;
-  color: #ffffff90;
+  color: #ffffff;
 `;

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

@@ -0,0 +1,131 @@
+import Description from "components/Description";
+import Heading from "components/form-components/Heading";
+import Loading from "components/Loading";
+import { isEmpty } 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 { IncidentContainerEvent, IncidentEvent } from "./IncidentPage";
+
+type Props = {
+  container: IncidentContainerEvent;
+  logs: string;
+};
+
+const ExpandedContainer: React.FC<Props> = ({ container, logs }) => {
+  return (
+    <StyledCard>
+      <MetadataContainer>
+        <Heading>{container.container_name}</Heading>
+        <Description>
+          Container exited with code {container.exit_code}, {container.message}
+        </Description>
+        <Description>
+          The following are the container logs from this application instance:
+        </Description>
+        <Br />
+        <LogContainer>
+          {logs ? <>{logs}</> : <>No logs available for this container.</>}
+        </LogContainer>
+      </MetadataContainer>
+      {/* <MetadataContainer>
+        <Heading>Configuration</Heading>
+        <Description>
+          Your infrastructure was deployed with the following configuration:
+        </Description>
+        <PorterFormContainer>
+          <PorterFormWrapper
+            showStateDebugger={false}
+            formData={operation.form}
+            valuesToOverride={{}}
+            isReadOnly={true}
+            color="#f5cb42"
+            isInModal={false}
+            hideBottomSpacer={false}
+          />
+        </PorterFormContainer>
+      </MetadataContainer> */}
+    </StyledCard>
+  );
+};
+
+export default ExpandedContainer;
+
+const PorterFormContainer = styled.div`
+  position: relative;
+  min-width: 300px;
+`;
+
+const Br = styled.div`
+  width: 100%;
+  height: 20px;
+`;
+
+const StyledCard = styled.div`
+  display: grid;
+  grid-row-gap: 15px;
+  grid-template-columns: 1;
+`;
+
+const BackArrowContainer = styled.div`
+  width: 100%;
+  height: 24px;
+`;
+
+const BackArrow = styled.div`
+  > i {
+    color: #aaaabb;
+    font-size: 18px;
+    margin-right: 6px;
+  }
+
+  color: #aaaabb;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  width: 120px;
+`;
+
+const MetadataContainer = styled.div`
+  margin-bottom: 3px;
+  border-radius: 6px;
+  background: #2e3135;
+  padding: 0 20px;
+  overflow-y: auto;
+  min-height: 100px;
+  font-size: 13px;
+`;
+
+const LogTitleContainer = styled.div`
+  padding: 0 20px;
+  margin-bottom: 20px;
+`;
+
+const LogSectionContainer = styled.div`
+  margin-bottom: 3px;
+  border-radius: 6px;
+  background: #2e3135;
+  overflow: hidden;
+  max-height: 500px;
+  font-size: 13px;
+`;
+
+const LogContainer = styled.div`
+  padding: 14px;
+  font-size: 13px;
+  background: #121318;
+  user-select: text;
+  overflow-wrap: break-word;
+  overflow-y: auto;
+  min-height: 55px;
+  color: #aaaabb;
+  height: 400px;
+`;
+
+const Log = styled.div`
+  font-family: monospace, sans-serif;
+  font-size: 12px;
+  color: white;
+`;

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

@@ -139,7 +139,7 @@ export default IncidentsTable;
 const KindContainer = styled.div`
   display: flex;
   align-items: center;
-  min-width: 150px;
+  min-width: 200px;
 `;
 
 const Kind = styled.div`