Skip to content

Commit

Permalink
Refactor MonitorTestForm component to adjust margins and spacing
Browse files Browse the repository at this point in the history
simlarsen committed Oct 30, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
andrewxhill Andrew W. Hill
1 parent 771b0e4 commit 13dddab
Showing 3 changed files with 47 additions and 9 deletions.
19 changes: 12 additions & 7 deletions Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,10 @@ import MonitorType from "Common/Types/Monitor/MonitorType";
import BrowserType from "Common/Types/Monitor/SyntheticMonitors/BrowserType";
import Port from "Common/Types/Port";
import ScreenSizeType from "Common/Types/ScreenSizeType";
import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
import Button, {
ButtonSize,
ButtonStyleType,
} from "Common/UI/Components/Button/Button";
import CheckBoxList, {
CategoryCheckboxValue,
enumToCategoryCheckboxOption,
@@ -708,12 +711,14 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
)}

{/** Monitor Test Form */}

<MonitorTestForm
monitorSteps={props.allMonitorSteps}
monitorType={props.monitorType}
probes={props.probes}
/>
<div className="mt-5 mb-2">
<MonitorTestForm
monitorSteps={props.allMonitorSteps}
monitorType={props.monitorType}
probes={props.probes}
buttonSize={ButtonSize.Small}
/>
</div>

{/** Monitoring Critera Form */}

5 changes: 3 additions & 2 deletions Dashboard/src/Components/Form/Monitor/MonitorTest.tsx
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ export interface ComponentProps {
monitorSteps: MonitorSteps;
monitorType: MonitorType;
probes: Array<Probe>;
buttonSize: ButtonSize;
}

const MonitorTestForm: FunctionComponent<ComponentProps> = (
@@ -121,10 +122,10 @@ const MonitorTestForm: FunctionComponent<ComponentProps> = (

return (
<div>
<div className="-ml-3 mt-5 mb-2">
<div className="-ml-3 mr-2">
<Button
buttonStyle={ButtonStyleType.NORMAL}
buttonSize={ButtonSize.Small}
buttonSize={props.buttonSize}
title="Test Monitor"
icon={IconProp.Play}
onClick={() => {
32 changes: 32 additions & 0 deletions Dashboard/src/Pages/Monitor/View/Criteria.tsx
Original file line number Diff line number Diff line change
@@ -30,6 +30,10 @@ import React, {
useState,
} from "react";
import { useAsyncEffect } from "use-async-effect";
import MonitorTestForm from "../../../Components/Form/Monitor/MonitorTest";
import Probe from "Common/Models/DatabaseModels/Probe";
import ProbeUtil from "../../../Utils/Probe";
import { ButtonSize } from "Common/UI/Components/Button/Button";

const MonitorCriteria: FunctionComponent<
PageComponentProps
@@ -40,6 +44,8 @@ const MonitorCriteria: FunctionComponent<

const [error, setError] = useState<string>("");

const [probes, setProbes] = useState<Array<Probe>>([]);

const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
// get item.
setIsLoading(true);
@@ -60,6 +66,10 @@ const MonitorCriteria: FunctionComponent<
return;
}

const probes: Array<Probe> = await ProbeUtil.getAllProbes();

setProbes(probes);

setMonitorType(item.monitorType);
} catch (err) {
setError(API.getFriendlyMessage(err));
@@ -71,6 +81,10 @@ const MonitorCriteria: FunctionComponent<
undefined,
);

const [monitorSteps, setMonitorSteps] = useState<
MonitorStepsType | undefined
>(undefined);

useAsyncEffect(async () => {
// fetch the model
await fetchItem();
@@ -108,6 +122,16 @@ const MonitorCriteria: FunctionComponent<
cardProps={{
title: "Monitoring Criteria",
description: "Here is the criteria we use to monitor this resource.",
rightElement: monitorSteps ? (
<MonitorTestForm
buttonSize={ButtonSize.Normal}
monitorSteps={monitorSteps}
monitorType={monitorType}
probes={probes}
/>
) : (
<></>
),
}}
createEditModalWidth={ModalWidth.Large}
isEditable={true}
@@ -143,10 +167,18 @@ const MonitorCriteria: FunctionComponent<
},
},
]}
onSaveSuccess={async (item: Monitor) => {
setMonitorSteps(item.monitorSteps);
}}
modelDetailProps={{
showDetailsInNumberOfColumns: 1,
modelType: Monitor,
id: "model-detail-monitors",
onItemLoaded: (monitor: Monitor) => {
if (!monitorSteps) {
setMonitorSteps(monitor.monitorSteps);
}
},
fields: [
{
field: {

0 comments on commit 13dddab

Please sign in to comment.