styled events tab

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -28,6 +28,7 @@ import MetricsSection from "./metrics/MetricsSection";
 import ListSection from "./ListSection";
 import StatusSection from "./status/StatusSection";
 import SettingsSection from "./SettingsSection";
+import Loading from "components/Loading";
 import { useWebsockets } from "shared/hooks/useWebsockets";
 import useAuth from "shared/auth/useAuth";
 import TitleSection from "components/TitleSection";
@@ -357,11 +358,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
         if (isLoadingChartData) {
           return (
             <Placeholder>
-              <TextWrap>
-                <Header>
-                  <Spinner src={loadingSrc} />
-                </Header>
-              </TextWrap>
+              <Loading />
               <DeployStatus chart={chart} />
             </Placeholder>
           );
@@ -628,7 +625,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
     localStorage.setItem("devOpsMode", devOpsMode.toString());
   }, [devOpsMode, currentChart?.form, isPreview]);
 
-  useEffect(() => {
+  useEffect((): any => {
     let isSubscribed = true;
 
     const ingressComponent = components?.find((c) => c.Kind === "Ingress");
@@ -810,6 +807,14 @@ const Tooltip = styled.div`
 
 const TextWrap = styled.div``;
 
+const LoadingWrapper = styled.div`
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const LineBreak = styled.div`
   width: calc(100% - 0px);
   height: 2px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventCard.tsx

@@ -26,46 +26,35 @@ const EventCard: React.FunctionComponent<CardProps> = ({
   overrideName,
 }) => {
   return (
-    <StyledCard>
-      <ContentContainer onClick={() => selectEvent && selectEvent()}>
-        {event.status == 1 && (
-          <Icon status={"normal"} className="material-icons-outlined">
-            check
-          </Icon>
-        )}
-        {event.status == 2 && (
-          <Icon status={"critical"} className="material-icons-outlined">
-            autorenew
-          </Icon>
-        )}
-        {event.status == 3 && (
-          <Icon status={"critical"} className="material-icons-outlined">
-            error
-          </Icon>
-        )}
-        <EventInformation>
-          <EventName>{overrideName ? overrideName : event.name}</EventName>
-          <EventReason>
-            {event.status == 2 && (
-              <Helper>Step {event.name} In Progress</Helper>
-            )}
-            {event.status == 1 && <Helper>Step {event.name} Successful</Helper>}
-            {event.status == 3 && (
-              <Helper>
-                Step {event.name} failed: {event.info}
-              </Helper>
-            )}
-          </EventReason>
-        </EventInformation>
-      </ContentContainer>
-      <ActionContainer hasOneChild>
+    <StyledCard onClick={() => selectEvent && selectEvent()}>
+      {event.status == 1 && (
+        <Icon status="normal" className="material-icons-outlined">
+          check
+        </Icon>
+      )}
+      {event.status == 2 && (
+        <Icon className="material-icons-outlined">
+          autorenew
+        </Icon>
+      )}
+      {event.status == 3 && (
+        <Icon status="critical" className="material-icons-outlined">
+          error
+        </Icon>
+      )}
+       
+      <InfoWrapper>
+        <EventName>
+          {overrideName ? overrideName : event.name}
+          {event.status == 1 && " successful"}
+          {event.status == 2 && " in progress"}
+          {event.status == 3 && ` failed: ${event.info}`}
+        </EventName>
         <TimestampContainer>
-          <TimestampIcon className="material-icons-outlined">
-            access_time
-          </TimestampIcon>
-          <span>{getReadableDate(event.time)}</span>
+          <i className="material-icons-outlined">access_time</i>
+          {getReadableDate(event.time)}
         </TimestampContainer>
-      </ActionContainer>
+      </InfoWrapper>
     </StyledCard>
   );
 };
@@ -73,136 +62,60 @@ const EventCard: React.FunctionComponent<CardProps> = ({
 export default EventCard;
 
 const StyledCard = styled.div`
-  background: #26282f;
-  min-height: 100px;
-  width: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  border: 1px solid #26282f;
-  box-shadow: 0 4px 15px 0px #00000055;
-  border-radius: 8px;
-  padding: 14px;
-  animation: fadeIn 0.5s;
-  @keyframes fadeIn {
+  border: 1px solid #ffffff44;
+  background: #ffffff08;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  padding-left: 20px;
+  overflow: hidden;
+  height: 80px;
+  cursor: pointer;
+
+  :hover {
+    background: #ffffff11;
+    border: 1px solid #ffffff66;
+  }
+`;
+
+const Icon = styled.span<{ status?: "critical" | "normal" }>`
+  font-size: 22px;
+  margin-right: 18px;
+  color: ${({ status }) => status ? (status === "critical" ? "#cc3d42" : "#38a88a" ) : "#efefef"};
+  animation: ${({ status }) => !status && "rotating 3s linear infinite"};
+  @keyframes rotating {
     from {
-      opacity: 0;
+      transform: rotate(0deg);
     }
     to {
-      opacity: 1;
+      transform: rotate(360deg);
     }
   }
 `;
 
-const ContentContainer = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-`;
-
-const Icon = styled.span`
-  font-size: 35px;
-  margin-right: 14px;
-  color: ${({ status }: { status: "critical" | "normal" }) =>
-    status === "critical" ? "red" : "green"};
-`;
-
-const EventInformation = styled.div`
+const InfoWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
-  height: 100%;
 `;
 
 const EventName = styled.div`
-  font-size: 14px;
+  font-size: 13px;
   font-family: "Work Sans", sans-serif;
   font-weight: 500;
   color: #ffffff;
 `;
 
-const Helper = styled.span`
-  font-size: 14px;
-  text-transform: capitalize;
-  color: #ffffff44;
-  margin-right: 5px;
-`;
-
-const EventReason = styled.div`
-  font-size: 18px;
-  font-family: "Work Sans", sans-serif;
-  color: #ffffff;
-  margin-top: 8px;
-`;
-
-const ActionContainer = styled.div`
-  width: max-content;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  height: 100%;
-  flex-direction: column;
-  justify-content: ${(props: { hasOneChild: boolean }) => {
-    return props.hasOneChild ? "flex-end" : "space-between";
-  }};
-`;
-
-const HistoryButton = styled.button`
-  position: relative;
-  border: none;
-  background: none;
-  color: white;
-  padding: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: #ffffff44;
-  :hover {
-    background: #32343a;
-    cursor: pointer;
-  }
-`;
-
-const Tooltip = styled.div`
-  position: absolute;
-  left: 0px;
-  word-wrap: break-word;
-  top: 38px;
-  min-height: 18px;
-  padding: 5px 7px;
-  background: #272731;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  color: white;
-  text-transform: none;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.2s 0.15s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const TimestampContainer = styled.div`
   display: flex;
-  white-space: nowrap;
   align-items: center;
-  justify-self: flex-end;
-`;
+  color: #ffffff55;
+  font-size: 13px;
+  margin-top: 8px;
 
-const TimestampIcon = styled.span`
-  margin-right: 5px;
+  > i {
+    margin-right: 5px;
+    font-size: 18px;
+    margin-left: -1px;
+  }
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventDetail.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react";
 import { EventContainer } from "./EventsTab";
+import TitleSection from "components/TitleSection";
 import EventCard, { getReadableDate } from "./EventCard";
 import styled from "styled-components";
 
@@ -11,20 +12,26 @@ interface Props {
 const EventDetail: React.FC<Props> = (props) => {
   return (
     <>
-      <button onClick={() => props.resetSelection()}>← Back button</button>
-      <h1>{props.container.name}</h1>
-      <p>Started at {getReadableDate(props.container.started_at)}</p>
+      <Flex>
+      <TitleSection handleNavBack={props.resetSelection}>
+        {props.container.name}
+      </TitleSection>
+      <P>
+        <i className="material-icons-outlined">access_time</i>
+        {getReadableDate(props.container.started_at)}
+      </P>
+      </Flex>
       <EventsGrid>
         {props.container.events
-          .slice(0)
-          .reverse()
-          .map((event) => {
-            return (
-              <React.Fragment key={event.index}>
-                <EventCard event={event} />
-              </React.Fragment>
-            );
-          })}
+        .slice(0)
+        .reverse()
+        .map((event) => {
+          return (
+            <React.Fragment key={event.index}>
+              <EventCard event={event} />
+            </React.Fragment>
+          );
+        })}
       </EventsGrid>
     </>
   );
@@ -32,6 +39,54 @@ const EventDetail: React.FC<Props> = (props) => {
 
 export default EventDetail;
 
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+const P = styled.p`
+  display: flex;
+  align-items: center;
+  color: #ffffff44;
+  font-size: 13px;
+  margin-left: 20px;
+  margin-top: 0px;
+
+  > i {
+    margin-right: 5px;
+    font-size: 18px;
+    margin-left: -1px;
+  }
+`;
+
+const BackButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-size: 13px;
+  height: 35px;
+  padding: 5px 16px;
+  padding-right: 15px;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  width: ${(props: { width: string }) => props.width};
+  color: white;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    color: white;
+    font-size: 16px;
+    margin-right: 6px;
+    margin-left: -2px;
+  }
+`;
+
 const EventsGrid = styled.div`
   display: grid;
   grid-row-gap: 15px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -6,6 +6,7 @@ import { Context } from "shared/Context";
 import { ChartType } from "../../../../../shared/types";
 import api from "../../../../../shared/api";
 import EventCard from "./EventCard";
+import Loading from "components/Loading";
 import EventDetail from "./EventDetail";
 
 export type Event = {
@@ -115,29 +116,21 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
   if (isLoading) {
     return (
       <Placeholder>
-        <div>
-          <Header>
-            <Spinner src={loadingSrc} />
-          </Header>
-        </div>
+        <Loading />
       </Placeholder>
     );
   }
 
-  if (eventData.length == 0) {
+  if (eventData.length === 0) {
     return (
       <Placeholder>
-        <div>
-          <Header>
-            This prompt appears when there are no events to display. Should
-            probably tell the user to use the --stream flag or something.
-          </Header>
-        </div>
+        <i className="material-icons">category</i>
+        No application events found.
       </Placeholder>
     );
   }
 
-  if (selectedEvent != null) {
+  if (selectedEvent !== null) {
     return (
       <EventDetail
         container={eventData[selectedEvent]}
@@ -152,22 +145,22 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
   return (
     <EventsGrid>
       {eventData
-        .slice(0)
-        .reverse()
-        .map((dat, i) => {
-          console.log(dat.started_at);
-          return (
-            <React.Fragment key={dat.started_at}>
-              <EventCard
-                event={dat.events[dat.events.length - 1]}
-                selectEvent={() => {
-                  setSelectedEvent(eventData.length - i - 1);
-                }}
-                overrideName={"Deployment"}
-              />
-            </React.Fragment>
-          );
-        })}
+      .slice(0)
+      .reverse()
+      .map((dat, i) => {
+        console.log(dat.started_at);
+        return (
+          <React.Fragment key={dat.started_at}>
+            <EventCard
+              event={dat.events[dat.events.length - 1]}
+              selectEvent={() => {
+                setSelectedEvent(eventData.length - i - 1);
+              }}
+              overrideName={"Deployment"}
+            />
+          </React.Fragment>
+        );
+      })}
     </EventsGrid>
   );
 };
@@ -225,16 +218,19 @@ const InstallPorterAgentButton = styled.button`
 `;
 
 const Placeholder = styled.div`
-  min-height: 200px;
-  height: 20vh;
-  padding: 30px;
-  padding-bottom: 90px;
-  font-size: 13px;
-  color: #ffffff44;
   width: 100%;
+  min-height: 300px;
+  height: 40vh;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #ffffff44;
+  font-size: 14px;
+
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+  }
 `;
 
 const Header = styled.div`