Resovle conflict
This commit is contained in:
Alex Holliday committed
commit
07719aad2b
70 files changed
+511
-2930
No files matched your search
@@ -1,5 +1,5 @@
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import "./index.css";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import EmailIcon from "../../assets/icons/email.svg?react";
|
||||
import Button from "../../Components/Button";
|
||||
@@ -95,7 +95,11 @@ const CheckEmail = () => {
|
||||
|
||||
return (
|
||||
<div className="check-email-page">
|
||||
<BackgroundPattern />
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="check-email-form">
|
||||
<Stack direction="column" alignItems="center" gap={theme.gap.small}>
|
||||
<EmailIcon alt="EmailIcon" style={{ fill: "white" }} />
|
||||
+6
-3
@@ -1,6 +1,5 @@
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import "./index.css";
|
||||
import React from "react";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import Logomark from "../../assets/icons/key.svg?react";
|
||||
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
||||
import { useState } from "react";
|
||||
@@ -100,7 +99,11 @@ const ForgotPassword = () => {
|
||||
|
||||
return (
|
||||
<div className="forgot-password-page">
|
||||
<BackgroundPattern></BackgroundPattern>
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="forgot-password-form" onSubmit={handleSubmit}>
|
||||
<Stack direction="column" alignItems="center" gap={theme.gap.small}>
|
||||
<Logomark alt="Logomark" style={{ fill: "white" }} />
|
||||
@@ -2,10 +2,10 @@ import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import "./index.css";
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import Logomark from "../../assets/Images/bwl-logo-2.svg?react";
|
||||
import Button from "../../Components/Button";
|
||||
import Google from "../../assets/Images/Google.png";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import axiosInstance from "../../Utils/axiosConfig";
|
||||
import { credentials } from "../../Validation/validation";
|
||||
import { login } from "../../Features/Auth/authSlice";
|
||||
@@ -122,7 +122,11 @@ const Login = () => {
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<BackgroundPattern></BackgroundPattern>
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="login-form" onSubmit={handleSubmit}>
|
||||
<Stack gap={theme.gap.large} direction="column">
|
||||
<Logomark alt="BlueWave Uptime Icon" />
|
||||
+6
-2
@@ -1,5 +1,5 @@
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import "./index.css";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
||||
import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
|
||||
import Button from "../../Components/Button";
|
||||
@@ -23,7 +23,11 @@ const NewPasswordConfirmed = () => {
|
||||
|
||||
return (
|
||||
<div className="password-confirmed-page">
|
||||
<BackgroundPattern />
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="password-confirmed-form">
|
||||
<Stack direction="column" alignItems="center" gap={theme.gap.small}>
|
||||
<ConfirmIcon alt="confirm icon" style={{ fill: "white" }} />
|
||||
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import "./index.css";
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import Logomark from "../../assets/Images/bwl-logo-2.svg?react";
|
||||
import Check from "../../Components/Check/Check";
|
||||
import Button from "../../Components/Button";
|
||||
@@ -132,7 +132,11 @@ const Register = () => {
|
||||
|
||||
return (
|
||||
<div className="register-page">
|
||||
<BackgroundPattern></BackgroundPattern>
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="register-form" onSubmit={handleSubmit} noValidate>
|
||||
<Stack gap={theme.gap.large} direction="column">
|
||||
<Logomark alt="BlueWave Uptime Icon" />
|
||||
+6
-2
@@ -1,5 +1,5 @@
|
||||
import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
|
||||
import "./index.css";
|
||||
import background from "../../assets/Images/background_pattern_decorative.png";
|
||||
import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
|
||||
import Check from "../../Components/Check/Check";
|
||||
import ButtonSpinner from "../../Components/ButtonSpinner";
|
||||
@@ -114,7 +114,11 @@ const SetNewPassword = () => {
|
||||
|
||||
return (
|
||||
<div className="set-new-password-page">
|
||||
<BackgroundPattern />
|
||||
<img
|
||||
className="background-pattern-svg"
|
||||
src={background}
|
||||
alt="background pattern"
|
||||
/>
|
||||
<form className="set-new-password-form" onSubmit={handleSubmit}>
|
||||
<Stack direction="column" alignItems="center" gap={theme.gap.small}>
|
||||
<LockIcon alt="lock icon" style={{ fill: "white" }} />
|
||||
@@ -0,0 +1,138 @@
|
||||
/* ////// */
|
||||
/* SHARED */
|
||||
/* ////// */
|
||||
.register-page,
|
||||
.login-page,
|
||||
.set-new-password-page,
|
||||
.password-confirmed-page,
|
||||
.forgot-password-page,
|
||||
.check-email-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.register-page h1.MuiTypography-root,
|
||||
.set-new-password-page h1.MuiTypography-root,
|
||||
.password-confirmed-page h1.MuiTypography-root,
|
||||
.forgot-password-page h1.MuiTypography-root,
|
||||
.check-email-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.register-page p.MuiTypography-root,
|
||||
.register-page span,
|
||||
.register-page button,
|
||||
.login-page p.MuiTypography-root,
|
||||
.login-page span,
|
||||
.login-page button,
|
||||
.set-new-password-page p.MuiTypography-root,
|
||||
.set-new-password-page button,
|
||||
.password-confirmed-page p.MuiTypography-root,
|
||||
.password-confirmed-page button,
|
||||
.forgot-password-page p.MuiTypography-root,
|
||||
.forgot-password-page button,
|
||||
.check-email-page p.MuiTypography-root,
|
||||
.check-email-page button,
|
||||
.check-email-page span.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.register-page p.MuiTypography-root,
|
||||
.login-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.register-page button:not(.MuiIconButton-root),
|
||||
.login-page button:not(.MuiIconButton-root),
|
||||
.set-new-password-page button:not(.MuiIconButton-root),
|
||||
.password-confirmed-page button:not(.MuiIconButton-root),
|
||||
.forgot-password-page button:not(.MuiIconButton-root),
|
||||
.check-email-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.register-page svg rect,
|
||||
.login-page svg rect {
|
||||
fill: none;
|
||||
}
|
||||
.register-form,
|
||||
.login-form {
|
||||
margin-top: 95px;
|
||||
}
|
||||
|
||||
.set-new-password-form,
|
||||
.password-confirmed-form,
|
||||
.forgot-password-form,
|
||||
.check-email-form {
|
||||
margin-top: 65px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
.set-new-password-page p.MuiTypography-root,
|
||||
.password-confirmed-page p.MuiTypography-root,
|
||||
.forgot-password-page p.MuiTypography-root,
|
||||
.check-email-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.login-page .MuiFormControlLabel-root .MuiButtonBase-root,
|
||||
.set-new-password-page button:not(.MuiIconButton-root) svg,
|
||||
.password-confirmed-page button:not(.MuiIconButton-root) svg,
|
||||
.forgot-password-page button svg,
|
||||
.check-email-page button svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.register-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root,
|
||||
.set-new-password-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root,
|
||||
.password-confirmed-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* REGISTER */
|
||||
.register-page h1.MuiTypography-root {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ///// */
|
||||
/* LOGIN */
|
||||
/* ///// */
|
||||
.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) {
|
||||
color: var(--env-var-color-3);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root {
|
||||
margin: 0;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg {
|
||||
fill: var(--env-var-color-4);
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root svg {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root .MuiTypography-root {
|
||||
color: var(--env-var-color-5);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.google-enter {
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* /////////// */
|
||||
/* Check Email */
|
||||
/* /////////// */
|
||||
.check-email-page span.MuiTypography-root {
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.check-email-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.check-email-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.check-email-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.check-email-page p.MuiTypography-root,
|
||||
.check-email-page button,
|
||||
.check-email-page span.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.check-email-page span.MuiTypography-root {
|
||||
font-weight: 600;
|
||||
}
|
||||
.check-email-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
.check-email-page button svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.check-email-form {
|
||||
margin-top: 65px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
Whitespace-only changes.
@@ -1,522 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Button from "../../Components/Button/";
|
||||
import ButtonSpinner from "../../Components/ButtonSpinner";
|
||||
import Link from "../../Components/Link";
|
||||
import {
|
||||
useTheme,
|
||||
Switch,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Tab,
|
||||
Tabs,
|
||||
Typography,
|
||||
Stack,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import { ColoredLabel, StatusLabel } from "../../Components/Label/";
|
||||
import Avatar from "../../Components/Avatar/";
|
||||
import ProgressStepper from "../../Components/ProgressStepper";
|
||||
import avatarImage from "../../assets/Images/avatar_placeholder.png";
|
||||
import Section from "../../Components/Section";
|
||||
import { DataGrid } from "@mui/x-data-grid";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import UploadIcon from "@mui/icons-material/Upload";
|
||||
import SendIcon from "@mui/icons-material/Send";
|
||||
import ImageIcon from "@mui/icons-material/Image";
|
||||
|
||||
// Redux
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { getMonitors } from "../../Features/Monitors/monitorsSlice";
|
||||
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
|
||||
import ImageField from "../../Components/Inputs/Image";
|
||||
import ProgressUpload from "../../Components/ProgressBars";
|
||||
import Alert from "../../Components/Alert";
|
||||
import { createToast } from "../../Utils/toastUtils";
|
||||
import Field from "../../Components/Inputs/Field";
|
||||
|
||||
const cols = [
|
||||
{
|
||||
field: "name",
|
||||
headerName: "Name",
|
||||
renderCell: (params) => {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<Avatar
|
||||
src={params.value.avatarImage}
|
||||
firstName={params.value.firstName}
|
||||
lastName={params.value.lastName}
|
||||
/>
|
||||
<div style={{ marginLeft: "1rem" }}>
|
||||
{params.value.firstName} {params.value.lastName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "status",
|
||||
headerName: "Status",
|
||||
renderCell: (params) => {
|
||||
return <StatusLabel status={params.value} />;
|
||||
},
|
||||
flex: 1,
|
||||
},
|
||||
{ field: "role", headerName: "Role", flex: 1 },
|
||||
{ field: "team", headerName: "Team", flex: 1 },
|
||||
{ field: "hireDate", headerName: "Hire date", flex: 1 },
|
||||
];
|
||||
|
||||
const rows = ((count) => {
|
||||
const arr = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
let row = {
|
||||
id: i,
|
||||
name: {
|
||||
avatarImage: i % 2 === 0 ? avatarImage : null,
|
||||
firstName: "Placeholder Name",
|
||||
lastName: i.toString(),
|
||||
},
|
||||
status: "Active",
|
||||
role: "Product Designer",
|
||||
team: "Marketing",
|
||||
hireDate: new Date().toLocaleDateString(),
|
||||
};
|
||||
arr.push(row);
|
||||
}
|
||||
return arr;
|
||||
})(100);
|
||||
|
||||
const steps = [
|
||||
{ label: "Your details", content: "Please provide your name and email" },
|
||||
{ label: "Company details", content: "A few details about your company" },
|
||||
{ label: "Invite your team", content: "Start collaborating with your team" },
|
||||
];
|
||||
|
||||
const demoMonitors = [
|
||||
{ id: 0, name: "Google", isActive: true },
|
||||
{ id: 1, name: "Yahoo", isActive: false },
|
||||
{ id: 2, name: "Reddit", isActive: true },
|
||||
];
|
||||
|
||||
const Demo = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [radio, setRadio] = React.useState(1);
|
||||
const [tab, setTab] = React.useState("departments");
|
||||
const [date, setDate] = React.useState("Pick a date!");
|
||||
|
||||
const handleRadio = (event) => {
|
||||
setRadio(event.target.value);
|
||||
};
|
||||
|
||||
const handleTab = (event, newValue) => {
|
||||
setTab(newValue);
|
||||
};
|
||||
|
||||
const handleDate = (newValue) => {
|
||||
setDate(newValue.toString());
|
||||
};
|
||||
|
||||
const change = (event, type) => {
|
||||
alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
|
||||
};
|
||||
|
||||
const links = [
|
||||
{
|
||||
name: "Buttons",
|
||||
url: "#buttons",
|
||||
},
|
||||
{
|
||||
name: "Disabled Buttons",
|
||||
url: "#disabled-buttons",
|
||||
},
|
||||
{
|
||||
name: "Labels",
|
||||
url: "#labels",
|
||||
},
|
||||
{
|
||||
name: "Status Labels",
|
||||
url: "#status-labels",
|
||||
},
|
||||
{
|
||||
name: "Avatar",
|
||||
url: "#avatar",
|
||||
},
|
||||
{
|
||||
name: "Switches",
|
||||
url: "#switches",
|
||||
},
|
||||
{
|
||||
name: "Checkboxes",
|
||||
url: "#checkboxes",
|
||||
},
|
||||
{
|
||||
name: "Radio",
|
||||
url: "#radio",
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
url: "#table",
|
||||
},
|
||||
{
|
||||
name: "Tabs",
|
||||
url: "#tabs",
|
||||
},
|
||||
{
|
||||
name: "Date Picker",
|
||||
url: "#date-picker",
|
||||
},
|
||||
{
|
||||
name: "Stepper",
|
||||
url: "#stepper",
|
||||
},
|
||||
{
|
||||
name: "Section",
|
||||
url: "#section",
|
||||
},
|
||||
];
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
// *********************************
|
||||
// Redux Demo
|
||||
// *********************************
|
||||
const monitorState = useSelector((state) => state.monitors);
|
||||
const { monitors, msg } = monitorState;
|
||||
|
||||
//Button Spinner state
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const handleButtonSpinnerClick = () => {
|
||||
setIsLoading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
//fields
|
||||
const [visibility, setVisibility] = useState(false);
|
||||
return (
|
||||
<div>
|
||||
<div style={{ padding: "4rem", border: "1px solid black" }}>
|
||||
<Typography variant="h4">Redux Demo</Typography>
|
||||
<Typography variant="h6">Monitors</Typography>
|
||||
<table
|
||||
style={{ border: "1px solid black", borderCollapse: "collapse" }}
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style={{ border: "1px solid black" }}>Name</th>
|
||||
<th style={{ border: "1px solid black" }}>URL</th>
|
||||
</tr>
|
||||
{monitors &&
|
||||
monitors.map((monitor) => {
|
||||
return (
|
||||
<tr key={monitor._id}>
|
||||
<td style={{ border: "1px solid black" }}>
|
||||
{monitor.name}
|
||||
</td>
|
||||
<td style={{ border: "1px solid black" }}>{monitor.url}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Message: {msg}</p>
|
||||
<Button
|
||||
level="primary"
|
||||
label="Get Monitors"
|
||||
onClick={() => {
|
||||
dispatch(getMonitorsByUserId("User ID Here"));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<ul style={{ listStyle: "none" }}>
|
||||
{links.map((link) => (
|
||||
<li key={link.url}>
|
||||
<Link level="primary" label={link.name} url={link.url} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<div>
|
||||
<Button level="primary" label="Primary" />
|
||||
<Button level="secondary" label="Secondary" />
|
||||
<Button level="tertiary" label="Tertiary" />
|
||||
<Button level="error" label="Error" />
|
||||
<Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="disabled-buttons">Disabled Buttons</h4>
|
||||
<div>
|
||||
<Button level="primary" label="Primary" disabled />
|
||||
<Button level="secondary" label="Secondary" disabled />
|
||||
<Button level="tertiary" label="Tertiary" disabled />
|
||||
<Button level="error" label="Error" disabled />
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
level="tertiary"
|
||||
label="Tertiary Link"
|
||||
url={"https://www.google.com"}
|
||||
/>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="labels">Labels</h4>
|
||||
<div>
|
||||
<ColoredLabel label="Label" color={theme.palette.labelGray.color} />
|
||||
<ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
|
||||
<ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
|
||||
<ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="status-labels">Status Lables</h4>
|
||||
<div>
|
||||
<StatusLabel status="Seen" />
|
||||
<StatusLabel status="Waiting" />
|
||||
<StatusLabel status="New" />
|
||||
<StatusLabel status="Active" />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="avatar">Avatar</h4>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
|
||||
<Avatar firstName="Alex" lastName="Holliday" />
|
||||
<Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
|
||||
<Avatar firstName="Alex" lastName="Holliday" small />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="switches">Switches</h4>
|
||||
<div>
|
||||
<Switch onChange={(event) => change(event, "Switch")} />
|
||||
<Switch size="small" />
|
||||
<Switch disabled />
|
||||
<Switch checked />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="checkboxes">Checkboxes</h4>
|
||||
<div>
|
||||
<Checkbox onChange={(event) => change(event, "Checkbox")} />
|
||||
<Checkbox size="small" />
|
||||
<Checkbox disabled />
|
||||
<Checkbox checked />
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="radio">Radio</h4>
|
||||
<div>
|
||||
<FormControl>
|
||||
<FormLabel>Demo Radio</FormLabel>
|
||||
<RadioGroup value={radio} onChange={handleRadio}>
|
||||
<div>
|
||||
<FormControlLabel value={1} control={<Radio />} label="1" />
|
||||
<FormControlLabel value={2} control={<Radio />} label="2" />
|
||||
<FormControlLabel
|
||||
value={3}
|
||||
control={<Radio size="small" />}
|
||||
label="3"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={4}
|
||||
control={<Radio disabled />}
|
||||
label="4"
|
||||
/>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="table">Table</h4>
|
||||
<div style={{ width: "75vw" }}>
|
||||
<DataGrid
|
||||
autoHeight
|
||||
columns={cols}
|
||||
rows={rows}
|
||||
initialState={{
|
||||
pagination: {
|
||||
paginationModel: { page: 0, pageSize: 10 },
|
||||
},
|
||||
}}
|
||||
pageSizeOptions={[5, 10]}
|
||||
/>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="tabs">Tabs</h4>
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
{" "}
|
||||
<Tabs value={tab} onChange={handleTab}>
|
||||
<Tab label="My details" value="details" />
|
||||
<Tab label="My team" value="team" />
|
||||
<Tab label="Departments" value="departments" />
|
||||
<Tab label="Approvals" value="approvals" />
|
||||
</Tabs>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="date-picker">Date Picker</h4>
|
||||
<div>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker onChange={handleDate} />
|
||||
</LocalizationProvider>
|
||||
<h4>{date}</h4>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="stepper">Stepper</h4>
|
||||
<div>
|
||||
<ProgressStepper steps={steps}></ProgressStepper>
|
||||
</div>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="section">Section</h4>
|
||||
<Section monitors={demoMonitors} />
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<h4 id="section">Loading Buttons</h4>
|
||||
<Stack direction="row" justifyContent="center" spacing={3}>
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Submit"
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="secondary"
|
||||
label="Fetch Data"
|
||||
loadingText="Fetching..."
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="tertiary"
|
||||
label="Add"
|
||||
loadingText="Adding..."
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Upload"
|
||||
position="start"
|
||||
img={<UploadIcon />}
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="secondary"
|
||||
label="Send"
|
||||
position="end"
|
||||
img={<SendIcon />}
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="error"
|
||||
label="Disabled"
|
||||
onClick={handleButtonSpinnerClick}
|
||||
isLoading={isLoading}
|
||||
disabled={true}
|
||||
/>
|
||||
</Stack>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<ImageField
|
||||
id="test-image-field"
|
||||
onChange={() => console.log("changed")}
|
||||
/>
|
||||
</Stack>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<ProgressUpload
|
||||
icon={<ImageIcon />}
|
||||
label="image.jpg"
|
||||
size="2 MB"
|
||||
progress={50}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
</Stack>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<Stack direction="row" gap="10px" flexWrap="wrap">
|
||||
<Box width="500px">
|
||||
<Alert
|
||||
variant="info"
|
||||
title="SSO login"
|
||||
body="Since you logged in via SSO, you cannot reset or modify your password."
|
||||
/>
|
||||
</Box>
|
||||
<Box width="500px">
|
||||
<Alert
|
||||
variant="warning"
|
||||
body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
|
||||
/>
|
||||
</Box>
|
||||
<Box width="500px">
|
||||
<Alert
|
||||
variant="error"
|
||||
title="Error"
|
||||
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
/>
|
||||
</Box>
|
||||
<Box width="500px">
|
||||
<Alert
|
||||
variant="info"
|
||||
title="We've just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
|
||||
isToast={true}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="500px">
|
||||
<Alert
|
||||
variant="info"
|
||||
body="Your password is incorrect."
|
||||
isToast={true}
|
||||
hasIcon={false}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="500px" mt="5px">
|
||||
<Button
|
||||
level="primary"
|
||||
label="Toast"
|
||||
onClick={() =>
|
||||
createToast({
|
||||
variant: "info",
|
||||
body: "Your password is incorrect.",
|
||||
hasIcon: false,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
<Stack direction="row" justifyContent="center" gap="20px">
|
||||
<Field type="text" label="Name" placeholder="Enter a name" />
|
||||
<Field
|
||||
type="email"
|
||||
label="Email"
|
||||
isRequired={true}
|
||||
placeholder="name.surname@companyname.com"
|
||||
error="This is an error message."
|
||||
/>
|
||||
<Field
|
||||
type="password"
|
||||
label="Password"
|
||||
isRequired={true}
|
||||
placeholder="Create a password"
|
||||
/>
|
||||
<Field
|
||||
type="url"
|
||||
label="Website"
|
||||
placeholder="google.com"
|
||||
/>
|
||||
</Stack>
|
||||
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Demo;
|
||||
@@ -1,31 +0,0 @@
|
||||
.forgot-password-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.forgot-password-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.forgot-password-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.forgot-password-page p.MuiTypography-root,
|
||||
.forgot-password-page button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.forgot-password-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
.forgot-password-page button svg{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.forgot-password-form {
|
||||
margin-top: 65px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
.login-page {
|
||||
width: var(--env-var-width-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.login-page svg rect {
|
||||
fill: none;
|
||||
}
|
||||
.login-page p.MuiTypography-root,
|
||||
.login-page span,
|
||||
.login-page button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.login-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) {
|
||||
color: var(--env-var-color-3);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root {
|
||||
margin: 0;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root .MuiButtonBase-root {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg{
|
||||
fill: var(--env-var-color-4);
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root svg{
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.login-page .MuiFormControlLabel-root .MuiTypography-root {
|
||||
color: var(--env-var-color-5);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* .login-form-inputs .field h3.MuiTypography-root{
|
||||
font-weight: 600;
|
||||
} */
|
||||
|
||||
.login-form{
|
||||
margin-top: 95px;
|
||||
}
|
||||
|
||||
.google-enter {
|
||||
width: var(--env-var-img-width-1);
|
||||
height: var(--env-var-img-width-1);
|
||||
margin-right: 10px;
|
||||
}
|
||||
File renamed without changes.
+11
-12
@@ -1,19 +1,18 @@
|
||||
import "./index.css";
|
||||
import ConfigBox from "../../Components/ConfigBox";
|
||||
import ConfigBox from "../../../Components/ConfigBox";
|
||||
import React, { useState } from "react";
|
||||
import RadioButton from "../../Components/RadioButton";
|
||||
import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
|
||||
import Button from "../../Components/Button";
|
||||
import RadioButton from "../../../Components/RadioButton";
|
||||
import Button from "../../../Components/Button";
|
||||
import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { createMonitorValidation } from "../../Validation/validation";
|
||||
import { createMonitor } from "../../Features/Monitors/monitorsSlice";
|
||||
import { createMonitorValidation } from "../../../Validation/validation";
|
||||
import { createMonitor } from "../../../Features/Monitors/monitorsSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import WestRoundedIcon from "@mui/icons-material/WestRounded";
|
||||
import Field from "../../Components/Inputs/Field";
|
||||
import Field from "../../../Components/Inputs/Field";
|
||||
|
||||
const CreateNewMonitor = () => {
|
||||
const CreateMonitor = () => {
|
||||
const MS_PER_MINUTE = 60000;
|
||||
const { user, authToken } = useSelector((state) => state.auth);
|
||||
const dispatch = useDispatch();
|
||||
@@ -81,7 +80,7 @@ const CreateNewMonitor = () => {
|
||||
// }));
|
||||
// };
|
||||
|
||||
const handleCreateNewMonitor = async (event) => {
|
||||
const handleCreateMonitor = async (event) => {
|
||||
event.preventDefault();
|
||||
//obj to submit
|
||||
let monitor = {
|
||||
@@ -126,7 +125,7 @@ const CreateNewMonitor = () => {
|
||||
return (
|
||||
<form
|
||||
className="create-monitor-form"
|
||||
onSubmit={handleCreateNewMonitor}
|
||||
onSubmit={handleCreateMonitor}
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
style={{
|
||||
@@ -441,7 +440,7 @@ const CreateNewMonitor = () => {
|
||||
level="primary"
|
||||
label="Create new monitor"
|
||||
sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
|
||||
onClick={handleCreateNewMonitor}
|
||||
onClick={handleCreateMonitor}
|
||||
disabled={Object.keys(errors).length !== 0 && true}
|
||||
/>
|
||||
</div>
|
||||
@@ -449,4 +448,4 @@ const CreateNewMonitor = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNewMonitor;
|
||||
export default CreateMonitor;
|
||||
File renamed without changes.
@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useParams } from "react-router-dom";
|
||||
import axiosInstance from "../../Utils/axiosConfig";
|
||||
import BasicTable from "../../Components/BasicTable";
|
||||
import MonitorDetailsAreaChart from "../../Components/Charts/MonitorDetailsAreaChart";
|
||||
import StatusLabel from "../../Components/StatusLabel";
|
||||
import axiosInstance from "../../../Utils/axiosConfig";
|
||||
import BasicTable from "../../../Components/BasicTable";
|
||||
import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
|
||||
import { StatusLabel } from "../../../Components/Label";
|
||||
import ButtonGroup from "@mui/material/ButtonGroup";
|
||||
import Button from "../../Components/Button";
|
||||
import Button from "../../../Components/Button";
|
||||
|
||||
const formatDuration = (ms) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
@@ -62,7 +62,7 @@ const DetailsPage = () => {
|
||||
],
|
||||
rows: res.data.data.checks.map((check, idx) => {
|
||||
const params = {
|
||||
status: check.status === true ? "up" : "down",
|
||||
status: check.status === true ? "Up" : "Down",
|
||||
backgroundColor:
|
||||
check.status === true
|
||||
? "var(--env-var-color-20)"
|
||||
@@ -76,7 +76,18 @@ const DetailsPage = () => {
|
||||
return {
|
||||
id: check._id,
|
||||
data: [
|
||||
{ id: idx, data: <StatusLabel params={params} /> },
|
||||
{
|
||||
id: idx,
|
||||
data: (
|
||||
<StatusLabel
|
||||
status={params.status}
|
||||
dot={params.statusDotColor}
|
||||
customStyles={{
|
||||
backgroundColor: params.backgroundColor,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ id: idx + 1, data: new Date(check.createdAt).toLocaleString() },
|
||||
{ id: idx + 2, data: check.statusCode },
|
||||
],
|
||||
@@ -101,3 +101,105 @@
|
||||
width: 226.8px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* TODO */
|
||||
.current-monitors {
|
||||
margin-top: var(--env-var-spacing-2);
|
||||
border: 1px solid #eaecf0;
|
||||
padding: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.current-monitors-title-holder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.current-monitors-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.current-monitors-title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-right: var(--env-var-spacing-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.current-monitors-counter {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
min-width: 22px;
|
||||
min-height: 22px;
|
||||
background-color: var(--env-var-color-15);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
border-radius: 50%;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 500;
|
||||
color: var(--env-var-color-5);
|
||||
}
|
||||
|
||||
.monitors-v-gaping {
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.current-monitors-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.current-monitors-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.current-monitors-table th,
|
||||
.current-monitors-table td {
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.theader-row {
|
||||
background-color: var(--env-var-color-13);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theader-row td {
|
||||
padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.host-list-item-precentage {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.tbody-row td {
|
||||
padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
|
||||
}
|
||||
|
||||
.host-status-box {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
border-radius: var(--env-var-radius-2);
|
||||
align-items: center;
|
||||
padding: calc(var(--env-var-spacing-1) / 2);
|
||||
}
|
||||
|
||||
.host-actions {
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tbody-row-cell.actions-cell {
|
||||
padding-left: 30px;
|
||||
}
|
||||
@@ -1,14 +1,45 @@
|
||||
import "./index.css";
|
||||
import "./monitors.css";
|
||||
import { useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Button from "../../Components/Button";
|
||||
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
|
||||
import SearchTextField from "../../Components/Inputs/Search/SearchTextField";
|
||||
import MonitorTable from "../../Components/MonitorTable";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
|
||||
import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
|
||||
import BasicTable from "../../Components/BasicTable";
|
||||
import { StatusLabel } from "../../Components/Label";
|
||||
import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart";
|
||||
|
||||
/**
|
||||
* Host component.
|
||||
* This subcomponent receives a params object and displays the host details.
|
||||
*
|
||||
* @component
|
||||
* @param {Object} params - An object containing the following properties:
|
||||
* @param {string} params.url - The URL of the host.
|
||||
* @param {string} params.title - The name of the host.
|
||||
* @param {string} params.percentageColor - The color of the percentage text.
|
||||
* @param {number} params.precentage - The percentage to display.
|
||||
* @returns {React.ElementType} Returns a div element with the host details.
|
||||
*/
|
||||
const Host = ({ params }) => {
|
||||
return (
|
||||
<div className="host-row">
|
||||
<a href={params.url} target="_blank" rel="noreferrer">
|
||||
<OpenInNewPage />
|
||||
</a>
|
||||
<div className="host-name">{params.title}</div>
|
||||
<div
|
||||
className="host-percentage"
|
||||
style={{ color: params.percentageColor }}
|
||||
>
|
||||
{params.precentage}%
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Monitors = () => {
|
||||
const theme = useTheme();
|
||||
@@ -26,6 +57,70 @@ const Monitors = () => {
|
||||
}, 0);
|
||||
|
||||
const down = monitorState.monitors.length - up;
|
||||
|
||||
const data = {
|
||||
cols: [
|
||||
{ id: 1, name: "Host" },
|
||||
{
|
||||
id: 2,
|
||||
name: (
|
||||
<>
|
||||
Status
|
||||
<span>
|
||||
<ArrowDownwardRoundedIcon />
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{ id: 3, name: "Response Time" },
|
||||
{ id: 4, name: "Actions" },
|
||||
],
|
||||
rows: [],
|
||||
};
|
||||
|
||||
data.rows = monitorState.monitors.map((monitor, idx) => {
|
||||
const params = {
|
||||
url: monitor.url,
|
||||
title: monitor.name,
|
||||
precentage: 100,
|
||||
percentageColor:
|
||||
monitor.status === true
|
||||
? "var(--env-var-color-17)"
|
||||
: "var(--env-var-color-19)",
|
||||
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)",
|
||||
};
|
||||
|
||||
return {
|
||||
id: monitor._id,
|
||||
handleClick: () => navigate(`/monitors/${monitor._id}`),
|
||||
data: [
|
||||
{ id: idx, data: <Host params={params} /> },
|
||||
{
|
||||
id: idx + 1,
|
||||
data: (
|
||||
<StatusLabel
|
||||
status={params.status}
|
||||
dot={params.statusDotColor}
|
||||
customStyles={{
|
||||
backgroundColor: params.backgroundColor,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ id: idx + 2, data: <ResponseTimeChart checks={monitor.checks} /> },
|
||||
{ id: idx + 3, data: "TODO" },
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="monitors"
|
||||
@@ -62,11 +157,11 @@ const Monitors = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="current-monitors-search-bar">
|
||||
<SearchTextField />
|
||||
{/* TODO - add search bar */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="monitors-v-gaping" />
|
||||
<MonitorTable monitors={monitorState.monitors} />
|
||||
<BasicTable data={data} paginated={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
.current-monitors {
|
||||
margin-top: var(--env-var-spacing-2);
|
||||
border: 1px solid #eaecf0;
|
||||
padding: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.current-monitors-title-holder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.current-monitors-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.current-monitors-title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-right: var(--env-var-spacing-1);
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.current-monitors-counter {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
min-width: 22px;
|
||||
min-height: 22px;
|
||||
background-color: var(--env-var-color-15);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
border-radius: 50%;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 500;
|
||||
color: var(--env-var-color-5);
|
||||
}
|
||||
|
||||
.monitors-v-gaping {
|
||||
height: var(--env-var-spacing-3);
|
||||
}
|
||||
|
||||
.current-monitors-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.current-monitors-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.current-monitors-table th,
|
||||
.current-monitors-table td {
|
||||
border: 1px solid var(--env-var-color-16);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.theader-row {
|
||||
background-color: var(--env-var-color-13);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theader-row td {
|
||||
padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.host-list-item-precentage {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.tbody-row td {
|
||||
padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
|
||||
}
|
||||
|
||||
.host-status-box {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
border-radius: var(--env-var-radius-2);
|
||||
align-items: center;
|
||||
padding: calc(var(--env-var-spacing-1) / 2);
|
||||
}
|
||||
|
||||
.host-actions {
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tbody-row-cell.actions-cell {
|
||||
padding-left: 30px;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.password-confirmed-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.password-confirmed-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.password-confirmed-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.password-confirmed-page p.MuiTypography-root,
|
||||
.password-confirmed-page button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.password-confirmed-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
.password-confirmed-page button:not(.MuiIconButton-root) svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.password-confirmed-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.password-confirmed-form {
|
||||
margin-top: 65px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import "./playGround.css";
|
||||
import Statistic from "../../Components/Charts/Statistics/Statistic";
|
||||
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
|
||||
|
||||
function PlayGroundCharts() {
|
||||
return (
|
||||
<>
|
||||
<div className="play-ground-charts">
|
||||
<Statistic title="Currently up for" value="4h 30m 2s" />
|
||||
<Statistic title="Last checked" value="15 seconds ago" />
|
||||
<Statistic title="Incidents" value="2" />
|
||||
<Statistic title="Certificate expiry" value="284 days" />
|
||||
</div>
|
||||
<div className="play-ground-charts-spacing" />
|
||||
<div className="play-ground-charts">
|
||||
<ServerStatus title="Up" value="4" state="up" />
|
||||
<ServerStatus title="Down" value="0" state="down" />
|
||||
<ServerStatus title="Paused" value="0" state="pause" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundCharts;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import DualButtonPopupModal from "../../Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
|
||||
import DualButtonPopupModalWithTextfields from "../../Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
|
||||
|
||||
function PlayGroundPopupModals() {
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<DualButtonPopupModal
|
||||
subject="Unsaved changes"
|
||||
description="Do you want to save or discard changes?"
|
||||
esc="Discard"
|
||||
save="Save changes"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<DualButtonPopupModalWithTextfields
|
||||
title="Create new organization"
|
||||
esc="Cancel"
|
||||
save="Save"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundPopupModals;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from "react";
|
||||
import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail";
|
||||
import "./playGround.css";
|
||||
|
||||
function PlayGroundTooltips() {
|
||||
return (
|
||||
<div className="tooltip-playground">
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="left"
|
||||
arrow={true}
|
||||
title="This is a tooltip"
|
||||
text="This is a tooltip"
|
||||
/>
|
||||
<br />
|
||||
<TooltipWithTail placement="top" arrow={true} text="This is a tooltip" />
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="bottom"
|
||||
arrow={false}
|
||||
text="This is a tooltip"
|
||||
/>
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="right"
|
||||
arrow={true}
|
||||
title="This is a tooltip"
|
||||
text="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundTooltips;
|
||||
@@ -1,73 +0,0 @@
|
||||
import "./playGround.css";
|
||||
import React from "react";
|
||||
import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
|
||||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||||
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
|
||||
import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
|
||||
import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
|
||||
import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
|
||||
|
||||
function PlayGroundAnnouncements() {
|
||||
return (
|
||||
<div className="playground">
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={
|
||||
<div className="info-icon-frame">
|
||||
<InfoOutlinedIcon style={{ fill: "#344054" }} />
|
||||
</div>
|
||||
}
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="red" />}
|
||||
subject="There was a problem with that action"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="green" />}
|
||||
subject="Successfully updated profile"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButton
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsMessageBar message="New employee created successfully" />
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementUpdateSubscription
|
||||
title="We’ve just released a new update!"
|
||||
text="Check out the all new dashboard view. Pages and now load faster."
|
||||
cancel="Dismiss"
|
||||
positive="Changelog"
|
||||
header="Subscribe to updates"
|
||||
button="Subscribe"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundAnnouncements;
|
||||
@@ -1,89 +0,0 @@
|
||||
import React from "react";
|
||||
import PlayGroundCharts from "./PlayGround-Charts";
|
||||
import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
|
||||
import PlayGroundTooltips from "./PlayGround-Tooltips";
|
||||
import Field from "../../Components/Inputs/Field";
|
||||
|
||||
// This Component is just for the development and test
|
||||
// purposes and just to see what my components look like while development
|
||||
// and will be removed in the end
|
||||
function PlayGround() {
|
||||
return (
|
||||
<div>
|
||||
{/* Default state of Email Text Fields */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
type="email"
|
||||
id="outlined-basic"
|
||||
label="Email"
|
||||
placeholder="olivia@untitledui.com"
|
||||
/>
|
||||
{/* Email Text Field when validation error occures */}
|
||||
<Field
|
||||
type="email"
|
||||
id="outlined-basic"
|
||||
label="Email"
|
||||
placeholder="olivia@untitledui.com"
|
||||
error="This is an error message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Now, illustration of the Website text fields */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field type="url" label="Website" />
|
||||
<Field type="url" label="Website" hasCopy={true} />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
{/* Now, illustration of the Description text fields */}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
type="description"
|
||||
label="Description"
|
||||
placeholder="Enter a description... "
|
||||
/>
|
||||
<Field
|
||||
type="description"
|
||||
label="Description"
|
||||
placeholder="Enter a description... "
|
||||
error="This is an error message"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<PlayGroundCharts />
|
||||
<hr />
|
||||
<PlayGroundPopupModals />
|
||||
<hr />
|
||||
<PlayGroundTooltips />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGround;
|
||||
@@ -1,19 +0,0 @@
|
||||
.play-ground-charts {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.play-ground-charts-spacing {
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.tooltip-playground {
|
||||
margin: auto;
|
||||
padding: 5%;
|
||||
width: 5%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playground {
|
||||
padding: 40px;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
.register-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.register-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.register-page p.MuiTypography-root,
|
||||
.register-page span,
|
||||
.register-page button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.register-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.register-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.register-page svg rect {
|
||||
fill: none;
|
||||
}
|
||||
.register-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
margin-top: 95px;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.set-new-password-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: var(--env-var-height-1);
|
||||
}
|
||||
.set-new-password-page button:not(.MuiIconButton-root) {
|
||||
height: 34px;
|
||||
border-radius: var(--env-var-radius-2);
|
||||
line-height: 0;
|
||||
}
|
||||
.set-new-password-page h1.MuiTypography-root {
|
||||
font-size: var(--env-var-font-size-large);
|
||||
color: var(--env-var-color-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.set-new-password-page p.MuiTypography-root,
|
||||
.set-new-password-page button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.set-new-password-page p.MuiTypography-root {
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
.set-new-password-page button:not(.MuiIconButton-root) svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.set-new-password-page
|
||||
.MuiFormControl-root:has(#register-password-input)
|
||||
+ span.MuiTypography-root {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.set-new-password-form {
|
||||
margin-top: 65px;
|
||||
width: var(--env-var-width-2);
|
||||
}
|
||||
Reference in new issue
Block a user