Added control row and some logic

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

@@ -1,5 +1,6 @@
-import Card from "components/Card";
-import React from "react";
+import EventCard from "components/EventCard";
+import EventLogs from "components/EventLogs";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const mockData = [
@@ -23,7 +24,7 @@ const mockData = [
     cluster_id: 6,
     owner_name: "pod-test",
     owner_type: "deployment",
-    event_type: "critical",
+    event_type: "normal",
     resource_type: "pod",
     name: "pod-test-2",
     namespace: "default",
@@ -32,7 +33,7 @@ const mockData = [
     timestamp: "2021-06-30T21:48:23Z",
   },
   {
-    id: 2,
+    id: 3,
     project_id: 1,
     cluster_id: 6,
     owner_name: "pod-test",
@@ -46,7 +47,7 @@ const mockData = [
     timestamp: "2021-06-30T21:48:23Z",
   },
   {
-    id: 2,
+    id: 4,
     project_id: 1,
     cluster_id: 6,
     owner_name: "pod-test",
@@ -60,7 +61,7 @@ const mockData = [
     timestamp: "2021-06-30T21:48:23Z",
   },
   {
-    id: 2,
+    id: 5,
     project_id: 1,
     cluster_id: 6,
     owner_name: "pod-test",
@@ -74,7 +75,7 @@ const mockData = [
     timestamp: "2021-06-30T21:48:23Z",
   },
   {
-    id: 2,
+    id: 6,
     project_id: 1,
     cluster_id: 6,
     owner_name: "pod-test",
@@ -104,18 +105,70 @@ export type Event = {
   timestamp: string;
 };
 
-const EventsTab: React.FunctionComponent = () => {
+type EventsTabProps = {};
+
+const EventsTab: React.FunctionComponent<EventsTabProps> = () => {
+  const [eventList, setEventList] = useState<Event[]>([]);
+  const [selectedEvent, setSelectedEvent] = useState<Event>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setEventList(mockData as Event[]);
+    }, 500);
+  }, []);
+
+  const selectEvent = (id: number) => {
+    const event = eventList.find((e) => e.id === id);
+    setSelectedEvent(event);
+  };
+
+  const clearSelectedEvent = () => {
+    setSelectedEvent(null);
+  };
+
   return (
-    <EventsGrid>
-      {mockData.map((event) => {
-        return <Card event={event as Event} />;
-      })}
-    </EventsGrid>
+    <NamespaceListWrapper>
+      <ControlRow>
+        <button>
+          <i className="material-icons">add</i> Add namespace
+        </button>
+      </ControlRow>
+
+      {!selectedEvent && (
+        <EventsGrid>
+          {eventList.map((event) => {
+            return (
+              <EventCard
+                key={event.id}
+                event={event}
+                selectEvent={selectEvent}
+              />
+            );
+          })}
+        </EventsGrid>
+      )}
+      {selectedEvent && (
+        <EventLogs event={selectedEvent} goBack={clearSelectedEvent} />
+      )}
+    </NamespaceListWrapper>
   );
 };
 
 export default EventsTab;
 
+const NamespaceListWrapper = styled.div`
+  margin-top: 35px;
+  padding-bottom: 80px;
+`;
+
+const ControlRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 35px;
+  padding-left: 0px;
+`;
+
 const EventsGrid = styled.div`
   display: grid;
   grid-row-gap: 15px;