clean up imports and declarations

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

@@ -6,11 +6,10 @@ import { isEmpty } from "lodash";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
-import { capitalize, readableDate } from "shared/string_utils";
+import { capitalize } from "shared/string_utils";
 import styled from "styled-components";
 import ExpandedContainer from "./ExpandedContainer";
 import { IncidentContainerEvent, IncidentEvent } from "./IncidentPage";
-import close from "assets/close.png";
 
 const EventDrawer: React.FC<{
   event: IncidentEvent;
@@ -163,42 +162,11 @@ const EventDrawerTitle = styled.span`
   color: #ffffff;
 `;
 
-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`
   border-radius: 6px;
   background: #2e3135;
@@ -209,38 +177,6 @@ const MetadataContainer = styled.div`
   margin: 12px 0;
 `;
 
-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;
-`;
-
 const StyledHelper = styled.div`
   color: #aaaabb;
   line-height: 1.6em;
@@ -248,114 +184,6 @@ const StyledHelper = styled.div`
   margin-top: 6px;
 `;
 
-const Placeholder = styled.div`
-  padding: 30px;
-  padding-bottom: 40px;
-  font-size: 13px;
-  color: #ffffff44;
-  min-height: 340px;
-  margin-top: 20px;
-  background: #ffffff08;
-  height: calc(50vh - 60px);
-  border-radius: 8px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > i {
-    font-size: 18px;
-    margin-right: 8px;
-  }
-`;
-
-const RailCover = styled.div`
-  background: #202227;
-  height: 100%;
-  width: 35px;
-  position: absolute;
-  top: 20px;
-  left: 0;
-`;
-
-const Penumbra = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #202227;
-  padding: 8px;
-  border-radius: 30px;
-  margin-right: 4px;
-`;
-
-const TimelineNode = styled.div`
-  position: absolute;
-  top: 0;
-  left: 7px;
-  display: flex;
-  align-items: center;
-  color: #aaaabb;
-  font-size: 13px;
-`;
-
-const Circle = styled.div`
-  width: 7px;
-  height: 7px;
-  border-radius: 20px;
-  background: #aaaabb;
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  padding-top: 35px;
-  padding-left: 35px;
-`;
-
-const Rail = styled.div`
-  position: absolute;
-  top: -8px;
-  left: 17px;
-  width: 3px;
-  height: 100%;
-  z-index: -1;
-  background: #36383d;
-`;
-
-const Timeline = styled.div`
-  margin-top: ${(props: { enableTopMargin: boolean }) =>
-    props.enableTopMargin ? "30px" : "unset"};
-  animation: floatIn 0.3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-  @keyframes floatIn {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-`;
-
-const Icon = styled.span<{ status: "critical" | "normal" }>`
-  font-size: 26px;
-  margin-left: 17px;
-  margin-right: 10px;
-  color: ${({ status }) => (status === "critical" ? "#ff385d" : "#aaaabb")};
-`;
-
-const ControlRow = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-bottom: 15px;
-  padding-left: 0px;
-  font-weight: 500;
-`;
-
 const BackButton = styled.div`
   display: flex;
   width: 37px;
@@ -381,11 +209,6 @@ const BackButton = styled.div`
   }
 `;
 
-const EventsGrid = styled.div`
-  position: relative;
-  padding-top: 9px;
-`;
-
 const StatusColor = styled.div`
   display: inline-block;
   margin-right: 7px;
@@ -403,11 +226,6 @@ const StatusColor = styled.div`
   border-radius: 20px;
 `;
 
-const BackButtonImg = styled.img`
-  width: 16px;
-  opacity: 0.75;
-`;
-
 const EventDrawerTitleContainer = styled.div`
   display: flex;
   justify-content: space-between;

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

@@ -1,13 +1,8 @@
 import Description from "components/Description";
-import useLastSeenPodStatus from "components/events/useLastSeenPodStatus";
 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 React from "react";
 import styled from "styled-components";
-import { IncidentContainerEvent, IncidentEvent } from "./IncidentPage";
+import { IncidentContainerEvent } from "./IncidentPage";
 
 type Props = {
   container: IncidentContainerEvent;
@@ -35,42 +30,12 @@ const ExpandedContainer: React.FC<Props> = ({ container, logs }) => {
 
 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;
@@ -82,20 +47,6 @@ const MetadataContainer = styled.div`
   margin: 12px 0;
 `;
 
-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;
@@ -109,9 +60,3 @@ const LogContainer = styled.div`
   border-radius: 4px;
   margin: 12px 0 24px 0;
 `;
-
-const Log = styled.div`
-  font-family: monospace, sans-serif;
-  font-size: 12px;
-  color: white;
-`;

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

@@ -1,11 +1,8 @@
 import Loading from "components/Loading";
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { useHistory, useParams } from "react-router";
+import { useParams } from "react-router";
 import styled from "styled-components";
-import TitleSection from "components/TitleSection";
 
-import backArrow from "assets/back_arrow.png";
-import nodePng from "assets/node.png";
 import { Drawer, withStyles } from "@material-ui/core";
 import EventDrawer from "./EventDrawer";
 import { useRouting } from "shared/routing";
@@ -13,7 +10,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import DynamicLink from "components/DynamicLink";
 import Header from "components/expanded-object/Header";
-import { capitalize, readableDate } from "shared/string_utils";
+import { capitalize } from "shared/string_utils";
 import Description from "components/Description";
 import { dateFormatter } from "../../chart/JobRunTable";
 
@@ -73,14 +70,11 @@ const IncidentPage = () => {
     return <Loading />;
   }
 
-  const handleClose = () => {
-    const redirect_url = getQueryParam("redirect_url");
-    if (!redirect_url) {
-      pushFiltered("/cluster-dashboard", []);
-      return;
-    }
-
-    pushFiltered(redirect_url, []);
+  const getBackLink = () => {
+    return (
+      getQueryParam("redirect_url") ||
+      "/cluster-dashboard?selected_tab=incidents"
+    );
   };
 
   const getResourceLink = () => {
@@ -97,12 +91,9 @@ const IncidentPage = () => {
   return (
     <StyledExpandedNodeView>
       <HeaderWrapper>
-        {/* <BackButton onClick={handleClose}>
-          <BackButtonImg src={backArrow} />
-        </BackButton> */}
         <Header
-          last_updated={readableDate("2022-03-18T21:02:50.602847-04:00")}
-          back_link={"/infrastructure"}
+          last_updated={dateFormatter(incident.updated_at * 1000)}
+          back_link={getBackLink()}
           name={"Incident for " + incident.release_name}
           icon={"error"}
           materialIconClass="material-icons"
@@ -131,18 +122,6 @@ const IncidentPage = () => {
             </StatusContainer>,
           ]}
         />
-        {/* <TitleSection materialIconClass="material-icons" icon="error">
-          Incident for {incident.release_name}
-          <ResourceLink
-            to={"/"}
-            target="_blank"
-            onClick={(e: any) => e.stopPropagation()}
-          >
-            {incident.release_name}
-            <i className="material-icons">open_in_new</i>
-          </ResourceLink>
-        </TitleSection>
-         */}
       </HeaderWrapper>
       <LineBreak />
       <BodyWrapper>
@@ -285,56 +264,6 @@ const LineBreak = styled.div`
   margin: 10px 0px 35px;
 `;
 
-const IncidentMessage = styled.span`
-  display: block;
-  font-size: 16px;
-  color: #ffffff88;
-  margin-top: 10px;
-`;
-
-const IncidentStatus = styled.span`
-  display: block;
-  font-size: 16px;
-  color: #ffffff88;
-  margin-top: 10px;
-  > i {
-    margin-left: 5px;
-    color: ${(props: { status: string }) => {
-      if (props.status === "ONGOING") {
-        return "#f5cb42";
-      }
-      return "#00d12a";
-    }};
-  }
-`;
-
-const BackButton = styled.div`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: flex;
-  width: 36px;
-  cursor: pointer;
-  height: 36px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-    > img {
-      opacity: 1;
-    }
-  }
-`;
-
-const BackButtonImg = styled.img`
-  width: 16px;
-  opacity: 0.75;
-`;
-
 const BodyWrapper = styled.div`
   width: 100%;
   height: 100%;

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

@@ -2,11 +2,10 @@ import Table from "components/Table";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Column } from "react-table";
 import api from "shared/api";
-import { integrationList } from "shared/common";
 import { Context } from "shared/Context";
 import { hardcodedIcons } from "shared/hardcodedNameDict";
 import { useRouting } from "shared/routing";
-import { capitalize, readableDate } from "shared/string_utils";
+import { capitalize } from "shared/string_utils";
 import styled from "styled-components";
 import { dateFormatter } from "../../chart/JobRunTable";
 import { Incident } from "./IncidentPage";