add basic incidents list styling with hardcoded fields

dashboard/src/main/home/cluster-dashboard/chart/JobRunTable.tsx

@@ -15,7 +15,7 @@ type Props = {
   sortType: "Newest" | "Oldest" | "Alphabetical";
 };
 
-const dateFormatter = (date: string) => {
+export const dateFormatter = (date: string) => {
   if (!date) {
     return "N/A";
   }

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

@@ -2,9 +2,13 @@ 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 styled from "styled-components";
+import { dateFormatter } from "../../chart/JobRunTable";
 import { Incident } from "./IncidentPage";
 
 export type IncidentsWithoutEvents = Omit<
@@ -57,16 +61,55 @@ const IncidentsTable = () => {
   const columns = useMemo(() => {
     return [
       {
-        Header: "Release name",
+        Header: "Release",
         accessor: "release_name",
+        Cell: ({ row }) => {
+          let original = row.original;
+
+          return (
+            <KindContainer>
+              <Icon src={hardcodedIcons["web"]} />
+              <Kind>{original.release_name}</Kind>
+            </KindContainer>
+          );
+        },
       },
       {
-        Header: "Latest state",
+        Header: "Status",
         accessor: "latest_state",
+        Cell: ({ row }) => {
+          let original = row.original;
+
+          return (
+            <Status>
+              <StatusDot status={original.latest_state} />
+              {capitalize(original.latest_state)}
+            </Status>
+          );
+        },
       },
       {
         Header: "Message",
         accessor: "latest_message",
+        Cell: ({ row }) => {
+          let original = row.original;
+
+          return <Message>{original.latest_message}</Message>;
+        },
+      },
+      {
+        Header: "Started",
+        accessor: "",
+        Cell: () => {
+          return dateFormatter("2022-03-18T21:02:50.602847-04:00");
+        },
+      },
+      {
+        Header: "Last Updated",
+        accessor: "",
+        Cell: () => {
+          return dateFormatter("2022-03-18T21:02:50.602847-04:00");
+        },
       },
     ] as Column<IncidentsWithoutEvents>[];
   }, []);
@@ -92,3 +135,43 @@ const IncidentsTable = () => {
 };
 
 export default IncidentsTable;
+
+const KindContainer = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 120px;
+`;
+
+const Kind = styled.div`
+  margin-left: 8px;
+`;
+
+const Icon = styled.img`
+  height: 20px;
+`;
+
+const Status = styled.span`
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  margin-left: 1px;
+  min-height: 17px;
+  color: #a7a6bb;
+`;
+
+const StatusDot = styled.div`
+  width: 8px;
+  height: 8px;
+  background: ${(props: { status: string }) =>
+    props.status === "ONGOING" ? "#ed5f85" : "#f5cb42"};
+  border-radius: 20px;
+  margin-left: 3px;
+  margin-right: 15px;
+`;
+
+const Message = styled.div`
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  max-width: 400px;
+`;