add styling to expanded cahrt

dashboard/src/main/home/cluster-dashboard/expanded-chart/incidents/IncidentsTab.tsx

@@ -117,7 +117,6 @@ const IncidentsTab = (props: {
 export default IncidentsTab;
 
 const StyledCard = styled.div`
-  margin-top: 35px;
   background: #26282f;
   padding: 14px;
   border-radius: 8px;

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

@@ -4,8 +4,11 @@ import { useLocation } from "react-router";
 import { Column } from "react-table";
 import api from "shared/api";
 import { Context } from "shared/Context";
+import { hardcodedIcons } from "shared/hardcodedNameDict";
 import { useRouting } from "shared/routing";
+import { capitalize } from "shared/string_utils";
 import styled from "styled-components";
+import { dateFormatter } from "../../chart/JobRunTable";
 import { IncidentsWithoutEvents } from "../../dashboard/incidents/IncidentsTable";
 
 const IncidentsTable = ({
@@ -61,16 +64,45 @@ const IncidentsTable = ({
   const columns = useMemo(() => {
     return [
       {
-        Header: "Incident ID",
-        accessor: "id",
-      },
-      {
-        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: "created_at",
+        Cell: ({ row }) => {
+          let original = row.original;
+
+          return dateFormatter(original.created_at * 1000);
+        },
+      },
+      {
+        Header: "Last Updated",
+        accessor: "updated_at",
+        Cell: ({ row }) => {
+          let original = row.original;
+
+          return dateFormatter(original.updated_at * 1000);
+        },
       },
     ] as Column<IncidentsWithoutEvents>[];
   }, []);
@@ -83,33 +115,23 @@ const IncidentsTable = ({
   }, [incidents]);
 
   return (
-    <TableWrapper>
-      <StyledCard>
-        <Table
-          columns={columns}
-          data={data}
-          isLoading={incidents === null}
-          onRowClick={(row: any) => {
-            pushFiltered(
-              `/cluster-dashboard/incidents/${row?.original?.id}/`,
-              [],
-              {
-                redirect_url: location.pathname,
-              }
-            );
-          }}
-          hasError={hasError}
-        />
-      </StyledCard>
-    </TableWrapper>
+    <Table
+      columns={columns}
+      data={data}
+      isLoading={incidents === null}
+      onRowClick={(row: any) => {
+        pushFiltered(`/cluster-dashboard/incidents/${row?.original?.id}/`, [], {
+          redirect_url: location.pathname,
+        });
+      }}
+      hasError={hasError}
+    />
   );
 };
 
 export default IncidentsTable;
 
-const TableWrapper = styled.div`
-  margin-top: 35px;
-`;
+const TableWrapper = styled.div``;
 
 const StyledCard = styled.div`
   background: #26282f;
@@ -124,3 +146,43 @@ const StyledCard = styled.div`
     margin-bottom: 25px;
   }
 `;
+
+const KindContainer = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 200px;
+`;
+
+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" : "#4797ff"};
+  border-radius: 20px;
+  margin-left: 3px;
+  margin-right: 15px;
+`;
+
+const Message = styled.div`
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  max-width: 500px;
+`;