Added error display to the table component

dashboard/src/components/Table.tsx

@@ -39,6 +39,8 @@ export type TableProps = {
   disableGlobalFilter?: boolean;
   disableHover?: boolean;
   enablePagination?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
 };
 
 const MIN_PAGE_SIZE = 1;
@@ -51,6 +53,8 @@ const Table: React.FC<TableProps> = ({
   disableGlobalFilter = false,
   disableHover,
   enablePagination,
+  hasError,
+  errorMessage = "An unexpected error occurred, please try again.",
 }) => {
   const {
     getTableProps,
@@ -87,10 +91,20 @@ const Table: React.FC<TableProps> = ({
   }, [data, enablePagination]);
 
   const renderRows = () => {
+    if (hasError) {
+      return (
+        <StyledTr disableHover={true} selected={false}>
+          <StyledTd colSpan={visibleColumns.length} align="center">
+            {errorMessage}
+          </StyledTd>
+        </StyledTr>
+      );
+    }
+
     if (isLoading) {
       return (
         <StyledTr disableHover={true} selected={false}>
-          <StyledTd colSpan={visibleColumns.length}>
+          <StyledTd colSpan={visibleColumns.length} height="150px">
             <Loading />
           </StyledTd>
         </StyledTr>
@@ -100,7 +114,9 @@ const Table: React.FC<TableProps> = ({
     if (!page.length) {
       return (
         <StyledTr disableHover={true} selected={false}>
-          <StyledTd colSpan={visibleColumns.length}>No data available</StyledTd>
+          <StyledTd colSpan={visibleColumns.length} align="center">
+            No data available
+          </StyledTd>
         </StyledTr>
       );
     }
@@ -281,6 +297,12 @@ export const StyledTd = styled.td`
     padding-right: 10px;
   }
   user-select: text;
+
+  ${(props: { align?: "center" | "left" }) => {
+    if (props.align) {
+      return `text-align:${props.align};`;
+    }
+  }}
 `;
 
 export const StyledTHead = styled.thead`

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

@@ -4,18 +4,24 @@ import { Column } from "react-table";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { useRouting } from "shared/routing";
+import styled from "styled-components";
 import { Incident } from "./IncidentPage";
 
 export type IncidentsWithoutEvents = Omit<Incident, "events">;
 
 const IncidentsTable = () => {
-  const { currentCluster, currentProject } = useContext(Context);
+  const { currentCluster, currentProject, setCurrentError } = useContext(
+    Context
+  );
   const { pushFiltered } = useRouting();
 
   const [incidents, setIncidents] = useState<IncidentsWithoutEvents[]>(null);
+  const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
     let isSubscribed = true;
+    setIncidents(null);
+    setHasError(false);
 
     api
       .getIncidents<IncidentsWithoutEvents[]>(
@@ -32,6 +38,10 @@ const IncidentsTable = () => {
         }
 
         setIncidents(res.data);
+      })
+      .catch((err) => {
+        setHasError(true);
+        setCurrentError(err);
       });
 
     return () => {
@@ -64,15 +74,41 @@ const IncidentsTable = () => {
   }, [incidents]);
 
   return (
-    <Table
-      columns={columns}
-      data={data}
-      isLoading={incidents === null}
-      onRowClick={(row: any) => {
-        pushFiltered(`/cluster-dashboard/incidents/${row?.original?.id}`, []);
-      }}
-    />
+    <TableWrapper>
+      <StyledCard>
+        <Table
+          columns={columns}
+          data={data}
+          isLoading={incidents === null}
+          onRowClick={(row: any) => {
+            pushFiltered(
+              `/cluster-dashboard/incidents/${row?.original?.id}`,
+              []
+            );
+          }}
+          hasError={hasError}
+        />
+      </StyledCard>
+    </TableWrapper>
   );
 };
 
 export default IncidentsTable;
+
+const TableWrapper = styled.div`
+  margin-top: 35px;
+`;
+
+const StyledCard = styled.div`
+  background: #26282f;
+  padding: 14px;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
+  position: relative;
+  border: 2px solid #9eb4ff00;
+  width: 100%;
+  height: 100%;
+  :not(:last-child) {
+    margin-bottom: 25px;
+  }
+`;