diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index a80c7bfb6..a1c3afef2 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -17,40 +17,52 @@ import PropTypes from "prop-types";
*
* @component
* @param {Object} props - Component props.
- * @param {Array} props.headers - Array of header titles for the table.
- * @param {Array} props.rowItems - Array of row data objects for the table.
- * @param {boolean} props.paginated - Flag to enable pagination.
+ * @param {Object} props.data - Data for the table including columns and rows.
+ * @param {Array} props.data.cols - Array of objects for column headers.
+ * @param {number} props.data.cols[].id - Unique identifier for the column.
+ * @param {string} props.data.cols[].name - Name of the column to display as header.
+ * @param {Array} props.data.rows - Array of row objects.
+ * @param {number} props.data.rows[].id - Unique identifier for the row.
+ * @param {Array} props.data.rows[].data - Array of cell data objects for the row.
+ * @param {number} props.data.rows[].data[].id - Unique identifier for the cell.
+ * @param {JSX.Element} props.data.rows[].data[].data - The content to display in the cell.
+ * @param {function} props.data.rows.data.handleClick - Function to call when the row is clicked.
+ * @param {boolean} [props.paginated=false] - Flag to enable pagination.
*
* @example
+ * const data = {
+ * cols: [
+ * { id: 1, name: "First Col" },
+ * { id: 2, name: "Second Col" },
+ * { id: 3, name: "Third Col" },
+ * { id: 4, name: "Fourth Col" },
+ * ],
+ * rows: [
+ * {
+ * id: 1,
+ * data: [
+ * { id: 1, data: Data for Row 1 Col 1
},
+ * { id: 2, data: Data for Row 1 Col 2
},
+ * { id: 3, data: Data for Row 1 Col 3
},
+ * { id: 4, data: Data for Row 1 Col 4
},
+ * ],
+ * },
+ * {
+ * id: 2,
+ * data: [
+ * { id: 5, data: Data for Row 2 Col 1
},
+ * { id: 6, data: Data for Row 2 Col 2
},
+ * { id: 7, data: Data for Row 2 Col 3
},
+ * { id: 8, data: Data for Row 2 Col 4
},
+ * ],
+ * },
+ * ],
+ * };
*
- * Headers is an array of objets that have a unique ID and a name
- * Rows is an array of objects that have a unique ID and some data to display
- * Row data can be any valid React node
- * Rows are split into groups according to the number of headers, so if you have 3 headers then
- * Rows will go under the index % 3 column.
- * ie: Row 0 -> col 0 % 3 = 0
- * ie: Row 1 -> col 1 % 3 = 1
- * ie: Row 2 -> col 2 % 3 = 2
- * ie: Row 3 -> col 3 % 3 = 0
- *
- * Thus items are put in their correct columns
- *
- *
- * const headers = [
- * { id: 1, name: "ID" },
- * { id: 2, name: "Name" },
- * { id: 3, name: "Age" },
- * ];
- * const rows = [
- * { id: 1, data: 999 },
- * { id: 2, data: Alex Holliday
},
- * { id: 3, data: 5
},
- * // More rows...
- * ];
- *
+ *
*/
-const BasicTable = ({ headers, rowItems, paginated }) => {
+const BasicTable = ({ data, paginated }) => {
// Add headers to props validation
const [page, setPage] = useState(0);
@@ -65,19 +77,9 @@ const BasicTable = ({ headers, rowItems, paginated }) => {
setPage(0); // Reset to first page after changing rows per page
};
- const numOfCols = headers.length;
-
- const groupedRowItems = rowItems.reduce((acc, item, idx) => {
- const rowIndex = Math.floor((item.id - 1) / numOfCols);
- if (!acc[rowIndex]) acc[rowIndex] = { items: [], idx };
- acc[rowIndex].items.push({ item });
- return acc;
- }, {});
-
- const paginatedRowsKeys = Object.keys(groupedRowItems).slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- );
+ let displayData = paginated
+ ? data.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ : data.rows;
return (
<>
@@ -85,42 +87,37 @@ const BasicTable = ({ headers, rowItems, paginated }) => {
- {headers.map((header) => {
- return {header.name};
- })}
+ {data.cols.map((col) => (
+ {col.name}
+ ))}
- {paginated === false &&
- Object.keys(groupedRowItems).map((key) => {
- return (
-
- {groupedRowItems[key].items.map(({ item }) => {
- return {item.data};
- })}
-
- );
- })}
- {paginated === true &&
- paginatedRowsKeys.map((key) => (
-
- {groupedRowItems[key].items.map(({ item }) => (
- {item.data}
- ))}
+ {displayData.map((row) => {
+ return (
+
+ {row.data.map((cell) => {
+ return {cell.data};
+ })}
- ))}
+ );
+ })}
{paginated === true && (
)}
@@ -128,18 +125,7 @@ const BasicTable = ({ headers, rowItems, paginated }) => {
};
BasicTable.propTypes = {
- headers: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- name: PropTypes.string.isRequired,
- })
- ).isRequired,
- rowItems: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- data: PropTypes.node,
- })
- ).isRequired,
+ data: PropTypes.object.isRequired,
paginated: PropTypes.bool,
};
diff --git a/Client/src/Components/Host/index.jsx b/Client/src/Components/Host/index.jsx
deleted file mode 100644
index 370745f4d..000000000
--- a/Client/src/Components/Host/index.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
-
-function Host(title, precentage, statusColor, link) {
- return (
-
-
- 
-
-
{title}
-
- {precentage}%
-
-
-
-
-
- | Host |
- Status |
- Response |
- Actions |
-
-
-
- {monitors.map((monitor) => {
- const host = Host(
- monitor.name,
- 100,
- "var(--env-var-color-17)",
- monitor.url
- );
-
- const { color, currentStatus, dotColor } =
- getLastCheckStatus(monitor);
-
- const status = HostStatus(color, currentStatus, dotColor);
-
- return (
-
- | {host} |
- {status} |
-
-
- |
-
- {monitor.actions}
- |
-
- );
- })}
-
-
-