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

refactor: clean up code formatting and improve readability across multiple components

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-04-01 18:18:20 +01:00
parent d8aea2627b
commit ffa2d3f008
14 changed files with 118 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics.ts
View File

@@ -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

55
App/FeatureSet/Dashboard/src/Components/Monitor/MonitorCustomMetrics.tsx
View File

@@ -92,33 +92,35 @@ const MonitorCustomMetrics: FunctionComponent<ComponentProps> = (
const getQueryConfigs: () => Array<MetricQueryConfigData> =
(): Array<MetricQueryConfigData> => {
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<MetricViewData>({
@@ -132,9 +134,8 @@ const MonitorCustomMetrics: FunctionComponent<ComponentProps> = (
useEffect(() => {
if (customMetricNames.length > 0) {
setMetricViewData({
startAndEndDate: RangeStartAndEndDateTimeUtil.getStartAndEndDate(
timeRange,
),
startAndEndDate:
RangeStartAndEndDateTimeUtil.getStartAndEndDate(timeRange),
queryConfigs: getQueryConfigs(),
formulaConfigs: [],
});

21
App/FeatureSet/Dashboard/src/Pages/Monitor/View/Index.tsx
View File

@@ -359,8 +359,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (): 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<PageComponentProps> = (): 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<PageComponentProps> = (): 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={() => {

4
App/FeatureSet/StatusPage/src/Components/Monitor/MonitorOverview.tsx
View File

@@ -34,9 +34,7 @@ export interface ComponentProps {
defaultBarColor: Color;
uptimeHistoryDays?: number | undefined;
incidents?: Array<UptimeBarTooltipIncident> | undefined;
onIncidentClick?:
| ((incidentId: string) => void)
| undefined;
onIncidentClick?: ((incidentId: string) => void) | undefined;
}
const MonitorOverview: FunctionComponent<ComponentProps> = (

33
App/FeatureSet/StatusPage/src/Pages/Overview/Overview.tsx
View File

@@ -301,15 +301,15 @@ const Overview: FunctionComponent<PageComponentProps> = (
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<PageComponentProps> = (
currentStatus.color = Green;
}
const monitorId: string =
resource.monitor?._id?.toString() || "";
const monitorId: string = resource.monitor?._id?.toString() || "";
const monitorIncidents: Array<UptimeBarTooltipIncident> =
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(
<MonitorOverview
@@ -592,13 +589,11 @@ const Overview: FunctionComponent<PageComponentProps> = (
});
const groupIncidents: Array<UptimeBarTooltipIncident> =
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(
<MonitorOverview

6
Common/Server/API/StatusPageAPI.ts
View File

@@ -2169,8 +2169,10 @@ export default class StatusPageAPI extends BaseAPI<
},
});
// Fetch all incidents (active + resolved) in the timeline date range
// for the uptime bar tooltip and click-through
/*
* Fetch all incidents (active + resolved) in the timeline date range
* for the uptime bar tooltip and click-through
*/
let timelineIncidents: Array<Incident> = [];
if (
monitorsOnStatusPage.length > 0 &&

38
Common/Server/Services/IncidentService.ts
View File

@@ -2286,28 +2286,28 @@ ${incidentSeverity.name}
const metricTypesMap: Dictionary<MetricType> = {};
// 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(", "),

6
Common/Server/Utils/Profiling.ts
View File

@@ -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);

2
Common/Types/Date.ts
View File

@@ -1009,7 +1009,7 @@ export default class OneUptimeDate {
}
return (
moment(date).format(formatstring) +
moment(date).local().format(formatstring) +
" " +
(options?.onlyShowDate ? "" : this.getCurrentTimezoneString())
);

18
Common/UI/Components/Graphs/DayUptimeGraph.tsx
View File

@@ -33,9 +33,7 @@ export interface ComponentProps {
onBarClick?:
| ((date: Date, incidents: Array<UptimeBarTooltipIncident>) => void)
| undefined;
onIncidentClick?:
| ((incidentId: string) => void)
| undefined;
onIncidentClick?: ((incidentId: string) => void) | undefined;
}
const DayUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -66,11 +64,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
}
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<ComponentProps> = (
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<ComponentProps> = (
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 (
<Tooltip

65
Common/UI/Components/Graphs/UptimeBarTooltip.tsx
View File

@@ -16,9 +16,7 @@ export interface ComponentProps {
hasEvents: boolean;
statusDurations: Array<StatusDuration>;
incidents: Array<UptimeBarTooltipIncident>;
onIncidentClick?:
| ((incidentId: string) => void)
| undefined;
onIncidentClick?: ((incidentId: string) => void) | undefined;
}
const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
@@ -170,25 +168,23 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
backgroundColor: "#e5e7eb",
}}
>
{sortedDurations.map(
(status: StatusDuration, index: number) => {
const widthPercent: number =
(status.seconds / totalSeconds) * 100;
if (widthPercent < 0.5) {
return null;
}
return (
<div
key={index}
style={{
width: `${widthPercent}%`,
height: "100%",
backgroundColor: status.color.toString(),
}}
/>
);
},
)}
{sortedDurations.map((status: StatusDuration, index: number) => {
const widthPercent: number =
(status.seconds / totalSeconds) * 100;
if (widthPercent < 0.5) {
return null;
}
return (
<div
key={index}
style={{
width: `${widthPercent}%`,
height: "100%",
backgroundColor: status.color.toString(),
}}
/>
);
})}
</div>
) : (
<div
@@ -261,9 +257,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
>
{sortedDurations.map((status: StatusDuration, index: number) => {
const pct: number =
totalSeconds > 0
? (status.seconds / totalSeconds) * 100
: 0;
totalSeconds > 0 ? (status.seconds / totalSeconds) * 100 : 0;
return (
<div
key={index}
@@ -384,8 +378,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
</span>
</div>
{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<ComponentProps> = (
}}
onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
if (isClickable) {
(e.currentTarget as HTMLDivElement).style.backgroundColor =
"#f3f4f6";
(
e.currentTarget as HTMLDivElement
).style.backgroundColor = "#f3f4f6";
}
}}
onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
if (isClickable) {
(e.currentTarget as HTMLDivElement).style.backgroundColor =
"#fafafa";
(
e.currentTarget as HTMLDivElement
).style.backgroundColor = "#fafafa";
}
}}
>
@@ -495,8 +492,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
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<ComponentProps> = (
</div>
</div>
);
},
)}
})}
{props.incidents.length > 3 && (
<div

4
Common/UI/Components/MonitorGraphs/Uptime.tsx
View File

@@ -30,9 +30,7 @@ export interface ComponentProps {
defaultBarColor: Color;
incidents?: Array<UptimeBarTooltipIncident> | undefined;
onBarClick?: (date: Date, incidents: Array<UptimeBarTooltipIncident>) => void;
onIncidentClick?:
| ((incidentId: string) => void)
| undefined;
onIncidentClick?: ((incidentId: string) => void) | undefined;
}
const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (

4
Common/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx
View File

@@ -7,9 +7,7 @@ export interface ComponentProps {
date: Date;
incidents: Array<UptimeBarTooltipIncident>;
onClose: () => void;
onIncidentClick?:
| ((incidentId: string) => void)
| undefined;
onIncidentClick?: ((incidentId: string) => void) | undefined;
}
const UptimeBarDayModal: FunctionComponent<ComponentProps> = (

1
Telemetry/API/Pyroscope.ts
View File

@@ -59,5 +59,4 @@ router.post(
},
);
export default router;