Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create status page PR1 #1493

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+231 −14
Open

Create status page PR1 #1493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions Client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions Client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@
"@reduxjs/toolkit": "2.5.0",
"axios": "^1.7.4",
"dayjs": "1.11.13",
"immutability-helper": "^3.1.1",
"joi": "17.13.3",
"jwt-decode": "^4.0.0",
"react": "^18.2.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-redux": "9.2.0",
"react-router": "^6.23.0",
Expand Down
7 changes: 6 additions & 1 deletion Client/src/Components/Inputs/Checkbox/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import "./index.css";
* @param {string} [props.value] - Optional value associated with the checkbox
* @param {Function} [props.onChange] - Callback function triggered when checkbox state changes
* @param {boolean} [props.isDisabled] - Determines if the checkbox is disabled
* @param {boolean} [props.alignSelf] - Whether the checkbox label should be positioned on flex-start.
*
* @returns {React.ReactElement} Rendered Checkbox component
*
Expand All @@ -42,6 +43,7 @@ import "./index.css";
* isChecked={isAdvanced}
* isDisabled={!canModify}
* onChange={handleAdvancedToggle}
* alignSelf = {alignSelf}
* />
*/
const Checkbox = ({
Expand All @@ -53,10 +55,12 @@ const Checkbox = ({
value,
onChange,
isDisabled,
alignSelf
}) => {
/* TODO move sizes to theme */
const sizes = { small: "14px", medium: "16px", large: "18px" };
const theme = useTheme();
const override = alignSelf? { alignSelf: "flex-start" } : {}
return (
<FormControlLabel
className="checkbox-wrapper"
Expand All @@ -75,7 +79,7 @@ const Checkbox = ({
sx={{
"&:hover": { backgroundColor: "transparent" },
"& svg": { width: sizes[size], height: sizes[size] },
alignSelf: "flex-start",
...override
}}
/>
}
Expand Down Expand Up @@ -114,6 +118,7 @@ Checkbox.propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
isDisabled: PropTypes.bool,
alignSelf: PropTypes.bool,
};

export default Checkbox;
30 changes: 25 additions & 5 deletions Client/src/Components/Inputs/Image/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,15 @@ import { checkImage } from "../../../Utils/fileUtils";
* @param {string} props.id - The unique identifier for the input field.
* @param {string} props.src - The URL of the image to display.
* @param {function} props.onChange - The function to handle file input change.
* @param {string} props.isRound - The shape of the image to display.
* @returns {JSX.Element} The rendered component.
*/

const ImageField = ({ id, src, loading, onChange }) => {
const ImageField = ({ id, src, loading, onChange, error, isRound = true }) => {
const theme = useTheme();
const error_border_style = error ? { borderColor: theme.palette.error.main } : {};

const roundShape = isRound ? { borderRadius: "50%" } : {};

const [isDragging, setIsDragging] = useState(false);
const handleDragEnter = () => {
Expand All @@ -28,7 +32,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
return (
<>
{!checkImage(src) || loading ? (
<>
<>
<Box
className="image-field-wrapper"
mt={theme.spacing(8)}
Expand All @@ -46,6 +50,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
borderColor: theme.palette.primary.main,
backgroundColor: "hsl(215, 87%, 51%, 0.05)",
},
...error_border_style
}}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
Expand All @@ -62,6 +67,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
cursor: "pointer",
maxWidth: "500px",
minHeight: "175px",
zIndex: 1,
},
"& fieldset": {
padding: 0,
Expand All @@ -78,7 +84,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: "-1",
zIndex: 0,
width: "100%",
}}
>
Expand Down Expand Up @@ -113,7 +119,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
>
(maximum size: 3MB)
</Typography>
</Stack>
</Stack>
</Box>
<Typography
component="p"
Expand All @@ -122,6 +128,19 @@ const ImageField = ({ id, src, loading, onChange }) => {
>
Supported formats: JPG, PNG
</Typography>
{error && (
<Typography
component="span"
className="input-error"
color={theme.palette.error.main}
mt={theme.spacing(2)}
sx={{
opacity: 0.8,
}}
>
{error}
</Typography>
)}
</>
) : (
<Stack
Expand All @@ -132,10 +151,10 @@ const ImageField = ({ id, src, loading, onChange }) => {
sx={{
width: "250px",
height: "250px",
borderRadius: "50%",
overflow: "hidden",
backgroundImage: `url(${src})`,
backgroundSize: "cover",
...roundShape,
}}
></Box>
</Stack>
Expand All @@ -148,6 +167,7 @@ ImageField.propTypes = {
id: PropTypes.string.isRequired,
src: PropTypes.string,
onChange: PropTypes.func.isRequired,
isRound: PropTypes.bool,
};

export default ImageField;
43 changes: 40 additions & 3 deletions Client/src/Components/Inputs/TextInput/Adornments/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { useState } from "react";
import PropTypes from "prop-types";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import Visibility from "@mui/icons-material/Visibility";
export const HttpAdornment = ({ https }) => {
import ReorderRoundedIcon from '@mui/icons-material/ReorderRounded';
import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react";

export const HttpAdornment = ({ https, prefix }) => {
const theme = useTheme();
return (
<Stack
Expand All @@ -23,14 +25,15 @@ export const HttpAdornment = ({ https }) => {
color={theme.palette.text.secondary}
sx={{ lineHeight: 1, opacity: 0.8 }}
>
{https ? "https" : "http"}://
{prefix !== undefined ? prefix : https ? "https://" : "http://"}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the purpose of adding the prefix prop here? I'm not sure I understand the use case, could you elaborate?

</Typography>
</Stack>
);
};

HttpAdornment.propTypes = {
https: PropTypes.bool.isRequired,
prefix: PropTypes.string,
};

export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
Expand Down Expand Up @@ -63,3 +66,37 @@ PasswordEndAdornment.propTypes = {
fieldType: PropTypes.string,
setFieldType: PropTypes.func,
};

export const ServerStartAdornment = () => {
return (
<InputAdornment position="start">
<ReorderRoundedIcon />
</InputAdornment>
);
};

export const ServerEndAdornment = ({ id, removeItem }) => {
const theme = useTheme();
return (
<InputAdornment position="end">
<IconButton
aria-label="remove server"
onClick={() => removeItem(id)}
sx={{
color: theme.palette.border.dark,
padding: theme.spacing(1),
"&:focus-visible": {
outline: `2px solid ${theme.palette.primary.main}`,
outlineOffset: `2px`,
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
>
<DeleteIcon />
</IconButton>
</InputAdornment>
);
};
2 changes: 1 addition & 1 deletion Client/src/Components/ProgressBars/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>

ProgressUpload.propTypes = {
icon: PropTypes.element, // JSX element for the icon (optional)
label: PropTypes.string.isRequired, // Label text for the progress item
label: PropTypes.string, // Label text for the progress item
size: PropTypes.string.isRequired, // Size information for the progress item
progress: PropTypes.number.isRequired, // Current progress value (0-100)
onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button
Expand Down
20 changes: 20 additions & 0 deletions Client/src/Utils/NetworkService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -846,6 +846,26 @@ class NetworkService {
"https://api.github.com/repos/bluewave-labs/bluewave-uptime/releases/latest"
);
}

async getStatusPageByUrl(config) {
const { url, authToken } = config;
return this.axiosInstance.get(`/status-page/${url}`, {
headers: {
Authorization: `Bearer ${authToken}`,
"Content-Type": "application/json",
},
});
}

async createStatusPage(config) {
const { url, authToken, data } = config;
return this.axiosInstance.post(`/status-page/${url}`, data, {
headers: {
Authorization: `Bearer ${authToken}`,
"Content-Type": "application/json",
},
});
}
}

export default NetworkService;
Expand Down
Loading
Loading