github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: add probeName prop to monitor summary components for enhanced monitoring details

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-01-20 10:07:52 +00:00
parent 88c1e23da9
commit d29e876b96
9 changed files with 123 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dashboard/src/Components/Monitor/SummaryView/CustomCodeMonitorSummaryView.tsx
View File

@@ -7,6 +7,7 @@ import CustomMonitorSummaryView from "./CustomMonitorSummaryView";
export interface ComponentProps {
probeMonitorResponse: ProbeMonitorResponse;
moreDetailElement?: ReactElement | undefined;
probeName?: string | undefined;
}
const CustomCodeMonitorSummaryView: FunctionComponent<ComponentProps> = (
@@ -26,6 +27,7 @@ const CustomCodeMonitorSummaryView: FunctionComponent<ComponentProps> = (
customCodeMonitorResponse={customCodeMonitorResponse}
moreDetailElement={props.moreDetailElement}
monitoredAt={props.probeMonitorResponse.monitoredAt}
probeName={props.probeName}
/>
);
};

14
Dashboard/src/Components/Monitor/SummaryView/CustomMonitorSummaryView.tsx
View File

@@ -12,6 +12,7 @@ export interface ComponentProps {
customCodeMonitorResponse: CustomCodeMonitorResponse;
moreDetailElement?: ReactElement | undefined;
monitoredAt: Date;
probeName?: string | undefined;
}
const CustomMonitorSummaryView: FunctionComponent<ComponentProps> = (
@@ -71,20 +72,27 @@ const CustomMonitorSummaryView: FunctionComponent<ComponentProps> = (
<div className="space-y-5">
<div className="space-y-5">
<div className="flex space-x-3 w-full">
{props.probeName && (
<InfoCard
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Probe"
value={props.probeName || "-"}
/>
)}
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className={`${props.probeName ? "w-1/4" : "w-1/3"} shadow-none border-2 border-gray-100 `}
title="Execution Time (in ms)"
value={executionTimeInMS ? executionTimeInMS + " ms" : "-"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className={`${props.probeName ? "w-1/4" : "w-1/3"} shadow-none border-2 border-gray-100 `}
title="Error"
value={customCodeMonitorResponse.scriptError ? "Yes" : "No"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className={`${props.probeName ? "w-1/4" : "w-1/3"} shadow-none border-2 border-gray-100 `}
title="Monitored At"
value={
props.monitoredAt

12
Dashboard/src/Components/Monitor/SummaryView/PingMonitorView.tsx
View File

@@ -5,6 +5,7 @@ import React, { FunctionComponent, ReactElement } from "react";
export interface ComponentProps {
probeMonitorResponse: ProbeMonitorResponse;
probeName?: string | undefined;
}
const PingMonitorView: FunctionComponent<ComponentProps> = (
@@ -38,18 +39,23 @@ const PingMonitorView: FunctionComponent<ComponentProps> = (
</div>
<div className="flex space-x-3">
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Probe"
value={props.probeName || "-"}
/>
<InfoCard
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Status"
value={props.probeMonitorResponse.isOnline ? "Online" : "Offline"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Response Time (in ms)"
value={responseTimeInMs ? responseTimeInMs + " ms" : "-"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Monitored At"
value={
props.probeMonitorResponse?.monitoredAt

12
Dashboard/src/Components/Monitor/SummaryView/SSLCertificateMonitorView.tsx
View File

@@ -8,6 +8,7 @@ import React, { FunctionComponent, ReactElement } from "react";
export interface ComponentProps {
probeMonitorResponse: ProbeMonitorResponse;
probeName?: string | undefined;
}
const SSLCertificateMonitorView: FunctionComponent<ComponentProps> = (
@@ -38,13 +39,18 @@ const SSLCertificateMonitorView: FunctionComponent<ComponentProps> = (
</div>
<div className="flex space-x-3 w-full">
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Probe"
value={props.probeName || "-"}
/>
<InfoCard
className="w-1/4 shadow-none border-2 border-gray-100 "
title="SSL Status"
value={sslResponse.isSelfSigned ? "Self Signed" : "Signed by a CA"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Issued At"
value={
sslResponse.createdAt
@@ -56,7 +62,7 @@ const SSLCertificateMonitorView: FunctionComponent<ComponentProps> = (
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Expires At"
value={
sslResponse.expiresAt

1
Dashboard/src/Components/Monitor/SummaryView/Summary.tsx
View File

@@ -87,6 +87,7 @@ const Summary: FunctionComponent<ComponentProps> = (
<SummaryInfo
monitorType={props.monitorType}
probeMonitorResponses={probeResponses}
probeName={selectedProbe?.name?.toString()}
incomingMonitorRequest={props.incomingMonitorRequest}
serverMonitorResponse={props.serverMonitorResponse}
telemetryMonitorSummary={props.telemetryMonitorSummary}

14
Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx
View File

@@ -30,6 +30,7 @@ export interface ComponentProps {
serverMonitorResponse?: ServerMonitorResponse | undefined;
telemetryMonitorSummary?: TelemetryMonitorSummary | undefined;
evaluationSummary?: MonitorEvaluationSummary | undefined;
probeName?: string | undefined;
}
const SummaryInfo: FunctionComponent<ComponentProps> = (
@@ -65,6 +66,7 @@ const SummaryInfo: FunctionComponent<ComponentProps> = (
summaryComponent = (
<WebsiteMonitorSummaryView
probeMonitorResponse={probeMonitorResponse}
probeName={props.probeName}
/>
);
}
@@ -75,7 +77,10 @@ const SummaryInfo: FunctionComponent<ComponentProps> = (
props.monitorType === MonitorType.Port
) {
summaryComponent = (
<PingMonitorView probeMonitorResponse={probeMonitorResponse} />
<PingMonitorView
probeMonitorResponse={probeMonitorResponse}
probeName={props.probeName}
/>
);
}
@@ -83,13 +88,17 @@ const SummaryInfo: FunctionComponent<ComponentProps> = (
summaryComponent = (
<SSLCertificateMonitorView
probeMonitorResponse={probeMonitorResponse}
probeName={props.probeName}
/>
);
}
if (props.monitorType === MonitorType.SyntheticMonitor) {
summaryComponent = (
<SyntheticMonitorView probeMonitorResponse={probeMonitorResponse} />
<SyntheticMonitorView
probeMonitorResponse={probeMonitorResponse}
probeName={props.probeName}
/>
);
}
@@ -97,6 +106,7 @@ const SummaryInfo: FunctionComponent<ComponentProps> = (
summaryComponent = (
<CustomCodeMonitorSummaryView
probeMonitorResponse={probeMonitorResponse}
probeName={props.probeName}
/>
);
}

11
Dashboard/src/Components/Monitor/SummaryView/SyntheticMonitorView.tsx
View File

@@ -3,10 +3,12 @@ import SyntheticMonitorResponse from "Common/Types/Monitor/SyntheticMonitors/Syn
import ProbeMonitorResponse from "Common/Types/Probe/ProbeMonitorResponse";
import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
import HorizontalRule from "Common/UI/Components/HorizontalRule/HorizontalRule";
import InfoCard from "Common/UI/Components/InfoCard/InfoCard";
import React, { FunctionComponent, ReactElement } from "react";
export interface ComponentProps {
probeMonitorResponse: ProbeMonitorResponse;
probeName?: string | undefined;
}
const SyntheticMonitorView: FunctionComponent<ComponentProps> = (
@@ -25,7 +27,14 @@ const SyntheticMonitorView: FunctionComponent<ComponentProps> = (
props.probeMonitorResponse.syntheticMonitorResponse;
return (
<div>
<div className="space-y-5">
<div className="flex space-x-3">
<InfoCard
className="w-full shadow-none border-2 border-gray-100 "
title="Probe"
value={props.probeName || "-"}
/>
</div>
{syntheticMonitorResponses &&
syntheticMonitorResponses.map(
(

12
Dashboard/src/Components/Monitor/SummaryView/WebsiteMonitorView.tsx
View File

@@ -9,6 +9,7 @@ import React, { FunctionComponent, ReactElement } from "react";
export interface ComponentProps {
probeMonitorResponse: ProbeMonitorResponse;
probeName?: string | undefined;
}
const WebsiteMonitorSummaryView: FunctionComponent<ComponentProps> = (
@@ -61,17 +62,22 @@ const WebsiteMonitorSummaryView: FunctionComponent<ComponentProps> = (
</div>
<div className="flex space-x-3">
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Probe"
value={props.probeName || "-"}
/>
<InfoCard
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Response Status Code"
value={props.probeMonitorResponse?.responseCode?.toString() || "-"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Response Time (in ms)"
value={responseTimeInMs ? responseTimeInMs + " ms" : "-"}
/>
<InfoCard
className="w-1/3 shadow-none border-2 border-gray-100 "
className="w-1/4 shadow-none border-2 border-gray-100 "
title="Monitored At"
value={
props.probeMonitorResponse?.monitoredAt

61
Dashboard/src/Pages/Monitor/View/Logs.tsx
View File

@@ -1,9 +1,11 @@
import DisabledWarning from "../../../Components/Monitor/DisabledWarning";
import ProbeUtil from "../../../Utils/Probe";
import PageComponentProps from "../../PageComponentProps";
import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
import IconProp from "Common/Types/Icon/IconProp";
import MonitorType from "Common/Types/Monitor/MonitorType";
import MonitorType, { MonitorTypeHelper } from "Common/Types/Monitor/MonitorType";
import ObjectID from "Common/Types/ObjectID";
import Probe from "Common/Models/DatabaseModels/Probe";
import { ButtonStyleType } from "Common/UI/Components/Button/Button";
import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
import EmptyState from "Common/UI/Components/EmptyState/EmptyState";
@@ -41,6 +43,7 @@ const MonitorLogs: FunctionComponent<PageComponentProps> = (): ReactElement => {
const [showViewLogsModal, setShowViewLogsModal] = useState<boolean>(false);
const [logs, setLogs] = useState<JSONObject>({});
const [isLoading, setIsLoading] = useState<boolean>(true);
const [probes, setProbes] = useState<Array<Probe>>([]);
const [error, setError] = useState<string>("");
@@ -65,6 +68,15 @@ const MonitorLogs: FunctionComponent<PageComponentProps> = (): ReactElement => {
}
setMonitorType(item.monitorType);
// Fetch probes if this is a probeable monitor
if (
item.monitorType &&
MonitorTypeHelper.isProbableMonitor(item.monitorType)
) {
const fetchedProbes: Array<Probe> = await ProbeUtil.getAllProbes();
setProbes(fetchedProbes);
}
} catch (err) {
setError(API.getFriendlyMessage(err));
}
@@ -80,6 +92,20 @@ const MonitorLogs: FunctionComponent<PageComponentProps> = (): ReactElement => {
await fetchItem();
}, []);
const getProbeNameById = (probeId: string | undefined): string => {
if (!probeId) {
return "Unknown";
}
const probe: Probe | undefined = probes.find((p: Probe) => {
return p._id?.toString() === probeId.toString();
});
return probe?.name?.toString() || "Unknown";
};
const isProbableMonitor: boolean = monitorType
? MonitorTypeHelper.isProbableMonitor(monitorType)
: false;
const getPageContent: GetReactElementFunction = (): ReactElement => {
if (!monitorType || isLoading) {
return <ComponentLoader />;
@@ -165,6 +191,31 @@ const MonitorLogs: FunctionComponent<PageComponentProps> = (): ReactElement => {
title: "Monitored At",
type: FieldType.DateTime,
},
// Conditionally add Probe column for probeable monitors
...(isProbableMonitor
? [
{
field: {
logBody: true,
},
title: "Probe",
type: FieldType.Text,
getElement: (item: MonitorLog): ReactElement => {
const probeId: string | undefined = (
item.logBody as unknown as {
probeId?: string | undefined;
}
)?.probeId;
const probeName: string = getProbeNameById(probeId);
return (
<span className="text-sm text-gray-700">{probeName}</span>
);
},
},
]
: []),
{
field: {
logBody: true,
@@ -239,6 +290,14 @@ const MonitorLogs: FunctionComponent<PageComponentProps> = (): ReactElement => {
probeMonitorResponses={[logs as unknown as ProbeMonitorResponse]}
incomingMonitorRequest={logs as unknown as IncomingMonitorRequest}
serverMonitorResponse={logs as unknown as ServerMonitorResponse}
probeName={
isProbableMonitor
? getProbeNameById(
(logs as unknown as { probeId?: string | undefined })
?.probeId,
)
: undefined
}
evaluationSummary={
(
logs as unknown as {