Started styling on events tab and events cards

dashboard/src/components/Card.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import styled from "styled-components";
+import { Event } from "main/home/cluster-dashboard/expanded-chart/events/EventsTab";
+
+type CardProps = {
+  event: Event;
+};
+const getReadableDate = (s: string) => {
+  let ts = new Date(s);
+  let date = ts.toLocaleDateString();
+  let time = ts.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${time} ${date}`;
+};
+
+// Rename to Event Card
+const Card: React.FunctionComponent<CardProps> = ({ event }) => {
+  return (
+    <StyledCard>
+      <ContentContainer>
+        <Icon status={event.event_type} className="material-icons-outlined">
+          {event.event_type === "critical" ? "report_problem" : "info"}
+        </Icon>
+        <EventInformation>
+          <EventName>
+            <Helper>{event.resource_type}:</Helper>
+            {event.name}
+          </EventName>
+          <EventReason>
+            <Helper>Reason:</Helper>
+            {event.reason}
+          </EventReason>
+        </EventInformation>
+      </ContentContainer>
+      <ActionContainer>
+        <span className="material-icons-outlined">access_time</span>
+        <span>{getReadableDate(event.timestamp)}</span>
+      </ActionContainer>
+    </StyledCard>
+  );
+};
+
+export default Card;
+
+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 {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+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`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+`;
+
+const EventName = styled.div`
+  font-size: 14px;
+  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%;
+`;

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

@@ -35,6 +35,7 @@ import { useWebsockets } from "shared/hooks/useWebsockets";
 import useAuth from "shared/auth/useAuth";
 import TitleSection from "components/TitleSection";
 import { integrationList } from "shared/common";
+import EventsTab from "./events/EventsTab";
 
 type Props = {
   namespace: string;
@@ -433,6 +434,8 @@ const ExpandedChart: React.FC<Props> = (props) => {
             disabled={!isAuthorized("application", "", ["get", "update"])}
           />
         );
+      case "events":
+        return <EventsTab />;
       default:
     }
   };
@@ -441,6 +444,8 @@ const ExpandedChart: React.FC<Props> = (props) => {
     // Collate non-form tabs
     let rightTabOptions = [] as any[];
     let leftTabOptions = [] as any[];
+    leftTabOptions.push({ label: "Events", value: "events" });
+
     leftTabOptions.push({ label: "Status", value: "status" });
 
     if (props.isMetricsInstalled) {

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

@@ -1,4 +1,6 @@
+import Card from "components/Card";
 import React from "react";
+import styled from "styled-components";
 
 const mockData = [
   {
@@ -29,10 +31,93 @@ const mockData = [
     reason: "OOM killed",
     timestamp: "2021-06-30T21:48:23Z",
   },
+  {
+    id: 2,
+    project_id: 1,
+    cluster_id: 6,
+    owner_name: "pod-test",
+    owner_type: "deployment",
+    event_type: "critical",
+    resource_type: "pod",
+    name: "pod-test-2",
+    namespace: "default",
+    message: "",
+    reason: "OOM killed",
+    timestamp: "2021-06-30T21:48:23Z",
+  },
+  {
+    id: 2,
+    project_id: 1,
+    cluster_id: 6,
+    owner_name: "pod-test",
+    owner_type: "deployment",
+    event_type: "critical",
+    resource_type: "pod",
+    name: "pod-test-2",
+    namespace: "default",
+    message: "",
+    reason: "OOM killed",
+    timestamp: "2021-06-30T21:48:23Z",
+  },
+  {
+    id: 2,
+    project_id: 1,
+    cluster_id: 6,
+    owner_name: "pod-test",
+    owner_type: "deployment",
+    event_type: "critical",
+    resource_type: "pod",
+    name: "pod-test-2",
+    namespace: "default",
+    message: "",
+    reason: "OOM killed",
+    timestamp: "2021-06-30T21:48:23Z",
+  },
+  {
+    id: 2,
+    project_id: 1,
+    cluster_id: 6,
+    owner_name: "pod-test",
+    owner_type: "deployment",
+    event_type: "critical",
+    resource_type: "pod",
+    name: "pod-test-2",
+    namespace: "default",
+    message: "",
+    reason: "OOM killed",
+    timestamp: "2021-06-30T21:48:23Z",
+  },
 ];
 
-const EventsTab = () => {
-  return <div>Events tab</div>;
+export type Event = {
+  id: number;
+  project_id: number;
+  cluster_id: number;
+  owner_name: string;
+  owner_type: string;
+  event_type: "critical" | "normal";
+  resource_type: string;
+  name: string;
+  namespace: string;
+  message: string;
+  reason: string;
+  timestamp: string;
+};
+
+const EventsTab: React.FunctionComponent = () => {
+  return (
+    <EventsGrid>
+      {mockData.map((event) => {
+        return <Card event={event as Event} />;
+      })}
+    </EventsGrid>
+  );
 };
 
 export default EventsTab;
+
+const EventsGrid = styled.div`
+  display: grid;
+  grid-row-gap: 15px;
+  grid-template-columns: 1;
+`;