style detail

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

@@ -5,9 +5,11 @@ import Loading from "../../../../../components/Loading";
 
 type CardProps = {
   event: Event;
-  selectEvent: (id: number) => void;
+  selectEvent?: () => void;
+  overrideName?: string;
 };
-const getReadableDate = (s: number) => {
+
+export const getReadableDate = (s: number) => {
   let ts = new Date(s * 1000);
   let date = ts.toLocaleDateString();
   let time = ts.toLocaleTimeString([], {
@@ -21,12 +23,11 @@ const getReadableDate = (s: number) => {
 const EventCard: React.FunctionComponent<CardProps> = ({
   event,
   selectEvent,
+  overrideName,
 }) => {
-  const [showTooltip, setShowTooltip] = useState(false);
-
   return (
     <StyledCard>
-      <ContentContainer>
+      <ContentContainer onClick={() => selectEvent && selectEvent()}>
         {event.status == 1 && (
           <Icon status={"normal"} className="material-icons-outlined">
             check
@@ -43,7 +44,7 @@ const EventCard: React.FunctionComponent<CardProps> = ({
           </Icon>
         )}
         <EventInformation>
-          <EventName>Deployment</EventName>
+          <EventName>{overrideName ? overrideName : event.name}</EventName>
           <EventReason>
             {event.status == 2 && (
               <Helper>Step {event.name} In Progress</Helper>

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

@@ -0,0 +1,39 @@
+import React, { Fragment } from "react";
+import { EventContainer } from "./EventsTab";
+import EventCard, { getReadableDate } from "./EventCard";
+import styled from "styled-components";
+
+interface Props {
+  container: EventContainer;
+  resetSelection: () => {};
+}
+
+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>
+      <EventsGrid>
+        {props.container.events
+          .slice(0)
+          .reverse()
+          .map((event) => {
+            return (
+              <React.Fragment key={event.index}>
+                <EventCard event={event} />
+              </React.Fragment>
+            );
+          })}
+      </EventsGrid>
+    </>
+  );
+};
+
+export default EventDetail;
+
+const EventsGrid = styled.div`
+  display: grid;
+  grid-row-gap: 15px;
+  grid-template-columns: 1;
+`;

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 EventDetail from "./EventDetail";
 
 export type Event = {
   event_id: string;
@@ -16,6 +17,12 @@ export type Event = {
   time: number;
 };
 
+export type EventContainer = {
+  events: Event[];
+  name: string;
+  started_at: number;
+};
+
 type Props = {
   currentChart: ChartType;
 };
@@ -26,7 +33,8 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
   const { currentCluster, currentProject } = useContext(Context);
   const [isLoading, setIsLoading] = useState(true);
   const [shouldRequest, setShouldRequest] = useState(true);
-  const [eventData, setEventData] = useState<Event[][]>([]); // most recent event is first
+  const [eventData, setEventData] = useState<EventContainer[]>([]); // most recent event is last
+  const [selectedEvent, setSelectedEvent] = useState<number | null>(null);
 
   // sort by time, ensure sequences are monotonically increasing by time, collapse by id
   const filterData = (data: Event[]) => {
@@ -46,7 +54,7 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
     }
     if (cur) seq.push(cur);
 
-    let ret: Event[][] = [];
+    let ret: EventContainer[] = [];
     seq.forEach((j) => {
       j.push({
         event_id: "",
@@ -57,16 +65,20 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
         time: 0,
       });
 
-      let fin: Event[] = [];
+      let fin: EventContainer = {
+        events: [],
+        name: "Deployment",
+        started_at: j[0].time,
+      };
       for (let i = 0; i < j.length - 1; ++i) {
         if (j[i].event_id != j[i + 1].event_id) {
-          fin.push(j[i]);
+          fin.events.push(j[i]);
         }
       }
       ret.push(fin);
     });
 
-    setEventData(ret.reverse());
+    setEventData(ret);
   };
 
   useEffect(() => {
@@ -125,23 +137,39 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
     );
   }
 
+  if (selectedEvent != null) {
+    return (
+      <EventDetail
+        container={eventData[selectedEvent]}
+        resetSelection={() => {
+          setSelectedEvent(null);
+          return null;
+        }}
+      />
+    );
+  }
+
   return (
     <EventsGrid>
-      {eventData.map((dat) => {
-        return <EventCard event={dat[dat.length - 1]} selectEvent={() => {}} />;
-      })}
+      {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>
+          );
+        })}
     </EventsGrid>
   );
-
-  // if (selectedEvent) {
-  //   return <EventLogs clearSelectedEvent={() => setSelectedEvent(undefined)} />;
-  // }
-  //
-  // return (
-  //   <EventsPageWrapper>
-  //     <EventsList selectEvent={(e) => setSelectedEvent(e)} />
-  //   </EventsPageWrapper>
-  // );
 };
 
 export default EventsTab;