Merge pull request #366 from bluewave-labs/feat/the-reckoning-sequel
Cleaned up codebase, The sequel
This commit is contained in:
33 files changed
+266
-1775
No files matched your search
+10
-14
@@ -1,24 +1,22 @@
|
||||
import { Routes, Route, Navigate } from "react-router-dom";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
// import "./App.css";
|
||||
import NotFound from "./Pages/NotFound";
|
||||
import Login from "./Pages/Login";
|
||||
import Register from "./Pages/Register";
|
||||
import Login from "./Pages/Auth/Login";
|
||||
import Register from "./Pages/Auth/Register";
|
||||
import HomeLayout from "./Layouts/HomeLayout";
|
||||
import Demo from "./Pages/Demo/Demo";
|
||||
import PlayGround from "./Pages/PlayGround/PlayGround";
|
||||
import Account from "./Pages/Account";
|
||||
import Monitors from "./Pages/Monitors";
|
||||
import CreateNewMonitor from "./Pages/CreateNewMonitor";
|
||||
import CreateMonitor from "./Pages/Monitors/CreateMonitor";
|
||||
import Incidents from "./Pages/Incidents";
|
||||
import Status from "./Pages/Status";
|
||||
import Integrations from "./Pages/Integrations";
|
||||
import Settings from "./Pages/Settings";
|
||||
import ForgotPassword from "./Pages/ForgotPassword";
|
||||
import CheckEmail from "./Pages/CheckEmail";
|
||||
import SetNewPassword from "./Pages/SetNewPassword";
|
||||
import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
|
||||
import ForgotPassword from "./Pages/Auth/ForgotPassword";
|
||||
import CheckEmail from "./Pages/Auth/CheckEmail";
|
||||
import SetNewPassword from "./Pages/Auth/SetNewPassword";
|
||||
import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed";
|
||||
import ProtectedRoute from "./Components/ProtectedRoute";
|
||||
import Details from "./Pages/Details";
|
||||
import Details from "./Pages/Monitors/Details";
|
||||
import Maintenance from "./Pages/Maintenance";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
@@ -39,7 +37,7 @@ function App() {
|
||||
/>
|
||||
<Route
|
||||
path="/monitors/create"
|
||||
element={<ProtectedRoute Component={CreateNewMonitor} />}
|
||||
element={<ProtectedRoute Component={CreateMonitor} />}
|
||||
/>
|
||||
<Route
|
||||
path="/monitors/:monitorId/"
|
||||
@@ -82,10 +80,8 @@ function App() {
|
||||
|
||||
<Route exact path="/login" element={<Login />} />
|
||||
<Route exact path="/register" element={<Register />} />
|
||||
<Route exact path="/demo" element={<Demo />} />
|
||||
{/* <Route path="/toast" element={<ToastComponent />} /> */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
<Route path="/playground" element={<PlayGround />} />
|
||||
<Route path="/forgot-password" element={<ForgotPassword />} />
|
||||
<Route path="/check-email" element={<CheckEmail />} />
|
||||
<Route path="/set-new-password/:token" element={<SetNewPassword />} />
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { BarChart } from "@mui/x-charts/BarChart";
|
||||
|
||||
const ChartsOverviewDemo = () => {
|
||||
return (
|
||||
<BarChart
|
||||
series={[
|
||||
{ data: [35, 44, 24, 34] },
|
||||
{ data: [51, 6, 49, 30] },
|
||||
{ data: [15, 25, 30, 50] },
|
||||
{ data: [60, 50, 15, 25] },
|
||||
]}
|
||||
height={290}
|
||||
xAxis={[{ data: ["Q1", "Q2", "Q3", "Q4"], scaleType: "band" }]}
|
||||
margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartsOverviewDemo;
|
||||
@@ -1,9 +0,0 @@
|
||||
#dashboard-setting-menu-item {
|
||||
width: 135px;
|
||||
padding: 6px;
|
||||
margin: 5px 12px;
|
||||
}
|
||||
|
||||
#menu-appbar {
|
||||
padding: var(--env-var-spacing-1);
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import "./index.css";
|
||||
import { useState } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import SvgIcon from "@mui/material/SvgIcon";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
const settings = [
|
||||
"Open Site",
|
||||
"Detailed View",
|
||||
"Incidents",
|
||||
"Configure",
|
||||
"Remove",
|
||||
];
|
||||
|
||||
/**
|
||||
* DashboardSettings component
|
||||
*
|
||||
* A component that provides a settings menu accessible from an icon.
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* return (
|
||||
* <DashboardSettings />
|
||||
* )
|
||||
*/
|
||||
function DashboardSettings() {
|
||||
const theme = useTheme();
|
||||
const [anchorElUser, setAnchorElUser] = useState(null);
|
||||
|
||||
/**
|
||||
* Handles opening the user menu.
|
||||
*
|
||||
* @param {React.MouseEvent<HTMLElement>} event - The event triggered by clicking the user menu button.
|
||||
*/
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles closing the user menu.
|
||||
*/
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Open settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<SvgIcon component={SettingsIcon} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: theme.spacing(5.5) }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
{settings.map((setting) => (
|
||||
<MenuItem
|
||||
id="dashboard-setting-menu-item"
|
||||
key={setting}
|
||||
onClick={handleCloseUserMenu}
|
||||
>
|
||||
<Typography
|
||||
style={{ fontSize: "var(--env-var-font-size-medium)" }}
|
||||
textAlign="center"
|
||||
>
|
||||
{setting}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardSettings;
|
||||
@@ -1,534 +0,0 @@
|
||||
{
|
||||
"success": true,
|
||||
"msg": "Got monitor for 666c9146c9bfa20db790b1df successfully\"",
|
||||
"data": [
|
||||
{
|
||||
"_id": "6671d8469ba14f9f260eed23",
|
||||
"userId": "666c9146c9bfa20db790b1df",
|
||||
"name": "Google Monitor",
|
||||
"description": "Google",
|
||||
"type": "ping",
|
||||
"url": "127.0.0.1",
|
||||
"isActive": true,
|
||||
"interval": 10000,
|
||||
"createdAt": "2024-06-18T18:56:06.212Z",
|
||||
"updatedAt": "2024-06-18T18:56:06.212Z",
|
||||
"__v": 0,
|
||||
"checks": [
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 143,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 70,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 143,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 70,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed2d",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": false,
|
||||
"responseTime": 120,
|
||||
"createdAt": "2024-06-18T18:56:20.016Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.016Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 200,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed2d",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": false,
|
||||
"responseTime": 250,
|
||||
"createdAt": "2024-06-18T18:56:20.016Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.016Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": false,
|
||||
"responseTime": 180,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed2d",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 200,
|
||||
"createdAt": "2024-06-18T18:56:20.016Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.016Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d84a9ba14f9f260eed27",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": false,
|
||||
"responseTime": 100,
|
||||
"createdAt": "2024-06-18T18:56:10.082Z",
|
||||
"updatedAt": "2024-06-18T18:56:10.082Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed2d",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 210,
|
||||
"createdAt": "2024-06-18T18:56:20.016Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.016Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d85e9ba14f9f260eed3c",
|
||||
"monitorId": "6671d8469ba14f9f260eed23",
|
||||
"status": true,
|
||||
"responseTime": 200,
|
||||
"createdAt": "2024-06-18T18:56:30.050Z",
|
||||
"updatedAt": "2024-06-18T18:56:30.050Z",
|
||||
"__v": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"_id": "6671d8529ba14f9f260eed2b",
|
||||
"userId": "666c9146c9bfa20db790b1df",
|
||||
"name": "Google Monitor",
|
||||
"description": "Google",
|
||||
"type": "http",
|
||||
"url": "https://www.google.com/404",
|
||||
"isActive": true,
|
||||
"interval": 10000,
|
||||
"createdAt": "2024-06-18T18:56:18.555Z",
|
||||
"updatedAt": "2024-06-18T18:56:18.555Z",
|
||||
"__v": 0,
|
||||
"checks": [
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed31",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 167,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:20.190Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.190Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d85e9ba14f9f260eed3e",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 228,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:30.279Z",
|
||||
"updatedAt": "2024-06-18T18:56:30.279Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8669ba14f9f260eed47",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 112,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:56:38.381Z",
|
||||
"updatedAt": "2024-06-18T18:56:38.381Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8809ba14f9f260eed6b",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 134,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:04.846Z",
|
||||
"updatedAt": "2024-06-18T18:57:04.846Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d86d9ba14f9f260eed50",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 301,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:45.492Z",
|
||||
"updatedAt": "2024-06-18T18:56:45.492Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8739ba14f9f260eed59",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 84,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:56:51.614Z",
|
||||
"updatedAt": "2024-06-18T18:56:51.614Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d87a9ba14f9f260eed62",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 189,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:58.734Z",
|
||||
"updatedAt": "2024-06-18T18:56:58.734Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8809ba14f9f260eed6b",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 134,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:04.846Z",
|
||||
"updatedAt": "2024-06-18T18:57:04.846Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8549ba14f9f260eed31",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 167,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:20.190Z",
|
||||
"updatedAt": "2024-06-18T18:56:20.190Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d85e9ba14f9f260eed3e",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 228,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:56:30.279Z",
|
||||
"updatedAt": "2024-06-18T18:56:30.279Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8669ba14f9f260eed47",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 112,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:56:38.381Z",
|
||||
"updatedAt": "2024-06-18T18:56:38.381Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8879ba14f9f260eed74",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 247,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:57:11.958Z",
|
||||
"updatedAt": "2024-06-18T18:57:11.958Z",
|
||||
"__v": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"_id": "6671d8619ba14f9f260eed4c",
|
||||
"userId": "666c9146c9bfa20db790b1df",
|
||||
"name": "Amazon Monitor",
|
||||
"description": "Amazon website",
|
||||
"type": "http",
|
||||
"url": "https://www.amazon.com",
|
||||
"isActive": true,
|
||||
"interval": 15000,
|
||||
"createdAt": "2024-06-18T18:56:49.419Z",
|
||||
"updatedAt": "2024-06-18T18:56:49.419Z",
|
||||
"__v": 0,
|
||||
"checks": [
|
||||
{
|
||||
"_id": "6671d8919ba14f9f260eed7d",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 92,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:21.076Z",
|
||||
"updatedAt": "2024-06-18T18:57:21.076Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8989ba14f9f260eed86",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 205,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:57:28.188Z",
|
||||
"updatedAt": "2024-06-18T18:57:28.188Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d89e9ba14f9f260eed8f",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 159,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:34.300Z",
|
||||
"updatedAt": "2024-06-18T18:57:34.300Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8a59ba14f9f260eed98",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 271,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:57:41.421Z",
|
||||
"updatedAt": "2024-06-18T18:57:41.421Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8ac9ba14f9f260eeda1",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 127,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:48.532Z",
|
||||
"updatedAt": "2024-06-18T18:57:48.532Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8a59ba14f9f260eed98",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 271,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:57:41.421Z",
|
||||
"updatedAt": "2024-06-18T18:57:41.421Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8ac9ba14f9f260eeda1",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 127,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:57:48.532Z",
|
||||
"updatedAt": "2024-06-18T18:57:48.532Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8b29ba14f9f260eedaa",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 193,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:57:54.643Z",
|
||||
"updatedAt": "2024-06-18T18:57:54.643Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8b89ba14f9f260eedb3",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 104,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:00.754Z",
|
||||
"updatedAt": "2024-06-18T18:58:00.754Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8bf9ba14f9f260eedbc",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 231,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:07.865Z",
|
||||
"updatedAt": "2024-06-18T18:58:07.865Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8c59ba14f9f260eedc5",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 147,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:13.977Z",
|
||||
"updatedAt": "2024-06-18T18:58:13.977Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8cc9ba14f9f260eedce",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 283,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:20.088Z",
|
||||
"updatedAt": "2024-06-18T18:58:20.088Z",
|
||||
"__v": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"_id": "6671d8789ba14f9f260eed66",
|
||||
"userId": "666c9146c9bfa20db790b1df",
|
||||
"name": "Facebook Monitor",
|
||||
"description": "Facebook website",
|
||||
"type": "http",
|
||||
"url": "https://www.facebook.com",
|
||||
"isActive": true,
|
||||
"interval": 20000,
|
||||
"createdAt": "2024-06-18T18:57:12.798Z",
|
||||
"updatedAt": "2024-06-18T18:57:12.798Z",
|
||||
"__v": 0,
|
||||
"checks": [
|
||||
{
|
||||
"_id": "6671d8d29ba14f9f260eedd7",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 81,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:26.199Z",
|
||||
"updatedAt": "2024-06-18T18:58:26.199Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8d89ba14f9f260eede0",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 218,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:32.311Z",
|
||||
"updatedAt": "2024-06-18T18:58:32.311Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8df9ba14f9f260eede9",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 138,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:39.422Z",
|
||||
"updatedAt": "2024-06-18T18:58:39.422Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8e59ba14f9f260eedf2",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 257,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:45.533Z",
|
||||
"updatedAt": "2024-06-18T18:58:45.533Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8eb9ba14f9f260eedfb",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 116,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:51.644Z",
|
||||
"updatedAt": "2024-06-18T18:58:51.644Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8f19ba14f9f260eee04",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 184,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:57.755Z",
|
||||
"updatedAt": "2024-06-18T18:58:57.755Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8f79ba14f9f260eee0d",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 97,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:59:03.867Z",
|
||||
"updatedAt": "2024-06-18T18:59:03.867Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8fd9ba14f9f260eee16",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 240,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:59:09.978Z",
|
||||
"updatedAt": "2024-06-18T18:59:09.978Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d9039ba14f9f260eee1f",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 135,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:59:16.089Z",
|
||||
"updatedAt": "2024-06-18T18:59:16.089Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8d89ba14f9f260eede0",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 218,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:58:32.311Z",
|
||||
"updatedAt": "2024-06-18T18:58:32.311Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d8df9ba14f9f260eede9",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": true,
|
||||
"responseTime": 138,
|
||||
"statusCode": 200,
|
||||
"createdAt": "2024-06-18T18:58:39.422Z",
|
||||
"updatedAt": "2024-06-18T18:58:39.422Z",
|
||||
"__v": 0
|
||||
},
|
||||
{
|
||||
"_id": "6671d9089ba14f9f260eee28",
|
||||
"monitorId": "6671d8529ba14f9f260eed2b",
|
||||
"status": false,
|
||||
"responseTime": 269,
|
||||
"statusCode": 404,
|
||||
"createdAt": "2024-06-18T18:59:22.200Z",
|
||||
"updatedAt": "2024-06-18T18:59:22.200Z",
|
||||
"__v": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -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,517 +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 { 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);
|
||||
};
|
||||
|
||||
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" />
|
||||
<StatusLabel status="Up" />
|
||||
</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">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;
|
||||
Whitespace-only changes.
@@ -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,10 +3,10 @@ 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/Label";
|
||||
import axiosInstance from "../../../Utils/axiosConfig";
|
||||
import BasicTable from "../../../Components/BasicTable";
|
||||
import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
|
||||
import { StatusLabel } from "../../../Components/Label";
|
||||
|
||||
const formatDuration = (ms) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
@@ -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,5 +1,4 @@
|
||||
import "./index.css";
|
||||
import "./monitors.css";
|
||||
import { useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
|
||||
@@ -28,7 +27,7 @@ import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart";
|
||||
const Host = ({ params }) => {
|
||||
return (
|
||||
<div className="host-row">
|
||||
<a href={params.url} target="_blank">
|
||||
<a href={params.url} target="_blank" rel="noreferrer">
|
||||
<OpenInNewPage />
|
||||
</a>
|
||||
<div className="host-name">{params.title}</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,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,86 +0,0 @@
|
||||
import React from "react";
|
||||
import PlayGroundCharts from "./PlayGround-Charts";
|
||||
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 />
|
||||
<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