mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-04-29 21:20:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added pulse dot effect to the rest of monitor pages

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-22 12:11:56 -04:00
parent 122d9d8f56
commit 35ae180865
4 changed files with 86 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/src/Pages/Monitors/Configure/index.jsx
+28 -4
View File
@@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
import Button from "../../../Components/Button";
import Field from "../../../Components/Inputs/Field";
import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import { monitorValidation } from "../../../Validation/validation";
import Select from "../../../Components/Inputs/Select";
@@ -229,8 +227,34 @@ const Configure = () => {
gap={theme.gap.large}
flex={1}
>
<Stack direction="row" gap={theme.gap.small}>
{monitor?.status ? <GreenCheck /> : <RedCheck />}
<Stack direction="row" gap={theme.gap.xs}>
<Stack
width={theme.gap.large}
height={theme.gap.large}
alignItems="center"
justifyContent="center"
>
<Box
width="14px"
height="14px"
sx={{
position: "relative",
backgroundColor: monitor?.status
? theme.label.up.dotColor
: theme.label.down.dotColor,
borderRadius: "50%",
"&::before": {
content: `""`,
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: "inherit",
borderRadius: "50%",
animation: "ripple 1.8s ease-out infinite",
},
}}
/>
</Stack>
<Box>
{parsedUrl?.host ? (
<Typography component="h1" mb={theme.gap.xs} lineHeight={1}>
Client/src/Pages/Monitors/Details/index.jsx
-2
View File
@@ -7,8 +7,6 @@ import { networkService } from "../../../main";
import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
import ButtonGroup from "@mui/material/ButtonGroup";
import Button from "../../../Components/Button";
import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
import PaginationTable from "./PaginationTable";
import {
Client/src/Pages/PageSpeed/Configure/index.jsx
+28 -2
View File
@@ -168,8 +168,34 @@ const PageSpeedConfigure = () => {
flex={1}
gap={theme.gap.large}
>
<Stack direction="row" gap={theme.gap.small}>
{monitor?.status ? <GreenCheck /> : <RedCheck />}
<Stack direction="row" gap={theme.gap.xs}>
<Stack
width={theme.gap.large}
height={theme.gap.large}
alignItems="center"
justifyContent="center"
>
<Box
width="14px"
height="14px"
sx={{
position: "relative",
backgroundColor: monitor?.status
? theme.label.up.dotColor
: theme.label.down.dotColor,
borderRadius: "50%",
"&::before": {
content: `""`,
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: "inherit",
borderRadius: "50%",
animation: "ripple 1.8s ease-out infinite",
},
}}
/>
</Stack>
<Box>
<Typography
component="h1"
Client/src/Pages/PageSpeed/Details/index.jsx
+30 -6
View File
@@ -1,3 +1,4 @@
import PropTypes from "prop-types";
import { Box, Skeleton, Stack, Typography } from "@mui/material";
import { PieChart } from "@mui/x-charts/PieChart";
import { useDrawingArea } from "@mui/x-charts";
@@ -9,19 +10,16 @@ import {
formatDuration,
formatDurationRounded,
} from "../../../Utils/timeUtils";
import { logger } from "../../../Utils/Logger";
import { networkService } from "../../../main";
import Button from "../../../Components/Button";
import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
import ClockIcon from "../../../assets/icons/maintenance.svg?react";
import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import "./index.css";
import PropTypes from "prop-types";
import { logger } from "../../../Utils/Logger";
const StatBox = ({ icon, title, value }) => {
const theme = useTheme();
@@ -325,8 +323,34 @@ const PageSpeedDetails = () => {
{ name: "details", path: `/pagespeed/${monitorId}` },
]}
/>
<Stack direction="row" gap={theme.gap.small}>
{monitor?.status ? <GreenCheck /> : <RedCheck />}
<Stack direction="row" gap={theme.gap.xs}>
<Stack
width={theme.gap.large}
height={theme.gap.large}
alignItems="center"
justifyContent="center"
>
<Box
width="14px"
height="14px"
sx={{
position: "relative",
backgroundColor: monitor?.status
? theme.label.up.dotColor
: theme.label.down.dotColor,
borderRadius: "50%",
"&::before": {
content: `""`,
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: "inherit",
borderRadius: "50%",
animation: "ripple 1.8s ease-out infinite",
},
}}
/>
</Stack>
<Box>
<Typography
component="h1"