mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-15 14:19:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into feat/lets-encrypt

Browse Source
This commit is contained in:
Alex Holliday
2024-08-23 09:47:32 -07:00
parent aa5c0f81d3 8048d8e265
commit fe86ca6743
7 changed files with 119 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Client/src/Components/BasicTable/index.jsx
View File

@@ -15,7 +15,6 @@ import {
Stack,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
import { setRowsPerPage } from "../../Features/UI/uiSlice";
import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
@@ -150,13 +149,11 @@ TablePaginationActions.propTypes = {
* <BasicTable data={data} rows={rows} paginated={true} />
*/
const BasicTable = ({ data, paginated, reversed }) => {
const BasicTable = ({ data, paginated, reversed, table }) => {
const DEFAULT_ROWS_PER_PAGE = 5;
const theme = useTheme();
const location = useLocation();
const dispatch = useDispatch();
const uiState = useSelector((state) => state.ui);
let table = location.pathname.split("/").pop();
let rowsPerPage = uiState?.[table]?.rowsPerPage ?? DEFAULT_ROWS_PER_PAGE;
const [page, setPage] = useState(0);
@@ -293,6 +290,7 @@ BasicTable.propTypes = {
paginated: PropTypes.bool,
reversed: PropTypes.bool,
rowPerPage: PropTypes.number,
table: PropTypes.string,
};
export default BasicTable;

65
Client/src/Components/Sidebar/index.css
View File

@@ -76,16 +76,19 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
content: "";
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
top: 45%;
height: 3px;
width: 3px;
border-radius: 50%;
background-color: #d6d9dd;
}
aside {
transition: flex 300ms ease-out;
aside
.MuiCollapse-wrapperInner
.MuiList-root
> .selected-path.MuiListItemButton-root::after {
background-color: var(--env-var-color-2);
transform: scale(1.2);
}
.sidebar-popup .MuiPaper-root {
@@ -95,7 +98,7 @@ aside {
gap: 1px;
}
.sidebar-popup .MuiList-root {
padding: 6px 6px;
padding: 3px;
min-width: 100px;
}
.sidebar-popup li.MuiButtonBase-root {
@@ -104,21 +107,65 @@ aside {
padding: 5px 8px;
border-radius: var(--env-var-radius-1);
}
.sidebar-popup li.MuiButtonBase-root:hover{
.sidebar-popup li.MuiButtonBase-root:hover {
background-color: var(--env-var-color-13);
}
.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover{
.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover {
background-color: white;
}
.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root){
.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) {
padding-bottom: 0;
}
.sidebar-popup .MuiModal-root p.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-2);
}
.sidebar-popup svg{
.sidebar-popup svg {
width: 16px;
height: 16px;
opacity: 0.9;
}
/* TRANSITIONS */
aside {
flex: 1;
transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77);
}
.home-layout aside.collapsed {
max-width: 64px;
}
aside.expanded .MuiTypography-root,
aside.expanded p.MuiTypography-root,
aside.expanded .MuiListItemText-root + svg,
aside.expanded .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
visibility: visible;
animation: fadeIn 1s ease;
}
aside.collapsed .MuiTypography-root,
aside.collapsed p.MuiTypography-root,
aside.collapsed .MuiListItemText-root + svg,
aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
opacity: 0;
visibility: hidden;
}
aside .MuiListSubheader-root {
transition: all 200ms ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden;
}
30% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 0.9;
visibility: visible;
}
}

89
Client/src/Components/Sidebar/index.jsx
View File

@@ -26,8 +26,6 @@ import LockSvg from "../../assets/icons/lock.svg?react";
import UserSvg from "../../assets/icons/user.svg?react";
import TeamSvg from "../../assets/icons/user-two.svg?react";
import LogoutSvg from "../../assets/icons/logout.svg?react";
import BWULogo from "../../assets/Images/bwl-logo.svg?react";
import BWULogoAbbreviated from "../../assets/icons/bwu-abbreviated.svg?react";
import Support from "../../assets/icons/support.svg?react";
import Dashboard from "../../assets/icons/dashboard.svg?react";
import Account from "../../assets/icons/user-edit.svg?react";
@@ -125,24 +123,41 @@ function Sidebar() {
return (
<Stack
component="aside"
className={collapsed ? "collapsed" : "expanded"}
gap={theme.gap.medium}
sx={{ flex: collapsed ? 0 : 1 }}
>
<Stack
alignItems={collapsed ? "center" : "flex-start"}
py={theme.gap.large}
pl={collapsed ? 0 : theme.gap.lgplus}
>
{collapsed ? (
<BWULogoAbbreviated alt="BlueWave Uptime Logo" />
) : (
<BWULogo alt="BlueWave Uptime Logo" />
)}
<Stack pt={theme.gap.medium} pb={theme.gap.large} pl={theme.gap.ml}>
<Stack direction="row" alignItems="center" gap={theme.gap.small}>
<Stack
justifyContent="center"
alignItems="center"
minWidth={theme.gap.lgplus}
minHeight={theme.gap.lgplus}
fontSize="18px"
color="white"
sx={{
position: "relative",
backgroundColor: theme.palette.primary.main,
borderRadius: "4px",
userSelect: "none",
}}
>
BU
</Stack>
<Typography
component="span"
mt={theme.gap.xs}
sx={{ opacity: 0.8, fontWeight: 500 }}
>
BlueWave Uptime
</Typography>
</Stack>
<IconButton
sx={{
position: "absolute",
top: 60,
right: 0,
transform: `translate(50%, 50%)`,
transform: `translate(50%, 0)`,
backgroundColor: theme.palette.otherColors.fillGray,
border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
p: "5px",
@@ -159,7 +174,10 @@ function Sidebar() {
borderColor: theme.palette.otherColors.graishWhite,
},
}}
onClick={() => dispatch(toggleSidebar())}
onClick={() => {
setOpen({ Dashboard: false, Account: false });
dispatch(toggleSidebar());
}}
>
{collapsed ? <ArrowRight /> : <ArrowLeft />}
</IconButton>
@@ -175,14 +193,13 @@ function Sidebar() {
id="nested-menu-subheader"
sx={{
pt: theme.gap.small,
px: collapsed ? theme.gap.xs : theme.gap.ml,
textAlign: collapsed ? "center" : "left",
px: collapsed ? theme.gap.xs : theme.gap.small,
}}
>
Menu
</ListSubheader>
}
sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
sx={{ px: theme.gap.medium }}
>
{menu.map((item) =>
item.path ? (
@@ -210,13 +227,14 @@ function Sidebar() {
}
onClick={() => navigate(`/${item.path}`)}
sx={{
gap: theme.gap.medium,
height: "37px",
gap: theme.gap.small,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
px: theme.gap.small,
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
<ListItemText>{item.name}</ListItemText>
</ListItemButton>
</Tooltip>
) : collapsed ? (
@@ -247,13 +265,13 @@ function Sidebar() {
onClick={(event) => openPopup(event, item.name)}
sx={{
position: "relative",
gap: theme.gap.medium,
gap: theme.gap.small,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
px: theme.gap.small,
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
<ListItemText>{item.name}</ListItemText>
</ListItemButton>
</Tooltip>
<Menu
@@ -265,7 +283,7 @@ function Sidebar() {
vertical: "top",
horizontal: "right",
}}
sx={{ ml: theme.gap.small }}
sx={{ ml: theme.gap.ml }}
>
{item.nested.map((child) => {
if (
@@ -292,6 +310,7 @@ function Sidebar() {
gap: theme.gap.small,
borderRadius: `${theme.shape.borderRadius}px`,
pl: theme.gap.small,
mb:"1px"
}}
>
{child.icon}
@@ -311,9 +330,9 @@ function Sidebar() {
}))
}
sx={{
gap: theme.gap.medium,
gap: theme.gap.small,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
px: theme.gap.small,
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -324,7 +343,7 @@ function Sidebar() {
<List
component="div"
disablePadding
sx={{ pl: theme.gap.lgplus }}
sx={{ pl: theme.gap.large }}
>
{item.nested.map((child) => {
if (
@@ -374,14 +393,13 @@ function Sidebar() {
id="nested-other-subheader"
sx={{
pt: theme.gap.small,
px: collapsed ? theme.gap.xs : theme.gap.ml,
textAlign: collapsed ? "center" : "left",
px: collapsed ? 0 : theme.gap.small,
}}
>
Other
</ListSubheader>
}
sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
sx={{ px: theme.gap.medium }}
>
{other.map((item) => (
<Tooltip
@@ -416,13 +434,13 @@ function Sidebar() {
: navigate(`/${item.path}`)
}
sx={{
gap: theme.gap.medium,
gap: theme.gap.small,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
px: theme.gap.small,
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
<ListItemText>{item.name}</ListItemText>
</ListItemButton>
</Tooltip>
))}
@@ -432,10 +450,9 @@ function Sidebar() {
<Stack
direction="row"
height="50px"
justifyContent={collapsed ? "center" : "flex-start"}
alignItems="center"
py={theme.gap.small}
px={theme.gap.medium}
px={theme.gap.ml}
gap={theme.gap.xs}
borderRadius={`${theme.shape.borderRadius}px`}
>

7
Client/src/Components/TabPanels/Account/TeamPanel.jsx
View File

@@ -294,7 +294,12 @@ const TeamPanel = () => {
onClick={() => setIsOpen(true)}
/>
</Stack>
<BasicTable data={tableData} paginated={false} reversed={true} />
<BasicTable
data={tableData}
paginated={false}
reversed={true}
table={"team"}
/>
</Stack>
<Modal
aria-labelledby="modal-invite-member"

2
Client/src/Pages/Monitors/Details/index.jsx
View File

@@ -330,9 +330,7 @@ const DetailsPage = () => {
</Box>
<Stack gap={theme.gap.ml}>
<Typography component="h2">History</Typography>
{/* TODO New Table */}
<PaginationTable monitorId={monitorId} dateRange={dateRange} />
{/* <BasicTable data={data} paginated={true} /> */}
</Stack>
</Stack>
</>

3
Client/src/Pages/Monitors/index.jsx
View File

@@ -437,6 +437,7 @@ const Monitors = () => {
<ServerStatus title="Paused" value={0} state="pause" />
</Stack>
<Box
flex={1}
p={theme.gap.lgplus}
border={1}
borderColor={theme.palette.otherColors.graishWhite}
@@ -452,7 +453,7 @@ const Monitors = () => {
</Box>
{/* TODO - add search bar */}
</Stack>
<BasicTable data={data} paginated={true} />
<BasicTable data={data} paginated={true} table={"monitors"} />
</Box>
</>
)}

4
Client/src/assets/icons/bwu-abbreviated.svg
View File

@@ -1,4 +0,0 @@
<svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.761364 15V0.454545H5.84659C6.85985 0.454545 7.69555 0.629735 8.35369 0.980114C9.01184 1.32576 9.50189 1.79214 9.82386 2.37926C10.1458 2.96165 10.3068 3.60795 10.3068 4.31818C10.3068 4.94318 10.1955 5.45928 9.97301 5.86648C9.75521 6.27367 9.46638 6.59564 9.10653 6.83239C8.75142 7.06913 8.36553 7.24432 7.94886 7.35795V7.5C8.39394 7.52841 8.84138 7.68466 9.29119 7.96875C9.741 8.25284 10.1174 8.66004 10.4205 9.19034C10.7235 9.72064 10.875 10.3693 10.875 11.1364C10.875 11.8655 10.7093 12.5213 10.3778 13.1037C10.0464 13.6861 9.5232 14.1477 8.80824 14.4886C8.09328 14.8295 7.16288 15 6.01705 15H0.761364ZM2.52273 13.4375H6.01705C7.16761 13.4375 7.98438 13.215 8.46733 12.7699C8.95502 12.3201 9.19886 11.7756 9.19886 11.1364C9.19886 10.6439 9.07339 10.1894 8.82244 9.77273C8.5715 9.35133 8.21402 9.01515 7.75 8.7642C7.28598 8.50852 6.73674 8.38068 6.10227 8.38068H2.52273V13.4375ZM2.52273 6.84659H5.78977C6.32008 6.84659 6.7983 6.74242 7.22443 6.53409C7.6553 6.32576 7.99621 6.0322 8.24716 5.65341C8.50284 5.27462 8.63068 4.82955 8.63068 4.31818C8.63068 3.67898 8.40814 3.13684 7.96307 2.69176C7.51799 2.24195 6.8125 2.01705 5.84659 2.01705H2.52273V6.84659Z" fill="#344054"/>
<path d="M23.3146 0.454545H25.076V10.0852C25.076 11.0795 24.8416 11.9673 24.3729 12.7486C23.9089 13.5251 23.2531 14.1383 22.4055 14.5881C21.558 15.0331 20.5637 15.2557 19.4226 15.2557C18.2815 15.2557 17.2872 15.0331 16.4396 14.5881C15.5921 14.1383 14.9339 13.5251 14.4652 12.7486C14.0012 11.9673 13.7692 11.0795 13.7692 10.0852V0.454545H15.5305V9.94318C15.5305 10.6534 15.6868 11.2855 15.9993 11.8395C16.3118 12.3887 16.7569 12.822 17.3345 13.1392C17.9169 13.4517 18.6129 13.608 19.4226 13.608C20.2322 13.608 20.9283 13.4517 21.5107 13.1392C22.093 12.822 22.5381 12.3887 22.8459 11.8395C23.1584 11.2855 23.3146 10.6534 23.3146 9.94318V0.454545Z" fill="#1570EF"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB