Initial refactor

Client/src/Components/MonitorTable/index.css

@@ -0,0 +1,49 @@
+.host-row {
+  display: flex;
+  align-items: center;
+}
+
+.host-open-icon {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: 8px;
+}
+
+.host-name {
+  width: 100px;
+  font-size: var(--env-var-font-size-medium);
+  font-weight: bold;
+  margin-right: var(--env-var-spacing-1);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.host-percentage {
+  font-size: var(--env-var-font-size-medium);
+}
+
+.host-status {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.host-status-details {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-2);
+  padding: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-status-text {
+  font-size: var(--env-var-font-size-medium);
+  line-height: var(--env-var-font-size-medium);
+}
+.host-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: calc(var(--env-var-spacing-1) / 2);
+}

Client/src/Components/MonitorTable/index.jsx

@@ -0,0 +1,129 @@
+import "./index.css";
+import PropTypes from "prop-types";
+import { DataGrid } from "@mui/x-data-grid";
+import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
+import ResponseTimeChart from "../Charts/ResponseTimeChart";
+
+const Host = ({ params }) => {
+  return (
+    <div className="host-row">
+      <a href={params.value.url} target="_blank">
+        <img className="host-open-icon" src={OpenIt} alt="OpenIt" />
+      </a>
+      <div className="host-name">{params.value.title}</div>
+      <div
+        className="host-percentage"
+        style={{ color: params.value.percentageColor }}
+      >
+        {params.value.precentage}%
+      </div>
+    </div>
+  );
+};
+
+const Status = ({ params }) => {
+  console.log(params.value.status);
+  return (
+    <div className="host-status">
+      <div
+        className="host-status-details"
+        style={{ backgroundColor: params.value.backgroundColor }}
+      >
+        <div
+          className="host-status-dot"
+          style={{ backgroundColor: params.value.statusDotColor }}
+        />
+        <span className="host-status-text">{params.value.status}</span>
+      </div>
+    </div>
+  );
+};
+
+const cols = [
+  {
+    field: "host",
+    headerName: "Host",
+    renderCell: (params) => {
+      return <Host params={params} />;
+    },
+    flex: 1,
+  },
+  {
+    field: "status",
+    headerName: "Status",
+    renderCell: (params) => {
+      return <Status params={params} />;
+    },
+  },
+  {
+    field: "response",
+    headerName: "Response",
+    renderCell: (params) => {
+      return <ResponseTimeChart checks={params.value.checks} />;
+    },
+    flex: 1,
+  },
+  {
+    field: "actions",
+    headerName: "Actions",
+  },
+];
+
+let rows = [];
+
+const MonitorTable = ({ monitors = [] }) => {
+  rows = monitors.map((monitor) => {
+    return {
+      id: monitor._id,
+      host: {
+        title: monitor.name,
+        url: monitor.url,
+        precentage: 100,
+        percentageColor:
+          monitor.status === true
+            ? "var(--env-var-color-17)"
+            : "var(--env-var-color-19)",
+      },
+      status: {
+        status: monitor.status === true ? "Up" : "Down",
+        backgroundColor:
+          monitor.status === true
+            ? "var(--env-var-color-20)"
+            : "var(--env-var-color-21)",
+        statusDotColor:
+          monitor.status === true
+            ? "var(--env-var-color-17)"
+            : "var(--env-var-color-19)",
+      },
+      response: {
+        checks: monitor.checks,
+      },
+    };
+  });
+
+  return (
+    <div style={{ border: "1px solid red" }}>
+      <h1>Monitor Table</h1>
+      <DataGrid
+        autoHeight
+        columns={cols}
+        rows={rows}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 10 },
+          },
+        }}
+        pageSizeOptions={[5, 10]}
+      />
+    </div>
+  );
+};
+
+MonitorTable.propTypes = {
+  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+Status.propTypes = { params: PropTypes.object.isRequired };
+Host.propTypes = { params: PropTypes.object.isRequired };
+
+export default MonitorTable;