Added modal to show node conditions

dashboard/src/main/home/cluster-dashboard/dashboard/NodeList.tsx

@@ -5,11 +5,23 @@ import { Column } from "react-table";
 import styled from "styled-components";
 import api from "shared/api";
 import { Context } from "shared/Context";
+import { NodeStatusModal } from "./NodeStatusModal";
+
 
 const NodeList: React.FC = () => {
   const context = useContext(Context);
   const [nodeList, setNodeList] = useState([]);
   const [loading, setLoading] = useState<boolean>(false);
+  const [selectedNode, setSelectedNode] = useState<any>(undefined)
+
+  const triggerPopUp = (node?: any) => {
+    if (node) {
+      setSelectedNode(node);
+      return;
+    }
+
+    setSelectedNode(undefined)
+  }
 
   const columns = useMemo<Column<any>[]>(
     () => [
@@ -25,6 +37,21 @@ const NodeList: React.FC = () => {
         Header: "RAM Usage",
         accessor: "ram_usage",
       },
+      {
+        Header: () => <StatusHeader>Node Condition</StatusHeader>,
+        accessor: "is_node_healthy",
+        Cell: ({row}) => {
+          return (
+          <StatusButtonWrapper>
+            <StatusButton
+                success={row.values.is_node_healthy}
+                onClick={() => triggerPopUp(row.original)}
+            >
+              {row.values.is_node_healthy ? "Healthy" : "Unhealthy"}
+            </StatusButton>
+          </StatusButtonWrapper>
+        )}
+      }
     ],
     []
   );
@@ -36,7 +63,15 @@ const NodeList: React.FC = () => {
       return {
         name: node.name,
         cpu_usage: percentFormatter(node.cpu_reqs),
-        ram_usage: percentFormatter(node.memory_reqs)
+        ram_usage: percentFormatter(node.memory_reqs),
+        node_conditions: node.node_conditions,
+        is_node_healthy:node.node_conditions.reduce((prevValue: boolean, current: any) => {
+          console.log(current)
+          if (current.type !== "Ready" && current.status !== "False") {
+            return false
+          } 
+          return prevValue
+        }, true),
       }
     })
   }, [nodeList]);
@@ -69,6 +104,9 @@ const NodeList: React.FC = () => {
       <StyledChart>
         <Table columns={columns} data={data} isLoading={loading}/>
       </StyledChart>
+      {selectedNode && (
+        <NodeStatusModal node={selectedNode} onClose={() => triggerPopUp()}/>
+      )}
     </NodeListWrapper>
   );
 };
@@ -91,4 +129,34 @@ const StyledChart = styled.div`
   :not(:last-child) {
     margin-bottom: 25px;
   }
+`;
+
+const StatusHeader = styled.div`
+  width: 100%;
+  text-align: center;
+`
+
+const StatusButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`
+
+
+const StatusButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  height: 21px;
+  font-size: 13px;
+  width: 70px;
+  background: ${(props: { success: boolean }) =>
+    props.success ? "#616FEEcc" : "#ed5f85"};
+  :hover {
+    background: ${(props: { success: boolean }) =>
+      props.success ? "#405eddbb" : "#e83162"};
+  }
 `;

dashboard/src/main/home/cluster-dashboard/dashboard/NodeStatusModal.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+import Modal from "../../modals/Modal";
+import Table from "components/Table";
+import { Column } from "react-table";
+import styled from "styled-components";
+
+type NodeStatusModalProps = {
+  onClose: () => void;
+  node: any;
+  width?: string;
+  height?: string;
+};
+
+export const NodeStatusModal: React.FunctionComponent<NodeStatusModalProps> = ({
+  onClose,
+  node,
+  width = "800px",
+  height = "min-content",
+}) => {
+
+  const columns = useMemo<Column<any>[]>(
+    () => [
+      {
+        Header: "Type",
+        accessor: "type",
+      },
+      {
+        Header: "Status",
+        accessor: "status",
+      },
+      {
+        Header: "Reason",
+        accessor: "reason",
+      },
+      {
+        Header: "Message",
+        accessor: "message",
+      },
+    ],
+    []
+  );
+
+  const data = useMemo(() => {
+    return node?.node_conditions || [];
+  }, [node]);
+
+  return (
+    <div>
+      <Modal onRequestClose={onClose} width={width} height={height}>
+        Node {node?.name} conditions:
+        <TableWrapper>
+          <Table columns={columns} data={data} isLoading={false} disableGlobalFilter={true}/>
+        </TableWrapper>
+      </Modal>
+    </div>
+  );
+};
+
+const TableWrapper = styled.div`
+  margin-top: 14px;
+`