From ffa2d3f008f191e6b5707a1cfdbe3d1ea96444c6 Mon Sep 17 00:00:00 2001 From: Nawaz Dhandala Date: Wed, 1 Apr 2026 18:18:20 +0100 Subject: [PATCH] refactor: clean up code formatting and improve readability across multiple components --- .../src/Components/Metrics/Utils/Metrics.ts | 3 +- .../Monitor/MonitorCustomMetrics.tsx | 55 ++++++++-------- .../src/Pages/Monitor/View/Index.tsx | 21 ++---- .../Components/Monitor/MonitorOverview.tsx | 4 +- .../src/Pages/Overview/Overview.tsx | 33 ++++------ Common/Server/API/StatusPageAPI.ts | 6 +- Common/Server/Services/IncidentService.ts | 38 +++++------ Common/Server/Utils/Profiling.ts | 6 +- Common/Types/Date.ts | 2 +- .../UI/Components/Graphs/DayUptimeGraph.tsx | 18 ++--- .../UI/Components/Graphs/UptimeBarTooltip.tsx | 65 +++++++++---------- Common/UI/Components/MonitorGraphs/Uptime.tsx | 4 +- .../MonitorGraphs/UptimeBarDayModal.tsx | 4 +- Telemetry/API/Pyroscope.ts | 1 - 14 files changed, 118 insertions(+), 142 deletions(-) diff --git a/App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics.ts b/App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics.ts index 2d57948f80..02abf10702 100644 --- a/App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics.ts +++ b/App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics.ts @@ -34,7 +34,8 @@ export default class MetricUtil { projectId: ProjectUtil.getCurrentProjectId()!, time: metricViewData.startAndEndDate!, name: queryConfig.metricQueryData.filterData.metricName!, - attributes: queryConfig.metricQueryData.filterData.attributes as any, + attributes: queryConfig.metricQueryData.filterData + .attributes as any, }, aggregationType: (queryConfig.metricQueryData.filterData diff --git a/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorCustomMetrics.tsx b/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorCustomMetrics.tsx index 7c0aa9a607..facea50c8a 100644 --- a/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorCustomMetrics.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Monitor/MonitorCustomMetrics.tsx @@ -92,33 +92,35 @@ const MonitorCustomMetrics: FunctionComponent = ( const getQueryConfigs: () => Array = (): Array => { - return customMetricNames.map((metricName: string): MetricQueryConfigData => { - const displayName: string = metricName.replace("custom.monitor.", ""); + return customMetricNames.map( + (metricName: string): MetricQueryConfigData => { + const displayName: string = metricName.replace("custom.monitor.", ""); - return { - metricAliasData: { - metricVariable: metricName, - title: displayName, - description: `Custom metric: ${displayName}`, - legend: displayName, - legendUnit: "", - }, - metricQueryData: { - filterData: { - metricName: metricName, - attributes: { - monitorId: props.monitorId.toString(), - projectId: - ProjectUtil.getCurrentProjectId()?.toString() || "", + return { + metricAliasData: { + metricVariable: metricName, + title: displayName, + description: `Custom metric: ${displayName}`, + legend: displayName, + legendUnit: "", + }, + metricQueryData: { + filterData: { + metricName: metricName, + attributes: { + monitorId: props.monitorId.toString(), + projectId: + ProjectUtil.getCurrentProjectId()?.toString() || "", + }, + aggegationType: AggregationType.Avg, + }, + groupBy: { + attributes: true, }, - aggegationType: AggregationType.Avg, }, - groupBy: { - attributes: true, - }, - }, - }; - }); + }; + }, + ); }; const [metricViewData, setMetricViewData] = useState({ @@ -132,9 +134,8 @@ const MonitorCustomMetrics: FunctionComponent = ( useEffect(() => { if (customMetricNames.length > 0) { setMetricViewData({ - startAndEndDate: RangeStartAndEndDateTimeUtil.getStartAndEndDate( - timeRange, - ), + startAndEndDate: + RangeStartAndEndDateTimeUtil.getStartAndEndDate(timeRange), queryConfigs: getQueryConfigs(), formulaConfigs: [], }); diff --git a/App/FeatureSet/Dashboard/src/Pages/Monitor/View/Index.tsx b/App/FeatureSet/Dashboard/src/Pages/Monitor/View/Index.tsx index 69b4e754b4..d2a8b7c198 100644 --- a/App/FeatureSet/Dashboard/src/Pages/Monitor/View/Index.tsx +++ b/App/FeatureSet/Dashboard/src/Pages/Monitor/View/Index.tsx @@ -359,8 +359,7 @@ const MonitorView: FunctionComponent = (): ReactElement => { ? { name: incident.currentIncidentState.name || "", color: - incident.currentIncidentState.color || - new Color("#000000"), + incident.currentIncidentState.color || new Color("#000000"), } : undefined, monitorIds: (incident.monitors || []).map((m: Monitor) => { @@ -691,12 +690,9 @@ const MonitorView: FunctionComponent = (): ReactElement => { incidents={timelineIncidents} onIncidentClick={(incidentId: string) => { Navigation.navigate( - RouteUtil.populateRouteParams( - RouteMap[PageMap.INCIDENT_VIEW]!, - { - modelId: new ObjectID(incidentId), - }, - ), + RouteUtil.populateRouteParams(RouteMap[PageMap.INCIDENT_VIEW]!, { + modelId: new ObjectID(incidentId), + }), ); }} onBarClick={( @@ -715,12 +711,9 @@ const MonitorView: FunctionComponent = (): ReactElement => { incidents={selectedDayIncidents} onIncidentClick={(incidentId: string) => { Navigation.navigate( - RouteUtil.populateRouteParams( - RouteMap[PageMap.INCIDENT_VIEW]!, - { - modelId: new ObjectID(incidentId), - }, - ), + RouteUtil.populateRouteParams(RouteMap[PageMap.INCIDENT_VIEW]!, { + modelId: new ObjectID(incidentId), + }), ); }} onClose={() => { diff --git a/App/FeatureSet/StatusPage/src/Components/Monitor/MonitorOverview.tsx b/App/FeatureSet/StatusPage/src/Components/Monitor/MonitorOverview.tsx index 8d9dffeb43..b58dcb86f9 100644 --- a/App/FeatureSet/StatusPage/src/Components/Monitor/MonitorOverview.tsx +++ b/App/FeatureSet/StatusPage/src/Components/Monitor/MonitorOverview.tsx @@ -34,9 +34,7 @@ export interface ComponentProps { defaultBarColor: Color; uptimeHistoryDays?: number | undefined; incidents?: Array | undefined; - onIncidentClick?: - | ((incidentId: string) => void) - | undefined; + onIncidentClick?: ((incidentId: string) => void) | undefined; } const MonitorOverview: FunctionComponent = ( diff --git a/App/FeatureSet/StatusPage/src/Pages/Overview/Overview.tsx b/App/FeatureSet/StatusPage/src/Pages/Overview/Overview.tsx index 5adec3d35d..a45aa21d7e 100644 --- a/App/FeatureSet/StatusPage/src/Pages/Overview/Overview.tsx +++ b/App/FeatureSet/StatusPage/src/Pages/Overview/Overview.tsx @@ -301,15 +301,15 @@ const Overview: FunctionComponent = ( incidentSeverity: incident.incidentSeverity ? { name: incident.incidentSeverity.name || "", - color: incident.incidentSeverity.color || new Color("#000000"), + color: + incident.incidentSeverity.color || new Color("#000000"), } : undefined, currentIncidentState: incident.currentIncidentState ? { name: incident.currentIncidentState.name || "", color: - incident.currentIncidentState.color || - new Color("#000000"), + incident.currentIncidentState.color || new Color("#000000"), } : undefined, monitorIds: (incident.monitors || []).map((m: Monitor) => { @@ -505,17 +505,14 @@ const Overview: FunctionComponent = ( currentStatus.color = Green; } - const monitorId: string = - resource.monitor?._id?.toString() || ""; + const monitorId: string = resource.monitor?._id?.toString() || ""; const monitorIncidents: Array = - timelineIncidents.filter( - (incident: UptimeBarTooltipIncident) => { - return incident.monitorIds.some((id: ObjectID) => { - return id.toString() === monitorId; - }); - }, - ); + timelineIncidents.filter((incident: UptimeBarTooltipIncident) => { + return incident.monitorIds.some((id: ObjectID) => { + return id.toString() === monitorId; + }); + }); elements.push( = ( }); const groupIncidents: Array = - timelineIncidents.filter( - (incident: UptimeBarTooltipIncident) => { - return incident.monitorIds.some((id: ObjectID) => { - return groupMonitorIds.includes(id.toString()); - }); - }, - ); + timelineIncidents.filter((incident: UptimeBarTooltipIncident) => { + return incident.monitorIds.some((id: ObjectID) => { + return groupMonitorIds.includes(id.toString()); + }); + }); elements.push( = []; if ( monitorsOnStatusPage.length > 0 && diff --git a/Common/Server/Services/IncidentService.ts b/Common/Server/Services/IncidentService.ts index d90920a9ee..673e6db582 100644 --- a/Common/Server/Services/IncidentService.ts +++ b/Common/Server/Services/IncidentService.ts @@ -2286,28 +2286,28 @@ ${incidentSeverity.name} const metricTypesMap: Dictionary = {}; - // common attributes shared by all incident metrics - // All values must be strings for ClickHouse Map(String, String) storage. - // Arrays are joined as comma-separated strings. + /* + * common attributes shared by all incident metrics + * All values must be strings for ClickHouse Map(String, String) storage. + * Arrays are joined as comma-separated strings. + */ const baseMetricAttributes: JSONObject = { incidentId: data.incidentId.toString(), projectId: incident.projectId.toString(), - monitorIds: - ( - incident.monitors - ?.map((monitor: Monitor) => { - return monitor._id?.toString(); - }) - .filter(Boolean) || [] - ).join(", "), - monitorNames: - ( - incident.monitors - ?.map((monitor: Monitor) => { - return monitor.name?.toString(); - }) - .filter(Boolean) || [] - ).join(", "), + monitorIds: ( + incident.monitors + ?.map((monitor: Monitor) => { + return monitor._id?.toString(); + }) + .filter(Boolean) || [] + ).join(", "), + monitorNames: ( + incident.monitors + ?.map((monitor: Monitor) => { + return monitor.name?.toString(); + }) + .filter(Boolean) || [] + ).join(", "), incidentSeverityId: incident.incidentSeverity?._id?.toString(), incidentSeverityName: incident.incidentSeverity?.name?.toString(), ownerUserIds: ownerUserIds.join(", "), diff --git a/Common/Server/Utils/Profiling.ts b/Common/Server/Utils/Profiling.ts index d781581623..5b99600b2c 100644 --- a/Common/Server/Utils/Profiling.ts +++ b/Common/Server/Utils/Profiling.ts @@ -59,8 +59,10 @@ export default class Profiling { return undefined; } - // Strip /otlp suffix if present and append /pyroscope - // The Pyroscope SDK appends /ingest, so the final URL will be /pyroscope/ingest + /* + * Strip /otlp suffix if present and append /pyroscope + * The Pyroscope SDK appends /ingest, so the final URL will be /pyroscope/ingest + */ let baseUrl: string = endpoint; if (baseUrl.endsWith("/otlp")) { baseUrl = baseUrl.substring(0, baseUrl.length - 5); diff --git a/Common/Types/Date.ts b/Common/Types/Date.ts index 58cb9955a8..ecf17998eb 100644 --- a/Common/Types/Date.ts +++ b/Common/Types/Date.ts @@ -1009,7 +1009,7 @@ export default class OneUptimeDate { } return ( - moment(date).format(formatstring) + + moment(date).local().format(formatstring) + " " + (options?.onlyShowDate ? "" : this.getCurrentTimezoneString()) ); diff --git a/Common/UI/Components/Graphs/DayUptimeGraph.tsx b/Common/UI/Components/Graphs/DayUptimeGraph.tsx index 6ee0702fd6..c3f40c266a 100644 --- a/Common/UI/Components/Graphs/DayUptimeGraph.tsx +++ b/Common/UI/Components/Graphs/DayUptimeGraph.tsx @@ -33,9 +33,7 @@ export interface ComponentProps { onBarClick?: | ((date: Date, incidents: Array) => void) | undefined; - onIncidentClick?: - | ((incidentId: string) => void) - | undefined; + onIncidentClick?: ((incidentId: string) => void) | undefined; } const DayUptimeGraph: FunctionComponent = ( @@ -66,11 +64,7 @@ const DayUptimeGraph: FunctionComponent = ( } return props.incidents.filter((incident: UptimeBarTooltipIncident) => { - return OneUptimeDate.isBetween( - incident.declaredAt, - startOfDay, - endOfDay, - ); + return OneUptimeDate.isBetween(incident.declaredAt, startOfDay, endOfDay); }); }; @@ -179,7 +173,8 @@ const DayUptimeGraph: FunctionComponent = ( const eventStatusId: string = key; - const isDowntimeEvent: boolean = downtimeStatusIds.includes(eventStatusId); + const isDowntimeEvent: boolean = + downtimeStatusIds.includes(eventStatusId); if (isDowntimeEvent) { const secondsOfDowntime: number = secondsOfEvent[key] || 0; @@ -236,14 +231,13 @@ const DayUptimeGraph: FunctionComponent = ( statusDurations.push({ label: eventLabels[key] || "Unknown", seconds: secondsOfEvent[key] || 0, - color: eventColors[key] || (props.defaultBarColor || Green), + color: eventColors[key] || props.defaultBarColor || Green, isDowntime: downtimeStatusIds.includes(key), }); } const hasDayIncidents: boolean = dayIncidents.length > 0; - const isClickable: boolean = - hasDayIncidents && Boolean(props.onBarClick); + const isClickable: boolean = hasDayIncidents && Boolean(props.onBarClick); return ( ; incidents: Array; - onIncidentClick?: - | ((incidentId: string) => void) - | undefined; + onIncidentClick?: ((incidentId: string) => void) | undefined; } const UptimeBarTooltip: FunctionComponent = ( @@ -170,25 +168,23 @@ const UptimeBarTooltip: FunctionComponent = ( backgroundColor: "#e5e7eb", }} > - {sortedDurations.map( - (status: StatusDuration, index: number) => { - const widthPercent: number = - (status.seconds / totalSeconds) * 100; - if (widthPercent < 0.5) { - return null; - } - return ( -
- ); - }, - )} + {sortedDurations.map((status: StatusDuration, index: number) => { + const widthPercent: number = + (status.seconds / totalSeconds) * 100; + if (widthPercent < 0.5) { + return null; + } + return ( +
+ ); + })}
) : (
= ( > {sortedDurations.map((status: StatusDuration, index: number) => { const pct: number = - totalSeconds > 0 - ? (status.seconds / totalSeconds) * 100 - : 0; + totalSeconds > 0 ? (status.seconds / totalSeconds) * 100 : 0; return (
= (
- {props.incidents.slice(0, 3).map( - (incident: UptimeBarTooltipIncident) => { + {props.incidents + .slice(0, 3) + .map((incident: UptimeBarTooltipIncident) => { const isClickable: boolean = Boolean(props.onIncidentClick); return ( @@ -410,14 +405,16 @@ const UptimeBarTooltip: FunctionComponent = ( }} onMouseEnter={(e: React.MouseEvent) => { if (isClickable) { - (e.currentTarget as HTMLDivElement).style.backgroundColor = - "#f3f4f6"; + ( + e.currentTarget as HTMLDivElement + ).style.backgroundColor = "#f3f4f6"; } }} onMouseLeave={(e: React.MouseEvent) => { if (isClickable) { - (e.currentTarget as HTMLDivElement).style.backgroundColor = - "#fafafa"; + ( + e.currentTarget as HTMLDivElement + ).style.backgroundColor = "#fafafa"; } }} > @@ -495,8 +492,7 @@ const UptimeBarTooltip: FunctionComponent = ( style={{ fontSize: "9px", fontWeight: 600, - color: - incident.currentIncidentState.color.toString(), + color: incident.currentIncidentState.color.toString(), backgroundColor: incident.currentIncidentState.color.toString() + "14", @@ -526,8 +522,7 @@ const UptimeBarTooltip: FunctionComponent = (
); - }, - )} + })} {props.incidents.length > 3 && (
| undefined; onBarClick?: (date: Date, incidents: Array) => void; - onIncidentClick?: - | ((incidentId: string) => void) - | undefined; + onIncidentClick?: ((incidentId: string) => void) | undefined; } const MonitorUptimeGraph: FunctionComponent = ( diff --git a/Common/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx b/Common/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx index 34b8b516c3..6b54424176 100644 --- a/Common/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx +++ b/Common/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx @@ -7,9 +7,7 @@ export interface ComponentProps { date: Date; incidents: Array; onClose: () => void; - onIncidentClick?: - | ((incidentId: string) => void) - | undefined; + onIncidentClick?: ((incidentId: string) => void) | undefined; } const UptimeBarDayModal: FunctionComponent = ( diff --git a/Telemetry/API/Pyroscope.ts b/Telemetry/API/Pyroscope.ts index 2bd60069ec..2b52b48895 100644 --- a/Telemetry/API/Pyroscope.ts +++ b/Telemetry/API/Pyroscope.ts @@ -59,5 +59,4 @@ router.post( }, ); - export default router;