diff --git a/Client/src/Components/MonitorTable/index.css b/Client/src/Components/MonitorTable/index.css
index f2d24252e..360526fc4 100644
--- a/Client/src/Components/MonitorTable/index.css
+++ b/Client/src/Components/MonitorTable/index.css
@@ -55,7 +55,7 @@
border: solid 1px var(--env-var-color-16);
border-radius: var(--env-var-radius-1);
}
-.monitors .MuiTableFooter-root .MuiTableCell-root {
+.monitors .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root {
border: none;
}
.monitors .MuiTableHead-root,
@@ -72,21 +72,64 @@
color: var(--env-var-color-2);
}
.monitors .MuiTableHead-root span {
- position: relative;
display: inline-block;
- height: 14px;
+ height: 17px;
width: 20px;
overflow: hidden;
- margin-bottom: -3px;
+ margin-bottom: -2px;
margin-left: 2px;
}
.monitors .MuiTableHead-root span svg {
- position: absolute;
width: 20px;
height: 20px;
- bottom: 0;
}
.monitors .MuiTableBody-root .MuiTableCell-root {
color: var(--env-var-color-5);
padding: 6px var(--env-var-spacing-2);
}
+
+.monitors .MuiPagination-root {
+ flex: 1;
+ margin-top: 35px;
+ border: solid 1px var(--env-var-color-16);
+ border-radius: var(--env-var-radius-1);
+ padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+}
+.monitors .MuiPagination-root ul {
+ justify-content: center;
+}
+.monitors .MuiPagination-root ul li button {
+ font-size: var(--env-var-font-size-medium);
+ color: var(--env-var-color-5);
+ font-weight: 500;
+}
+.monitors .MuiPagination-root ul li:first-child {
+ margin-right: auto;
+}
+.monitors .MuiPagination-root ul li:last-child {
+ margin-left: auto;
+}
+.monitors .MuiPagination-root ul li:first-child button,
+.monitors .MuiPagination-root ul li:last-child button {
+ border: solid 1px var(--env-var-color-16);
+ border-radius: var(--env-var-radius-1);
+}
+.monitors .MuiPagination-root ul li:first-child button {
+ padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus);
+}
+.monitors .MuiPagination-root ul li:last-child button {
+ padding: 0 var(--env-var-spacing-1-plus) 0 var(--env-var-spacing-1);
+}
+.monitors .MuiPagination-root ul li:first-child button::after,
+.monitors .MuiPagination-root ul li:last-child button::before {
+ position: relative;
+ display: inline-block;
+}
+.monitors .MuiPagination-root ul li:first-child button::after {
+ content: "Previous";
+ margin-left: 15px;
+}
+.monitors .MuiPagination-root ul li:last-child button::before {
+ content: "Next";
+ margin-right: 15px;
+}
diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx
index db1d90630..977c6e918 100644
--- a/Client/src/Components/MonitorTable/index.jsx
+++ b/Client/src/Components/MonitorTable/index.jsx
@@ -1,7 +1,6 @@
import "./index.css";
import { useState } from "react";
import PropTypes from "prop-types";
-import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
import ResponseTimeChart from "../Charts/ResponseTimeChart";
import {
Table,
@@ -10,12 +9,14 @@ import {
TableContainer,
TableHead,
TableRow,
- TableFooter,
- TablePagination,
Paper,
+ Pagination,
+ PaginationItem,
} from "@mui/material";
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
-import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
/**
* Host component.
@@ -94,17 +95,12 @@ const Status = ({ params }) => {
*/
const MonitorTable = ({ monitors = [] }) => {
const [page, setPage] = useState(0);
- const [rowsPerPage, setRowsPerPage] = useState(5);
+ const rowsPerPage = 5;
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
const mappedRows = monitors
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((monitor) => {
@@ -144,36 +140,46 @@ const MonitorTable = ({ monitors = [] }) => {
});
return (
-
-
-
-
- Host
-
- Status
-
-
-
-
- Response Time
- Actions
-
-
- {mappedRows}
-
-
-
-
-
-
-
+ <>
+
+
+
+
+ Host
+
+ Status
+
+
+
+
+ Response Time
+ Actions
+
+
+ {mappedRows}
+
+
+ handleChangePage(event, value - 1)}
+ shape="rounded"
+ renderItem={(item) => (
+
+ )}
+ />
+ >
);
};
diff --git a/Client/src/Components/TextFields/Search/SearchTextField.jsx b/Client/src/Components/TextFields/Search/SearchTextField.jsx
index 934a19943..7f7264faa 100644
--- a/Client/src/Components/TextFields/Search/SearchTextField.jsx
+++ b/Client/src/Components/TextFields/Search/SearchTextField.jsx
@@ -1,11 +1,11 @@
import "./searchTextField.css";
import React from "react";
-import Search from "../../../assets/Images/Icon-search-gray.png";
+import SearchSvg from "../../../assets/icons/search.svg?react";
const SearchTextField = () => {
return (
);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 241ca4b10..a8f30623f 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -67,7 +67,6 @@ const Monitors = () => {
-
);
diff --git a/Client/src/assets/icons/search.svg b/Client/src/assets/icons/search.svg
new file mode 100644
index 000000000..a1bc74224
--- /dev/null
+++ b/Client/src/assets/icons/search.svg
@@ -0,0 +1,3 @@
+