mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 23:30:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add checkbox lists for browser type and screen type in SyntheticMonitor

Browse Source 
This commit adds checkbox lists for selecting the browser type and screen type in the SyntheticMonitor step of the MonitorStep component. This allows users to choose the desired browser and screen type for running the test in SyntheticMonitor.
This commit is contained in:
Simon Larsen 2024-05-20 21:37:27 +01:00
parent d23c62d30a
commit a2033b94dd
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
5 changed files with 61 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Common/Types/BrowserType.ts Normal file
View File

@ -0,0 +1,7 @@
export enum BrowserType {
Chrome = 'Chrome',
Firefox = 'Firefox',
Safari = 'Safari',
}
export default BrowserType;

3
Common/Types/Monitor/SyntheticMonitors/BrowserType.ts Normal file
View File

@ -0,0 +1,3 @@
import BrowserType from "../../BrowserType";
export default BrowserType;

3
Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts Normal file
View File

@ -0,0 +1,3 @@
import ScreenSizeType from "../../ScreenSizeType";
export default ScreenSizeType;

7
Common/Types/ScreenSizeType.ts Normal file
View File

@ -0,0 +1,7 @@
enum ScreenSizeType {
Mobile = 'Mobile',
Tablet = 'Tablet',
Desktop = 'Desktop'
}
export default ScreenSizeType;

45
Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
View File

@ -27,6 +27,7 @@ import HorizontalRule from 'CommonUI/src/Components/HorizontalRule/HorizontalRul
import Exception from 'Common/Types/Exception/Exception';
import Hostname from 'Common/Types/API/Hostname';
import Port from 'Common/Types/Port';
import CheckBoxList from 'CommonUI/src/Components/CategoryCheckbox/CheckboxList';
export interface ComponentProps {
monitorStatusDropdownOptions: Array<DropdownOption>;
@ -274,7 +275,7 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
) => {
monitorStep.setRequestType(
(value?.toString() as HTTPMethod) ||
HTTPMethod.GET
HTTPMethod.GET
);
setMonitorStep(
MonitorStep.clone(monitorStep)
@ -345,7 +346,7 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
}}
error={
touched['requestBody'] &&
errors['requestBody']
errors['requestBody']
? errors['requestBody']
: undefined
}
@ -382,13 +383,13 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
<FieldLabelElement
title={
props.monitorType ===
MonitorType.CustomJavaScriptCode
MonitorType.CustomJavaScriptCode
? 'JavaScript Code'
: 'Playwright Code'
}
description={
props.monitorType ===
MonitorType.CustomJavaScriptCode
MonitorType.CustomJavaScriptCode
? 'Write your JavaScript code here.'
: 'Write your Playwright code here. Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.'
}
@ -407,6 +408,42 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
</div>
)}
{props.monitorType === MonitorType.SyntheticMonitor && (
<div className="mt-5">
<FieldLabelElement
title={
'Browser Type'
}
description={
'Select the browser type.'
}
required={true}
/>
<div className="mt-1">
<CheckBoxList />
</div>
</div>
)}
{props.monitorType === MonitorType.SyntheticMonitor && (
<div className="mt-5">
<FieldLabelElement
title={
'Screen Type'
}
description={
'Which screen type should we use to run this test?'
}
required={true}
/>
<div className="mt-1">
<CheckBoxList />
</div>
</div>
)}
<div className="mt-5">
{props.monitorType !== MonitorType.IncomingRequest && (
<FieldLabelElement